:root{--blue:#174f99;--sky:#dff2ff;--yellow:#ffc400;--red:#f04b32;--ink:#10223b;--paper:#fffdf5}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;place-items:center;background:linear-gradient(135deg,#f7fcff,#cce9f8);font-family:Arial,sans-serif;color:var(--ink)}#shell{width:min(1440px,100%);height:min(960px,100%);aspect-ratio:3/2;display:flex;flex-direction:column;box-shadow:0 24px 80px #315d7c3b;background:#b8dbef}.tape{height:12px;flex:none;background:repeating-linear-gradient(-45deg,var(--yellow) 0 13px,#1c2732 13px 26px)}#stage{position:relative;flex:1;min-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;touch-action:none}#hud{position:absolute;z-index:4;inset:0 0 auto;display:flex;justify-content:space-between;padding:12px 18px;background:linear-gradient(#12365fc7,transparent);color:#fff;font:800 clamp(11px,1.2vw,16px) monospace;text-shadow:1px 2px #10223b}.overlay{position:absolute;z-index:10;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;background:#eaf7fcf2;backdrop-filter:blur(4px)}.overlay.show{display:flex}.eyebrow{font:bold 12px monospace;letter-spacing:.18em;color:#d04427}.overlay h1,.overlay h2{margin:7px 0;font:900 clamp(28px,5vw,54px)/1 Impact,Arial;text-transform:uppercase}.overlay>p:not(.eyebrow){max-width:600px;line-height:1.5;color:#4d6375}.skins{display:flex;gap:14px;margin:18px 0}.skins button{width:150px;height:190px;padding:8px;border:3px solid #a8c6d7;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center}.skins button.selected{border-color:#e0a900;background:#fff5c7;transform:translateY(-5px)}.skins img{height:145px;max-width:100%;object-fit:contain;image-rendering:pixelated}.skins b{margin-top:auto}.cta{border:0;background:var(--yellow);color:#17212a;padding:14px 30px;font:900 18px Impact,Arial;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 5px #bc8f00;cursor:pointer}.cta:active{transform:translateY(3px);box-shadow:0 2px #bc8f00}.cta:disabled{opacity:.45}.mobile{display:none;position:absolute;z-index:6;inset:auto 10px 10px;justify-content:space-between;pointer-events:none}.move{display:grid;grid-template-columns:repeat(2,48px);gap:5px}.mobile button{pointer-events:auto;width:48px;height:48px;border:2px solid #fff8;background:#17395dcc;color:white;font-weight:bold;border-radius:8px;touch-action:none}.mobile .jump{width:90px;background:#e94c35dd}@media(pointer:coarse),(max-width:720px){body{padding:0}#shell{width:100%;height:100dvh;aspect-ratio:auto}.mobile{display:flex}.skins{gap:5px;width:100%;justify-content:center}.skins button{width:min(30%,104px);height:135px;padding:4px}.skins img{height:99px}.skins b{font-size:11px}.overlay{padding:10px}.overlay h1,.overlay h2{font-size:clamp(26px,9vw,40px)}.overlay>p:not(.eyebrow){font-size:13px;margin:6px 0}.cta{font-size:16px;padding:11px 22px}}@media(max-height:520px){.skins{margin:5px}.skins button{height:105px}.skins img{height:76px}.overlay>p:not(.eyebrow){font-size:11px}.overlay h1{font-size:27px}.cta{padding:8px 20px}}