/* =========================================================
   GGReflex — arcade pixel theme (shared)
   Design rule: clean multilingual font for TEXT,
                pixel font for NUMBERS + logo only,
                "dot" identity comes from ART, not the font.
   ========================================================= */

/* Korean+Latin pixel webfont (Galmuri, NDS-style, OFL) — makes ALL UI text dot, incl. 한글 */
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root{
  /* Arcade night palette (tasteful neon, high contrast) */
  --bg:        #0e0b1a;   /* deep night */
  --bg-panel:  #1b1733;   /* panel surface */
  --bg-elev:   #2a2550;   /* borders / elevated */
  --ink:       #f2f0fb;   /* primary text */
  --ink-dim:   #9a96bf;   /* muted text */
  --go:        #3df27e;   /* GREEN — go / success */
  --wait:      #ff5277;   /* RED — wait / danger */
  --cyan:      #4dd2ff;   /* info / links */
  --gold:      #ffd23f;   /* score / GG accent */
  --violet:    #b06bff;   /* secondary accent */

  --shadow:    6px 6px 0 rgba(0,0,0,.55);
  --shadow-sm: 4px 4px 0 rgba(0,0,0,.5);

  /* Pixel everywhere: Galmuri covers 한글/Latin/CJK/Cyrillic; Noto handles scripts it lacks (ar/th/…) */
  --font-text: "Galmuri11","Galmuri","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-pixel: "Press Start 2P", "Galmuri11", var(--font-text);
}

*{ box-sizing:border-box; margin:0; padding:0; }
img,canvas{ image-rendering:pixelated; }

html,body{ height:100%; }
body{
  font-family:var(--font-text);
  color:var(--ink);
  background:
    radial-gradient(rgba(176,107,255,.10) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(circle at 50% -10%, #221a45 0%, var(--bg) 60%);
  min-height:100%;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle CRT scanlines (very light, decorative only) */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.05) 2px 3px);
}
html[dir="rtl"]{ direction:rtl; }

/* ---------- layout ---------- */
.wrap{ width:min(960px,92vw); margin-inline:auto; }
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; gap:12px; flex-wrap:wrap;
}
main{ padding-block:8px 56px; }
.site-footer{
  border-top:2px solid var(--bg-elev); margin-top:48px; padding:22px 0 40px;
  color:var(--ink-dim); font-size:13px;
}

/* ---------- brand ---------- */
.logo{
  font-family:var(--font-pixel); font-size:18px; letter-spacing:1px;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.logo .gg{ color:var(--gold); }
.logo .rf{ color:var(--go); }
.logo:hover{ filter:brightness(1.15); }

/* ---------- language switcher ---------- */
.lang{
  position:relative; font-size:13px;
}
.lang select{
  appearance:none; background:var(--bg-panel); color:var(--ink);
  border:2px solid var(--bg-elev); border-radius:0; padding:7px 30px 7px 12px;
  font-family:var(--font-text); font-weight:600; cursor:pointer;
}
.lang::after{ content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--ink-dim); pointer-events:none; }

/* ---------- panels ---------- */
.panel{
  background:var(--bg-panel); border:3px solid var(--bg-elev);
  box-shadow:var(--shadow); padding:22px; border-radius:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-text); font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  font-size:14px; color:#0e0b1a; background:var(--go);
  border:3px solid #0e0b1a; border-radius:0; padding:13px 22px; cursor:pointer;
  box-shadow:var(--shadow-sm); text-decoration:none; transition:transform .04s, filter .15s;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translate(4px,4px); box-shadow:none; }
.btn--gold{ background:var(--gold); }
.btn--cyan{ background:var(--cyan); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--bg-elev); box-shadow:none; }

/* ---------- pixel number (score) ---------- */
.pixel-num{
  font-family:var(--font-pixel); color:var(--gold);
  text-shadow:3px 3px 0 rgba(0,0,0,.6); line-height:1.1;
}

/* ---------- badges ---------- */
.badge{
  display:inline-block; font-weight:700; font-size:12px; text-transform:uppercase;
  padding:5px 10px; border:2px solid currentColor; color:var(--cyan);
}

/* =========================================================
   Reaction test stage
   ========================================================= */
