*{box-sizing:border-box} :root{color-scheme:dark;--lime:#b5f83d;--muted:#86917e;--ink:#0b110b}body{margin:0;background:var(--ink);color:#f3f6ec;font-family:"Courier New",monospace;background-image:radial-gradient(ellipse at 50% 25%,#1a2717 0,transparent 65%)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid #fff;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}main{max-width:1020px;margin:0 auto;padding:24px 32px 0}.topline,footer{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:var(--muted)}.topline{padding-bottom:18px;border-bottom:1px solid #293423}#menu{text-align:center;padding:18px 0 14px}.title-logo{width:min(580px,88%);height:195px;object-fit:contain;margin:0 auto 10px}.eyebrow{font-weight:bold;font-size:14px;letter-spacing:4px;color:var(--lime);margin:12px 0 16px}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:820px;margin:0 auto 26px}.cat{background:none;border:0;padding:12px 7px 16px;min-width:0;-webkit-tap-highlight-color:transparent}.cat canvas{display:block;width:100%;height:auto;max-height:225px;object-fit:contain;filter:drop-shadow(0 0 0 transparent);transition:transform .3s ease,filter .3s ease}.cat:hover canvas{transform:translateY(-5px)}.cat span{display:block;font-size:14px;letter-spacing:1px;line-height:1.5;min-height:42px;color:var(--muted);transition:color .3s ease,text-shadow .3s ease}.cat.selected canvas{filter:drop-shadow(0 0 4px #c5ff83aa) drop-shadow(0 0 14px #9ce93899) drop-shadow(0 0 28px #9ce93844);transform:translateY(-4px)}.cat:focus-visible{outline:none}.cat:focus-visible canvas{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 18px #b5f83daa)}.cat.selected span{color:var(--lime);font-weight:bold;text-shadow:0 0 14px #b5f83d66}.primary{border:0;background:var(--lime);color:#102006;font-weight:bold;font-size:18px;letter-spacing:3px;padding:18px 36px;box-shadow:4px 4px 0 #577723}.primary:hover{background:#cfff70}.primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #577723}.instructions{font-family:Arial,sans-serif;font-size:16px;margin:23px 0 14px;color:#d6dccf}.power-explainer{display:flex;align-items:center;justify-content:center;gap:12px;font-family:Arial,sans-serif;font-size:14px;color:var(--muted);line-height:1.5}.power-explainer img{width:34px;height:48px;object-fit:contain}.power-explainer p{margin:0;text-align:left}.power-explainer strong{font-weight:normal;color:#e4e9dc}.control-note{font-size:12px;color:var(--muted);letter-spacing:1px;margin:24px 0}.control-note span{padding:0 6px;color:#47543e}footer{font-size:11px;border-top:1px solid #293423;padding:18px 0 24px;margin-top:20px;letter-spacing:1px}#play{max-width:720px;margin:18px auto 0}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}.game-heading img{width:195px;height:68px;object-fit:contain}.game-actions{display:flex;gap:8px}.game-actions button{background:none;border:1px solid #46543d;padding:10px;font-size:12px;color:#c5ceb9}.scoreboard{display:flex;justify-content:space-between;padding:16px 8px}.scoreboard div{display:flex;flex-direction:column;gap:5px}.scoreboard span{font-size:12px;letter-spacing:2px;color:var(--muted)}.scoreboard strong{font-size:21px;color:var(--lime);letter-spacing:2px}.scoreboard div:last-child{text-align:right}#board-wrap{position:relative;border:1px solid #455b31;padding:6px;background:#071007;box-shadow:0 0 45px #92cd1b0a}#board{display:block;width:100%;height:auto;touch-action:none}#overlay{position:absolute;inset:0;background:#081007e8;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}#overlay h1{font-size:clamp(25px,6vw,38px);letter-spacing:3px;margin:8px 0 12px}#overlay-detail{font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#becbb2;margin:0 0 26px}.text-button{background:none;border:0;border-bottom:1px solid #60744f;padding:8px 0;margin:22px 0 0;color:#c7d7ba;font-size:12px;letter-spacing:1px}.power-status{display:flex;align-items:center;gap:16px;margin:15px 0;font-size:12px;color:var(--muted)}#status{flex:1;color:var(--lime);min-width:120px}.power-meter{width:90px;background:#29371f;height:5px}#power-fill{background:#ffd34d;height:100%;width:0}#remaining{white-space:nowrap}.touch-controls{display:none;text-align:center;user-select:none}.touch-controls button{width:58px;height:45px;background:#1f3017;border:1px solid #56723c;margin:3px;font-size:22px;color:var(--lime);border-radius:4px}.touch-controls button:active{background:#506d2b}#play>.control-note{text-align:center}#load-error{color:#ffbca9;font-family:Arial,sans-serif;font-size:16px} @media (pointer:coarse){.touch-controls{display:block}}@media(max-width:600px){main{padding:16px 16px 0}.topline{font-size:10px;letter-spacing:1px}.edition{display:none}.title-logo{height:142px;width:100%;margin:4px 0}.cats{grid-template-columns:repeat(2,1fr);gap:12px;max-width:340px;margin-bottom:22px}.cat canvas{max-height:175px}.cat{padding:5px 4px 12px}.cat span{font-size:12px}.eyebrow{font-size:12px;margin:8px 0 14px}.primary{padding:16px 28px;font-size:16px}.control-note{font-size:10px;line-height:1.7;margin:18px 0}.game-heading img{width:145px}.game-heading{height:52px}.game-actions button{padding:9px 7px;font-size:10px}.scoreboard{padding:12px 4px}.scoreboard strong{font-size:18px}.power-status{gap:8px;font-size:10px}.power-meter{width:55px}.touch-controls{display:block}footer{font-size:9px}.instructions{font-size:15px}}@media(prefers-reduced-motion:reduce){.cat canvas,.cat,.cat span{transition:none}}

.powered #board-wrap{border-color:#9ec6ff;box-shadow:-18px 0 65px #ff35cf30,18px 0 65px #00e9ff30,0 20px 65px #ffe33d24;transition:box-shadow .5s,border-color .5s}.powered #status{color:#ffd34d}.tunnel-note{text-align:center;color:#8cc7b8;font-size:12px;letter-spacing:1px;margin:14px 0 0}#board-wrap{transition:box-shadow .5s,border-color .5s}
#joystick{position:relative;display:block;width:96px;height:96px;border-radius:50%;margin:0 auto;background:radial-gradient(circle,#20381c,#10210d);border:2px solid #567d3b;box-shadow:inset 0 0 18px #050d07,0 0 18px #9cf73512;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow:visible}#joystick .joystick-knob{position:absolute;left:calc(50% - 21px);top:calc(50% - 21px);width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b7f861,#548c2b);box-shadow:0 4px 12px #0008;border:1px solid #a5dd5c;pointer-events:none}.joystick-label{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:5px}.board-slot{width:100%}
@media(max-width:600px),(pointer:coarse){
 html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}body{height:100vh;height:100dvh}main{height:100%;width:100%;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow:hidden}.topline,footer{display:none}#play{width:100%;max-width:none;height:100%;min-height:0;margin:0;display:flex;flex-direction:column;gap:0}.game-heading{height:42px;flex:none}.game-heading img{width:130px;height:40px}.game-actions button{font-size:10px;padding:8px}.scoreboard{flex:none;padding:5px 4px 8px}.scoreboard span{font-size:10px}.scoreboard strong{font-size:17px}.scoreboard div{gap:3px}.board-slot{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#board-wrap{flex:none;max-width:100%;margin:0}#board{outline-offset:0}.power-status{flex:none;font-size:10px;margin:7px 2px;gap:8px}.power-meter{width:52px}.touch-controls{display:block;flex:none;padding:3px 0 0}#joystick{width:88px;height:88px}#play>.control-note,#play>.tunnel-note{display:none}#overlay{padding:12px}#overlay h1{font-size:22px;margin:4px 0 8px}#overlay .eyebrow{font-size:10px;letter-spacing:2px;margin:6px 0}#overlay-detail{font-size:13px;margin-bottom:12px}#overlay .primary{padding:12px 18px;font-size:13px;letter-spacing:1px}#overlay .text-button{font-size:10px;margin-top:14px}
 #menu{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0}.title-logo{flex:none;width:min(100%,420px);height:clamp(50px,12dvh,95px);margin:0 0 5px}#menu>.eyebrow{flex:none;margin:5px 0 8px}.cats{flex:1;min-height:0;width:min(100%,360px);max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 10px}.cat{min-height:0;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center}.cat canvas{width:100%;height:calc(100% - 32px);min-height:0;max-height:none;object-fit:contain}.cat span{flex:none;min-height:26px;font-size:11px;line-height:1.2;letter-spacing:.5px;padding-top:6px}#menu>.primary{flex:none;padding:13px 24px;font-size:15px;letter-spacing:2px}.instructions{flex:none;font-size:13px;margin:12px 0 7px}.power-explainer{flex:none;font-size:12px;gap:8px}.power-explainer img{width:25px;height:34px}#menu>.control-note{display:none}#load-error{font-size:12px;margin:3px}
}
@media(max-height:500px) and (pointer:coarse){
 #play{display:grid;grid-template-columns:95px minmax(0,1fr) 105px;grid-template-rows:36px minmax(0,1fr) 25px;column-gap:8px}.game-heading{grid-column:1/4;height:36px}.game-heading img{height:34px}.scoreboard{grid-column:1;grid-row:2;flex-direction:column;justify-content:center;gap:14px}.scoreboard div:last-child{text-align:left}.board-slot{grid-column:2;grid-row:2;height:100%}.power-status{grid-column:1/4;grid-row:3;margin:3px 0}.touch-controls{grid-column:3;grid-row:2;align-self:center}.cats{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);width:100%;max-width:700px}.title-logo{height:42px}#menu>.eyebrow{margin:2px 0 4px}.power-explainer,.instructions{display:none}#menu>.primary{padding:10px 22px}
}
/* Arcade thumb stick: dark outer rings and a raised center pad. */
#joystick{background:radial-gradient(circle at 40% 32%,#24352c 0%,#17231e 38%,#080d0b 72%,#030605 100%);border:3px solid #060b08;box-shadow:0 0 0 2px #415448,inset 0 0 0 6px #101b15,inset 0 0 0 9px #34463a,inset 0 0 0 13px #050b07,inset 0 0 0 16px #23392b,0 5px 12px #0008;}
#joystick .joystick-knob{background:radial-gradient(circle at 32% 22%,#64736b 0%,#35473b 16%,#18271e 43%,#080f0b 72%,#030704 100%);border:2px solid #08110b;box-shadow:inset 0 2px 2px #b4c8b14d,inset 0 -3px 5px #000,0 0 0 2px #344d39,0 5px 8px #000a;}
#joystick:active{background:radial-gradient(circle at 40% 32%,#293f30,#080f0b 75%);}

