@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #07111f;
  --navy: #0b1a2a;
  --panel: rgba(10, 25, 39, 0.94);
  --panel-2: #102b3b;
  --cream: #f4efcf;
  --muted: #8ca6a5;
  --teal: #56e0c5;
  --teal-dark: #1b938f;
  --orange: #ffad5a;
  --danger: #ff5c6d;
  --line: rgba(119, 232, 210, 0.18);
  --shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #030910; color: var(--cream); font-family: Inter, system-ui, sans-serif;
  touch-action: none; user-select: none;
}

button, input { font: inherit; }

#game-shell {
  position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #102d3a, #030910 66%);
}

#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #07111f; box-shadow: var(--shadow); outline: none;
}

#scanlines {
  pointer-events: none; position: absolute; inset: 0; opacity: .075; z-index: 30;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #b9fff1 4px);
  mix-blend-mode: soft-light;
}

.screen {
  position: absolute; z-index: 20; inset: 0; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px); background: rgba(3, 9, 16, .28); backdrop-filter: blur(0px);
}
.screen.active { display: flex; animation: screen-in .28s ease-out; }
.screen.overlay { background: rgba(3, 9, 16, .72); backdrop-filter: blur(5px); }
@keyframes screen-in { from { opacity: 0; transform: translateY(7px); } }

.menu-card, .wide-card, .result-card {
  background: linear-gradient(145deg, rgba(16, 43, 59, .97), rgba(7, 17, 31, .98));
  border: 1px solid var(--line); box-shadow: 10px 10px 0 rgba(0,0,0,.18), var(--shadow);
  position: relative; overflow: hidden;
}
.menu-card::before, .wide-card::before, .result-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 3px; background: var(--orange);
}
.menu-card { width: min(440px, 92vw); padding: 34px; }
.wide-card { width: min(1000px, 94vw); padding: 34px; }
.title-card { margin-right: min(38vw, 440px); z-index: 2; }

