:root{--pri:#ff5d8f;--pri2:#ff9a3c;--ink:#2b2350;--muted:#6c6890;--card:#ffffffee;--ok:#2ec4b6;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#6ec8ff;color:var(--ink);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{position:fixed;inset:0}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--sat)) 12px calc(12px + var(--sab));z-index:20;overflow:auto;touch-action:pan-y}
.screen.dim{background:#20184a66;backdrop-filter:blur(3px)}
#home{background:radial-gradient(circle at 20% 10%,#fff6 0,transparent 40%),linear-gradient(180deg,#7fd3ff 0%,#b8e8ff 55%,#ffe3f1 100%)}
.card{background:var(--card);border-radius:24px;padding:22px 20px;width:min(420px,100%);box-shadow:0 12px 40px #2b235033,0 2px 0 #fff inset;text-align:center;margin:auto}
.home-card .logo{font-size:44px;line-height:1}
h1{margin:6px 0 4px;font-size:26px;letter-spacing:1px}
h2{margin:0 0 12px;font-size:22px}
.badge{display:inline-block;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:14px;border-radius:8px;padding:2px 7px;vertical-align:middle}
.sub{margin:0 0 14px;color:var(--muted);font-size:14px}
.field{display:block;text-align:left;margin-bottom:12px}
.field span{font-size:13px;color:var(--muted);font-weight:600}
input{width:100%;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid #e3defa;background:#fff;color:var(--ink);outline:none;touch-action:manipulation;-webkit-user-select:text;user-select:text}
input:focus{border-color:var(--pri)}
.row{display:flex;gap:8px}
.row input{text-transform:uppercase;letter-spacing:4px;text-align:center;font-weight:700}
.btn{font:inherit;font-weight:700;font-size:16px;border:0;border-radius:14px;padding:11px 16px;background:#efeaff;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:transform .08s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 16px #ff5d8f55}
.btn.big{display:block;width:100%;font-size:19px;padding:14px;margin:8px 0}
.btn.small{font-size:14px;padding:8px 12px;border-radius:12px}
.btn.ghost{background:#ffffffaa}
.btn.link{background:none;color:var(--muted);font-weight:500;font-size:14px;text-decoration:underline;margin-top:6px}
.card .btn:not(.big):not(.link){display:block;width:100%;margin:8px 0}
.or{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:10px 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:#ddd6f5}
.err{color:#e63946;min-height:1.2em;font-size:14px;margin:8px 0 0}
.help{text-align:left;font-size:13px;color:var(--muted);margin-top:8px}
.help summary{cursor:pointer;font-weight:700}
.help ul{padding-left:18px;margin:6px 0}
kbd{background:#efeaff;border-radius:5px;padding:1px 5px;font-size:12px;border:1px solid #d9d2f7}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}
/* 大廳 */
.panel{position:fixed;z-index:15;top:calc(10px + var(--sat));right:calc(10px + var(--sar));width:min(320px,calc(100% - 20px));background:var(--card);border-radius:20px;padding:12px 14px;box-shadow:0 10px 30px #2b235033;touch-action:manipulation}
.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lobby-actions{display:flex;gap:6px}
.room-code{font-size:30px;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.plist{list-style:none;margin:8px 0;padding:0;max-height:min(34vh,260px);overflow:auto;touch-action:pan-y;display:flex;flex-wrap:wrap;gap:6px}
.plist li{display:flex;align-items:center;gap:6px;background:#f5f2ff;border-radius:999px;padding:4px 10px 4px 4px;font-size:14px;font-weight:600}
.plist .dot{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #0003;flex:none}
.plist li.off{opacity:.45}
.plist .tag{font-size:11px;background:#ffd23f;border-radius:6px;padding:0 4px}
.panel.collapsed #lobbyBody{display:none}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hud-left{position:absolute;top:calc(10px + var(--sat));left:calc(10px + var(--sal));display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.timer{font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 0 #2b2350,0 0 12px #2b235066;font-variant-numeric:tabular-nums;letter-spacing:1px}
.chip{background:#ffffffdd;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}
.chip.warn{background:#ffd23f}
.rankbox{position:absolute;top:calc(10px + var(--sat));right:calc(58px + var(--sar));background:#ffffffcc;border-radius:14px;padding:6px 8px;font-size:13px;min-width:150px;max-width:200px}
.rankbox .r{display:flex;align-items:center;gap:5px;padding:1px 0;white-space:nowrap;overflow:hidden}
.rankbox .r.me{font-weight:900}
.rankbox .r .n{flex:1;overflow:hidden;text-overflow:ellipsis}
.rankbox .r .d{width:10px;height:10px;border-radius:50%;flex:none}
.progress{position:absolute;left:50%;transform:translateX(-50%);top:calc(14px + var(--sat));width:min(38vw,360px);height:18px}
.progress .track{position:absolute;left:0;right:0;top:7px;height:5px;border-radius:3px;background:#ffffffaa}
.progress .flag{position:absolute;right:-20px;top:-3px;font-size:16px}
#dots .pd{position:absolute;top:2px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid #fff;transition:left .45s linear}
#dots .pd.me{width:18px;height:18px;margin-left:-9px;top:0;z-index:2;box-shadow:0 0 0 2px #2b2350}
.menu-btn{position:absolute;top:calc(10px + var(--sat));right:calc(10px + var(--sar));pointer-events:auto;font-size:18px;width:40px;height:40px;padding:0}
.net{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(12px + var(--sab));background:#2b2350dd;color:#fff;padding:6px 14px;border-radius:999px;font-size:13px}
.countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:18;pointer-events:none;font-size:min(30vw,180px);font-weight:900;color:#fff;-webkit-text-stroke:6px #2b2350;paint-order:stroke fill;text-shadow:0 8px 0 #2b235055}
.countdown.pop{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(1.8);opacity:0}60%{transform:scale(.95);opacity:1}100%{transform:scale(1)}}
.banner{position:fixed;z-index:17;left:50%;top:22%;transform:translateX(-50%);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;padding:14px 26px;border-radius:20px;font-size:22px;font-weight:900;text-align:center;box-shadow:0 10px 30px #ff5d8f66;pointer-events:none;white-space:nowrap}
.banner small{display:block;font-size:14px;font-weight:600;opacity:.9}
#toasts{position:fixed;z-index:25;left:calc(10px + var(--sal));bottom:calc(120px + var(--sab));display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:70vw}
.toast{background:#2b2350cc;color:#fff;border-radius:12px;padding:6px 12px;font-size:13px;animation:tin .25s ease-out}
@keyframes tin{from{transform:translateX(-20px);opacity:0}}
.rlist{list-style:none;padding:0;margin:0 0 12px;max-height:46vh;overflow:auto;touch-action:pan-y;text-align:left}
.rlist li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;margin-bottom:4px;background:#f5f2ff;font-weight:700}
.rlist li.me{outline:3px solid var(--pri)}
.rlist .pl{width:30px;text-align:center;font-size:18px}
.rlist .d{width:14px;height:14px;border-radius:50%;flex:none}
.rlist .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist .tm{font-variant-numeric:tabular-nums}
.rlist .dnf{color:var(--muted);font-weight:500;font-size:13px}
/* 觸控 */
#touch{position:fixed;inset:0;z-index:12;pointer-events:none}
#stickBase{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#ffffff40;border:3px solid #ffffff99;left:calc(90px + var(--sal));bottom:auto;top:calc(100% - 100px - var(--sab));opacity:.55;transition:opacity .15s}
#stickBase.active{opacity:1}
#stickKnob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fffffff0;box-shadow:0 3px 10px #0003}
#btnJump{position:absolute;pointer-events:auto;right:calc(28px + var(--sar));bottom:calc(30px + var(--sab));width:92px;height:92px;border-radius:50%;border:4px solid #fff;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:26px;font-weight:900;font-family:inherit;box-shadow:0 6px 18px #0004;touch-action:none}
#btnJump.down{transform:scale(.9);filter:brightness(1.1)}
@media (max-height:500px){
  .card{padding:14px 16px}.home-card .logo{display:none}h1{font-size:22px}.sub{margin-bottom:8px}
  .btn.big{padding:10px;margin:5px 0}
  .timer{font-size:22px}
  .plist{max-height:28vh}
  .panel{width:min(300px,45vw)}
}
@media (max-width:600px){
  .rankbox{display:none!important}
  .progress{top:calc(100px + var(--sat));width:62vw}
  .panel{left:50%;right:auto;transform:translateX(-50%)}
}
@media (max-width:600px) and (orientation:portrait){ .panel{top:auto;bottom:calc(140px + var(--sab))} }