/* Noos Games shell. Dark arcade look; the field itself is drawn on the canvas. */
:root { --gm-bg: #0b1020; --gm-panel: #141b33; --gm-line: #26304f; --gm-text: #e8ecf8; --gm-dim: #93a0c4; --gm-acc: #f59e0b; --gm-ok: #34d399; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--gm-bg); }

.gm { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 920px; margin: 0 auto; padding: 0 6px env(safe-area-inset-bottom, 0); color: var(--gm-text); font-family: 'Quicksand', system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; overflow: hidden; }
.gm * { box-sizing: border-box; }

.gm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; min-height: 40px; }
.gm-title { font-weight: 800; letter-spacing: .12em; font-size: 13px; color: var(--gm-acc); text-align: center; flex: 1; }
.gm-bar-r { display: flex; gap: 6px; }
.gm-btn { background: var(--gm-panel); color: var(--gm-text); border: 1px solid var(--gm-line); border-radius: 10px; padding: 8px 12px; min-height: 36px; min-width: 36px; font: 700 12px/1 'Quicksand', system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; }
.gm-btn:active { background: var(--gm-line); }

.gm-hud { display: flex; gap: 6px; padding: 2px 0 6px; min-height: 36px; align-items: stretch; }
.gm-chip { flex: 1 1 0; min-width: 0; background: var(--gm-panel); border: 1px solid var(--gm-line); border-radius: 10px; padding: 4px 8px; display: flex; flex-direction: column; justify-content: center; }
.gm-chip span { font-size: 9px; letter-spacing: .12em; color: var(--gm-dim); font-weight: 700; }
.gm-chip b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-chip.ev { border-color: var(--c, var(--gm-acc)); }
.gm-chip.ev b { color: var(--c, var(--gm-acc)); }
.gm-dots { display: flex; gap: 4px; align-items: center; height: 22px; }
.gm-dots em { min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; border: 2px solid var(--gm-line); display: inline-flex; align-items: center; justify-content: center; font: 800 9px/1 'Quicksand', system-ui, sans-serif; font-style: normal; color: #04120c; }
.gm-dots em.cur { border-color: var(--gm-acc); }
.gm-dots em.ok { background: var(--gm-ok); border-color: var(--gm-ok); }
.gm-dots em.x { background: #ef4444; border-color: #ef4444; color: #fff; }
.gm-chip.ev { flex: 2 1 0; }
.gm-chip b i { font-style: normal; font-size: 11px; color: var(--gm-dim); }
.gm-chip.tail b { color: var(--gm-ok); } .gm-chip.head b { color: #fb923c; }
.gm-chip.att { flex: 1.4 1 0; }

.gm-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
.gm-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; }
.gm-stage canvas { display: block; width: 100%; height: 100%; }

.gm-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.6); pointer-events: none; z-index: 6; }
.gm-toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 90%; background: rgba(11,16,32,.92); border: 1px solid var(--gm-line); color: var(--gm-text); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; z-index: 9; pointer-events: none; text-align: center; }

