body{min-height:100vh;min-height:100svh;overflow-x:hidden;font-family:'Noto Sans KR',sans-serif;}
.games-main button,.games-main input,.games-main form{font-family:'Noto Sans KR',sans-serif;}
.games-main{width:min(720px,100%);margin:0 auto;padding:44px 20px 64px;}
.screen{display:none;animation:fi .18s;}
.screen.active{display:block;}
.section-heading{margin-bottom:24px;}
.section-heading h1{font-size:32px;letter-spacing:-1.5px;margin:4px 0 7px;}
.section-heading p{color:var(--text2);font-size:14px;}
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--accent);}
.game-card{width:100%;display:flex;align-items:center;gap:16px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);cursor:pointer;text-align:left;font-family:inherit;transition:transform .14s,border-color .14s;}
.game-card+.game-card{margin-top:10px;}
.game-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.game-card-icon,.stage-icon{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;color:#000;background:var(--accent);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.game-card-copy{display:flex;flex-direction:column;gap:5px;flex:1;}
.game-card-copy strong{font-size:17px;}
.game-card-copy small{font-size:12px;color:var(--text2);}
.game-card-arrow{font-size:30px;color:var(--text3);}
.games-coming-soon{margin-top:22px;text-align:center;font-size:12px;color:var(--text3);}
.game-screen{position:relative;min-height:calc(100vh - var(--hh) - 108px);min-height:calc(100svh - var(--hh) - 108px);}
.score-badge{position:absolute;top:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 12px;color:var(--text2);font-size:12px;}
.score-badge strong{font-family:'Space Mono',monospace;color:var(--accent);font-size:15px;margin-left:4px;}
.game-stage{min-height:360px;display:grid;place-items:center;text-align:center;cursor:pointer;user-select:none;}
.intro-copy{display:flex;flex-direction:column;align-items:center;gap:16px;}
.intro-copy h1{font-size:30px;letter-spacing:-1px;}
.intro-copy p{color:var(--text2);line-height:1.8;}
.countdown{font-family:'Space Mono',monospace;font-size:112px;font-weight:700;line-height:1;color:var(--accent);}
.listen-copy{display:none;font-size:27px;font-weight:800;}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:70px;}
.choice-btn{height:70px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-family:'Space Mono',monospace;font-size:22px;font-weight:700;cursor:pointer;transition:border-color .12s,background .12s;}
.choice-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));}
.result-screen{padding-top:50px;}
.result-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;}
.result-card h1{font-size:27px;margin:7px 0;}
.result-card h1 strong{color:var(--accent);}
.result-card>p{color:var(--text2);margin-bottom:26px;}
#scoreForm label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:7px;}
.submit-row{display:flex;gap:8px;}
.submit-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:14px;outline:none;}
.submit-row input:focus{border-color:var(--accent);}
.form-message{font-size:12px;color:var(--danger);min-height:18px;margin-top:7px;}
.leaderboard-heading{display:flex;flex-direction:column;}
.leaderboard{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.leaderboard-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border);}
.leaderboard-row:last-child{border-bottom:none;}
.leaderboard-rank{font-family:'Space Mono',monospace;color:var(--text3);font-size:12px;}
.leaderboard-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leaderboard-score{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent);}
.leaderboard-empty{padding:28px;text-align:center;color:var(--text2);}
.back-to-list{display:block;margin:18px auto 0;}
.duel-card-icon{background:var(--warn);}
.duel-screen{min-height:calc(100vh - var(--hh) - 108px);}
.duel-lobby{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px;}
.duel-lobby h1{font-size:30px;}
.duel-lobby p{color:var(--text2);line-height:1.8;}
#duelJoinForm{display:flex;gap:8px;width:min(360px,100%);}
#duelJoinForm input{flex:1;min-width:0;text-transform:uppercase;text-align:center;letter-spacing:3px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:11px;color:var(--text);font-family:'Space Mono',monospace;font-weight:700;outline:none;}
#duelJoinForm input:focus{border-color:var(--accent);}
.duel-arena{display:none;position:relative;min-height:650px;overflow:hidden;}
.duel-top{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);}
.duel-top strong{font-family:'Space Mono',monospace;color:var(--accent);}
.duel-playfield{min-height:430px;display:flex;align-items:center;justify-content:center;}
.tension-panel{width:min(560px,94%);padding:26px 28px 24px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface2) 45%,var(--surface)));box-shadow:0 16px 40px rgba(0,0,0,.09);}
.tension-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;}
.tension-heading>span{font-size:13px;font-weight:700;color:var(--text2);letter-spacing:.5px;}
.tension-heading strong{font-family:'Space Mono',monospace;font-size:48px;line-height:.85;color:var(--text);}
.tension-heading small{font-size:15px;color:var(--text3);margin-left:3px;}
.tension-track{position:relative;height:56px;border-radius:15px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.12);}
.tension-zone{position:absolute;inset-block:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.7px;color:rgba(0,0,0,.45);}
.tension-zone.safe{left:0;width:50%;background:rgba(92,158,0,.14)}.tension-zone.warning{left:50%;width:30%;background:rgba(200,118,10,.17)}.tension-zone.break{right:0;width:20%;background:rgba(217,48,37,.18)}
.tension-fill{position:absolute;inset:0 auto 0 0;width:29%;background:linear-gradient(90deg,rgba(92,158,0,.7),rgba(200,118,10,.78),rgba(217,48,37,.85));transition:width .1s;mix-blend-mode:multiply;}
body.dark .tension-fill{mix-blend-mode:screen;opacity:.65;}
.tension-marker{position:absolute;top:5px;bottom:5px;left:29%;width:5px;border-radius:5px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 12px rgba(255,255,255,.8);transform:translateX(-50%);transition:left .1s;}
.tension-scale{display:flex;justify-content:space-between;margin-top:8px;font-family:'Space Mono',monospace;font-size:10px;color:var(--text3);}
.role-overlay{position:absolute;inset:0;z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;}
.role-spinner{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;animation:role-flip .18s infinite alternate;color:var(--warn);}
@keyframes role-flip{from{transform:rotate(-4deg) scale(.95)}to{transform:rotate(4deg) scale(1.05)}}
.role-overlay h2{font-size:32px;}
.role-overlay p{font-size:17px;color:var(--text2);}
.duel-controls{display:none;position:absolute;left:0;right:0;bottom:8%;grid-template-columns:1fr 1fr;gap:14px;}
.duel-action{height:94px;border-radius:18px;border:1px solid transparent;color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;cursor:pointer;touch-action:manipulation;box-shadow:0 12px 24px rgba(0,0,0,.16);transition:transform .09s,filter .12s,opacity .12s;}
.duel-action:active:not(:disabled){transform:translateY(3px) scale(.98);filter:brightness(.9);}
.duel-action.loosen{background:linear-gradient(145deg,#168fd4,#0065a8);border-color:#49b5f2;}
.duel-action.wind{background:linear-gradient(145deg,#ee5148,#b9231b);border-color:#ff827b;}
.duel-action-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-family:'Space Mono',monospace;font-size:35px;font-weight:700;line-height:1;}
.duel-action>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.duel-action strong{font-size:22px;line-height:1.1}.duel-action small{font-size:10px;font-weight:500;opacity:.75;}
.duel-action:disabled{opacity:.18;cursor:not-allowed;box-shadow:none;filter:grayscale(.5);}
.duel-result{display:none;position:absolute;inset:0;z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;}
.duel-result h2{font-size:35px;}
.duel-result p{color:var(--text2);font-size:16px;}
.duel-card-icon,.word-card-icon{font-family:'Noto Sans KR',sans-serif;font-size:25px;}
.word-card-icon{background:var(--accent2);color:#fff;}
.word-screen{position:relative;min-height:calc(100vh - var(--hh) - 108px);}
.word-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;}
.word-top>div{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 13px;}
.word-top span{font-size:10px;color:var(--text3);}
.word-top strong{font-family:'Space Mono',monospace;font-size:15px;color:var(--accent);}
.word-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:min(620px,100%);margin:0 auto;}
.word-cell{aspect-ratio:1;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:'Noto Sans KR',sans-serif;font-size:clamp(16px,4vw,24px);font-weight:800;cursor:pointer;transition:background .12s,border-color .12s,transform .1s;}
.word-cell:active{transform:scale(.92);}
.word-cell.selected{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:var(--accent);color:var(--accent);}
.word-cell.wrong{animation:wrong-cell .25s;}
@keyframes wrong-cell{50%{background:color-mix(in srgb,var(--danger) 25%,var(--surface));border-color:var(--danger)}}
.word-cheer{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 88%,transparent);font-size:72px;font-weight:900;color:var(--accent);animation:cheer-pop .6s infinite alternate;}
@keyframes cheer-pop{from{transform:scale(.9) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}
.leaderboard-detail{font-size:10px;color:var(--text3);margin-left:7px;font-weight:400;}
@media(max-width:700px){
  .games-main{padding:30px 14px 40px;}
  .hdr-games-btn{padding:5px 9px;}
  .week-lbl{min-width:60px;}
  .game-screen{min-height:calc(100svh - var(--hh) - 70px);}
  .game-stage{min-height:55svh;}
  .score-badge{top:-14px;}
  .countdown{font-size:92px;}
  .choices{position:fixed;left:14px;right:14px;bottom:18px;z-index:10;}
  .choice-btn{height:64px;font-size:18px;}
  .result-card{padding:22px 18px;}
  .submit-row{flex-direction:column;}
  .duel-screen,.duel-arena{min-height:calc(100svh - var(--hh) - 60px);}
  .duel-playfield{min-height:55svh;}
  .tension-panel{padding:21px 17px 19px;}
  .tension-heading strong{font-size:42px;}
  .tension-track{height:50px;}
  .duel-controls{bottom:5%;gap:8px;}
  .duel-action{height:82px;border-radius:14px;gap:8px;}
  .duel-action-icon{width:38px;height:38px;font-size:28px;}
  .duel-action strong{font-size:19px}.duel-action small{display:none;}
  .word-screen{min-height:calc(100svh - var(--hh) - 60px);}
  .word-grid{gap:3px;}
  .word-cell{border-radius:5px;font-size:17px;}
}