/* LEVEL EVIL — UI styles */
:root {
  --ink: #170a26;
  --ink-2: #2a1630;
  --paper: #fff4ea;
  --accent: #ff3d6b;
  --gold: #ffd447;
  --panel: rgba(23, 10, 38, 0.86);
  --font: "Segoe UI", "Trebuchet MS", system-ui, -apple-system, Roboto, sans-serif;
  --title: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #0d0612;
  color: var(--paper);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1d0d29 0%, #0d0612 70%); }
#stage { position: relative; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; overflow: hidden; box-shadow: 0 0 80px rgba(0,0,0,0.6); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the UI layer is laid out at 960x540 and scaled to the stage */
#ui { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; }
.screen.active { display: block; animation: scrIn 0.28s cubic-bezier(.2,.9,.3,1.2); }
.screen-dim { background: rgba(13, 6, 18, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ buttons */
.btn {
  font-family: var(--title); font-size: 19px; letter-spacing: 1px;
  color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); border-radius: 10px;
  padding: 7px 22px; min-width: 230px; text-align: left;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer; position: relative;
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
  outline: none;
}
.btn::before { content: '▸'; position: absolute; left: 8px; opacity: 0; transition: opacity .1s, left .12s; color: var(--accent); }
.btn:hover, .btn:focus-visible, .btn.focus { background: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); padding-left: 30px; }
.btn:hover::before, .btn:focus-visible::before, .btn.focus::before { opacity: 1; left: 11px; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-primary { background: var(--gold); }
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary.focus { background: #ffe27a; }
.btn-small { font-size: 14px; min-width: 0; padding: 6px 14px; box-shadow: 0 4px 0 var(--ink); }
.btn-small:hover, .btn-small:focus-visible, .btn-small.focus { padding-left: 24px; }
.btn-toggle { min-width: 120px; text-align: center; font-size: 14px; padding: 4px 12px; box-shadow: 0 3px 0 var(--ink); }
.btn-toggle:hover, .btn-toggle:focus-visible, .btn-toggle.focus { padding-left: 12px; }
.btn-toggle::before { display: none; }
.btn-toggle.on { background: #7dff9b; }
.btn-danger { background: #ff8fa3; }

/* ------------------------------------------------ main menu */
#scr-menu .menu-col { position: absolute; left: 58px; top: 30px; width: 420px; }
.logo { margin: 0; line-height: 0.86; font-family: var(--title); font-weight: 900; }
.logo span { display: block; }
.logo-l1 { font-size: 78px; color: var(--paper); letter-spacing: 2px; text-shadow: 0 6px 0 var(--ink), 6px 6px 0 var(--ink); }
.logo-l2 { font-size: 112px; color: var(--accent); letter-spacing: 3px; text-shadow: 0 7px 0 var(--ink), 7px 7px 0 var(--ink); display: flex !important; align-items: flex-end; animation: wob 4s ease-in-out infinite; transform-origin: 30% 80%; }
.logo-eye { display: inline-block !important; width: 36px; height: 90px; margin: 0 6px 6px 4px; filter: drop-shadow(5px 6px 0 var(--ink)); }
.logo-eye svg { width: 100%; height: 100%; overflow: visible; }
.logo-pupil { animation: look 6s ease-in-out infinite; transform-origin: 15px 38px; }
@keyframes look { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-14px); } 45% { transform: translateY(12px) scaleY(.9); } 70% { transform: translateY(2px); } 72% { transform: scaleY(0.1); } 74% { transform: none; } }
@keyframes wob { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg) translateY(-2px); } }
.tagline { font-size: 15px; font-weight: 700; color: var(--paper); margin: 14px 0 16px; text-shadow: 0 2px 0 rgba(0,0,0,0.35); max-width: 380px; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.menu-row { flex-direction: row; justify-content: center; }
.menu-stats { margin-top: 12px; font-weight: 800; font-size: 14px; opacity: 0.85; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.controls-hint { position: absolute; left: 58px; width: 400px; bottom: 44px; text-align: left; font-size: 12px; line-height: 1.5; font-weight: 700; opacity: 0.85; margin: 0; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }

/* ------------------------------------------------ headers */
.scr-head { position: absolute; left: 30px; right: 30px; top: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.scr-head h2 { margin: 0; font-family: var(--title); font-size: 40px; letter-spacing: 2px; color: var(--paper); text-shadow: 0 5px 0 var(--ink), 4px 5px 0 var(--ink); }
.scr-head .btn { justify-self: start; }
.head-stat { justify-self: end; font-weight: 800; font-size: 15px; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }

/* ------------------------------------------------ level select */
#scr-levels { background: linear-gradient(180deg, rgba(13,6,18,0.35), rgba(13,6,18,0.7)); }
.worlds { position: absolute; left: 30px; right: 30px; top: 88px; bottom: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.world { display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; padding: 10px 14px 12px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); position: relative; overflow: hidden; }
.world::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 22px); pointer-events: none; }
.world h3 { margin: 0 0 8px; font-family: var(--title); font-size: 15px; letter-spacing: 1px; color: var(--ink); display: flex; justify-content: space-between; }
.world h3 small { font-family: var(--font); font-weight: 800; font-size: 12px; opacity: 0.75; }
.lvl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1; }
.lvl {
  aspect-ratio: 1 / 1.22; min-width: 0; border-radius: 10px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--title); font-size: 20px; cursor: pointer; padding: 0; position: relative; box-shadow: 0 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; outline: none; transition: transform .08s, box-shadow .08s;
}
.lvl small { font-family: var(--font); font-weight: 800; font-size: 9.5px; line-height: 1.12; opacity: 0.8; padding: 0 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.lvl span { font-size: 22px; }
.world-tag { position: relative; z-index: 1; margin: 8px 0 0; font-weight: 800; font-size: 13px; color: var(--ink); opacity: 0.75; font-style: italic; }
.lvl:hover, .lvl:focus-visible, .lvl.focus { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 7px 0 var(--ink); background: #fff; }
.lvl.done { background: #7dff9b; }
.lvl.done:hover, .lvl.done.focus, .lvl.done:focus-visible { background: #a6ffb9; }
.lvl.locked { background: rgba(23,10,38,0.55); color: rgba(255,255,255,0.5); cursor: not-allowed; box-shadow: 0 4px 0 rgba(23,10,38,0.8); }
.lvl.locked:hover, .lvl.locked.focus { transform: none; }
.lvl.current { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255,212,71,0.9); } 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px rgba(255,212,71,0.4); } }
.lvl-tip { position: absolute; left: 30px; right: 30px; bottom: 0; }
.lvl-name { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-weight: 800; }

/* ------------------------------------------------ settings */
#scr-settings, #scr-about { background: rgba(13, 6, 18, 0.66); }
.settings { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: 540px; display: flex; flex-direction: column; gap: 6px; }
.settings .row { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 14px; min-height: 44px; font-weight: 800; font-size: 16px; }
.settings input[type=range] { width: 220px; accent-color: var(--gold); height: 22px; cursor: pointer; }
.settings input[type=range].focus, .settings input[type=range]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.settings-note { text-align: center; font-weight: 700; font-size: 14px; min-height: 18px; margin: 4px 0 0; color: var(--gold); }

/* ------------------------------------------------ about */
.about { position: absolute; left: 50%; top: 108px; transform: translateX(-50%); width: 640px; background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; padding: 20px 26px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.about p { margin: 0 0 12px; white-space: pre-line; }
.about-controls { font-size: 13px; opacity: 0.85; }
.about-egg { font-family: var(--title); letter-spacing: 6px; text-align: center; opacity: 0.35; margin: 0 !important; }

/* ------------------------------------------------ pause / end */
.pause-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.pause-box h2 { margin: 0; font-family: var(--title); font-size: 64px; letter-spacing: 4px; color: var(--paper); text-shadow: 0 6px 0 var(--ink), 6px 6px 0 var(--ink); }
.pause-sub { margin: 4px 0 6px; font-weight: 700; opacity: 0.85; }
.pause-level { margin: 0 0 16px; font-weight: 800; color: var(--gold); }
.pause-box .menu-buttons { align-items: stretch; }
.end-box { width: 720px; }
.end-box h2 { font-size: 58px; color: var(--accent); }
.end-text { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 12px 0 14px; }
.end-stats { display: flex; gap: 14px; justify-content: center; margin-bottom: 20px; }
.end-stats div { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 18px; box-shadow: 0 5px 0 var(--ink); font-weight: 800; font-size: 13px; }
.end-stats b { display: block; font-family: var(--title); font-size: 26px; }
.end-box .btn { min-width: 200px; }

/* ------------------------------------------------ touch */
#touch { position: absolute; inset: 0; pointer-events: none; display: none; }
body.touch #touch.show { display: block; }
.t-btn {
  pointer-events: auto; border: 3px solid rgba(23,10,38,0.85); background: rgba(255,244,234,0.28); color: rgba(23,10,38,0.85);
  border-radius: 50%; font-size: 6vmin; width: 15vmin; height: 15vmin; display: flex; align-items: center; justify-content: center;
  touch-action: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); font-weight: 900; padding: 0;
}
.t-btn.on { background: rgba(255,244,234,0.7); transform: scale(0.94); }
.t-left { position: absolute; left: 3vmin; bottom: 3vmin; display: flex; gap: 3vmin; }
.t-right { position: absolute; right: 4vmin; bottom: 4vmin; }
.t-jump { width: 19vmin; height: 19vmin; font-size: 8vmin; }
.t-pause { position: absolute; right: 2vmin; top: 15vmin; width: 9vmin; height: 9vmin; font-size: 3.2vmin; border-radius: 30%; }

#rotate { display: none; position: fixed; inset: 0; background: #170a26; color: #fff4ea; z-index: 10; align-items: center; justify-content: center; text-align: center; font-family: var(--title); font-size: 22px; }
#rotate small { font-family: var(--font); font-size: 14px; opacity: .7; }
.rot-icon { font-size: 64px; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

body.playing #stage { cursor: none; }