:root{--bg:#171331;--bg2:#1F1A3E;--surf:#272150;--line:#3A3370;--text:#F5F3FF;--muted:#9C96CF;
    --c1:#4ECDC4;--c2:#7BD389;--c3:#FFC93C;--c4:#FF9F45;--c5:#FF6B6B;--c6:#EE5A6F;
    --coral:#FF6B6B;--amber:#FFC93C;--mint:#4ECDC4;--sky:#5B8DEF;--violet:#A78BFA;--danger:#FF5470;--ease:cubic-bezier(.22,.61,.36,1);}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;margin:0;}
  body{background:radial-gradient(90% 60% at 20% 0%,rgba(167,139,250,.18),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(78,205,196,.16),transparent 60%),var(--bg);
    color:var(--text);font-family:"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;overflow:hidden;user-select:none;}
  #app{position:fixed;inset:0;}
  .screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:22px;}
  .screen.active{display:flex;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--text);outline-offset:2px;}
  .logo{position:relative;display:flex;gap:6px;margin-bottom:6px;}
  .logo .tile{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:#1a1633;box-shadow:0 8px 0 rgba(0,0,0,.22),0 12px 26px rgba(0,0,0,.35);}
  .logo .t1{background:var(--coral);transform:rotate(-7deg);}.logo .t2{background:var(--mint);transform:rotate(5deg) translateY(4px);}
  .logo .t3{background:var(--amber);transform:rotate(-4deg);}.logo .t4{background:var(--violet);transform:rotate(7deg) translateY(4px);}
  .logo .em{position:absolute;font-size:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));animation:float 3.2s ease-in-out infinite;}
  .logo .e1{top:-18px;left:-12px;}.logo .e2{top:-24px;right:-4px;animation-delay:.6s;}.logo .e3{bottom:-16px;left:34%;animation-delay:1.1s;}.logo .e4{bottom:-12px;right:-14px;animation-delay:1.6s;}
  @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(8deg)}}
  .logo-cap{font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--muted);margin:18px 0 2px;}
  .logo-sub{font-size:12px;color:var(--muted);margin-bottom:24px;text-align:center;line-height:1.5;}
  .btn{border:none;border-radius:16px;padding:16px 30px;font-size:17px;font-weight:900;color:#1a1633;box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .1s var(--ease),box-shadow .1s;}
  .btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.28);}
  .btn.play{background:linear-gradient(135deg,var(--mint),var(--sky));color:#0e1030;min-width:220px;font-size:20px;padding:20px;}
  .btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border:1.5px solid var(--line);font-weight:800;font-size:14px;padding:12px 22px;}
  .home-actions{display:flex;flex-direction:column;gap:14px;align-items:center;}
  .topbtns{position:fixed;top:14px;right:14px;z-index:60;display:flex;gap:8px;}
  .icon-btn{width:46px;height:46px;border-radius:50%;background:var(--surf);border:1.5px solid var(--line);color:var(--text);font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .1s;}
  .icon-btn:active{transform:scale(.9);}.icon-btn.off{opacity:.5;}
  .userbar{position:fixed;top:18px;left:14px;z-index:55;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--muted);}
  .userbar .logout{background:var(--surf);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:6px 10px;font-size:11px;font-weight:800;}
  /* auth */
  .auth-card{background:var(--bg2);border:1.5px solid var(--line);border-radius:22px;padding:26px 22px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
  .auth-tab{display:flex;gap:6px;background:var(--surf);border-radius:12px;padding:4px;margin-bottom:4px;}
  .auth-tab button{flex:1;border:none;background:transparent;color:var(--muted);font-weight:800;font-size:14px;padding:10px;border-radius:9px;}
  .auth-tab button.on{background:var(--violet);color:#1a1633;}
  .fld{display:flex;flex-direction:column;gap:5px;}
  .fld label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.04em;}
  .fld input{background:var(--surf);border:1.5px solid var(--line);color:var(--text);font-size:15px;font-weight:700;padding:12px;border-radius:12px;outline:none;font-family:inherit;}
  .fld input:focus{border-color:var(--violet);}
  .auth-msg{font-size:12.5px;font-weight:800;min-height:16px;text-align:center;color:var(--danger);}
  .auth-msg.ok{color:var(--mint);}
  .auth-btn{background:linear-gradient(135deg,var(--violet),var(--sky));border:none;color:#12122e;font-weight:900;font-size:16px;padding:14px;border-radius:14px;margin-top:4px;}
  /* levels */
  .head{position:absolute;top:18px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;}
  .head h2{font-size:15px;font-weight:900;letter-spacing:.14em;margin:0;}
  .back{position:absolute;top:14px;left:14px;background:var(--surf);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:9px 14px;font-weight:800;font-size:13px;z-index:56;}
  .levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:460px;margin-top:20px;}
  .lvl{background:var(--surf);border:1.5px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;transition:transform .12s var(--ease);position:relative;overflow:hidden;}
  .lvl:active{transform:scale(.95);}
  .lvl .ring{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:#1a1633;}
  .lvl .nm{font-size:12px;font-weight:800;margin-bottom:5px;}
  .lvl .sec{font-size:21px;font-weight:900;line-height:1;}.lvl .sec span{font-size:11px;font-weight:700;color:var(--muted);}
  .lvl .pts{margin-top:5px;font-size:10.5px;font-weight:800;color:var(--amber);}
  .levels-note{margin-top:16px;font-size:12px;color:var(--muted);text-align:center;line-height:1.6;max-width:420px;}
  /* play */
  #play{padding:0;}
  .rot-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);text-align:center;z-index:2;width:90%;}
  .board-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
  .board{width:min(88vw,420px);background:var(--bg2);border:1.5px solid var(--line);border-radius:24px;padding:18px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:11px;box-shadow:0 20px 50px rgba(0,0,0,.45);}
  .board.swap{animation:swap .45s var(--ease);}
  @keyframes swap{0%{opacity:0;transform:translateY(16px) scale(.96)}100%{opacity:1;transform:none}}
  .lives-row{display:flex;justify-content:space-between;align-items:center;width:100%;}
  .life-p{font-size:12.5px;font-weight:800;color:var(--muted);transition:.2s;}
  .life-p.cur{color:var(--text);text-shadow:0 0 10px rgba(255,255,255,.25);}
  .lvl-chip{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;}
  .turn-tag{font-size:13px;font-weight:900;letter-spacing:.1em;padding:6px 16px;border-radius:999px;}
  .need-box{text-align:center;}
  .need-lbl{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.1em;margin-bottom:2px;}
  .prev-word{font-size:15px;font-weight:800;color:var(--text);background:var(--surf);border-radius:10px;padding:6px 14px;display:inline-block;}
  .need-glyph{font-size:clamp(44px,14vw,68px);font-weight:900;line-height:1;letter-spacing:-.03em;margin-top:6px;}
  .need-alt{font-size:15px;font-weight:700;color:var(--muted);margin-top:2px;height:19px;}
  .field{display:flex;gap:8px;width:100%;}
  input.word{flex:1;min-width:0;background:var(--surf);border:2px solid var(--line);color:var(--text);font-size:22px;font-weight:800;text-align:center;padding:13px 10px;border-radius:14px;outline:none;font-family:inherit;transition:border-color .2s;}
  input.word:focus{border-color:var(--mint);}
  button.go{border:none;border-radius:14px;padding:0 22px;font-size:16px;font-weight:900;color:#10122e;background:linear-gradient(135deg,var(--mint),var(--sky));white-space:nowrap;transition:transform .1s;}
  button.go:active{transform:scale(.93);}
  .wrongc{font-size:12px;font-weight:800;color:var(--muted);height:15px;}
  .err{font-size:12.5px;font-weight:800;color:var(--danger);height:15px;text-align:center;}
  .timer{width:100%;}
  .timer .bar{height:10px;border-radius:999px;background:var(--surf);overflow:hidden;}
  .timer .fill{height:100%;width:100%;border-radius:999px;transform-origin:left;background:var(--mint);transition:transform .1s linear,background .3s;}
  .timer .fill.low{background:var(--danger);animation:pulseBar .5s infinite;}
  @keyframes pulseBar{0%,100%{opacity:1}50%{opacity:.55}}
  .timer .num{margin-top:5px;font-size:12px;font-weight:800;color:var(--muted);text-align:center;}
  .timer .num.low{color:var(--danger);font-size:14px;}
  .surr{background:none;border:none;color:var(--muted);font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px;}
  .toast{position:fixed;top:42%;left:50%;transform:translate(-50%,-50%) scale(.8);background:rgba(20,16,40,.96);border:1.5px solid var(--line);border-radius:16px;padding:16px 26px;font-size:16px;font-weight:900;color:var(--text);opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:70;text-align:center;line-height:1.5;}
  .toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
  /* result */
  #result .card{background:var(--bg2);border:1.5px solid var(--line);border-radius:24px;padding:30px 26px;max-width:360px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
  #result .trophy{font-size:52px;animation:pop .6s var(--ease);}
  @keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
  #result .win{font-size:26px;font-weight:900;}
  #result .earn{font-size:15px;font-weight:900;color:var(--amber);}
  #result .why{font-size:12.5px;color:var(--muted);line-height:1.6;}
  .name-row{font-size:13px;color:var(--muted);}
  .res-actions{display:flex;gap:10px;margin-top:6px;}
  .res-actions .btn{padding:13px 20px;font-size:14px;}
  .saved-msg{font-size:12px;font-weight:800;color:var(--mint);height:16px;}
  /* ranking / admin */
  .list{width:100%;max-width:440px;margin-top:16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:62vh;}
  .rank-row{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:12px 16px;}
  .rank-row .pos{font-size:16px;font-weight:900;width:32px;text-align:center;}
  .rank-row .nm{flex:1;font-weight:800;font-size:15px;}
  .rank-row .pt{font-weight:900;color:var(--amber);font-size:16px;}
  .rank-row.top1{border-color:var(--amber);background:linear-gradient(135deg,rgba(255,201,60,.16),var(--surf));}
  .empty{color:var(--muted);font-size:14px;margin-top:40px;text-align:center;line-height:1.7;}
  .foot{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .adm-gate{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;background:var(--bg2);border:1.5px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
  .adm-gate input{background:var(--surf);border:1.5px solid var(--line);color:var(--text);font-size:20px;font-weight:800;text-align:center;letter-spacing:.3em;padding:14px;border-radius:12px;outline:none;font-family:inherit;}
  .urow{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
  .urow .uinfo{flex:1;min-width:0;}
  .urow .un{font-weight:800;font-size:14px;}
  .urow .ue{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .urow.banned{opacity:.6;border-color:var(--danger);}
  .badge-ban{font-size:10px;font-weight:900;color:var(--danger);border:1px solid var(--danger);border-radius:6px;padding:2px 6px;margin-left:6px;}
  .ubtn{border:none;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:900;}
  .ubtn.ban{background:var(--danger);color:#fff;}
  .ubtn.unban{background:var(--mint);color:#12122e;}
  .ubtn.del{background:transparent;border:1px solid var(--line);color:var(--muted);}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}