:root {
  color-scheme: dark;
  --ink: #07060a;
  --cream: #f0e7d6;
  --blood: #b7192b;
  --blood-bright: #e23843;
  --purple: #7a2bd1;
  --gold: #ffc14d;
  --panel: rgba(10, 8, 14, .92);
}

* { box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #030204;
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  touch-action: none;
}

button { font: inherit; }

#game-shell {
  position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #27101c 0, #09070d 42%, #020103 100%);
}

#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: block;
  image-rendering: pixelated;
  box-shadow: 0 0 80px rgba(160, 10, 40, .3);
}

.screen {
  position: absolute; inset: 0; display: none; place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: radial-gradient(circle at 50% 42%, rgba(65, 13, 34, .62), rgba(3, 2, 5, .94));
  backdrop-filter: blur(3px);
  z-index: 20;
}

.screen.active { display: grid; animation: reveal .28s ease-out; }

@keyframes reveal { from { opacity: 0; transform: scale(1.015); } }

#start-screen {
  align-content: center;
  gap: clamp(1rem, 3vh, 2.25rem);
  overflow: hidden;
}

#start-screen::before {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background: repeating-linear-gradient(108deg, transparent 0 42px, #a50f2a 44px 47px, transparent 49px 86px),
              repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.045) 8px 9px);
  mix-blend-mode: screen;
}

