:root {
  --paper: #f1ead9;
  --paper-bright: #fffaf0;
  --ink: #172019;
  --muted: #657067;
  --line: rgba(23, 32, 25, .2);
  --lime: #c7ff3d;
  --coral: #ff6b4a;
  --sky: #8ed8ff;
  --yellow: #ffd44a;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "Menlo", "Monaco", monospace;
  --shadow: 8px 9px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 10%, rgba(142, 216, 255, .33), transparent 26rem),
    radial-gradient(circle at 4% 44%, rgba(199, 255, 61, .16), transparent 28rem),
    var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-header {
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--lime);
  background: var(--ink);
  border-radius: 13px 13px 18px 11px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 900;
  transform: rotate(-4deg);
}
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { letter-spacing: .12em; font-size: 15px; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 11px; }
nav { display: flex; gap: 34px; font-size: 13px; font-weight: 700; }
nav a { position: relative; }
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  background: var(--coral);
  transition: right .2s ease;
}
nav a:hover::after, nav a:focus-visible::after { right: 0; }
.open-sign { justify-self: end; font-size: 12px; font-weight: 750; }
.open-sign i, .status-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #2eb765;
  box-shadow: 0 0 0 4px rgba(46, 183, 101, .15);
}

.hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 76px;
  align-items: center;
  padding: 70px 0 84px;
}
.kicker, .section-index {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.kicker span {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 9px;
  color: var(--paper-bright);
  background: var(--ink);
  border-radius: 999px;
}
h1 {
  margin: 25px 0 24px;
  font-family: var(--serif);
  font-size: clamp(52px, 6.5vw, 92px);
  line-height: 1.02;
  letter-spacing: -.065em;
}
h1 em { color: var(--coral); font-style: normal; text-shadow: 2px 2px 0 var(--ink); }
.hero-lede { max-width: 590px; margin: 0; color: #414b43; font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 13px 18px 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pill span { font-size: 19px; }
.pill:hover { transform: translate(-2px, -2px); box-shadow: 4px 5px 0 var(--ink); }
.pill-dark { color: var(--paper-bright); background: var(--ink); }
.play-note { color: var(--muted); font-size: 12px; }

.hero-poster {
  position: relative;
  min-height: 390px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 44% 56% / 43% 57% 46% 54%;
  background: var(--sky);
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}
.hero-poster::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgba(23, 32, 25, .55);
  border-radius: inherit;
}
.poster-stamp {
  position: absolute;
  top: -24px;
  right: 12px;
  z-index: 2;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--paper-bright);
  background: var(--coral);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
  transform: rotate(11deg);
}
.poster-pair {
  position: absolute;
  z-index: 3;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: var(--paper-bright);
  box-shadow: 5px 6px 0 var(--ink);
  font-size: 48px;
}
.pair-a { top: 62px; left: 40px; transform: rotate(-8deg); }
.pair-b { right: 40px; bottom: 62px; transform: rotate(7deg); }
.hero-poster svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-poster path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.5s .45s ease forwards;
}
.poster-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  transform: translateX(-50%);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.marquee { overflow: hidden; border-block: 1px solid var(--ink); background: var(--lime); }
.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  animation: marquee 24s linear infinite;
}
.marquee-track b { color: var(--coral); font-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.game-section { padding: 94px 0 110px; color: var(--paper-bright); background: var(--ink); }
.game-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 52px; align-items: start; }
.game-sidebar { position: sticky; top: 24px; }
.game-sidebar .section-index { color: var(--lime); }
.game-sidebar h2 {
  margin: 18px 0 20px;
  font-family: var(--serif);
  font-size: 54px;
  line-height: .95;
  letter-spacing: -.055em;
}
.game-sidebar > p:not(.section-index) { color: rgba(255, 250, 240, .65); font-size: 13px; }
.scoreboard { margin: 30px 0 22px; border-top: 1px solid rgba(255,255,255,.2); }
.scoreboard > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.scoreboard span { color: rgba(255,255,255,.55); font-size: 11px; }
.scoreboard strong { font-family: var(--mono); font-size: 18px; }
.scoreboard strong i { font-style: normal; }
.scoreboard strong small { margin-left: 3px; color: rgba(255,255,255,.4); font-size: 10px; }
.sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-button {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  color: var(--paper-bright);
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.tool-button:hover:not(:disabled) { color: var(--ink); background: var(--lime); transform: translateY(-2px); }
.tool-button:disabled { opacity: .35; cursor: not-allowed; }
.tool-button span { font-weight: 800; }
.tool-button small { color: inherit; opacity: .62; font-size: 9px; }

.game-console {
  position: relative;
  min-width: 0;
  border: 2px solid var(--paper-bright);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%),
    #222b24;
  box-shadow: 9px 10px 0 var(--coral), 0 28px 80px rgba(0,0,0,.36);
  overflow: hidden;
}
.game-console::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  pointer-events: none;
}
.console-topline, .console-footer {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
}
.console-topline { border-bottom: 1px solid rgba(255,255,255,.16); }
.console-footer { border-top: 1px solid rgba(255,255,255,.16); }
.console-footer > span { padding: 3px 7px; color: var(--ink); background: var(--lime); border-radius: 4px; font-weight: 900; }
.console-footer p { flex: 1; margin: 0; color: rgba(255,255,255,.6); }
.sound-button { border: 0; color: var(--paper-bright); background: none; font: 700 10px var(--mono); cursor: pointer; }

