:root{color-scheme:dark;--bg:#0b1217;--panel:#152129;--line:#31423f;--muted:#a3b3b7;--ink:#f6f3e4;--lime:#c9ed94;--orange:#ffb48f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,sans-serif}main{max-width:590px;margin:auto;padding:20px 20px 30px}header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}h1{font-size:14px;line-height:1.6;letter-spacing:.025em;margin:0;max-width:280px}button,select{font:inherit;color:inherit;background:var(--panel);border:1px solid #536348;border-radius:12px;cursor:pointer}select{font-size:13px;padding:9px 8px;flex-shrink:0}button:hover{border-color:var(--lime)}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}small{color:var(--muted);font-size:11px;letter-spacing:.06em}.scoreboard{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:20px}.scoreboard strong{display:block;color:var(--lime);font-size:clamp(22px,6vw,29px);font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-top:3px}.round-block{text-align:right}.round-block strong{color:var(--ink);font-size:19px}.player-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}.identity{display:flex;align-items:center;gap:16px;padding:20px}.avatar{width:100px;flex-shrink:0}.avatar svg{display:block;width:100%;border-radius:14px}.identity-copy{min-width:0}.country{color:var(--lime);font-size:12px;line-height:1.5}h2{font-size:24px;line-height:1.3;margin:7px 0;overflow-wrap:anywhere}.meta{font-size:13px;color:var(--muted);line-height:1.5;margin:0}.feature-band{background:#243a49;padding:12px 20px;border-top:1px solid #355166;border-bottom:1px solid #355166}.feature-band small{color:#c6dbeb}.feature-band p{font-size:17px;font-weight:650;line-height:1.55;margin:4px 0 0;overflow-wrap:anywhere}.quote-block{padding:14px 20px 18px}.quote-block p{font-size:15px;line-height:1.6;margin:4px 0 0;color:#e4e8df;overflow-wrap:anywhere}.choose-label{text-align:center;font-size:13px;color:var(--muted);margin:18px 0 9px}.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.moves button{padding:12px 6px;border-radius:16px;min-height:92px}.moves span{display:block;font-size:35px;line-height:1.3;margin-bottom:6px}.moves b{font-size:14px;font-weight:550}.moves button:hover{background:#263827}.match-opponent{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:12px;min-height:65px}.match-opponent>div:first-child{width:54px;flex-shrink:0}.match-opponent svg{display:block;width:100%}.match-opponent h2{font-size:17px;margin:3px 0;max-width:350px}.match-opponent .country{font-size:11px}#countdown{text-align:center;padding:38px 0 56px;min-height:340px}.pulse-ring{border:1px solid #526b3f;width:130px;height:130px;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:65px;box-shadow:0 0 45px #c9ed9410;animation:beat .6s infinite}#chant{font-size:40px;font-weight:750;letter-spacing:.06em;margin:22px 0 8px}#hands{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:4px;border:1px solid var(--line);border-radius:20px;padding:20px 10px;background:var(--panel);margin:18px 0 16px}.hand{text-align:center;min-width:0}.hand small{display:block;font-size:12px;letter-spacing:0}.hand span{display:block;font-size:clamp(52px,16vw,80px);line-height:1.4;animation:showHand .2s ease-out}.hand b{display:block;font-size:13px;font-weight:500}.versus{font-size:11px;color:var(--muted);text-align:center}#revealLabel{text-align:center;min-height:180px;font-size:32px;font-weight:750;padding:24px 0}.result-panel{text-align:center;padding:15px 16px 20px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}#outcome{font-size:32px;margin:0 0 14px;color:var(--lime)}.result-panel[data-outcome=lose] #outcome{color:var(--orange)}.result-panel[data-outcome=draw] #outcome{color:var(--ink)}#rankLabel{display:block;font-size:12px}.rank-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 5px;margin:8px 0 0}.rank-line span{font-size:14px;color:var(--muted)}#rankPrefix:not(:empty){flex-basis:100%;font-size:12px}#rankNumber{font-size:clamp(26px,8vw,46px);letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-weight:700;line-height:1.2;color:var(--ink)}#resultDetail{font-size:13px;color:var(--muted);line-height:1.6;margin:14px 0 16px}#next{display:block;width:100%;padding:15px;background:var(--lime);color:#13200b;border:0;font-weight:700;border-radius:12px}.personal-record{font-size:12px;color:var(--muted);text-align:center;margin:20px 0 0}details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;font-size:13px}summary{cursor:pointer;color:var(--muted)}#history{padding:0;list-style:none}#history li{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.7}.footer{font-size:10px;color:#92a3a8;text-align:center;line-height:1.7;margin:16px auto 0;max-width:380px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes beat{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}@keyframes showHand{from{transform:scale(.8);opacity:.4}to{transform:scale(1);opacity:1}}@media(max-width:380px){main{padding:16px 14px 26px}header{margin-bottom:16px}h1{font-size:12px}.identity{padding:16px;gap:12px}.avatar{width:82px}h2{font-size:20px}.feature-band,.quote-block{padding-left:16px;padding-right:16px}.feature-band p{font-size:16px}.quote-block p{font-size:14px}.scoreboard{margin-bottom:16px}.match-opponent h2{font-size:15px}.result-panel{padding-left:12px;padding-right:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
/* Keep the outcome, both hands and the primary action together on narrow phones. */
#matchStage[data-phase=result] .match-opponent{min-height:42px;margin-bottom:8px}#matchStage[data-phase=result] .match-opponent>div:first-child{width:36px}#matchStage[data-phase=result] #hands{padding:12px 8px;margin:12px 0}#matchStage[data-phase=result] .hand span{font-size:clamp(44px,12vw,60px);line-height:1.3}
@media(max-height:650px) and (max-width:500px){main{padding-top:12px}header{margin-bottom:12px}.scoreboard{padding:8px 0;margin-bottom:14px}.result-panel{padding-top:12px;padding-bottom:14px}#outcome{margin-bottom:10px}#resultDetail{margin-top:10px;margin-bottom:12px}}
/* Ownership stays explicit in text, identity and color before and after judging. */
#hands{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:7px;padding:0;background:none;border:0;border-radius:0}.hand{border:2px solid;border-radius:18px;padding:14px 7px 10px;overflow:hidden}.hand-you{border-color:#bddc78;background:#202d1b}.hand-opponent{border-color:#8ec6f0;background:#142b3b}.hand-owner{font-size:22px;line-height:1.2;font-weight:800;letter-spacing:.025em;margin:0 0 10px}.hand-you .hand-owner{color:#d0f0a2}.hand-opponent .hand-owner{color:#b5dfff}.hand-identity{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;margin-bottom:8px}.hand-identity p{font-size:11px;margin:0;line-height:1.3;overflow-wrap:anywhere;max-width:110px}.hand-avatar{width:32px;flex-shrink:0}.hand-avatar svg{display:block;width:100%;border-radius:8px}.you-icon{width:26px;height:26px;border:1px solid #8ca864;border-radius:50%;font-size:14px;color:#d0f0a2;display:grid;place-items:center}.hand b{font-weight:700;font-size:15px}.hand-verdict{font-size:13px;font-weight:750;line-height:1.4;margin:10px -7px -10px;padding:8px 5px;min-height:34px;background:#ffffff08}.hand[data-verdict=winner] .hand-verdict{background:#c9ed94;color:#112008}.hand[data-verdict=loser] .hand-verdict{background:#ffb48f;color:#34180a}.hand[data-verdict=draw] .hand-verdict{color:var(--ink)}.hand-verdict:empty{visibility:hidden}#matchStage[data-phase=result] #hands{padding:0}#matchStage[data-phase=result] .hand{padding-top:10px}#matchStage[data-phase=result] .hand-owner{font-size:20px;margin-bottom:6px}#matchStage[data-phase=result] .hand-identity{margin-bottom:3px}#matchStage[data-phase=result] .match-opponent{display:none}@media(max-width:380px){.hand-owner{font-size:20px}.hand-identity{flex-direction:column;min-height:62px}.hand-identity p{font-size:10px;max-width:120px}.hand-verdict{font-size:12px}.hand b{font-size:14px}.versus{font-size:10px}}@media(max-height:650px) and (max-width:500px){#matchStage[data-phase=result] .hand-identity{display:none}#matchStage[data-phase=result] .hand-owner{font-size:18px}}
/* Entry screen and optional rewarded replay. */
.home-screen{min-height:calc(100svh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 32px;text-align:center}.home-logo{width:190px;margin-bottom:18px;filter:drop-shadow(0 0 20px #c9ed9418)}.home-logo img{display:block;width:100%;height:auto}#homeTitle{font-size:clamp(23px,6vw,34px);line-height:1.55;max-width:390px;letter-spacing:.02em;margin:0}.home-population{display:flex;flex-direction:column;gap:5px;margin:24px 0 28px}.home-population strong{font-size:clamp(28px,8vw,42px);color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:-.03em}.home-population small{font-size:12px}.home-language{border:0;margin:0 0 22px;padding:0;width:100%;max-width:340px}.home-language legend{width:100%;font-size:13px;color:var(--muted);margin-bottom:12px}.home-language>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-language button{padding:16px 8px;font-weight:650;border-color:var(--line)}.home-language button[aria-pressed=true]{border:2px solid var(--lime);padding:15px 7px;color:var(--lime);background:#23301d}.start-button{display:block;padding:16px;width:100%;max-width:340px;border:0;border-radius:12px;background:var(--lime);color:#14210b;font-weight:750;font-size:16px}.home-best{margin:17px 0 0;color:var(--muted);font-size:12px}.home-button{font-size:12px;flex-shrink:0;padding:9px 12px}.reward-dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:20px;width:calc(100% - 40px);max-width:360px;padding:24px;text-align:center}.reward-dialog::backdrop{background:#040a10c9}.reward-dialog h2{font-size:23px;margin:0 0 12px}.reward-dialog p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 20px}.decline-ad{width:100%;border:0;background:none;color:var(--muted);font-size:14px;margin-top:10px;padding:12px}.ad-status{color:var(--muted);font-size:12px;line-height:1.6;margin:12px 0 0}@media(max-height:650px){.home-screen{padding:12px 0;min-height:calc(100svh - 36px)}.home-logo{width:132px;margin-bottom:12px}.home-population{margin:15px 0 20px}.home-language{margin-bottom:16px}}
/* Framed hands stay on screen for the chant, reveal and rematches. */
#hands{margin-top:0}.hand-identity{flex-direction:column;min-height:78px;gap:4px;margin-bottom:4px}.hand-identity p{font-size:11px;line-height:1.25;max-width:160px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hand-identity small{font-size:10px;line-height:1.3;max-width:155px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0}.you-icon{height:32px;width:32px}.hand span{font-size:clamp(44px,12vw,60px);line-height:1.3;animation:none}.hand-verdict:empty{display:none}#hands[data-stage=countdown] .hand span{animation:throwBeat .6s ease-in-out infinite}#hands[data-stage=reveal] .hand span{animation:showHand .18s ease-out}#countdown{padding:14px 0 28px;min-height:130px}#chant{margin:10px 0 8px;font-size:32px}#revealLabel{min-height:110px;padding:12px 0 24px}#selection .feature-band{border-top:1px solid #355166}.opponent-reply{border-top:1px solid var(--line);padding-top:10px;margin:10px 0 16px}.opponent-reply small{font-size:10px}.opponent-reply p{font-size:14px;line-height:1.55;margin:5px 0 0;color:var(--ink)}#matchStage[data-phase=result] .hand-identity{min-height:70px}#matchStage[data-phase=result] .hand span{font-size:clamp(40px,11vw,54px)}#matchStage[data-phase=result] .hand-verdict{min-height:30px;padding:6px 4px}@keyframes throwBeat{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-9px) rotate(-9deg)}70%{transform:translateY(2px) rotate(4deg)}}@media(max-height:650px) and (max-width:500px){#matchStage[data-phase=result] .hand-identity{display:none}.opponent-reply{padding-top:8px;margin-bottom:12px}.opponent-reply p{font-size:13px}.hand-identity{min-height:72px}}
html{scrollbar-gutter:stable}#homeTitle{font-size:clamp(24px,7vw,32px);line-height:1.4}

/* A muted wind-up and a bright, larger committed move remain distinct even for rock. */
.hand-gesture{height:92px;display:grid;place-items:center;position:relative;margin:4px 0}
.hand-gesture::before{content:"";position:absolute;inset:2px 15px;border:1px solid #ffffff20;border-radius:20px;background:#ffffff0b;opacity:0;transform:scale(.82);transition:opacity .16s ease-out,transform .16s ease-out}
.hand .hand-gesture span{position:relative;font-size:64px;line-height:1}
.hand b{display:inline-block;min-height:26px;padding:3px 8px;border-radius:8px;color:var(--muted)}
#hands[data-stage=countdown] .hand-gesture span{font-size:40px;opacity:.55;filter:saturate(.65)}
#hands:not([data-stage=countdown]) .hand-gesture::before{opacity:1;transform:scale(1)}
#hands:not([data-stage=countdown]) .hand-you b{background:#c9ed9424;color:#d0f0a2}
#hands:not([data-stage=countdown]) .hand-opponent b{background:#8ec6f024;color:#c9e7ff}
#hands[data-stage=reveal] .hand-gesture span{animation:revealMove .34s cubic-bezier(.16,.9,.4,1.3)}
#matchStage[data-phase=result] .hand-gesture{height:78px}
#matchStage[data-phase=result] .hand-gesture span{font-size:58px}
@keyframes revealMove{from{transform:translateY(20px) scale(.35);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.hand-gesture::before{transition:none}}

.share-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:340px;margin:12px auto 0;padding:11px 10px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font-size:13px;font-weight:600}
.share-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.result-panel .share-button{max-width:none}
.share-status{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}
.share-dialog textarea{width:100%;resize:none;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;font-size:13px;line-height:1.7;margin-bottom:16px}
