/* «Чёрная Корона» — экран игры: холст на весь экран, интерфейс поверх. Интерфейс v2 (11.11.2026): единые токены и
   компоненты (кнопка, окно, вкладки, ползунок, переключатель, список, подсказка, сообщение). Золото на тёмном дереве,
   без стекла на больших площадях (backdrop-filter нет вовсе — телефоны), анимации только transform/opacity.
   Холст и опьянение — классы Stage Квартала (.d-gl, .d-drunk). */
:root {
  /* поверхности: от дальней к ближней */
  --s-bg: #0b0d10; --s-surface: #15110c; --s-surface-2: #1d1811; --s-surface-3: #282117;
  --s-panel: rgba(17, 14, 10, 0.86); --s-panel-2: rgba(28, 23, 16, 0.92);
  /* текст */
  --s-ink: #f4ecd8; --s-ink-2: #cfc3a6; --s-mute: #9c9078;
  /* акцент — золото (один), его заливка и чернила на нём */
  --s-gold: #e2b84a; --s-gold-2: #f3d27a; --s-gold-ink: #1c1303; --s-gold-wash: rgba(226, 184, 74, 0.14); --s-gold-wash-2: rgba(226, 184, 74, 0.24);
  /* линии */
  --s-line: rgba(226, 184, 74, 0.2); --s-line-2: rgba(226, 184, 74, 0.46); --s-hair: rgba(255, 240, 200, 0.08);
  /* состояния */
  --s-ok: #4cb05e; --s-warn: #f5a524; --s-red: #e5484d; --s-red-wash: rgba(229, 72, 77, 0.14); --s-sea: #8fd3ff;
  /* радиусы, шаг отступов 4/8/12/16/24 */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  /* тени: контактная + рассеянная */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.8);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 64px -20px rgba(0, 0, 0, 0.9);
  /* типографика: два начертания — заголовочное и рабочее; шкала 11/12/13/14/16/20 */
  --f-display: Georgia, 'Times New Roman', serif; --f-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 20px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --t-1: 0.12s; --t-2: 0.2s;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  --hud-pad: 10px; --btn: 44px; --act-w: 68px; --act-h: 60px;
}
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html, body.s-body { height: 100%; margin: 0; overflow: hidden; background: #071018; overscroll-behavior: none; }
body.s-body::before { display: none; }
.s-app { position: fixed; inset: 0; padding: 0 !important; max-width: none !important; }
.s-stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: radial-gradient(120% 80% at 50% 0%, #1b3550 0%, #071018 70%); }
.d-gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; }
.d-drunk { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 38%, rgba(120,60,20,.32) 70%, rgba(40,15,0,.72) 100%); }
.hidden, .s-joy.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.grow { min-width: 0; flex: 1; }

/* ───────── загрузка ───────── */
.s-boot { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 40%, #2a1d0c 0%, #07090c 70%); }
.s-boot img { width: min(320px, 70vw); height: auto; filter: drop-shadow(0 0 28px rgba(247,200,90,.35)); }
.s-lbg { position: absolute; inset: -4%; background: #07090c center / cover no-repeat; opacity: 0; transition: opacity 1.6s ease; animation: s-ken 26s linear infinite alternate; }
.s-lbg.on { opacity: 1; } @keyframes s-ken { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.s-lveil { position: absolute; inset: 0; background: radial-gradient(85% 70% at 50% 42%, rgba(7,9,12,.25) 0%, rgba(7,9,12,.78) 62%, rgba(4,5,7,.96) 100%), linear-gradient(transparent 55%, rgba(60,8,10,.35)); }
.s-lbox { position: relative; display: grid; justify-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); text-align: center; }
.s-llogo { width: min(540px, 78vw); max-height: 52dvh; object-fit: contain; height: auto; filter: drop-shadow(0 6px 30px rgba(0,0,0,.7)); }
.s-lpct { color: var(--s-gold-2); font: 700 var(--fs-2)/1 var(--f-ui); letter-spacing: .08em; opacity: .85; font-variant-numeric: tabular-nums; }
.s-ltip { display: inline-flex; align-items: flex-start; justify-content: center; gap: var(--sp-2); max-width: min(560px, 88vw); min-height: 2.6em; margin: var(--sp-1) 0 0; color: #f1e6cc; font: 500 15px/1.35 var(--f-display); text-shadow: 0 2px 8px #000; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.s-ltip.in { opacity: 1; transform: none; } .s-ltip .s-ic { color: var(--s-gold-2); margin-top: .1em; }
.s-brand { position: absolute; left: calc(var(--safe-l) + 10px); bottom: calc(var(--safe-b) + 8px); width: 130px; height: auto; opacity: .88; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,.65)); z-index: 2; }
@media (max-width: 1100px) { .s-brand { width: 100px; } } @media (pointer: coarse) and (max-height: 520px) { .s-brand { width: 64px; opacity: .72; } } @media (max-width: 480px) { .s-brand { width: 62px; opacity: .75; } }
.s-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--s-ink); background: #07090c; overflow: hidden; transition: opacity .7s; z-index: 30; }
.s-load.gone { opacity: 0; pointer-events: none; }
.s-load b { font: 600 17px/1.3 var(--f-display); letter-spacing: .02em; }
.s-lmute { position: absolute; right: calc(var(--safe-r) + 16px); bottom: calc(var(--safe-b) + 16px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s-line-2); background: rgba(10,8,6,.7); color: var(--s-gold-2); font-size: 20px; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.s-lmute.off { opacity: .5; } .s-lmute.off::after { content: ''; position: absolute; width: 26px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.s-lmute .s-ic { width: 20px; height: 20px; }
.s-orb { font-size: 56px; }
.s-prog { width: min(340px, 72vw); height: 6px; border-radius: 3px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(247,200,90,.3); overflow: hidden; }
.s-prog i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a12, #c8901e 45%, #f7d774 85%, #fff2c0); transform-origin: left; transform: scaleX(.03); }
.s-msgbox { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5); color: var(--s-ink); }
.s-msgbox .s-msg-i { font-size: 48px; color: var(--s-gold); } .s-msgbox .s-msg-i .s-ic { width: 56px; height: 56px; stroke-width: 1.4; } .s-msgbox p { max-width: 420px; opacity: .8; }
.s-guest { gap: 10px; } .s-guest .s-inp { width: min(300px, 80vw); flex: none; } .s-err { color: #ff9a9a; min-height: 16px; }

/* ───────── слои поверх сцены ───────── */
.s-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; font-family: var(--f-ui); }
.s-hud > * { pointer-events: auto; }
.s-under { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 1; background: radial-gradient(90% 45% at 50% -10%, rgba(170,240,235,.28), rgba(60,170,175,.08) 45%, rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(20,110,120,.05), rgba(0,18,28,.18)); }
.s-under::after { content: none; }
.s-splash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; background: radial-gradient(120% 70% at 50% 0%, rgba(235,250,255,.85), rgba(150,215,230,.35) 55%, rgba(255,255,255,0) 80%), repeating-linear-gradient(92deg, rgba(255,255,255,.18) 0 3px, rgba(255,255,255,0) 3px 38px); }
.s-splash.on { animation: s-spl .8s ease-out; }
.s-splash.wet { animation: s-wet .9s ease-out; } @keyframes s-wet { 0% { opacity: var(--wk, .5); transform: translateY(-3%); } 100% { opacity: 0; transform: translateY(18%); } }
@keyframes s-spl { 0% { opacity: .95; transform: translateY(-4%); } 100% { opacity: 0; transform: translateY(14%); } }
.s-hurt { position: absolute; inset: 0; pointer-events: none !important; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(170,10,10,.55)); }
.s-hurt.on { animation: s-hurt .55s ease-out; } @keyframes s-hurt { from { opacity: 1; } to { opacity: 0; } }
body.s-cine .s-layer > :not(.s-under):not(.s-splash) { opacity: .15; transition: opacity .6s; pointer-events: none; }
body.s-cine::before, body.s-cine::after { content: ''; position: fixed; left: 0; right: 0; height: 9vh; background: #000; z-index: 50; pointer-events: none; transform-origin: top; animation: s-bars .6s ease-out; }
body.s-cine::before { top: 0; } body.s-cine::after { bottom: 0; transform-origin: bottom; }
@keyframes s-bars { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.s-yt { position: fixed; left: -9px; top: -9px; width: 2px; height: 2px; opacity: 0; pointer-events: none; overflow: hidden; }

/* ───────── иконки: линейные SVG, сетка 24, линия 1.8 ───────── */
.s-ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em; flex: none; display: inline-block; }
.s-ic-sm { width: 1em; height: 1em; }

/* ───────── компонент: клавиша ───────── */
.s-key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid rgba(255, 240, 200, 0.28); border-bottom-width: 2px; background: rgba(8, 6, 4, 0.78); color: var(--s-ink); font: 700 10.5px/1 var(--f-ui); letter-spacing: .02em; white-space: nowrap; font-style: normal; }

