@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #06131c;
  --navy: #0a1c28;
  --navy-2: #102a38;
  --ice: #dff5f4;
  --paper: #f3f0e6;
  --white: #fffef7;
  --cyan: #42d6d0;
  --cyan-dark: #168d91;
  --red: #ff4d3d;
  --gold: #f6c85f;
  --muted: #8da5ad;
  --line: rgba(223, 245, 244, 0.14);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 12% 5%, rgba(66, 214, 208, 0.11), transparent 28rem),
    radial-gradient(circle at 90% 75%, rgba(255, 77, 61, 0.08), transparent 32rem),
    linear-gradient(135deg, #071722 0%, #061019 100%);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.topbar {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 19, 28, 0.88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 15;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  padding: 10px 24px;
  width: max-content;
}

.brand-mark, .mini-crest {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 2px solid var(--cyan);
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(145deg, #143747, #071722);
  color: var(--ice);
  font: 900 18px/1 "Barlow Condensed", sans-serif;
  box-shadow: inset 0 0 0 4px rgba(66,214,208,.08);
}

.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 900 23px/.9 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.brand-copy small { margin-top: 7px; color: var(--muted); font: 700 9px/1 Inter, sans-serif; letter-spacing: .16em; }

.run-status {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-inline: 1px solid var(--line);
  transform: skew(-10deg);
  padding-inline: 32px;
}
.run-status > * { transform: skew(10deg); }
.run-status span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.run-status strong { margin-top: 5px; font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; }

.topbar-actions { display: flex; justify-content: flex-end; align-items: stretch; }
.utility-button {
  min-width: 80px;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 11px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
}
.utility-button:hover { background: rgba(66,214,208,.1); }
.utility-button > span:first-child { color: var(--cyan); font-size: 18px; }

.game-shell {
  width: min(1540px, 100%);
  min-height: calc(100vh - 112px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 250px;
}

.rail {
  padding: 26px 20px;
  background: rgba(7, 23, 33, .58);
}
.rail--route { border-right: 1px solid var(--line); }
.rail--team { border-left: 1px solid var(--line); }
.rail-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.rail-heading span { color: var(--muted); font: 700 10px/1 Inter, sans-serif; letter-spacing: .18em; }
.rail-heading b { font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--ice); }
.rail-heading--small { margin: 0 0 14px; }

.route { list-style: none; padding: 0; margin: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.route-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 13px; align-items: center; min-height: 68px; color: #66808b; }
.route-node {
  width: 36px; height: 36px; border: 2px solid #2b4652; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); z-index: 1; font: 800 12px/1 "Barlow Condensed", sans-serif;
}
.route-copy { display: flex; flex-direction: column; }
.route-copy strong { font: 700 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.route-copy small { margin-top: 5px; font-size: 9px; letter-spacing: .08em; }
.route-item.is-active { color: var(--white); }
.route-item.is-active .route-node { color: var(--ink); border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 0 6px rgba(66,214,208,.1); }
.route-item.is-complete { color: var(--ice); }
.route-item.is-complete .route-node { color: var(--cyan); border-color: var(--cyan-dark); }
.route-item.is-lost .route-node { color: var(--red); border-color: var(--red); }

.rail-note { margin-top: 28px; padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.rail-note > span, .identity-card > span { color: var(--cyan); font: 700 9px/1 Inter, sans-serif; letter-spacing: .16em; }
.rail-note strong { display: block; margin-top: 9px; font: 800 20px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.rail-note p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.stage { min-width: 0; padding: 26px clamp(18px, 3vw, 46px) 40px; }
.score-ribbon {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr 118px 1fr;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--cyan-dark);
  background: rgba(8, 27, 38, .9);
  box-shadow: var(--shadow);
}
.score-team { display: grid; grid-template-columns: 38px 1fr 36px; gap: 12px; align-items: center; padding: 10px 18px; }
.score-team--away { grid-template-columns: 36px 1fr 38px; text-align: right; }
.score-team b { font: 800 clamp(14px, 1.5vw, 18px)/1 "Barlow Condensed", sans-serif; letter-spacing: .07em; white-space: nowrap; }
.score-team strong { font: 900 32px/1 "Barlow Condensed", sans-serif; }
.mini-crest { width: 34px; font-size: 13px; }
.mini-crest--away { border-color: var(--red); color: #ffd9d5; box-shadow: inset 0 0 0 4px rgba(255,77,61,.08); }
.score-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline: 1px solid var(--line); background: rgba(0,0,0,.16); }
.score-clock span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.score-clock strong { margin-top: 5px; font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; }

.scene {
  min-height: 610px;
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(13, 39, 52, .95), rgba(5, 15, 23, .97));
  box-shadow: var(--shadow);
}
.scene::before { content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none; background: repeating-linear-gradient(118deg, transparent 0 55px, rgba(255,255,255,.035) 56px 57px); }
.scene-content { position: relative; z-index: 2; padding: clamp(24px, 4.2vw, 54px); min-height: 610px; display: flex; flex-direction: column; }

.hero-screen { justify-content: flex-end; overflow: hidden; }
.hero-screen::after { content: "IB"; position: absolute; right: -18px; top: -58px; color: rgba(223,245,244,.035); font: 900 310px/1 "Barlow Condensed", sans-serif; transform: skew(-8deg); pointer-events: none; }
.kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); font: 800 10px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.display-title { max-width: 760px; margin: 14px 0 16px; font: italic 900 clamp(58px, 8.5vw, 118px)/.74 "Barlow Condensed", sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.display-title em { color: var(--red); font-style: inherit; }
.lede { max-width: 590px; margin: 0; color: #b7cad0; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.meta-strip { display: flex; gap: 28px; margin-top: 28px; color: var(--muted); font: 700 10px/1 Inter, sans-serif; letter-spacing: .12em; }
.meta-strip b { color: var(--white); }

.button {
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--red);
  color: #fff;
  font: 900 14px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(0,0,0,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.button::after { content: "↗"; font-size: 18px; }
.button:hover { transform: translate(-2px, -2px); background: #ff6558; }
.button--secondary { background: transparent; border-color: var(--cyan-dark); color: var(--ice); }
.button--secondary::after { content: "→"; color: var(--cyan); }
.button--ghost { min-height: 44px; background: transparent; border-color: var(--line); box-shadow: none; }
.button--ghost::after, .button--danger::after { content: none; }
.button--danger { min-height: 44px; box-shadow: none; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.screen-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.screen-header h1, .screen-header h2 { margin: 8px 0 0; font: 900 clamp(38px, 5.5vw, 72px)/.88 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.chapter-stamp { min-width: 84px; padding: 12px; border: 1px solid var(--line); text-align: center; transform: rotate(2deg); }
.chapter-stamp span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .15em; }
.chapter-stamp b { display: block; margin-top: 4px; color: var(--red); font: 900 28px/1 "Barlow Condensed", sans-serif; }

.choice-intro { max-width: 680px; margin: 18px 0 24px; color: #b7cad0; font-size: 15px; line-height: 1.65; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; }
.choice-card {
  min-height: 224px;
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
  color: var(--white);
  text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.choice-card::after { content: attr(data-index); position: absolute; right: 12px; bottom: -24px; color: rgba(255,255,255,.04); font: 900 110px/1 "Barlow Condensed", sans-serif; }
.choice-card:hover { transform: translateY(-4px); border-color: var(--cyan); background: linear-gradient(160deg, rgba(66,214,208,.11), rgba(255,255,255,.015)); }
.choice-card .choice-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan-dark); color: var(--cyan); font: 900 17px/1 "Barlow Condensed", sans-serif; }
.choice-card h3 { margin: 22px 0 8px; font: 900 25px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.choice-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.choice-card small { display: block; margin-top: 14px; color: var(--gold); font: 700 9px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.choice-card .read-badge { position: absolute; top: 14px; right: 12px; z-index: 2; padding: 6px 8px; color: var(--ink); background: var(--gold); font: 800 8px/1 Inter, sans-serif; letter-spacing: .09em; }

.locker-layout { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
.matchup-poster {
  align-self: stretch;
  min-height: 310px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  border: 1px solid rgba(66,214,208,.3);
  background:
    linear-gradient(160deg, rgba(66,214,208,.13), transparent 42%),
    linear-gradient(340deg, rgba(255,77,61,.12), transparent 38%),
    repeating-linear-gradient(115deg, transparent 0 24px, rgba(255,255,255,.024) 25px 26px),
    #091c27;
}
.matchup-poster::before, .matchup-poster::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 260px;
  bottom: -56px;
  border-radius: 5px;
  background: linear-gradient(#d6b57b, #815727);
  opacity: .35;
}
.matchup-poster::before { left: 44%; transform: rotate(31deg); }
.matchup-poster::after { right: 44%; transform: rotate(-31deg); }
.poster-kicker { position: relative; z-index: 2; color: var(--muted); font: 800 8px/1 Inter, sans-serif; letter-spacing: .24em; }
.versus-lockup { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin: 22px 0 18px; }
.versus-lockup > b { color: var(--red); font: italic 900 22px/1 "Barlow Condensed", sans-serif; }
.poster-crest {
  width: 66px;
  height: 76px;
  display: grid;
  place-items: center;
  color: var(--ice);
  border: 3px solid var(--cyan);
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, #17465a, #07141d);
  box-shadow: inset 0 0 0 5px rgba(66,214,208,.08), 0 10px 24px rgba(0,0,0,.25);
  font: 900 23px/1 "Barlow Condensed", sans-serif;
}
.poster-crest--away { border-color: var(--red); background: linear-gradient(145deg, #5a261f, #180b0a); box-shadow: inset 0 0 0 5px rgba(255,77,61,.08), 0 10px 24px rgba(0,0,0,.25); }
.poster-opponent { position: relative; z-index: 2; text-align: center; font: 900 25px/.95 "Barlow Condensed", sans-serif; letter-spacing: .05em; }
.poster-venue { position: relative; z-index: 2; margin-top: 8px; color: var(--muted); font: 700 8px/1 Inter, sans-serif; letter-spacing: .13em; }
.quote { margin: 18px 0 0; padding-left: 20px; border-left: 3px solid var(--red); font: italic 700 clamp(19px, 2.5vw, 29px)/1.25 "Barlow Condensed", sans-serif; }

.scout-card { margin-top: 22px; display: grid; grid-template-columns: 150px 1fr; border: 1px solid var(--line); background: rgba(0,0,0,.17); }
.scout-label { padding: 18px; border-right: 1px solid var(--line); }
.scout-label span { display: block; color: var(--red); font: 800 9px/1 Inter, sans-serif; letter-spacing: .16em; }
.scout-label strong { display: block; margin-top: 8px; font: 900 21px/1 "Barlow Condensed", sans-serif; }
.scout-copy { padding: 18px; color: var(--ice); font-size: 13px; line-height: 1.55; }

.match-screen { padding-bottom: 34px; }
.rink-window {
  min-height: 220px;
  position: relative;
  overflow: hidden;
  margin: 22px 0;
  isolation: isolate;
  border: 9px solid #f1f7f6;
  border-radius: 58px;
  background:
    linear-gradient(90deg, transparent 8.1%, rgba(210, 43, 51, .78) 8.1% 8.55%, transparent 8.55%),
    linear-gradient(90deg, transparent 25%, rgba(24, 132, 190, .65) 25% 25.8%, transparent 25.8% 74.2%, rgba(24, 132, 190, .65) 74.2% 75%, transparent 75%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(206, 48, 58, .58) 3px 6px, transparent 6px 10px) 50% 0 / 10px 100% no-repeat,
    radial-gradient(ellipse at 28% 8%, rgba(255,255,255,.92), transparent 24%),
    radial-gradient(ellipse at 74% 15%, rgba(255,255,255,.66), transparent 25%),
    radial-gradient(ellipse at 50% 115%, rgba(59,156,180,.2), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 2px, transparent 2px 25px),
    linear-gradient(115deg, #cfe8e9 0%, #edf8f6 33%, #d5ecee 65%, #f4fbf9 100%);
  box-shadow:
    inset 0 0 0 3px rgba(48, 135, 155, .68),
    inset 0 9px 18px rgba(255,255,255,.55),
    inset 0 -12px 24px rgba(22,80,102,.18),
    0 9px 0 #93aeb3,
    0 15px 25px rgba(0,0,0,.3);
}
.rink-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .46;
  background:
    linear-gradient(168deg, transparent 0 22%, rgba(255,255,255,.72) 23%, transparent 24% 50%, rgba(255,255,255,.35) 51%, transparent 52%),
    repeating-linear-gradient(13deg, transparent 0 31px, rgba(45,102,116,.18) 32px, transparent 33px 58px),
    repeating-linear-gradient(167deg, transparent 0 43px, rgba(255,255,255,.55) 44px, transparent 45px 81px);
  mix-blend-mode: screen;
}
.rink-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='140' viewBox='0 0 280 140'%3E%3Cg fill='none' stroke='%23668e9c' stroke-opacity='.35' stroke-width='.7'%3E%3Cpath d='M12 99c41-32 73-3 110-40S201 31 267 9'/%3E%3Cpath d='M-9 55c42 26 80 22 113-2s73-12 103 17 61 26 88 13'/%3E%3Cpath d='M17 122c25-8 46-8 70 0m72-99c34 7 63 3 91-11'/%3E%3C/g%3E%3C/svg%3E");
}
.ice-logo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: rgba(6,19,28,.14); font: 900 34px/1 "Barlow Condensed", sans-serif; text-shadow: 0 1px rgba(255,255,255,.55); }
.faceoff { position: absolute; z-index: 2; width: 61px; height: 61px; border: 3px solid rgba(194,51,59,.47); border-radius: 50%; }
.faceoff::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: rgba(194,51,59,.55); transform: translate(-50%,-50%); }
.faceoff--tl { left: 16.5%; top: 12%; } .faceoff--bl { left: 16.5%; bottom: 12%; }
.faceoff--tr { right: 16.5%; top: 12%; } .faceoff--br { right: 16.5%; bottom: 12%; }
.center-circle { position: absolute; z-index: 2; left: 50%; top: 50%; width: 88px; height: 88px; border: 3px solid rgba(194,51,59,.55); border-radius: 50%; transform: translate(-50%,-50%); }
.center-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: rgba(194,51,59,.6); transform: translate(-50%,-50%); }
.crease { position: absolute; z-index: 2; top: 50%; width: 38px; height: 66px; border: 3px solid rgba(193,46,56,.7); background: rgba(54,160,199,.22); transform: translateY(-50%); }
.crease--left { left: 4.7%; border-left: 0; border-radius: 0 48px 48px 0; }
.crease--right { right: 4.7%; border-right: 0; border-radius: 48px 0 0 48px; }
.goal { position: absolute; z-index: 3; top: 50%; width: 19px; height: 59px; border: 4px solid #d53d43; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(85,106,111,.26) 7px 8px); transform: translateY(-50%); box-shadow: 0 3px 5px rgba(10,38,47,.25); }
.goal--left { left: 1.2%; border-left-width: 2px; border-radius: 0 7px 7px 0; }
.goal--right { right: 1.2%; border-right-width: 2px; border-radius: 7px 0 0 7px; }
.snow-bank { position: absolute; z-index: 4; height: 8px; width: 22%; bottom: -2px; border-radius: 50%; background: rgba(255,255,255,.74); filter: blur(2px); }
.snow-bank--left { left: 9%; transform: rotate(-1deg); }
.snow-bank--right { right: 13%; transform: rotate(1deg); }
.skater { position: absolute; z-index: 6; top: 50%; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: white; font: 900 14px/1 "Barlow Condensed", sans-serif; box-shadow: 9px 11px 0 -7px rgba(7,16,21,.78), 0 5px 12px rgba(16,74,92,.3); transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s ease; }
.skater--home { left: 36%; background: #138b96; border: 4px solid #0a5360; }
.skater--away { left: 64%; background: #d94334; border: 4px solid #8f261d; }
.puck { position: absolute; z-index: 7; left: 49%; top: 60%; width: 13px; height: 9px; border-radius: 50%; background: linear-gradient(#1b2428, #030708); box-shadow: 4px 5px 4px rgba(19,63,75,.32), inset 0 1px 0 rgba(255,255,255,.2); transition: left .55s ease, top .55s ease; }
.rink-window.is-home-play .skater--home { left: 67%; top: 43%; }
.rink-window.is-home-play .puck { left: 77%; top: 47%; }
.rink-window.is-away-play .skater--away { left: 35%; top: 58%; }
.rink-window.is-away-play .puck { left: 22%; top: 53%; }

.situation { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.situation-copy h2 { margin: 7px 0 7px; font: 900 clamp(30px, 4vw, 48px)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.situation-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.clue-chip { max-width: 250px; padding: 12px 15px; border-left: 3px solid var(--gold); background: rgba(246,200,95,.08); color: #f8e1aa; font-size: 11px; line-height: 1.45; }
.clue-chip b { color: var(--gold); }
.tactic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.tactic-button { min-height: 108px; padding: 15px; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--white); cursor: pointer; transition: border-color .15s, transform .15s; }
.tactic-button:hover { border-color: var(--cyan); transform: translateY(-2px); }
.tactic-button strong { display: block; font: 800 18px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.tactic-button span { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.tactic-button em { display: block; margin-top: 10px; color: var(--cyan); font: normal 700 8px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

.result-panel { margin-top: auto; padding: 22px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.result-panel.is-win { border-color: rgba(66,214,208,.5); }
.result-panel.is-loss { border-color: rgba(255,77,61,.55); }
.result-grade { display: inline-block; padding: 6px 9px; color: var(--ink); background: var(--gold); font: 900 9px/1 Inter, sans-serif; letter-spacing: .14em; }
.result-panel.is-win .result-grade { background: var(--cyan); }
.result-panel.is-loss .result-grade { color: white; background: var(--red); }
.result-panel h2 { margin: 12px 0 6px; font: 900 clamp(34px, 5vw, 58px)/.9 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.result-panel p { max-width: 680px; margin: 0; color: #b5c8ce; font-size: 13px; line-height: 1.6; }
.result-panel .button { margin-top: 19px; }

.play-log { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.play-log li { padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.play-log li.is-good { color: var(--cyan); border-color: rgba(66,214,208,.3); }
.play-log li.is-bad { color: #ff958b; border-color: rgba(255,77,61,.3); }

.condition-list { display: grid; gap: 18px; }
.condition > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.condition span { color: var(--muted); font: 700 9px/1 Inter, sans-serif; letter-spacing: .13em; }
.condition strong { font: 800 13px/1 "Barlow Condensed", sans-serif; }
.meter { height: 5px; overflow: hidden; background: #17303c; }
.meter i { display: block; height: 100%; width: 50%; background: var(--cyan); transition: width .35s ease, background .35s ease; }
.condition[data-stat="nerve"] .meter i { background: var(--gold); }
.identity-card { margin-top: 28px; padding: 17px; border: 1px solid var(--line); background: rgba(66,214,208,.045); }
.identity-card strong { display: block; margin-top: 10px; color: var(--white); font: 900 23px/1 "Barlow Condensed", sans-serif; }
.identity-card p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.relics-block { margin-top: 28px; }
.relics { display: grid; gap: 8px; }
.relic { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); }
.relic-icon { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(246,200,95,.1); color: var(--gold); font-size: 17px; }
.relic strong { display: block; font: 800 13px/1 "Barlow Condensed", sans-serif; }
.relic small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.empty-state { color: #617b85; font-size: 10px; line-height: 1.5; }

.ending-screen { text-align: center; justify-content: center; align-items: center; }
.cup { width: 120px; height: 124px; position: relative; margin-bottom: 22px; }
.cup::before { content: ""; position: absolute; left: 30px; top: 0; width: 60px; height: 78px; background: linear-gradient(90deg, #9b6f20, #ffe59a 45%, #c59536); clip-path: polygon(8% 0,92% 0,78% 72%,60% 82%,60% 100%,40% 100%,40% 82%,22% 72%); }
.cup::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 72px; height: 14px; background: var(--gold); box-shadow: 0 -13px 0 -3px #c89537; }
.ending-screen h1 { margin: 0; max-width: 800px; font: italic 900 clamp(52px, 8vw, 100px)/.78 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.ending-screen p { max-width: 580px; color: #b7cad0; line-height: 1.6; }
.ending-stats { display: flex; gap: 10px; margin: 18px 0 24px; }
.ending-stats div { min-width: 110px; padding: 13px; border: 1px solid var(--line); }
.ending-stats strong { display: block; font: 900 25px/1 "Barlow Condensed", sans-serif; }
.ending-stats span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }

.ticker { height: 36px; overflow: hidden; border-top: 1px solid var(--line); background: var(--cyan); color: var(--ink); }
.ticker div { width: max-content; height: 100%; display: flex; align-items: center; gap: 30px; padding-left: 30px; font: 900 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .13em; animation: ticker 24s linear infinite; }
.ticker i { font-style: normal; color: var(--red); }
@keyframes ticker { to { transform: translateX(-35%); } }

.confirm-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(1,8,12,.82); backdrop-filter: blur(8px); }
.confirm-layer[hidden] { display: none; }
.confirm-card { width: min(420px, 100%); padding: 30px; border: 1px solid var(--line); background: var(--navy); box-shadow: var(--shadow); }
.confirm-card h2 { margin: 12px 0 8px; font: 900 38px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.confirm-card p { color: var(--muted); font-size: 13px; }
.button-row { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }

.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; }

@media (max-width: 1100px) {
  .game-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .rail--team { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 24px; }
  .rail--team > .rail-heading { display: none; }
  .identity-card, .relics-block { margin-top: 0; }
  .condition-list { grid-template-columns: repeat(3, 1fr); align-items: center; }
  .relics { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .topbar { min-height: 62px; grid-template-columns: 1fr auto; }
  .brand { padding: 8px 12px; }
  .brand-mark { width: 36px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small, .utility-label, .run-status { display: none; }
  .utility-button { min-width: 54px; }
  .game-shell { display: block; }
  .rail--route { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; }
  .rail--route .rail-heading, .rail-note { display: none; }
  .route { display: flex; justify-content: space-between; }
  .route::before { left: 18px; right: 18px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .route-item { min-height: 36px; display: block; }
  .route-copy { display: none; }
  .stage { padding: 14px 12px 24px; }
  .score-ribbon { grid-template-columns: 1fr 74px 1fr; min-height: 58px; }
  .score-team { grid-template-columns: 28px 1fr 22px; gap: 6px; padding: 8px; }
  .score-team--away { grid-template-columns: 22px 1fr 28px; }
  .score-team b { font-size: 12px; }
  .score-team strong { font-size: 24px; }
  .mini-crest { width: 27px; font-size: 10px; }
  .score-clock strong { font-size: 17px; }
  .scene, .scene-content { min-height: 580px; }
  .scene-content { padding: 24px 18px; }
  .display-title { font-size: clamp(56px, 21vw, 86px); }
  .meta-strip { gap: 13px; flex-wrap: wrap; font-size: 8px; }
  .choice-grid, .tactic-grid { grid-template-columns: 1fr; }
  .choice-card { min-height: 148px; }
  .choice-card h3 { margin-top: 14px; }
  .choice-card::after { font-size: 80px; }
  .locker-layout { display: block; }
  .matchup-poster { display: none; }
  .scout-card { grid-template-columns: 1fr; }
  .scout-label { border-right: 0; border-bottom: 1px solid var(--line); }
  .situation { display: block; }
  .clue-chip { max-width: none; margin-top: 14px; }
  .rink-window { min-height: 170px; }
  .rail--team { display: block; padding: 20px 14px; }
  .condition-list { grid-template-columns: 1fr; }
  .identity-card, .relics-block { margin-top: 22px; }
  .relics { grid-template-columns: 1fr; }
  .ending-stats { flex-wrap: wrap; justify-content: center; }
}

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