@import "tailwindcss";
:root{--ink:#121619;--cream:#f4f0e7;--red:#f0442e;--yellow:#f4c542;--line:#d8d1c4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,"Noto Sans JP",sans-serif}button,input{font:inherit}.shell{min-height:100vh;background:radial-gradient(circle at 15% 11%,rgba(244,197,66,.18),transparent 23%),linear-gradient(rgba(18,22,25,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,22,25,.035) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);border-bottom:2px solid var(--ink);background:rgba(244,240,231,.88);backdrop-filter:blur(10px);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:900;letter-spacing:-.04em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}.live{font-size:12px;font-weight:800;letter-spacing:.08em}.live-dot{display:inline-block;width:8px;height:8px;background:#1ea565;border-radius:50%;margin-right:8px;box-shadow:0 0 0 5px rgba(30,165,101,.12)}
.hero{min-height:700px;padding:86px 24px 96px;text-align:center;position:relative;overflow:hidden}.hero:after{content:"✊  ✌  ✋";position:absolute;right:-45px;top:90px;writing-mode:vertical-rl;font-size:72px;opacity:.055;letter-spacing:18px;transform:rotate(8deg)}.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 monospace;letter-spacing:.18em;border-bottom:2px solid var(--red);padding-bottom:8px}.hero h1{font-size:clamp(64px,10vw,126px);line-height:.86;letter-spacing:-.085em;margin:30px 0 28px;font-weight:950}.hero h1 em{font-style:normal;color:var(--red);text-shadow:4px 4px 0 var(--ink)}.lead{font-weight:700;line-height:1.8;color:#4b5052;margin:0 0 36px}.start-card,.arena{width:min(680px,100%);margin:auto;background:#fff;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:28px;text-align:left}.start-card label{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:10px}.start-row{display:flex;gap:10px}.start-row input{flex:1;min-width:0;border:2px solid var(--ink);padding:15px;background:#faf9f5;outline:none}.start-row input:focus{box-shadow:inset 0 -4px 0 var(--yellow)}.primary{border:2px solid var(--ink);background:var(--red);color:#fff;padding:14px 22px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:.12s}.primary:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.primary:disabled{opacity:.45;cursor:not-allowed}.primary span{font-size:20px}.start-card small{display:block;margin-top:15px;color:#6b6c69;font-size:11px}
.arena{position:relative;text-align:center}.streak{position:absolute;right:18px;top:16px;text-align:right}.streak span{display:block;font:700 9px monospace;letter-spacing:.1em}.streak strong{font-size:34px;color:var(--red)}.streak b{font-size:12px;margin-left:3px}.matching{padding:54px 10px 30px}.matching h2{margin:30px 0 6px}.matching p{color:#777;font-size:13px}.radar{display:block;margin:auto;width:58px;height:58px;border:3px solid var(--ink);border-radius:50%;position:relative}.radar:after{content:"";position:absolute;inset:7px;border:3px solid var(--red);border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.35);opacity:.2}}.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:24px 40px 16px}.versus>div{display:flex;flex-direction:column;align-items:center;gap:8px}.versus>strong{font:900 22px monospace;transform:skew(-8deg);color:var(--red)}.avatar{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:2px solid var(--ink);font:900 12px monospace}.avatar.you{background:var(--yellow)}.avatar.rival{background:var(--ink);color:#fff}.prompt{font-size:18px;margin:8px}.hands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}.hands button{position:relative;border:2px solid var(--ink);background:var(--cream);padding:18px 6px 13px;cursor:pointer;transition:.12s}.hands button:hover:not(:disabled){background:var(--yellow);transform:translateY(-4px);box-shadow:0 4px 0 var(--ink)}.hands button:disabled{opacity:.5}.hands button>span{font-size:42px;display:block}.hands button>b{display:block;margin-top:5px}.hands button small{position:absolute;right:6px;top:5px;font:700 9px monospace;color:#777}.error{color:#b21f16;font-weight:700}.result{padding:30px 12px 18px}.result-title{font:950 66px/1 monospace;letter-spacing:-.08em}.result.win .result-title{color:var(--red);text-shadow:3px 3px 0 var(--ink)}.result.lose .result-title{color:#575b5d}.result.draw .result-title{color:#d29300}.reveal{display:flex;align-items:center;justify-content:center;gap:25px;margin:24px}.reveal div{display:flex;flex-direction:column}.reveal span{font-size:50px}.reveal small{font-weight:800}.result p{font-weight:800}.result-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.share{border:2px solid var(--ink);background:#fff;padding:12px 18px;font-weight:900;display:flex;align-items:center;gap:8px;cursor:pointer}
.ranking{background:var(--ink);color:#fff;padding:76px max(24px,calc((100vw - 900px)/2)) 88px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #42484a;padding-bottom:20px}.section-head span{font:800 11px monospace;letter-spacing:.18em;color:var(--yellow)}.section-head h2{font-size:34px;margin:7px 0 0;display:flex;gap:12px;align-items:center;letter-spacing:-.04em}.section-head p{font-size:12px;color:#aeb2b2}.rank-list{margin-top:25px;border-top:1px solid #34393b}.rank-row{display:grid;grid-template-columns:60px 50px 1fr auto;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid #34393b}.rank-row.r1{background:var(--yellow);color:var(--ink);transform:scale(1.015);border:2px solid #fff}.rank-num{font:900 14px monospace}.rank-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#303638;border:1px solid #697173;font-weight:900}.r1 .rank-avatar{background:var(--red);color:#fff;border-color:var(--ink)}.rank-score b{font-size:24px;color:var(--yellow)}.r1 .rank-score b{color:var(--red)}.rule{margin-top:25px;display:flex;justify-content:center;gap:9px;color:#919798;font-size:11px}.empty-rank{padding:42px;text-align:center;color:#9da2a3;border-bottom:1px solid #34393b}footer{display:flex;justify-content:space-between;gap:20px;padding:30px max(24px,5vw);font-size:11px;border-top:2px solid var(--ink)}footer span{font-weight:950}footer p{margin:0;color:#666}
@media(max-width:640px){.topbar{height:62px}.live{font-size:10px}.hero{padding:58px 16px 72px;min-height:650px}.hero h1{font-size:61px}.lead{font-size:13px}.lead br{display:none}.start-card,.arena{padding:20px;box-shadow:5px 5px 0 var(--ink)}.start-row{flex-direction:column}.primary{width:100%}.streak{position:static;text-align:center;border-bottom:1px solid var(--line);padding-bottom:8px}.versus{padding:18px 0 10px;gap:8px}.avatar{width:54px;height:54px}.hands{padding:8px 0;gap:6px}.hands button>span{font-size:34px}.result-title{font-size:53px}.result-actions{flex-direction:column}.section-head p{display:none}.ranking{padding:60px 18px}.rank-row{grid-template-columns:42px 42px 1fr auto;padding:13px 6px}.rank-score b{font-size:20px}footer{flex-direction:column;text-align:center}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.timer{position:absolute;left:18px;top:16px;text-align:left}.timer span{display:block;font:700 9px monospace;letter-spacing:.1em}.timer strong{font:950 34px monospace}.timer.danger strong{color:var(--red);animation:pulse .5s infinite}.versus small{font-size:10px;font-weight:900;color:#777}.start-card small b{color:var(--red)}
@media(max-width:640px){.timer{position:static;text-align:center;margin:-2px 0 8px}.timer strong{font-size:30px}}
@media(hover:none),(pointer:coarse){
 .hands button,.primary,.share{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
 .hands button{transition:none}
 .hands button:hover:not(:disabled){background:var(--cream);transform:none;box-shadow:none}
 .primary:hover:not(:disabled){transform:none;box-shadow:4px 4px 0 var(--ink)}
 .hands button:active:not(:disabled){background:var(--cream);transform:scale(.97);box-shadow:none}
 .primary:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
}
.worst-head{margin-top:55px;padding:24px 0 16px;border-bottom:1px solid #42484a}.worst-head span{font:800 11px monospace;letter-spacing:.18em;color:#ff7968}.worst-head h2{font-size:28px;margin:7px 0 4px}.worst-head p{margin:0;color:#929899;font-size:12px}.worst-list{border-top:1px solid #34393b}.worst-row{display:grid;grid-template-columns:60px 50px 1fr auto;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #34393b}.worst-score b{font-size:23px;color:#ff7968}@media(max-width:640px){.worst-row{grid-template-columns:42px 42px 1fr auto;padding:12px 6px}.worst-score b{font-size:19px}}