body.hg #stage{justify-content:flex-start;gap:0;padding:10px 12px calc(56px + env(safe-area-inset-bottom))}
/* Полосы реакций нет в тренировке: место под неё не держим. */
body.hg:not(:has(.react-bar:not(.pop):not([hidden]))) #stage{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.hg-board{flex:1;min-height:0;width:100%;max-width:460px;display:flex;flex-direction:column;gap:8px}
.hg-meta{order:-2;flex:none;display:flex;justify-content:space-between;gap:8px;padding:0 2px;color:var(--color-muted);font-size:12px;font-weight:600;line-height:16px}
.hg-meta b{font-weight:700;font-variant-numeric:tabular-nums}

.hg-field{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface)}
.hg-scene{position:relative;flex:1;min-height:72px;width:100%}
.hg-gallows{position:absolute;inset:0;width:100%;height:100%;max-height:300px;margin:auto;overflow:visible}
.hg-gallows *{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hg-ground{stroke:var(--color-line)}
.hg-frame{stroke:var(--color-soft)}
.hg-man{stroke:var(--color-ink)}
.hg-dead .hg-man{stroke:var(--color-danger)}
.hg-part{opacity:0;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out}
.hg-part.on{opacity:1;stroke-dashoffset:0}
.hg-still .hg-part{transition:none}

.hg-word{flex:none;display:flex;justify-content:center;gap:4px;width:100%;min-height:36px}
.hg-cell{flex:1 1 0;min-width:0;max-width:30px;height:36px;display:grid;place-items:center;border-bottom:3px solid var(--color-ink);font-size:min(22px,5.6vw);font-weight:800;line-height:1;text-transform:uppercase}
.hg-cell.open{border-color:var(--color-line)}
.hg-cell.dim{color:var(--color-faint)}
.hg-cell.missed{border-color:var(--color-danger);color:var(--color-danger-ink)}
.hg-cell.new{animation:hg-pop .3s ease-out}
@keyframes hg-pop{from{opacity:0;transform:translateY(6px) scale(.6)}}
.hg-hint{flex:none;max-width:100%;min-height:16px;overflow:hidden;color:var(--color-muted);font-size:12px;line-height:16px;text-align:center;white-space:nowrap;text-overflow:ellipsis}

.hg-status{flex:none;min-height:20px;overflow:hidden;font-size:14px;font-weight:700;line-height:20px;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.hg-status.mine{color:var(--color-signal-ink)}
.hg-board .tmr{flex:none;height:12px}
.hg-board .tmr b{font-size:11px}

.hg-keys{flex:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.hg-key{height:40px;padding:0;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:18px;font-weight:700;line-height:1;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:background .15s,color .15s,transform .1s}
.hg-key:active:not(:disabled){transform:scale(.92)}
.hg-key:disabled{cursor:default}
.hg-keys.idle .hg-key{color:var(--color-soft)}
.hg-key.ok,.hg-keys.idle .hg-key.ok{border-color:transparent;background:var(--color-signal-soft);color:var(--color-signal-ink)}
.hg-key.no,.hg-keys.idle .hg-key.no{border-color:transparent;background:var(--color-line-soft);color:var(--color-faint);text-decoration:line-through}

.hg-panel{flex:none;min-height:175px;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface)}
.hg-panel h3{font-size:16px}
.hg-panel .btn{margin-top:auto}
.hg-log{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;overflow:hidden}
.hg-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 7px;border-radius:6px;background:var(--color-line-soft);color:var(--color-faint);font-size:14px;font-weight:700;line-height:1;text-transform:uppercase}
.hg-chip i{width:7px;height:7px;border-radius:50%}
.hg-chip.ok{background:var(--color-signal-soft);color:var(--color-signal-ink)}
.hg-sum{color:var(--color-muted);font-size:12px;line-height:16px}
.hg-gains{display:flex;flex-direction:column;gap:4px}
.hg-gain{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:600;line-height:20px}
.hg-gain i{flex:none;width:10px;height:10px;border-radius:50%}
.hg-gain span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hg-gain em{flex:none;color:var(--color-soft);font-size:12px;font-style:normal;font-weight:500}
.hg-gain b{flex:none;margin-left:auto;color:var(--color-signal-ink);font-variant-numeric:tabular-nums}

.hg-pick{order:-1;flex:none;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface)}
.hg-in{height:48px;font-size:20px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase}
.hg-in::placeholder{font-size:16px;font-weight:500;letter-spacing:0;text-transform:none}
.hg-pick .row .btn{flex:1 1 0;min-width:0;padding-inline:8px}
.hg-pick .btn:not(.primary){color:var(--color-ink)}

@media(max-height:600px){.hg-key{height:36px}.hg-panel{min-height:159px}}
@media(min-height:800px){.hg-key{height:46px;font-size:20px}.hg-panel{min-height:199px}}
@media(prefers-reduced-motion:reduce){.hg-part,.hg-key{transition:none}.hg-cell.new{animation:none}}