/* overlays */
.gm-ov { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(6,9,20,.9); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gm-ov.opaque { background: var(--gm-bg); z-index: 8; }
.gm-card { width: 100%; max-width: 460px; margin: auto; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gm-card.scroll { max-height: 100%; overflow-y: auto; padding: 4px 2px; }
.gm-kicker { font-size: 11px; letter-spacing: .22em; color: var(--gm-acc); font-weight: 800; }
.gm-h1 { margin: 0; font-size: clamp(26px, 8vw, 40px); font-weight: 800; letter-spacing: .06em; line-height: 1.05; }
.gm-h2 { margin: 0; font-size: clamp(22px, 6.5vw, 32px); font-weight: 800; letter-spacing: .05em; line-height: 1.1; }
.gm-desc { margin: 0; font-size: 14px; line-height: 1.35; color: var(--gm-dim); }
.gm-how { margin: 0; padding-left: 18px; text-align: left; font-size: 13px; line-height: 1.35; color: var(--gm-text); }
.gm-cond { margin: 0; font-size: 12px; color: var(--gm-dim); }
.gm-best { margin: 0; font-size: 13px; font-weight: 700; color: var(--gm-text); }
.gm-note { margin: 0; font-size: 12px; color: var(--gm-acc); }

.gm-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gm-mode { background: var(--gm-panel); color: var(--gm-text); border: 2px solid var(--gm-line); border-radius: 12px; padding: 10px 6px; min-height: 48px; font: 800 13px/1.1 'Quicksand', system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.gm-mode small { font-size: 10px; letter-spacing: .1em; color: var(--gm-dim); font-weight: 700; }
.gm-mode.on { border-color: var(--gm-acc); background: #2a2210; }
.gm-mode.off { opacity: .45; }

.gm-picks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gm-evchip, .gm-lvl { background: var(--gm-panel); color: var(--gm-text); border: 2px solid var(--gm-line); border-radius: 999px; padding: 7px 12px; min-height: 36px; font: 700 12px/1 'Quicksand', system-ui, sans-serif; cursor: pointer; }
.gm-evchip.on, .gm-lvl.on { border-color: var(--gm-acc); color: var(--gm-acc); }
.gm-evchip.off { opacity: .45; }

.gm-go { background: var(--gm-acc); color: #1a1204; border: 0; border-radius: 14px; padding: 14px 18px; min-height: 52px; font: 800 17px/1 'Quicksand', system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; margin-top: 4px; }
.gm-go:active { filter: brightness(.9); }
.gm-ghost { background: transparent; color: var(--gm-text); border: 2px solid var(--gm-line); border-radius: 14px; padding: 11px 16px; min-height: 44px; font: 800 13px/1 'Quicksand', system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; }

.gm-reshead { font-size: clamp(22px, 7vw, 32px); font-weight: 800; }
.gm-ressub { font-size: 14px; color: var(--gm-dim); font-weight: 700; }
.gm-table { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.gm-row { display: grid; grid-template-columns: 26px 12px 1fr auto 52px; gap: 8px; align-items: center; background: var(--gm-panel); border-radius: 8px; padding: 5px 8px; font-size: 13px; font-weight: 700; }
.gm-row.me { outline: 2px solid var(--gm-acc); background: #2a2210; }
.gm-row .n { text-align: center; color: var(--gm-dim); }
.gm-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-row .v { color: var(--gm-dim); font-size: 12px; }
.gm-row .p { text-align: right; font-variant-numeric: tabular-nums; }
.gm-total { font-size: 14px; font-weight: 700; }

.gm-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--gm-panel); border: 1px solid var(--gm-line); border-radius: 12px; padding: 8px 12px; min-height: 46px; font-size: 14px; font-weight: 700; text-align: left; }
.gm-opt.col { flex-direction: column; align-items: stretch; }
.gm-opt input[type=range] { width: 100%; }
.gm-tog { background: var(--gm-bg); color: var(--gm-acc); border: 1px solid var(--gm-line); border-radius: 999px; padding: 7px 14px; min-height: 34px; min-width: 64px; font: 800 12px/1 'Quicksand', system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; }
.gm-trophies { max-height: 40vh; overflow-y: auto; border: 1px solid var(--gm-line); border-radius: 12px; padding: 6px; text-align: left; }

.gm-cal-dot { width: 90px; height: 90px; border-radius: 50%; margin: 6px auto; background: var(--gm-panel); border: 3px solid var(--gm-line); }
.gm-cal-dot.flash { background: var(--gm-acc); border-color: #fff; }
.gm-cal-count { font-size: 18px; font-weight: 800; }

/* the action pad */
.gm-pad { flex: 0 0 auto; height: var(--padh, 110px); margin: 6px 0 8px; border-radius: 18px; background: linear-gradient(180deg, #1d2750, #121936); border: 2px solid var(--gm-acc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; transition: transform .05s, background .1s; }
.gm-pad.held { transform: scale(.985); background: linear-gradient(180deg, #4b3a0c, #2c2208); }
.gm-pad:focus-visible { box-shadow: 0 0 0 3px #fff; }
.gm-pad-main { font-size: 28px; font-weight: 800; letter-spacing: .14em; color: var(--gm-acc); }
.gm-pad-sub { font-size: 12px; color: var(--gm-dim); font-weight: 700; letter-spacing: .08em; }
.gm[data-noinput] .gm-pad { opacity: .5; pointer-events: none; }

/* landscape phones: field left, pad right */
.gm.land { display: grid; grid-template-columns: minmax(0, 1fr) var(--side, 200px); grid-template-rows: auto 1fr; grid-template-areas: "bar bar" "wrap pad"; column-gap: 8px; }
.gm.land .gm-bar { grid-area: bar; min-height: 34px; padding: 2px; }
.gm.land .gm-hud { position: absolute; left: 8px; top: 40px; z-index: 4; pointer-events: none; padding: 0; min-height: 0; }
.gm.land .gm-hud .gm-chip { flex: 0 0 auto; background: rgba(11,16,32,.7); padding: 2px 8px; }
.gm.land .gm-wrap { grid-area: wrap; }
.gm.land .gm-pad { grid-area: pad; height: auto; margin: 0 0 6px; }
.gm.land .gm-card { gap: 5px; }
.gm.land .gm-h1 { font-size: 24px; }
.gm.land .gm-go { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.gm.tight .gm-mode { font-size: 12px; padding: 8px 4px; }
.gm.tight .gm-chip b { font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .gm-pad { transition: none; } }

.gm.land .gm-kicker { display: none; }
.gm.land .gm-modes { grid-template-columns: repeat(4, 1fr); }
.gm.land .gm-mode { min-height: 40px; padding: 6px 2px; font-size: 11px; }
.gm.land .gm-desc { font-size: 12px; }
.gm.land .gm-ov { padding: 4px; }
.gm.land .gm-pad-main { font-size: 22px; }
.gm.tight .gm-hud { gap: 4px; }
.gm.tight .gm-chip { padding: 3px 5px; }
.gm.tight .gm-chip span { font-size: 8px; letter-spacing: .08em; }
.gm.tight .gm-chip b { font-size: 12px; }
.gm.tight .gm-dots { gap: 2px; }
.gm.tight .gm-dots em { min-width: 15px; height: 15px; border-width: 2px; font-size: 8px; }
.gm.tight .gm-chip.ev b i { display: none; }
.gm-card > * { flex-shrink: 0; }
.gm-ov .gm-go { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 10px -2px rgba(6,9,20,.95); }
.gm-row { padding: 3px 8px; font-size: 12px; }
.gm-pad.off { opacity: .4; }
.gm-reshead { line-height: 1.1; }
.gm-card.res { gap: 5px; }