:root {
    --bg: #23262e;
    --panel: #2e323c;
    --accent: #58b7ff;
    --card: #f7f6f1;
    --sel: #58b7ff;
    --err: #e0564f;
    --ok: #5fd27a;
    --c0: #e0564f;
    --c1: #3f9e52;
    --c2: #9b6dd9;
}

html, body {
    margin: 0; padding: 0; overflow: hidden;
    background: radial-gradient(1100px 700px at 50% -10%, #3a4052, var(--bg));
    color: #e8ebf2;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    height: 100%;
}
body { display: flex; align-items: center; justify-content: center; }

.st-wrap {
    width: min(560px, 100vw); max-height: 100vh;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; box-sizing: border-box;
}
.st-topbar { text-align: center; }
.st-title { margin: 0; font-size: clamp(20px, 4.5vw, 30px); color: var(--accent); letter-spacing: .02em; }
.st-tagline { margin: 2px 0 0; font-size: clamp(11px, 2.6vw, 13px); opacity: .72; }

.st-hud { display: flex; justify-content: center; gap: 26px; }
.st-stat { text-align: center; }
.st-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.st-stat-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.st-stage { position: relative; }
.st-board {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; padding: 12px;
    background: #20242c; border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 2px #0d1117;
}
.st-card {
    aspect-ratio: 3 / 4; border-radius: 8px; background: var(--card);
    border: 2px solid #cfcfc6; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    padding: 4px;
    transition: transform .08s, box-shadow .08s;
}
.st-card:hover { transform: translateY(-2px); }
.st-card--sel { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(88,183,255,.4); }
.st-card--hint { border-color: var(--ok); }
.st-card--err { border-color: var(--err); }
.st-shape { width: 22%; height: 66%; }

.st-message {
    position: absolute; left: 0; right: 0; bottom: -2px;
    text-align: center; font-size: 12px; opacity: .85; margin: 0;
    background: var(--panel); border-radius: 8px; padding: 3px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.st-controls { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.st-btn {
    background: var(--accent); color: #0c2030; border: 0; border-radius: 8px;
    padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.st-btn:hover { filter: brightness(1.08); }
.st-btn:active { transform: translateY(1px); }
.st-btn-ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.st-btn-ghost:hover { background: rgba(88,183,255,.14); }