/* game — Cosmic Symphony in one cube (PLAN_V8 §А); the cube and its faces draw on .gm__cv (js/game-cube.js, js/game-face-*.js) */
.gm{position:absolute;inset:0;overflow:hidden;overflow:clip;touch-action:none;cursor:pointer} /* clip: the wide nebula must not let focus/scrollIntoView shift the field */

/* nebula: the image spans 6%–79% of the height as on the mockup */
.gm__bg{position:absolute;inset:0;pointer-events:none;opacity:.55;animation:gm-drift 80s ease-in-out infinite alternate;animation-play-state:paused}
.tab.is-active .gm__bg{animation-play-state:running}
@keyframes gm-drift{to{transform:translate3d(-2.5%,1.2%,0) scale(1.06)}}
.gm__sp{position:absolute;inset:0}
.gm__neb{position:absolute;left:50%;top:calc(var(--app-h) * .06);width:max(100%,calc(var(--app-h) * .5625));max-width:none;height:auto;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 84%,transparent)}
.gm__cv{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.gm__cubebox{position:absolute;pointer-events:none;z-index:0}

/* PLAN_V8 §А — one column between the header and the dock: top row · voice panel · the cube · hint · Запись / Сброс */
.gm__col{position:absolute;left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));top:calc(max(20px,calc(var(--safe-t) + 8px)) + 60px);bottom:var(--dock-space);
  display:flex;flex-direction:column;gap:8px;z-index:2;pointer-events:none}
.gm__col>*{pointer-events:auto;flex:none}

