/* 糖果相扑 — pastel candy UI. Zoom lock: touch-action on html/body + viewport meta + JS gesture guards. Base pieces copied from 糖弹对决. */
:root{--pink:#ff5fa2;--pink2:#ff8cc0;--yel:#ffd23f;--mint:#4fd8b8;--pur:#8a5cf6;--ink:#4a2142;--cream:#fff7fb;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--tip-acc:#ff5fa2;--tip-bg:#fff4f9}
html,body{margin:0;height:100%;overflow:hidden;position:fixed;inset:0;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#fdf3ff;color:var(--ink);-webkit-text-size-adjust:100%;
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
button,input{font:inherit;color:inherit;touch-action:manipulation}
input{-webkit-user-select:text;user-select:text}
#cv{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none}
.screen{position:fixed;inset:0;display:none;pointer-events:none;z-index:5}.screen.on{display:block}
.pe{pointer-events:auto}
.big{display:block;width:100%;padding:15px 12px;border:0;border-radius:20px;background:linear-gradient(#ff7cb4,#ff4f97);color:#fff;font-size:19px;font-weight:900;letter-spacing:.5px;
  box-shadow:0 5px 0 #d23377,0 10px 22px rgba(255,79,151,.35);text-shadow:0 2px 0 rgba(160,20,80,.35);cursor:pointer;transition:transform .08s}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #d23377}
.big:disabled{background:#e9cfdc;box-shadow:0 4px 0 #cfb0c0;color:#fff}
.big.sharebig{background:linear-gradient(#7fe3cf,#36c3a6);box-shadow:0 5px 0 #1f9c83,0 10px 22px rgba(40,180,150,.3);text-shadow:0 2px 0 rgba(10,100,80,.3);font-size:17px;padding:12px}
.chip{flex:0 0 auto;padding:8px 12px;border-radius:999px;border:2px solid #ffc0dc;background:#fff;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff}
.ib{width:40px;height:40px;border-radius:14px;border:0;background:rgba(255,255,255,.88);font-size:24px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(120,40,90,.15);padding:0}
.hint{margin:6px 2px 0;font-size:12px;color:#9a6a87;text-align:center}
.row{display:flex;align-items:center;gap:8px;margin:8px 0}.row>span{min-width:36px;font-weight:800;font-size:14px}
.row input{flex:1;min-width:0;padding:11px 14px;border-radius:14px;border:2px solid #ffc6df;background:#fff;font-size:16px;font-weight:700;outline:none}
.langb{position:fixed;top:calc(10px + var(--sat));right:10px;z-index:35;padding:6px 11px;border-radius:999px;border:2px solid #ffc0dc;background:rgba(255,255,255,.9);font-weight:900;font-size:13px;color:#b0507f}
body.s-arena .langb,body.s-lobby .langb{display:none}
/* ---------- home ---------- */
.logo{position:absolute;top:calc(34px + var(--sat));left:0;right:0;text-align:center}
.logo h1{margin:0;font-size:54px;font-weight:900;letter-spacing:4px;color:#fff;-webkit-text-stroke:3px #ff4f97;paint-order:stroke fill;
  text-shadow:0 5px 0 #c42c72,0 10px 24px rgba(196,44,114,.35);transform:rotate(-3deg);animation:bob 2.6s ease-in-out infinite}
.logo p{margin:10px 0 0;font-weight:800;font-size:14px;color:#a3487a}
@keyframes bob{50%{transform:rotate(-1deg) translateY(-4px)}}
.card{position:absolute;left:12px;right:12px;bottom:calc(14px + var(--sab));max-width:460px;margin:0 auto;padding:14px 14px 12px;border-radius:26px;background:rgba(255,255,255,.94);
  box-shadow:0 12px 30px rgba(140,40,100,.18);border:3px solid #ffe0ee}
.card .big{margin-top:10px}
.joinrow{display:flex;gap:8px;margin-top:10px}.joinrow input{flex:1;min-width:0;padding:9px 12px;border-radius:14px;border:2px dashed #ffc6df;background:#fff;font-size:16px;font-weight:800;letter-spacing:3px;text-transform:uppercase;outline:none}
/* ---------- lobby ---------- */
.topbar{position:absolute;top:calc(10px + var(--sat));left:10px;right:10px;display:flex;align-items:center;gap:6px}
.codepill{display:flex;flex-direction:column;align-items:center;padding:3px 12px;border-radius:16px;background:#fff;box-shadow:0 3px 0 #ffc0dc;line-height:1.1}
.codepill small{font-size:10px;font-weight:800;color:#b07595}.codepill b{font-size:24px;letter-spacing:4px;color:var(--pink)}
.qrbox{position:absolute;top:calc(64px + var(--sat));left:50%;transform:translateX(-50%);padding:10px;background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:20}
.qrbox img{display:block;width:170px;height:170px;image-rendering:pixelated}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;padding:10px 12px calc(10px + var(--sab));border-radius:26px 26px 0 0;background:rgba(255,255,255,.95);
  box-shadow:0 -10px 30px rgba(140,40,100,.16)}
.sheet .big{margin-top:6px}
.pickl{margin:0 0 4px;font-size:13px;font-weight:900;color:#b0507f;text-align:center}
.kinds{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.kinds button{position:relative;padding:2px 0 3px;border:2px solid transparent;border-radius:14px;background:#fff4f9;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.kinds button canvas{width:46px;height:46px}.kinds button small{font-size:10px;font-weight:900;color:#9a5a80;white-space:nowrap}
.kinds button.on{border-color:var(--pink);background:#ffe3f0}.kinds button.on small{color:#c2185b}
.lobbylist{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0 2px}
.lp{display:flex;align-items:center;gap:3px;padding:2px 8px 2px 3px;border-radius:999px;background:#fff;border:2px solid var(--c,#ffc0dc);font-size:12px;font-weight:900;max-width:31%}
.lp canvas{width:20px;height:20px}.lp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lp.off{opacity:.45}.lp em{font-style:normal;font-size:10px;color:#b07595}
/* ---------- arena HUD ---------- */
.hud{position:absolute;top:calc(8px + var(--sat));left:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.hudl,.hudr{display:flex;gap:4px;align-items:center;flex:1}.hudr{justify-content:flex-end}
.hudl{font-size:14px;font-weight:900}.hudl .al{padding:4px 9px;border-radius:12px;background:rgba(255,255,255,.88);box-shadow:0 2px 0 rgba(255,150,200,.6);white-space:nowrap}
.clock{padding:4px 12px;border-radius:14px;background:var(--ink);color:#fff;font-weight:900;font-size:18px;letter-spacing:1px;min-width:52px;text-align:center}
.clock.hurry{background:#ff3b6b;animation:pop 1s infinite}@keyframes pop{40%{transform:scale(1.18)}}
.nowhint{position:absolute;top:calc(56px + var(--sat));left:50%;transform:translateX(-50%);max-width:94vw;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.9);
  font-size:13px;font-weight:900;color:#8a2c62;box-shadow:0 3px 10px rgba(140,40,100,.15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .2s}
.nowhint:empty{opacity:0}
.dashbtn{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(26px + var(--sab));width:122px;height:122px;border-radius:50%;border:0;cursor:pointer;touch-action:none;z-index:2;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .06s;padding:0;
  background:radial-gradient(circle at 35% 30%,#fff2b8,#ffb43c 45%,#ff7a1a);box-shadow:0 7px 0 #c45400,0 12px 26px rgba(230,110,10,.4);color:#5a2400;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dashbtn::before{content:"";position:absolute;inset:-26px -16px -22px -30px;border-radius:50%}
.dashbtn span{font-size:44px;line-height:1;position:relative}.dashbtn small{font-size:17px;font-weight:900;margin-top:0;position:relative}
.dashbtn:active,.dashbtn.down{transform:translateY(4px) scale(.93);box-shadow:0 3px 0 #c45400}
.dashbtn .cdring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(74,33,66,.42) calc(var(--cd,0) * 1turn),transparent 0);pointer-events:none}
.dashbtn.cd span,.dashbtn.cd small{opacity:.6}
.dashbtn.sup{background:radial-gradient(circle at 35% 30%,#e9fff9,#4fd8b8 45%,#159c84);box-shadow:0 7px 0 #0d6f5d,0 0 0 5px rgba(79,216,184,.5);color:#053d33;animation:supp .5s ease-in-out infinite}
@keyframes supp{50%{box-shadow:0 7px 0 #0d6f5d,0 0 0 10px rgba(79,216,184,.25)}}
.dashbtn.ghost{background:radial-gradient(circle at 35% 30%,#ffffff,#bfe9ff 45%,#6bb7e8);box-shadow:0 7px 0 #2f78a8,0 12px 26px rgba(40,150,200,.4);color:#08405a}
.vcfix{position:fixed;right:8px;top:calc(100px + var(--sat));z-index:30;display:none!important;flex-direction:column}
body.s-lobby .vcfix,body.s-arena .vcfix{display:flex!important}body.s-lobby .vcfix{top:calc(64px + var(--sat))}
#banners{position:fixed;left:0;right:0;top:calc(96px + var(--sat));z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.ban{padding:8px 18px;border-radius:20px;background:#fff;font-size:20px;font-weight:900;color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.1),0 10px 26px rgba(0,0,0,.16);
  animation:banIn .45s cubic-bezier(.2,1.6,.4,1) both,banOut .4s ease-in 2.2s forwards;text-align:center;max-width:92vw}
.ban small{display:block;font-size:13px;font-weight:800;color:#9a5a80}
.ban.ko{background:linear-gradient(#fff,#ffe3f0);border:3px solid var(--pink)}.ban.gust{background:#eefcff;border:3px dashed #7fd6ff;color:#1f5f7a}
.ban.big{background:linear-gradient(#fff8d0,#ffe07a);border:3px solid #f0b400}.ban.self{background:#3a1030;color:#ffd23f}
@keyframes banIn{0%{opacity:0;transform:scale(.3) rotate(-12deg)}100%{opacity:1}}
@keyframes banOut{to{opacity:0;transform:translateY(-30px) scale(.9)}}
.count{position:fixed;left:0;right:0;top:36%;text-align:center;z-index:45;font-size:96px;font-weight:900;color:#fff;-webkit-text-stroke:4px #ff4f97;paint-order:stroke fill;
  text-shadow:0 8px 0 #c42c72;pointer-events:none;display:none}
.count.on{display:block;animation:cnt .9s ease-out}@keyframes cnt{0%{transform:scale(2.2);opacity:0}30%{transform:scale(1);opacity:1}100%{opacity:.85}}
.netnote{position:fixed;left:50%;top:calc(52px + var(--sat));transform:translateX(-50%);z-index:80;padding:6px 14px;border-radius:999px;background:#3a1030;color:#fff;font-weight:900;font-size:13px}
/* ---------- replay ---------- */
.replayui{position:fixed;inset:0;z-index:46;pointer-events:none}
.rp-top{position:absolute;top:calc(14px + var(--sat));left:0;right:0;text-align:center}
.rp-top b{display:inline-block;padding:6px 18px;border-radius:16px;background:#3a1030;color:#ffd23f;font-size:24px;font-weight:900;transform:rotate(-3deg);box-shadow:0 6px 0 rgba(0,0,0,.18);animation:banIn .5s cubic-bezier(.2,1.6,.4,1) both}
.rp-top small{display:block;margin-top:8px;font-size:14px;font-weight:900;color:#8a2c62;text-shadow:0 1px 0 #fff}
.rp-skip{position:absolute;right:12px;bottom:calc(20px + var(--sab));pointer-events:auto}
.rp-bars::before,.rp-bars::after{content:"";position:absolute;left:0;right:0;height:7vh;background:#2a0f22}.rp-bars::before{top:0;opacity:.0}.rp-bars::after{bottom:0;opacity:.0}
/* ---------- results ---------- */
.result{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--sab));z-index:50;max-width:460px;max-height:calc(100% - 24px - var(--sat) - var(--sab));overflow:auto;margin:0 auto;padding:12px 14px 10px;border-radius:26px;background:rgba(255,255,255,.97);
  box-shadow:0 14px 34px rgba(120,30,90,.25);text-align:center;animation:banIn .5s cubic-bezier(.2,1.5,.4,1);touch-action:pan-y}
.result h2{margin:0 0 2px;font-size:23px}.result .wcv{display:block;margin:-4px auto 0;width:96px;height:96px}
.result p{margin:2px 0 6px;color:#9a5a80;font-weight:800;font-size:13px}
.titles{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:4px 0 8px}
.tt{display:flex;align-items:center;gap:4px;padding:4px 10px 4px 4px;border-radius:999px;background:#fff4f9;border:2px solid #ffc0dc;font-size:12.5px;font-weight:900}
.tt canvas{width:24px;height:24px}.tt b{color:#c2185b}.tt.gold{background:linear-gradient(#fff8d0,#ffe07a);border-color:#f0b400}.tt.dark{background:#3a1030;border-color:#3a1030;color:#fff}.tt.dark b{color:#ffd23f}
.rbtns .big{font-size:21px;padding:15px 12px}.rrow{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.result .botwrap{margin:6px 0 8px}
.pulse{animation:pls .9s ease-in-out infinite}@keyframes pls{50%{transform:scale(1.04)}}
.tipsheet{color:#5a2a4c;border-color:#ffb3d4}.tipsheet .tc{color:#c2185b}
@media (max-height:700px){.logo h1{font-size:44px}.kinds button canvas{width:38px;height:38px}.big{padding:12px}.rbtns .big{padding:12px;font-size:19px}.result .wcv{width:72px;height:72px}}
@media (max-width:360px){.dashbtn{width:108px;height:108px}.joy{width:120px;height:120px}}
@media (min-width:700px){.joy{left:40px;bottom:40px}.dashbtn{right:40px;bottom:46px}}
.camstrip{position:absolute;top:calc(150px + var(--sat));left:calc(8px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.camcell{position:relative;width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 10px rgba(120,40,90,.3);background:#ffd9ea}
.camcell .tv-vid{position:absolute;inset:0;border-radius:50%}.camcell:not(:has(.tv-vid)){display:none}