:root{
  --bg:#080b11; --bg2:#0d131c; --panel:#111927; --panel2:#0e1420;
  --line:#1e2a3b; --line2:#2a3a52;
  --text:#e6edf6; --muted:#8fa0b6; --dim:#61748c;
  --teal:#35d0c0; --gold:#c8aa6e; --blue:#4aa3ff; --purple:#a970ff; --danger:#ff5d6c;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(53,208,192,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(169,112,255,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1080px;min-width:1000px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:0 16px}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px 16px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.logo{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.logo b{color:var(--gold);font-weight:800}
.brand .sub{font-size:13px;color:var(--muted)}
.ai-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--teal);
  background:linear-gradient(180deg,rgba(53,208,192,.10),rgba(53,208,192,.03));
  border:1px solid rgba(53,208,192,.35);border-radius:999px;padding:7px 13px}
.ai-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(53,208,192,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,208,192,.5)}70%{box-shadow:0 0 0 7px rgba(53,208,192,0)}100%{box-shadow:0 0 0 0 rgba(53,208,192,0)}}

/* layout */
.layout{display:grid;grid-template-columns:258px 1fr;gap:16px;flex:1;align-items:start;padding-bottom:12px}
/* responsive stacking removed — min-width 1000px, layout never collapses */

/* board panel */
.board-panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;position:sticky;top:12px}
.board-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.board-title{font-size:15px;font-weight:800}
.board-game{font-size:12.5px;color:var(--muted)}
.period-tabs{display:flex;gap:6px;margin-bottom:10px}
.ptab{flex:1;padding:7px 0;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:.15s}
.ptab:hover{color:var(--text);border-color:var(--line2)}
.ptab.on{color:#06231f;background:var(--teal);border-color:var(--teal)}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.board-list li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font-size:13px}
.board-list li:nth-child(odd){background:rgba(255,255,255,.02)}
.board-list .rk{color:var(--dim);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.board-list .ini{font-weight:700;letter-spacing:.05em}
.board-list .sc{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.board-list .rank-1{background:linear-gradient(90deg,rgba(200,170,110,.16),transparent)}
.board-list .rank-1 .rk,.board-list .rank-1 .ini{color:var(--gold)}
.board-list .rank-2 .ini{color:#cdd6e2}
.board-list .rank-3 .ini{color:#e0a878}
.board-list .empty{color:var(--dim);text-align:center;padding:22px 0;display:block}

/* stage */
.stage{min-height:60vh;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden}

/* home */
.home-head h1{margin:4px 0 6px;font-size:22px;letter-spacing:-.02em}
.home-head p{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.6}
/* 홈 카드 그리드: 게임이 수십~수백개로 늘어도 페이지를 아래로 늘리지 않고 이 영역 안에서 스크롤(1080×960 유지) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;
  max-height:calc(100vh - 250px);overflow-y:auto;overflow-x:hidden;padding:2px 8px 6px 2px}
.grid::-webkit-scrollbar{width:9px}
.grid::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.grid::-webkit-scrollbar-thumb:hover{background:#3a4d6a}
.grid::-webkit-scrollbar-track{background:transparent}
.card{--accent:var(--teal);text-align:left;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--line);color:var(--text);transition:.18s;position:relative;overflow:hidden;min-height:150px}
.card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--accent);opacity:.85}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 30px -14px var(--accent)}
.card-ico{font-size:34px;line-height:1}
.card-title{font-size:16px;font-weight:800}
.card-tag{font-size:12.5px;color:var(--muted);margin-top:3px}
.card-cta{margin-top:auto;font-size:13px;font-weight:700;color:var(--accent)}
.card.ghost{cursor:default;opacity:.6;border-style:dashed}
.card.ghost::before{display:none}
.card.ghost:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* play */
.play-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.play-title{font-size:17px;font-weight:800}
.back{font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;transition:.15s}
.back:hover{color:var(--text);border-color:var(--line2)}
.game-root{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap;position:relative}
/* ★단일 규칙: 모든 게임 캔버스를 1080×960 안에 강제(개별 게임 인라인 width:100% 무력화).
   width:auto로 캔버스가 폭을 100% 먹으며 커져 사이드를 아래로 밀고 세로 스크롤 나던 것 차단.
   ≤520폭·≤70vh높이로 clamp → 사이드는 옆에 유지, 화면 안에 다 들어옴. 입력 매핑은 rc.width 기준이라 안전. */
.game-canvas{background:#0b1017;border:1px solid var(--line);border-radius:10px;width:auto!important;height:auto!important;max-width:min(720px,100%)!important;max-height:min(70vh,640px)!important;touch-action:none;display:block}
.game-side{display:flex;flex-direction:column;gap:10px;min-width:140px;max-width:210px;max-height:min(70vh,640px);overflow:auto}
.game-side .stat{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.game-side .stat label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.game-side .stat b{font-size:22px;font-variant-numeric:tabular-nums}
.game-side .next,.game-side .chain{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.game-side .next label,.game-side .chain label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.sk-next{font-size:22px;text-align:center}
.sk-chain{font-size:15px;line-height:1.5;color:var(--muted);word-break:break-all}
.game-side .hint{font-size:11.5px;color:var(--dim);line-height:1.6}

/* game over overlay */
.gameover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,9,14,.72);backdrop-filter:blur(4px);border-radius:10px;z-index:5}
.go-card{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:26px 30px;text-align:center;width:min(320px,86%);box-shadow:0 20px 60px -20px #000}
.go-title{font-size:14px;color:var(--danger);font-weight:700;letter-spacing:.04em}
.go-score{font-size:40px;font-weight:800;margin:6px 0 16px;font-variant-numeric:tabular-nums}
.go-entry{margin-bottom:16px}
.go-entry label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.go-entry input{width:130px;text-align:center;font-size:26px;font-weight:800;letter-spacing:.35em;padding:8px 6px;background:#0b1017;border:1px solid var(--line2);border-radius:10px;color:var(--gold);text-transform:uppercase}
.go-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.go-btns button{font-size:13px;font-weight:700;padding:9px 14px;border-radius:10px;cursor:pointer;border:1px solid var(--line2);background:transparent;color:var(--text);transition:.15s}
.go-btns button:hover{border-color:var(--teal)}
.go-btns .go-save{background:var(--teal);color:#06231f;border-color:var(--teal)}

.foot{text-align:center;font-size:11px;color:var(--dim);padding:14px 0 18px}

/* ── v3: wallpaper bg · mode toggle · 16-char nick · game helpers ── */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,11,17,.85),rgba(8,11,17,.955)),url("assets/wallpaper.png") center/cover no-repeat;background-attachment:fixed}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mode-slot{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:4px 6px}
.mode-label{font-size:11px;color:var(--muted);padding:0 4px}
.mode-btn{font-size:12px;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:5px 10px;cursor:pointer;transition:.15s}
.mode-btn:hover{color:var(--text)}
.mode-btn.on{color:#06231f;background:var(--gold)}
.go-entry input{width:220px;text-align:center;font-size:18px;font-weight:700;letter-spacing:normal;color:var(--text)}
.go-entry input::placeholder{color:var(--dim);font-weight:400}
.timer-wrap{width:100%;height:9px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-top:4px}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold))}

/* ── v4: hall of fame (rotating game + total) · 960x1080 fit ── */
.board-title{font-size:15px;font-weight:800;margin-bottom:10px}
/* 명예의전당 게임 선택: 게임 수백개 대비 — 점(dots) 대신 드롭박스 + 좌우 화살표(+모바일 스와이프) */
.hall-rot{display:flex;align-items:center;gap:6px;margin:2px 0 8px;min-height:20px}
.hall-select{flex:1;min-width:0;background:#141d29;color:var(--gold);border:1px solid var(--line2);border-radius:8px;padding:5px 8px;font-size:13px;font-weight:800;cursor:pointer}
.hall-select option{background:#0e1620;color:#e8eef6;font-weight:600}
.hall-nav{flex:0 0 auto;width:26px;height:28px;border-radius:8px;border:1px solid var(--line2);background:#141d29;color:var(--muted);font-size:16px;font-weight:800;line-height:1;padding:0;cursor:pointer}
.hall-nav:hover{color:var(--gold);border-color:var(--gold)}
.hall-total-head{font-size:12.5px;font-weight:800;margin:14px 0 6px;color:var(--text)}
.hall-total-head span{color:var(--muted);font-weight:400;font-size:11px}
.board-list.total li .sc{color:var(--gold)}
/* (캔버스 크기는 위 통합 규칙 하나로만 관리 — 폭720·높이640 clamp) */
.stage{min-height:auto}

/* ── v5: 사이트 복귀 링크 · 시작 화면 · 메달/트로피 ── */
.site-back{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;transition:.15s}
.site-back:hover{color:var(--text);border-color:var(--line2)}
#brandHome{transition:.15s}
#brandHome:hover{color:var(--gold)}
.start-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:min(56vh,520px);text-align:center;padding:20px}
.start-ico{font-size:66px;line-height:1}
.start-title{font-size:24px;font-weight:800}
.start-tag{font-size:14px;color:var(--muted)}
.start-btn{margin-top:16px;font-size:17px;font-weight:800;color:#06231f;background:linear-gradient(180deg,var(--teal),#2bb6a8);border:0;border-radius:12px;padding:14px 34px;cursor:pointer;box-shadow:0 10px 26px -12px var(--teal);transition:transform .15s}
.start-btn:hover{transform:translateY(-2px)}
.board-list .rk{font-size:15px}
/* 종합 랭킹 메달 갯수: 금·은·동 메달(🥇🥈🥉)은 이모지 원색이 서로 뚜렷이 달라 구분이 확실하다 */
.board-list .sc.medals{font-size:13px;letter-spacing:-.02em;color:var(--text);font-weight:700;display:inline-flex;gap:7px;align-items:center}
/* 종합 랭킹 좌측 순위 트로피(1·2·3위): 원(디스크) 없이 '트로피 그대로', 금(원색)·은(회색)·동(진한 구리)으로
   강하게 틴트해 구분. 동은 명도를 확 낮춰(brightness .58) 금과 확실히 다르게(사용자: 금↔동 구분 + 원 제거 지시). */
.board-list .rk .tr{font-size:15px;line-height:1;display:inline-block}
.tr.silver{filter:grayscale(1) brightness(1.7) contrast(.82)}
.tr.bronze{filter:brightness(.58) sepia(1) saturate(5) hue-rotate(-12deg)}
/* 게임오버 PIN(닉네임 소유권) */
.go-pinlabel{display:block;font-size:11px;color:var(--muted);margin:12px 0 6px}
.go-entry #pin{width:110px;text-align:center;font-size:20px;letter-spacing:.4em;font-weight:800;color:var(--gold);padding:8px 6px}
.go-pinrow{display:inline-flex;align-items:center;gap:7px}
.go-pineye{background:transparent;border:1px solid var(--line2);border-radius:9px;padding:7px 10px;font-size:16px;line-height:1;cursor:pointer;transition:.15s}
.go-pineye:hover{border-color:var(--teal)}
/* 테트리스 다음(틸) vs 홀드(골드 점선) 시각 구분 */
.game-side .hold{background:rgba(200,170,110,.07);border:1px dashed var(--gold);border-radius:10px;padding:10px 12px}
.game-side .hold > label{display:block;font-size:11.5px;color:var(--gold);font-weight:700;margin-bottom:6px}
.game-side .next > label{color:var(--teal);font-weight:700}
.go-msg{font-size:12px;color:var(--danger);margin-top:9px;min-height:15px;line-height:1.45}