:root{
      --bg:#0b1020;           /* фон */
      --panel:#111933cc;      /* стеклянные панели */
      --accent:#7dd3fc;       /* голубой акцент */
      --accent2:#a78bfa;      /* фиолетовый акцент */
      --good:#34d399;         /* попадание */
      --bad:#f87171;          /* промах */
      --ink:#e5e7eb;          /* светлый текст */
      --muted:#9ca3af;        /* вторичный текст */
      --grid:#1f2a44;         /* ячейки */
      --ship:#334155;         /* корабли игрока */
      --shipEdge:#5eead4;     /* обводка кораблей */
      --faceSize:min(78vmin, 960px); /* адаптивный размер куба */
      --wave-len: 44px;          /* длина гребня */
      --spill: 14px;             /* мягкий край "окна" заполнения */
      --wave-speed-atk: 2.8s;    /* скорость верхней волны (атака) */
      --wave-speed-def: 2.8s;    /* скорость верхней волны (оборона) */
      --wave-speed-2:   5.2s;    /* вторая, медленнее, для глубины */
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{
      margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--ink);
      background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%),
                  radial-gradient(800px 600px at 80% 80%, #0c1228 0%, #0b1020 60%, #070a16 100%);
      overflow:hidden;
    }
    /* HUD */
    .hud{position:fixed; inset:0 0 auto 0; display:flex; gap:.75rem; align-items:center; padding:.75rem 1rem; backdrop-filter: blur(6px); background:linear-gradient(180deg, #0b1020bb 0, #0b102000 100%); z-index:40}
    .hud .title{font-weight:700; letter-spacing:.3px; margin-right:auto; display:flex; align-items:center; gap:.6rem}
    .badge{font-size:.8rem; padding:.15rem .5rem; border-radius:.5rem; border:1px solid #ffffff1a; color:#b3e1ff; background:#0b345533}
    .btn{appearance:none; border:1px solid #ffffff22; color:var(--ink); background:var(--panel); padding:.55rem .8rem; border-radius:.7rem; cursor:pointer; box-shadow: 0 6px 18px #0005 inset, 0 0 0 1px #0006; transition: transform .12s ease, box-shadow .2s ease, background .2s ease}
    .btn:hover{transform: translateY(-1px)}
    .btn:active{transform: translateY(0)}
    .btn.primary{background: linear-gradient(180deg, #0e2741cc, #0d1f36cc); border-color:#5eead41a; box-shadow:0 0 0 1px #6ee7b7aa inset, 0 10px 30px #0008}
    .btn.warn{background: linear-gradient(180deg, #3b0d0dcc, #2a0b0bcc); border-color:#fca5a5aa;}
    .btn:disabled{opacity:.55; cursor:not-allowed}
    .divider{width:1px; height:28px; background:#ffffff1a}
    .muted{color:#bcd7ff99}

    /* Scene & Cube */
    .scene{position:fixed; inset:74px 0 0 0; display:grid; place-items:center; perspective: 1600px; perspective-origin: 50% 45%;}
    .orbit{position:relative; width:var(--faceSize); height:var(--faceSize); transform-style:preserve-3d;}
    .cube{position:absolute; inset:0; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.22,.61,.36,1);}

    /* Faces */
    .face{position:absolute; width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(180deg, #0f1933, #0c1428); border:1px solid #ffffff10; box-shadow:0 0 0 1px #0008 inset, 0 20px 60px #000c inset;}
    .face::after{content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none; box-shadow: inset 0 0 0 1px #ffffff14, inset 0 0 60px #00d9ff18;}
    .face .label{position:absolute; top:10px; left:12px; font-size:.8rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; background:#00000055; padding:.25rem .45rem; border-radius:.4rem; border:1px solid #ffffff1f}
    .face .label b{color:#c8e9ff}

    /* Positioning cube faces */
    .front  {transform: rotateY(  0deg) translateZ(calc(var(--faceSize)/2));}
    .back   {transform: rotateY(180deg) translateZ(calc(var(--faceSize)/2));}
    .right  {transform: rotateY( 90deg) translateZ(calc(var(--faceSize)/2));}
    .left   {transform: rotateY(-90deg) translateZ(calc(var(--faceSize)/2));}
    .top    {transform: rotateX( 90deg) translateZ(calc(var(--faceSize)/2));}
    .bottom {transform: rotateX(-90deg) translateZ(calc(var(--faceSize)/2));}

    /* Grid */
    .grid{width:92%; height:92%; display:grid; grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(10,1fr); gap:2px; padding:10px; border-radius:16px; background:linear-gradient(180deg, #0a1224, #0b1328); box-shadow: inset 0 0 0 1px #ffffff10, inset 0 0 40px #00d4ff10;}
    .cell{position:relative; display:flex; align-items:center; justify-content:center; border-radius:6px; background:linear-gradient(180deg, #0f2244, #0e1b36); box-shadow: inset 0 -1px 0 0 #0007; user-select:none; cursor: crosshair; transition: transform .05s ease}
    .cell:hover{outline:1px solid #ffffff18}
    .cell.ship{background: linear-gradient(180deg, #182a3d, #152435); box-shadow: inset 0 0 0 1px #6ee7b733, inset 0 0 24px #5eead420}
    .cell.blocked{cursor:not-allowed; filter:grayscale(.6); opacity:.7}
    /* тени при наведении формы на доску */
    .cell.preview-ok{
      outline:2px solid var(--good);
      box-shadow: inset 0 0 0 1px #34d399aa, inset 0 0 24px #34d39944;
    }
    .cell.preview-bad{
      outline:2px solid var(--bad);
      box-shadow: inset 0 0 0 1px #f87171aa, inset 0 0 24px #f8717144;
    }

    /* States */
    .cell.miss::after{content:""; width:44%; height:44%; border-radius:50%; background:radial-gradient(circle, #a5b4fc 0, #94a3b8 50%, transparent 60%); opacity:.7}
    .cell.hit{background: linear-gradient(180deg, #163537, #0f2526); box-shadow: inset 0 0 0 1px #34d39966, inset 0 0 30px #34d39955}
    .cell.hit::after{content:"✕"; font-weight:900; font-size:1.1rem; color:#9ef3d0}
    .cell.sunk{animation: sunkPulse 1.2s ease infinite alternate;}
    @keyframes sunkPulse{from{box-shadow: inset 0 0 0 1px #f0fd, inset 0 0 18px #34d399aa} to{box-shadow: inset 0 0 0 1px #34d399aa, inset 0 0 36px #34d399}}

    .hint{position:fixed; inset:auto 20px 20px auto; background:var(--panel); border:1px solid #ffffff22; padding:.7rem .9rem; border-radius:.8rem; max-width:440px; color:#d9e3f0; z-index:20; box-shadow:0 14px 40px #000a}
    .hint h4{margin:.1rem 0 .4rem; font-size:1rem}
    .hint p{margin:.25rem 0; color:#b4c0d0}

    .rightDock{position:fixed; right:14px; top:90px; width:300px; display:flex; flex-direction:column; gap:.6rem; z-index:25; transition: transform .35s ease}
    .panel{background:var(--panel); border:1px solid #ffffff21; border-radius:.9rem; padding:.7rem .8rem; box-shadow: 0 12px 36px #0009}
    .panel h3{margin:.2rem 0 .4rem; font-size:1rem; color:#d5e7ff}
    .log{max-height:38vh; overflow:auto; font-size:.9rem; color:#c7d2fe}
    .log p{margin:.25rem 0; color:#9fb4ff}
    .legend{display:grid; grid-template-columns:1.2rem 1fr; gap:.45rem .6rem; align-items:center; font-size:.9rem; color:#cbd5e1}
    .legend .dot{width:1.2rem; height:1.2rem; border-radius:.35rem; background:#14223d; box-shadow: inset 0 0 0 1px #ffffff18}
    .legend .dot.ship{background:#1c2c3f; box-shadow: inset 0 0 0 1px #6ee7b733}
    .legend .dot.hit{background:#163537; box-shadow: inset 0 0 0 1px #34d399aa}
    .legend .dot.miss{background:#0f1b33; position:relative}
    .legend .dot.miss::after{content:""; position:absolute; inset:.28rem; border-radius:50%; background:radial-gradient(circle,#a5b4fc 0,#94a3b8 60%,transparent 65%)}

    /* Modal */
    .modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:#0009; z-index:50}
    .modal.open{display:flex}
    .modal .box{background:linear-gradient(180deg,#0d1a30,#0a1224); border:1px solid #ffffff22; border-radius:1rem; padding:1rem 1.2rem; min-width: min(92vw, 520px); text-align:center; box-shadow: 0 30px 80px #000a}
    .modal h2{margin:.4rem 0 .3rem;}
    .modal p{color:#cbd5e1}

    /* LEFT DOCK (постановщик и магазин) */
    .leftDock{
      position:fixed; left:0; top:90px; bottom:0; width:330px; padding:8px 10px 10px 46px;
      display:flex; flex-direction:column; gap:.6rem; z-index:35;
      transform: translateX(0); transition: transform .35s ease;
      overflow: auto;                 /* если контент не помещается, появится скролл */
      scrollbar-gutter: stable both-edges; /* чтобы стрелка не «прыгала» */
    }
    .leftDock.collapsed{ transform: translateX(-290px); }
    .leftDock .panel{ backdrop-filter: blur(6px);}
    .powerRow{display:flex; gap:.35rem; align-items:center; flex-wrap:wrap}
    .badgeTiny{font-size:.72rem; padding:.1rem .4rem; border-radius:.4rem; border:1px solid #ffffff22; background:#0b345533; color:#bde5ff}
    .seg{display:flex; background:#0a1224aa; border:1px solid #ffffff22; border-radius:.6rem; overflow:hidden}
    .seg button{background:transparent; border:0; padding:.4rem .6rem; color:#cfe5ff; cursor:pointer}
    .seg button.active{background:#0f2748aa; color:#9ef3ff; box-shadow: inset 0 0 0 1px #6ee7b755}
    .shopGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem}
    .shipCard{border:1px solid #ffffff22; background:linear-gradient(180deg, #0e1a30, #0b1224); border-radius:.6rem; padding:.5rem; display:flex; flex-direction:column; gap:.35rem; cursor:grab}
    .shipCard:active{cursor:grabbing}
    .shipTitle{font-size:.85rem; color:#bfe7ff}
    .spinWrap{display:grid; place-items:center; perspective:600px; height:74px}
    .shipPreview{
      display:grid;
      gap:2px;
      transform-style:preserve-3d;
      animation: spinY 8s linear infinite;
      /* размер одного «вокселя» (кубика) */
      --u: 16px;
      /* эти переменные уже задаются из JS через --w / --h */
      grid-template-columns: repeat(var(--w), var(--u));
      grid-template-rows: repeat(var(--h), var(--u));
      /* лёгкий наклон как и раньше */
      transform: rotateX(16deg) rotateY(18deg);
      will-change: transform;
      
    }


    /* пустая ячейка, чтобы сетка не «схлопывалась» */
    .shipPreview .slot{
      width:var(--u); height:var(--u);
    }

    /* воксель (кубик клетки) */
    .shipPreview .vox{
      position:relative;
      width:var(--u); height:var(--u);
      transform-style:preserve-3d;
      /* лёгкая подсветка контура */
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
    }

    /* общая стилизация граней */
    .shipPreview .vox .f{
      position:absolute; inset:0;
      box-shadow: inset 0 0 0 1px #6ee7b744;
      backface-visibility:hidden;
      border-radius: 3px;
    }

    /* толщина кубика = его глубина */
    .shipPreview{ --d: 16px; } /* можешь уменьшить до 12px для «тоньше» */

    /* расположение граней относительно центра куба */
    .shipPreview .vox .front  { transform: translateZ(calc(var(--d)/2)); background: linear-gradient(180deg,#1e334b,#17283f); }
    .shipPreview .vox .back   { transform: rotateY(180deg) translateZ(calc(var(--d)/2)); background: linear-gradient(180deg,#1e334b,#17283f); }
    .shipPreview .vox .right  { transform: rotateY(90deg) translateZ(calc(var(--u)/2)); width:var(--d); left:calc((var(--u)-var(--d))/2); background: linear-gradient(180deg,#16273c,#101c31); }
    .shipPreview .vox .left   { transform: rotateY(-90deg) translateZ(calc(var(--u)/2)); width:var(--d); left:calc((var(--u)-var(--d))/2); background: linear-gradient(180deg,#16273c,#101c31); }
    .shipPreview .vox .top    { transform: rotateX(90deg) translateZ(calc(var(--d)/2)); background: linear-gradient(180deg,#28425f,#1a2e49); }
    .shipPreview .vox .bottom { transform: rotateX(-90deg) translateZ(calc(var(--d)/2)); background: linear-gradient(180deg,#0f1c33,#0b1426); }

    /* «сплющивание» превью при наведении на доску — показывать сверху (2D-вид) */
    .dragGhost.flat .shipPreview{
      animation:none;
      /* смотрим «сверху» на верхние грани; маленький подъём, чтобы верх был виден */
      transform: rotateX(90deg) rotateY(0deg) translateZ(calc(var(--d)/2));
    }

    .shipPreview .sq{width:16px; height:16px; border-radius:.25rem; background: linear-gradient(180deg, #1e334b, #17283f); box-shadow: inset 0 0 0 1px #6ee7b766, 0 6px 10px #0008}
    @keyframes spinY { from{ transform: rotateX(16deg) rotateY(0deg);} to{ transform: rotateX(16deg) rotateY(360deg);} }

    /* Drag ghost */
    .dragGhost{position:fixed; pointer-events:none; z-index:60; padding:6px; border-radius:.7rem; border:2px solid var(--shipEdge); background:#0a1628cc; box-shadow:0 10px 40px #000a}
    .dragGhost.bad{border-color:#f87171}
    .dragGhost.spin .shipPreview{
      animation: spinY 8s linear infinite;
      transform: rotateX(16deg) rotateY(18deg);
    }
    
    .dragHint{font-size:.7rem; color:#bcd7ffcc; text-align:center; margin-top:.3rem}

    /* LEFT toggle arrow */
    .leftToggle{
      position:fixed; left:8px; top:50%; transform:translateY(-50%); z-index:50;
      width:30px; height:60px; display:grid; place-items:center; border-radius:.8rem;
      background: linear-gradient(180deg,#0d1a30,#0a1224); border:1px solid #ffffff22; box-shadow:0 10px 30px #0009; cursor:pointer; color:#bfe1ff;
    }
    .leftToggle .arr{transition: transform .25s ease}
    .leftDock.collapsed + .leftToggle .arr{ transform: rotate(180deg) }

    /* Hide right dock when collapsed by same arrow */
    .sidebarsHidden .rightDock{ transform: translateX(110%); }
    .sidebarsHidden .hint{ display:none; }

    /* Builder */
    .builderGrid{
      --bw:7; --bh:7;
      display:grid; grid-template-columns:repeat(var(--bw), 18px); grid-template-rows:repeat(var(--bh), 18px);
      gap:3px; justify-content:center; margin:.35rem 0 .4rem;
    }
    .bCell{width:18px; height:18px; border-radius:.25rem; background:#0f2244; box-shadow: inset 0 0 0 1px #ffffff18; cursor:pointer}
    .bCell.on{background:#1c2c3f; box-shadow: inset 0 0 0 1px #6ee7b799, inset 0 0 20px #5eead420}

    /* Helpers */
    .row{display:flex; gap:.5rem; align-items:center}
    .grow{flex:1}
    .tiny{font-size:.8rem}



  
    /* панель без подложки/рамок/теней */
    #battlePanel.panel.battleClean{ background:transparent; border:0; box-shadow:none; padding:.2rem 0; }

    #battlePanel .sectionTitle{
      margin:.25rem 0 .35rem; font-size:.95rem; font-weight:700;
      color:var(--ink); letter-spacing:.02em; opacity:.95;
    }

    .faceList{ display:flex; flex-direction:column; gap:.38rem }
    .faceRow { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem }

    /* текст-кнопки без фона */
    .faceBtn{
      appearance:none; background:none; border:0; padding:.06rem .1rem;
      color:var(--accent); font-weight:700; letter-spacing:.03em; cursor:pointer;
      transition: color .16s ease, transform .06s ease, text-shadow .16s ease;
    }
    .faceBtn:hover{ color: color-mix(in oklab, var(--accent), white 18%); text-shadow:0 0 8px color-mix(in oklab, var(--accent), white 26%); }
    .faceBtn:active{ transform: translateY(1px) }
    .faceBtn:focus-visible{ outline:1px dashed color-mix(in oklab, var(--accent), transparent 40%); outline-offset:2px; border-radius:.25rem; }


    /* ===== КАРТОННЫЕ ВОЛНЫ • 6 слоёв • без фона ===== */
    :root{
      --meter-h: 18px;
      --spill: 16px;      /* мягкий край заполнения */
      /* длина гребня для слоёв (дальше = плавнее) */
      --seg-1: 56px; --seg-2: 64px; --seg-3: 72px;
      --seg-4: 80px; --seg-5: 92px; --seg-6: 106px;
      /* длительности (параллакс) */
      --dur-1: 6.5s; --dur-2: 5.2s; --dur-3: 7.8s;
      --dur-4: 9.6s; --dur-5: 12s;  --dur-6: 14.5s;
    }

    .meter{ position:relative; height:var(--meter-h); background:transparent; }
    .meter .track{ display:none; } /* вообще без подложки */

    /* .bar всегда 100%; видимую ширину даёт маска по --p (с мягким краем) */
    .meter .bar{
      --p: 0%;
      position:relative; width:100%; height:100%; overflow:hidden; background:none;
      -webkit-mask-image: linear-gradient(to right,
        #fff 0, #fff calc(var(--p) - var(--spill)),
        transparent var(--p), transparent 100%);
              mask-image: linear-gradient(to right,
        #fff 0, #fff calc(var(--p) - var(--spill)),
        transparent var(--p), transparent 100%);
      -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    }

    /* базовый контейнер слоя: вертикальное смещение задаём тут */
    .meter .bar .layer{
      position:absolute; inset:0; pointer-events:none;
      filter: drop-shadow(0 1.2px 0 rgba(0,0,0,.32));
    }

    /* Визуал волны лежит в ::before, он шире контейнера и едет transform'ом */
    .meter .bar .layer::before{
      content:"";
      position:absolute; top:0; bottom:0;
      left: calc(-1 * var(--seg)); right: calc(-1 * var(--seg));
      /* «картон»: цвет + блик + тень под кромкой */
      background:
        linear-gradient(to top, rgba(255,255,255,.24), rgba(255,255,255,.10) 16%, rgba(255,255,255,0) 42%),
        linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 36%),
        var(--col);
      /* волнистая маска */
      -webkit-mask-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 40" preserveAspectRatio="none">\
    <path d="M0 40V18 C20 8 40 8 60 18 C80 28 100 28 120 18 C140 8 160 8 180 18 C200 28 220 28 240 18 V40 Z" fill="white"/></svg>');
              mask-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 40" preserveAspectRatio="none">\
    <path d="M0 40V18 C20 8 40 8 60 18 C80 28 100 28 120 18 C140 8 160 8 180 18 C200 28 220 28 240 18 V40 Z" fill="white"/></svg>');
      -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
      -webkit-mask-size: var(--seg) 140%; mask-size: var(--seg) 140%;
      -webkit-mask-position: 0 100%;   mask-position: 0 100%;
      will-change: transform;
    }

    /* послойные параметры глубины */
    .meter .bar .l1{ z-index:6; --seg:var(--seg-1); transform: translateY( 0);   }
    .meter .bar .l2{ z-index:5; --seg:var(--seg-2); transform: translateY(-2px); }
    .meter .bar .l3{ z-index:4; --seg:var(--seg-3); transform: translateY(-4px); }
    .meter .bar .l4{ z-index:3; --seg:var(--seg-4); transform: translateY(-6px); }
    .meter .bar .l5{ z-index:2; --seg:var(--seg-5); transform: translateY(-8px); }
    .meter .bar .l6{ z-index:1; --seg:var(--seg-6); transform: translateY(-10px); }

    /* ПАЛИТРА */
    .meter[data-mode="atk"] .bar .l1{ --col: color-mix(in oklab, var(--accent), #0b1224  8%); }
    .meter[data-mode="atk"] .bar .l2{ --col: color-mix(in oklab, var(--accent), #0b1224 14%); }
    .meter[data-mode="atk"] .bar .l3{ --col: color-mix(in oklab, var(--accent), #0b1224 20%); }
    .meter[data-mode="atk"] .bar .l4{ --col: color-mix(in oklab, var(--accent), #0b1224 26%); }
    .meter[data-mode="atk"] .bar .l5{ --col: color-mix(in oklab, var(--accent), #0b1224 32%); }
    .meter[data-mode="atk"] .bar .l6{ --col: color-mix(in oklab, var(--accent), #0b1224 38%); }

    .meter[data-mode="def"] .bar .l1{ --col: color-mix(in oklab, var(--bad), #2a0b10  6%); }
    .meter[data-mode="def"] .bar .l2{ --col: color-mix(in oklab, var(--bad), #2a0b10 12%); }
    .meter[data-mode="def"] .bar .l3{ --col: color-mix(in oklab, var(--bad), #2a0b10 18%); }
    .meter[data-mode="def"] .bar .l4{ --col: color-mix(in oklab, var(--bad), #2a0b10 24%); }
    .meter[data-mode="def"] .bar .l5{ --col: color-mix(in oklab, var(--bad), #2a0b10 30%); }
    .meter[data-mode="def"] .bar .l6{ --col: color-mix(in oklab, var(--bad), #2a0b10 36%); }

    /* АНИМАЦИЯ: двигаем ::before по X — кроссбраузерно */
    .meter[data-mode="atk"] .bar .l1::before{ animation: drift-right var(--dur-1) linear infinite; }
    .meter[data-mode="atk"] .bar .l2::before{ animation: drift-right var(--dur-2) linear infinite reverse; }
    .meter[data-mode="atk"] .bar .l3::before{ animation: drift-right var(--dur-3) linear infinite; }
    .meter[data-mode="atk"] .bar .l4::before{ animation: drift-right var(--dur-4) linear infinite reverse; }
    .meter[data-mode="atk"] .bar .l5::before{ animation: drift-right var(--dur-5) linear infinite; }
    .meter[data-mode="atk"] .bar .l6::before{ animation: drift-right var(--dur-6) linear infinite reverse; }

    .meter[data-mode="def"] .bar .l1::before{ animation: drift-left  var(--dur-1) linear infinite; }
    .meter[data-mode="def"] .bar .l2::before{ animation: drift-left  var(--dur-2) linear infinite reverse; }
    .meter[data-mode="def"] .bar .l3::before{ animation: drift-left  var(--dur-3) linear infinite; }
    .meter[data-mode="def"] .bar .l4::before{ animation: drift-left  var(--dur-4) linear infinite reverse; }
    .meter[data-mode="def"] .bar .l5::before{ animation: drift-left  var(--dur-5) linear infinite; }
    .meter[data-mode="def"] .bar .l6::before{ animation: drift-left  var(--dur-6) linear infinite reverse; }

    @keyframes drift-right{ from{ transform: translateX(0) } to{ transform: translateX(var(--seg)) } }
    @keyframes drift-left { from{ transform: translateX(0) } to{ transform: translateX(calc(-1 * var(--seg))) } }

    /* цифры справа */
    .meterLabel{
      min-width:78px; text-align:right; font-size:.8rem; color:#cbd5e1; opacity:.92;
      font-variant-numeric: tabular-nums;
    }

    /* компактнее на низких экранах */
    @media (max-height:740px){
      :root{ --meter-h: 14px; }
      .meter .bar .l2{ transform: translateY(-1.6px); }
      .meter .bar .l3{ transform: translateY(-3.2px); }
      .meter .bar .l4{ transform: translateY(-4.8px); }
      .meter .bar .l5{ transform: translateY(-6.4px); }
      .meter .bar .l6{ transform: translateY(-8px);   }
    }

    /* уважение к Reduce Motion */
    @media (prefers-reduced-motion: reduce){
      .meter .bar .layer::before{ animation: none !important; }
    }





    /* компактнее на невысоких экранах */
    @media (max-height: 900px){
      :root{
        --shopPreviewH: 54px;
        --sq: 12px;
        --builderCell: 12px;
        --builderGap: 2px;
      }
      .leftDock{ width:300px; padding-left:42px; }
      .shipTitle{ font-size:.8rem; }
    }

    @media (max-height: 740px){
      :root{
        --shopPreviewH: 44px;
        --sq: 10px;
        --builderCell: 10px;
        --builderGap: 2px;
      }
      .tiny{ font-size:.75rem; }
    }


/* === Mobile adaptations & safe-area support === */
.orbit{ touch-action:none; } /* prevent page scroll during cube drag */

.fab-rotate{
  position:fixed;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:70;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid #ffffff33;
  background:linear-gradient(180deg,#0e2741cc,#0d1f36cc);
  color:#eaffff; font-weight:700; font-size:20px;
  display:grid; place-items:center;
  box-shadow:0 12px 32px #000a, inset 0 0 0 1px #6ee7b7aa;
}
.fab-rotate[hidden]{ display:none; }

@media (max-width: 1024px), (max-height: 820px){
  :root{ --faceSize: min(92vmin, 720px); }
  .hud{ flex-wrap:wrap; row-gap:.4rem; }
  .scene{ inset: calc(64px + env(safe-area-inset-top)) 0 0 0; }
  .leftDock{ width:86vw; padding-left:16px; }
  .rightDock{ width:86vw; }
  .leftDock.collapsed{ transform: translateX(-100%); }
  .leftToggle{ left:8px; bottom:18px; top:auto; width:42px; height:48px; }
  .shipPreview{ --u:12px; }
  .builderGrid{ grid-template-columns:repeat(var(--bw),14px); grid-template-rows:repeat(var(--bh),14px); gap:2px; }
}
@media (max-width: 640px), (max-height: 720px){
  :root{ --faceSize: min(96vmin, 640px); }
  .hud{ padding:.55rem .7rem; gap:.5rem; }
  .btn{ padding:.48rem .7rem; }
  .rightDock, .leftDock{ width:92vw; }
}


/* ===== Bottom Sheet (Shop on mobile) ===== */
.sheet{ position:fixed; left:0; right:0; bottom:0; transform: translateY(100%);
  background:linear-gradient(180deg,#0d1a30,#0a1224); border-top:1px solid #ffffff22; z-index:60;
  box-shadow:0 -20px 60px #000a; border-radius:16px 16px 0 0; transition: transform .28s ease; }
.sheet.open{ transform: translateY(0); }
.sheetHandle{ width:60px; height:5px; border-radius:999px; background:#ffffff2a; margin:10px auto 6px; }
.sheetHeader{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:0 .9rem .6rem; color:#cfe5ff; }
.sheetTitle{ font-weight:700; letter-spacing:.02em; }
.sheetBody{ padding:0 .9rem .9rem; max-height:50vh; overflow:auto; }

/* make mobile-only by hiding when wide screens */
@media (min-width: 1025px){
  #openShopBtn{ display:none; }
  #shopSheet{ display:none; }
}

/* Wider touch cards inside sheet */
#shopMobile .shipCard{ padding:.6rem; border-radius:.8rem; }
#shopMobile .spinWrap{ height:64px; }

/* Help FAB */
.fab-help{
  position:fixed; left:calc(12px + env(safe-area-inset-left)); bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:72; width:46px; height:46px; border-radius:50%;
  border:1px solid #ffffff33; background:linear-gradient(180deg,#0e2741cc,#0d1f36cc);
  color:#eaffff; font-weight:900; font-size:20px; display:grid; place-items:center;
  box-shadow:0 12px 32px #000a, inset 0 0 0 1px #6ee7b7aa;
}
.fab-help[hidden]{ display:none; }

/* Swipe-to-dismiss affordance */
.dismissed{ display:none !important; }

/* Hide desktop left dock on very small screens – we'll use the sheet instead */
@media (max-width: 900px){
  .leftDock{ display:none; }
  .leftToggle{ display:none; }
}


/* ==== Mobile conditional hides (phone-only) ==== */
@media (max-width: 900px){
  .hud .badge{ display:none; }           /* v2 • постановщик */
  .aiRow{ display:none; }                /* Скорость ИИ */
  #readyHint{ display:none; }            /* (по 25/25 ...) */
  #lockBtn{ display:none; }              /* Фиксация */
  #toggleHelpBtn{ display:none; }        /* ? в HUD */
}

/* Sheet visual tweaks and error flash */
.sheetBody{ max-height:65vh; }
.sheetDivider{ height:1px; background:#ffffff22; margin:.4rem 0; }
.sheet.error{ animation: sheetError .55s ease; }
@keyframes sheetError{
  0%{ box-shadow:0 -20px 60px #000a, inset 0 0 0 0 rgba(255,0,0,.0); }
  40%{ box-shadow:0 -20px 60px #000a, inset 0 0 120px 0 rgba(255,71,87,.35); }
  100%{ box-shadow:0 -20px 60px #000a, inset 0 0 0 0 rgba(255,0,0,.0); }
}

/* Pulse highlight for recently placed ship */
.placedPulse{
  animation: placedPulse 1.4s ease-out 0s 1;
}
@keyframes placedPulse{
  from{ outline:2px solid rgba(94,234,212,.0); box-shadow: inset 0 0 0 1px #6ee7b7aa, 0 0 0 0 rgba(94,234,212,.0); }
  30%{ outline:2px solid rgba(94,234,212,.9); box-shadow: 0 0 24px 6px rgba(94,234,212,.35); }
  to{ outline:2px solid rgba(94,234,212,.0); box-shadow: 0 0 0 0 rgba(94,234,212,.0); }
}


/* Inner body acts like a section within scrollable sheet body */
.sheetBodyInner{ padding:.2rem 0 .2rem; }


/* ===== Mobile HUD polish ===== */
@media (max-width: 900px){
  .hud{
    padding:.6rem .8rem;
    gap:.5rem;
    background:linear-gradient(180deg, #091226dd, #081020bb);
    border-bottom:1px solid #ffffff1a;
    backdrop-filter: blur(8px);
  }
  .hud .title{ gap:.45rem; font-size:1rem; }
  .hud .btn{
    padding:.54rem .9rem;
    border-radius:.9rem;
    box-shadow:0 8px 24px #0007, inset 0 0 0 1px #ffffff1a;
  }
  .hud .btn.primary{
    box-shadow:0 12px 30px #0009, inset 0 0 0 1px #6ee7b777;
  }
  #openShopBtn{ font-weight:700; }
  #readyBtn{ font-weight:800; letter-spacing:.02em; }
  #newGameBtn{ }
  /* reduce title embellishments */
  .badge{ display:none; }
}
/* Make ship cards non-draggable on touch (mobile) */
@media (max-width: 900px){
  .shipCard{ touch-action: manipulation; }
}