:root {
  color-scheme: light;
  --ink: #09090a;
  --paper: #ece9e5;
  --pearl: #fffefa;
  --ice: #bceeff;
  --lipstick: #8b1e35;
  --lipstick-glow: #c13752;
  --line: rgba(9, 9, 10, 0.18);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #09090a;
  overscroll-behavior: none;
}

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.game-shell {
  position: relative;
  width: min(100vw, 500px);
  height: 100dvh;
  min-height: 480px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 66%, rgba(255,255,255,.96) 0 15%, transparent 45%),
    linear-gradient(140deg, #f8f7f4 0%, #d9d5d1 48%, #9f9998 100%);
  box-shadow: 0 0 70px rgba(116,21,39,.2);
  touch-action: none;
  user-select: none;
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .13;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.16) 19px, transparent 20px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.55) 8px, transparent 9px);
  mix-blend-mode: multiply;
}

.game-shell::after {
  content: "";
  position: absolute;
  top: -5%;
  right: 4%;
  width: 8px;
  height: 110%;
  z-index: 1;
  background: var(--ink);
  box-shadow: 18px 0 0 rgba(9,9,10,.1), 32px 0 0 var(--ink);
  pointer-events: none;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 18px 0;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.is-playing .hud { opacity: 1; transform: none; }

.brand-mark {
  display: flex;
  flex-direction: column;
  width: max-content;
  padding-top: 3px;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 18px;
  line-height: .78;
  letter-spacing: -.02em;
  color: var(--ink);
}

.score-card {
  min-width: 124px;
  padding: 7px 15px 8px;
  color: white;
  text-align: center;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.18);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.score-label {
  display: block;
  margin-bottom: 1px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .2em;
  opacity: .62;
}

.score-card strong {
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.04em;
}

.score-card i { font-size: 13px; font-style: normal; opacity: .52; }

.sound-toggle {
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--ink);
  pointer-events: auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
}

.sound-toggle svg { width: 100%; height: 100%; fill: currentColor; }
.sound-toggle .sound-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-off { display: block; }

.health {
  position: absolute;
  top: max(72px, calc(env(safe-area-inset-top) + 58px));
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .25s ease;
}

.is-playing .health { opacity: 1; }

.health-label {
  margin-right: 4px;
  color: rgba(9,9,10,.62);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.health-bars {
  display: flex;
  gap: 4px;
}

.health-bars i {
  display: block;
  width: 20px;
  height: 4px;
  background: var(--ink);
  transform: skewX(-24deg);
  transition: opacity .2s ease, transform .2s ease;
}

.health-bars i.is-empty { opacity: .14; transform: skewX(-24deg) scaleX(.72); }

.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(26px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease, visibility .42s ease;
}

.screen.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }

.screen--start {
  background:
    radial-gradient(circle at 50% 25%, rgba(223,219,215,.4), rgba(20,17,19,.88) 66%, #050506 100%),
    linear-gradient(rgba(10,9,10,.32), rgba(8,7,8,.72)),
    url("assets/cover.webp") center/cover;
}

.screen--start::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, #000 6px, transparent 7px),
    radial-gradient(circle at 50% 30%, transparent 0 32%, #000 100%);
  pointer-events: none;
}

.screen--result {
  background: rgba(222,219,216,.95);
  backdrop-filter: blur(14px) saturate(.6);
}

.screen-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 400px);
  text-align: center;
}

.start-silhouette {
  position: absolute;
  z-index: 1;
  top: max(28px, env(safe-area-inset-top));
  left: 50%;
  width: min(74vw, 335px);
  height: 75%;
  opacity: .72;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 68%, transparent 97%);
  mask-image: linear-gradient(#000 0 68%, transparent 97%);
}

.start-silhouette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
  filter: brightness(.34) contrast(1.2) saturate(.58) drop-shadow(-10px 0 22px rgba(162,29,54,.44));
}

.start-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 4px;
}

.start-panel .eyebrow,
.start-panel .mission,
.start-panel .release-date { color: rgba(255,255,255,.7); }

.start-panel h1 {
  font-size: clamp(68px, 18vw, 92px);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.65), 0 0 30px rgba(139,30,53,.25);
}

.start-panel .mission strong { color: #fff; }

.start-panel .primary-button {
  color: var(--ink);
  background: #f5f3ef;
  box-shadow: 8px 8px 0 rgba(139,30,53,.72), 9px 9px 0 rgba(255,255,255,.7);
}

.start-panel .primary-button::before { border-color: rgba(9,9,10,.2); }

.cover-wrap {
  position: relative;
  width: clamp(98px, 27vw, 132px);
  aspect-ratio: 1;
  margin: 0 auto clamp(18px, 3.2vh, 28px);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.28);
  box-shadow: 12px 12px 0 var(--ink), 0 22px 50px rgba(0,0,0,.18);
  transform: rotate(-2deg);
}