.stage{
  user-select:none; cursor:pointer; border:3px solid var(--bg-elev);
  box-shadow:var(--shadow); border-radius:0;
  min-height:min(58vh,440px); display:grid; place-items:center; text-align:center;
  padding:28px; transition:background-color .06s, border-color .15s;
  background:var(--bg-panel); outline:none;
}
.stage:focus-visible{ border-color:var(--cyan); }
.stage[data-state="waiting"]{ background:var(--wait); color:#2a0010; border-color:#2a0010; }
.stage[data-state="ready"]{ background:var(--go); color:#062612; border-color:#062612; }
.stage[data-state="toosoon"]{ background:#2a2550; }
.stage-icon{ width:60px; height:60px; margin:0 auto 14px; }
.stage-icon svg{ width:100%; height:100%; image-rendering:pixelated; }
.stage-icon:empty{ display:none; }
.stage-title{ font-size:clamp(20px,4.5vw,30px); font-weight:800; }
.stage-sub{ margin-top:10px; font-size:15px; opacity:.9; max-width:34ch; }
.stage-score{ margin-top:16px; }
.stage-score .pixel-num{ font-size:clamp(34px,9vw,72px); }
.stage[data-state="ready"] .pixel-num,
.stage[data-state="result"] .stage-score .pixel-num{ color:inherit; text-shadow:3px 3px 0 rgba(0,0,0,.25); }

/* progress dots */
.progress{ display:flex; gap:10px; justify-content:center; margin:18px 0 0; }
.dot{ width:14px; height:14px; background:var(--bg-elev); border:2px solid #000; }
.dot.done{ background:var(--gold); }
.dot.current{ background:var(--cyan); }

/* summary */
.summary{ margin-top:22px; display:none; }
.summary.show{ display:block; }
.summary .big{ text-align:center; }
.summary .big .pixel-num{ font-size:clamp(40px,12vw,90px); color:var(--go); }
.summary .meta{ text-align:center; color:var(--ink-dim); margin-top:6px; }
.summary .rating{ text-align:center; margin-top:10px; font-size:20px; font-weight:800; color:var(--cyan); }
.summary .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* game CTA (the funnel) */
.cta{
  margin-top:26px; background:linear-gradient(135deg,#241a4d,#1b1733);
  border:3px solid var(--violet); box-shadow:var(--shadow); padding:22px; text-align:center;
}
.cta h3{ font-size:18px; margin-bottom:6px; }
.cta p{ color:var(--ink-dim); font-size:14px; margin-bottom:16px; }

/* ---------- test grid (hub) ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:22px; }
.card{
  background:var(--bg-panel); border:3px solid var(--bg-elev); box-shadow:var(--shadow-sm);
  padding:20px; text-decoration:none; color:var(--ink); display:block; transition:transform .06s, border-color .15s;
}
.card:hover{ transform:translate(-2px,-2px); border-color:var(--gold); }
.card .ico{ display:block; width:46px; height:46px; }
.card .ico svg{ width:100%; height:100%; image-rendering:pixelated; }
.logo .ico-sm{ display:inline-block; width:22px; height:22px; vertical-align:-4px; margin-right:2px; }
.card h3{ margin-top:12px; font-size:17px; }
.card p{ color:var(--ink-dim); font-size:13px; margin-top:6px; }
.card.soon{ opacity:.55; pointer-events:none; }
.card .tag{ float:right; font-size:11px; color:var(--gold); border:1px solid var(--gold); padding:2px 7px; text-transform:uppercase; }

.lead{ color:var(--ink-dim); font-size:16px; max-width:60ch; margin-top:8px; }
h1.title{ font-size:clamp(26px,5vw,40px); font-weight:800; }
.section-h{ font-family:var(--font-pixel); font-size:14px; color:var(--gold); margin:34px 0 4px; }

/* ---------- moodboard helpers ---------- */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; margin-top:18px; }
.sw{ border:3px solid #000; box-shadow:var(--shadow-sm); }
.sw .chip{ height:80px; }
.sw .lab{ background:var(--bg-panel); padding:8px 10px; font-size:12px; }
.sw .lab b{ display:block; font-size:13px; }
.specimen{ margin-top:14px; }

/* =========================================================
   Phase-1 test components
   ========================================================= */
/* big pixel counter (click speed) */
.counter{ font-family:var(--font-pixel); font-size:clamp(40px,13vw,86px); color:var(--gold); text-shadow:3px 3px 0 rgba(0,0,0,.6); line-height:1.1; }

/* aim trainer */
.stage.aim{ position:relative; overflow:hidden; cursor:crosshair; }
.target{
  position:absolute; width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffffcc, var(--gold) 45%, #c79a00 72%);
  border:3px solid #000; box-shadow:var(--shadow-sm); cursor:crosshair;
  transform:translate(-50%,-50%); touch-action:none;
}

/* sequence memory tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(320px,78vw); margin:8px auto 0; touch-action:manipulation; }
.tile{ aspect-ratio:1; background:var(--bg-elev); border:3px solid #000; box-shadow:var(--shadow-sm); cursor:pointer; transition:background .07s, transform .04s; }
.tile.lit{ background:var(--cyan); }
.tile.good{ background:var(--go); }
.tile.bad{ background:var(--wait); }
.tile:active{ transform:translate(2px,2px); }

/* F1 start lights */
.lights{ display:flex; gap:10px; justify-content:center; margin:4px 0 6px; }
.light{ width:36px; height:36px; border-radius:50%; background:#2a0010; border:3px solid #000; box-shadow:inset 0 0 0 2px #00000055; }
.light.on{ background:var(--wait); box-shadow:0 0 16px var(--wait); }

/* =========================================================
   NES-style notched pixel border (9-slice border-image)
   8x8 art: 2px-thick dark frame with the 4 corners snipped.
   Falls back to a solid dark border if border-image fails.
   ========================================================= */
:root{
  --px-frame: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%20viewBox='0%200%208%208'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%230b0a16'%20d='M1%200h6v1H1z%20M0%201h8v1H0z%20M0%206h8v1H0z%20M1%207h6v1H1z%20M0%202h2v4H0z%20M6%202h2v4H6z'/%3E%3C/svg%3E");
}
.panel, .card, .stage, .cta, .btn{
  border-style: solid;
  border-width: 6px;
  border-color: #0b0a16;
  border-image: var(--px-frame) 2 stretch;
}
.card{ border-width: 5px; }
.panel, .card, .stage, .cta{ box-shadow: none; }
.btn{ box-shadow: 0 5px 0 rgba(11,10,22,.85); }
.btn:active{ transform: translateY(5px); box-shadow: none; }

/* ---- pixel mascot ("Volt") ---- */
.logo-mascot{ display:inline-block; width:1.4em; height:1.4em; vertical-align:-0.32em; margin-right:6px; }
.logo-mascot svg{ width:100%; height:100%; image-rendering:pixelated; }
.summary-mascot{ display:block; width:64px; height:64px; margin:2px auto 8px; image-rendering:pixelated; }
.summary-mascot svg{ width:100%; height:100%; image-rendering:pixelated; }

/* mascot idle motion: gentle bounce + a blink/squash */
@keyframes gg-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10%); } }
@keyframes gg-pop{ 0%,70%,100%{ transform:translateY(0) scaleY(1); } 35%{ transform:translateY(-14%) scaleY(1.05); } 82%{ transform:translateY(0) scaleY(.82); } 90%{ transform:translateY(0) scaleY(1); } }
.logo-mascot svg{ transform-origin:50% 100%; animation:gg-bounce 2.6s ease-in-out infinite; }
.summary-mascot svg{ transform-origin:50% 100%; animation:gg-pop 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .logo-mascot svg, .summary-mascot svg{ animation:none; } }

/* cross-promo game icon (shown only when GG_PROMO is enabled) */
.promo-ico{ width:56px; height:56px; margin:0 auto 8px; }
.promo-ico svg{ width:100%; height:100%; image-rendering:pixelated; }

/* dynamic game grid (color / visual memory / whack) */
.cgrid{ display:grid; gap:6px; width:min(340px,82vw); margin:8px auto 0; touch-action:manipulation; }
.ctile{ aspect-ratio:1; background:var(--bg-elev); border:3px solid #000; box-shadow:var(--shadow-sm); cursor:pointer; transition:background .07s, transform .04s; }
.ctile:active{ transform:translate(2px,2px); }
.ctile.lit{ background:var(--cyan); }
.ctile.good{ background:var(--go); }
.ctile.bad{ background:var(--wait); }
.ctile.mole{ background:#241a3f; }
.ctile.mole svg{ width:84%; height:84%; display:block; margin:8%; image-rendering:pixelated; }

/* =========================================================
   Phase-2: challenge banner / hub stats / leaderboard
   ========================================================= */
.chal-banner{ background:#241a4d; border:5px solid #0b0a16; border-image:var(--px-frame) 2 stretch; color:var(--gold); font-weight:800; text-align:center; padding:12px; margin:0 0 16px; }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }
.section-h2{ font-family:var(--font-pixel); font-size:12px; color:var(--gold); margin-bottom:10px; }
.big-reflex{ text-align:center; margin:4px 0 12px; }
.big-reflex .pixel-num{ font-size:clamp(40px,12vw,72px); color:var(--go); }
.best-list{ display:flex; flex-direction:column; gap:4px; }
.best-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-dim); border-top:2px solid var(--bg-elev); padding-top:5px; }
.best-row b{ color:var(--ink); }
.daily-game{ font-size:20px; font-weight:800; }
.daily-streak{ color:var(--gold); margin:6px 0 14px; font-size:14px; }

.lb-controls{ margin:14px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ctl-label{ color:var(--ink-dim); font-size:13px; }
.lb-row{ display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:9px 4px; border-top:2px solid var(--bg-elev); }
.lb-rank{ color:var(--gold); font-weight:800; }
.lb-name{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-row b{ color:var(--go); }
.lb-empty{ color:var(--ink-dim); text-align:center; padding:24px; }

/* typing shooter game */
.stage.game{ position:relative; overflow:hidden; }
.stage.game.hit{ background:#3a1430; }
.hud{ position:absolute; top:8px; left:12px; right:12px; display:none; justify-content:space-between; font-weight:800; font-size:15px; z-index:6; pointer-events:none; }
.hud span{ background:#0b0a16; padding:3px 8px; }
.entity{ position:absolute; left:0; top:0; width:72px; text-align:center; pointer-events:none; z-index:3; will-change:transform; }
.ent-sprite{ position:relative; width:44px; height:44px; margin:0 auto; }
.ent-sprite svg{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; display:block; }
.ent-word{ display:inline-block; margin-top:2px; font-family:var(--font-text); font-size:13px; line-height:1.2; background:#0b0a16; color:var(--ink); padding:1px 5px; white-space:nowrap; }
.ent-word .wd-done{ color:var(--go); }
/* flap + swim — transform-only (compositor-friendly, no per-frame re-raster) */
.chicken .ent-sprite{ animation:gg-flap .4s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes gg-flap{ 0%,100%{ transform:translateY(0) rotate(-5deg) } 50%{ transform:translateY(-3px) rotate(5deg) } }
.fish .ent-sprite{ animation:gg-swim 1s ease-in-out infinite; }
@keyframes gg-swim{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }
@media (prefers-reduced-motion: reduce){ .chicken .ent-sprite,.fish .ent-sprite{ animation:none } }
/* visible display box (shows the not-yet-cleared tail) over a hidden real input */
.type-wrap{ display:none; position:relative; width:min(440px,90%); margin:16px auto 0; }
.type-box{ min-height:24px; font-family:var(--font-text); font-size:18px; text-align:center; padding:12px; background:var(--bg); color:var(--ink); border:4px solid #0b0a16; border-image:var(--px-frame) 2 stretch; word-break:break-all; }
.type-box.miss{ color:var(--wait); box-shadow:0 0 0 2px var(--wait); }
.type-box:empty::before{ content:'▌'; color:var(--cyan); animation:gg-caret 1s steps(1) infinite; }
@keyframes gg-caret{ 50%{ opacity:0 } }
#typeInput{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; background:transparent; color:transparent; caret-color:transparent; font-size:18px; outline:none; }

/* SEO content block */
.seo{ text-align:left; margin-top:26px; }
.seo h2{ margin-top:16px; }
.seo ul{ margin:6px 0 0 18px; }
.seo li{ margin:3px 0; color:var(--ink-dim); }
.seo p{ margin-top:6px; }
.seo b{ color:var(--ink); }

/* CTA: restore violet emphasis (notched frame) */
.cta{
  border-color:#b06bff;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%20viewBox='0%200%208%208'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%23b06bff'%20d='M1%200h6v1H1z%20M0%201h8v1H0z%20M0%206h8v1H0z%20M1%207h6v1H1z%20M0%202h2v4H0z%20M6%202h2v4H6z'/%3E%3C/svg%3E") 2 stretch;
}

/* footer family / trust links */
.foot-links{ font-size:14px; }
.foot-links a,.foot-family a,.foot-made a{ color:var(--ink-dim); text-decoration:none; border:0; }
.foot-links a:hover,.foot-family a:hover,.foot-made a:hover{ color:var(--cyan); }
.foot-family{ margin-top:8px; font-size:13px; line-height:1.8; }
.foot-made{ margin-top:6px; font-size:13px; }
.muted{ color:var(--ink-dim); }

.lb-name-input{ font-family:var(--font-text); font-size:14px; padding:8px 10px; background:var(--bg); color:var(--ink); border:3px solid #0b0a16; border-image:var(--px-frame) 2 stretch; outline:none; max-width:170px; }

.lb-claim{ margin:14px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.lb-claim-h{ width:100%; text-align:center; font-weight:800; color:#ffd23f; }

.lb-flag{ width:22px; height:16px; image-rendering:pixelated; border:1px solid #0b0a16; vertical-align:-3px; margin-right:3px; background:#0b0a16; }

#lbBoard{ max-height:62vh; overflow-y:auto; }

.header-actions{ display:flex; gap:10px; align-items:center; }
.btn-lb-top{ padding:8px 12px; font-size:14px; white-space:nowrap; text-decoration:none; }

.lb-row.lb-me{ outline:2px solid #ffd23f; background:rgba(255,210,63,.08); border-radius:8px; }

.lb-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; margin-bottom:10px; }
.lb-tab{ flex:0 0 auto; padding:9px 13px; font-size:13px; font-weight:700; border:2px solid #2a2540; background:#16122a; color:#9a96bf; border-radius:10px; cursor:pointer; white-space:nowrap; }
.lb-tab.active{ color:#0e0b1a; background:#ffd23f; border-color:#ffd23f; }