:root {
  --brand: #e31620;
  --brand-dark: #8e0d18;
  --brand-deep: #620711;
  --ink: #2b2929;
  --muted: #777174;
  --paper: #fffaf6;
  --cream: #f5ede6;
  --line: rgba(104, 14, 24, .12);
  --gap: 8px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; overflow-x: hidden; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.14), transparent 25%),
    linear-gradient(145deg, #690912 0%, #a50e19 48%, #730810 100%);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.game-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 18px;
}

.hero {
  min-height: 138px;
  padding: 26px 30px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background:
    linear-gradient(105deg, rgba(82, 4, 12, .96), rgba(199, 17, 29, .92)),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.04) 71px);
  box-shadow: 0 18px 50px rgba(44, 0, 6, .3);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: 11%;
  top: -270px;
  border: 45px solid rgba(255,255,255,.055);
  border-radius: 50%;
}

.brand-lockup { display: flex; align-items: center; gap: 25px; position: relative; z-index: 1; }
.brand-logo { width: min(330px, 31vw); height: auto; object-fit: contain; }
.hero-copy { border-left: 1px solid rgba(255,255,255,.35); padding-left: 24px; }
.eyebrow, .modal-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .18em; opacity: .76; }
.hero h1 { margin: 0; font-size: clamp(25px, 3vw, 39px); letter-spacing: .08em; line-height: 1.15; }
.hero-copy > p:last-child { margin: 8px 0 0; color: rgba(255,255,255,.74); font-size: 13px; }
.rule-pill { position: relative; z-index: 1; white-space: nowrap; padding: 11px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(63,0,8,.22); font-size: 13px; }
.rule-pill span { display: inline-block; margin-right: 7px; color: #ffb6ba; font-size: 18px; transform: rotate(-20deg); }

.game-panel {
  display: grid;
  grid-template-columns: 182px 1fr;
  min-height: 650px;
  border-radius: 0 0 24px 24px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(44, 0, 6, .36);
  overflow: hidden;
  min-width: 0;
}

.dashboard { min-width: 0; padding: 26px 20px; background: #f2e9e3; border-right: 1px solid var(--line); }
.stat { padding: 15px 8px; border-bottom: 1px solid rgba(112, 43, 48, .11); }
.stat-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.stat strong { color: var(--brand-dark); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 27px; letter-spacing: .05em; }
.timer-stat strong { color: var(--brand); }
.timer-stat.warning strong { animation: pulse .75s infinite alternate; }
.controls { min-width: 0; display: grid; gap: 9px; margin-top: 22px; }
.tool-btn {
  min-width: 0;
  min-height: 46px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #544c4e;
  border: 1px solid rgba(107,37,43,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.64);
  cursor: pointer;
  transition: .18s ease;
}
.tool-btn:hover:not(:disabled) { color: var(--brand); border-color: rgba(227,22,32,.35); background: #fff; transform: translateX(2px); }
.tool-btn:disabled { opacity: .42; cursor: not-allowed; }
.tool-icon { width: 24px; text-align: center; color: var(--brand); font-size: 20px; font-weight: 700; }
.tool-btn em { color: var(--brand); font-style: normal; font-weight: 800; }
.audio-btn[aria-pressed="false"] { color: #958e90; background: rgba(225,219,216,.6); }
.audio-btn[aria-pressed="false"] .tool-icon { color: #aaa2a4; text-decoration: line-through; }

.board-wrap { min-width: 0; padding: 24px 28px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.board-frame { position: relative; width: min(100%, 830px); }
.board {
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  padding: 12px;
  border: 1px solid rgba(118, 31, 38, .12);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    repeating-linear-gradient(45deg, #efe4dc 0 7px, #f7f0eb 7px 14px);
  box-shadow: inset 0 0 28px rgba(110, 39, 43, .06), 0 8px 22px rgba(92, 13, 20, .08);
}

.tile {
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  position: relative;
  border: 1px solid rgba(108, 50, 54, .12);
  border-radius: 12px;
  background: #ebeae9;
  box-shadow: 0 3px 8px rgba(58, 34, 34, .1), inset 0 1px rgba(255,255,255,.9);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .23s ease;
}
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.tile:hover { transform: translateY(-2px); border-color: rgba(227,22,32,.44); box-shadow: 0 7px 13px rgba(102,18,24,.16); z-index: 2; }
.tile.selected { transform: translateY(-2px) scale(1.045); border: 3px solid var(--brand); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(227,22,32,.25), 0 8px 16px rgba(90,0,8,.2); z-index: 4; }
.tile.hinted { animation: hint 1s ease-in-out infinite; border-color: #ffb000; box-shadow: 0 0 0 4px rgba(255,176,0,.25); z-index: 3; }
.tile.removing { opacity: 0; transform: scale(.72) rotate(2deg); pointer-events: none; }
.tile.empty { visibility: hidden; pointer-events: none; }
.tile:focus-visible, button:focus-visible { outline: 3px solid #ffb3b8; outline-offset: 2px; }

.path-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 6; }
#pathLine { fill: none; stroke: #f21f2c; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 4px rgba(227,22,32,.7)); stroke-dasharray: 10 7; animation: dash .45s linear infinite; }
.pause-cover { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: #fff; border-radius: 18px; background: rgba(77, 7, 14, .87); backdrop-filter: blur(7px); }
.pause-cover[hidden] { display: none; }
.pause-mark { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 25px; }
.pause-cover strong { font-size: 21px; }
.pause-cover button { padding: 9px 23px; color: var(--brand); border: 0; border-radius: 999px; background: #fff; font-weight: 800; cursor: pointer; }
.message { min-height: 24px; margin: 13px 0 0; color: #746a6c; font-size: 13px; }
.message.good { color: #a90f19; font-weight: 700; }
.message.bad { color: #a36b16; }

footer { padding: 14px 8px 0; display: flex; justify-content: space-between; color: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .06em; }

.modal {
  position: fixed; inset: 0; z-index: 30; padding: 20px;
  display: grid; place-items: center;
  background: rgba(49, 0, 6, .68); backdrop-filter: blur(9px);
  opacity: 0; visibility: hidden; transition: .25s ease;
}
.modal.show { opacity: 1; visibility: visible; }
.modal-card { width: min(470px, 100%); padding: 40px; text-align: center; border: 1px solid rgba(255,255,255,.8); border-radius: 25px; background: #fffaf6; box-shadow: 0 28px 90px rgba(32,0,4,.35); transform: translateY(14px) scale(.98); transition: .25s ease; }
.modal.show .modal-card { transform: none; }
.modal-kicker { display: block; color: var(--brand); opacity: 1; }
.modal-card h2 { margin: 8px 0 12px; color: var(--brand-dark); font-size: 30px; }
.modal-card > p { margin: 0 auto; max-width: 370px; color: #71686a; font-size: 14px; line-height: 1.8; }
.mini-rules { margin: 25px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.mini-rules span { padding: 14px 5px; color: #766d6f; font-size: 12px; }
.mini-rules span + span { border-left: 1px solid var(--line); }
.mini-rules b { display: block; color: var(--brand); font: 800 22px/1.2 ui-monospace, monospace; }
.primary-btn { min-width: 205px; padding: 13px 22px; color: #fff; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--brand), #b40f1a); box-shadow: 0 8px 22px rgba(201,15,26,.28); font-weight: 800; letter-spacing: .05em; cursor: pointer; transition: .18s ease; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(201,15,26,.36); }
.primary-btn span { margin-left: 10px; }
.result-icon { width: 68px; height: 68px; margin: -7px auto 15px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 9px rgba(227,22,32,.1); font-size: 34px; }
.final-score { margin: 23px 0; padding: 14px; border-radius: 13px; background: #f4e9e3; }
.final-score span { display: block; color: var(--muted); font-size: 11px; }
.final-score strong { color: var(--brand); font: 800 32px/1.25 ui-monospace, monospace; letter-spacing: .07em; }

@keyframes hint { 50% { transform: translateY(-4px) scale(1.055); box-shadow: 0 0 0 6px rgba(255,176,0,.24), 0 9px 18px rgba(105,57,0,.2); } }
@keyframes dash { to { stroke-dashoffset: -17; } }
@keyframes pulse { to { opacity: .5; transform: scale(.97); } }

@media (max-width: 900px) {
  .game-shell { width: min(100% - 20px, 760px); padding-top: 10px; }
  .hero { min-height: 114px; padding: 21px; }
  .brand-logo { width: 255px; }
  .hero-copy > p:last-child, .rule-pill { display: none; }
  .game-panel { grid-template-columns: 1fr; min-height: 0; }
  .dashboard { padding: 13px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat { padding: 7px 5px; border-bottom: 0; text-align: center; }
  .stat strong { font-size: 23px; }
  .controls { grid-column: 1/-1; grid-template-columns: repeat(6, 1fr); margin: 3px 0 0; }
  .tool-btn { justify-content: center; min-height: 40px; }
  .tool-icon { width: auto; }
  .board-wrap { padding: 18px 14px 12px; }
}

@media (max-width: 620px) {
  :root { --gap: 5px; }
  .game-shell { width: 100%; padding: 0; }
  .hero { min-height: 92px; padding: 17px 16px; border-radius: 0; }
  .brand-lockup { width: 100%; gap: 14px; }
  .brand-logo { width: 44%; max-width: 220px; }
  .hero-copy { padding-left: 14px; }
  .eyebrow { display: none; }
  .hero h1 { font-size: clamp(18px, 5.5vw, 25px); white-space: nowrap; }
  .game-panel { border-radius: 0; }
  .dashboard { padding: 10px 9px; gap: 4px; }
  .stat-label { font-size: 10px; }
  .stat strong { font-size: 19px; }
  .controls { gap: 5px; }
  .controls { grid-template-columns: repeat(3, 1fr); }
  .tool-btn { min-height: 43px; padding: 4px 2px; flex-direction: column; gap: 0; font-size: 11px; line-height: 1.1; }
  .tool-icon { font-size: 17px; }
  .board-wrap { padding: 12px 7px 9px; }
  .board { --cols: 6; padding: 7px; border-radius: 13px; }
  .tile { border-radius: 8px; }
  .message { margin-top: 9px; font-size: 12px; }
  footer { padding: 10px 12px; background: #680811; }
  footer span:last-child { display: none; }
  .modal { padding: 14px; overflow: auto; }
  .modal-card { width: calc(100vw - 28px); max-width: 470px; min-width: 0; padding: 32px 23px; overflow: hidden; }
  .modal-card > p { font-size: 13px; }
}

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