/* ───────── компонент: кнопка-иконка ───────── */
.s-btn { position: relative; width: var(--btn); height: var(--btn); flex: none; padding: 0; border-radius: var(--r-2); border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-ink); font-size: 19px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-1); touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform var(--t-1) var(--ease), background-color var(--t-1), border-color var(--t-1), color var(--t-1); }
.s-btn .s-ic { width: 21px; height: 21px; }
.s-btn:active { transform: scale(.94); background: var(--s-surface-3); }
.s-btn:focus-visible, .s-act:focus-visible, .s-chip:focus-visible, .s-pick:focus-visible, .s-subi:focus-visible, .s-tabbtn:focus-visible, .s-switch:focus-visible, .s-keybtn:focus-visible, .s-admhd:focus-visible { outline: 2px solid var(--s-gold-2); outline-offset: 2px; }
.s-btn.on { border-color: var(--s-gold); color: var(--s-gold-2); background: var(--s-surface-3); }
.s-btn.live { background: #8a2226; border-color: #ff8a8e; color: #fff; box-shadow: var(--sh-1), 0 0 0 calc(var(--lvl, 0) * 6px) rgba(229,72,77,.35); }
.s-btn.busy { opacity: .6; }
.s-btn:disabled, .s-chip:disabled, .s-pick:disabled { cursor: default; }
.s-sheet .s-btn, .s-grpp .s-btn, .s-aimp .s-btn { box-shadow: none; background: rgba(255, 255, 255, 0.05); }
@media (hover: hover) and (pointer: fine) {
  .s-btn:hover { border-color: var(--s-line-2); color: var(--s-gold-2); }
  .s-act:hover { border-color: var(--s-line-2); }
  .s-chip:hover:not(:disabled), .s-pick:hover:not(:disabled), .s-subi:hover, .s-tabbtn:hover, .s-keybtn:hover, .s-admhd:hover { background: var(--s-gold-wash); border-color: var(--s-line-2); }
  .s-chip.dng:hover:not(:disabled) { background: rgba(229, 72, 77, 0.24); border-color: var(--s-red); }
  .s-chip.pri:hover:not(:disabled), .s-pick.pri:hover:not(:disabled) { background: var(--s-gold-2); }
}

/* ───────── HUD: левый верх — карточка корабля, здоровье, музыка, FPS ───────── */
.s-tl { position: absolute; top: calc(var(--safe-t) + var(--hud-pad)); left: calc(var(--safe-l) + var(--hud-pad)); width: min(264px, 56vw); display: grid; gap: 6px; justify-items: start; pointer-events: none !important; }
.s-tl > * { pointer-events: auto; }
.s-card { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--r-3); color: var(--s-ink); box-shadow: var(--sh-1); }
.s-status { width: 100%; box-sizing: border-box; padding: 10px 12px; display: grid; gap: 7px; font-size: var(--fs-3); }
.s-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.s-status > * { min-width: 0; } .s-status .s-meta { flex-wrap: wrap; row-gap: 3px; }
.s-name { font: 700 15px/1.2 var(--f-display); color: var(--s-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-role { display: inline-flex; align-items: center; gap: 4px; color: var(--s-ink-2); white-space: nowrap; font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em; }
.s-hp { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.s-hp i { display: block; height: 100%; border-radius: 3px; transform-origin: left; transition: transform .3s var(--ease), background-color .3s; }
.s-meta { font-size: var(--fs-2); color: var(--s-ink-2); flex-wrap: nowrap; } .s-meta small { color: var(--s-mute); font-size: var(--fs-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-meta > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.s-meta .num { color: var(--s-ink); font-weight: 600; }
.s-status .s-ic { width: 14px; height: 14px; color: var(--s-gold); opacity: .9; }
.s-wind { display: inline-flex; align-items: center; gap: 5px; }
.s-arrow { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--s-sea); transition: transform .4s var(--ease); }
.s-arrow .s-ic { width: 15px; height: 15px; color: inherit; stroke-width: 2.2; opacity: 1; }
.s-mehp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: var(--r-pill); background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-red); box-shadow: var(--sh-1); transition: opacity .4s; }
.s-mehp .s-ic { width: 15px; height: 15px; }
.s-mehp.full { opacity: .6; } .s-mehp i { display: block; width: 96px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .s-mehp b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b3261e, #e5484d); transform-origin: left; transition: transform .25s var(--ease); }
.s-mehp.low { border-color: var(--s-red); background: rgba(60, 12, 12, 0.9); }
.s-np { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 5px 10px; border-radius: var(--r-pill); background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-gold-2); font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none !important; }
.s-np .s-ic { width: 14px; height: 14px; }
.s-fps { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-mute); font: 600 var(--fs-1)/1.2 var(--f-ui); letter-spacing: .04em; pointer-events: none !important; }
.s-fps b { color: var(--s-ok); font-size: var(--fs-3); min-width: 2ch; text-align: right; } .s-fps.mid b { color: var(--s-warn); } .s-fps.low b { color: var(--s-red); }

/* ───────── HUD: верх по центру — компас и лента сообщений ───────── */
.s-compass { position: absolute; top: calc(var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); width: clamp(200px, calc(100vw - 760px), 380px); height: 64px; pointer-events: none !important; z-index: 3; }
body:has(.s-sheet) .s-compass { display: none; }
.s-feed { position: absolute; top: calc(var(--safe-t) + 78px); left: 50%; transform: translateX(-50%); width: min(460px, 92vw); display: grid; gap: 5px; pointer-events: none !important; z-index: 4; }
.s-msg { justify-self: center; display: inline-flex; align-items: flex-start; gap: 7px; max-width: 100%; box-sizing: border-box; padding: 7px 12px; border-radius: var(--r-2); background: var(--s-panel-2); color: var(--s-ink); font-size: var(--fs-3); line-height: 1.3; text-align: left; border: 1px solid var(--s-line); box-shadow: var(--sh-1); transition: opacity .4s, transform .4s var(--ease); animation: s-msg-in .22s var(--ease); }
.s-msg > .s-ic:first-child { color: var(--s-gold); margin-top: .05em; flex: none; } .s-msg .s-ic { color: var(--s-gold); }
.s-msg.bad { border-color: rgba(229, 72, 77, 0.55); } .s-msg.bad > .s-ic:first-child { color: #ff8a8e; }
.s-msg.gone { opacity: 0; transform: translateY(-6px); }
@keyframes s-msg-in { from { opacity: 0; transform: translateY(-8px); } }
.s-ann { position: fixed; left: 50%; top: calc(var(--safe-t) + 96px); transform: translateX(-50%); max-width: min(720px, 92vw); padding: 14px 20px; border-radius: var(--r-3); background: var(--s-surface-2); border: 1px solid var(--s-gold); color: #fff3cf; font: 700 17px/1.35 var(--f-ui); text-align: center; z-index: 30; box-shadow: var(--sh-2); }
.s-rotate { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--sp-2); padding: 12px 16px; border-radius: var(--r-3); background: var(--s-panel-2); color: var(--s-ink); border: 1px solid var(--s-line); font-size: var(--fs-4); text-align: left; max-width: 80vw; pointer-events: none !important; box-shadow: var(--sh-2); }
.s-rotate .s-ic { color: var(--s-gold); width: 22px; height: 22px; }

/* ───────── HUD: правый верх — системные кнопки и меню ───────── */
.s-top { position: absolute; top: calc(var(--safe-t) + var(--hud-pad)); right: calc(var(--safe-r) + var(--hud-pad)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 52vw; z-index: 5; }
.s-menu { position: absolute; top: calc(var(--safe-t) + var(--hud-pad) + var(--btn) + 8px); right: calc(var(--safe-r) + var(--hud-pad)); width: min(264px, calc(100vw - 20px)); max-height: calc(100dvh - var(--safe-t) - var(--btn) - 34px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 12; padding: 6px; display: grid; gap: 4px; border-radius: var(--r-3); background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--sh-2); color: var(--s-ink); transform-origin: top right; animation: s-pop .16s var(--ease); }
@keyframes s-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.s-menu hr { border: 0; border-top: 1px solid var(--s-hair); margin: 2px 6px; }
.s-tip { position: fixed; left: 0; top: 0; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: var(--r-1); background: #0c0a07; border: 1px solid var(--s-line-2); color: var(--s-ink); font: 600 var(--fs-2)/1.2 var(--f-ui); white-space: nowrap; pointer-events: none !important; box-shadow: var(--sh-1); }
.s-narrow { display: none; }

/* ───────── HUD: правый низ — действия ───────── */
.s-acts { position: absolute; right: calc(var(--safe-r) + var(--hud-pad)); bottom: calc(var(--safe-b) + 14px); display: grid; grid-template-columns: repeat(3, var(--act-w)); gap: 8px; justify-items: stretch; direction: rtl; max-width: calc(100vw - 20px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px; }
.s-acts::-webkit-scrollbar { display: none; }
.s-acts.many { grid-template-columns: repeat(4, var(--act-w)); }
.s-act { position: relative; direction: ltr; height: var(--act-h); min-width: 0; padding: 0 3px; border-radius: var(--r-3); border: 1px solid var(--s-line); background: linear-gradient(180deg, rgba(40, 33, 23, 0.94), rgba(17, 14, 10, 0.94)); color: var(--s-ink); display: grid; align-content: center; justify-items: center; gap: 3px; cursor: pointer; box-shadow: var(--sh-1), inset 0 1px 0 var(--s-hair); touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform var(--t-1) var(--ease), border-color var(--t-1), background-color var(--t-1); }
.s-act:active { transform: scale(.94); }
.s-act .e { line-height: 0; white-space: nowrap; } .s-act .e .s-ic { width: 24px; height: 24px; }
.s-act small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font: 600 10.5px/1.1 var(--f-ui); letter-spacing: .01em; color: var(--s-ink-2); text-align: center; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.s-act small.lg { font-size: 9.5px; letter-spacing: -.01em; } .s-act small.xl { font-size: 8.5px; letter-spacing: -.02em; }
.s-act.hot { border-color: var(--s-gold); background: linear-gradient(180deg, rgba(122, 88, 22, 0.96), rgba(62, 42, 10, 0.96)); } .s-act.hot .e { color: var(--s-gold-2); } .s-act.hot small { color: #fff3cf; }
.s-act.wide { grid-column: span 2; }
.s-act.grp::after { content: ''; position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-top: 2px solid var(--s-gold); border-right: 2px solid var(--s-gold); transform: rotate(-45deg); opacity: .85; }
.s-act.grp.on { border-color: var(--s-gold); background: var(--s-surface-3); }
.s-act .s-key { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 9.5px; border-radius: 4px; display: none; }
.s-subi .s-key { margin-left: auto; display: none; }
@media (hover: hover) and (pointer: fine) { .s-act .s-key:not(:empty), .s-subi .s-key:not(:empty) { display: inline-grid; } }
/* панель группы и общий «поповер»: рядом с кнопками (на узком экране — над ними) */
.s-grpp { position: absolute; right: calc(var(--safe-r) + 20px + var(--gw, 228px)); bottom: calc(var(--safe-b) + 14px); width: 228px; border-radius: var(--r-3); padding: 6px; z-index: 6; color: var(--s-ink); background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--sh-2); transform-origin: bottom right; animation: s-sub-in .16s var(--ease); }
.s-grpp.above { right: calc(var(--safe-r) + 10px); bottom: calc(var(--safe-b) + 24px + var(--gh, 140px)); width: min(250px, calc(100vw - 20px)); }
.s-subh { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 2px 6px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--s-line); color: var(--s-gold); font-size: var(--fs-2); letter-spacing: .08em; text-transform: uppercase; }
.s-subh b { flex: 1; font-weight: 700; } .s-subh .e { line-height: 0; } .s-subh .e .s-ic { width: 18px; height: 18px; }
.s-subx { width: 32px; height: 32px; padding: 0; border-radius: var(--r-1); border: 1px solid var(--s-line); background: rgba(255,255,255,.05); color: var(--s-ink); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.s-subx .s-ic { width: 16px; height: 16px; }
.s-subb { display: grid; gap: 4px; max-height: min(52dvh, 330px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.s-subi { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--s-ink); font: 600 var(--fs-4)/1.2 var(--f-ui); text-align: left; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color var(--t-1), border-color var(--t-1), transform var(--t-1) var(--ease); }
.s-subi:active { transform: scale(.98); background: var(--s-gold-wash); }
.s-subi.hot { border-color: var(--s-gold); background: var(--s-gold-wash-2); }
.s-subi.dng { color: #ffb3b5; } .s-subi.dng .e { color: #ff8a8e; }
.s-subi .e { width: 24px; flex: none; display: grid; place-items: center; color: var(--s-gold); line-height: 0; } .s-subi .e .s-ic { width: 21px; height: 21px; }
.s-subi .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes s-sub-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.s-helm { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; color: var(--s-ink-2); font: 600 var(--fs-1)/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; pointer-events: none !important; text-shadow: 0 1px 3px #000; }
.s-rud { width: 124px; height: 6px; border-radius: 3px; background: rgba(10, 8, 6, 0.7); box-shadow: inset 0 0 0 1px var(--s-line); position: relative; }
.s-rud::before { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--s-line-2); }
.s-rud i { position: absolute; left: 50%; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--s-gold); box-shadow: 0 1px 3px rgba(0,0,0,.6); transition: transform .08s linear; }
.s-joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(244,236,216,.35); background: rgba(10,8,6,.25); pointer-events: none; z-index: 9; }
.s-joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(226,184,74,.78); }

/* ───────── подзорная труба и прицел ───────── */
.s-glass { --r: min(44vw, 44vh); position: absolute; inset: 0; pointer-events: none; display: none; background: radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--r) * .8), rgba(0,0,0,.28) calc(var(--r) * .93), rgba(0,0,0,.8) calc(var(--r) * .99), rgba(8,6,4,.985) var(--r)); }
.s-glass::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent calc(var(--r) * .88), rgba(255,90,60,.12) calc(var(--r) * .95), rgba(70,150,255,.12) calc(var(--r) * .975), transparent var(--r)); }
.s-glass::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse 38% 26% at 34% 26%, rgba(255,255,255,.07), transparent 70%), radial-gradient(circle, rgba(255,236,200,.035), rgba(255,236,200,0) 60%); }
.s-glass.on { display: block; animation: s-gl-in .22s ease-out; }
.s-glass .ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2 + 10px); height: calc(var(--r) * 2 + 10px); transform: translate(-50%, -50%); border-radius: 50%; border: 7px solid #9a7a3c; box-shadow: inset 0 0 0 2px #e2c47a, inset 0 0 42px rgba(0,0,0,.55), 0 0 0 2px rgba(0,0,0,.6); }
.s-glass .cross { display: none; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background: linear-gradient(rgba(255,240,200,.55), rgba(255,240,200,.55)) center / 1px 100% no-repeat, linear-gradient(rgba(255,240,200,.55), rgba(255,240,200,.55)) center / 100% 1px no-repeat; }
.s-glass .zb { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.s-glass .zb button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s-line-2); background: var(--s-panel-2); color: #f3e2b0; font: 600 20px/1 var(--f-ui); cursor: pointer; touch-action: manipulation; }
.s-glass .zb button:active { transform: scale(.94); }
.s-glass .zb .zq { width: auto; min-width: 44px; padding: 0 10px; border-radius: var(--r-2); font-size: var(--fs-3); font-weight: 700; }
.s-glass .zb .z { min-width: 46px; text-align: center; color: #f3e2b0; font: 700 15px/1 var(--f-ui); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@keyframes s-gl-in { from { opacity: 0; } to { opacity: 1; } }
.s-aimp { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-3); background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--sh-2); color: var(--s-ink); z-index: 5; max-width: calc(100vw - 20px); }
.s-aimp .r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.s-aimp .rg { min-width: 70px; text-align: center; color: var(--s-gold); font-weight: 700; font-variant-numeric: tabular-nums; } .s-aimp .hint { color: var(--s-mute); text-align: center; font-size: var(--fs-1); }
.s-aimp .s-chip { min-height: 36px; font-size: var(--fs-3); }
.s-fire { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; min-height: 46px; padding: 0 18px; border-radius: var(--r-2); border: 1px solid #f0b04a; background: linear-gradient(180deg, #b4471f, #7a2a10); color: #fff1d6; font: 700 var(--fs-5)/1 var(--f-ui); letter-spacing: .04em; cursor: pointer; touch-action: manipulation; transition: transform var(--t-1) var(--ease); }
.s-fire:active { transform: scale(.96); }
@media (max-width: 700px) { .s-aimp { bottom: auto; top: calc(var(--safe-t) + 112px); } .s-aimp .hint { display: none; } }
.s-xhair { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; border: 2px solid rgba(255,240,200,.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.s-xhair::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffd36a; }

/* ───────── компонент: окно ───────── */
.s-sheet { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 24px - var(--safe-l) - var(--safe-r))); height: fit-content; max-height: min(760px, calc(100dvh - 32px - var(--safe-t) - var(--safe-b))); display: flex; flex-direction: column; box-sizing: border-box; background: var(--s-surface); border: 1px solid var(--s-line-2); border-radius: var(--r-4); color: var(--s-ink); font: 400 var(--fs-4)/1.4 var(--f-ui); z-index: 40; box-shadow: var(--sh-2); overflow: hidden; animation: s-up .2s var(--ease); }
.s-sheet.noanim { animation: none; }
.s-sheet b, .s-tab b, .s-menu b, .s-grpp b, .s-tip b, .s-aimp b { font-weight: 700; }
.s-sheet-b > .s-chip, .s-pane > .s-chip { align-self: flex-start; }
.s-sheet.s-tall { height: min(660px, calc(100dvh - 32px - var(--safe-t) - var(--safe-b))); }   /* окна с вкладками — одной высоты: не прыгают при смене вкладки */
@keyframes s-up { from { transform: translateY(14px) scale(.985); opacity: 0; } }
.s-sheet-h { flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px; box-sizing: border-box; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--s-line); background: linear-gradient(180deg, var(--s-surface-2), var(--s-surface)); font: 700 17px/1.2 var(--f-display); color: var(--s-gold); }
.s-sheet-h > b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-sheet-h .s-ic { color: var(--s-gold); } .s-sheet-i { line-height: 0; } .s-sheet-i .s-ic { width: 22px; height: 22px; }
.s-sheet-h .s-btn { width: 40px; height: 40px; border-radius: 10px; color: var(--s-ink-2); border-color: transparent; }
.s-sheet-h .s-btn .s-ic { color: inherit; width: 19px; height: 19px; }
.s-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--s-gold-wash); border: 1px solid var(--s-line); color: var(--s-gold-2); font: 700 var(--fs-1)/1.2 var(--f-ui); letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-badge.mute { background: rgba(255,255,255,.05); border-color: var(--s-hair); color: var(--s-ink-2); } .s-badge.red { background: var(--s-red-wash); border-color: rgba(229,72,77,.4); color: #ffb3b5; } .s-badge.sea { background: rgba(143, 211, 255, 0.1); border-color: rgba(143, 211, 255, 0.3); color: var(--s-sea); }
.s-badge .s-ic { width: 12px; height: 12px; }
.s-sheet-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); scrollbar-width: thin; scrollbar-color: rgba(226,184,74,.35) transparent; }
.s-sheet-b > * { flex: none; }
.s-sheet-b::-webkit-scrollbar { width: 8px; } .s-sheet-b::-webkit-scrollbar-thumb { background: rgba(226,184,74,.3); border-radius: 4px; border: 2px solid var(--s-surface); }
.s-sheet-f { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: 10px var(--sp-4); border-top: 1px solid var(--s-line); background: var(--s-surface-2); }
.s-hint { margin: 2px 2px 0; font-size: var(--fs-2); color: var(--s-mute); line-height: 1.45; }
.s-sub { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-2); font: 700 var(--fs-2)/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--s-gold); }
.s-sub .s-ic { width: 15px; height: 15px; }
.s-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); color: var(--s-mute); text-align: center; font-size: var(--fs-3); } .s-empty .s-ic { width: 28px; height: 28px; color: var(--s-line-2); }