.eyebrow { margin: 0 0 8px; font: 700 11px/1.2 "Chakra Petch", sans-serif; letter-spacing: .22em; color: var(--teal); }
h1, h2 { font-family: "Chakra Petch", sans-serif; margin: 0; letter-spacing: -.035em; }
h1 span { display: block; font-size: clamp(42px, 5vw, 58px); line-height: .88; text-shadow: 4px 4px 0 #132f42; }
h1 small { display: block; font-size: 18px; letter-spacing: .43em; color: var(--orange); margin-top: 13px; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: .95; }
.tagline { color: #a8b9b2; line-height: 1.55; font-size: 13px; max-width: 340px; margin: 20px 0 24px; }

.signal-mark, .result-signal { height: 22px; display: flex; align-items: end; gap: 3px; margin-bottom: 19px; }
.signal-mark i, .result-signal i { display: block; width: 5px; background: var(--teal); box-shadow: 0 0 10px rgba(86,224,197,.45); }
.signal-mark i:nth-child(1), .result-signal i:nth-child(1) { height: 7px; }
.signal-mark i:nth-child(2), .result-signal i:nth-child(2) { height: 14px; }
.signal-mark i:nth-child(3), .result-signal i:nth-child(3) { height: 22px; }

.menu-actions { display: grid; gap: 8px; }
button {
  appearance: none; border: 1px solid rgba(137, 203, 194, .2); color: var(--cream); background: #102536;
  min-height: 44px; padding: 0 16px; text-align: left; cursor: pointer; font: 700 12px/1 "Chakra Petch", sans-serif;
  letter-spacing: .12em; transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
button span { color: var(--muted); margin-right: 13px; font-size: 10px; }
button:hover, button:focus-visible { transform: translateX(4px); border-color: var(--teal); background: #173348; outline: 2px solid transparent; }
button.primary { color: #06141a; background: var(--teal); border-color: var(--teal); }
button.primary:hover, button.primary:focus-visible { background: #83f1da; }
button.full { width: 100%; text-align: center; margin-top: 20px; }
.menu-hint, .keyline { margin: 18px 0 0; font: 600 9px/1.4 "Chakra Petch"; letter-spacing: .14em; color: #607d7d; text-align: center; }

.title-scene { position: absolute; z-index: 1; width: 380px; height: 410px; transform: translateX(270px); }
.ground-art { position: absolute; bottom: 27px; left: 0; width: 100%; height: 85px; border-top: 5px solid #407a72; background: #0b202b; clip-path: polygon(0 0,100% 0,100% 73%,87% 73%,87% 89%,71% 89%,71% 100%,25% 100%,25% 87%,8% 87%,8% 65%,0 65%); }
.tower-art { position: absolute; right: 42px; bottom: 108px; width: 92px; height: 238px; background: #0c2635; border: 4px solid #245165; box-shadow: inset 12px 0 #102e3f; }
.tower-art::before { content:""; position:absolute; width: 4px; height: 90px; background:#ffad5a; top:-90px; left:42px; box-shadow:0 0 24px #ffad5a; }
.tower-art b { position:absolute; width:50px; height:21px; background:#173e4f; border:3px solid #56e0c5; left:17px; top:42px; }
.tower-art i { position:absolute; border:2px solid rgba(86,224,197,.3); border-radius:50%; left:43px; top:-84px; animation:pulse-ring 2s infinite; }
.tower-art i:nth-of-type(2){animation-delay:.5s}.tower-art i:nth-of-type(3){animation-delay:1s}
@keyframes pulse-ring { from { width:0;height:0;opacity:.9;transform:translate(0,0) } to { width:120px;height:120px;opacity:0;transform:translate(-60px,-60px) } }
.pip-art { position:absolute; left:74px; bottom:108px; width:66px; height:64px; border:4px solid #213b48; background:#d9d8ba; border-radius:20px 20px 13px 13px; box-shadow:inset -10px -8px #a7a993, 8px 8px 0 rgba(0,0,0,.2); animation:pip-idle 1.8s ease-in-out infinite; }
.pip-art::before { content:""; position:absolute; width:42px;height:19px;left:8px;top:10px;background:#09202d;border:3px solid #264453;border-radius:8px;box-shadow:inset 10px 0 #56e0c5; }
.pip-art::after { content:""; position:absolute;width:4px;height:15px;background:#d9d8ba;left:29px;top:-17px;box-shadow:0 -3px #ffad5a; }
@keyframes pip-idle { 50% { transform:translateY(-6px) rotate(-1deg); } }

.screen-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.icon-btn { width:42px; min-height:42px; padding:0; font-size:25px; text-align:center; letter-spacing:0; }
.level-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.level-card { min-height:270px; padding:0; position:relative; overflow:hidden; text-align:left; background:#0a1e2b; display:flex; flex-direction:column; }
.level-card:hover,.level-card:focus-visible { transform:translateY(-4px); }
.level-card.locked { filter:saturate(.2); opacity:.55; cursor:not-allowed; }
.level-card.locked:hover { transform:none; border-color:rgba(137,203,194,.2); }
.level-preview { height:132px; position:relative; overflow:hidden; background:var(--preview); border-bottom:1px solid var(--line); }
.level-preview::before { content:"";position:absolute;width:170%;height:90px;left:-20%;bottom:-50px;background:var(--hill);border-radius:50%;box-shadow:0 -10px 0 rgba(255,255,255,.04); }
.level-preview::after { content:"";position:absolute;width:46px;height:84px;right:26px;bottom:18px;background:#102d3b;border:3px solid var(--accent);box-shadow:inset 8px 0 #193f4d; }
.preview-lines { position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(255,255,255,.05) 45px 46px); }
.level-copy { padding:18px; flex:1; }
.level-copy small { display:block;color:var(--accent);font:700 9px "Chakra Petch";letter-spacing:.18em;margin-bottom:5px; }
.level-copy strong { font:700 18px "Chakra Petch";display:block;margin-bottom:7px; }
.level-copy p { color:#829b9b;font-size:11px;line-height:1.45;margin:0; }
.level-progress { display:flex;justify-content:space-between;padding:13px 18px;background:rgba(0,0,0,.16);color:#a9b8af;font:600 10px "Chakra Petch"; }
.lock-label { position:absolute;z-index:2;top:52px;left:50%;transform:translateX(-50%);padding:8px 12px;background:#07111f;color:var(--orange);font:700 10px "Chakra Petch";letter-spacing:.15em; }

.info-card { width:min(680px,94vw); }
.control-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.control-grid > div { padding:16px;background:rgba(0,0,0,.15);border:1px solid var(--line); }
kbd { display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 8px;margin-right:4px;background:#1c4050;border:1px solid #4b6c73;box-shadow:0 3px 0 #07111f;font:700 10px "Chakra Petch"; }
.control-grid strong { display:block;margin:12px 0 4px;font:700 11px "Chakra Petch";letter-spacing:.12em;color:var(--teal); }
.control-grid p {margin:0;color:#819997;font-size:11px;}
.guide-strip { display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:14px;background:rgba(86,224,197,.06);color:#b4c2b9;font:600 10px "Chakra Petch"; }
.guide-strip span { display:flex;align-items:center;gap:7px; }
.bit-glyph,.core-glyph,.tower-glyph {display:inline-block;width:12px;height:12px;background:var(--teal);transform:rotate(45deg);box-shadow:0 0 8px var(--teal)}
.core-glyph{background:var(--orange);border-radius:50%;transform:none}.tower-glyph{height:18px;width:8px;transform:none;background:#4b6c73;border-top:3px solid var(--teal)}

.settings-card { width:min(560px,94vw); }
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid var(--line); }
.setting-row span { display:grid;gap:4px; }
.setting-row strong { font:700 11px "Chakra Petch";letter-spacing:.12em; }
.setting-row small { color:#758e8d;font-size:10px; }
input[type="range"] { accent-color:var(--teal);width:180px; }
input[type="checkbox"] { appearance:none;width:44px;height:24px;background:#07111f;border:1px solid #33515a;position:relative;cursor:pointer; }
input[type="checkbox"]::after { content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#597078;transition:.15s; }
input[type="checkbox"]:checked { background:#17423f;border-color:var(--teal); }
input[type="checkbox"]:checked::after { left:23px;background:var(--teal); }

.compact-card { width:min(350px,90vw);display:grid;gap:8px;text-align:center; }
.compact-card h2 { margin-bottom:18px; }
.compact-card button { text-align:center; }
.result-card { width:min(570px,92vw);padding:38px;text-align:center; }
.result-signal { justify-content:center;height:33px;transform:scale(1.4);margin-bottom:24px; }
.result-card h2 { color:var(--cream);text-shadow:3px 3px 0 #17394a;margin-bottom:26px; }
.result-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px; }
.result-stat { background:#0b1b29;padding:15px 8px; }
.result-stat small { display:block;color:#718c89;font:700 8px "Chakra Petch";letter-spacing:.13em;margin-bottom:7px; }
.result-stat strong { color:var(--orange);font:700 18px "Chakra Petch"; }
.result-actions { display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px; }
.result-actions button { text-align:center;padding:0 8px; }
.broken-signal { margin:0 auto 18px;width:54px;height:54px;display:grid;place-items:center;border:2px solid var(--danger);color:var(--danger);font:700 28px "Chakra Petch";transform:rotate(45deg); }
.broken-signal::first-letter { transform:rotate(-45deg); }
.lost-card h2 { color:#ff8290; }
.lost-copy { color:#8fa3a0;font-size:12px;margin:-10px 0 24px; }

#toast { position:absolute;z-index:25;top:88px;left:50%;transform:translate(-50%,-20px);padding:10px 16px;background:#07111f;border:1px solid var(--teal);color:var(--cream);opacity:0;pointer-events:none;font:700 10px "Chakra Petch";letter-spacing:.12em;transition:.25s; }
#toast.show {opacity:1;transform:translate(-50%,0)}

#touch-controls { display:none;position:absolute;z-index:15;inset:0;pointer-events:none;align-items:flex-end;justify-content:space-between;padding:max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right)); }
#touch-controls > div { display:flex;gap:12px;pointer-events:auto; }
#touch-controls button { width:64px;height:64px;min-height:64px;padding:0;text-align:center;border-radius:50%;background:rgba(8,22,34,.72);border:2px solid rgba(244,239,207,.35);backdrop-filter:blur(4px);font-size:15px; }
#touch-controls .jump-touch { width:76px;height:76px;background:rgba(86,224,197,.75);color:#07111f;border-color:#9ffff0;font-size:28px; }
#touch-controls .dash-touch { width:58px;height:58px;margin-top:12px;color:var(--orange);border-color:rgba(255,173,90,.65);font-size:9px; }

@media (hover:none), (pointer:coarse) { #touch-controls.gameplay { display:flex; } }
@media (max-width: 780px) {
  .screen { padding:12px; }
  .title-card { margin-right:0;background:rgba(8,24,36,.91); }
  .title-scene { opacity:.2;left:50%;transform:translateX(-20%); }
  .wide-card { padding:20px;max-height:94vh;overflow:auto; }
  .level-grid { grid-template-columns:1fr; }
  .level-card { min-height:125px;display:grid;grid-template-columns:150px 1fr; }
  .level-preview {height:100%;}.level-progress{display:none}.level-copy{padding:15px}.keyline{display:none}
  .lock-label { left:75px;top:52px; }
  .menu-card {padding:24px}.control-grid{gap:6px}.control-grid>div{padding:12px}.guide-strip{display:none}
}
@media (max-height: 560px) and (orientation: landscape) {
  .title-card { transform:scale(.8); }
  .info-card,.settings-card { transform:scale(.82); }
  .wide-card { transform:scale(.84); }
  .level-card {min-height:220px}.level-preview{height:105px}
  #touch-controls button{width:52px;height:52px;min-height:52px}.touch-right .jump-touch{width:62px;height:62px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }