.setup { margin-bottom: 14px; }
.hm-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .hm-layout { grid-template-columns: 1fr; } }
.hud { display: flex; justify-content: space-around; text-align: center; margin-bottom: 10px; }
.hud .k { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); font-weight: 600; }
.hud .v { font-family: Chango, Georgia, serif; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.stage { text-align: center; }
#art { width: min(100%, 230px); height: auto; }
#art .frame { stroke: var(--ink); }
#art .body * { stroke: var(--brand-deep); display: none; }
#art .body *.show { display: inline; }
#art.dead .body * { stroke: #b3261e; }
.wordline { font-family: Chango, Georgia, serif; font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: .18em; margin: 10px 0 14px; min-height: 1.3em; word-break: break-all; }
.wordline .miss { color: #b3261e; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-width: 520px; margin: 0 auto; }
.key { font: inherit; font-weight: 600; font-size: 1.05rem; padding: 9px 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.key:hover:not(:disabled) { border-color: var(--brand); background: rgba(25,193,85,.14); }
.key:disabled { cursor: default; opacity: .5; }
.key.good { background: var(--brand); color: #fff; border-color: var(--brand-deep); opacity: 1; }
.key.bad { background: #fde0dd; color: #b3261e; opacity: 1; }
.tools { justify-content: center; margin-top: 14px; }
.tools .btn { flex: 0 1 auto; }
.status-line { text-align: center; font-weight: 600; font-size: 1.1rem; margin: 14px 0 4px; min-height: 1.5em; }