/* ───────── компонент: кнопка, плашка-выбор, строка списка ───────── */
.s-chip, .s-pick { box-sizing: border-box; border: 1px solid var(--s-line); background: rgba(255,255,255,.045); color: var(--s-ink); cursor: pointer; font: 600 var(--fs-4)/1.25 var(--f-ui); text-align: left; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform var(--t-1) var(--ease), background-color var(--t-1), border-color var(--t-1), color var(--t-1); }
.s-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); white-space: nowrap; }
.s-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; width: 100%; min-height: 48px; padding: 8px 14px; border-radius: var(--r-2); }
.s-pick small { color: var(--s-mute); font-weight: 400; font-size: var(--fs-2); }
.s-chip:active:not(:disabled), .s-pick:active:not(:disabled) { transform: scale(.97); background: var(--s-gold-wash); }
.s-chip.on, .s-pick.on { border-color: var(--s-gold); background: var(--s-gold-wash-2); color: #fff3cf; }
.s-pick.arm { border-color: var(--s-gold); box-shadow: 0 0 0 2px var(--s-gold-wash-2) inset; } .s-pick.arm .s-note { color: #ffe08a; font-weight: 600; }
.s-chip:disabled, .s-pick:disabled { opacity: .5; } .s-pick.on:disabled { opacity: 1; }
.s-chip.pri, .s-pick.pri { justify-content: center; text-align: center; border-color: var(--s-gold); background: var(--s-gold); color: var(--s-gold-ink); font-weight: 700; }
.s-chip.pri .s-ic, .s-pick.pri .s-ic { color: inherit; }
.s-chip.pri:active:not(:disabled), .s-pick.pri:active:not(:disabled) { background: var(--s-gold-2); }
.s-chip.dng { border-color: rgba(229, 72, 77, 0.45); background: var(--s-red-wash); color: #ffb3b5; }
.s-chip.sm { min-height: 34px; padding: 0 11px; font-size: var(--fs-3); }
span.s-chip { cursor: default; }
.s-pick.exc { opacity: 1; border-color: rgba(143, 211, 255, 0.4); background: rgba(143, 211, 255, 0.07); cursor: default; }
.s-chip .s-ic, .s-pick .s-ic { color: var(--s-gold); } .s-chip.dng .s-ic { color: #ff8a8e; } .s-chip.on .s-ic { color: var(--s-gold-2); }
.s-roles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s-price { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--s-gold-2); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .s-price .s-ic { width: 15px; height: 15px; }
.s-pick .s-note { flex-basis: 100%; color: var(--s-mute); font-weight: 400; font-size: var(--fs-2); line-height: 1.35; }
.s-stars { display: inline-flex; gap: 2px; margin-right: 6px; } .s-stars i { width: 13px; height: 13px; background: rgba(255, 240, 200, 0.18); clip-path: polygon(50% 2%, 62% 36%, 98% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 2% 36%, 38% 36%); } .s-stars i.on { background: var(--s-gold); }

/* ───────── компонент: поле ввода ───────── */
.s-inp, .s-in { box-sizing: border-box; flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid var(--s-line); background: rgba(0, 0, 0, 0.35); color: var(--s-ink); font: 400 16px/1.2 var(--f-ui); outline: none; transition: border-color var(--t-1); }
.s-inp::placeholder, .s-in::placeholder { color: var(--s-mute); }
.s-inp:focus, .s-in:focus { border-color: var(--s-gold); }
textarea.s-in, .s-rep { width: 100%; height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.s-search { position: relative; display: flex; align-items: center; } .s-search .s-ic { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--s-mute); pointer-events: none; } .s-search .s-inp { padding-left: 38px; }
.s-hits { display: grid; gap: 6px; } .s-hits small { color: var(--s-mute); }

/* ───────── компонент: вкладки ───────── */
.s-tabs { flex: none; display: flex; gap: 4px; padding: 8px var(--sp-3) 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--s-line); background: var(--s-surface); }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tabbtn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--s-ink-2); font: 600 var(--fs-3)/1 var(--f-ui); cursor: pointer; white-space: nowrap; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: color var(--t-1), background-color var(--t-1); }
.s-tabbtn .s-ic { width: 17px; height: 17px; }
.s-tabbtn.on { color: var(--s-gold-2); background: var(--s-gold-wash); }
.s-tabbtn.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--s-gold); }
.s-pane { display: none; flex-direction: column; gap: var(--sp-3); } .s-pane.on { display: flex; }