.marquee { display: flex; gap: 3.6rem; position: absolute; top: 4%; }
.marquee span { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px #ff8200; animation: flicker 1.7s infinite alternate; }
.marquee span:nth-child(2n) { animation-delay: .4s; }
@keyframes flicker { 70% { opacity: 1 } 100% { opacity: .38 } }

.title-lockup { text-align: center; z-index: 1; transform: rotate(-1deg); }
.eyebrow { margin: 0 0 .55rem; color: var(--gold); letter-spacing: .22em; text-transform: uppercase; font: 800 clamp(.72rem, 1.4vw, .95rem)/1.2 system-ui, sans-serif; }
h1 { margin: 0; text-transform: uppercase; font-size: clamp(3.3rem, 10vw, 8.8rem); line-height: .76; letter-spacing: -.045em; color: var(--blood-bright); text-shadow: 5px 5px 0 #170309, 8px 8px 0 rgba(240,231,214,.7), 0 0 32px rgba(226,56,67,.35); }
h1 span { display: block; color: var(--cream); font-size: .43em; letter-spacing: .13em; text-shadow: 4px 4px 0 var(--blood); }
.premise { margin: 1.2rem 0 0; font: 700 clamp(.9rem, 2vw, 1.2rem)/1.4 system-ui, sans-serif; letter-spacing: .06em; }

.menu { display: grid; width: min(92vw, 340px); gap: .55rem; z-index: 1; }
button {
  min-height: 46px; padding: .65rem 1.1rem; border: 2px solid rgba(240,231,214,.34); border-radius: 4px;
  color: var(--cream); background: rgba(10,8,14,.8); letter-spacing: .055em; text-transform: uppercase;
  cursor: pointer; transition: transform .12s, background .12s, border-color .12s;
}
button:hover, button:focus-visible { transform: translateY(-2px); border-color: var(--cream); background: #22101a; outline: none; }
button.primary { background: var(--blood); border-color: #ff5a63; box-shadow: 0 8px 24px rgba(150,10,30,.32); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.save-note { margin: 0; font: 600 .78rem/1.2 system-ui, sans-serif; opacity: .62; z-index: 1; }

.era-card, .dialog-card {
  width: min(92vw, 660px); padding: clamp(1.4rem, 4vw, 3rem); position: relative;
  border: 3px solid #6e1424; outline: 1px solid rgba(255,193,77,.55); outline-offset: -10px;
  background: linear-gradient(150deg, rgba(31,17,26,.97), rgba(7,6,10,.98));
  box-shadow: 0 25px 100px #000, inset 0 0 50px rgba(183,25,43,.13);
  text-align: center;
}

.era-card h2, .dialog-card h2 { margin: .15rem 0 .8rem; font-size: clamp(2.1rem, 6vw, 4.8rem); line-height: .9; text-transform: uppercase; color: var(--cream); text-shadow: 3px 3px 0 var(--blood); }
.era-card p:not(.eyebrow), .dialog-card p:not(.eyebrow) { font: 500 clamp(.92rem, 2vw, 1.1rem)/1.55 system-ui, sans-serif; color: #d5cbbb; }
.objective { margin: 1.25rem auto; padding: .85rem; border-block: 1px solid rgba(255,193,77,.3); color: var(--gold); font: 750 .9rem/1.4 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.compact { max-width: 380px; display: grid; gap: .6rem; }
.close-btn { position: absolute; right: .9rem; top: .8rem; width: 42px; min-height: 42px; padding: 0; font: 400 2rem/1 system-ui; border-radius: 50%; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.2rem; margin: 1.5rem 0; text-align: left; font: 650 .9rem/1.2 system-ui, sans-serif; }
.control-grid div { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .35rem; }
kbd { min-width: 31px; padding: .35rem; text-align: center; border: 1px solid #6e6670; border-bottom-width: 3px; border-radius: 4px; background: #201b23; color: white; font: 700 .76rem system-ui; }
.level-dialog { width: min(96vw, 860px); max-height: 92vh; overflow: auto; }
.level-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1.4rem; }
.level-choice { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; text-transform: none; }
.level-choice strong { display: block; text-transform: uppercase; font-size: 1rem; }
.level-choice small { font: 500 .77rem system-ui, sans-serif; color: #b9aeb5; }
.level-number { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #7b2634; color: var(--gold); }
.victory-card .desire-row { display: flex; justify-content: center; gap: 1.2rem; font-size: clamp(2rem, 7vw, 4rem); margin: 1.4rem 0; }

.corner-button { position: absolute; z-index: 12; top: max(10px, env(safe-area-inset-top)); width: 46px; min-height: 42px; padding: 0; border-radius: 50%; background: rgba(8,6,10,.72); }
#pause-btn { right: max(10px, env(safe-area-inset-right)); }
#sound-btn { left: max(10px, env(safe-area-inset-left)); }
.hidden { display: none !important; }

#touch-controls { display: none; position: absolute; inset: auto 0 max(12px, env(safe-area-inset-bottom)); z-index: 10; justify-content: space-between; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
#touch-controls > div { display: flex; gap: 12px; align-items: end; pointer-events: auto; }
#touch-controls button { width: 68px; height: 68px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.45rem; background: rgba(15,10,18,.62); backdrop-filter: blur(4px); user-select: none; -webkit-user-select: none; }
#touch-controls .touch-right { align-items: center; }
#touch-controls .small { width: 52px; height: 52px; font-size: 1rem; }
#touch-controls .rage { border-color: #ffc14d; color: #ffc14d; }
#touch-controls .jump { width: 78px; height: 78px; background: rgba(151,20,42,.72); }
#touch-controls button.pressed { background: var(--blood); transform: scale(.94); }

#toast { position: absolute; left: 50%; bottom: 14%; transform: translate(-50%, 15px); z-index: 30; max-width: min(88vw, 520px); padding: .75rem 1rem; border: 1px solid var(--gold); background: rgba(8,6,10,.9); color: var(--cream); text-align: center; font: 750 .86rem/1.35 system-ui, sans-serif; letter-spacing: .03em; opacity: 0; pointer-events: none; transition: .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (hover: none), (pointer: coarse) {
  #touch-controls.game-active { display: flex; }
  .control-grid { grid-template-columns: 1fr; }
}

@media (max-height: 520px) {
  #start-screen { grid-template-columns: 1.3fr .7fr; align-content: center; }
  .title-lockup { text-align: left; }
  h1 { font-size: min(11vw, 5rem); }
  .save-note { position: absolute; bottom: .45rem; }
  .era-card, .dialog-card { padding: 1rem 1.5rem; }
  .era-card h2, .dialog-card h2 { font-size: 2rem; }
  .era-card p:not(.eyebrow), .dialog-card p:not(.eyebrow) { font-size: .8rem; }
  .objective { margin: .65rem 0; padding: .5rem; }
  #touch-controls button { width: 58px; height: 58px; }
  #touch-controls .small { width: 44px; height: 44px; }
  #touch-controls .jump { width: 66px; height: 66px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  #game { width: 100vw; height: auto; }
  .level-list { grid-template-columns: 1fr; }
  .dialog-card { max-height: 90vh; overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}