@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');
:root{--bg:#0b1024;--panel:#161e39;--panel2:#1d2746;--line:#303d62;--white:#f9f9ff;--muted:#a8b6d6;--pink:#f52d7d;--yellow:#ffd547;--cyan:#47d5ff;--green:#51f4ba}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse 80% 45% at 20% -5%,#2938649c,transparent),radial-gradient(ellipse 60% 35% at 100% 70%,#38143b88,transparent),var(--bg);color:var(--white);font-family:Tajawal,system-ui,Arial,sans-serif}
button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.eyebrow{font-family:Arial,sans-serif;color:var(--green);font-size:10px;font-weight:900;letter-spacing:2px}
.home-page{display:grid;place-items:center;text-align:center;overflow-x:hidden}.home-wrap{width:min(600px,92vw);margin:40px auto;position:relative}
.brand-big{font:900 clamp(48px,12vw,92px)/.78 'Barlow Condensed',Impact,sans-serif;display:flex;flex-direction:column;width:max-content;transform:rotate(-4deg);margin:0 auto 38px;-webkit-text-stroke:1.5px #5b1740;filter:drop-shadow(5px 9px 0 #050814);letter-spacing:-1.5px}
.brand-big>span:first-child{color:var(--yellow);text-shadow:4px 4px #ee7c21}.brand-big>span:last-child{color:var(--pink);text-shadow:4px 4px #81275d}.brand-flash{font:36px Arial;position:relative;top:-16px;color:var(--yellow);padding-left:8px}
.sparkle{position:absolute;color:var(--yellow);font-size:40px}.sparkle-one{left:8%;top:12%}.sparkle-two{right:6%;top:30%;font-size:24px;color:var(--cyan)}
.hero-camera{margin:0 auto 22px;width:122px;height:92px;background:linear-gradient(145deg,#65749a,#252c49 65%);border:5px solid #101629;border-radius:20px;box-shadow:0 14px 0 #070b19,0 20px 40px #0007;position:relative;display:grid;place-items:center;transform:rotate(-7deg)}
.hero-camera:before{content:'';position:absolute;width:42px;height:16px;background:#5d6b91;top:-15px;right:16px;border-radius:8px 8px 0 0}.lens-ring{width:67px;height:67px;border:6px solid #141c37;background:#454e70;border-radius:50%;display:grid;place-items:center}.lens{background:radial-gradient(circle at 31% 29%,#bdefff 0 8%,#3faad6 10%,#173659 36%,#0a1129 68%);width:45px;height:45px;border-radius:50%;border:4px solid #121c30}.flash{position:absolute;background:#ffedbc;left:12px;top:15px;width:18px;height:10px;border-radius:4px}
.home-wrap h1{font-size:clamp(31px,6vw,54px);font-weight:900;line-height:1.15;margin:14px 0 14px}.home-wrap h1 span{color:var(--yellow)}.home-description{color:var(--muted);font-size:17px;line-height:1.9;margin:0 auto 26px;max-width:480px}.home-description b{color:var(--white)}
.home-instruction{padding:18px 20px;background:linear-gradient(120deg,#1c2949,#14213b);border:1px solid #3d547b;border-radius:20px;font-size:16px;font-weight:800}.pulse-dot{display:inline-block;width:10px;height:10px;background:var(--green);border-radius:50%;margin-left:7px;box-shadow:0 0 0 5px #51f4ba17,0 0 15px #51f4ba80}.home-foot{margin-top:27px;font-size:13px;color:#899dc1;line-height:1.8}.home-foot span{color:var(--pink)}
.phone-shell{width:min(100%,480px);margin:0 auto;padding:20px 16px 55px}.phone-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:19px}.wordmark{font:900 31px/.82 'Barlow Condensed',Impact,sans-serif;display:flex;flex-direction:column;transform:rotate(-5deg);direction:ltr;letter-spacing:.5px;filter:drop-shadow(2px 4px 0 #070918)}.wordmark span:first-child{color:var(--yellow);text-shadow:2px 2px #a75e1b}.wordmark span:last-child{color:var(--pink);text-shadow:2px 2px #762750}.connected-chip{font-size:12px;color:#d1daf1;font-weight:800;background:#17213b;border:1px solid var(--line);border-radius:28px;padding:10px 12px;display:flex;align-items:center;gap:7px}.connected-chip i{width:7px;height:7px;border-radius:50%;background:#f7b05a}.connected-chip.online i{background:var(--green)}
.identity-panel{border:1px solid #3a466e;background:linear-gradient(120deg,#1e2b50,#192040);padding:18px 20px;border-radius:19px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 8px 20px #02071855}.tiny-label{color:#bed0ee;font-size:12px;font-weight:800}.player-number{font:900 35px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:var(--yellow);direction:ltr;text-align:right}.identity-icon{width:54px;height:54px;background:#0e1730;border-radius:16px;display:grid;place-items:center;font-size:30px;border:1px solid #3d4d6b}
.camera-intro{text-align:center;padding:22px 8px 14px}.camera-intro h1{font-size:28px;margin:7px 0;font-weight:900}.camera-intro p:last-child{font-size:13px;color:var(--muted);line-height:1.55;margin:3px 0}
.camera-card{background:var(--panel);border:1px solid #303d62;border-radius:25px;padding:12px;box-shadow:0 13px 35px #0005}
.camera-viewport{aspect-ratio:4/4.3;max-height:58vh;position:relative;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#28355d,#070c1b 75%);overflow:hidden;display:grid;place-items:center;border:1px solid #425277}
.camera-viewport video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;opacity:0}.camera-viewport.active video{opacity:1}.camera-viewport.selfie video{transform:none}
.camera-placeholder{text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;z-index:1}.camera-placeholder strong{font-size:20px}.camera-placeholder span{font-size:12px;color:var(--muted)}.placeholder-camera{font-size:78px;filter:drop-shadow(0 12px 16px #0006)}.camera-viewport.active .camera-placeholder{display:none}.camera-tag{position:absolute;z-index:2;top:18px;right:18px;font:900 10px Arial,sans-serif;letter-spacing:1.5px;background:#101a30dd;padding:8px 10px;border-radius:8px;color:#fefefe}.camera-tag:before{content:'';display:inline-block;width:7px;height:7px;background:var(--pink);border-radius:50%;margin-left:7px}
.viewfinder{position:absolute;z-index:2;width:30px;height:30px;border-color:var(--yellow);border-style:solid;pointer-events:none}.tl{top:11px;left:11px;border-width:3px 0 0 3px;border-radius:8px 0 0 0}.tr{top:11px;right:11px;border-width:3px 3px 0 0;border-radius:0 8px 0 0}.bl{bottom:11px;left:11px;border-width:0 0 3px 3px;border-radius:0 0 0 8px}.br{bottom:11px;right:11px;border-width:0 3px 3px 0;border-radius:0 0 8px 0}
.camera-status{font-size:13px;text-align:center;padding:14px 5px 10px;color:#c4d6f2;min-height:45px;line-height:1.6}
.action-button{border:none;border-radius:14px;padding:16px;font-size:18px;font-weight:900;transition:transform .15s,filter .15s}.action-button:active:not(:disabled){transform:scale(.97)}.open-button{width:100%;background:linear-gradient(120deg,var(--yellow),#ffa927);color:#24190d;box-shadow:0 5px 0 #b3731e}.open-button.hidden{display:none}
.capture-row{display:flex;align-items:stretch;justify-content:center;gap:9px;margin-top:12px}.capture-row>*{min-height:54px;min-width:0}.small-button{border:1px solid #66769b;border-radius:14px;padding:12px;background:#202c48;color:#ebf3ff;font-weight:800;max-width:42%;white-space:normal;overflow-wrap:anywhere}.snap-button{flex:1;background:linear-gradient(120deg,#ff5d9e,#ec276d);color:#fff;box-shadow:0 5px 0 #8e224d;overflow-wrap:anywhere}
.latest-card{margin-top:18px;padding:17px;background:var(--panel);border:1px solid #303d62;border-radius:22px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.section-head h2{margin:0;font-size:19px;font-weight:900}.section-head span{font:800 11px Arial,sans-serif;color:#92a9cc;letter-spacing:1px}.empty-photo{border:1px dashed #4b5c82;border-radius:14px;padding:24px 13px;text-align:center;font-size:13px;color:#abbfdb;line-height:1.5}.photo-line{display:flex;gap:14px;align-items:center}.photo-line img{width:100px;height:100px;object-fit:cover;border-radius:13px;border:2px solid #fff;cursor:pointer}.photo-line strong{display:block;font-weight:900;margin-bottom:5px}.photo-line .reason{font-size:13px;color:var(--muted);line-height:1.4}
.leave-button{display:block;margin:19px auto 0;background:#311d37;color:#ffb4d4;border:1px solid #6a3d5a;border-radius:13px;padding:13px 20px;font-size:14px;font-weight:800}.privacy-note{text-align:center;color:#7e91b5;font-size:12px;margin:20px auto 0;line-height:1.5}.toast{text-align:center;color:#ffdca7;font-size:13px;font-weight:800;min-height:26px;line-height:1.6;margin-top:10px}
@media(max-width:360px){.phone-shell{padding:13px 10px 40px}.camera-intro h1{font-size:24px}.action-button{font-size:16px}.camera-viewport{aspect-ratio:3/4}.identity-panel{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* SNAP RUSH: phone round time mirrors Unity's server-authoritative deadline. */
.round-clock{background:#10182f;border:1px solid #384e70;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.clock-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:800;color:#c9d7ef}
#roundTimer{font:900 26px 'Barlow Condensed',Impact,Arial,sans-serif;color:var(--yellow);white-space:nowrap;letter-spacing:1px}
#roundTimer.urgent{color:#ff667b}
.clock-track{height:5px;background:#283956;border-radius:10px;overflow:hidden;margin-top:8px}
#roundProgress{width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:10px;transition:width .2s linear}

/* Read-only result when Unity skips a round; the phone has no Skip control. */
.skipped-result{padding:24px 12px;border:1px dashed #e77b7080;border-radius:14px;text-align:center;color:#f2b3a8;line-height:1.7;font-weight:800}

/* Native select remains keyboard/touch accessible; logical edges follow RTL/LTR. */
.language-dock{position:fixed;z-index:20;inset-block-start:max(12px,env(safe-area-inset-top));inset-inline-end:max(16px,env(safe-area-inset-right));max-width:calc(100vw - 32px)}
.language-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(145deg,#111827,#1e293b);border:1px solid #334155;border-radius:999px;box-shadow:0 5px 18px #0005;color:#f8fafc;color-scheme:dark}
.language-pill>span{font-size:18px;line-height:1;pointer-events:none}
.language-pill select{min-width:0;max-width:190px;min-height:28px;background:#172033;color:inherit;border:0;padding:2px 4px;border-radius:8px;font:600 16px/1.4 system-ui,'Microsoft YaHei',sans-serif;cursor:pointer}
.language-pill select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.language-pill option{background:#111827;color:#f8fafc}
.home-wrap{margin-block-start:max(90px,calc(env(safe-area-inset-top) + 75px))}
.home-wrap h1 .headline{color:var(--white)}
.player-page .phone-shell{padding-block-start:max(86px,calc(env(safe-area-inset-top) + 72px))}
.player-number{direction:inherit;text-align:start;unicode-bidi:plaintext;letter-spacing:normal;font-family:Tajawal,system-ui,'Microsoft YaHei',sans-serif;font-size:30px;line-height:1.3;overflow-wrap:anywhere}
.identity-panel>div:first-child,.photo-line>div{min-width:0}
.connected-chip{min-width:0;max-width:calc(100% - 75px)}
.connected-chip span,.photo-line .reason,.photo-line strong{overflow-wrap:anywhere}
.section-head{flex-wrap:wrap}.section-head>span{max-width:100%;overflow-wrap:anywhere;text-align:end;font-family:inherit;letter-spacing:normal}
.camera-tag{right:auto;inset-inline-end:18px;font-family:inherit;letter-spacing:normal}
.camera-tag:before{margin-left:0;margin-inline-end:7px}
.pulse-dot{margin-left:0;margin-inline-end:7px}
html[lang='zh-CN'] .eyebrow{letter-spacing:.04em}
html[dir='rtl'] .eyebrow{letter-spacing:0}
html[dir='rtl'] .language-dock{inset-inline-end:max(16px,env(safe-area-inset-left))}