/* ───────── компонент: строка настройки, ползунок, переключатель ───────── */
.s-set { display: grid; gap: 4px; }
.s-set .s-row { justify-content: space-between; font-size: var(--fs-4); color: var(--s-ink); } .s-set .s-row > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .s-set .s-row .s-ic { color: var(--s-gold); flex: none; }
.s-set .num { color: var(--s-gold-2); font-weight: 700; font-size: var(--fs-3); }
.s-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--s-gold); touch-action: pan-y; }
.s-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--s-gold) var(--v, 100%), rgba(255,255,255,.12) var(--v, 100%)); }
.s-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--s-gold-2); border: 2px solid var(--s-surface); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.s-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); } .s-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--s-gold); }
.s-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--s-gold-2); border: 2px solid var(--s-surface); }
.s-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 6px 12px; border-radius: var(--r-2); background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); }
.s-kv > div { min-width: 0; } .s-kv b { display: block; font-weight: 600; } .s-kv small { display: block; color: var(--s-mute); font-size: var(--fs-2); line-height: 1.35; }
.s-switch { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border-radius: 14px; border: 1px solid var(--s-line-2); background: rgba(0,0,0,.4); cursor: pointer; touch-action: manipulation; transition: background-color var(--t-2), border-color var(--t-2); }
.s-switch::before { content: ''; position: absolute; inset: -8px; }
.s-switch i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--s-ink-2); transition: transform var(--t-2) var(--ease), background-color var(--t-2); }
.s-switch[aria-checked="true"] { background: var(--s-gold); border-color: var(--s-gold); } .s-switch[aria-checked="true"] i { transform: translateX(18px); background: var(--s-gold-ink); }
/* графика: выбор уровня — список с описанием */
.s-qual { display: grid; gap: 6px; }
.s-qopt { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 2px 10px; }
.s-qopt .s-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--s-line-2); box-sizing: border-box; display: grid; place-items: center; } .s-qopt.on .s-radio { border-color: var(--s-gold); } .s-qopt.on .s-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--s-gold); }
.s-qopt b { font-weight: 700; } .s-qopt .s-note { grid-column: 2 / -1; flex-basis: auto; }
/* управление: список действий и клавиш */
.s-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-3); }
.s-keyrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; padding: 0 4px 0 12px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); }
.s-keyrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); }
.s-keybtn { flex: none; min-width: 76px; height: 34px; padding: 0 8px; border-radius: var(--r-1); border: 1px solid var(--s-line); background: rgba(0,0,0,.3); color: var(--s-ink); cursor: pointer; display: inline-grid; place-items: center; font: 600 var(--fs-2)/1 var(--f-ui); transition: background-color var(--t-1), border-color var(--t-1); }
.s-keybtn .s-key { min-width: 26px; height: 24px; font-size: var(--fs-2); }
.s-keybtn.cap { border-color: var(--s-gold); background: var(--s-gold-wash-2); color: var(--s-gold-2); }
.s-keybtn.none .s-key { opacity: .45; }
.s-keyrow.swapped { border-color: var(--s-line-2); }
.s-note-bar { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--r-2); background: var(--s-gold-wash); border: 1px solid var(--s-line); color: var(--s-ink); font-size: var(--fs-3); line-height: 1.4; } .s-note-bar .s-ic { color: var(--s-gold); flex: none; margin-top: .1em; } .s-note-bar.bad { background: var(--s-red-wash); border-color: rgba(229,72,77,.4); } .s-note-bar.bad .s-ic { color: #ff8a8e; }
@media (max-width: 560px) { .s-keys { grid-template-columns: 1fr; } }

/* ───────── разделы-«гармошка» (старые окна) ───────── */
.s-sects { display: block; min-height: max-content; } .s-sects > .s-sect:first-child { margin-top: 0; }
.s-sect { flex-shrink: 0; min-height: max-content; border: 1px solid var(--s-line); border-radius: var(--r-2); background: rgba(255,255,255,.03); margin-top: var(--sp-2); overflow: hidden; }
.s-secth { width: 100%; display: flex; align-items: center; gap: var(--sp-2); min-height: 46px; padding: 0 12px; border: 0; background: transparent; color: var(--s-gold); font: 700 var(--fs-4)/1 var(--f-ui); letter-spacing: .03em; cursor: pointer; text-align: left; }
.s-secth b { flex: 1; font-weight: inherit; } .s-secth .chev { transition: transform .15s; opacity: .8; line-height: 0; } .s-sect.open .s-secth .chev { transform: rotate(90deg); }
.s-sectb { display: none; padding: 2px 12px 12px; } .s-sect.open .s-sectb { display: grid; gap: 10px; }

/* ───────── команда, музыка, лавки ───────── */
.s-crew { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-2); background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); }
.s-crew small { display: flex; align-items: center; gap: 4px; color: var(--s-mute); font-size: var(--fs-2); } .s-crew small .s-ic { width: 13px; height: 13px; color: var(--s-gold); }
.s-crew b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.s-st { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--s-mute); vertical-align: 1px; } .s-st.on { background: var(--s-ok); } .s-st.red { background: var(--s-red); }
.s-now { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-2); background: var(--s-gold-wash); border: 1px solid var(--s-line); font-size: var(--fs-3); overflow: hidden; } .s-now span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-now .s-ic { color: var(--s-gold); }
.s-shoprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-radius: var(--r-2); background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); }
.s-shoprow > div:not(.s-roles) { flex: 1 1 180px; min-width: 0; } .s-shoprow b { display: block; } .s-shoprow small { display: block; color: var(--s-mute); font-size: var(--fs-2); line-height: 1.4; }
.s-shoprow .s-pick { width: auto; min-height: 40px; flex: none; } .s-shoprow > .s-roles { flex: 1 1 100%; } .s-shoprow > .s-shopico { flex: none; }
.s-shopico { width: 44px; height: 44px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--s-gold-wash); border: 1px solid var(--s-line); color: var(--s-gold); line-height: 0; } .s-shopico .s-ic { width: 24px; height: 24px; }
.s-owned { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(76, 176, 94, 0.14); border: 1px solid rgba(76, 176, 94, 0.4); color: #a5e3b1; font: 700 var(--fs-2)/1 var(--f-ui); white-space: nowrap; } .s-owned .s-ic { width: 14px; height: 14px; color: inherit; }
.s-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--sp-2); }
.s-skin { display: grid; gap: 4px; align-content: center; min-height: 60px; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid var(--s-line); background: rgba(255,255,255,.045); color: var(--s-ink); cursor: pointer; text-align: left; font: 600 var(--fs-3)/1.2 var(--f-ui); touch-action: manipulation; transition: transform var(--t-1) var(--ease), background-color var(--t-1), border-color var(--t-1); }
.s-skin b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-skin small { display: flex; align-items: center; gap: 4px; color: var(--s-gold-2); font: 700 var(--fs-2)/1 var(--f-ui); font-variant-numeric: tabular-nums; } .s-skin small .s-ic { width: 13px; height: 13px; }
.s-skin:active { transform: scale(.97); } .s-skin.on { border-color: var(--s-gold); background: var(--s-gold-wash-2); } .s-skin.on small { color: #a5e3b1; }
@media (hover: hover) and (pointer: fine) { .s-skin:hover { border-color: var(--s-line-2); background: var(--s-gold-wash); } }
.s-shipcv { display: block; width: 100%; height: auto; aspect-ratio: 640 / 340; border-radius: var(--r-2); background: radial-gradient(80% 90% at 50% 30%, #2a1d0c, #07090c 75%); border: 1px solid var(--s-line); }
label.s-row { justify-content: flex-start; gap: 10px; min-height: 44px; padding: 4px 2px; cursor: pointer; font-size: var(--fs-3); color: var(--s-ink-2); } label.s-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--s-gold); flex: none; }

/* ───────── карта моря ───────── */
.s-mapsheet { width: min(1100px, calc(100vw - 16px)) !important; height: min(92dvh, calc(100dvh - 16px)); max-height: none !important; }
.s-mapsheet .s-sheet-h { min-height: 52px; }
.s-maptp { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 16px); transform: translateX(-50%); z-index: 3; min-height: 46px; padding: 0 18px; box-shadow: var(--sh-2); white-space: nowrap; background: var(--s-surface-2) !important; }
.s-maphint { margin-left: auto; color: var(--s-mute); font: 500 var(--fs-2)/1.2 var(--f-ui); white-space: nowrap; }
.s-mapcv { flex: 1; min-height: 0; width: 100%; height: 100%; display: block; touch-action: none; background: #e9dcbc; }

/* ───────── админка ───────── */
.s-admsheet { width: min(720px, calc(100vw - 24px)) !important; height: min(760px, calc(100dvh - 32px)); }
.s-admtools { display: flex; align-items: center; gap: var(--sp-2); } .s-admtools .s-search { flex: 1; }
.s-admrow { border-radius: var(--r-2); background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); overflow: hidden; }
.s-admrow.open { border-color: var(--s-line-2); background: rgba(255,255,255,.05); }
.s-admhd { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border: 0; background: transparent; color: var(--s-ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
div.s-admhd { cursor: default; }
.s-admhd .sid { flex: none; min-width: 34px; color: var(--s-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.s-admhd .nm { flex: 1; min-width: 0; display: grid; gap: 2px; } .s-admhd .nm b { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-admhd .nm small { display: flex; align-items: center; gap: 4px; color: var(--s-mute); font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-admhd .nm small .s-ic { width: 13px; height: 13px; flex: none; }
.s-admhd .tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .s-admhd .chev { flex: none; color: var(--s-mute); line-height: 0; transition: transform var(--t-2) var(--ease); } .s-admrow.open .s-admhd .chev { transform: rotate(90deg); }
.s-admbody { display: none; padding: 2px 12px 12px; gap: 10px; } .s-admrow.open .s-admbody { display: grid; }
.s-admgrp { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; align-items: start; } .s-admgrp > span { padding-top: 9px; color: var(--s-mute); font: 700 var(--fs-1)/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.s-admgrp.dng > span { color: #ff8a8e; } .s-admgrp > .s-roles { grid-column: auto; }
.s-adminfo { padding: 8px 10px; border-radius: var(--r-1); background: rgba(0,0,0,.3); color: var(--s-ink-2); font-size: var(--fs-2); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.s-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-2); background: var(--s-red-wash); border: 1px solid rgba(229,72,77,.45); color: var(--s-ink); font-size: var(--fs-3); } .s-confirm > span { flex: 1; min-width: 160px; } .s-confirm b { color: #ffd0d1; }
.s-admh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px 2px; } .s-admh b { color: var(--s-ink); } .s-admh small { color: var(--s-mute); text-align: right; }
.s-admrow > .s-roles, .s-admrow > .s-hint, .s-admrow > small, .s-admrow > .s-chip { margin: 6px 12px 10px; } .s-admrow > .s-hint { color: var(--s-ink-2); font-size: var(--fs-3); }
.s-admrow .s-chip { min-height: 36px; font-size: var(--fs-3); padding: 0 12px; }
@media (max-width: 560px) { .s-admgrp { grid-template-columns: 1fr; } .s-admgrp > span { padding-top: 0; } .s-admhd .tags { display: none; } }
@media (pointer: coarse) { .s-admrow .s-chip, .s-chip.sm { min-height: 44px; } .s-keybtn { height: 40px; } }

/* ───────── табло Tab ───────── */
.s-tab { position: fixed; inset: 0; margin: auto; width: min(680px, calc(100vw - 24px)); height: fit-content; max-height: min(78dvh, calc(100dvh - 24px)); display: flex; flex-direction: column; border-radius: var(--r-4); background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--sh-2); color: var(--s-ink); font: 400 var(--fs-4)/1.3 var(--f-ui); z-index: 25; overflow: hidden; }
.s-tabh { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 14px 18px 12px; border-bottom: 1px solid var(--s-line); background: linear-gradient(180deg, var(--s-surface-2), var(--s-surface)); color: var(--s-gold); font: 700 17px/1 var(--f-display); } .s-tabh small { color: var(--s-mute); font: 500 var(--fs-2)/1 var(--f-ui); }
.s-tabl { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; display: grid; gap: 2px; align-content: start; }
.s-tabr { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.3fr) auto auto !important; gap: 10px; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: 10px; } .s-tabr:nth-child(odd) { background: rgba(255,255,255,.035); }
.s-tabr > b { color: var(--s-gold); font-variant-numeric: tabular-nums; } .s-tabr > span, .s-tabr > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-tabr > span { font-weight: 600; }
.s-tabr small { color: var(--s-ink-2); font-size: var(--fs-2); text-align: left; } .s-tabr i { font-style: normal; font-size: var(--fs-1); font-weight: 700; color: var(--s-sea); white-space: nowrap; } .s-tabr.me { box-shadow: inset 0 0 0 1px var(--s-line-2); background: var(--s-gold-wash) !important; }
.s-tabr .s-ic { width: 14px; height: 14px; color: var(--s-gold); }
.s-tabship { font-style: normal; font-weight: 400; font-size: var(--fs-2); color: var(--s-mute); } .s-tabnet { text-decoration: none; font-size: var(--fs-2); color: var(--s-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .s-tabnet .s-ic { color: var(--s-mute); }
@media (max-width: 640px) { .s-tabr { grid-template-columns: 40px minmax(0, 1fr) auto !important; } .s-tabr > small, .s-tabr > i { display: none; } }

/* ───────── узкие и низкие экраны ───────── */
@media (max-width: 1100px), (max-height: 520px) { body:has(.s-sheet) .s-acts, body:has(.s-sheet) .s-grpp, body:has(.s-sheet) .s-helm { visibility: hidden; } }
body:has(.s-mapsheet) .s-hud > :not(.s-hurt), body:has(.s-admsheet) .s-top { visibility: hidden; }
@media (max-width: 760px), (max-height: 520px) { .s-wide { display: none !important; } .s-narrow { display: flex; }
  body:has(.s-sheet) .s-hud > :not(.s-hurt), body:has(.s-sheet) .s-brand { visibility: hidden; } }
/* телефон стоя: кнопки — в два ряда справа, компас и лента — ниже карточки */
@media (max-width: 640px) and (min-height: 521px) {
  .s-top { max-width: calc(44px * 3 + 12px); } .s-tl { width: min(210px, 52vw); } .s-status { min-width: 0; overflow: hidden; } .s-meta small { display: none; } .s-meta { gap: 6px; }
  .s-compass { top: calc(var(--safe-t) + 176px); width: min(330px, calc(100vw - 32px)); } .s-feed { top: calc(var(--safe-t) + 246px); }
  .s-acts, .s-acts.many { grid-template-columns: repeat(4, 62px); gap: 6px; } :root { --act-w: 62px; --act-h: 56px; }
  .s-sheet { max-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b)); }
}
/* телефон боком / низкий экран: компактный HUD, окна — почти во всю высоту */
@media (max-height: 520px) {
  :root { --hud-pad: 8px; --act-w: 62px; --act-h: 48px; --act-n: 5; }
  .s-aimp { left: calc(var(--safe-l) + 8px); bottom: calc(var(--safe-b) + 8px); transform: none; padding: 6px 8px; gap: 5px; max-width: calc(100vw - var(--act-n) * (var(--act-w) + 5px) - 28px - var(--safe-l) - var(--safe-r)); } .s-aimp .hint { display: none; } .s-aimp .s-chip { min-height: 40px; padding: 0 12px; } .s-fire { min-width: 120px; min-height: 44px; }
  .s-tl { width: min(204px, 30vw); gap: 4px; } .s-status { padding: 6px 9px; gap: 4px; } .s-name { font-size: var(--fs-3); } .s-meta { font-size: var(--fs-1); gap: 6px; } .s-meta small { display: none; } .s-status .s-ic { width: 12px; height: 12px; }
  .s-mehp { padding: 3px 8px 3px 6px; } .s-mehp i { width: 64px; } .s-np { font-size: var(--fs-1); padding: 3px 8px; }
  .s-top { gap: 5px; max-width: 60vw; flex-wrap: nowrap; }
  .s-acts, .s-acts.many { grid-template-columns: repeat(5, var(--act-w)); gap: 5px; bottom: calc(var(--safe-b) + 8px); max-height: calc(100dvh - 70px); }
  .s-act { border-radius: var(--r-2); gap: 2px; } .s-act .e .s-ic { width: 20px; height: 20px; } .s-act small { font-size: 9.5px; line-height: 1.05; } .s-act small.lg { font-size: 9px; } .s-act small.xl { font-size: 8px; }
  .s-grpp { bottom: calc(var(--safe-b) + 8px); } .s-subb { max-height: calc(100dvh - 120px); }
  .s-feed { top: calc(var(--safe-t) + 74px); width: min(340px, calc(100vw - 2 * (var(--safe-l) + 226px))); } .s-compass { top: calc(var(--safe-t) + 5px); width: clamp(150px, calc(100vw - 524px - 2 * max(var(--safe-l), var(--safe-r))), 340px); } .s-msg { font-size: var(--fs-2); padding: 5px 9px; }
  .s-joy { width: 92px; height: 92px; margin: -46px 0 0 -46px; } .s-joy i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .s-sheet { max-height: calc(100dvh - 12px - var(--safe-t) - var(--safe-b)); width: min(600px, calc(100vw - 16px - var(--safe-l) - var(--safe-r))); border-radius: var(--r-3); }
  .s-sheet.s-tall { height: calc(100dvh - 12px - var(--safe-t) - var(--safe-b)); }
  .s-admsheet { height: calc(100dvh - 12px); width: min(720px, calc(100vw - 16px - var(--safe-l) - var(--safe-r))) !important; } .s-mapsheet { height: calc(100dvh - 12px); }
  .s-sheet-h { min-height: 48px; font-size: var(--fs-5); padding-top: 3px; padding-bottom: 3px; } .s-sheet-b { padding: 10px 12px 12px; } .s-tabbtn { min-height: 40px; }
  .s-ann { top: calc(var(--safe-t) + 60px); font-size: var(--fs-4); padding: 10px 14px; } .s-menu { max-height: calc(100dvh - var(--safe-t) - var(--btn) - 24px); }
  .s-helm { bottom: calc(var(--safe-b) + 10px); } .s-maphint { display: none; }
}
@media (max-height: 380px) { :root { --act-w: 58px; --act-h: 46px; --act-n: 6; } .s-acts, .s-acts.many { grid-template-columns: repeat(6, var(--act-w)); } .s-act .e .s-ic { width: 18px; height: 18px; } }

/* ───────── меньше движения ───────── */
@media (prefers-reduced-motion: reduce) {
  .s-lbg, .s-sheet, .s-grpp, .s-menu, .s-msg, .s-glass.on, body.s-cine::before, body.s-cine::after { animation: none; }
  .s-act, .s-subi, .s-btn, .s-chip, .s-pick, .s-switch i, .s-skin, .s-ltip, .s-msg { transition: none; }
}

/* ——— админка 2 (11.11): цветные ники и титулы, палитра, подарки, лестница рангов, журнал ——— */
.s-nickw { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; vertical-align: baseline; }
.s-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-nick[data-nc] { color: var(--nc); font-weight: 700; }
.s-ntitle { flex: none; padding: 1px 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid var(--s-hair); color: var(--s-ink-2); font: 700 var(--fs-1)/1.3 var(--f-ui); letter-spacing: .02em; white-space: nowrap; }
[data-nc="red"] { --nc: #ff6b6b; } [data-nc="orange"] { --nc: #ff9f4a; } [data-nc="amber"] { --nc: #ffc23d; } [data-nc="yellow"] { --nc: #ffe45c; } [data-nc="lime"] { --nc: #b8f04a; } [data-nc="green"] { --nc: #5fe08a; }
[data-nc="teal"] { --nc: #3fd9c4; } [data-nc="sky"] { --nc: #6cc8ff; } [data-nc="blue"] { --nc: #7d9bff; } [data-nc="violet"] { --nc: #b98bff; } [data-nc="pink"] { --nc: #ff8fd0; } [data-nc="white"] { --nc: #ffffff; } [data-nc="gold"] { --nc: #ffd24a; }
.s-nick[data-nc="gold"] { background: linear-gradient(100deg, #ffb42e 0%, #ffd24a 30%, #fff6c8 50%, #ffd24a 70%, #ffb42e 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: s-nick-gold 3.2s linear infinite; }
@keyframes s-nick-gold { to { background-position: -220% 0; } }
.s-sw { min-width: 36px; padding: 0 9px !important; } .s-swdot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--nc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.s-sw[data-nc="gold"] .s-swdot { background: linear-gradient(135deg, #ffb42e, #fff6c8 50%, #ffb42e); } .s-sw.on { box-shadow: 0 0 0 2px var(--nc); border-color: transparent; }
.s-admline { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .s-admline .s-inp { height: 38px; padding: 0 12px; }
.s-admline .s-tinp { flex: 1 1 150px; max-width: 240px; } .s-admline .s-sel { flex: 1 1 160px; max-width: 260px; appearance: auto; color-scheme: dark; } .s-admline .s-ninp { flex: 0 0 76px; text-align: center; }
.s-admnote { flex: 1 1 100%; display: block; color: var(--s-mute); font-size: var(--fs-2); line-height: 1.4; }
.s-admpick { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-2); background: rgba(0,0,0,.25); border: 1px solid var(--s-hair); } .s-admpick > small { color: var(--s-ink-2); font-size: var(--fs-2); }
.s-rankrow { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; align-items: start; padding: 8px 10px; border-radius: var(--r-2); background: rgba(255,255,255,.035); border: 1px solid var(--s-hair); }
.s-rankrow.me { border-color: var(--s-line-2); background: var(--s-gold-wash); } .s-rankn { display: flex; flex-wrap: wrap; gap: 4px; }
.s-rights { display: flex; flex-wrap: wrap; gap: 4px 6px; } .s-rights > span { padding: 2px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,.28); color: var(--s-ink-2); font-size: var(--fs-2); line-height: 1.5; } .s-rights > .none { background: none; color: var(--s-mute); }
.s-logrow { display: grid; grid-template-columns: 88px minmax(0, 190px) minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-1); font-size: var(--fs-3); } .s-logrow:nth-child(odd) { background: rgba(255,255,255,.035); }
.s-logrow > small { color: var(--s-mute); font-size: var(--fs-2); white-space: nowrap; } .s-logwho { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; } .s-logwho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-logwhat { min-width: 0; overflow-wrap: anywhere; color: var(--s-ink-2); } .s-logwhat b { color: var(--s-ink); } .s-logwhat small { display: block; color: var(--s-mute); font-size: var(--fs-2); }
.s-admrow .s-chip:disabled { opacity: .42; }
@media (max-width: 560px) { .s-rankrow { grid-template-columns: 1fr; } .s-logrow { grid-template-columns: 78px 1fr; } .s-logwhat { grid-column: 1 / -1; } }
@media (pointer: coarse) { .s-admline .s-inp { height: 44px; } .s-sw { min-width: 44px; } }
@media (prefers-reduced-motion: reduce) { .s-nick[data-nc="gold"] { animation: none; } }
/* пловец один в открытом море: полоска сил (10.11) */
.s-stam { position: absolute; left: 50%; top: calc(var(--safe-t) + 104px); transform: translateX(-50%); display: grid; gap: 5px; min-width: 168px; padding: 7px 12px 8px; border-radius: var(--r-3); background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--sh-2); color: var(--s-ink); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-align: center; pointer-events: none; z-index: 5; }
.s-stam .b { height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.s-stam .b i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffb347, #7fe3ff); transition: width .4s linear; }
/* карта моря v2 (11.11): кнопки и легенда поверх пергамента */
.s-mapui { position: absolute; right: calc(var(--safe-r) + 16px); bottom: calc(var(--safe-b) + 16px); z-index: 2; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.s-mapui > * { pointer-events: auto; }
.s-mapbtns { display: grid; gap: 6px; }
.s-mapsheet .s-mapbtn { width: 42px; height: 42px; border-radius: 10px; background: rgba(46, 31, 14, 0.92); border: 1px solid rgba(226, 184, 74, 0.5); color: #f6e7c1; box-shadow: 0 2px 8px rgba(40, 22, 4, 0.35); }
.s-mapsheet .s-mapbtn.on { background: #5a3d14; border-color: var(--s-gold); color: var(--s-gold-2); }
.s-maplegend { box-sizing: border-box; width: 236px; max-height: calc(92dvh - 104px); overflow: auto; padding: 12px 14px 12px; border-radius: 5px; background: #f3e7c6; border: 1.5px solid #3a2a18; outline: 1px solid rgba(58, 42, 24, 0.4); outline-offset: -5px; box-shadow: 0 6px 22px rgba(40, 22, 4, 0.4); color: #3a2a18; font: 700 13px/1.2 var(--f-display); scrollbar-width: thin; }
.s-maplegend[hidden] { display: none; }
.s-maplegend-h { display: block; margin: 2px 0 8px; text-align: center; font: 700 12.5px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #6e1a10; }
.s-maplegend-g { display: grid; gap: 1px 10px; }
.s-maplegend-r { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.s-mapsw { width: 34px; height: 28px; flex: none; }
.s-mapfind { box-sizing: border-box; width: 236px; padding: 10px; border-radius: 5px; background: #f3e7c6; border: 1.5px solid #3a2a18; box-shadow: 0 6px 22px rgba(40, 22, 4, 0.4); display: grid; gap: 6px; }
.s-mapfind[hidden] { display: none; }
.s-mapfind-i { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 4px; border: 1px solid #3a2a18; background: #fbf3dc; color: #2a1a05; font: 600 16px/1.2 var(--f-display); outline: none; }
.s-mapfind-i:focus { border-color: #9c2f1e; box-shadow: 0 0 0 2px rgba(156, 47, 30, 0.25); }
.s-mapfind-r { display: grid; gap: 4px; }
.s-mapfind-b { min-height: 38px; padding: 4px 10px; text-align: left; border-radius: 4px; border: 1px solid rgba(58, 42, 24, 0.35); background: rgba(255, 250, 232, 0.7); color: #3a2a18; font: 700 14px/1.2 var(--f-display); cursor: pointer; touch-action: manipulation; }
.s-mapfind-b:hover { background: #fff7dc; border-color: #3a2a18; }
.s-mapfind-n { padding: 6px 4px; color: #6e1a10; font: italic 600 13px/1.2 var(--f-display); }
@media (max-width: 760px) { .s-maphint { display: none; } }
.s-maptp { width: auto !important; max-width: calc(100% - 24px); flex-wrap: nowrap !important; gap: 8px !important; }
@media (max-height: 520px), (max-width: 620px) { .s-mapui { right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); } .s-mapsheet .s-mapbtn { width: 40px; height: 40px; } .s-maplegend { width: min(500px, calc(100vw - 96px - var(--safe-l) - var(--safe-r))); max-height: calc(100dvh - 104px); padding: 10px 12px; } .s-maplegend-g { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); } .s-maplegend-r { min-height: 26px; font-size: 12px; } }
@media (max-height: 520px) { .s-mapbtns { grid-template-columns: 1fr 1fr 1fr; } }
.s-mapsheet:has(.s-maptp) .s-mapui { bottom: calc(var(--safe-b) + 70px); } .s-mapsheet:has(.s-maptp) .s-maplegend { max-height: calc(92dvh - 160px); }
@media (max-height: 520px), (max-width: 620px) { .s-mapsheet:has(.s-maptp) .s-maplegend { max-height: calc(100dvh - 160px); } }

/* ——— админка 3 (11.11): мут, предупреждения, карточка игрока, наказания, окно-уведомление ——— */
.s-nmute { flex: none; display: inline-flex; align-self: center; color: #ff8a8e; line-height: 0; } .s-nmute .s-ic { width: 13px; height: 13px; }
.s-btn.muted { border-color: rgba(229, 72, 77, 0.6); color: #ff8a8e; background: var(--s-red-wash); }
.s-notice { width: min(460px, calc(100vw - 24px)) !important; } .s-ntext { margin: 0; color: var(--s-ink); font-size: var(--fs-4); line-height: 1.45; overflow-wrap: anywhere; } .s-ntext b { color: #fff3cf; }
.s-adminfo:has(.s-cardrow) { display: grid; gap: 6px; white-space: normal; }
.s-cardrow { display: grid; grid-template-columns: 132px 1fr; gap: 4px 10px; align-items: center; } .s-cardrow > small { color: var(--s-mute); font: 700 var(--fs-1)/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.s-cardrow > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--s-ink); overflow-wrap: anywhere; }
.s-cardn { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .s-cardn .s-ic { width: 14px; height: 14px; color: var(--s-gold); }
.s-cardline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 5px 8px; border-radius: var(--r-1); background: rgba(255,255,255,.04); } .s-cardline > small { color: var(--s-mute); white-space: nowrap; } .s-cardline > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; color: var(--s-ink); }
.s-admwarn { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--r-2); background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.4); color: var(--s-ink); font-size: var(--fs-3); line-height: 1.4; } .s-admwarn .s-ic { flex: none; width: 16px; height: 16px; color: var(--s-warn); margin-top: 1px; }
.s-admlbl { display: inline-flex; align-items: center; gap: 5px; color: var(--s-ink-2); font: 700 var(--fs-2)/1 var(--f-ui); } .s-admlbl .s-ic { width: 15px; height: 15px; color: #ff8a8e; }
.s-admline .s-mksel { flex: 0 1 170px; } .s-chip.s-tpl { min-height: 30px !important; padding: 0 10px; font-weight: 500; color: var(--s-ink-2); border-style: dashed; }
.s-admrow.open > .s-admhd > .s-chip { flex: none; margin: 0; }
@media (max-width: 560px) { .s-cardrow { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .s-chip.s-tpl { min-height: 36px !important; } }

/* ───────── HUD v3 (11.11, ui6): латунная оправа и тёмное дерево — как у компаса. Только постоянный HUD:
   карточка корабля, круглые кнопки сверху, кнопки действий, пилюли. Без blur и больших теней (слабые телефоны). ───────── */
:root {
  --s-brass: linear-gradient(180deg, #f6dc9a 0%, #cf9f46 26%, #8c6422 60%, #6f4d16 80%, #b98b3c 100%);
  --s-brass-hi: linear-gradient(180deg, #fff1c4 0%, #f0c45e 30%, #b98428 64%, #8d6219 82%, #e2b458 100%);
  --s-wood: linear-gradient(180deg, rgba(54, 40, 25, 0.95) 0%, rgba(29, 21, 13, 0.95) 56%, rgba(19, 14, 9, 0.95) 100%);
  --s-wood-hot: linear-gradient(180deg, rgba(128, 92, 24, 0.97) 0%, rgba(70, 47, 11, 0.97) 100%);
  --s-grain: repeating-linear-gradient(91deg, rgba(255, 214, 150, 0.035) 0 1px, transparent 1px 6px);
  --s-rim: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(12, 8, 3, 0.8), inset 0 2px 0 0 rgba(255, 236, 190, 0.06);
}
.s-status, .s-top .s-btn, .s-act, .s-mehp, .s-np, .s-fps { border: 1.5px solid transparent; background: var(--s-grain) padding-box, var(--s-wood) padding-box, var(--s-brass) border-box; box-shadow: var(--s-rim); }
/* карточка корабля */
.s-status { padding: 10px 12px 9px; gap: 7px; border-radius: 14px; }
.s-status .s-name { font: 700 16px/1.2 var(--f-display); color: var(--s-gold-2); letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
.s-status .s-role { padding: 2px 8px 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px var(--s-line); color: #e9dcba; }
.s-status .s-hp { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 236, 190, 0.08); }
.s-status .s-meta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; column-gap: 8px; align-items: center; color: #d8ccac; }
.s-status .s-meta > :last-child { justify-self: end; }
.s-status .s-meta + .s-meta { padding-top: 6px; border-top: 1px solid rgba(226, 184, 74, 0.14); }
.s-status .s-meta .num { color: #fff6dc; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.s-status .s-meta small.num { color: #d8ccac; font-weight: 600; }
.s-status .s-ic { color: var(--s-gold-2); opacity: 1; }
.s-mehp, .s-np, .s-fps { border-radius: var(--r-pill); }
.s-mehp.low { background: linear-gradient(180deg, rgba(92, 20, 20, 0.95), rgba(48, 10, 10, 0.95)) padding-box, linear-gradient(180deg, #ff9a9d, #b3261e) border-box; }
.s-mehp i { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); }
/* круглые кнопки справа сверху */
.s-top { gap: 7px; }
.s-top .s-btn { border-radius: 50%; color: #f1e3bd; transition: transform var(--t-1) var(--ease), filter var(--t-1), color var(--t-1); }
.s-top .s-btn .s-ic { width: 20px; height: 20px; stroke-width: 1.9; }
.s-top .s-btn:active { transform: scale(.93); filter: brightness(.88); background: var(--s-grain) padding-box, var(--s-wood) padding-box, var(--s-brass) border-box; }
.s-top .s-btn.on { color: var(--s-gold-2); background: var(--s-wood-hot) padding-box, var(--s-brass-hi) border-box; }
.s-top .s-btn.live { color: #fff; background: linear-gradient(180deg, #a52a2e, #6e171a) padding-box, linear-gradient(180deg, #ffb3b5, #b3261e) border-box; box-shadow: var(--s-rim), 0 0 0 calc(var(--lvl, 0) * 6px) rgba(229, 72, 77, 0.35); }
.s-top .s-btn.muted { color: #ff8a8e; background: linear-gradient(180deg, rgba(74, 22, 22, 0.95), rgba(38, 12, 12, 0.95)) padding-box, linear-gradient(180deg, #e58a8c, #7d2023) border-box; }
.s-top .s-btn:disabled, .s-act:disabled { opacity: .45; filter: grayscale(.7); cursor: default; }
/* кнопки действий справа снизу */
.s-act { border-radius: 13px; transition: transform var(--t-1) var(--ease), filter var(--t-1); }
.s-act .e { color: #f3e2b0; } .s-act small { color: #e4d7b6; }
.s-act:active { transform: scale(.94); filter: brightness(.88); }
.s-act.hot { background: var(--s-grain) padding-box, var(--s-wood-hot) padding-box, var(--s-brass-hi) border-box; } .s-act.hot .e { color: #ffe9a8; } .s-act.hot small { color: #fff3cf; }
.s-act.grp.on { background: var(--s-wood-hot) padding-box, var(--s-brass-hi) border-box; }
.s-act.grp::after { top: 6px; right: 6px; border-color: var(--s-gold-2); }
.s-act .s-key { top: 3px; left: 3px; border-color: rgba(246, 220, 154, 0.45); background: rgba(10, 7, 3, 0.85); color: #f6e7c0; }
@media (hover: hover) and (pointer: fine) {
  .s-top .s-btn:hover { color: var(--s-gold-2); filter: brightness(1.14); border-color: transparent; }
  .s-act:hover { filter: brightness(1.14); border-color: transparent; }
  .s-top .s-btn:hover:active, .s-act:hover:active { filter: brightness(.88); }
}
@media (max-height: 520px) { .s-status { padding: 6px 9px; gap: 4px; border-radius: 11px; } .s-status .s-name { font-size: var(--fs-4); } .s-status .s-meta + .s-meta { padding-top: 4px; } .s-status .s-meta { column-gap: 6px; } .s-act { border-radius: 10px; } }
@media (max-width: 640px) and (min-height: 521px) { .s-status { padding: 8px 10px 7px; gap: 6px; } .s-status .s-meta { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 4px; } .s-status .s-meta + .s-meta { padding-top: 5px; } .s-status .s-role { padding: 1px 6px; } .s-compass { top: calc(var(--safe-t) + 206px); } .s-feed { top: calc(var(--safe-t) + 276px); } }
@media (prefers-reduced-motion: reduce) { .s-top .s-btn, .s-act { transition: none; } }