@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101212;--panel:#191c1c;--muted:#7d8583;--line:#2b302e;--lime:#d4ff5b;--blue:#8bb9ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f3f4ed;font-family:Manrope,Arial,sans-serif;font-size:14px}.shell{max-width:600px;margin:auto;min-height:100svh;padding:0 28px;display:flex;flex-direction:column}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}header{display:flex;align-items:center;height:100px;gap:18px;border-bottom:1px solid var(--line)}.brand{font-size:30px;letter-spacing:-2px;font-weight:800;color:#f3f4ed;text-decoration:none;display:flex;align-items:center;gap:7px}.brand>span{color:var(--lime)}.brand small{font-size:10px;letter-spacing:2px;writing-mode:vertical-rl;border-left:1px solid var(--line);padding-left:8px}.connection{margin-left:auto;display:flex;align-items:center;gap:7px;color:#a3aaa5;font-size:11px}.connection i,.live-dot,.blue-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime)}.connection i{background:#707774}.connection i.online{background:var(--lime)}.icon{width:30px;height:30px;border-radius:50%;border:1px solid #414740;background:transparent;color:#c1c7bf}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;display:flex;align-items:center;gap:9px;color:#a5ae9b}#home{padding-top:34px}h1{font-size:clamp(50px,11vw,72px);letter-spacing:-4px;line-height:1.05;margin:24px 0 19px;font-weight:800}h1 em{font-style:normal;color:var(--lime)}.intro{color:#9da49f;font-size:15px;line-height:1.7;margin:0}.hero-hands{position:relative;height:245px;overflow:hidden;margin-top:4px;background:radial-gradient(ellipse at 50% 85%,#d4ff5b0c,transparent 65%)}#heroHand{position:absolute;width:238px;left:50%;top:1px;transform:translateX(-58%) rotate(-13deg)}.hero-sticker{position:absolute;right:2px;top:80px;background:var(--lime);padding:14px 13px;color:#101212;font-size:12px;font-weight:800;line-height:1.5;transform:rotate(9deg);letter-spacing:.5px}.home-actions{display:grid;gap:10px}.primary,.secondary{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:58px;border:0;padding:16px 20px;border-radius:5px;font-weight:800;font-size:14px}.primary{background:var(--lime);color:#13180c}.primary:hover{background:#e0ff89}.primary span,.secondary span{font-size:24px;line-height:20px}.secondary{background:var(--panel);color:#e3e7dc;border:1px solid var(--line)}.secondary:hover{background:#252a27}.join-row{display:flex;gap:12px;border-bottom:1px solid var(--line);margin-top:18px;padding:0 0 12px}.join-row input{background:none;border:0;color:white;min-width:0;flex:1;font-size:11px;letter-spacing:2px;padding:8px 0;text-transform:uppercase}.join-row button{background:none;border:0;color:#ccd3c4;font-size:12px}.home-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);margin:23px 0 30px}.bottom-line{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin-top:auto;color:#687269;border-top:1px solid var(--line);font-size:9px;letter-spacing:1px}.bottom-line>span:last-child{font-size:22px;color:var(--lime)}.arena-top{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:10px;color:var(--muted);letter-spacing:1px}.text-button{padding:0;color:#aab2a5;border:0;background:none;font-size:11px}.round-tag{font-size:9px;border:1px solid var(--line);padding:6px}.scoreboard{display:flex;align-items:center;justify-content:center;gap:25px}.scoreboard>div{display:flex;align-items:center;gap:16px;flex:1}.scoreboard>div:first-child{justify-content:flex-end}.scoreboard span:not(.score-divider){font-size:11px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard strong{font-size:44px;letter-spacing:-2px}.scoreboard>div:first-child strong{color:var(--lime)}.scoreboard>div:last-child strong{color:var(--blue)}.score-divider{font-size:24px;color:#59625a}.opponent-zone,.player-zone{position:relative}.player-label{display:flex;gap:7px;align-items:center;justify-content:center;font-size:9px;letter-spacing:1.4px;color:#969e94;min-height:24px}.player-label b{font-size:9px;color:#cdd5c7;margin-left:8px}.blue-dot{background:var(--blue)}.hand-stage{width:225px;height:216px;margin:0 auto;position:relative}.hand-stage.opponent svg{transform:rotate(180deg)}.hand-svg{display:block;width:100%;height:auto;overflow:visible}.finger-group{transition:opacity .1s}.finger-button{cursor:pointer;outline:none}.finger-button:focus-visible .hitbox{stroke:var(--lime);stroke-width:2}.hitbox{fill:transparent}.finger-shape{transition:d .10s}.finger-button:hover .finger-shape{filter:brightness(1.14)}.finger-label{font-size:7px;font-weight:bold;fill:#414d33;pointer-events:none}.hand-stage.disabled .finger-button{cursor:default}.middle{padding:12px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.phase-line{display:flex;justify-content:space-between;align-items:center}.phase-line>span{font-size:12px;font-weight:800;letter-spacing:1px}.phase-line>strong{font-size:25px;color:var(--lime);font-variant-numeric:tabular-nums}.timer-track{height:3px;background:#2c322a;margin-top:10px;overflow:hidden}.timer-track>div{height:100%;background:var(--lime);width:0;transition:width .08s linear}.middle p{color:#8c9687;font-size:11px;margin:9px 0 0;min-height:16px}.player-zone .hand-stage{height:230px}.player-zone>.player-label{margin-top:-8px}.arena-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 26px}.arena-actions button{font-size:12px;min-height:50px;padding:12px}.play-tip{text-align:center;color:#8a9483;font-size:9px;letter-spacing:1px;padding:23px 0 26px}dialog{max-width:460px;width:calc(100% - 32px);border:1px solid #414a39;background:#1b2019;color:#edf1e5;border-radius:12px;padding:28px}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}h2{font-size:33px;letter-spacing:-1.5px;margin:18px 0}.close-dialog{position:absolute;right:16px;top:12px;border:0;background:none;color:#a7b09d;font-size:28px}dialog p{font-size:12px;line-height:1.8;color:#a9b39f}.gesture-rules{display:flex;gap:8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.gesture-rules>div{flex:1;font-size:30px;display:flex;flex-direction:column;gap:7px}.gesture-rules b{font-size:12px}.gesture-rules span{font-size:10px;color:#a9b39f}.gesture-rules+ p{margin-top:18px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e5edda;color:#172111;border-radius:8px;padding:14px 20px;font-size:12px;max-width:90vw;width:max-content;z-index:5;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(min-width:700px){.shell{max-width:520px}body{background:radial-gradient(ellipse at top,#1c211b,#101212 65%)}header{height:100px}}@media(max-height:780px){header{height:74px}#home{padding-top:23px}h1{font-size:54px;margin-top:20px}.hero-hands{height:210px}#heroHand{width:210px}.hand-stage{width:190px;height:180px}.player-zone .hand-stage{height:194px}.arena-top{margin:16px 0}.arena-actions{margin:15px 0}.home-footer{margin:18px 0}.bottom-line{padding:15px 0}}
/* Keep the wrist clear of the player label at every viewport height. */
.hand-stage{height:243px}.player-zone .hand-stage{height:243px}.player-zone>.player-label{margin-top:6px}.finger-button{touch-action:manipulation}@media(max-height:780px){.hand-stage,.player-zone .hand-stage{height:206px}}
/* Realistic photographic hand frames, with controls outside the photograph. */
.hand-stage.photo-hand,.player-zone .hand-stage.photo-hand{width:200px;height:250px}
.photo-hand-visual{position:relative;width:100%;aspect-ratio:4/5}
.photo-hand-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--hand-color) 7%,transparent))}
.opponent .photo-hand-visual{transform:rotate(180deg)}
.finger-hotspots{position:absolute;inset:0}
.finger-hotspot{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.finger-hotspot::after{content:'';width:13px;height:13px;border:1.5px solid var(--hand-color);border-radius:50%;background:#10121255;box-shadow:0 0 0 3px #10121222}
.finger-hotspot:hover::after{background:var(--hand-color);box-shadow:0 0 12px #d4ff5b66}
.finger-controls{position:absolute;left:50%;bottom:-31px;transform:translateX(-50%);display:flex;gap:4px;width:320px;max-width:calc(100vw - 56px);justify-content:center}
.finger-control{flex:1;min-width:0;min-height:36px;padding:6px 3px;background:#191d17;border:1px solid #3a4331;border-radius:5px;color:#b0baa4;font-size:9px;touch-action:manipulation}
.finger-control[aria-pressed=true]{color:var(--lime);border-color:#839c49;background:#252e18}
.player-zone:has(.photo-hand[data-active=true]){padding-bottom:38px}
.player-zone:has(.photo-hand[data-active=true])>.player-label{margin-top:37px}
.player-zone:has(.photo-hand[data-active=true]){padding-bottom:0}
#heroHand.photo-hand{width:215px;aspect-ratio:4/5;top:0;transform:translateX(-58%) rotate(-10deg)}
@media(max-height:780px){.hand-stage.photo-hand,.player-zone .hand-stage.photo-hand{width:170px;height:212.5px}#heroHand.photo-hand{width:185px}}
@media(prefers-reduced-motion:reduce){.photo-hand-image{filter:none}}
#heroHand.photo-hand{width:280px;top:-8px}@media(max-height:780px){#heroHand.photo-hand{width:250px;top:-7px}}
/* Keep the full fingers but shorten the visible forearm so both hands fit better. */
.hand-stage.photo-hand,.player-zone .hand-stage.photo-hand{height:200px}
.photo-hand-visual{aspect-ratio:1;overflow:hidden}
.photo-hand-image{height:125%;object-fit:fill}
.finger-hotspots{height:125%;bottom:auto}
@media(max-height:780px){.hand-stage.photo-hand,.player-zone .hand-stage.photo-hand{height:170px}}