/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic:wght@400;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Jua','Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:#0d0d1a;color:#e8e8f0;min-height:100vh;overflow-x:hidden}

/* Star background */
.bg-stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star-dot{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--dur,2s) var(--dly,0s) infinite alternate}
@keyframes twinkle{from{opacity:.1;transform:scale(1)}to{opacity:.85;transform:scale(1.6)}}
.screen{position:relative;z-index:1}

/* Confetti */
.confetti-pc{position:fixed;top:-12px;border-radius:2px;pointer-events:none;z-index:9999;opacity:0;animation:fallDown linear forwards}
@keyframes fallDown{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(105vh) rotate(720deg)}}

/* Shake on wrong answer */
.shake{animation:shakeEl .35s ease}
@keyframes shakeEl{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* Card entrance */
@keyframes fadeUpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Bounce for result */
@keyframes bounceIcon{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.18) rotate(4deg)}}

/* Float for logo */
@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}

/* Header */
.hdr{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(240,165,0,.15);flex-shrink:0;gap:10px}
.hdr-title{font-size:1.05rem;font-weight:700;color:#f0a500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 12px rgba(240,165,0,.35)}
.badge{background:linear-gradient(135deg,#f0a500,#d08800);color:#000;padding:4px 11px;border-radius:20px;font-size:.76rem;font-weight:700;letter-spacing:2px;flex-shrink:0;box-shadow:0 2px 10px rgba(240,165,0,.3)}
.badge-r{background:#c53030;color:#fff;letter-spacing:0;font-family:monospace;font-size:.9rem;box-shadow:0 2px 10px rgba(197,48,48,.35)}
.code-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#888;padding:4px 10px;border-radius:20px;font-size:.7rem;letter-spacing:3px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;font-family:monospace}
.code-chip:active{background:rgba(240,165,0,.18);border-color:rgba(240,165,0,.4);color:#f0a500}

/* Welcome */
.wlc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;background:radial-gradient(ellipse at 50% 40%,#1a1a3e,#0d0d1a 70%)}
.wlc-logo{font-size:4.5rem;text-align:center;margin-bottom:6px;display:block;animation:floatLogo 2.8s ease-in-out infinite}
.wlc-title{font-size:2rem;font-weight:700;color:#f0a500;margin-bottom:4px;text-align:center;text-shadow:0 0 22px rgba(240,165,0,.55)}
.wlc-sub{font-size:.88rem;color:#888;margin-bottom:28px;text-align:center}

/* Form */
.fg{width:100%;max-width:360px;margin-bottom:11px}
.fl{display:block;font-size:.8rem;color:#999;margin-bottom:5px}
.fi{width:100%;padding:12px 14px;background:#1e1e2e;border:1.5px solid #2a2a3a;border-radius:10px;color:#e8e8f0;font-size:.96rem;outline:none;transition:border-color .2s;font-family:inherit}
.fi:focus{border-color:#f0a500}
.fi::placeholder{color:#3a3a4a}
select.fi{cursor:pointer}

/* Buttons */
.btn{width:100%;max-width:360px;padding:12px;border:none;border-radius:10px;font-size:.96rem;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .15s;font-family:inherit;display:block;text-align:center}
.btn:active{transform:scale(.97)}
.btn-p{background:linear-gradient(135deg,#f0a500,#d08800);color:#000;box-shadow:0 4px 18px rgba(240,165,0,.3)}
.btn-p:active{box-shadow:none}
.btn-s{background:transparent;border:2px solid #f0a500;color:#f0a500;margin-top:8px}
.btn:disabled{opacity:.4;pointer-events:none;box-shadow:none}
.btn-sm{padding:6px 13px;font-size:.8rem;width:auto;max-width:none;display:inline-block}

/* Wrap */
.wrap{flex:1;padding:14px 16px;max-width:480px;margin:0 auto;width:100%;overflow-y:auto}

/* Party options */
.p-opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.p-opt{background:#1e1e2e;border:2px solid #2a2a3a;border-radius:13px;padding:15px 11px;text-align:center;cursor:pointer;transition:all .2s}
.p-opt.on{border-color:#f0a500;background:#1e1a0e}
.p-opt-icon{font-size:2rem;margin-bottom:5px}
.p-opt-ttl{font-weight:700;font-size:.9rem}
.p-opt-sub{font-size:.7rem;color:#666;margin-top:2px}

/* Lobby */
.sec-ttl{font-size:.9rem;font-weight:700;color:#f0a500;margin-bottom:10px}
.members{background:#1e1e2e;border-radius:11px;overflow:hidden;margin-bottom:13px}
.mem{display:flex;align-items:center;padding:11px 13px;border-bottom:1px solid #252535}
.mem:last-child{border-bottom:none}
.mem-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f0a500,#d08800);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;margin-right:10px;font-size:.9rem;flex-shrink:0}
.mem-inf{flex:1;min-width:0}
.mem-nm{font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-sub{font-size:.68rem;color:#666;margin-top:1px}
.mem-dot{width:8px;height:8px;border-radius:50%;background:#38a169;flex-shrink:0}
.mem-dot.off{background:#333}

/* Chat */
.chat{background:#1e1e2e;border-radius:11px;overflow:hidden;margin-bottom:11px}
.chat-log{height:110px;overflow-y:auto;padding:8px 10px}
.chat-msg{margin-bottom:5px;font-size:.78rem;line-height:1.4}
.chat-nick{font-weight:700;color:#f0a500}
.chat-txt{color:#bbb}
.chat-row{display:flex;padding:5px;gap:5px;border-top:1px solid #252535}
.chat-row .fi{flex:1;padding:8px 10px;font-size:.84rem;max-width:none}
.chat-send{padding:8px 12px;background:#f0a500;border:none;border-radius:7px;color:#000;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;font-size:.84rem}

/* Difficulty */
.diff-row{display:flex;gap:7px;margin-bottom:15px}
.diff-btn{flex:1;padding:9px;border:2px solid #2a2a3a;border-radius:9px;background:transparent;color:#666;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;font-size:.88rem}
.diff-btn.on.easy{border-color:#38a169;color:#38a169;background:#0b1e13}
.diff-btn.on.medium{border-color:#f0a500;color:#f0a500;background:#1e1600}
.diff-btn.on.hard{border-color:#e53e3e;color:#e53e3e;background:#1e0a0a}

/* Game cards */
.g-card{background:#1e1e2e;border:2px solid #2a2a3a;border-radius:13px;padding:14px;margin-bottom:11px;cursor:pointer;transition:all .2s}
.g-card.on{border-color:#f0a500;background:#1a1800}
.g-card-hdr{display:flex;align-items:center;margin-bottom:5px}
.g-icon{font-size:1.8rem;margin-right:9px}
.g-name{font-size:.98rem;font-weight:700}
.g-desc{font-size:.8rem;color:#888;margin-top:4px}

/* Setup */
.setup-sec{background:#1e1e2e;border-radius:11px;padding:14px;margin-bottom:11px}
.setup-ttl{font-size:.87rem;font-weight:700;color:#f0a500;margin-bottom:10px}
.members-preview{background:#252535;border-radius:9px;padding:10px;margin-bottom:11px}
.mp-row{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid #2a2a3a;font-size:.82rem;gap:8px}
.mp-row:last-child{border-bottom:none}
.mp-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f0a500,#d08800);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:.75rem;flex-shrink:0}
.mp-nm{flex:1;font-weight:500}
.mp-age{color:#888;font-size:.76rem}
.mp-grp{font-size:.68rem;padding:2px 6px;border-radius:10px;background:#1a2e4e;color:#7eb8ff}
.mp-grp.teen{background:#2e1a4e;color:#bf7eff}
.mp-grp.youth{background:#1a3e2a;color:#7eff7e}
.mp-grp.adult{background:#3e2a1a;color:#ffbf7e}
.stage-item{display:flex;align-items:flex-start;background:#252535;border-radius:8px;padding:9px;margin-bottom:7px;gap:8px}
.stage-num{width:26px;height:26px;border-radius:50%;background:#f0a500;color:#000;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;flex-shrink:0;margin-top:1px}
.stage-inf{flex:1;min-width:0}
.stage-top{font-size:.76rem;color:#999;margin-bottom:4px}
.stage-top strong{color:#f0a500}
.clue-fi{width:100%;background:#1e1e2e;border:1px solid #2a2a3a;border-radius:6px;padding:6px 9px;color:#e8e8f0;font-size:.84rem;outline:none;font-family:inherit}
.clue-fi:focus{border-color:#f0a500}

/* Game controls bar */
.rg-ctrl{display:flex;gap:7px;padding:7px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);justify-content:flex-end;flex-shrink:0}
.ctrl-btn{padding:5px 12px;border:1.5px solid rgba(255,255,255,.18);border-radius:7px;background:transparent;color:#aaa;font-size:.76rem;cursor:pointer;font-family:inherit;transition:all .15s}
.ctrl-btn:active{transform:scale(.95)}
.ctrl-stop{border-color:rgba(229,62,62,.5);color:#fc8181}
.ctrl-stop:hover{background:rgba(229,62,62,.12)}
.ctrl-forfeit{border-color:rgba(240,165,0,.4);color:#f0a500}
.ctrl-forfeit:hover{background:rgba(240,165,0,.1)}

/* Pause overlay */
.pause-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;z-index:2500;backdrop-filter:blur(4px)}
.pause-box{background:#1a1a2e;border:2px solid rgba(240,165,0,.4);border-radius:20px;padding:32px 28px;text-align:center;max-width:300px;width:90%;box-shadow:0 0 40px rgba(240,165,0,.15)}
.pause-icon{font-size:3rem;margin-bottom:8px}
.pause-ttl{font-size:1.3rem;font-weight:700;color:#f0a500;margin-bottom:6px;text-shadow:0 0 16px rgba(240,165,0,.5)}
.pause-sub{font-size:.84rem;color:#888;margin-bottom:18px;font-family:'Nanum Gothic',sans-serif}

/* Hint button & reveal */
.hint-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 6px}
.hint-btn-sm{padding:5px 11px;background:rgba(240,165,0,.1);border:1.5px solid rgba(240,165,0,.4);border-radius:8px;color:#f0a500;font-size:.76rem;cursor:pointer;font-family:inherit;transition:all .15s}
.hint-btn-sm:active{transform:scale(.95);background:rgba(240,165,0,.2)}
.hint-reveal{font-size:.84rem;color:#56E39F;background:rgba(86,227,159,.1);border:1.5px solid rgba(86,227,159,.3);border-radius:8px;padding:4px 10px;font-family:'Nanum Gothic',sans-serif}
.hint-reveal b{font-size:1.05rem;letter-spacing:2px}
.hint-exhausted{font-size:.76rem;color:#555;font-family:'Nanum Gothic',sans-serif}

/* Game screen */
.rg-wrap{flex:1;padding:11px 14px;max-width:480px;margin:0 auto;width:100%;overflow-y:auto}
.rg-prog-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.prog-bar{flex:1;height:5px;background:#1e1e2e;border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#f0a500,#d08800);border-radius:3px;transition:width .5s}
.prog-txt{font-size:.74rem;color:#666}
.timer{text-align:center;font-size:1.65rem;font-weight:700;color:#f0a500;font-family:monospace;margin-bottom:10px}
.timer.warn,.badge-r.warn{color:#fff;background:#c53030;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Phase complete / next button area */
.phase-complete-box{text-align:center;padding:14px 8px}
.phase-complete-icon{font-size:2.2rem;margin-bottom:6px;animation:bounceIcon .9s ease-in-out infinite alternate;display:block}
.phase-complete-ttl{font-size:1.05rem;font-weight:700;color:#56E39F;margin-bottom:10px;text-shadow:0 0 12px rgba(86,227,159,.4)}
.full-pw-box{display:inline-block;background:rgba(240,165,0,.15);border:2px solid #f0a500;border-radius:14px;padding:12px 24px;font-size:2rem;font-weight:700;font-family:monospace;color:#f0a500;letter-spacing:8px;margin:8px 0 12px;text-shadow:0 0 16px rgba(240,165,0,.45);box-shadow:0 0 20px rgba(240,165,0,.15)}

/* Setup dynamic form */
.setup-sub-ttl{font-size:.8rem;font-weight:700;color:#ccc;margin:12px 0 7px;padding-top:10px;border-top:1px solid #252535}
.muted-sm{font-weight:400;color:#555;font-size:.72rem;margin-left:4px}
.puz-block{background:#252535;border-radius:9px;padding:10px 11px;margin-bottom:8px}
.puz-player-badge{font-size:.78rem;font-weight:700;color:#f0a500;margin-bottom:7px}

/* Lobby — setup status & ready button */
.lob-setup-status{margin-bottom:4px}
.lob-setup-done{background:rgba(86,227,159,.12);border:1.5px solid #56E39F;border-radius:9px;padding:9px 13px;font-size:.84rem;color:#56E39F;text-align:center;font-weight:700}
.lob-setup-pending{background:rgba(240,165,0,.1);border:1.5px solid rgba(240,165,0,.5);border-radius:9px;padding:9px 13px;font-size:.84rem;color:#f0a500;text-align:center}
.btn.ready-on{background:linear-gradient(135deg,#56E39F,#38a169);color:#000;box-shadow:0 4px 18px rgba(86,227,159,.35)}
#btn-start:disabled{background:rgba(255,255,255,.08);color:#555;box-shadow:none;border:1.5px solid rgba(255,255,255,.1)}

/* Auto-puzzle info box (setup screen) */
.auto-info-box{background:rgba(79,195,247,.08);border:1px solid rgba(79,195,247,.25);border-radius:9px;padding:9px 12px;font-size:.78rem;color:#7ec8ff;margin-bottom:10px;font-family:'Nanum Gothic',sans-serif}

/* Digit assignment preview (setup screen) */
.digit-assign-preview{margin-top:4px}
.digit-assign-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.digit-assign-chip{background:rgba(168,85,247,.12);border:1.5px solid rgba(168,85,247,.35);border-radius:10px;padding:7px 11px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px}
.dac-pos{font-size:.64rem;color:#9d6fe8;font-family:'Nanum Gothic',sans-serif}
.dac-player{font-size:.76rem;color:#e8e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}

/* Stage cards */
.stg-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;padding:16px;margin-bottom:11px;animation:fadeUpIn .35s ease}
.loc-card{border-color:rgba(79,195,247,.5);background:rgba(79,195,247,.07);box-shadow:0 0 24px rgba(79,195,247,.12)}
.pw-card{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.07);box-shadow:0 0 24px rgba(168,85,247,.12)}
.pw-card.wait{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03);box-shadow:none}
.stg-lbl{font-size:.74rem;color:#aaa;font-weight:400;margin-bottom:12px;letter-spacing:.3px;font-family:'Nanum Gothic',sans-serif}
.stg-loc{font-size:1.05rem;line-height:1.65;color:#f0d070;background:rgba(240,165,0,.1);border-radius:9px;padding:12px 13px;margin-bottom:14px;border-left:3px solid #f0a500}
.pw-inp-row{display:flex;gap:8px;align-items:stretch}
.pw-inp{flex:1;max-width:none;font-size:1rem;letter-spacing:2px}
.pw-sub{width:auto;max-width:none;padding:12px 16px;flex-shrink:0}
.done-stg{display:flex;align-items:center;gap:8px;background:rgba(86,227,159,.12);border:1.5px solid #56E39F;border-radius:9px;padding:9px 12px;margin-bottom:7px;font-size:.84rem;color:#56E39F;box-shadow:0 0 10px rgba(86,227,159,.2)}
.done-stg span{color:#aaa}
.wait-dots{display:flex;justify-content:center;gap:8px;padding:12px 0}
.wait-dots span{width:10px;height:10px;border-radius:50%;background:#7c5cbf;animation:wdot 1.2s infinite ease-in-out}
.wait-dots span:nth-child(2){animation-delay:.2s}
.wait-dots span:nth-child(3){animation-delay:.4s}
@keyframes wdot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* Team solve progress (location phase) */
.team-solve-prog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
.tsp-item{font-size:.78rem;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:#666;transition:all .35s;font-family:'Nanum Gothic',sans-serif}
.tsp-item.done{border-color:#56E39F;background:rgba(86,227,159,.15);color:#56E39F;box-shadow:0 0 8px rgba(86,227,159,.25)}

/* Location hint revealed (in password phase) */
.loc-hint-box{font-size:.92rem;color:#f0d070;background:rgba(240,165,0,.1);border-radius:9px;padding:10px 13px;margin-bottom:12px;border-left:3px solid #f0a500}

/* Digit slots */
.digit-slots-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:8px}
.digit-slot{min-width:54px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 5px;text-align:center;transition:all .4s}
.digit-slot.revealed{border-color:#56E39F;background:rgba(86,227,159,.2);box-shadow:0 0 14px rgba(86,227,159,.4)}
.digit-slot.hidden{border-color:rgba(255,255,255,.1)}
.digit-slot-pos{font-size:.62rem;color:#666;margin-bottom:3px;font-family:'Nanum Gothic',sans-serif}
.digit-slot-val{font-size:1.5rem;font-weight:700;font-family:monospace;color:#e8e8f0;line-height:1}
.digit-slot.revealed .digit-slot-val{color:#56E39F}
.digit-slot.hidden .digit-slot-val{color:#333}
.digit-slot-who{font-size:.6rem;color:#555;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:54px;font-family:'Nanum Gothic',sans-serif}

/* My digit puzzle block */
.my-digit-block{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;margin-bottom:10px}
.my-digit-pos{font-size:.76rem;color:#aaa;margin-bottom:7px;font-family:'Nanum Gothic',sans-serif}
.my-digit-revealed{display:flex;align-items:center;gap:10px;font-size:.88rem;color:#56E39F;background:rgba(86,227,159,.12);border-radius:8px;padding:10px 13px;border:1.5px solid rgba(86,227,159,.3)}
.digit-big{font-size:2rem;font-weight:700;font-family:monospace;color:#56E39F;text-shadow:0 0 12px rgba(86,227,159,.5)}

/* Question box */
.puz-q-box{font-size:.96rem;line-height:1.75;color:#e8e8f0;background:rgba(79,195,247,.07);border-radius:9px;padding:12px 14px;border-left:3px solid #4fc3f7;font-family:'Nanum Gothic',sans-serif}

/* Team progress */
.team-prog{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tp-item{display:flex;align-items:center;gap:5px;background:#1e1e2e;border-radius:20px;padding:4px 10px;font-size:.76rem;border:1.5px solid #2a2a3a;transition:all .3s}
.tp-item.solved{border-color:#38a169;background:#0b1e13}
.tp-item.mine{border-color:#f0a500}
.tp-dot{width:7px;height:7px;border-radius:50%;background:#444}
.tp-dot.solved{background:#38a169}
.tp-dot.mine{background:#f0a500}

/* Puzzle card */
.puz-card{background:#1e1e2e;border:2px solid #2a2a3a;border-radius:15px;padding:16px;margin-bottom:11px}
.puz-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:11px}
.puz-badge.math{background:#1a2e4e;color:#7eb8ff}
.puz-badge.logic{background:#2a1a4e;color:#bf7eff}
.puz-badge.riddle{background:#1a3e2a;color:#7eff7e}
.puz-badge.nonsense{background:#3e2a1a;color:#ffbf7e}
.puz-badge.code{background:#2e2e1a;color:#ffff7e}
.puz-badge.ox{background:#1a2a3e;color:#7ec8ff}
.puz-q{font-size:1rem;line-height:1.75;margin-bottom:14px;white-space:pre-wrap}
.solved-overlay{text-align:center;padding:16px;color:#38a169;font-size:1rem;font-weight:700}

/* Answer styles */
.ans-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ans-opt{padding:11px 8px;background:#252535;border:2px solid #2a2a3a;border-radius:9px;color:#e8e8f0;font-size:.85rem;cursor:pointer;text-align:center;font-family:inherit;transition:all .16s}
.ans-opt.ok{border-color:#38a169;background:#0b1e13;color:#7eff7e;pointer-events:none}
.ans-opt.no{border-color:#e53e3e;background:#1e0a0a;color:#ff7e7e}
.ans-inp-row{display:flex;gap:7px}
.ans-inp-row .fi{flex:1;max-width:none}
.ans-inp-row .btn{width:auto;max-width:none;padding:12px 14px}
.ox-row{display:flex;gap:12px;justify-content:center;margin-top:8px}
.ox-btn{flex:1;max-width:130px;height:80px;border:2px solid;border-radius:16px;font-size:2.5rem;cursor:pointer;transition:all .16s;background:transparent}
.ox-btn.ox-o{border-color:#38a169;background:#0b1e13}
.ox-btn.ox-x{border-color:#e53e3e;background:#1e0a0a}
.ox-btn:active{transform:scale(.94)}
.order-wrap{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:10px}
.order-item{padding:10px 16px;background:#252535;border:2px solid #2a2a3a;border-radius:9px;color:#e8e8f0;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .16s}
.order-item.tapped{border-color:#f0a500;background:#1e1a0e;color:#f0a500}
.order-prev{font-size:.78rem;color:#888;text-align:center;margin-bottom:9px;min-height:18px}
.hc-meter{text-align:center;font-size:1.7rem;font-weight:700;padding:10px;background:#252535;border-radius:10px;margin-bottom:9px;transition:color .3s}
.hc-hist{max-height:72px;overflow-y:auto;margin-bottom:9px}
.hc-row{font-size:.76rem;color:#666;padding:2px 0;border-bottom:1px solid #252535}
.hint-sec{margin-top:10px;padding-top:10px;border-top:1px solid #252535}
.hint-btn{background:transparent;border:1px solid #3a3a4a;color:#666;padding:6px 12px;border-radius:7px;font-size:.78rem;cursor:pointer;font-family:inherit}
.hint-body{font-size:.84rem;color:#aaa;margin-top:7px;padding:8px 11px;background:#1e1a00;border-radius:7px;border-left:3px solid #f0a500}

/* Password reveal */
.pw-sec{background:#1e1e2e;border:2px solid #2a2a3a;border-radius:13px;padding:13px;margin-bottom:11px}
.pw-lbl{font-size:.78rem;color:#999;margin-bottom:7px}
.pw-digits{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pw-d{width:42px;height:50px;background:#252535;border:2px solid #2a2a3a;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;font-family:monospace;transition:all .4s}
.pw-d.rev{border-color:#38a169;background:#0b1e13;color:#7eff7e}
.pw-d.lock{color:#252535;font-size:1rem}
.extra-pw{margin-top:9px;padding-top:9px;border-top:1px solid #252535;font-size:.88rem;color:#f0a500}

/* Clue cards */
.clue-card{background:#1e1e2e;border:2px solid #2a2a3a;border-radius:11px;padding:12px;margin-bottom:9px}
.clue-card.rev{border-color:#38a169}
.clue-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.clue-st{font-size:.7rem;padding:2px 8px;border-radius:20px;background:#252535;color:#666}
.clue-st.rev{background:#0b1e13;color:#38a169}

/* Results */
.res-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;text-align:center}
.res-icon{font-size:4.5rem;margin-bottom:11px;display:block;animation:bounceIcon .9s ease-in-out infinite alternate}
.res-title{font-size:1.8rem;font-weight:700;color:#f0a500;margin-bottom:5px;text-shadow:0 0 20px rgba(240,165,0,.5)}
.res-sub{font-size:.88rem;color:#888;margin-bottom:20px;font-family:'Nanum Gothic',sans-serif}
.sb{width:100%;max-width:360px;background:#1e1e2e;border-radius:11px;overflow:hidden;margin-bottom:18px}
.sb-row{display:flex;align-items:center;padding:10px 13px;border-bottom:1px solid #252535}
.sb-row:last-child{border-bottom:none}
.sb-rank{width:26px;font-weight:700;color:#666;font-size:.88rem}
.sb-rank.g{color:#f0a500}.sb-rank.s{color:#aaa}.sb-rank.b{color:#cd7f32}
.sb-name{flex:1;font-size:.88rem}
.sb-sc{font-weight:700;color:#f0a500;font-size:.88rem}

/* Toast / Notif */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:9px;font-weight:700;font-size:.92rem;z-index:1000;animation:tIn .2s ease;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center}
.toast.ok{background:#38a169;color:#fff}
.toast.err{background:#e53e3e;color:#fff}
.toast.info{background:#1a3050;color:#7eb8ff;border:1px solid #7eb8ff}
@keyframes tIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.notif{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:#1e1e2e;border:1.5px solid #f0a500;border-radius:9px;padding:9px 15px;font-size:.84rem;z-index:2000;animation:nIn .2s ease;max-width:90vw;text-align:center}
@keyframes nIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:3000}
.spin{width:42px;height:42px;border:4px solid #252535;border-top-color:#f0a500;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Utils */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}
.muted{color:#666;font-size:.8rem}
.tc{text-align:center}
hr.div{border:none;border-top:1px solid #252535;margin:13px 0}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:2px}