.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cover-glint {
  position: absolute;
  inset: -80% 35%;
  background: rgba(255,255,255,.52);
  transform: rotate(24deg);
  animation: glint 3s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: rgba(9,9,10,.58);
}

h1, h2 {
  margin: 0;
  font-family: Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-stretch: condensed;
  line-height: .87;
  letter-spacing: -.025em;
  color: var(--ink);
}

h1 { font-size: clamp(45px, 13vw, 70px); }
h2 { font-size: clamp(52px, 15vw, 76px); }
#loseTitle { font-size: clamp(42px, 12vw, 62px); }

.mission, .result-copy {
  margin: clamp(16px, 2.8vh, 25px) auto;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.45;
  color: rgba(9,9,10,.72);
}

.result-copy { max-width: 330px; }

.mission strong, .result-copy strong { color: var(--ink); }

.primary-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 330px);
  min-height: 62px;
  margin: 0 auto;
  padding: 0 21px 0 25px;
  color: white;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  outline-offset: 4px;
  background: var(--ink);
  box-shadow: 8px 8px 0 rgba(255,255,255,.92), 9px 9px 0 var(--ink);
  cursor: pointer;
}

.primary-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.23);
  pointer-events: none;
}

.primary-button span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
}

.primary-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform .2s ease;
}

.primary-button:active { transform: translate(3px, 3px); box-shadow: 5px 5px 0 white, 6px 6px 0 var(--ink); }
.primary-button:active svg { transform: translateX(3px); }

.release-date {
  margin: 19px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(9,9,10,.52);
}

.result-rays {
  position: absolute;
  inset: -35%;
  opacity: .1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #000 0deg 4deg, transparent 4deg 15deg);
  animation: rotate 28s linear infinite;
}

.result-score {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 18px;
  padding: 3px 13px 4px;
  color: white;
  background: var(--ink);
  transform: rotate(-2deg);
}

.result-score b { font-size: 29px; line-height: 1; }
.result-score span { font-size: 13px; opacity: .58; }

.presave-button { background: linear-gradient(100deg, #050506, #292a2d); }

.auto-open {
  margin: 17px 0 -8px;
  color: var(--lipstick);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.text-button {
  margin-top: 22px;
  padding: 8px 10px;
  color: rgba(9,9,10,.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  border: 0;
  border-bottom: 1px solid rgba(9,9,10,.3);
  background: transparent;
  cursor: pointer;
}

.gesture-hint {
  position: absolute;
  left: 50%;
  bottom: max(42px, calc(env(safe-area-inset-bottom) + 28px));
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 9px;
  color: white;
  border-radius: 999px;
  background: rgba(9,9,10,.82);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.gesture-hint.is-visible { opacity: 1; transform: translateX(-50%); }
.gesture-hint b { white-space: nowrap; font-size: 10px; letter-spacing: .15em; }

.finger {
  position: relative;
  display: block;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 50%;
}

.finger::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: white;
  animation: guide 1.4s ease-in-out infinite;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  background: white;
}

.flash.is-active { animation: flash .16s ease-out; }
.flash.is-camera { animation: camera-flash .25s ease-out; }
.flash.is-damage { animation: damage-flash .38s ease-out; }
.game-shell.is-hit { animation: shake .22s linear; }

.mood-vignette {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 0 42%, rgba(13,7,9,.16) 66%, rgba(5,3,4,.72) 100%);
  box-shadow:
    inset 0 0 25px rgba(193,55,82,.54),
    inset 0 0 78px rgba(37,5,12,.62);
}

@keyframes glint { 0%, 25% { transform: translateX(-250%) rotate(24deg); } 58%, 100% { transform: translateX(250%) rotate(24deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes guide { 0%, 100% { transform: translateX(-6px); opacity: .45; } 50% { transform: translateX(6px); opacity: 1; } }
@keyframes flash { 0% { opacity: .52; } 100% { opacity: 0; } }
@keyframes camera-flash { 0% { opacity: .96; } 16% { opacity: .12; } 32% { opacity: .72; } 100% { opacity: 0; } }
@keyframes damage-flash { 0% { opacity: .74; background: #ff708e; } 100% { opacity: 0; background: #72162a; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-height: 670px) {
  .start-silhouette { width: min(62vw, 270px); height: 68%; }
  h1 { font-size: clamp(42px, 11.5vw, 58px); }
  .mission { margin: 11px auto 14px; font-size: 14px; line-height: 1.3; }
  .primary-button { min-height: 56px; }
  .release-date { margin-top: 14px; }
}

@media (min-width: 501px) {
  .game-shell { border-left: 1px solid #363638; border-right: 1px solid #363638; }
}

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