:root{font-family:Arial,Helvetica,sans-serif;color:#29251f;background:#f9f4e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}header{margin:0 5%;padding:25px 0;border-bottom:1px solid #d6cfbf;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:18px;font-weight:800;letter-spacing:-.5px}.brand>span{font-size:34px;line-height:1;color:#bd4a20}.header-note,.eyebrow,.arena-labels{font:700 11px/1.5 monospace;letter-spacing:1px}.header-note{color:#83796a}main{width:100%;max-width:850px;margin:auto;padding:32px 24px 38px;flex:1}.intro{text-align:center}.eyebrow{color:#a64421;margin:0 0 13px}h1{font-size:52px;letter-spacing:-2.5px;line-height:1.02;margin:0}.intro>p:last-child{font-size:16px;color:#7b7265;margin:17px 0 25px}.arena{background:#f2a44b;border:2px solid #29251f;border-radius:20px;box-shadow:6px 6px 0 #29251f;overflow:hidden}.arena-labels{display:flex;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #29251f30;font-size:11px}.arena-labels span span{color:#704516}.stage{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;height:225px;overflow:hidden}.versus{text-align:center;font-weight:900;font-size:25px;font-style:italic;color:#8a541d}.hand-zone{height:200px;position:relative;display:flex;align-items:center;justify-content:center}.hand{position:relative;width:240px;height:190px;flex-shrink:0;--skin:#fff0cb;--line:#392a1d}.opponent{transform:scaleX(-1)}.opponent .hand{--skin:#d5c2f2}.hand i{display:block;position:absolute;background:var(--skin);border:3px solid var(--line);transition:width .28s ease,transform .28s ease,top .28s ease,left .28s ease,height .28s ease,border-radius .28s ease}.wrist{left:-20px;top:99px;width:125px;height:61px;border-radius:8px}.palm{left:68px;top:57px;width:102px;height:107px;border-radius:35px 30px 32px 30px;z-index:2}.finger{left:143px;width:33px;height:31px;border-radius:13px;z-index:3}.index{top:58px}.middle{top:82px}.ring{top:106px}.pinky{top:130px}.thumb{left:90px;top:65px;width:34px;height:63px;transform:rotate(-22deg);border-radius:18px;z-index:5}.crease{left:77px;top:137px;width:19px;height:0!important;border-width:0 0 2px!important;background:none!important;z-index:5;transform:rotate(16deg)}.paper .finger{width:100px;height:23px;left:137px;border-radius:13px}.paper .index{top:57px;width:87px}.paper .middle{top:79px;width:101px}.paper .ring{top:101px;width:94px}.paper .pinky{top:123px;width:73px}.paper .thumb{top:28px;left:94px;height:69px;transform:rotate(-35deg)}.scissors .index{width:100px;height:26px;left:135px;top:55px;transform:rotate(-18deg);transform-origin:left center}.scissors .middle{width:100px;height:26px;left:137px;top:92px;transform:rotate(13deg);transform-origin:left center}.scissors .thumb{left:103px;top:103px;height:49px;transform:rotate(-48deg)}.finger-gun .index{width:104px;height:27px;left:137px;top:57px;border-radius:15px}.finger-gun .thumb{top:8px;left:93px;height:83px;width:30px;transform:rotate(-8deg)}.finger-gun .middle{top:88px}.finger-gun .ring{top:112px}.finger-gun .pinky{top:136px}.result-space{min-height:76px;text-align:center;display:grid;place-items:center;padding:7px 18px 20px}#result{margin:0;font-size:14px;color:#674519}#result.punchline{font-size:44px;font-weight:900;color:#29251f;letter-spacing:-2px;animation:pop .24s ease-out}.controls{max-width:490px;margin:27px auto 0}.moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}button{font:700 15px Arial;cursor:pointer;min-height:54px;border:1.5px solid #b9b09e;border-radius:10px;background:transparent;color:#29251f;touch-action:manipulation;transition:background .12s,transform .12s}button span{font-size:23px;vertical-align:middle;margin-right:5px}button[aria-pressed=true]{background:#29251f;border-color:#29251f;color:#fff5df}button:hover:enabled{background:#e8dfce}button[aria-pressed=true]:hover{background:#42392f}button:active:enabled{transform:translateY(2px)}button:disabled{cursor:default;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #744cd0;outline-offset:4px}.play{display:flex;justify-content:space-between;align-items:center;padding:0 20px;width:100%;margin-top:13px;background:#d4c1f3;border:2px solid #29251f;box-shadow:0 3px 0 #29251f;font-size:17px}.play:hover:enabled{background:#c5aaed}.play span{font-size:26px}.hint{font-size:12px;text-align:center;color:#83796a;margin:18px 0 0}footer{margin:0 5%;border-top:1px solid #d6cfbf;padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#83796a}.shaking .hand{animation:shake .5s ease-in-out infinite}@keyframes shake{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(6deg)}}@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-5deg)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){header{padding:19px 0}.header-note{display:none}.brand{font-size:17px}main{padding:30px 16px}h1{font-size:43px}.intro>p:last-child{font-size:14px}.arena-labels{padding:16px 14px;font-size:10px}.stage{height:180px;grid-template-columns:1fr 30px 1fr}.hand{zoom:.65}.hand-zone{height:170px}.versus{font-size:20px}.arena{box-shadow:4px 4px 0 #29251f}.result-space{min-height:73px}#result.punchline{font-size:39px}.moves{gap:7px}.moves button{font-size:14px}.moves button span{font-size:20px;margin-right:2px}footer{flex-direction:column;gap:7px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.gun-callout{position:absolute;top:4px;left:50%;z-index:10;transform:translateX(-50%) scaleX(-1) rotate(8deg) scale(.5);opacity:0;background:#29251f;color:#fff5df;border-radius:999px;padding:7px 13px;font:900 15px Arial;letter-spacing:1px;transition:opacity .2s,transform .2s}.gun-callout.visible{opacity:1;transform:translateX(-50%) scaleX(-1) rotate(8deg) scale(1)}
/* Secret Bazooka: a small gold star after round one, revealed on hover */
.secret { position: fixed; right: 14px; bottom: 64px; z-index: 900; width: 74px; height: 74px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.secret .star { display: block; width: 100%; height: 100%; overflow: visible; transition: transform 220ms var(--ease-out, ease-out); }
.secret:hover .star, .secret:focus-visible .star { transform: rotate(18deg) scale(1.12); }
.secret, .secret:hover:enabled, .secret:focus-visible { background: none; filter: none; }
.secret:focus-visible { outline: 2px solid #22221f; outline-offset: 4px; }
.secret-peek { position: absolute; right: 0; bottom: calc(100% + 12px); width: 180px; padding: 8px; border-radius: 14px; background: #fffaf0; color: #22221f; border: 1.5px solid #22221f; text-align: center; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity 180ms ease-out, transform 180ms ease-out; }
.secret-peek img { display: block; width: 100%; height: auto; }
.secret-peek b { display: block; margin-top: 4px; font-size: 14px; }
.secret:hover .secret-peek, .secret:focus-visible .secret-peek { opacity: 1; transform: none; }
/* The Bazooka as a hand */
.bazooka-hand { zoom: 1; }
.held-bazooka { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* Phones: keep the star clear of the Play button and the move buttons */
@media (max-width: 640px) { .secret { top: 14px; right: 10px; bottom: auto; width: 52px; height: 52px; } .secret-peek { top: calc(100% + 12px); bottom: auto; transform-origin: top right; } }