*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#07070d;color:#e8e8d0;font-family:"Courier New",monospace;-webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
canvas#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;top:calc(4px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));display:flex;gap:4px 12px;align-items:center;font-size:15px;font-weight:bold;color:var(--hud,#ffd84a);pointer-events:none;text-shadow:1px 1px 0 #000;background:rgba(0,0,0,.5);padding:5px 10px;border-radius:6px;max-width:calc(100% - 150px);flex-wrap:wrap}
#hud b{margin-left:3px;color:#fff}
#topRight{position:absolute;top:calc(4px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right));display:flex;gap:6px}
.ctl{pointer-events:auto;font-family:inherit;font-weight:bold;background:rgba(20,20,35,.55);color:#ffd84a;border:2px solid rgba(255,216,74,.7);box-shadow:none;padding:0;touch-action:none}
.ctl.small{width:40px;height:40px;font-size:18px;border-radius:8px}
#dpad{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;background:rgba(20,20,35,.45);border:2px solid rgba(255,216,74,.55);touch-action:none;display:none}
#dpad span{position:absolute;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(255,216,74,.85);pointer-events:none}
#dpad .u{left:47px;top:0}#dpad .d{left:47px;bottom:0}#dpad .l{left:0;top:47px}#dpad .r{right:0;top:47px}
#dpad[data-dir=up] .u,#dpad[data-dir=down] .d,#dpad[data-dir=left] .l,#dpad[data-dir=right] .r{color:#fff;text-shadow:0 0 8px #ffd84a}
#pumpBtn{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));width:110px;height:110px;border-radius:50%;font-size:22px;display:none;background:rgba(200,50,40,.45)}
#pumpBtn.on{background:rgba(255,216,74,.5);transform:scale(.94)}
@media (pointer:coarse){#dpad,#pumpBtn{display:block}}
body.touch #dpad,body.touch #pumpBtn{display:block}
#pausedMsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;color:#ffd84a;background:rgba(0,0,0,.35);pointer-events:none}
#pausedMsg[hidden]{display:none}
.overlay{position:absolute;inset:0;background:rgba(8,8,20,.86);display:flex;align-items:center;justify-content:center;padding:8px;overflow:auto;text-align:center;z-index:20}
.overlay[hidden]{display:none}
.card{border:3px solid #556;background:#14141f;padding:10px 14px;box-shadow:4px 4px 0 #000;max-width:560px;width:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
h1{margin:0;letter-spacing:3px;color:#ffd84a;text-shadow:3px 3px 0 #a33;font-size:28px}
h2{margin:0;color:#ffd84a}
.label{color:#7fd;font-weight:bold}
#themes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.themeBtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#222233;color:#eee;border:2px solid #556;box-shadow:none;padding:4px 6px;font-size:12px;width:96px;min-height:56px}
.themeBtn canvas{width:48px;height:24px;image-rendering:pixelated}
.themeBtn.sel{border-color:#ffd84a;background:#3a3410;color:#ffd84a}
#themeBlurb{font-size:13px;min-height:2.4em;opacity:.9}
.card ol{text-align:left;margin:0;padding-left:22px;max-height:7.5em;overflow:auto;font-size:14px}
.card li.me{color:#ffd84a}
details{font-size:13px;text-align:left}summary{cursor:pointer;color:#7fd;text-align:center}.hints{font-size:12px;opacity:.85}
input{font-family:inherit;background:#000;color:#9f9;border:2px solid #556;padding:4px;font-size:16px}
button{font-family:inherit;font-weight:bold;background:#ffd84a;color:#111;border:0;padding:8px 14px;box-shadow:3px 3px 0 #a33;cursor:pointer;font-size:16px}
#startBtn,#againBtn{font-size:22px;padding:12px 36px;min-height:56px}
#rotatePrompt{display:none;position:absolute;inset:0;z-index:50;background:#07070d;color:#ffd84a;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:20px;text-align:center;padding:20px}
#rotatePrompt .phone{font-size:64px;animation:spin 2s ease-in-out infinite}
@keyframes spin{0%,30%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}}
@media (orientation:landscape) and (pointer:coarse) and (max-height:500px){#rotatePrompt{display:flex}}
/* ---- change panel / pause menu / controller ---- */
#hud{max-width:calc(100% - 196px)}
#pausedMsg{pointer-events:auto;z-index:15;font-size:inherit}
.pauseCard{max-width:320px}
.pauseCard h2{font-size:34px}
.pauseCard button{width:100%}
button.secondary{background:#2a2a40;color:#ffd84a;border:2px solid #ffd84a;box-shadow:2px 2px 0 #000;font-size:14px;padding:6px 10px}
.quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.quick button{font-size:14px;padding:7px 9px;box-shadow:2px 2px 0 #a33}
.quick button.sel{outline:2px solid #fff}
#cmdForm{display:flex;gap:6px;width:100%}#cmdInput{flex:1;min-width:0}
#changeLog{white-space:pre-line;font-size:14px;color:#9f9;min-height:2.6em;text-align:left;width:100%;background:#000;padding:6px;border:1px solid #334}
#aiStatus{font-size:12px;opacity:.8}
.row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#changePanel{z-index:30}
#toast{position:absolute;left:50%;top:56px;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#9f9;padding:6px 12px;border:1px solid #9f9;z-index:25;pointer-events:none;font-size:14px;white-space:pre-line;max-width:90%}
#toast[hidden]{display:none}
#padHints{display:none}
/* controller focus highlight */
body.pad :focus{outline:4px solid #fff !important;outline-offset:3px;box-shadow:0 0 0 8px rgba(255,216,74,.55) !important}
body.pad button:focus{transform:scale(1.06)}
/* gamepad active: hide touch controls */
body.pad #dpad,body.pad #pumpBtn{display:none !important}
/* TV / 10-foot layout (gamepad on a large non-touch screen); 5% safe area for overscan */
body.tv #hud{top:5vh;left:5vw;flex-direction:column;align-items:flex-start;font-size:clamp(22px,2.6vh,40px);gap:10px;padding:14px 20px;max-width:21vw}
body.tv #topRight{top:5vh;right:5vw}
body.tv .ctl.small{width:64px;height:64px;font-size:30px}
body.tv #padHints{display:flex;flex-direction:column;gap:6px;position:absolute;left:5vw;bottom:5vh;max-width:21vw;font-size:clamp(16px,1.9vh,28px);color:#cfc;background:rgba(0,0,0,.5);padding:12px 18px;border-radius:8px;pointer-events:none}
body.tv #padHints b{color:#ffd84a}
body.tv .overlay{padding:5vh 5vw}
body.tv .card{transform:scale(1.45);max-width:760px}
body.tv #toast{top:6vh;font-size:24px}
body.tv #pausedMsg .card{transform:scale(1.8)}
#topRight{z-index:16}