.progress-track {
  position: relative;
  z-index: 22;
  height: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--coral), var(--yellow) 48%, var(--lime));
  box-shadow: 0 0 18px var(--lime);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.progress-track i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform: translateX(-100%);
  animation: progress-shine 2.4s ease-in-out infinite;
}
@keyframes progress-shine { 65%, 100% { transform: translateX(170%); } }

.board-shell {
  --cols: 8;
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(142,216,255,.11), transparent 48%),
    #111713;
  background-size: 24px 24px;
  isolation: isolate;
  overflow: hidden;
}
.board-shell::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  box-shadow: inset 0 0 60px rgba(142,216,255,.06);
  pointer-events: none;
}
.ambient-shape {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  opacity: .22;
  filter: blur(3px);
  pointer-events: none;
  animation: ambient-float 9s ease-in-out infinite alternate;
}
.shape-one { width: 210px; height: 210px; top: -95px; left: -55px; background: radial-gradient(circle, var(--coral), transparent 68%); }
.shape-two { width: 260px; height: 260px; right: -110px; bottom: -130px; background: radial-gradient(circle, var(--sky), transparent 68%); animation-delay: -3s; }
.shape-three { width: 130px; height: 130px; right: 13%; top: 8%; background: radial-gradient(circle, var(--lime), transparent 70%); animation-delay: -6s; }
@keyframes ambient-float { to { transform: translate3d(18px, 24px, 0) scale(1.12); } }
.game-board {
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
}
.tile {
  --tile-a: #fff9ee;
  --tile-b: #eadfca;
  --tile-glow: rgba(255,255,255,.3);
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 18px 14px 17px 12px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.86), transparent 29%),
    linear-gradient(145deg, var(--tile-a), var(--tile-b));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -5px 0 rgba(23,32,25,.12),
    0 7px 13px rgba(0,0,0,.3),
    2px 3px 0 rgba(0,0,0,.48);
  font-size: clamp(25px, 4vw, 43px);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.9,.2,1.2), background .18s ease, box-shadow .18s ease, opacity .2s ease, filter .18s ease;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 5px 8px auto;
  height: 26%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
  pointer-events: none;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(23,32,25,.1);
  border-radius: 12px 9px 11px 8px;
  pointer-events: none;
}
.tile-icon { position: relative; z-index: 1; transform: translateY(-1px); filter: saturate(1.13) drop-shadow(0 3px 2px rgba(36,25,18,.2)); }
.tile[data-theme="0"], .tile[data-theme="6"] { --tile-a: #ffc2cf; --tile-b: #ff6f8c; }
.tile[data-theme="1"], .tile[data-theme="9"] { --tile-a: #ffd09c; --tile-b: #ff8b3d; }
.tile[data-theme="2"], .tile[data-theme="8"] { --tile-a: #fff6a4; --tile-b: #f2ca31; }
.tile[data-theme="3"], .tile[data-theme="10"] { --tile-a: #d9ffac; --tile-b: #75cf63; }
.tile[data-theme="4"], .tile[data-theme="7"] { --tile-a: #dcbcff; --tile-b: #9b70e8; }
.tile[data-theme="5"], .tile[data-theme="11"] { --tile-a: #bceeff; --tile-b: #66b8e8; }
.tile:hover:not(.is-empty), .tile:focus-visible:not(.is-empty) {
  z-index: 3;
  transform: translateY(-6px) rotate(-1deg) scale(1.035);
  box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 rgba(23,32,25,.1), 0 13px 20px rgba(0,0,0,.4), 2px 3px 0 rgba(0,0,0,.6);
  filter: saturate(1.12) brightness(1.05);
  outline: none;
}
.tile.is-selected {
  z-index: 4;
  box-shadow: 0 0 0 3px var(--paper-bright), 0 0 0 7px var(--coral), 0 0 25px rgba(255,107,74,.85), 3px 5px 0 #000;
  transform: translateY(-5px) scale(1.045);
  animation: selected-pulse .85s ease-in-out infinite alternate;
}
.tile.is-hint { animation: hint 1s ease 2; filter: brightness(1.15) saturate(1.2); }
.tile.is-wrong { animation: wrong .3s ease; background: #ffb7aa; }
.tile.is-matched { z-index: 6; animation: matched .38s cubic-bezier(.2,.9,.3,1) forwards; pointer-events: none; }
.tile.is-empty { visibility: hidden; pointer-events: none; }
@keyframes selected-pulse { to { filter: brightness(1.13); box-shadow: 0 0 0 3px var(--paper-bright), 0 0 0 7px var(--coral), 0 0 38px rgba(255,107,74,.95), 3px 5px 0 #000; } }
@keyframes hint { 50% { transform: translateY(-7px) scale(1.08); box-shadow: 0 0 0 4px var(--lime), 0 0 28px var(--lime); } }
@keyframes wrong { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes matched { 45% { transform: translateY(-8px) scale(1.24) rotate(7deg); filter: brightness(1.35); } 100% { transform: scale(.2) rotate(-16deg); filter: brightness(1.6); opacity: 0; } }
.game-board.is-revealing .tile:not(.is-empty) { animation: tile-arrive .5s cubic-bezier(.2,.85,.25,1.25) both; animation-delay: var(--delay, 0ms); }
@keyframes tile-arrive { from { opacity: 0; transform: translateY(20px) scale(.6) rotate(-8deg); filter: blur(4px); } }

.path-layer { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.path-layer polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.path-layer #match-glow { stroke: var(--coral); stroke-width: 17; filter: url(#line-glow); opacity: 0; }
.path-layer #match-path { stroke: #fff9d9; stroke-width: 4; filter: drop-shadow(0 0 3px var(--yellow)); }
.path-layer polyline.is-visible { opacity: 1; animation: path-pop .36s ease both; }
@keyframes path-pop { from { stroke-dasharray: 10 10; stroke-dashoffset: 20; } to { stroke-dasharray: 0; stroke-dashoffset: 0; } }

.effects-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.match-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 3px 50% 50%;
  background: var(--color);
  box-shadow: 0 0 10px var(--color);
  transform: translate(-50%, -50%);
  animation: particle-burst .62s cubic-bezier(.1,.65,.25,1) forwards;
}
@keyframes particle-burst { to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(180deg) scale(.15); } }
.combo-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 9;
  display: grid;
  min-width: 150px;
  padding: 8px 18px;
  color: var(--ink);
  text-align: center;
  background: linear-gradient(135deg, var(--yellow), var(--lime));
  border: 2px solid var(--paper-bright);
  border-radius: 999px;
  box-shadow: 0 0 28px rgba(199,255,61,.5), 4px 5px 0 var(--coral);
  transform: translate(-50%, -25px) scale(.65) rotate(-4deg);
  opacity: 0;
  pointer-events: none;
}
.combo-badge small { font: 800 8px var(--mono); letter-spacing: .15em; }
.combo-badge strong { font: 950 18px/1.15 var(--sans); }
.combo-badge.is-visible { animation: combo-pop .72s cubic-bezier(.2,1.2,.25,1) both; }
@keyframes combo-pop { 45% { opacity: 1; transform: translate(-50%, 3px) scale(1.08) rotate(2deg); } 75% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-1deg); } 100% { opacity: 0; transform: translate(-50%, -12px) scale(.92); } }

.board-cover {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(142,216,255,.14), transparent 34%),
    rgba(13, 18, 14, .9);
  backdrop-filter: blur(10px);
  transition: opacity .25s ease, visibility .25s ease;
}
.board-cover > *:not(.cover-ghost):not(.cover-orbit) { position: relative; z-index: 2; }
.board-cover.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  color: transparent;
  font: 950 clamp(90px, 16vw, 170px)/1 var(--sans);
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
  transform: translate(-50%, -50%) rotate(-7deg);
  user-select: none;
}
.cover-orbit {
  position: absolute;
  width: 310px;
  height: 310px;
  z-index: 1;
  border: 1px dashed rgba(199,255,61,.24);
  border-radius: 50%;
  animation: orbit-turn 18s linear infinite;
}
.cover-orbit i { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 15px; background: rgba(255,255,255,.1); box-shadow: 0 0 22px rgba(142,216,255,.22); font-size: 26px; font-style: normal; backdrop-filter: blur(4px); }
.cover-orbit i:nth-child(1) { top: -24px; left: calc(50% - 24px); }
.cover-orbit i:nth-child(2) { right: -19px; bottom: 45px; }
.cover-orbit i:nth-child(3) { left: -19px; bottom: 45px; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.cover-chip { padding: 4px 9px; color: var(--ink); background: var(--lime); border-radius: 999px; font: 900 10px var(--mono); letter-spacing: .12em; }
.board-cover h3 { margin: 18px 0 8px; font: 800 clamp(34px, 6vw, 56px)/1 var(--serif); }
.board-cover p { max-width: 390px; margin: 0 0 24px; color: rgba(255,255,255,.65); font-size: 13px; }
.start-button {
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 4px 5px 0 var(--paper-bright);
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.start-button:hover { transform: translate(2px, 2px); box-shadow: 2px 3px 0 var(--paper-bright); }

.rules, .arcade { padding: 108px 0; }
.section-heading { margin-bottom: 42px; }
.section-heading h2 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -.055em;
}
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rule-card { position: relative; min-height: 330px; padding: 24px; border: 1px solid var(--ink); border-radius: 22px; box-shadow: 5px 6px 0 var(--ink); }
.rule-card.coral { background: var(--coral); transform: rotate(-1deg); }
.rule-card.lime { background: var(--lime); transform: translateY(20px) rotate(1deg); }
.rule-card.sky { background: var(--sky); transform: rotate(-.5deg); }
.rule-card > span { font: 800 11px var(--mono); }
.rule-card h3 { margin: 22px 0 4px; font: 900 24px var(--serif); }
.rule-card p { margin: 0; font-size: 13px; }
.rule-demo { height: 145px; display: flex; align-items: center; justify-content: center; }
.two-tiles { gap: 18px; }
.two-tiles i { width: 68px; height: 68px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper-bright); font-size: 34px; font-style: normal; box-shadow: 4px 5px 0 var(--ink); }
.route-demo { position: relative; justify-content: space-between; padding: 0 30px; }
.route-demo i { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-bright); }
.route-demo b { position: absolute; left: 52px; right: 52px; height: 58px; border-left: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.clear-demo { font-size: 96px; animation: sparkle 3s ease-in-out infinite; }
@keyframes sparkle { 50% { transform: rotate(25deg) scale(.82); } }

.arcade { padding-top: 30px; }
.arcade-heading { display: grid; grid-template-columns: 1fr 350px; align-items: end; gap: 50px; }
.arcade-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.cabinet-grid { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 14px; }
.cabinet {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--paper-bright);
}
.cabinet.active { background: var(--lime); box-shadow: 6px 7px 0 var(--ink); }
.cabinet.locked { color: rgba(23,32,25,.52); background: rgba(255,250,240,.44); border-style: dashed; }
.cabinet-no { font: 800 10px var(--mono); }
.cabinet-screen { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 52px; }
.cabinet-screen i { font: 500 40px var(--serif); }
.cabinet div:last-child { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.cabinet strong { font-family: var(--serif); font-size: 20px; }
.cabinet small { font: 700 8px var(--mono); letter-spacing: .1em; }

footer { padding: 42px 0; color: var(--paper-bright); background: var(--ink); }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 30px; }
.footer-inner strong { letter-spacing: .16em; }
.footer-inner p { margin: 5px 0 0; color: rgba(255,255,255,.55); font-size: 11px; }
.footer-note { max-width: 380px; }
.icp { font-size: 11px; color: rgba(255,255,255,.55); }
.icp:hover { color: var(--lime); }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 200;
  padding: 10px 18px;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--paper-bright);
  border-radius: 999px;
  box-shadow: 4px 5px 0 var(--coral);
  font-size: 12px;
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.win-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 42px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 28px 22px 32px 20px;
  background: var(--lime);
  box-shadow: 12px 14px 0 var(--coral);
  text-align: center;
  overflow: visible;
}
.win-dialog::backdrop { background: rgba(10, 15, 11, .78); backdrop-filter: blur(5px); }
.win-dialog h2 { margin: 10px 0 0; font: 900 64px/1 var(--serif); letter-spacing: -.06em; }
.win-dialog > p:not(.section-index) { margin: 8px 0 22px; }
.dialog-close { position: absolute; top: 12px; right: 15px; border: 0; background: none; font-size: 26px; cursor: pointer; }
.result-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 26px; border-block: 1px solid var(--ink); }
.result-strip div { display: grid; gap: 2px; padding: 12px 5px; border-right: 1px solid var(--ink); }
.result-strip div:last-child { border: 0; }
.result-strip span { font-size: 10px; }
.result-strip strong { font: 900 18px var(--mono); }
.win-dialog .start-button { background: var(--paper-bright); box-shadow: 4px 5px 0 var(--ink); }
.confetti i { position: absolute; width: 14px; height: 7px; background: var(--coral); animation: confetti 1.2s ease-in-out infinite alternate; }
.confetti i:nth-child(1) { top: -22px; left: 14%; transform: rotate(23deg); }
.confetti i:nth-child(2) { top: 18px; right: -22px; background: var(--sky); animation-delay: -.4s; }
.confetti i:nth-child(3) { bottom: 18px; left: -20px; background: var(--yellow); animation-delay: -.8s; }
.confetti i:nth-child(4) { bottom: -18px; right: 21%; transform: rotate(60deg); }
.confetti i:nth-child(5) { top: 25%; left: -28px; background: var(--sky); }
.confetti i:nth-child(6) { top: -18px; right: 30%; background: var(--yellow); }
@keyframes confetti { to { transform: translateY(9px) rotate(120deg); } }

