:root {
  color-scheme: light;
  --ink: #26385f;
  --cream-1: #ffe5ba;
  --cream-2: #f8d69f;
  --glow: #ff31dc;
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 52% -8%, #fff1c9 0 18%, transparent 44%),
    linear-gradient(165deg, #f8c98e 0%, #f6d5aa 44%, #f3bf86 100%);
  color: var(--ink);
  overflow-x: hidden;
}

button { font: inherit; }
.game-shell { width: min(100%, 560px); min-height: 100vh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)); }
.topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.brand { display: flex; align-items: center; gap: 6px; color: #445c96; font-size: 17px; font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px #fff8de; }
.brand-mark { color: #ff6cab; font-size: 22px; filter: drop-shadow(0 1px 0 #fff7dc); }
.status-cluster { display: flex; align-items: center; gap: 8px; }
.score-card { min-width: 84px; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; padding: 6px 9px; border-radius: 15px; color: #fff; background: rgba(63, 91, 149, .9); box-shadow: inset 0 1px 0 #91b8ff, 0 2px 0 #304b7f; }
.score-card small { font-size: 10px; font-weight: 700; opacity: .72; }.score-card strong { font-size: 15px; line-height: 1; letter-spacing: -.03em; }
.restart, .renew { border: 0; cursor: pointer; color: #fff; background: #ff6b83; box-shadow: inset 0 1px 0 #ffd3cb, 0 3px 0 #cc3e61; transition: transform .15s, filter .15s; }
.restart { width: 35px; height: 35px; border-radius: 12px; font-size: 23px; font-weight: 800; line-height: 1; }
.sound-toggle { background: #6d95df; box-shadow: inset 0 1px 0 #cce0ff, 0 3px 0 #3e65ae; font-size: 20px; }.sound-toggle.is-muted { color: #cbd8f0; background: #8291ac; box-shadow: inset 0 1px 0 #d9e0ed, 0 3px 0 #59687f; }
.restart:active, .renew:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffd3cb, 0 1px 0 #cc3e61; }

.stage { display: grid; place-items: center; }
.board { position: relative; width: 100%; max-height: calc(100vh - 118px); aspect-ratio: 10 / 16; overflow: hidden; touch-action: none; isolation: isolate; container-type: inline-size; border: 4px solid rgba(255, 246, 217, .72); border-radius: 21px; box-shadow: 0 12px 28px rgba(152, 83, 78, .2), inset 0 0 0 2px rgba(194, 126, 90, .24); background-color: var(--cream-1); background-image: linear-gradient(45deg, var(--cream-2) 25%, transparent 25%), linear-gradient(-45deg, var(--cream-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cream-2) 75%), linear-gradient(-45deg, transparent 75%, var(--cream-2) 75%); background-size: 20% 12.5%; background-position: 0 0, 0 6.25%, 10% -6.25%, -10% 0; }
.tiles { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(16, 1fr); gap: clamp(1px, .55vw, 3px); padding: 1px; }
.cell { min-width: 0; min-height: 0; border: 0; border-radius: clamp(7px, 2.3vw, 13px); }
.empty { pointer-events: none; }
.tile { position: relative; display: grid; place-items: center; padding: 0; cursor: crosshair; color: #fff; font-weight: 1000; font-size: clamp(12px, 4.8cqw, 24px); line-height: 1; letter-spacing: -.06em; -webkit-tap-highlight-color: transparent; text-shadow: 0 1.5px 0 #28334b, 1px 0 #28334b, -1px 0 #28334b, 0 -1px #28334b; border: 0; box-shadow: none; transition: transform .12s ease, filter .12s ease, opacity .16s ease; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("assets/tile-pattern.svg?v=20260816-5") center / 100% 100% no-repeat; pointer-events: none; }
.tile > span { position: relative; z-index: 1; display: block; max-inline-size: calc(100% - 8px); overflow: hidden; white-space: nowrap; transform: translateY(-1px); }.tile-digits-2 { font-size: clamp(10px, 4.1cqw, 20px); }.tile-digits-3 { font-size: clamp(8.5px, 3.15cqw, 16px); letter-spacing: -.1em; }.tile-digits-4 { font-size: clamp(8px, 2.55cqw, 13px); letter-spacing: -.1em; }.tile:hover { filter: brightness(1.08); transform: translateY(-1px); }.tile:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.tile-blue { background: linear-gradient(135deg, #89bdfb, #5786dc); }.tile-gold { background: linear-gradient(135deg, #f8d67a, #eab247); }.tile-pink { background: linear-gradient(135deg, #ec87cd, #d84da9); }.tile-green { background: linear-gradient(135deg, #8eea93, #45bf70); }.tile-coral { background: linear-gradient(135deg, #f48795, #d65068); }.tile-violet { background: linear-gradient(135deg, #aa72ea, #7849ca); }.tile-slate { background: linear-gradient(135deg, #aeb5bb, #6e757f); }.tile-aqua { background: linear-gradient(135deg, #77ead0, #24baaa); }.tile-copper { background: linear-gradient(135deg, #d59372, #a75d4d); }.tile-indigo { background: linear-gradient(135deg, #6b73d8, #4549a1); }.tile-rose { background: linear-gradient(135deg, #f184ad, #ba3f7f); }
.tile.is-selected { transform: scale(.91); filter: saturate(1.3) brightness(1.15); box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 18px 7px rgba(255,49,220,.63), inset 0 2px 0 rgba(255,255,255,.45); animation: selected-pulse .55s ease-in-out infinite alternate; }.tile.is-resolving { opacity: .26; transform: scale(.72); }
@keyframes selected-pulse { to { box-shadow: 0 0 0 4px rgba(255,255,255,.82), 0 0 26px 10px rgba(255,49,220,.76), inset 0 2px 0 rgba(255,255,255,.45); } }
.path-layer { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }.path-glow, .path-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }.path-glow { stroke: rgba(255, 22, 218, .44); stroke-width: 19; filter: blur(8px); }.path-line { stroke: #ff2be2; stroke-width: 6; filter: drop-shadow(0 1px 1px #fff); }
.spark-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }.spark { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff6b7; box-shadow: 0 0 10px 3px currentColor; animation: spark .53s cubic-bezier(.08,.65,.3,1) forwards; }.spark-blue { color: #7aa7ff; }.spark-gold { color: #ffcf54; }.spark-pink { color: #ff61d4; }.spark-green { color: #74ed99; }.spark-coral { color: #ff738c; }.spark-violet { color: #bd83ff; }.spark-slate { color: #e9f6ff; }.spark-aqua { color: #51ffdf; }.spark-copper { color: #ffb193; }.spark-rose { color: #ff7dae; }
.move-layer { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }.move-layer.is-active { visibility: visible; }.board.is-canvas-owned .tiles { opacity: 0; }
@keyframes spark { to { transform: translate(var(--x), var(--y)) scale(.1) rotate(160deg); opacity: 0; } }
.praise { position: absolute; z-index: 6; left: 50%; top: 47%; display: grid; place-items: center; min-width: 140px; padding: 8px 12px; transform: translate(-50%, -50%) scale(.65) rotate(-4deg); opacity: 0; pointer-events: none; text-align: center; color: #fff; transition: opacity .12s, transform .18s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 3px 0 #d650cf) drop-shadow(0 0 13px #fff); }.praise.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }.praise strong { font-size: clamp(26px, 8vw, 44px); font-weight: 1000; letter-spacing: -.07em; color: #fff7be; text-shadow: 2px 2px 0 #f341d7, -1px -1px 0 #fff; }.praise small { margin-top: -2px; font-weight: 900; font-size: 12px; color: #8a2b84; background: rgba(255,255,255,.76); padding: 2px 7px; border-radius: 20px; }
.empty-state { position: absolute; z-index: 8; inset: 0; display: grid; align-content: center; justify-items: center; padding: 30px; text-align: center; color: #473b70; background: rgba(255, 239, 202, .88); backdrop-filter: blur(3px); }.empty-state[hidden] { display: none; }.empty-star { color: #ff6dba; font-size: 42px; filter: drop-shadow(0 2px #fff); }.empty-state h2 { margin: 4px 0 3px; font-size: 27px; }.empty-state p { max-width: 240px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; }.renew { padding: 11px 20px; border-radius: 15px; font-weight: 900; }
.hint { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 34px; margin: 7px 0 0; color: #765e71; font-size: 13px; font-weight: 750; text-align: center; transition: color .2s; }.hint span { width: 7px; height: 7px; border-radius: 50%; background: #fe779d; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }.hint.active { color: #bc2d9d; }.hint.active span { background: #ff2bdd; box-shadow: 0 0 10px #ff2bdd; }.hint.reward { color: #268e74; }.hint.reward span { background: #31c9a2; }.hint.warn { color: #be5b65; }.hint.warn span { background: #ed6b75; }
@media (min-width: 580px) { .game-shell { padding-left: 18px; padding-right: 18px; }.board { border-width: 5px; } }
@media (max-height: 700px) { .game-shell { padding-top: 6px; }.topbar { height: 44px; }.brand { font-size: 15px; }.board { max-height: calc(100vh - 92px); }.hint { display: none; } }