html { background: var(--background); overscroll-behavior: none; }
body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 45%, rgba(30, 101, 151, .2), transparent 34%),
    radial-gradient(circle at 30% 15%, rgba(118, 66, 202, .15), transparent 28%),
    #02040c;
  font-family: Inter, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.game-shell {
  position: relative;
  width: min(100vw, 100dvh);
  height: min(100vw, 100dvh);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050815;
  border: 1px solid rgba(97, 205, 255, .12);
  box-shadow: 0 0 90px rgba(0, 0, 0, .72);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.splash-screen {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #030713;
  opacity: 1;
  transition: opacity .42s ease, visibility .42s ease;
}
.splash-screen::before {
  content: "";
  position: absolute;
  inset: -36px;
  background: url('../assets/images/knife-gap-splash.png') center / cover no-repeat;
  filter: blur(24px) saturate(.95) brightness(.55);
  transform: scale(1.08);
  opacity: .74;
}
.splash-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 38%, rgba(0, 3, 12, .52) 100%);
  pointer-events: none;
}
.splash-screen img {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 60px rgba(0, 0, 0, .65));
  transform: scale(1);
  transition: transform .55s ease;
}
.splash-screen.is-leaving {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.splash-screen.is-leaving img { transform: scale(1.025); }
.splash-screen:focus-visible { outline: 3px solid var(--cyan); outline-offset: -6px; }
#game-canvas { width: 100%; height: 100%; touch-action: none; }
.screen, .hud { position: absolute; inset: 0; z-index: 3; }
.screen { display: flex; flex-direction: column; align-items: center; }
.is-hidden { display: none !important; }

.menu-screen {
  justify-content: flex-end;
  padding: calc(24px + var(--safe-top)) 28px calc(22px + var(--safe-bottom));
  text-align: center;
  background: linear-gradient(180deg, rgba(2, 6, 17, .04), rgba(3, 7, 18, .2) 34%, rgba(2, 5, 15, .96) 78%);
}
.brand-icon { position: relative; width: 38px; height: 38px; margin-bottom: 7px; transform: rotate(45deg); }
.brand-icon span { position: absolute; inset: 7px; border: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(62,220,255,.7); }
.brand-icon i { position: absolute; top: -5px; left: 17px; width: 4px; height: 48px; background: linear-gradient(var(--violet), #fff, var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .24em; text-transform: uppercase; }
h1, h2 { font-family: "Arial Narrow", Impact, sans-serif; text-transform: uppercase; }
h1 { margin-top: 7px; font-size: clamp(62px, 12vw, 104px); font-style: italic; line-height: .7; letter-spacing: -.045em; filter: drop-shadow(0 8px 25px rgba(0,0,0,.6)); }
h1 em { color: var(--cyan); font-style: italic; text-shadow: 0 0 25px rgba(62,220,255,.54); }
.tagline { margin: 15px 0 16px; color: #d2deec; font-size: 11px; font-weight: 700; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }
button { cursor: pointer; color: var(--text); text-transform: uppercase; letter-spacing: .12em; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.primary-button, .secondary-button {
  width: min(100%, 300px);
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 4px;
  background: linear-gradient(110deg, #19b9d7, #6c5bed);
  box-shadow: 0 12px 34px rgba(45, 175, 239, .28), inset 0 1px rgba(255,255,255,.28);
  font-family: "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-weight: 800;
  transform: skewX(-5deg);
}
.primary-button:active { transform: skewX(-5deg) scale(.98); }
.secondary-button { margin-top: 9px; background: rgba(255,255,255,.08); box-shadow: none; }
.record-grid { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); margin-top: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(2,7,19,.66); }
.record-grid > div { padding: 8px; }
.record-grid > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.record-grid span, .result-grid span, .result-score span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.record-grid strong { display: block; margin-top: 3px; font: 800 17px/1 "Arial Narrow", Impact, sans-serif; }
.text-button { padding: 9px 4px; background: transparent; color: #c8d5e8; font-size: 10px; font-weight: 800; }
.control-hint { color: #71839b; font-size: 9px; }

.hud { pointer-events: none; }
.hud-stat { position: absolute; top: calc(18px + var(--safe-top)); left: calc(18px + var(--safe-left)); min-width: 110px; padding: 8px 11px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg, rgba(5,15,32,.86), transparent); }
.hud-stat span, .knives-panel span { display: block; color: #94a8c0; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.hud-stat strong { display: block; margin-top: 2px; font: 800 25px/.9 "Arial Narrow", Impact, sans-serif; }
.hud-level { left: 50%; min-width: 92px; border: 0; background: rgba(4,11,26,.62); text-align: center; transform: translateX(-50%); }
.icon-button { position: absolute; top: calc(17px + var(--safe-top)); right: calc(18px + var(--safe-right)); width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(4,10,25,.75); font-weight: 800; pointer-events: auto; }
.knives-panel { position: absolute; right: calc(18px + var(--safe-right)); bottom: calc(18px + var(--safe-bottom)); min-width: 150px; padding: 10px 12px; border-right: 2px solid var(--violet); background: linear-gradient(270deg, rgba(5,15,32,.88), transparent); text-align: right; }
.knives-panel strong { display: inline-block; margin-top: 2px; font: 800 31px/.9 "Arial Narrow", Impact, sans-serif; }
.knife-slots { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.knife-slot { width: 3px; height: 17px; border-radius: 2px; background: linear-gradient(#fff, var(--cyan)); box-shadow: 0 0 6px rgba(62,220,255,.65); transform: skewX(-7deg); }

.modal-screen { justify-content: center; padding: calc(16px + var(--safe-top)) 20px calc(16px + var(--safe-bottom)); background: rgba(2,5,14,.76); backdrop-filter: blur(8px); }
.panel { width: min(100%, 370px); padding: 27px 25px 23px; border: 1px solid rgba(120,216,255,.25); border-radius: 7px; background: linear-gradient(155deg, rgba(11,23,48,.97), rgba(3,8,20,.98)); box-shadow: 0 24px 90px rgba(0,0,0,.66), inset 0 1px rgba(255,255,255,.06); text-align: center; }
.panel h2 { margin: 8px 0 18px; font-size: 45px; font-style: italic; line-height: .88; }
.tutorial-list { list-style: none; margin: 18px 0; padding: 0; text-align: left; }
.tutorial-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #d9e4f2; font-size: 11px; }
.tutorial-list b { color: var(--cyan); font: 800 14px/1 "Arial Narrow", Impact, sans-serif; }
.compact-panel .text-button, .result-panel .text-button { margin-top: 7px; }
.event-screen { z-index: 4; justify-content: center; background: radial-gradient(circle, rgba(62,220,255,.2), rgba(2,5,14,.42) 45%, transparent 72%); pointer-events: none; text-align: center; }
.event-screen p, .event-screen span { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.event-screen strong { margin: 6px 0 7px; font: italic 800 clamp(44px, 7vw, 70px)/.9 "Arial Narrow", Impact, sans-serif; text-transform: uppercase; text-shadow: 0 0 28px rgba(62,220,255,.55); }
.new-best { margin: -5px 0 10px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.result-score { margin: -2px 0 15px; }
.result-score strong { display: block; margin-top: 3px; color: var(--cyan); font: 800 55px/.9 "Arial Narrow", Impact, sans-serif; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 18px; background: rgba(255,255,255,.1); }
.result-grid div { padding: 10px 7px; background: #091329; }
.result-grid strong { display: block; margin-top: 4px; font: 800 18px/1 "Arial Narrow", Impact, sans-serif; }