/* site.css — стили главной; ?ver= в HTML сбрасывает кэш.
   Шрифт: подключай assets/fonts.css отдельно в HTML. */

:root{ --px: 3; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  [hidden]{ display:none !important; }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  html,body{
    height:100%;
    background:#07080a;
  }
  body{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace;
    color:#c8c4b8; overflow-x:hidden; overflow-y:auto;
    -webkit-user-select:none; user-select:none; touch-action:manipulation;
    min-height:100%;
    min-height:100dvh;
  }
  /* фон: LCP — <img>, не CSS-background (раньше discovery + меньше вес на мобилке) */
  #hero{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:#07080a;
  }
  #hero picture, #hero img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 40%;
  }
  #hero::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse 46% 58% at 50% 46%, rgba(12,10,10,.62) 0%, rgba(12,10,10,.28) 50%, rgba(8,8,10,.08) 100%),
      linear-gradient(180deg, rgba(8,8,12,.4) 0%, rgba(8,8,10,.1) 42%, rgba(10,8,8,.55) 100%);
  }
  #hero::after{
    content:''; position:absolute; inset:0; z-index:2;
    background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px);
    opacity:.45;
  }
  /* только main — иначе position:relative перебивает fixed у модалок (#lbpanel, #mp) */
  main#app{
    position:relative; z-index:1;
    flex:1; width:100%; min-height:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  /* телефон / бой — сильнее гасим края, центр остаётся под игру */
  @media (hover: none) and (pointer: coarse){
    #hero::before{
      background:radial-gradient(ellipse 60% 75% at 50% 50%, rgba(4,8,14,.9) 0%, rgba(4,8,14,.75) 100%);
    }
    #hero img{
      object-position:center center;
      filter:saturate(.85) brightness(.88);
    }
  }
  body.immersive #hero::before{
    background:radial-gradient(ellipse 60% 75% at 50% 50%, rgba(4,8,14,.9) 0%, rgba(4,8,14,.75) 100%);
  }
  body.immersive #hero img{
    object-position:center center;
    filter:saturate(.85) brightness(.88);
  }
  :fullscreen #hero, :-webkit-full-screen #hero{ opacity:.3; }
  #wrap{ position:relative; line-height:0; }
  canvas{
    display:block;
    image-rendering:pixelated; image-rendering:crisp-edges;
    box-shadow:
      0 0 0 2px #0c0c0e,
      0 0 0 3px #3a3220,
      0 0 0 5px #12110e,
      0 22px 60px rgba(0,0,0,.78),
      0 0 80px rgba(224,162,58,.18);
    background:#0c121c;
    border-radius:3px;
  }
  /* immersive / native fullscreen — без потолка 768px; topbar поверх, не в потоке */
  body.immersive #wrap,
  :fullscreen #wrap,
  :-webkit-full-screen #wrap{
    width:auto; max-width:none;
  }
  body.immersive #hint,
  body.immersive #legal,
  :fullscreen #hint,
  :fullscreen #legal,
  :-webkit-full-screen #hint,
  :-webkit-full-screen #legal{
    display:none;
  }
  body.immersive #topbar,
  :fullscreen #topbar,
  :-webkit-full-screen #topbar{
    position:fixed; top:0; left:0; right:0; z-index:22;
    width:100%; max-width:none;
    box-sizing:border-box;
    padding:8px 12px;
    padding-top:max(10px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
    pointer-events:none;
    align-items:flex-start;
    min-height:0;
  }
  body.immersive #topbar *,
  :fullscreen #topbar *,
  :-webkit-full-screen #topbar *{
    pointer-events:auto;
  }
  /* «В МЕНЮ» ниже ряда кнопок — не наезжает на РЕКОРДЫ / ? / ВЫЙТИ */
  body.immersive #spleave,
  body.immersive #mpleave,
  :fullscreen #spleave,
  :fullscreen #mpleave,
  :-webkit-full-screen #spleave,
  :-webkit-full-screen #mpleave{
    top:max(56px, calc(env(safe-area-inset-top) + 48px));
    right:max(12px, env(safe-area-inset-right));
    z-index:24;
  }
  /* лёгкая виньетка + тонкие сканлайны (без лишней яркости) */
  #scan{
    position:absolute; inset:0; pointer-events:none; border-radius:3px;
    background:
      radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0,0,0,.14) 100%),
      repeating-linear-gradient(to bottom, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
  }
  #hint{
    margin-top:14px; font-size:12px; color:#949494; text-align:center; line-height:1.9;
    flex-shrink:0;
  }
  #hint b{ color:#e0a23a; font-weight:normal; }
  #legal{
    margin-top:10px; max-width:768px; font-size:10px; line-height:1.55; color:#7a7a7a;
    text-align:center; padding:0 8px 12px; flex-shrink:0;
  }
  @media (hover: none) and (pointer: coarse){ #legal{ display:none; } }
  #hint, #legal{ text-shadow:0 1px 3px rgba(0,0,0,.9); }
  #topbar{ width:100%; max-width:768px; display:flex; align-items:center; justify-content:space-between;
           gap:10px; padding:10px 0 16px; font-size:12px; min-height:56px; flex-shrink:0;
           text-shadow:0 1px 3px rgba(0,0,0,.85); position:relative; z-index:5;
           box-sizing:border-box; align-self:center; }
  #userbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
  #userbar .dim, #hint .dim, #mp .dim, .mpform .dim{ color:#949494; }
  #userbar .err{ color:#e05038; }
  #userbar .name{ color:#e0a23a; }
  .ava{ width:20px; height:20px; image-rendering:auto; border:1px solid #3a3a3a; vertical-align:middle; }
  .btn{ color:#9cf6ff; text-decoration:none; border:1px solid #3a3a3a; padding:9px 12px; background:#161616; }
  .btn:hover{ border-color:#9cf6ff; }
  #baracts{ display:flex; gap:8px; align-items:center; height:40px; margin-left:auto; flex-shrink:0; }
  #mpbtn,#lbbtn,#fsbtn,#helpbtn{
    box-sizing:border-box; height:40px; margin:0; padding:0 12px;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:inherit; font-size:12px; line-height:1; cursor:pointer;
    color:#ffd24a; background:#161616; border:1px solid #3a3a3a;
    vertical-align:middle; white-space:nowrap; gap:8px;
  }
  #lbbtn .starico{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:16px; line-height:1; color:#ffd24a;
    /* ★ сидит ниже капители — поднимаем сильнее */
    transform:translateY(-4px);
  }
  #lbbtn .lbl{ font-size:12px; line-height:1; display:inline-flex; align-items:center; }
  #fsbtn,#helpbtn{ width:40px; padding:0; flex:0 0 40px; }
  #fsbtn{ color:#8eeaff; font-size:18px; }
  #fsbtn.is-exit{ width:auto; flex:0 0 auto; padding:0 10px; gap:8px; }
  #helpbtn{ color:#8eeaff; text-decoration:none; font-size:20px; font-weight:bold; }
  #mpbtn{ color:#9cf6ff; }
  #lbbtn:hover{ border-color:#ffd24a; }
  #mpbtn:hover{ border-color:#9cf6ff; }
  #fsbtn:hover{ border-color:#8eeaff; color:#b8f4ff; }
  #helpbtn:hover{ border-color:#8eeaff; }
  /* пиксельный «полный экран»: жирные углы, по центру как ? */
  #fsbtn .fsico{
    position:relative; display:block; width:18px; height:18px; flex:0 0 18px;
  }
  #fsbtn .fsico i{
    position:absolute; width:7px; height:7px; box-sizing:border-box;
    border-style:solid; border-color:currentColor;
  }
  #fsbtn .fsico i:nth-child(1){ top:0; left:0; border-width:3px 0 0 3px; }
  #fsbtn .fsico i:nth-child(2){ top:0; right:0; border-width:3px 3px 0 0; }
  #fsbtn .fsico i:nth-child(3){ bottom:0; left:0; border-width:0 0 3px 3px; }
  #fsbtn .fsico i:nth-child(4){ bottom:0; right:0; border-width:0 3px 3px 0; }
  #fsbtn .fslbl{ font-size:12px; line-height:1; color:inherit; }
  :fullscreen #hint, :-webkit-full-screen #hint{ display:none; }
  body > #lbpanel{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:40;
    background:#101010; border:2px solid #636363; padding:10px; width:min(480px,94vw);
    max-height:min(70vh,520px); overflow:auto;
    box-shadow:0 0 40px #000; font-size:12px; display:block;
  }
  body > #lbpanel[hidden]{ display:none !important; }
  .lbhead{ display:flex; justify-content:space-between; align-items:center; color:#ffd24a; margin-bottom:10px; font-size:12px; }
  #lbclose{ font-family:inherit; background:none; border:none; color:#e05038; font-size:14px; cursor:pointer; }
  #lbpanel table{ width:100%; border-collapse:collapse; }
  #lbpanel th,#lbpanel td{ padding:8px 6px; text-align:right; border-bottom:1px solid #262626; color:#bdbdbd; }
  #lbpanel .pl{ text-align:left; }
  #lbpanel td .ava{ width:14px; height:14px; margin-right:5px; }
  .doclink{ color:#6f9fbf; text-decoration:none; }
  .doclink:hover{ color:#9cf6ff; }
  body > #mp{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.82); display:flex;
       align-items:center; justify-content:center; }
  body > #mp[hidden]{ display:none !important; }
  #mppass{
    position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.82); padding:16px;
  }
  #mppass[hidden]{ display:none !important; }
  #mppass .mpform{ width:min(320px,100%); background:#141414; border:1px solid #3a3a3a; padding:14px; }
  #mpbox{ position:relative; width:min(640px,96vw); max-height:92vh; overflow:auto; background:#101010;
          border:2px solid #636363; padding:16px; font-size:12px; line-height:1.7; box-shadow:0 0 60px #000; }
  .mphead{ display:flex; gap:12px; align-items:center; color:#ffd24a; margin-bottom:12px; font-size:12px; }
  .mphead #mpclose{ margin-left:auto; background:none; border:none; color:#e05038;
                    font-family:inherit; font-size:15px; cursor:pointer; }
  #mperr{ margin:8px 0; padding:9px 11px; border:1px solid #e05038; color:#ffb0a0; font-size:12px; }
  .mptabs{ display:flex; gap:8px; margin-bottom:10px; }
  .mtab,#mpcreatebtn,#mpbtn{ font-family:inherit; font-size:12px; padding:8px 11px; cursor:pointer;
      background:#161616; color:#bdbdbd; border:1px solid #3a3a3a; }
  #mpbtn{ color:#9cf6ff; }
  #mpbtn:hover{ border-color:#9cf6ff; }
  .mtab.on{ color:#ffd24a; border-color:#ffd24a; }
  #mpcreatebtn{ margin-left:auto; color:#8cd600; }
  #mpbox table{ width:100%; border-collapse:collapse; }
  #mpbox th,#mpbox td{ padding:8px 6px; border-bottom:1px solid #262626; text-align:right; }
  #mpbox th{ color:#9fb0bd; }
  #mpbox .pl{ text-align:left; }
  #mpbox button.act{ font-family:inherit; font-size:12px; padding:6px 9px; cursor:pointer;
      background:#161616; border:1px solid #3a3a3a; color:#9cf6ff; }
  .mpform{ display:flex; flex-direction:column; gap:12px; padding:8px 0; }
  .mpform label{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:#9fb0bd; }
  .mpform input,.mpform select{ font-family:inherit; font-size:12px; background:#161616; color:#fff;
      border:1px solid #3a3a3a; padding:9px; width:60%; }
  .mbig{ font-family:inherit; font-size:12px; padding:11px 15px; background:#0b2a0b; color:#8cd600;
         border:1px solid #4fae4f; cursor:pointer; }
  #mproomtitle{ color:#ffd24a; margin-bottom:10px; font-size:12px; }
  #mpslots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
  .slot{ border:1px solid #2c2c2c; padding:9px; display:flex; gap:8px; align-items:center; min-height:34px; }
  .slot .chip{ width:13px; height:13px; }
  .slot .rdy{ margin-left:auto; color:#8cd600; }
  .slot.t0{ border-left:3px solid #e0a23a; } .slot.t1{ border-left:3px solid #4fae4f; }
  #mpchat{ border:1px solid #2c2c2c; margin-bottom:10px; }
  #mpchatlog{ height:110px; overflow-y:auto; padding:8px; line-height:2; color:#9fb0bd; font-size:12px; }
  .chatrow{ display:flex; border-top:1px solid #2c2c2c; }
  #mpchatin{ flex:1; font-family:inherit; font-size:12px; background:#161616; color:#fff; border:none; padding:9px; }
  #mpchatgo{ font-family:inherit; font-size:12px; background:#161616; color:#8cd600; border:none; padding:0 14px; cursor:pointer; }
  .mpbtns{ display:flex; gap:8px; flex-wrap:wrap; }
  .mpbtns button{ font-family:inherit; font-size:12px; padding:9px 12px; cursor:pointer;
      background:#161616; color:#bdbdbd; border:1px solid #3a3a3a; }
  #mpready.on{ color:#8cd600; border-color:#4fae4f; }
  #mpleave,#spleave{ position:fixed; top:8px; right:8px; z-index:25; font-family:inherit; font-size:12px;
      padding:9px 13px; background:#1a0d0b; color:#ffb0a0; border:1px solid #e05038; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
      -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  #spleave{ right:8px; }
  #spleave .leave-x, #mpleave .leave-x{
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:20px; font-weight:700; line-height:1;
  }
  #mpendtitle{ color:#ffd24a; font-size:13px; margin:8px 0 12px; }
  /* сенсор: оверлей поверх карты (COD / liquid glass) */
  #touch,#touchPlay,#touchLobby{ display:none; }
  .pbtn,#fireBtn,#pauseFab,#lobbyOk,#lobbyList,.lobby-pad .pbtn,#stick{
    font-family:inherit; touch-action:none; -webkit-tap-highlight-color:transparent;
    color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.34);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.25);
  }
  .lobby-pad .pbtn{
    width:100%; height:100%; border-radius:12px; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .lobby-pad .pbtn:active,#fireBtn:active,#pauseFab:active,#lobbyOk:active,#lobbyList:active{
    background:rgba(224,162,58,.45); border-color:rgba(255,220,140,.7); transform:scale(.96);
  }
  #fireBtn,#pauseFab,#lobbyOk{
    border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  #lobbyList{
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:10px; letter-spacing:.04em;
  }
  #fireBtn{ background:rgba(224,162,58,.3); border-color:rgba(255,210,120,.5); letter-spacing:.03em; }
  /* COD-style stick: одна зона касания, стрелки только визуал */
  #stick{
    position:relative; border-radius:50%; overflow:hidden;
    background:rgba(255,255,255,.10);
  }
  #stick.on{ background:rgba(224,162,58,.22); border-color:rgba(255,220,140,.55); }
  #stick .pad-arr{
    position:absolute; pointer-events:none; font-size:15px; line-height:1;
    color:rgba(255,255,255,.55); width:28%; height:28%;
    display:flex; align-items:center; justify-content:center;
  }
  #stick .pad-arr.on{ color:rgba(255,230,160,.95); text-shadow:0 0 10px rgba(224,162,58,.55); }
  #stick .pad-arr.u{ left:36%; top:6%; }
  #stick .pad-arr.d{ left:36%; bottom:6%; }
  #stick .pad-arr.l{ left:6%; top:36%; }
  #stick .pad-arr.r{ right:6%; top:36%; }
  #stick .pad-knob{
    position:absolute; width:34%; height:34%; left:33%; top:33%;
    border-radius:50%; pointer-events:none;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    transform:translate(0,0);
  }
  @media (hover: none) and (pointer: coarse){
    body{
      justify-content:center; padding:0; overflow:hidden;
      height:100dvh; max-height:100dvh;
    }
    body #hint{ display:none; }
    body #topbar{
      position:fixed; top:0; left:0; right:0; z-index:22;
      max-width:none;
      padding:6px 8px;
      padding-top:max(8px, env(safe-area-inset-top));
      padding-left:max(8px, env(safe-area-inset-left));
      padding-right:max(8px, env(safe-area-inset-right));
      background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
      pointer-events:none;
      align-items:flex-start;
      gap:6px;
    }
    body #topbar *{ pointer-events:auto; }
    body #userbar{
      gap:6px; flex-wrap:nowrap; max-width:55vw;
    }
    body #userbar .dim{ display:none; }
    body #userbar .name{
      font-size:12px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    body #userbar .ava{ width:16px; height:16px; }
    body #userbar .btn{
      font-size:12px; padding:7px 9px; white-space:nowrap;
    }
    body #baracts{ height:38px; gap:6px; }
    body #mpbtn, body #lbbtn, body #fsbtn, body #helpbtn{
      height:38px; font-size:12px; padding:0 10px;
    }
    body #fsbtn, body #helpbtn{
      width:38px; min-width:38px; padding:0; flex-basis:38px;
    }
    body #fsbtn{ font-size:17px; }
    body #helpbtn{ font-size:17px; }
    body #spleave, body #mpleave{
      font-size:12px; padding:7px 9px; gap:8px;
      top:max(8px, env(safe-area-inset-top));
      right:max(8px, env(safe-area-inset-right));
      z-index:25;
      -webkit-text-size-adjust:100%; text-size-adjust:100%;
    }
    body #spleave .leave-x, body #mpleave .leave-x{
      font-size:20px;
    }
    /* в бою topbar (VK и пр.) скрыт — только в меню */
    body.touch-play #topbar{ display:none !important; }
    body #wrap{ margin:0; line-height:0; max-width:100vw; max-height:100dvh; }
    body #wrap canvas{
      box-shadow:none; border-radius:0;
      max-width:100vw; max-height:100dvh;
    }
    body #scan{ border-radius:0; }
    #touch{ display:block; position:fixed; inset:0; z-index:16; pointer-events:none; }
    body.touch-play #touchPlay{ display:block; position:absolute; inset:0; }
    body.touch-lobby #touchLobby{ display:block; position:absolute; inset:0; }

    /* бой: COD stick — вся окружность ловит палец */
    #touchPlay #stick{
      pointer-events:auto; position:absolute;
      left:max(4px, env(safe-area-inset-left));
      bottom:max(14px, env(safe-area-inset-bottom));
      width:176px; height:176px;
    }
    #touchPlay #fireBtn{
      pointer-events:auto; position:absolute;
      right:max(10px, env(safe-area-inset-right));
      bottom:max(38px, calc(env(safe-area-inset-bottom) + 22px));
      width:96px; height:96px; font-size:12px;
    }
    #touchPlay #pauseFab{
      pointer-events:auto; position:absolute;
      right:max(16px, env(safe-area-inset-right));
      bottom:calc(max(38px, calc(env(safe-area-inset-bottom) + 22px)) + 96px + 22px);
      width:48px; height:48px; font-size:13px;
    }

    /* меню / зоны: крест ↑↓←→ и OK */
    #touchLobby .lobby-pad{
      pointer-events:auto; position:absolute;
      left:max(10px, env(safe-area-inset-left));
      bottom:max(14px, env(safe-area-inset-bottom));
    }
    #touchLobby .lobby-pad{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:7px;
      width:48px;
      height:auto;
    }
    #touchLobby .lobby-pad .pbtn.u,
    #touchLobby .lobby-pad .pbtn.d{
      display:flex;
    }
    /* ← → только на выборе зон */
    #touchLobby .lobby-pad .pbtn.l,
    #touchLobby .lobby-pad .pbtn.r{
      display:none !important;
    }
    body.touch-zones #touchLobby .lobby-pad{
      display:grid;
      grid-template-columns:repeat(3, 48px);
      grid-template-rows:repeat(3, 48px);
      gap:6px;
      width:calc(48px * 3 + 12px);
      height:calc(48px * 3 + 12px);
    }
    body.touch-zones #touchLobby .lobby-pad .pbtn.u{ grid-column:2; grid-row:1; }
    body.touch-zones #touchLobby .lobby-pad .pbtn.l{ grid-column:1; grid-row:2; display:flex !important; }
    body.touch-zones #touchLobby .lobby-pad .pbtn.r{ grid-column:3; grid-row:2; display:flex !important; }
    body.touch-zones #touchLobby .lobby-pad .pbtn.d{ grid-column:2; grid-row:3; }
    #touchLobby .lobby-pad .pbtn{
      width:48px; height:48px; font-size:14px; border-radius:11px;
    }
    #touchLobby #lobbyOk{
      pointer-events:auto; position:absolute;
      right:max(12px, env(safe-area-inset-right));
      bottom:max(18px, env(safe-area-inset-bottom));
      width:60px; height:60px; font-size:12px;
      background:rgba(224,162,58,.32);
    }
    #touchLobby #lobbyList{
      pointer-events:auto; position:absolute;
      right:max(12px, env(safe-area-inset-right));
      bottom:max(86px, calc(env(safe-area-inset-bottom) + 68px));
      width:60px; height:36px; font-size:9px;
      background:rgba(126,200,232,.22);
    }
    #iosFsTip{
      display:none; pointer-events:auto;
      position:absolute; left:50%; bottom:max(88px, calc(env(safe-area-inset-bottom) + 72px));
      transform:translateX(-50%);
      width:min(92vw, 340px); z-index:17;
      padding:10px 12px; font-size:12px; line-height:1.55;
      color:#d8d2c4; text-align:center;
      background:rgba(12,12,14,.72);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(14px) saturate(160%);
      -webkit-backdrop-filter:blur(14px) saturate(160%);
      border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,.35);
    }
    body.touch-lobby.show-ios-tip #iosFsTip{ display:block; }
    #iosFsTip b{ color:#e0a23a; font-weight:normal; }
    #iosFsTip button{
      margin-top:8px; font-family:inherit; font-size:12px; cursor:pointer;
      color:#9fb0bd; background:transparent; border:1px solid #3a3a3a; padding:6px 10px;
    }
  }

  /* оверлей «переверни» — по умолчанию скрыт (иначе виден на десктопе) */
  #rotateGate{
    display:none !important;
    position:fixed; inset:0; z-index:40;
    flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:24px;
    background:rgba(4,8,14,.92);
    text-align:center; pointer-events:auto;
  }
  #rotateGate .rotate-ico{
    width:72px; height:72px; position:relative;
    border:3px solid #9cf6ff; border-radius:12px;
    box-shadow:0 0 24px rgba(156,246,255,.25);
    animation:rotateHint 1.6s ease-in-out infinite;
  }
  #rotateGate .rotate-ico::before{
    content:''; position:absolute; left:50%; top:8px; width:14px; height:4px;
    margin-left:-7px; background:#9cf6ff; border-radius:2px;
  }
  #rotateGate .rotate-ico::after{
    content:'↻'; position:absolute; right:-18px; bottom:-6px;
    font-size:28px; color:#ffd24a; line-height:1;
  }
  @keyframes rotateHint{
    0%,100%{ transform:rotate(0deg); }
    40%{ transform:rotate(90deg); }
    60%{ transform:rotate(90deg); }
  }
  #rotateGate p{
    margin:0; font-size:14px; line-height:1.6; color:#ffd24a;
    text-shadow:0 2px 0 #000;
  }
  #rotateGate .sub{
    font-size:11px; color:#9fb0bd; max-width:16em;
  }
  #hudFloat{
    display:none;
    position:fixed; z-index:18; pointer-events:none;
    font-family:'Press Start 2P', monospace;
    text-shadow:0 2px 0 #000, 0 0 10px rgba(0,0,0,.8);
    line-height:1.55;
    overflow:visible;
  }
  #hudFloat.is-on{ display:block; }
  #hudScore{ color:#e8eef2; font-size:10px; padding-left:2px; }
  #hudHi{ color:#e0c878; font-size:9px; margin-top:6px; padding-left:2px; }
  #buildChip{
    position:fixed; left:50%; bottom:max(2px, env(safe-area-inset-bottom));
    transform:translateX(-50%); z-index:30; pointer-events:none;
    font-family:ui-monospace, monospace; font-size:9px; letter-spacing:.02em;
    color:rgba(255,255,255,.4); text-shadow:0 1px 0 #000;
  }
  /* нативное приложение уже landscape-only — шторка «переверни» не нужна */
  html.capacitor-native #rotateGate{ display:none !important; }
  /* Capacitor: без серой полосы safe-area / build-chip поверх футера canvas */
  html.capacitor-native,
  html.capacitor-native body{
    background:#000 !important;
  }
  html.capacitor-native #buildChip{ display:none !important; }
  html.capacitor-native #fsbtn{ display:none !important; }
  html.capacitor-native #hero{ background:#000; }
  @media (hover: none) and (pointer: coarse) and (orientation:portrait){
    #rotateGate{ display:flex !important; }
    html.capacitor-native #rotateGate{ display:none !important; }
  }
  @media (hover: none) and (pointer: coarse) and (orientation:landscape){
    body #lbbtn .lbl{ display:none; }
    body #lbbtn{ padding:0 10px; min-width:38px; }
    #touchPlay #stick{
      width:168px; height:168px;
      left:max(2px, calc(env(safe-area-inset-left) - 2px));
      bottom:max(12px, env(safe-area-inset-bottom));
    }
    body.immersive #touchPlay #stick,
    :fullscreen #touchPlay #stick,
    :-webkit-full-screen #touchPlay #stick{
      width:176px; height:176px;
      left:max(0px, calc(env(safe-area-inset-left) - 6px));
    }
    #touchPlay #fireBtn{
      width:86px; height:86px; font-size:12px;
      right:max(52px, calc(env(safe-area-inset-right) + 40px));
      bottom:max(72px, calc(env(safe-area-inset-bottom) + 56px));
    }
    #touchPlay #pauseFab{
      width:44px; height:44px; font-size:12px;
      right:max(58px, calc(env(safe-area-inset-right) + 46px));
      /* заметный зазор от огня — меньше случайных пауз */
      bottom:calc(max(72px, calc(env(safe-area-inset-bottom) + 56px)) + 86px + 36px);
    }
    #touchLobby .lobby-pad{
      width:44px;
    }
    body.touch-zones #touchLobby .lobby-pad{
      grid-template-columns:repeat(3, 44px);
      grid-template-rows:repeat(3, 44px);
      gap:5px;
      width:calc(44px * 3 + 10px);
      height:calc(44px * 3 + 10px);
    }
    #touchLobby .lobby-pad .pbtn{ width:44px; height:44px; font-size:13px; }
    #touchLobby #lobbyOk{ width:54px; height:54px; font-size:12px; }
    #iosFsTip{ bottom:max(16px, env(safe-area-inset-bottom)); width:min(70vw, 360px); font-size:12px; }
  }

  /* —— Auth gate (Capacitor): splash art, not lobby —— */
  html.capacitor-native body.auth-gate-open main#app,
  html.capacitor-native body.auth-gate-open #touch,
  html.capacitor-native body.auth-gate-open #hudFloat,
  html.capacitor-native body.auth-gate-open #buildChip,
  html.capacitor-native body.auth-gate-open #rotateGate,
  html.capacitor-native body.auth-gate-open #lbpanel,
  html.capacitor-native body.auth-gate-open #mp{
    visibility:hidden !important;
    pointer-events:none !important;
  }
  html.capacitor-native body.auth-gate-open #hero{
    opacity:0 !important;
  }
  #authGate{
    display:none; position:fixed; inset:0; z-index:60;
    align-items:flex-end; justify-content:center;
    padding:0 16px max(20px, env(safe-area-inset-bottom));
    pointer-events:auto;
    background:#070b12;
  }
  html.capacitor-native #authGate.is-on{ display:flex; }
  #authGate .auth-gate-bg{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    background:#070b12;
  }
  #authGate .auth-gate-bg img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    object-position:center 42%;
  }
  #authGate .auth-gate-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(4,8,14,.25) 0%, rgba(4,8,14,.15) 35%, rgba(4,8,14,.72) 70%, rgba(4,8,14,.94) 100%);
  }
  #authGate .auth-gate-panel{
    position:relative; z-index:2; width:min(680px, 96vw);
    text-align:center; padding:12px 0 10px;
    font-family:'Press Start 2P', monospace;
  }
  #authGate .auth-gate-title{
    margin:0 0 6px; font-size:14px; color:#ffd24a;
    text-shadow:0 2px 0 #000, 0 0 18px rgba(255,210,74,.35);
  }
  #authGate .auth-gate-sub{
    margin:0 0 14px; font-size:9px; color:#9fb0bd; letter-spacing:.04em;
  }
  #authGate .auth-gate-btns{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:stretch;
  }
  #authGate .auth-btn{
    flex:1 1 140px; max-width:200px; min-height:48px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:1px solid #3a4550; border-radius:6px; cursor:pointer;
    font-family:inherit; font-size:10px; letter-spacing:.02em;
    color:#e8eef2; background:rgba(20,28,38,.88);
    box-shadow:0 4px 14px rgba(0,0,0,.45);
  }
  #authGate .auth-btn:active{ transform:translateY(1px); }
  #authGate .auth-btn[disabled]{ opacity:.45; pointer-events:none; }
  #authGate .auth-ico{
    display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center;
    font-size:14px; line-height:1;
  }
  #authGate .auth-guest{ border-color:#5a6a78; background:rgba(70,90,110,.75); }
  #authGate .auth-apple{ background:#000; border-color:#fff; color:#fff; }
  #authGate .auth-apple .auth-ico::before{ content:"\F8FF"; font-size:16px; } /* apple logo fallback */
  #authGate .auth-apple .auth-ico{ font-family:system-ui,-apple-system,sans-serif; }
  #authGate .auth-google{ background:#fff; border-color:#dadce0; color:#3c4043; }
  #authGate .auth-google .auth-ico{ color:#4285f4; font-weight:700; font-family:system-ui,sans-serif; }
  #authGate .auth-facebook{ background:#1877f2; border-color:#1877f2; color:#fff; }
  #authGate .auth-facebook .auth-ico{
    width:20px; height:20px; border-radius:50%; background:#fff; color:#1877f2;
    font-family:Helvetica,Arial,sans-serif; font-weight:700; font-size:14px;
  }
  #authGate .auth-gate-err, #authLinkPanel .auth-gate-err{
    margin:10px 0 0; font-size:9px; color:#ff6b6b; text-shadow:0 1px 0 #000;
  }
  #authGate .auth-gate-legal{
    margin:14px 0 0; font-size:8px; color:#7a8a98; line-height:1.5;
  }
  #authGate .auth-gate-legal a{ color:#8eeaff; }

  #authLinkPanel{
    position:fixed; inset:0; z-index:55; display:none;
    align-items:center; justify-content:center;
    background:rgba(4,8,14,.75); padding:16px;
  }
  #authLinkPanel.is-on{ display:flex; }
  #authLinkPanel .auth-link-box{
    width:min(420px, 94vw); background:#121820; border:1px solid #2a3540;
    border-radius:8px; padding:14px 14px 16px;
    font-family:'Press Start 2P', monospace; color:#e8eef2;
  }
  #authLinkPanel .auth-link-head{
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; color:#ffd24a; margin-bottom:10px;
  }
  #authLinkPanel .auth-link-head button{
    background:transparent; border:0; color:#9fb0bd; cursor:pointer; font-size:14px;
  }
  #authLinkPanel .auth-link-hint{ font-size:8px; line-height:1.55; margin:0 0 12px; color:#9fb0bd; }
  #authLinkPanel .auth-link-list{ display:flex; flex-direction:column; gap:8px; }
  #authLinkPanel .auth-link-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:9px; padding:8px 10px; background:#0c1016; border:1px solid #2a3540; border-radius:6px;
  }
  #authLinkPanel .auth-link-row button{
    font-family:inherit; font-size:8px; cursor:pointer;
    border:1px solid #3a4550; background:#1a2430; color:#8eeaff; padding:6px 8px; border-radius:4px;
  }
  #authLinkPanel .auth-link-row .on{ color:#7dffb0; }
  #userbar .btn-auth{
    display:inline-block; margin-left:6px; padding:2px 8px;
    border:1px solid #3a4550; color:#8eeaff; text-decoration:none; cursor:pointer;
    background:transparent; font:inherit; font-size:inherit;
  }