/* SKULL RUN — hand-painted SNES-inspired 2.5D interface */
:root{--red:#f01620;--blue:#25b3f2;--yellow:#ffe51f;--ink:#090607;--paper:#fbf8e9}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080407;color:var(--paper)}
body{font-family:Impact,"Arial Black",system-ui,sans-serif;touch-action:none;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer}
#app{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#35111d 0%,#070507 70%);position:relative}
#stage{position:relative;width:min(100vw,177.7778dvh);aspect-ratio:16/9;max-height:100dvh;overflow:hidden;border:0 solid var(--ink);background:var(--red);box-shadow:0 0 82px #000e,0 0 0 1px #fff2}
#game{display:block;width:100%;height:100%;image-rendering:auto;filter:contrast(1.045) saturate(1.075)}
.status{position:absolute;z-index:7;left:1.1%;bottom:1.7%;font:900 clamp(8px,1vw,13px)/1.1 monospace;letter-spacing:.1em;color:#fff8;text-shadow:1px 1px #000;pointer-events:none}
.top-controls{position:absolute;right:1%;top:13%;z-index:9;display:flex;gap:7px}
.tiny-button{min-width:36px;height:36px;padding:0 7px;background:#050505ca;color:var(--paper);border:2px solid var(--paper);font-size:20px;box-shadow:3px 3px 0 #0906078f}
.menu{position:absolute;inset:0;display:grid;place-items:center;z-index:10;background:linear-gradient(90deg,#080307aa,#08030730 45%,#080307aa);transition:opacity .2s}
.menu.hidden{opacity:0;pointer-events:none}
.menu-card{position:relative;width:min(76%,510px);padding:clamp(12px,2.5vw,26px);text-align:center;background:linear-gradient(145deg,#090607f5,#101017ed);box-shadow:10px 10px 0 var(--red),-7px -7px 0 var(--blue),0 22px 65px #000c;border:3px solid var(--paper);transform:rotate(-.7deg)}
.eyebrow{font:900 clamp(10px,1.45vw,16px)/1.2 monospace;color:var(--blue);letter-spacing:.18em}
.menu-card h1{font-size:clamp(42px,9vw,104px);font-weight:1000;letter-spacing:.035em;line-height:.72;margin:12px 0 14px;text-shadow:4px 5px 0 #080508,7px 8px 0 var(--blue);color:var(--paper);transform:rotate(-2deg)}
.menu-card h1 span{color:var(--yellow)}
.ribbon{display:inline-block;margin:6px 0;padding:5px 12px;background:var(--red);color:#fff;transform:rotate(1.6deg);font:900 clamp(10px,1.7vw,18px)/1.1 monospace;letter-spacing:.04em}
.menu-card p{font:900 clamp(11px,1.3vw,16px)/1.35 monospace;max-width:430px;margin:12px auto;color:#fff}
.start-button{display:block;margin:14px auto 8px;padding:11px 20px;background:linear-gradient(160deg,#fff78b,var(--yellow) 42%,#ffb71f);color:var(--ink);border:3px solid #fff;font-size:clamp(15px,2.2vw,24px);font-weight:1000;box-shadow:5px 5px var(--red);transform:rotate(-1deg)}
.start-button:active{transform:translate(3px,3px) rotate(-1deg);box-shadow:2px 2px var(--red)}
.menu-card .tips{color:#adf0ff;font-size:clamp(8px,1.05vw,12px);margin:10px 0 0}
.toast{position:absolute;z-index:8;top:15%;left:50%;transform:translateX(-50%);padding:8px 15px;border:2px solid var(--paper);box-shadow:5px 5px 0 #000a;background:#050505d5;color:var(--yellow);font:900 clamp(13px,1.8vw,21px)/1.1 monospace;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .18s}
.toast.show{opacity:1}
#touch-controls{position:fixed;inset:auto max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:flex-end;z-index:12;pointer-events:none}
.control-group{display:flex;gap:12px;pointer-events:none}
.control{border:3px solid #f9f7e8;background:#050505b7;color:#fff;border-radius:16px;width:76px;height:76px;font:900 26px/1 Impact,system-ui,sans-serif;box-shadow:5px 5px #0009;touch-action:none;user-select:none;pointer-events:auto;text-shadow:2px 2px #050505}
.control.jump{width:90px;height:90px;border-radius:50%;background:#e91420d9;color:#fff;font:900 17px/1.2 Impact,system-ui,sans-serif}
.control.pressed,.control:active{transform:translate(3px,3px);box-shadow:2px 2px #0009;background:#187eabcc}
.portrait-tip{display:none;position:absolute;z-index:8;bottom:3%;left:50%;transform:translateX(-50%);padding:5px 9px;background:#0009;color:#fff;border:1px solid #fffa;font:900 10px monospace;pointer-events:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){#touch-controls{opacity:.15;transition:opacity .2s}#touch-controls:hover{opacity:1}}
@media (max-height:530px){.menu-card{padding:10px 17px}.menu-card h1{font-size:clamp(35px,7vw,72px);margin:6px 0 10px}.menu-card p{margin:5px auto}.start-button{padding:8px 16px;margin:8px auto}.control{width:62px;height:62px;border-radius:13px}.control.jump{width:74px;height:74px}.top-controls{top:13%}}
@media (orientation:portrait){#app{align-items:flex-start;padding-top:max(8px,env(safe-area-inset-top));background:linear-gradient(#050307a1,#050307f2),url("./assets/red-painting-hd.webp") center 37%/cover no-repeat}#stage{width:100vw;max-height:none}.portrait-tip{display:block}#touch-controls{bottom:max(22px,env(safe-area-inset-bottom))}.control{width:72px;height:72px}.control.jump{width:84px;height:84px}.menu-card{width:83%;padding:9px}.menu-card h1{font-size:clamp(35px,10vw,62px);margin:5px 0 7px}.menu-card p{font-size:clamp(8px,2vw,11px);margin:6px auto}.eyebrow{font-size:9px}.ribbon{font-size:9px;margin:4px}.start-button{font-size:13px;margin:7px auto 5px;padding:6px 10px}.menu-card .tips{font-size:7px;margin-top:3px}.top-controls{top:18%}.tiny-button{height:27px;min-width:27px;font-size:15px}.status{font-size:7px}}

/* HD edition: cinematic interface, crisp controls, reduced-motion support */
button:focus-visible{outline:3px solid #ffe51f;outline-offset:4px}
.control{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-color:#fffdf1;box-shadow:0 7px 23px #0009,inset 0 2px 0 #ffffff50,4px 4px #0009}
.control.jump{background:linear-gradient(155deg,#ff4e39ef,#d01025e8)}
.tiny-button{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.menu-card:before{content:"";position:absolute;inset:3px;border:1px solid #ffffff2c;pointer-events:none}
@media(prefers-reduced-motion:reduce){.menu,.control,.start-button,#touch-controls,.toast{transition:none!important}}

/* Bloom Ultra: modern readable chrome without muting the painted worlds */
#stage{isolation:isolate}
#game{filter:contrast(1.065) saturate(1.09)}
.control{box-shadow:0 8px 24px #000a,0 0 0 1px #fff6,inset 0 2px 0 #ffffff50;transition:transform .08s ease,box-shadow .08s ease}
.control.pressed{transform:translate(2px,2px) scale(.96);box-shadow:0 2px 8px #000b,inset 0 1px 0 #ffffff40}
.menu-card{box-shadow:0 28px 90px #000c,11px 11px 0 var(--red),-7px -7px 0 var(--blue)}
#art-status{font-weight:900;letter-spacing:.035em;text-shadow:1px 1px #000c}
@media(max-width:650px){.control{border-width:3px}.tiny-button{font-weight:900}}
@media(prefers-reduced-motion:reduce){.control,.start-button{transition:none}}

/* Signature edition graphics switch stays tappable on narrow screens. */
.quality-button{min-width:44px;padding:0 8px;background:#080506e8;color:#ffe51d;border-color:#fff8e9;font-size:12px;letter-spacing:.035em}
.quality-button[aria-pressed="true"]{background:#1679a3e8;color:#fff}
@media(max-height:530px){.quality-button{font-size:10px;min-width:38px;padding:0 5px}}

/* Painted Worlds chapter: controls remain above the non-interactive painted canvas. */
#game{image-rendering:auto;will-change:contents}
#stage{overflow:hidden}
@media (max-height:460px){#art-status{font-size:9px}.quality-button{height:28px}}

/* Living Ink preserves hero/controls focus in both painted acts. */
#game{image-rendering:auto}

/* MAX SHINE edition */
.menu-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 29%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),
    var(--paper);
}
.control,.tiny-button,.quality-button,.start-button{position:relative;overflow:hidden}
.control::before,.tiny-button::before,.quality-button::before,.start-button::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 36%,rgba(255,255,255,0) 68%);
}
.control::after,.tiny-button::after,.quality-button::after,.start-button::after{
  content:"";position:absolute;pointer-events:none;top:-18%;left:-38%;
  width:56%;height:145%;transform:rotate(22deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));
}
#hud,#topbar,.menu-card{
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Release Candidate: unobstructed touch input and consistent focus targets */
[data-control] { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button:focus-visible { outline:3px solid #ffe51d; outline-offset:4px; }
button:disabled { opacity:.55; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .control, .tiny-button, .start-button, .quality-button { animation:none!important; transition:none!important; }
}

/* Extra polish for Mushroom Overdrive */
.menu-card .ribbon{box-shadow:0 0 15px rgba(255,235,32,.24)}
.start-button{filter:drop-shadow(0 0 7px rgba(255,229,29,.23))}
.status{white-space:nowrap}
@media(max-height:460px){.menu-card p{font-size:clamp(10px,1.3vw,12px)}}