:root {
  --black: #0b0b0d;
  --panel: #15151a;
  --line: #34343b;
  --ink: #f4f4f6;
  --muted: #b5b5bf;
  --red: #c2080b;
  --hot: #e8564a;
  --display: "Oswald", "Arial Narrow", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }

.game-topbar {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(16px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: #0b0b0d;
  position: relative;
  z-index: 10;
}
.wordmark {
  display: flex;
  flex-direction: column;
  width: 64px;
  text-decoration: none;
  font: 700 21px/.89 var(--display);
  letter-spacing: .005em;
}
.wordmark small { font: 700 8px/1 var(--display); letter-spacing: .24em; }
.wordmark em { font-style: normal; color: var(--hot); }
.topbar-label {
  font: 600 11px/1 var(--display);
  letter-spacing: .2em;
  color: var(--muted);
  margin-left: 16px;
}
.back-link {
  margin-left: auto;
  text-transform: uppercase;
  text-decoration: none;
  font: 600 12px/1 var(--display);
  letter-spacing: .13em;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.back-link:hover { color: var(--hot); }

.game-layout {
  width: min(1240px, calc(100% - 72px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(390px, 1fr);
  gap: clamp(40px, 6vw, 94px);
  min-height: calc(100svh - 68px);
  align-items: center;
  padding: clamp(26px, 4vw, 56px) 0;
}
.game-intro { max-width: 500px; }
.intro-rule { width: 62px; height: 4px; background: var(--red); margin-bottom: 27px; }
.game-intro h1 {
  font: 700 clamp(56px, 6.6vw, 104px)/.93 var(--display);
  letter-spacing: -.015em;
  margin: 0;
  max-width: 9ch;
}
.game-intro h1 span { color: var(--hot); }
.artist-credit {
  color: var(--hot);
  font: 700 12px/1 var(--display);
  letter-spacing: .18em;
  margin: 24px 0 0;
}
.intro-copy {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  max-width: 31ch;
  margin: 38px 0 0;
}
.difficulty-panel { margin-top: 58px; }
.difficulty-panel h2, .how-to h2 {
  font: 700 18px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
}
.difficulty-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.difficulty-buttons button {
  position: relative;
  min-height: 82px;
  padding: 16px 13px;
  text-align: left;
  background: linear-gradient(155deg, #24232a 0, #111115 42%, #161519 100%);
  border: 1px solid #4c4548;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, filter .18s ease;
}
.difficulty-buttons button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #726168;
  opacity: .5;
}
.difficulty-buttons button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(255,255,255,.11);
  pointer-events: none;
}
.difficulty-buttons button:hover { border-color: #c38986; filter: brightness(1.1); }
.difficulty-buttons button[aria-pressed="true"] {
  background: linear-gradient(135deg, #401419 0, #231215 45%, #161418 100%);
  border-color: #ec6d62;
  box-shadow: inset 0 0 0 1px rgba(232,86,74,.34), 0 0 28px rgba(194,8,11,.09);
}
.difficulty-buttons button[aria-pressed="true"]::before { background: #f47b70; opacity: 1; }
.difficulty-buttons strong {
  display: block;
  font: 700 17px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.difficulty-buttons span { display: block; margin-top: 9px; font-size: 11px; color: #cdc5c7; }
.how-to { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.how-to p { margin: 0; max-width: 42ch; color: var(--muted); font-size: 14px; }
.how-to kbd {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 5px;
  border: 1px solid #5b5b65;
  border-bottom-width: 3px;
  color: var(--ink);
  font: 600 12px/1 var(--display);
}
.draft-note { margin-top: 32px; color: #a5a5af; font-size: 12px; max-width: 45ch; }

.game-frame {
  min-width: 0;
  width: min(100%, 560px);
  justify-self: end;
  background: #111114;
  border: 1px solid #403b40;
  box-shadow: 0 26px 80px rgba(0,0,0,.46);
}
.hud {
  height: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr 48px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid #44383b;
  background: linear-gradient(180deg, #1d1b20, #0e0e12 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
}
.hud > div { display: grid; gap: 4px; }
.hud-label {
  font: 700 10px/1 var(--display);
  letter-spacing: .18em;
  color: #ed897e;
}
.hud strong {
  font: 700 23px/1 var(--display);
  letter-spacing: .045em;
  font-variant-numeric: tabular-nums;
}
.hud-center { text-align: center; }
.hud-center strong { font-size: 15px; }
.pause-button {
  width: 42px;
  height: 42px;
  justify-self: end;
  display: grid;
  place-items: center;
  border: 1px solid #736468;
  background: linear-gradient(145deg, #29252b, #131216);
  color: var(--ink);
  cursor: pointer;
}
.pause-button svg { width: 17px; height: 17px; fill: currentColor; }
.pause-button:disabled { opacity: .42; cursor: default; }
.pause-button:not(:disabled):hover { border-color: var(--hot); background: #34191e; }

.field {
  position: relative;
  height: min(74svh, 700px);
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
  background: #050506;
  touch-action: none;
}
.scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.45s cubic-bezier(.16,1,.3,1);
  z-index: -5;
}
.scene.is-active { opacity: 1; }
.scene--corridor { background-image: url('/assets/games/within-gethsemane/corridor.webp'); }
.scene--breaking { background-image: url('/assets/games/within-gethsemane/breaking.webp'); background-position: center 15%; }
.scene--garden { background-image: url('/assets/games/within-gethsemane/garden.webp'); background-position: center top; }
.scene-veil {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.25) 42%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.65));
  pointer-events: none;
  transition: opacity .6s ease;
}
.field[data-phase="2"] .scene-veil { opacity: .68; }
.field.is-surge .scene-veil { opacity: .45; }
.world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.fretboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: visible;
  pointer-events: none;
}
.board-shadow { fill: rgba(0,0,0,.2); }
.board-edge {
  fill: none;
  stroke: #b88076;
  stroke-width: 2.3;
  stroke-opacity: .46;
}
.board-rail {
  fill: none;
  stroke: #020203;
  stroke-width: 6;
  stroke-opacity: .76;
}
.board-rail-core { fill: none; stroke-width: 1.25; }
.board-frets { fill: none; stroke-width: 1.5; }
.board-inlay { fill: none; stroke: #d1a69b; stroke-width: 2; stroke-opacity: .35; }
.field.is-surge .board-edge { stroke: #fca799; stroke-opacity: .83; }
.field.is-surge .board-rail-core { stroke: #f0a9a0; stroke-opacity: .8; }
#notes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.receptor-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 81%;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, #c17a72 12%, #ffe1d9 50%, #c17a72 88%, transparent);
  box-shadow: 0 0 12px rgba(240,80,70,.38);
  pointer-events: none;
}
.field.is-surge .receptor-line { box-shadow: 0 0 22px rgba(255,136,118,.7); }
.input-lanes {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 70%;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.input-lanes button {
  position: relative;
  border: 0;
  background: transparent;
  color: #fff;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.input-lanes button::before {
  content: "";
  position: absolute;
  inset: 44% 1px 0;
  background: linear-gradient(180deg, rgba(204,79,71,.07), transparent 75%);
  opacity: 0;
  transition: opacity .1s ease-out;
  pointer-events: none;
}
.input-lanes button.is-down::before, .input-lanes button.is-flaring::before { opacity: 1; }
.input-lanes button:focus-visible { outline-offset: -3px; }
.receptor {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(82%, 88px);
  aspect-ratio: 1.13;
  color: #fff9f6;
  isolation: isolate;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.6));
  pointer-events: none;
}
.receptor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(13% 0, 87% 0, 100% 15%, 100% 82%, 85% 100%, 15% 100%, 0 82%, 0 15%);
  background: linear-gradient(155deg, #b59086 0%, #53484a 11%, #111015 16%, #31151b 54%, #08080b 82%, #a26962 100%);
  box-shadow: inset 0 0 0 2px #f0a99c;
}
.receptor::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  clip-path: polygon(12% 0, 88% 0, 100% 16%, 100% 80%, 84% 100%, 16% 100%, 0 80%, 0 16%);
  background: linear-gradient(160deg, #4e272b 0%, #190d12 38%, #09080c 77%, #311217 100%);
  border-top: 1px solid rgba(255,210,198,.58);
  border-bottom: 1px solid rgba(0,0,0,.9);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.65);
}
.receptor b {
  font: 700 clamp(17px, 2.5vw, 23px)/1 var(--display);
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(244,164,151,.45);
}
.receptor small { display: none; font: 700 11px/1 var(--display); letter-spacing: .1em; }
.input-lanes button.is-down .receptor,
.input-lanes button.is-flaring .receptor {
  filter: drop-shadow(0 4px 15px rgba(255,103,91,.72));
}
.input-lanes button.is-down .receptor::after,
.input-lanes button.is-flaring .receptor::after {
  background: linear-gradient(155deg, #b94740, #71191c 40%, #3b1117 84%);
  border-top-color: #fff2e8;
}
.input-lanes button.is-flaring .receptor b,
.input-lanes button.is-flaring .receptor small { text-shadow: 0 0 12px #fff; }
.judgment {
  position: absolute;
  top: 39%;
  left: 0;
  right: 0;
  z-index: 6;
  text-align: center;
  font: 700 32px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff5ee;
  text-shadow: 0 2px 14px #000, 0 0 20px rgba(255,142,127,.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .1s ease-out, transform .16s cubic-bezier(.16,1,.3,1);
}
.judgment.show { opacity: 1; transform: translateY(0); }
.judgment.good { color: #f2b3aa; }
.judgment.miss { color: #b8b8c0; text-shadow: 0 2px 14px #000; }

.board-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(5,5,7,.28), rgba(5,5,7,.45) 39%, rgba(5,5,7,.84));
  text-align: center;
  padding: 24px;
}
.board-overlay[hidden] { display: none; }
.overlay-copy { max-width: 340px; }
.overlay-mark {
  display: block;
  width: 67px;
  height: 67px;
  margin: 0 auto 28px;
  border: 1px solid rgba(247,200,185,.8);
  transform: rotate(45deg);
  background: radial-gradient(circle at 50% 50%, rgba(194,8,11,.35), rgba(26,12,17,.75) 70%);
  box-shadow: inset 0 0 0 7px rgba(0,0,0,.55), 0 9px 35px rgba(0,0,0,.4);
}
.overlay-copy p { font: 700 11px/1 var(--display); letter-spacing: .26em; color: #f3887c; }
.overlay-copy h2 { font: 700 clamp(42px,5vw,66px)/.95 var(--display); margin: 16px 0 30px; }
.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 55px;
  padding: 0 22px;
  border: 1px solid #ed554e;
  background: linear-gradient(155deg, #d80d14, #9e050b);
  color: #fff;
  font: 700 15px/1 var(--display);
  letter-spacing: .08em;
  cursor: pointer;
  margin: 0 auto;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 10px 22px rgba(0,0,0,.3);
}
.primary-button:hover { background: linear-gradient(155deg, #ed1820, #bb0810); }
.primary-button span { font-size: 24px; }
.overlay-small { display: block; margin-top: 20px; font: 600 10px/1 var(--display); letter-spacing: .17em; color: #e1d8d9; }
.choose-button {
  display: block;
  margin: 14px auto 0;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.6);
  color: #fff;
  font: 700 11px/1 var(--display);
  letter-spacing: .13em;
  padding: 0 14px;
  cursor: pointer;
}
.choose-button[hidden] { display: none; }
.choose-button:hover { border-color: var(--hot); }
.transport {
  height: 49px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  color: #d3c4c5;
  font: 600 11px/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #151318, #0e0d10);
  border-top: 1px solid #42373b;
}
.track, .power-track { height: 5px; background: #3c3539; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.track { flex: 1; }
.track span, .power-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9f0a0f, #fa796c); }
.power-track { width: 58px; background: #321216; }
.power-track span { background: linear-gradient(90deg, #be211f, #ffc7b4); }
.power-caption { font-size: 9px; color: #fa998a; }

@media (hover: none), (pointer: coarse) {
  .receptor b { display: none; }
  .receptor small { display: block; }
}
@media (max-width: 940px) {
  .game-layout { width: min(100%, 660px); grid-template-columns: 1fr; gap: 22px; padding: 28px 16px 50px; }
  .game-intro { max-width: none; }
  .game-intro h1 { font-size: clamp(50px,10vw,78px); }
  .intro-copy { margin-top: 20px; }
  .difficulty-panel { margin-top: 26px; }
  .how-to, .draft-note { display: none; }
  .game-frame { justify-self: center; }
  .field { height: min(68svh,650px); }
}
@media (max-width: 540px) {
  .game-topbar { height: 56px; padding: 0 14px; }
  .topbar-label { display: none; }
  .game-layout { gap: 20px; padding: 21px 0 0; }
  .game-intro { padding: 0 16px; }
  .intro-rule { margin-bottom: 14px; width: 40px; height: 3px; }
  .game-intro h1 { font-size: clamp(43px,11.6vw,62px); }
  .artist-credit { margin-top: 10px; font-size: 10px; }
  .intro-copy { font-size: 14px; margin: 12px 0 0; }
  .difficulty-panel { margin-top: 18px; }
  .difficulty-panel h2 { font-size: 13px; margin-bottom: 8px; }
  .difficulty-buttons button { min-height: 58px; padding: 8px; }
  .difficulty-buttons strong { font-size: 14px; }
  .difficulty-buttons span { font-size: 10px; margin-top: 5px; }
  .game-frame { width: 100%; border-left: 0; border-right: 0; }
  .hud { height: 52px; }
  .hud strong { font-size: 17px; }
  .field { height: min(61svh,620px); min-height: 350px; }
  .transport { height: 43px; font-size: 12px; }
  .receptor { width: min(89%,78px); }
}
@media (max-width: 540px) {
  body.is-session { height: 100svh; overflow: hidden; }
  body.is-session .game-topbar { height: calc(48px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  body.is-session .game-layout { display: block; width: 100%; height: calc(100svh - 48px - env(safe-area-inset-top)); min-height: 0; padding: 0; }
  body.is-session .game-intro { display: none; }
  body.is-session .game-frame { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; }
  body.is-session .hud { flex: 0 0 52px; }
  body.is-session .field { flex: 1; height: auto; min-height: 0; }
  body.is-session .transport { flex: 0 0 calc(43px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .scene-veil, .judgment, .difficulty-buttons button { transition: none; }
}