:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e9edd7;background:#101d24;font-synthesis:none;--lime:#c1ed79;--muted:#91a49e;--line:#34464a}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{border:0;border-bottom:4px solid #789843;background:var(--lime);color:#162820;padding:15px 20px;font-weight:800;cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:default}button:active,button.pressed{transform:translateY(2px);border-bottom-width:2px}button:focus-visible,a:focus-visible{outline:3px solid #f4c76e;outline-offset:4px}[hidden]{display:none!important}main{max-width:1200px;margin:auto;padding:0 36px}header{height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:12px}.brand{color:var(--lime);text-decoration:none;font-weight:900;letter-spacing:3px;font-size:20px}.logo{display:inline-block;position:relative;width:22px;height:12px;background:var(--lime);margin-right:8px;box-shadow:-3px 4px #8bb65f,3px 4px #8bb65f}.logo:before,.logo:after{content:"";position:absolute;top:-6px;width:8px;height:8px;background:#101d24;border:2px solid var(--lime)}.logo:before{left:0}.logo:after{right:0}#connection{font-size:10px;letter-spacing:2px;color:var(--muted)}#welcome{min-height:660px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:60px;padding:60px 0}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--lime);font-weight:700}h1{font-size:clamp(42px,5.5vw,74px);line-height:1.07;letter-spacing:-4px;margin:22px 0}p{line-height:1.7}.intro>p:not(.eyebrow){color:var(--muted);font-size:14px}.entry{border:1px solid var(--line);background:#17282d;padding:32px;box-shadow:8px 8px 0 #0b161d}h2{font-size:23px;margin:0 0 25px;letter-spacing:-1px}label{display:block;font-size:10px;color:var(--muted);letter-spacing:2px;margin:24px 0 9px}input{width:100%;background:#101d24;border:1px solid #4a5d5b;color:#fff;padding:15px;outline:none;border-radius:0}input:focus{border-color:var(--lime)}#code{text-transform:uppercase;letter-spacing:5px}#join-form button{width:100%;margin-top:24px;display:flex;justify-content:space-between}.host-entry{margin-top:26px;padding-top:12px;border-top:1px solid var(--line)}.host-entry p{font-size:12px;color:var(--muted)}.secondary{background:transparent;color:var(--lime);border:1px solid #627557;width:100%;padding:13px}.hero-frog{position:relative;width:112px;height:64px;background:#88bd62;margin:60px 0 25px 30px;box-shadow:-16px 16px 0 #5b904e,16px 16px 0 #5b904e,0 32px 0 -8px #091a1e;image-rendering:pixelated}.hero-frog:before,.hero-frog:after{content:"";position:absolute;top:-16px;width:32px;height:32px;background:#c1ed79}.hero-frog:before{left:0}.hero-frog:after{right:0}.hero-frog i,.hero-frog b{position:absolute;top:-8px;width:12px;height:16px;background:#101d24;z-index:1}.hero-frog i{left:12px}.hero-frog b{right:8px}.game-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:24px 0 20px}.game-heading h2{margin:8px 0 0;font-size:24px}#room-code{color:var(--lime);letter-spacing:5px}.game-heading .eyebrow{margin:0}#status{font-size:12px;color:var(--muted);max-width:380px}.stage{position:relative;border:1px solid #455651;box-shadow:5px 5px 0 #0b161d;background:#101d24}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}#countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:90px;font-weight:bold;text-shadow:5px 5px #101d24;color:var(--lime);pointer-events:none}.under-map{display:flex;justify-content:space-between;gap:15px;margin:16px 0;color:var(--muted);font-size:11px}#clock{color:var(--lime);white-space:nowrap}#players{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 30px}.player{display:flex;align-items:center;gap:10px;font-size:11px;border:1px solid var(--line);padding:11px 14px;background:#17282d}.player.own{border-color:var(--lime)}.player.offline{opacity:.5}.swatch{width:10px;height:10px;flex-shrink:0}.player strong{font-weight:500}.player small{color:var(--muted)}#controls{display:flex;justify-content:space-between;gap:20px;margin:18px 0;touch-action:none;user-select:none;-webkit-user-select:none}#controls>div{display:flex;gap:12px}#controls button{min-width:78px;min-height:66px;background:#293e41;border-bottom-color:#0b161d;color:var(--lime);font-size:20px}#controls>button{min-width:130px;background:var(--lime);color:#162820;border-bottom-color:#789843}#results{margin-top:24px;padding:24px;border:1px solid var(--lime);background:#1e332c}#results h2{margin:10px 0}#results>p:last-child{font-size:12px;color:var(--muted);margin:0}#error{border:1px solid #e68a7a;background:#382b2e;color:#ffd1bb;padding:14px;font-size:13px}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:24px 0;font-size:9px;letter-spacing:1px;color:var(--muted)}
@media(min-width:701px){body:has(#game:not([hidden])) header{height:64px}.game-heading{padding:16px 0}.stage{width:min(100%,calc(max(260px,100dvh - 260px)*1.7778));margin:auto}}
@media(max-width:700px){main{padding:0 16px}header{height:66px}.brand{font-size:16px;letter-spacing:1px}#connection{font-size:8px;letter-spacing:1px}#welcome{grid-template-columns:1fr;gap:30px;padding:36px 0;min-height:0}h1{font-size:50px;letter-spacing:-3px}.intro{position:relative}.intro>p:not(.eyebrow){font-size:12px}.hero-frog{position:absolute;right:14px;bottom:20px;transform:scale(.5);transform-origin:right bottom;margin:0}.entry{padding:24px}.game-heading{flex-wrap:wrap;gap:8px;padding:18px 0 12px}.game-heading h2{font-size:20px}#status{font-size:10px;margin:0;max-width:180px}.game-heading .eyebrow{font-size:8px}#start{font-size:12px;padding:10px 15px}#hint{font-size:9px}.player{padding:8px;font-size:10px;gap:6px}footer{font-size:8px;line-height:1.6}footer span:last-child{text-align:right}}
@media(max-height:550px) and (orientation:landscape){main{max-width:960px;padding:0 12px}header{height:38px}.game-heading{padding:6px 0}.game-heading h2{font-size:16px;margin:0}.game-heading .eyebrow{display:none}#status{margin:0}.stage{width:min(100%,calc((100dvh - 114px)*1.7778));margin:auto}#controls{position:fixed;bottom:10px;left:12px;right:12px;pointer-events:none;z-index:2;margin:0}#controls button{pointer-events:auto;min-width:58px;min-height:48px;opacity:.85}#controls>button{min-width:92px;font-size:14px}.under-map{margin:8px 0}#players{margin:10px 0}footer{display:none}}