@import url('site.css');
:root{--accent:#a9efd0;--edge:#30564b;--gold:#eec879}body{overflow:hidden;touch-action:none;overscroll-behavior:none;background:#0b1419}.gold-game{--accent:#efd393;--edge:#685b3c}
.cabinet{height:100dvh;max-width:1500px;margin:auto;display:flex;flex-direction:column;padding:0 24px}.topbar{height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff12}.topbar a{font-weight:800;font-size:13px;letter-spacing:.14em;color:#edf1e9;text-decoration:none}.topbar a span{color:var(--accent)}.cartridge-name{font-size:11px;letter-spacing:.12em;color:#a8b5b0}.toolbar{display:flex;gap:7px}.toolbar button{min-height:36px;padding:0 12px;font-size:10px;letter-spacing:.08em;background:#15252b;border:1px solid #ffffff20;border-radius:5px;color:#e1e9e3}.toolbar button:hover{border-color:var(--accent)}
.statusbar{height:52px;display:flex;align-items:center;gap:18px;flex-shrink:0}.hearts{color:#efb59b;letter-spacing:3px;font-size:18px}.pieces{display:flex;gap:5px;margin:auto}.pieces span{font:9px ui-monospace,monospace;letter-spacing:.06em;padding:6px 9px;border:1px solid #ffffff18;border-radius:3px;color:#81948e}.pieces .collected{border-color:var(--accent);background:#a9efd013;color:var(--accent)}.score{font:12px ui-monospace,monospace;color:var(--gold)}
.screen{position:relative;flex:1;min-height:0;max-height:700px;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#101d24;box-shadow:0 12px 60px #0005}.screen canvas{display:block;width:100%;height:100%;outline:none;image-rendering:pixelated;touch-action:none}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0px,transparent 3px,#0000000b 3px,#0000000b 4px);z-index:1}.objective{position:absolute;left:18px;top:14px;font-size:10px;color:#d6e9d7;text-shadow:0 2px 3px #000;background:#07161cc9;padding:8px 10px;border-left:2px solid var(--accent);max-width:80%;z-index:2}.message{position:absolute;left:50%;bottom:20px;transform:translate(-50%,8px);max-width:90%;width:max-content;padding:12px 18px;background:#0c191fee;border:1px solid var(--accent);color:#f2eada;border-radius:4px;text-align:center;font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}.message.show{opacity:1;transform:translate(-50%,0)}
.control-deck{height:174px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 24px 16px}.dpad{width:136px;height:136px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);filter:drop-shadow(0 6px 0 #050c10)}.dpad button{border:1px solid #36505a;background:linear-gradient(#2a414b,#182a33);font-size:17px;color:#b4c8c9;touch-action:none;user-select:none;box-shadow:inset 0 2px #ffffff0c}.dpad button[data-key=up]{grid-column:2;border-radius:7px 7px 0 0}.dpad button[data-key=left]{grid-column:1;grid-row:2;border-radius:7px 0 0 7px}.dpad button[data-key=right]{grid-column:3;grid-row:2;border-radius:0 7px 7px 0}.dpad button[data-key=down]{grid-column:2;grid-row:3;border-radius:0 0 7px 7px}.dpad .center{grid-row:2;grid-column:2;background:#20343e;border:1px solid #36505a;display:grid;place-items:center;color:#56717b;font-size:22px}.dpad .held,.dpad button:active{background:#457263;color:#fff}.deck-label{display:flex;flex-direction:column;align-items:center;gap:8px;color:#617c7a;font-size:9px;letter-spacing:.17em}.deck-label strong{font:italic 22px Georgia,serif;color:#a8b7a4}.action-buttons{display:flex;align-items:center;gap:20px;transform:rotate(-10deg)}.action-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;transform:rotate(10deg)}.action-wrap span{font-size:9px;letter-spacing:.1em;color:#8ba59d}.action-buttons button{width:72px;height:72px;border-radius:50%;border:5px solid #0d1b21;background:radial-gradient(circle at 35% 25%,#efc981,#c38b43);color:#302716;font:bold 30px Georgia,serif;box-shadow:0 5px 0 #614a2d,0 0 0 1px #80623d,inset 0 2px 0 #fff5;touch-action:none;user-select:none}.action-buttons button[data-key=b]{background:radial-gradient(circle at 35% 25%,#8cceba,#447c6a);color:#0d3228;box-shadow:0 5px 0 #214d42,0 0 0 1px #477e69,inset 0 2px 0 #fff5}.action-buttons .held,.action-buttons button:active{transform:translateY(4px);filter:brightness(1.25);box-shadow:0 1px 0 #614a2d}
.keyboard-strip{height:27px;text-align:center;color:#607872;font-size:9px;letter-spacing:.12em;flex-shrink:0}.overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:auto;padding:22px;background:linear-gradient(100deg,#08171ce8,#08171cb8);backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.menu-panel{width:min(620px,100%);text-align:center;padding:24px 0}.menu-kicker{font:10px ui-monospace,monospace;letter-spacing:.2em;color:var(--accent);margin-bottom:16px}.menu-panel h1{font:clamp(27px,5vw,57px)/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:.025em;margin:0 0 18px;color:#f2eada}.menu-panel h1 em{color:var(--accent);font-style:normal}.menu-panel p{font:15px/1.6 Georgia,serif;color:#c2d1c6;margin:15px auto 22px}.menu-controls{display:flex;justify-content:center;gap:22px;margin:24px 0;color:#c2d1c6;font:9px ui-monospace,monospace}.menu-controls b{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #78988a;border-radius:50%;color:var(--accent);margin-right:6px}.menu-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.menu-actions button,.menu-actions a,.choice-list button{padding:13px 20px;border:1px solid #628572;background:#14292c;color:#d3e1d5;font:bold 10px ui-monospace,monospace;letter-spacing:.1em;border-radius:3px;text-decoration:none}.menu-actions .primary{background:var(--accent);color:#11261f;border-color:var(--accent)}.menu-panel small{display:block;margin-top:22px;font:10px/1.6 ui-monospace,monospace;color:#9db4a9}.option-list{max-width:450px;margin:20px auto;text-align:left}.option-list label{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #ffffff17;font-size:14px}.option-list small{margin:4px 0 0;font-size:10px}.option-list input{width:23px;height:23px;accent-color:var(--accent)}.choice-list{display:grid;gap:10px;margin:20px auto;max-width:430px}.quiet{border:0;background:none;color:#bfd1c2;font-size:10px;padding:12px}.inventory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.inventory-grid article{border:1px solid #ffffff25;border-radius:4px;padding:18px 10px;font-size:12px;text-align:left;background:#182b2d}.inventory-grid b{color:var(--accent);display:block;font:13px Georgia}.inventory-grid small{font-size:10px;margin:10px 0 0}.inventory-grid .empty{opacity:.5}.menu-panel .dialogue-title{font-size:36px}
@media(max-width:650px){.cabinet{padding:0 10px}.topbar{height:52px}.topbar a{font-size:11px;letter-spacing:.04em}.cartridge-name{display:none}.toolbar{gap:4px}.toolbar button{padding:0 8px;font-size:9px;min-height:32px}.statusbar{height:44px;gap:5px}.hearts{font-size:15px;letter-spacing:1px}.pieces span{padding:5px;font-size:8px}.score{font-size:10px}.screen{border-radius:5px}.control-deck{height:190px;padding:16px 12px max(16px,env(safe-area-inset-bottom))}.dpad{width:142px;height:142px}.deck-label{display:none}.action-buttons{gap:10px}.action-buttons button{width:67px;height:67px}.action-wrap span{font-size:8px}.keyboard-strip{display:none}.objective{left:10px;top:10px;font-size:9px;max-width:90%}.message{font-size:11px;padding:9px 12px;bottom:12px}.overlay{padding:18px}.menu-panel h1{font-size:37px}.menu-panel p{font-size:13px}.menu-controls{gap:10px;font-size:8px;margin:18px 0}.menu-actions button,.menu-actions a{padding:12px 15px}.menu-panel small{font-size:9px;margin-top:14px}.menu-panel{padding:12px 0}.menu-kicker{font-size:9px;letter-spacing:.12em}.inventory-grid{grid-template-columns:1fr;margin:14px 0}.inventory-grid article{padding:10px}.inventory-grid small{margin:5px 0 0}}
@media(max-height:550px) and (min-aspect-ratio:1/1){.cabinet{padding:0 8px}.topbar{height:39px}.statusbar{height:32px;padding:0 100px}.screen{max-height:none}.control-deck{position:absolute;left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));height:115px;padding:0;z-index:3;pointer-events:none}.control-deck button{pointer-events:auto;opacity:.83}.dpad{width:115px;height:115px}.action-buttons button{width:59px;height:59px}.action-buttons{gap:14px}.action-wrap span,.deck-label,.keyboard-strip{display:none}.message{bottom:12px;max-width:55%}.menu-panel{padding:5px 0}.menu-panel h1{font-size:34px;margin-bottom:10px}.menu-kicker{margin-bottom:9px}.menu-panel p{font-size:12px;margin:8px 0 12px}.menu-controls{margin:10px 0}.menu-panel small{margin-top:12px}.overlay{padding:12px}.option-list{margin:8px auto}.option-list label{padding:9px 0}.inventory-grid{grid-template-columns:repeat(3,1fr)}}
.expanded .topbar{height:36px}.expanded .statusbar{height:32px}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.reduced-motion *{transition:none!important}
.overlay{align-items:safe center;touch-action:pan-y;overscroll-behavior:contain}.menu-panel{margin:auto}
@media(max-width:360px){.control-deck{padding-left:8px;padding-right:8px}.dpad{width:132px;height:132px}.action-buttons button{width:60px;height:60px}.action-buttons{gap:8px}.gold-game .topbar a{font-size:9px}.gold-game .toolbar button{padding:0 6px;font-size:8px}.pieces span{font-size:7px;padding:4px}.hearts{font-size:13px}.menu-panel h1{font-size:32px}.menu-controls{flex-wrap:wrap;gap:8px}}
@media(max-height:550px) and (min-aspect-ratio:1/1){.control-deck{height:132px}.dpad{width:132px;height:132px}}