/* 3D joystick (three.js): the WebGL canvas fills the dish at device resolution. The .joystick-knob span is the moving DOM fallback. */
#joystick{overflow:hidden;padding:0}#joystick canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:50%;pointer-events:none}#joystick .joystick-knob{transition:none;will-change:transform}
#joystick.joystick-3d{background:radial-gradient(circle at 50% 45%,#101b14 0%,#070c09 70%,#030605 100%);box-shadow:0 0 0 2px #415448,0 6px 14px #000a,0 0 22px #9cf73518}
#joystick.joystick-3d:active{background:radial-gradient(circle at 50% 45%,#16261b 0%,#070c09 70%)}
.sound-hint{font-size:11px;letter-spacing:2px;color:#ffd34d;margin:-10px 0 14px;animation:hint-blink 1.6s steps(2,end) infinite}
@keyframes hint-blink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.sound-hint{animation:none}}
@media(max-width:600px),(pointer:coarse){.sound-hint{flex:none;font-size:10px;margin:0 0 6px}#joystick{width:104px;height:104px}}
@media(max-height:500px) and (pointer:coarse){#joystick{width:92px;height:92px}}
/* Mobile controls: D-pad (default) or the 3D stick, switched by #controls-toggle. iOS needs touch-action:none to keep drags. */
#joystick{touch-action:none}.touch-controls{touch-action:none;user-select:none;-webkit-user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,44px);gap:4px;justify-content:center;margin:0 auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.touch-controls .dpad button{width:auto;height:auto;margin:0;font-size:18px;line-height:1;padding:0;touch-action:none}
.dpad [data-dir=up]{grid-area:1/2}.dpad [data-dir=left]{grid-area:2/1}.dpad [data-dir=right]{grid-area:2/3}.dpad [data-dir=down]{grid-area:3/2}
.touch-controls #controls-toggle{display:block;width:auto;height:auto;margin:6px auto 0;padding:4px 0;font-size:10px;color:#c7d7ba;background:none;border:0;border-bottom:1px solid #60744f;border-radius:0}
@media(max-height:500px) and (pointer:coarse){.dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,30px);gap:3px}.touch-controls .dpad button{font-size:14px}}
.overlay-result{font-family:Arial,sans-serif;font-size:15px;color:var(--lime);margin:-14px 0 18px;letter-spacing:.5px}.overlay-result.muted{color:var(--muted)}
.modal{position:fixed;inset:0;background:#050905e6;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal-card{width:min(440px,100%);max-height:100%;overflow:auto;background:#0b140b;border:1px solid #455b31;box-shadow:0 0 45px #92cd1b14;padding:22px 22px 18px;text-align:center}
.modal-card h2{font-size:clamp(20px,5vw,26px);letter-spacing:3px;margin:4px 0 14px}
.signup-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.signup-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:2px;color:var(--muted)}
.signup-form input[type=text],.signup-form input[type=email]{font:inherit;font-size:16px;letter-spacing:1px;padding:12px;background:#071007;border:1px solid #46543d;color:#f3f6ec}
.signup-form input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.signup-form .primary{margin-top:6px;width:100%}
.consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-family:Arial,sans-serif;font-size:13px;letter-spacing:0!important;line-height:1.45;color:#becbb2!important}
.consent input{margin-top:3px;accent-color:var(--lime)}.consent a{color:var(--lime)}
.field-hint{font-family:Arial,sans-serif;font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.field-error{font-family:Arial,sans-serif;font-size:14px;color:#ffbca9;margin:12px 0 0}
#su-cancel{margin-top:10px}#su-mode,#su-resend{align-self:flex-start;margin:0}#overlay-join{margin:0 0 18px}
@media(max-width:600px),(pointer:coarse){.overlay-result{font-size:12px;margin:-4px 0 10px}#overlay-join{margin:0 0 12px!important}}
#leaderboard{display:block;margin:14px auto 0}
.board-list{list-style:none;margin:8px 0 14px;padding:0;text-align:left;max-height:48vh;overflow:auto;border-top:1px solid #293423}
.board-list li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:9px 4px;border-bottom:1px solid #1d2a19;font-size:14px;letter-spacing:1px}
.board-list li span:first-child{color:var(--muted)}.board-list li span:last-child{color:var(--lime);font-weight:bold}
.board-list li:nth-child(-n+3) span:nth-child(2){color:#ffd34d}
.board-me{font-family:Arial,sans-serif;font-size:14px;color:#becbb2;margin:0 0 12px}
.board-actions{display:flex;justify-content:center;gap:18px}