:root{
  --bg:#0f1226; --panel:#191d3a; --line:#2c3159; --ink:#eef0ff; --sub:#a8adda; --faint:#6d73a6;
  --p1:#5ad1ff; --p2:#ff8ac2; --gold:#ffd23f; --ok:#57e39a; --hot:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); min-height:100vh; padding-bottom:30px;
  background:radial-gradient(circle at 25% 5%, rgba(90,209,255,.14), transparent 45%),
             radial-gradient(circle at 80% 20%, rgba(255,138,194,.13), transparent 45%), var(--bg);}
.wrap{max-width:520px; margin:0 auto; padding:0 16px;}
.top{text-align:center; padding:38px 0 4px;}
.top h1{font-size:34px; font-weight:900; margin:0; background:linear-gradient(90deg,#5ad1ff,#ff8ac2); -webkit-background-clip:text; background-clip:text; color:transparent;}
.top .tg{color:var(--sub); font-size:14px; margin-top:8px; line-height:1.8;}

.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; margin-top:20px;}
.big-btn{width:100%; font-size:17px; font-weight:900; color:#0f1226; background:linear-gradient(90deg,#5ad1ff,#8fb4ff); border:0; border-radius:14px; padding:16px; cursor:pointer; margin-top:10px;}
.big-btn.pink{background:linear-gradient(90deg,#ff8ac2,#ffb0d6)}
.big-btn:disabled{opacity:.5}
.orbar{display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; margin:16px 0;}
.orbar::before,.orbar::after{content:"";flex:1;height:1px;background:var(--line)}
.joinrow{display:flex; gap:9px;}
.joinrow input{flex:1; font:inherit; font-size:20px; font-weight:800; text-align:center; letter-spacing:4px; text-transform:uppercase; background:#12152c; border:1.5px solid var(--line); color:var(--ink); border-radius:12px; padding:13px; outline:none;}
.joinrow button{font:inherit; font-weight:800; background:var(--p2); color:#0f1226; border:0; border-radius:12px; padding:0 20px; cursor:pointer;}

/* 로비 */
.lobby{text-align:center;}
.codebox{font-size:44px; font-weight:900; letter-spacing:8px; color:var(--gold); margin:10px 0; background:#12152c; border:2px dashed var(--line); border-radius:14px; padding:16px;}
.share{display:flex; gap:9px; margin-top:10px;}
.share button{flex:1; font:inherit; font-weight:800; background:var(--panel); border:1.5px solid var(--line); color:var(--ink); border-radius:12px; padding:13px; cursor:pointer;}
.waiting{color:var(--sub); font-size:15px; margin-top:16px;}
.dots::after{content:"";animation:dots 1.4s infinite}
@keyframes dots{0%{content:""}33%{content:"·"}66%{content:"··"}100%{content:"···"}}

/* 라운드 진행 */
.round{text-align:center;}
.rno{color:var(--faint); font-size:13px; letter-spacing:1px;}
.prompt{font-size:26px; font-weight:900; margin:14px 0 6px; line-height:1.4;}
.ansin{width:100%; font:inherit; font-size:22px; font-weight:800; text-align:center; background:#12152c; border:2px solid var(--line); color:var(--ink); border-radius:14px; padding:16px; outline:none; margin-top:16px;}
.ansin:focus{border-color:var(--p1)}
.mini{color:var(--faint); font-size:12.5px; margin-top:10px; line-height:1.6;}
.vs{color:var(--sub); font-size:14px;}

/* 리빌 */
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.reveal{animation:pop .5s; text-align:center;}
.answers{display:flex; gap:10px; margin:14px 0; align-items:stretch;}
.ans{flex:1; background:#12152c; border:1.5px solid var(--line); border-radius:14px; padding:16px 10px;}
.ans .who{font-size:11px; font-weight:800; margin-bottom:6px;}
.ans.me .who{color:var(--p1)} .ans.you .who{color:var(--p2)}
.ans .val{font-size:20px; font-weight:900; word-break:break-all;}
.vsmid{align-self:center; font-size:20px; color:var(--faint); font-weight:900;}
.scorering{font-size:64px; font-weight:900; line-height:1; margin:8px 0;}
.verdict{font-size:16px; color:var(--ink); font-weight:700; margin-top:4px;}
.common{color:var(--ok); font-size:13.5px; margin-top:6px;}
.telepathy{margin-top:18px; background:#12152c; border:1px solid var(--line); border-radius:14px; padding:14px;}
.telepathy .lab{font-size:12px; color:var(--faint); font-weight:800;}
.telepathy .val{font-size:34px; font-weight:900; color:var(--gold);}
.hist{display:flex; gap:5px; justify-content:center; margin-top:8px; flex-wrap:wrap;}
.hist span{font-size:11px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 7px; color:var(--sub);}

.err{color:var(--hot); text-align:center; font-size:14px; padding:12px;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
.foot{margin-top:30px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.8;}
.hidden{display:none}
a{color:var(--p1)}