@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr .72fr; gap: 35px; }
  .hero-poster { min-height: 330px; }
  .poster-pair { width: 70px; height: 70px; font-size: 38px; }
  .game-layout { grid-template-columns: 1fr; }
  .game-sidebar { position: static; display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px 30px; }
  .game-sidebar h2 { margin-bottom: 5px; }
  .game-sidebar > p:not(.section-index) { grid-column: 1; }
  .scoreboard { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .sidebar-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .rule-card { min-height: 300px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 560px); }
  .site-header { min-height: 72px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-copy small { display: none; }
  .open-sign { font-size: 10px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 54px 0 66px; }
  h1 { font-size: clamp(46px, 14vw, 68px); }
  .hero-lede { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-poster { display: none; }
  .game-section { padding: 62px 0 76px; }
  .game-layout { gap: 28px; }
  .game-sidebar { display: block; }
  .game-sidebar h2 { font-size: 45px; }
  .game-sidebar > p:not(.section-index) { max-width: 330px; }
  .scoreboard { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .scoreboard > div:nth-child(odd) { padding-right: 14px; border-right: 1px solid rgba(255,255,255,.2); }
  .scoreboard > div:nth-child(even) { padding-left: 14px; }
  .sidebar-actions { grid-template-columns: repeat(4, 1fr); }
  .tool-button { min-height: 58px; padding: 7px 9px; text-align: center; }
  .tool-button small { font-size: 8px; }
  .game-console { border-radius: 13px; box-shadow: 5px 6px 0 var(--coral); }
  .console-topline { min-height: 40px; }
  .board-shell { min-height: 390px; padding: 23px 8px; }
  .game-board { width: 100%; gap: 4px; }
  .tile { border-radius: 10px 8px 9px 7px; font-size: clamp(24px, 8vw, 34px); box-shadow: inset 0 -3px 0 rgba(23,32,25,.12), 1px 2px 0 rgba(0,0,0,.45); }
  .tile::after { inset: 4px; border-radius: 6px; }
  .console-footer { align-items: flex-start; }
  .console-footer p { font-size: 9px; line-height: 1.4; }
  .rules, .arcade { padding: 76px 0; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-card { min-height: 250px; }
  .rule-card.lime { transform: rotate(1deg); }
  .rule-demo { height: 105px; }
  .arcade-heading { grid-template-columns: 1fr; gap: 20px; }
  .cabinet-grid { grid-template-columns: 1fr 1fr; }
  .cabinet { min-height: 220px; }
  .cabinet.slim { grid-column: 1 / -1; min-height: 150px; }
  .cabinet-screen { font-size: 37px; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .win-dialog { padding: 38px 22px 28px; }
  .win-dialog h2 { font-size: 52px; }
}

@media (max-width: 390px) {
  .shell { width: calc(100% - 18px); }
  .board-shell { min-height: 360px; padding-inline: 5px; }
  .game-board { gap: 3px; }
  .tile { font-size: 22px; }
  .sidebar-actions { gap: 5px; }
  .tool-button span { font-size: 12px; }
  .cabinet-grid { grid-template-columns: 1fr; }
  .cabinet.slim { grid-column: auto; }
}

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