@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Press+Start+2P&display=swap');

:root { color-scheme: dark; --gold:#f5c542; --ink:#080b16; --panel:#101629; --cream:#ffe9ad; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; background:#050710; }
body { min-height:100vh; display:grid; place-items:center; color:var(--cream); font-family:"Press Start 2P",monospace; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#18213a 0,#090d1b 42%,#03050b 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:4px 4px; }
.game-shell { width:min(100vw,1120px); padding:16px; }
.brandbar { display:flex; justify-content:space-between; align-items:center; padding:0 4px 12px; color:var(--gold); font-size:11px; letter-spacing:1px; }
.brand-mark { color:#ff7444; }.level-label { color:#7886aa; font-size:8px; }
.game-frame { position:relative; width:100%; aspect-ratio:16/9; border:4px solid #303b5b; box-shadow:0 0 0 4px #090c16,0 22px 65px #000c; background:#090d1b; image-rendering:pixelated; overflow:hidden; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; outline:none; }
.touch-controls{display:none;position:absolute;inset:0;pointer-events:none;z-index:4;user-select:none;-webkit-user-select:none;touch-action:none}.touch-left,.touch-right{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:12px}.touch-left{left:max(16px,env(safe-area-inset-left))}.touch-right{right:max(16px,env(safe-area-inset-right))}.touch-controls button{pointer-events:auto;width:clamp(58px,9dvw,70px);height:clamp(58px,9dvw,70px);min-height:0;margin:0;border-radius:50%;background:#11182bbd;border:2px solid #d6c47799;color:#fff;font-size:22px;touch-action:none;box-shadow:inset 0 0 0 3px #ffffff12}.touch-controls button.pressed{background:#f2b83ecc;color:#161322;transform:scale(.94)}.touch-controls small{display:block;font:6px "Press Start 2P";margin-top:5px}.rotate-hint{display:none;position:absolute;z-index:8;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;background:#090d1be8;border:1px solid #697797;padding:8px;font-size:7px}.fullscreen-button{display:none;position:absolute;z-index:10;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:42px;height:42px;min-height:0;margin:0;padding:0;border-radius:8px;background:#0a1022b8;font-size:22px;line-height:1;touch-action:manipulation}.fullscreen-button.active{border-color:#f5c542;color:#f5c542}
.screen { position:absolute; inset:0; display:none; place-items:center; padding:18px; background:linear-gradient(#080b1688,#080b16c9),url('../assets/ruins-menu.png') center/cover no-repeat; text-align:center; }
.screen.active { display:grid; }
.panel { width:min(440px,92%); padding:28px 32px; border:3px solid #b98735; background:linear-gradient(180deg,#18203a 0,#0d1224 100%); box-shadow:0 0 0 5px #090c18,0 0 0 8px #3c2c24,0 18px 50px #000; }
.menu-panel { animation:rise .5s steps(5); }
@keyframes rise { from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1} }
.eyebrow { color:#9ca6c4; font-size:7px; letter-spacing:2px; margin:7px 0 11px; }
h1 { margin:0; font-family:"Jersey 10",sans-serif; font-size:82px; line-height:.64; letter-spacing:3px; color:#f7f0cc; text-shadow:4px 4px 0 #8a3c2e,7px 7px 0 #351a24; }
h1 span { color:var(--gold); }.subtitle { margin:20px 0 26px; color:#df9a43; font-size:10px; letter-spacing:3px; }
.sun-emblem { width:35px;height:35px;margin:0 auto 13px;background:#e8a83e;transform:rotate(45deg);box-shadow:0 0 22px #e8a83e66; position:relative; }
.sun-emblem::after { content:""; position:absolute; inset:9px; background:#562b28; border:3px solid #ffe07b; }
button { display:block; width:100%; min-height:46px; margin:10px 0; border:2px solid #526184; background:#171f38; color:#eae1be; font:10px "Press Start 2P",monospace; cursor:pointer; box-shadow:inset -3px -3px #0b1020,inset 3px 3px #2c385e; }
button:hover,button:focus-visible { color:#fff; border-color:#f2b83e; transform:translateY(-1px); outline:none; }
button.primary { color:#1a1520; background:#f2b83e; border-color:#ffe68a; box-shadow:inset -4px -4px #b96f2f,inset 3px 3px #fff0a5; }
button b { float:right;font-size:18px;line-height:7px; }.best { margin:22px 0 0;color:#697797;font-size:7px; }
footer { display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding-top:14px;color:#7d89a7;font-size:7px; }
kbd { display:inline-grid;place-items:center;min-width:21px;height:20px;margin-right:4px;border:1px solid #697797;background:#151b2d;color:#d7ddb9;box-shadow:0 2px #303a59;font:8px "Press Start 2P"; }
.toast { position:absolute; left:50%; top:82px; transform:translate(-50%,-12px); opacity:0; padding:10px 14px; background:#101629e8; border:2px solid #f5c542; color:#ffe791; font-size:9px; transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.screen h2 { font-family:"Jersey 10";font-size:54px;letter-spacing:2px;margin:0 0 8px;color:var(--gold);text-shadow:3px 3px #60312d; }
.screen p { font-size:8px; line-height:2; color:#afb8d3; }.screen .stats { color:#ffe29a; margin:14px 0; }
.controls-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:18px 0 24px;font-size:8px;line-height:2; }
.level-panel{width:min(650px,95%);padding:20px}.level-panel h2{font-size:38px}.level-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:330px;overflow:auto;padding:3px}.level-card{min-height:52px;margin:0;text-align:left;padding:9px;font-size:7px}.level-card small{display:block;margin-top:7px;color:#8ed7de;font-size:6px}.level-card.locked{opacity:.4;cursor:not-allowed}.level-card.locked:hover{transform:none;border-color:#526184}
@media(max-width:700px){.game-shell{padding:6px}.brandbar{display:none}footer{display:none}.game-frame{border-width:2px}h1{font-size:54px}.panel{padding:18px}.subtitle{font-size:7px;margin-bottom:15px}.sun-emblem{display:none}button{min-height:40px}.screen h2{font-size:40px}}
@media(pointer:coarse),(max-width:950px){html,body{width:100dvw;height:100dvh;min-height:100dvh;overflow:hidden;overscroll-behavior:none}body{display:block}.game-shell{width:100dvw;height:100dvh;padding:0;overflow:hidden}.brandbar,footer{display:none}.game-frame{width:100dvw;height:100dvh;aspect-ratio:auto;border:0;box-shadow:none;margin:0;overflow:hidden}canvas{width:100%;height:100%;object-fit:contain;background:#050710}.fullscreen-button{display:block}body.is-playing,body.is-playing .game-frame{touch-action:none;user-select:none;-webkit-user-select:none}}
@media(pointer:coarse){.touch-controls{display:block}.screen.active~.touch-controls{display:none}}
@media(pointer:coarse) and (orientation:portrait),(max-width:950px) and (orientation:portrait){.rotate-hint{display:block;top:max(10px,env(safe-area-inset-top));bottom:auto;left:max(10px,env(safe-area-inset-left));right:70px;transform:none;text-align:center;white-space:normal;line-height:1.5}.touch-left,.touch-right{bottom:max(18px,env(safe-area-inset-bottom))}}
@media(pointer:coarse) and (orientation:landscape),(max-width:950px) and (orientation:landscape){.game-frame{position:fixed;inset:0;width:100dvw;height:100dvh}.touch-left,.touch-right{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:500px) and (orientation:landscape){.screen{padding:5px}.menu-panel{padding:9px 24px}.menu-panel .sun-emblem{display:none}.menu-panel .eyebrow{margin:2px 0 7px}.menu-panel h1{font-size:52px;line-height:.62}.menu-panel .subtitle{margin:12px 0}.menu-panel button{min-height:34px;margin:5px 0}.menu-panel .best{margin-top:8px}.level-panel{padding:8px 16px}.level-panel h2{font-size:30px;margin-bottom:4px}.level-list{max-height:260px}}
.music-button{position:absolute;z-index:10;top:max(10px,env(safe-area-inset-top));right:max(60px,calc(env(safe-area-inset-right) + 50px));width:42px;height:42px;min-height:0;margin:0;padding:0;border-radius:8px;background:#0a1022d9;font-size:20px;line-height:1}.music-button.muted{color:#747d96;filter:grayscale(1)}
.help-panel{width:min(720px,96%);padding:20px}.help-tabs{display:flex;gap:6px}.help-tabs button{font-size:7px;min-height:35px;margin:3px}.help-copy{text-align:left;background:#080d1cc9;border:1px solid #526184;padding:14px 18px;min-height:180px}.help-copy h3{margin:0 0 10px;color:#f5c542;font:25px "Jersey 10"}.help-copy p{margin:6px 0}.help-copy strong{color:#fff0b0}.shield-legend{color:#71e8ff!important}
@media(max-height:500px) and (orientation:landscape){.help-panel{padding:7px 12px}.help-panel h2{font-size:28px}.help-copy{min-height:110px;padding:6px 10px}.help-copy p{line-height:1.35}.help-tabs button{min-height:28px}}