@font-face{font-family:Bob7;src:url('fonts/bobco-7.ttf')}@font-face{font-family:Bob8;src:url('fonts/bobco-8.ttf')}@font-face{font-family:Bob9;src:url('fonts/bobco-9.ttf')}
:root{color-scheme:dark;--pink:#fa77b2;--green:#b5f285;--muted:#8b8a9c}*{box-sizing:border-box}body{margin:0;background:#08090f;color:#f5e8f0;font-family:ui-monospace,Consolas,monospace;background-image:radial-gradient(ellipse at 50% -10%,#361a35 0,transparent 55%),var(--bob-wallpaper,none);background-repeat:no-repeat,repeat;background-size:100% 800px,360px 360px}button{font:inherit;cursor:pointer;touch-action:none}button:focus-visible{outline:2px solid white;outline-offset:2px}.shell{width:min(100%,800px);margin:auto;padding:18px 14px 32px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.brand{font-size:clamp(20px,4vw,30px);font-weight:900;letter-spacing:3px}.brand span{color:var(--pink)}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:3px;margin-top:4px}.tools{display:flex;gap:6px}.tools button{border:1px solid #4a354a;border-radius:4px;background:#18131f;color:#e8b4d0;padding:9px;font-size:11px}.gamebar{display:flex;justify-content:space-between;gap:8px;color:var(--pink);font-size:clamp(10px,2.2vw,14px);padding:12px 6px;letter-spacing:1px}.gamebar b{color:#f8e5b0}.stage{position:relative;border:2px solid #653454;background:#05070d;box-shadow:0 0 45px #4e193a55;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:8/9;image-rendering:pixelated}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#0002 4px);opacity:.42}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#03050cdb;z-index:2;padding:18px;text-align:center}.overlay.hidden{display:none}.modal{max-width:480px}.eyebrow{color:var(--green);font-size:10px;letter-spacing:3px}h1{color:var(--pink);font-size:clamp(26px,6vw,46px);letter-spacing:3px;text-shadow:0 0 20px #f760a277;margin:16px 0}p{line-height:1.6;color:#d5c3d1}.quote{font-style:italic;color:#f8dfae;border-left:2px solid var(--pink);padding:8px 16px}.primary{background:var(--pink);border:0;color:#200b1b;padding:15px 26px;font-weight:900;letter-spacing:2px;margin:16px 0;border-radius:3px}.help{font-size:10px;line-height:1.7;color:#9990a0}.mobile-controls{display:flex;justify-content:space-between;gap:20px;padding:16px 0;user-select:none}.movement{display:flex;gap:12px}.mobile-controls button{border:1px solid #764366;border-radius:8px;background:#251526;color:#ffc8e1;min-width:74px;min-height:64px;font-size:23px}.mobile-controls button:active,.mobile-controls button.pressed{background:#703355}.mobile-controls .fire{background:#632546;border-color:#a94e80;min-width:125px;font-size:17px;font-weight:900}.fire span{font-size:25px}h2{font-size:13px;letter-spacing:2px;color:#f0d7e6}h2 small{font-size:9px;color:#8e8492}.cabinet{margin-top:12px}.games{display:flex;flex-wrap:wrap;gap:8px}.games span{padding:10px;border:1px solid #302334;color:#8e8290;font-size:10px;letter-spacing:1px}footer{text-align:center;color:#6f6472;font-size:9px;letter-spacing:1px;margin-top:28px}@media(min-width:850px){.mobile-controls{max-width:450px;margin:auto}}@media(max-width:450px){.shell{padding:10px 8px}.tools button{padding:7px 5px;font-size:9px}.mobile-controls button{min-width:64px;min-height:60px}.mobile-controls .fire{min-width:100px}}

.games button{padding:12px 10px;border:1px solid #65415b;color:#e9a9cd;background:#160e1a;font-size:11px;letter-spacing:1px}.games button.selected{background:#7d305a;color:white;border-color:#f7a5cf}.dpad{text-align:center}.dpad>div{display:flex;gap:5px}.dpad button{min-width:52px;min-height:48px;font-size:17px}.actions{display:flex;gap:8px;align-items:center}.actions .special{font-size:12px;min-width:85px}.mobile-controls{align-items:center}@media(max-width:500px){.mobile-controls{gap:5px}.dpad button{min-width:41px;min-height:43px}.actions{flex-direction:column;gap:4px}.actions .fire,.actions .special{min-width:85px;min-height:43px}}

/* Icon-only external links, stacked at the lower right of the viewport. */
.arcade-links{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px}
.arcade-links a{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:transform .15s,filter .15s}
.arcade-links a:hover,.arcade-links a:focus-visible{background:transparent;transform:translateX(-3px);filter:brightness(1.18);outline-offset:3px}
.arcade-links img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.arcade-links{right:max(5px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));gap:6px}.arcade-links a{width:39px;height:39px;padding:0}.shell{padding-right:46px}}

.sprite-debug-link{text-align:center;margin:14px 0}.sprite-debug-link a{color:#f4a5ca;font:12px monospace;letter-spacing:.07em}

/* Hide unavailable actions completely, including inside flex/grid controls. */
.mobile-controls button[hidden]{display:none!important}
.mobile-controls .dpad:has(>button[hidden])>button[hidden]{display:none}
.mobile-controls .actions:has(>button:not([hidden])){display:flex}
.mobile-controls .actions:has(>button:not([hidden])) button{flex-shrink:0}