/* iOS Settings-style lobby + game HUD */
.join-card{flex:none;padding:18px;border:1px solid rgba(60,60,67,.06);border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.035)}
.join-label{display:block;color:#1D1D1F;font:600 17px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.02em}
.join-help{margin:6px 0 14px;color:#6E6E73;font:400 13px/1.45 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.join-entry{display:flex;align-items:stretch;gap:8px}
.join-entry #jcode{flex:1;min-width:0;width:0;height:54px;background:#F2F2F7;border:1.5px solid #DFDFE5;border-radius:12px;font:600 18px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:0 12px}
.join-entry #jcode::placeholder{font-weight:400;font-size:16px;letter-spacing:normal;text-transform:none;color:#85858C;opacity:1}
.join-entry #jcode:focus{border-color:#00A847;background:#fff;box-shadow:0 0 0 3px rgba(0,200,83,.12)}
.join-submit{flex:none;border:0;border-radius:12px;padding:0 16px;min-height:54px;background:#1D1D1F;color:#fff;font:600 16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer}
.join-submit:active{background:#38383A}
.join-submit:focus-visible,.join-qr:focus-visible{outline:3px solid rgba(0,200,83,.4);outline-offset:3px}
.join-qr{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin-top:10px;padding:8px 0 0;border:0;border-top:1px solid #F2F2F7;background:none;color:#6E6E73;font:500 13px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;text-align:left}
.join-qr .ic{width:18px;height:18px}
.join-qr>span:last-child{margin-left:auto;font-size:22px;line-height:1}
:root{--ibg:#F2F2F7;--sep:rgba(60,60,67,.18);--lab2:rgba(60,60,67,.6);--blue:#007AFF;--ired:#FF3B30;--ior:#FF9500;--igr:#34C759;--sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif}
.ios{background:var(--ibg);font-family:var(--sys)}
.ios .nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;background:rgba(242,242,247,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:.5px solid var(--sep);position:sticky;top:0;z-index:5}
.ios .nav h1{font:600 17px var(--sys);letter-spacing:-.01em;text-align:center}
.navb{background:none;border:0;color:var(--blue);font:400 17px var(--sys);padding:8px;min-height:44px;cursor:pointer;justify-self:start;display:inline-flex;align-items:center;gap:2px;border-radius:8px}
.navb.r{justify-self:end}.navb.b{font-weight:600}.navb .chev{font-size:28px;line-height:0;margin-top:-3px}
.navb:active{opacity:.4}.navb:disabled{color:var(--lab2);opacity:.5}
.navb:focus-visible,.pillb:focus-visible,.row-btn:focus-visible,.step:focus-visible,.ibtn:focus-visible,.iseg button:focus-visible,.isw:focus-visible{outline:3px solid rgba(0,122,255,.5);outline-offset:2px}
.iwrap{flex:1;overflow:auto;padding:16px 16px 0;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.cap{font:400 13px var(--sys);color:var(--lab2);text-transform:none}
.codecard{background:#fff;border-radius:12px;padding:16px;display:flex;gap:12px;align-items:center}
.cc-main{flex:1;min-width:0}
.bigcode{font:800 clamp(34px,11vw,48px)/1.05 var(--sys);letter-spacing:-.01em;color:#000;word-break:break-all;margin:2px 0 6px;transition:opacity .2s}
.bigcode.sm{font-size:32px;text-align:center;margin-top:12px}
#lcode{white-space:nowrap;word-break:normal}
.tag{display:inline-block;font:600 11px var(--sys);color:var(--lab2);background:var(--ibg);border-radius:6px;padding:3px 7px;text-transform:uppercase;letter-spacing:.04em}
.tag:empty{display:none}
.cbtns{display:flex;flex-direction:column;gap:8px;flex:none}
.pillb{background:rgba(0,122,255,.1);color:var(--blue);border:0;border-radius:99px;font:600 15px var(--sys);padding:8px 16px;min-height:36px;cursor:pointer}
.pillb:active{opacity:.6}
.grp{background:#fff;border-radius:12px;overflow:hidden;margin-top:16px;flex:none}
.ghead{font:400 13px var(--sys);color:var(--lab2);text-transform:uppercase;letter-spacing:.02em;margin:26px 16px 0}
.ghead+.grp,.ghead+.iseg{margin-top:7px}
.foot{font:400 13px/1.35 var(--sys);color:var(--lab2);margin:7px 16px 0}.foot:empty{display:none}.foot.c{text-align:center}
.irow,.row-btn{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 16px;position:relative;font:400 17px var(--sys);color:#000;background:#fff;width:100%;border:0;text-align:left}
.irow+.irow:before,.irow+.row-btn:before,.row-btn+.irow:before,.row-btn+.row-btn:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.irow>span:first-child{flex:1}
.row-btn{cursor:pointer;justify-content:space-between}.row-btn:active{background:#E5E5EA}
.row-btn.blue{color:var(--blue);justify-content:flex-start}
.acc{color:#C4C4C7;font-size:22px;line-height:1}
.irow .val{color:var(--lab2);font-variant-numeric:tabular-nums;white-space:nowrap}
.irow.host .val{color:#000}
.stp{display:flex;background:#EEEEF0;border-radius:8px;overflow:hidden;flex:none}
.step{width:46px;height:32px;border:0;background:none;font:400 22px/1 var(--sys);color:#000;cursor:pointer}
.step+.step{border-left:.5px solid var(--sep)}.step:active{background:#D1D1D6}.step:disabled{color:#C4C4C7;cursor:default}
.zlink{display:flex;align-items:center;gap:6px;background:none;border:0;font:400 17px var(--sys);color:var(--lab2);cursor:pointer;padding:6px 0;min-height:36px}
.zlink b{color:#000;font-weight:400}
.isw{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:99px;background:#E9E9EA;position:relative;cursor:pointer;transition:background .25s;flex:none;margin:0}
.isw:before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.isw:checked{background:var(--igr)}.isw:checked:before{transform:translateX(20px)}.isw:disabled{opacity:.5;cursor:default}
.busy .step,.busy .isw,.busy .zlink{pointer-events:none;opacity:.55}
.iseg{display:flex;background:rgba(118,118,128,.12);border-radius:9px;padding:2px;gap:0;margin:7px 0 0}
.iseg button{flex:1;min-height:36px;border:0;background:none;border-radius:7px;font:500 13px var(--sys);color:#000;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.iseg button.on{background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
.iseg button.h.on{color:var(--ior)}.iseg button.d.on{color:var(--igr)}
.pav{width:32px;height:32px;border-radius:50%;background:#C7C7CC;color:#fff;font:600 13px var(--sys);display:flex;align-items:center;justify-content:center;flex:none}
.irow .sub{display:block;font-size:13px;color:var(--lab2)}
.pref-h{color:var(--ior)}.pref-d{color:var(--igr)}
.bbar{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(242,242,247,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:.5px solid var(--sep);display:flex;flex-direction:column;gap:8px;z-index:6}
.bbar>*{max-width:528px;width:100%;margin:0 auto}
.bbar>.ibtn{flex:none;height:50px;min-height:50px}
#lobby{position:relative}
.ibtn{height:50px;border-radius:12px;border:0;background:var(--blue);color:#fff;font:600 17px var(--sys);cursor:pointer;width:100%;flex:1;transition:transform .15s,opacity .15s}
.ibtn:active{transform:scale(.98);opacity:.85}.ibtn:disabled{opacity:.45}
.ibtn.ghost{background:rgba(118,118,128,.12);color:var(--blue)}.ibtn.red{background:var(--ired)}
/* sheets */
.sbg{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:2500;opacity:0;pointer-events:none;transition:opacity .25s}
.sbg.on{opacity:1;pointer-events:auto}
.isheet{position:fixed;left:0;right:0;bottom:0;z-index:2600;background:var(--ibg);border-radius:12px 12px 0 0;max-width:560px;margin:0 auto;max-height:92dvh;display:flex;flex-direction:column;transform:translateY(105%);visibility:hidden;transition:transform .35s cubic-bezier(.32,.72,0,1),visibility 0s .35s;padding-bottom:calc(16px + env(safe-area-inset-bottom));font-family:var(--sys)}
.isheet.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.32,.72,0,1)}
.isheet.tall{height:88dvh}
.grab{width:36px;height:5px;border-radius:3px;background:#C7C7CC;margin:6px auto 0;flex:none}
.shh{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;flex:none}
.shh h2{font:600 17px var(--sys);letter-spacing:-.01em}
.sbody{padding:0 16px;overflow:auto;flex:1;display:flex;flex-direction:column}
.sbody .grp{margin-top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#kwIn{flex:1;border:0;outline:0;font:700 28px var(--sys);letter-spacing:.04em;background:none;padding:10px 0;color:#000;width:100%}
.qrbox{padding:16px 24px;display:flex;flex-direction:column;align-items:center}
#qr{width:min(70vw,280px);aspect-ratio:1;background:#fff;border-radius:16px;padding:12px}
#zmap{flex:1;min-height:240px;border-radius:12px;margin-top:12px;background:#E5E3DF}
#zr2{accent-color:var(--blue)}
/* game */
#game{font-family:var(--sys)}
.hud{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;z-index:500;max-width:480px;margin:0 auto;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);border-radius:18px;padding:12px 16px 14px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.hcols{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.hcols>div+div{border-left:.5px solid var(--sep);padding-left:14px}
.clock{font:700 44px/1.05 var(--sys);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#000}
.clock.sm{font-size:28px;margin-top:4px;color:var(--ired)}
.bar{height:5px;border-radius:3px;background:rgba(118,118,128,.16);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--ired);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.bar.g i{background:var(--igr)}
.hz{font:400 13px var(--sys);color:var(--lab2);margin-top:8px;font-variant-numeric:tabular-nums}
.hd{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font:500 13px var(--sys);color:#000}.hd b{font-variant-numeric:tabular-nums}
.gpanel{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:500;max-width:480px;margin:0 auto;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:18px;padding:12px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.gp-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0 4px}
.rtag{font:700 13px var(--sys);text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:7px}
.rtag.caz{background:rgba(255,149,0,.14);color:#C46A00}.rtag.dino{background:rgba(52,199,89,.15);color:#1E8E3E}
.gp-btns{display:flex;gap:8px}
#game .sheet{background:rgba(255,255,255,.96);padding:16px}
#headOverlay{background:rgba(242,242,247,.98)}
#reveal .ric{display:none}
.lab{background:#fff!important;color:#000!important;font:600 11px var(--sys)!important;letter-spacing:.03em;padding:3px 8px!important;border-radius:99px!important;box-shadow:0 2px 8px rgba(0,0,0,.18)!important;white-space:nowrap}
.lab.me{background:var(--blue)!important;color:#fff!important}
.lab .ago{color:#8E8E93;font-weight:400;margin-left:4px}
.lab .live{color:var(--ired);font-weight:700;margin-left:4px}
@media(prefers-reduced-motion:reduce){.isheet,.sbg,.bar i,.isw:before{transition:none!important}}