/* top: size 2 · 4 · 8 · «Записать трек» · «Мои треки» · «?»; every target ≥ 44 px */
.gm__top{display:flex;align-items:center;gap:6px;min-width:0}
.gm__top .chip{height:44px;padding:0 10px;gap:6px;font-size:8.5px;letter-spacing:.08em;background:rgba(0,0,0,.5);min-width:44px;white-space:nowrap}
.gm__top .chip:disabled{opacity:.4}
.gm__trec,.gm__lib{flex:0 1 auto;min-width:0;overflow:hidden}
.gm__trec span,.gm__lib span{text-overflow:ellipsis;overflow:hidden}
.gm__lib svg{display:none;flex:none;width:17px;height:17px}
.gm__lib b{display:none;font-weight:400}
/* narrow phones: «Мои треки» becomes an icon with the count (the full name stays its label) */
@media (max-width:380px){.gm__lib{padding:0 10px}.gm__lib svg{display:block}.gm__lib span{display:none}.gm__lib b:not(:empty){display:inline}}
.gm__trec span{font-variant-numeric:tabular-nums;min-width:0}
.gm__help{width:44px;padding:0;justify-content:center;font-size:13px;margin-left:auto;flex:none}
.gm__sizes{display:flex;flex:none;border-radius:var(--r-pill);border:1px solid var(--glass-border-strong);background:rgba(0,0,0,.5);overflow:hidden}
.gm__sz{width:38px;height:44px;font:400 12px/1 var(--f-mono);color:var(--text-3);transition:color 300ms var(--ease),background 300ms var(--ease)}
.gm__sz.is-on{color:var(--amber);background:rgba(247,176,100,.14);text-shadow:0 0 8px rgba(247,176,100,.5)}
.gm__trec i{flex:none;width:7px;height:7px;border-radius:50%;border:1px solid #ff6b6b}
.gm__trec.is-live{color:var(--text);border-color:rgba(229,72,77,.75);box-shadow:0 0 12px rgba(229,72,77,.35)}
.gm__trec.is-live i{background:#ff4d4f;border-color:#ff4d4f;box-shadow:0 0 6px #ff4d4f;animation:gm-rec 1s ease-in-out infinite}
@keyframes gm-rec{50%{opacity:.45}}

/* the voice panel host (js/game-voice-panel.js + css/game-voice.css) */
.gm__voice{position:relative;min-width:0}

/* the cube's stage: the canvas draws the cube here; ‹ › on its sides */
.gm__stage{position:relative;flex:1 1 auto;min-height:110px;pointer-events:none}
.gm__stage>*{pointer-events:auto}
.gm__arr{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
  background:rgba(14,15,18,.55);border:1px solid var(--glass-border-strong);transition:color 300ms var(--ease),transform 150ms var(--ease);z-index:1}
.gm__arr svg{width:18px;height:18px}
.gm__arr--l{left:0}
.gm__arr--r{right:0}
.gm__arr:active{transform:scale(.92);color:var(--amber)}

/* paused / a stored symphony waiting: one round «▶» in the middle of the cube (the dimmed cube says «paused»; the words stay
   for screen readers); touching the cube anywhere also starts it */
.gm__ov{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.gm__ov[hidden]{display:none}
.gm__msg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gm__play{display:grid;place-items:center;width:56px;height:56px;min-width:0;padding:0;border-radius:50%;font-size:0;letter-spacing:0;pointer-events:auto;background:rgba(10,11,14,.72);
  border:1px solid var(--glass-border-strong);box-shadow:0 0 24px rgba(150,205,255,.18)}
.gm__play::before{content:"";display:block;margin-left:4px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--text)}
.gm.is-paused .gm__cv{opacity:.6}

/* «Стёрто · Вернуть» for 5 s after «Сброс» (and after the voice's ✕) */
.gm__undo{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:44px;padding:0 4px 0 16px;border-radius:var(--r-pill);
  font:400 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;z-index:3;animation:gm-in 300ms var(--ease-out)}
.gm__undo[hidden]{display:none}
.gm__undo button{height:36px;padding:0 14px;border-radius:var(--r-pill);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);
  font:400 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
@keyframes gm-in{from{opacity:0;transform:translate(-50%,6px)}}

/* the hint line above the pills */
.gm__hint{height:16px;margin:0;padding:0 8px;text-align:center;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity 300ms var(--ease)}

/* the two big pills: «● Запись» (the front face's take) and «Сброс» */
.gm__acts{display:flex;gap:10px}
.gm__pb{position:relative;flex:1 1 0;min-width:0;height:56px;padding:0 12px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  font:400 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text);white-space:nowrap;
  background:rgba(10,11,14,.9);border:1px solid var(--glass-border-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 24px rgba(0,0,0,.45);
  transition:color 300ms var(--ease),border-color 300ms var(--ease),background 300ms var(--ease),opacity 300ms var(--ease),transform 150ms var(--ease)}
.gm__pb:active{transform:scale(.97)}
.gm__pb span{position:relative;overflow:hidden;text-overflow:ellipsis}
.gm__rec::before{content:"";position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 10px rgba(255,77,79,.7);z-index:1}
.gm__rec::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--u,0) * 100%);background:linear-gradient(90deg,rgba(229,72,77,.1),rgba(229,72,77,.32));pointer-events:none}
.gm__rec b{position:relative;font:300 28px/1 var(--f-mono);color:var(--amber);letter-spacing:0}
.gm__rec b:empty{display:none}
.gm__rec span:empty{display:none}
/* dimmed: the content fades, the glass stays opaque (the moon is under the pills) */
.gm__rec[aria-disabled=true]{color:rgba(255,255,255,.34);border-color:var(--glass-border);cursor:default}
.gm__rec[aria-disabled=true]::before{opacity:.35;box-shadow:none}
.gm__rec[aria-disabled=true]:active{transform:none}
.gm__rec[aria-pressed=true]{border-color:rgba(255,77,79,.85);box-shadow:0 0 16px rgba(229,72,77,.35)}
.gm__rec.is-count::before{display:none}
.gm__rec.is-live::before{border-radius:2px;width:11px;height:11px;animation:gm-rec 1s ease-in-out infinite}
.gm__clr{color:var(--text-2)}
.gm__clr:disabled{color:rgba(255,255,255,.28);border-color:var(--glass-border);cursor:default}
.gm__clr:disabled:active{transform:none}
.gm__clr.is-armed{color:#ffb4ac;border-color:rgba(229,72,77,.6);background:rgba(229,72,77,.1)}

/* the minimal voice panel used only when js/game-voice-panel.js is not there */
.gm-vp0{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gm-vp0__fx{height:44px;padding:0 14px;font-size:8.5px;letter-spacing:.14em;background:rgba(0,0,0,.5)}
.gm-vp0__fx[aria-pressed=true]{color:var(--lavender);border-color:color-mix(in srgb,var(--lavender) 60%,transparent)}
.gm-vp0__fl{position:absolute;left:130px;top:14px;color:var(--lavender);pointer-events:none}
.gm-vp0__bar{align-self:stretch;display:flex;align-items:center;gap:10px;height:56px;padding:0 6px;border-radius:28px;background:rgba(14,15,18,.72);border:1px solid var(--glass-border-strong)}
.gm-vp0__rec{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(229,72,77,.6);background:radial-gradient(circle,rgba(229,72,77,.3),rgba(14,15,18,.8) 70%)}
.gm-vp0__rec::before{content:"";width:14px;height:14px;border-radius:50%;background:#ff4d4f;grid-area:1/1}
.gm-vp0__rec b{grid-area:1/1;font:300 18px/1 var(--f-mono);color:var(--amber);z-index:1}
.gm-vp0__rec[data-state=rec]::before{border-radius:2px}
.gm-vp0__rec:disabled{opacity:.4}
.gm-vp0__lvl{position:relative;flex:1;height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.gm-vp0__lvl i{position:absolute;inset:0;background:var(--lavender);transform-origin:0 50%;transform:scaleX(0)}
.gm-vp0__st{flex:none;max-width:40%;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-vp0__x{flex:none;width:44px;height:44px;color:var(--text-3)}
.gm-vp0__x[hidden]{display:none}
.gm-vp0__top{display:flex;gap:8px}
.gm-vp0__off{width:44px;height:44px;padding:0;justify-content:center;font-size:16px;background:rgba(0,0,0,.5)}
.gm-vp0__vol{flex:none;width:72px;margin:0;accent-color:var(--amber)}
.gm-vp0__vn{flex:none;color:var(--text-3)}

/* the guide (js/game-guide.js): until the orb has drawn an element it is not there */
.gm.is-guide [data-gd]:not(.is-drawn){opacity:0;visibility:hidden;transition:none}
.gm.is-guide .gm__top{opacity:.25}
.gm.is-guide .gm__top .is-drawn{opacity:1}
.gm.is-guide .gm__hint,.gm.is-tip .gm__hint{opacity:0}
.gm-gd{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.gm-gd[hidden],.gm-gd__txt[hidden],.gm-gd__skip[hidden]{display:none}
.gm-gd__txt{position:absolute;z-index:6;max-width:250px;margin:0;font:300 13px/1.45 var(--f-sans);letter-spacing:.04em;color:#fff3e0;text-align:center;pointer-events:none;
  text-shadow:0 0 10px rgba(247,176,100,.9),0 0 22px rgba(247,176,100,.5),0 0 2px rgba(0,0,0,.9)}
.gm-gd__skip{position:absolute;z-index:6;right:calc(12px + var(--safe-r));top:calc(max(20px,calc(var(--safe-t) + 8px)) + 60px);width:auto;min-width:0;height:44px;padding:0 18px;font-size:9px;letter-spacing:.2em;background:rgba(0,0,0,.7)}

/* «Мои треки» sheet (js/game-track.js) */
.gm-tracks__body{display:flex;flex-direction:column;gap:14px;max-height:calc(var(--app-h) * .7);padding:30px calc(var(--gutter) - 4px) 22px}
.gm-tracks__title{margin:0 44px 0 0;font:300 16px/1.2 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.gm-tracks__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.gm-trk{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.gm-trk__meta{flex:1;min-width:0}
.gm-trk__title{font:400 10px/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-trk__sub{margin-top:4px;font:300 9px/1.2 var(--f-mono);letter-spacing:.12em;color:var(--text-3)}
.gm-trk__btn{--s:36px}
.gm-trk__del{flex:none;min-width:36px;height:36px;display:grid;place-items:center;padding:0 8px;border-radius:var(--r-pill);border:1px solid transparent;color:var(--text-3);
  font:400 8.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.gm-trk__del svg{width:15px;height:15px}
.gm-trk__del.is-armed{color:#ffb4ac;border-color:rgba(229,72,77,.6);background:rgba(229,72,77,.08)}
.gm-tracks__empty,.gm-tracks__note{margin:0;font:300 12.5px/1.6 var(--f-sans);color:var(--text-2)}
.gm-tracks__note{font:400 8.5px/1.6 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* «Калибровка» (js/game-cal.js, opened from «Настройки → Устройство»): a round pad to tap along with the clicks */
.gm-cal__pad{width:112px;height:112px;margin:4px 0;border-radius:50%;border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);
  background:radial-gradient(circle,rgba(247,176,100,.16),rgba(14,15,18,.6) 70%);box-shadow:inset 0 0 18px rgba(247,176,100,.12);touch-action:manipulation}
.gm-cal__pad.is-hit{animation:gm-cal-hit 220ms var(--ease-out)}
@keyframes gm-cal-hit{from{transform:scale(.93);box-shadow:0 0 24px rgba(247,176,100,.45),inset 0 0 18px rgba(247,176,100,.3)}}
.gm-cal__res{min-height:1.4em;font-variant-numeric:tabular-nums}
.set__cal{display:flex;flex-direction:column;gap:10px;align-self:stretch}
.set__cal-title{font:400 9px/1.2 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}

/* confirm dialogs (rendered into the shared modal) */
.gm-confirm{padding:28px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.gm-confirm p{margin:0}
.gm-confirm__row{display:flex;gap:10px;width:100%;margin-top:6px}
.gm-confirm__row .pill{flex:1;width:auto;min-width:0;padding:0 10px;font-size:10px;letter-spacing:.18em;height:46px}

/* header telemetry (rendered into #hdr-tele while this tab is active) */
.gm-tele{white-space:nowrap;letter-spacing:.12em}
.gm-tele__a{color:var(--text-2)}

@media (prefers-reduced-motion: reduce){
  .gm__bg{animation:none}
  .gm__trec.is-live i,.gm__rec.is-live::before,.gm-cal__pad.is-hit,.gm__undo{animation:none}
  .gm__pb,.gm__arr{transition:color 300ms var(--ease),border-color 300ms var(--ease),background 300ms var(--ease),opacity 300ms var(--ease)}
}
/* 375 px: «Записать мелодию» must fit its half of the row */
@media (max-width:380px){.gm__pb{letter-spacing:.1em;gap:8px;padding:0 10px}}