@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #080c1c;
  --surface: #10182c;
  --surface-high: #18233c;
  --ink: #f3f6ff;
  --muted: #8995b1;
  --quiet: #576783;
  --mint: #8bf7ce;
  --lilac: #b6a4ff;
  --coral: #ff9c9b;
  --yellow: #ffe9a3;
  --line: rgba(170, 191, 232, .13);
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 300px; min-height: 100%; background: var(--bg); }
body {
  min-width: 300px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 49% 40%, rgba(42, 64, 109, .17), transparent 50%),
    radial-gradient(ellipse at 5% 9%, rgba(62, 47, 106, .17), transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(27, 85, 91, .09), transparent 40%),
    var(--bg);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: linear-gradient(rgba(136, 162, 204, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 162, 204, .09) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse at center, transparent 20%, #000 90%);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, a, input { outline-offset: 5px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); }
a { color: inherit; }
svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button svg { pointer-events: none; }
button { color: inherit; }
button[hidden], [hidden] { display: none !important; }
#ambient { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .65; }
.app-shell { position: relative; z-index: 1; max-width: 1340px; margin: 0 auto; padding: 0 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 118px; padding: 24px 0; }
.brand { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; text-decoration: none; }
.brand-mark { grid-row: span 2; display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; width: 30px; height: 30px; transform: rotate(-8deg); }
.brand-mark i { border-radius: 3px; background: var(--mint); box-shadow: 0 0 16px rgba(139, 247, 206, .12), inset 0 1px 1px rgba(255, 255, 255, .5); }
.brand-mark i:nth-child(2) { background: var(--lilac); }
.brand-mark i:nth-child(3) { background: var(--coral); }
.brand-mark i:nth-child(4) { transform: translate(2px, -2px); background: #d2ddff; }
.brand-word { display: block; font-size: 25px; font-weight: 900; letter-spacing: .21em; line-height: 1.1; }
.brand small { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; letter-spacing: .23em; font-weight: 600; }
.session-label { margin-right: 18px; color: #8393ae; font-size: 8px; letter-spacing: .18em; font-weight: 650; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(20, 29, 49, .5); color: #a9b7d2; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.icon-button:hover { color: var(--ink); background: #202b43; border-color: rgba(171, 197, 238, .3); transform: translateY(-2px); }
.icon-button:active { transform: translateY(0) scale(.94); }
.icon-button[aria-pressed="true"] { color: var(--mint); border-color: rgba(139, 247, 206, .4); background: rgba(139, 247, 206, .07); }
.top-actions .text-button { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 10px 13px; }

.play-layout { display: grid; grid-template-columns: minmax(200px, 270px) minmax(390px, 480px) minmax(180px, 230px); align-items: center; justify-content: center; gap: 40px; padding: 30px 0 45px; }
.intro { align-self: center; padding-bottom: 12px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--mint); font-size: 10px; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(139, 247, 206, .55); }
.hero-title { margin: 23px 0 24px; color: #f0f4ff; font-size: 48px; line-height: 1.08; letter-spacing: -.06em; font-weight: 800; }
.hero-title span { display: block; }
.hero-title span:last-child { color: var(--mint); background: linear-gradient(120deg, #c2ffdc 0%, #83e4d3 60%, #87c0ea 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.intro-copy { color: #97a4c0; max-width: 230px; font-size: 14px; line-height: 1.75; letter-spacing: .005em; margin: 0; }
.intro-copy strong { color: #d6def1; font-weight: 500; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 23px; }
.mini-tags span { padding: 6px 8px; border: 1px solid rgba(173, 196, 236, .1); border-radius: 5px; color: #8290ad; font-size: 9px; font-weight: 600; letter-spacing: .02em; background: rgba(27, 37, 60, .3); }
.intro-foot { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: #52647f; font-size: 7px; font-weight: 650; letter-spacing: .12em; }
.tiny-line { width: 20px; height: 1px; background: #3b5a65; }
.orbit-star { position: absolute; color: #b3caeb; opacity: .45; }
.star-one { left: 30px; bottom: 43px; font-size: 12px; }
.star-two { right: 38px; top: 34px; font-size: 17px; }
.orbit-art { position: relative; width: 245px; height: 225px; margin: 26px 0 -20px -16px; perspective: 700px; user-select: none; pointer-events: none; }
.orbit-art::before { content: ""; position: absolute; width: 130px; height: 130px; left: 63px; top: 49px; border-radius: 50%; background: rgba(126, 124, 241, .13); filter: blur(38px); }
.orbit-art::after { content: "+"; position: absolute; right: 21px; top: 56px; color: #a6b8d6; font-size: 17px; font-weight: 200; opacity: .45; }
.orbit { position: absolute; left: 18px; top: 35px; width: 210px; height: 145px; border: 1px solid rgba(131, 149, 198, .15); border-radius: 50%; transform: rotate(-35deg); }
.orbit:nth-child(2) { width: 169px; height: 169px; left: 36px; top: 22px; transform: rotate(-35deg) rotateY(49deg); border-color: rgba(153, 138, 232, .12); }
.orbit:nth-child(3) { width: 218px; height: 89px; left: 16px; top: 65px; transform: rotate(30deg); border-color: rgba(125, 244, 201, .13); }
.orbit:first-child::after { content: ""; position: absolute; width: 5px; height: 5px; top: 21px; right: 20px; border-radius: 50%; background: #9ffad2; box-shadow: 0 0 13px rgba(159, 250, 210, .7); }
.orbit-blocks { position: absolute; left: 61px; top: 50px; display: grid; grid-template-columns: repeat(4, 30px); grid-auto-rows: 30px; gap: 6px; transform: rotate(-22deg) rotateX(12deg); animation: float-blocks 7s ease-in-out infinite; }
.art-block { position: relative; width: 30px; height: 30px; border-radius: 6px; --tile-top: #c6b8ff; --tile-bottom: #7662c6; background: linear-gradient(145deg, var(--tile-top), var(--tile-bottom)); box-shadow: 0 5px 0 #322a64, 0 12px 15px rgba(0, 0, 0, .35), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(24, 16, 65, .35); }
.art-block::after { content: ""; position: absolute; inset: 4px; border-radius: 3px; border-top: 1px solid rgba(255, 255, 255, .3); border-left: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(125deg, rgba(255, 255, 255, .08), transparent 65%); }
.art-block.t1 { --tile-top: #acffdb; --tile-bottom: #4daa98; box-shadow: 0 5px 0 #1c5a56, 0 12px 15px rgba(0, 0, 0, .35), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(13, 69, 58, .35); }
.art-block.t3 { --tile-top: #ffc2ba; --tile-bottom: #cc787d; box-shadow: 0 5px 0 #6b3b55, 0 12px 15px rgba(0, 0, 0, .35), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(65, 16, 43, .35); }
.art-block:nth-child(1) { grid-column: 2; }
.art-block:nth-child(3) { grid-column: 1; }
.art-block:nth-child(6) { grid-column: 2; }
.art-block:nth-child(9) { grid-column: 3; }
@keyframes float-blocks { 0%, 100% { transform: translateY(0) rotate(-22deg) rotateX(12deg); } 50% { transform: translateY(-10px) rotate(-18deg) rotateX(12deg); } }

.game-shell { position: relative; isolation: isolate; width: 100%; max-width: 480px; padding: 22px; border: 1px solid rgba(161, 190, 235, .16); border-radius: 26px; background: linear-gradient(155deg, rgba(26, 39, 62, .96), rgba(14, 22, 42, .98) 55%, rgba(16, 26, 45, .98)); box-shadow: 0 32px 90px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(226, 238, 255, .04); }
.game-shell::before { content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 213, 244, .37), transparent); pointer-events: none; }
.game-shell::after { content: ""; position: absolute; z-index: -1; inset: 15% -26% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(99, 104, 229, .07), transparent 67%); filter: blur(32px); pointer-events: none; }
.scoreboard { display: flex; align-items: center; justify-content: space-between; min-height: 65px; padding: 0 5px; }
.scoreboard label { display: block; color: #7e90ae; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.score-main strong { display: block; margin-top: 2px; color: #f0f7ff; font-size: 41px; line-height: 1.15; letter-spacing: -.055em; font-weight: 750; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(168, 190, 232, .08); }
.best-score { text-align: right; align-self: center; }
.best-score label { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.best-score label svg { width: 12px; height: 12px; color: var(--yellow); }
.best-score strong { display: block; margin-top: 8px; color: #c4cfe5; font-size: 21px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.board-status { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 42px; padding: 2px 5px 7px; }
#status { color: #7f91b0; font-size: 11px; line-height: 1.35; }
#status strong { color: var(--mint); font-weight: 600; }
#chain-badge { flex-shrink: 0; padding: 5px 7px; border: 1px solid rgba(142, 248, 206, .15); border-radius: 5px; background: rgba(139, 247, 206, .055); color: var(--mint); font-size: 9px; font-weight: 750; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; }
#chain-badge:empty { display: none; }
#chain-badge.lit { color: #dcffef; background: rgba(139, 247, 206, .15); border-color: rgba(139, 247, 206, .4); box-shadow: 0 0 18px rgba(139, 247, 206, .12); }
.board-wrap { position: relative; padding: 9px; border: 1px solid rgba(136, 169, 217, .13); border-radius: 16px; background: #0a1123; box-shadow: inset 0 3px 14px rgba(0, 0, 0, .3), 0 1px 0 rgba(192, 210, 244, .035); touch-action: none; }
.board-wrap::before, .board-wrap::after { content: ""; position: absolute; pointer-events: none; width: 25px; height: 25px; border-color: rgba(153, 188, 231, .25); border-style: solid; }
.board-wrap::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-radius: 16px 0 0; }
.board-wrap::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 16px; }
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 448px; aspect-ratio: 1; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.cell { position: relative; min-width: 0; width: 100%; height: 100%; aspect-ratio: 1; padding: 0; border: 1px solid rgba(140, 165, 212, .035); border-radius: 5px; background: #141f35; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); transition: background .12s ease, box-shadow .12s ease, filter .12s ease; touch-action: none; }
.cell[data-value="0"]:hover { background: #1d2b46; }
.cell[data-value="0"] .gem-shine { display: none; }
.cell:not([data-value="0"]), .mini-cell:not(.empty), .demo-cell.on, .demo-cell.spark { --tile-top: #b8ffe3; --tile-mid: #79d8b5; --tile-bottom: #53b69e; --tile-rgb: 139, 247, 206; --tile-shadow: #286f68; --tile-edge: #c8ffe9; background: linear-gradient(145deg, var(--tile-top) 0%, var(--tile-mid) 42%, var(--tile-bottom) 100%); border: 1px solid rgba(255, 255, 255, .17); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), inset -1px -2px 0 rgba(0, 0, 0, .19), 0 2px 0 var(--tile-shadow), 0 3px 8px rgba(0, 0, 0, .18); }
.cell[data-value="2"], .mini-cell[data-value="2"], .piece-slot[data-color="2"] .mini-cell:not(.empty), .demo-cell.on[data-value="2"] { --tile-top: #d2c6ff; --tile-mid: #ac98e9; --tile-bottom: #8470cc; --tile-rgb: 182, 164, 255; --tile-shadow: #4b3a83; --tile-edge: #ece2ff; }
.cell[data-value="3"], .mini-cell[data-value="3"], .piece-slot[data-color="3"] .mini-cell:not(.empty), .demo-cell.on[data-value="3"] { --tile-top: #ffd0bd; --tile-mid: #f6a29b; --tile-bottom: #d77f87; --tile-rgb: 255, 156, 155; --tile-shadow: #894657; --tile-edge: #ffe8d5; }
.cell[data-value="4"], .mini-cell[data-value="4"], .piece-slot[data-color="4"] .mini-cell:not(.empty), .demo-cell.spark { --tile-top: #fff3cb; --tile-mid: #f5d686; --tile-bottom: #d2ae63; --tile-rgb: 255, 233, 163; --tile-shadow: #8b6a39; --tile-edge: #fff8e1; }
.cell:not([data-value="0"])::before, .mini-cell:not(.empty)::before { content: ""; position: absolute; inset: 3px; border-radius: 3px; border-top: 1px solid rgba(255, 255, 255, .23); border-left: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, transparent 45%, rgba(0, 0, 0, .025) 100%); pointer-events: none; }
.cell:not([data-value="0"])::after { content: ""; position: absolute; width: 28%; height: 1px; left: 15%; top: 10%; border-radius: 2px; background: var(--tile-edge); opacity: .65; pointer-events: none; }
.gem-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 36%); }
.cell.preview-valid { background: rgba(139, 247, 206, .22) !important; border-color: rgba(171, 255, 219, .8) !important; box-shadow: inset 0 0 12px rgba(139, 247, 206, .07), 0 0 9px rgba(139, 247, 206, .1) !important; }
.cell.preview-invalid { background: rgba(255, 127, 144, .19) !important; border-color: rgba(255, 152, 160, .65) !important; box-shadow: none !important; }
.cell.demo-target { border: 1px dashed rgba(139, 247, 206, .9); background: rgba(139, 247, 206, .12); animation: target-pulse 1.6s ease-in-out infinite; }
@keyframes target-pulse { 50% { background: rgba(139, 247, 206, .27); box-shadow: 0 0 13px rgba(139, 247, 206, .17); } }
.cell.preview-clear { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 14px rgba(var(--tile-rgb), .45); filter: brightness(1.15); }
.cell.placed { animation: place-cell .28s cubic-bezier(.2, .8, .2, 1) both; }
.cell.clearing { z-index: 2; animation: clear-cell .48s ease-in both; }
.cell.sparking { z-index: 3; animation: spark-cell .6s ease-out both; }
.board-wrap.chain-hit { animation: chain-hit .55s ease-out; }
@keyframes place-cell { 0% { transform: scale(.68); filter: brightness(1.4); } 55% { transform: scale(1.07); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes clear-cell { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.08); filter: brightness(1.8); box-shadow: 0 0 28px rgba(var(--tile-rgb), .75); } 100% { transform: scale(.35); filter: brightness(2); opacity: 0; } }
@keyframes spark-cell { 0% { transform: scale(.35); opacity: .2; filter: brightness(1.7); } 30% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 34px rgba(var(--tile-rgb), .8); filter: brightness(2); } 100% { transform: scale(1); opacity: 1; filter: brightness(1); } }
@keyframes chain-hit { 0%, 100% { box-shadow: inset 0 3px 14px rgba(0, 0, 0, .3); } 25% { box-shadow: 0 0 35px rgba(153, 232, 218, .2), inset 0 0 25px rgba(153, 232, 218, .05); border-color: rgba(177, 255, 231, .7); } }
#floating-score { position: absolute; z-index: 10; left: 0; right: 0; top: 43%; text-align: center; pointer-events: none; font-size: 46px; font-weight: 850; line-height: 1; letter-spacing: -.06em; color: #effff6; text-shadow: 0 0 30px rgba(95, 255, 187, .8), 0 3px 0 rgba(17, 60, 51, .6); }
#floating-score { opacity: 0; }
#floating-score.show { animation: float-score .9s ease-out both; }
#floating-score > span { display: block; margin-bottom: 9px; color: #c9ffe6; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
#floating-score > strong { display: block; font-weight: 850; }
#floating-score small { display: block; margin-top: 9px; color: #adffde; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
@keyframes float-score { 0% { opacity: 0; transform: translateY(12px) scale(.75); } 20% { opacity: 1; transform: translateY(-4px) scale(1.08); } 70% { opacity: 1; transform: translateY(-17px) scale(1); } 100% { opacity: 0; transform: translateY(-35px) scale(.96); } }

.tray-label { display: flex; align-items: center; justify-content: space-between; margin: 18px 3px 9px; color: #7184a4; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.tray-label span:last-child { font-size: 9px; letter-spacing: .02em; text-transform: none; color: #637594; font-weight: 400; }
.tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; min-height: 104px; }
.piece-slot { --piece-cell: 21px; --piece-gap: 3px; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 104px; padding: 8px 5px 20px; position: relative; border-radius: 12px; border: 1px solid rgba(137, 165, 207, .08); background: rgba(7, 14, 29, .43); touch-action: none; user-select: none; -webkit-user-select: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.piece-slot:hover { border-color: rgba(161, 199, 236, .24); background: rgba(24, 37, 61, .6); transform: translateY(-2px); }
.piece-slot.selected { border-color: rgba(139, 247, 206, .45); background: rgba(139, 247, 206, .045); box-shadow: inset 0 0 20px rgba(139, 247, 206, .025), 0 0 18px rgba(139, 247, 206, .025); }
.piece-slot.selected::after { content: ""; position: absolute; left: 43%; right: 43%; bottom: 4px; height: 2px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 9px rgba(139, 247, 206, .5); }
.piece-slot.used { opacity: .45; pointer-events: none; border-style: dashed; background: rgba(9, 17, 33, .18); }
.used-mark { font-size: 18px; color: #4b655f; }
.piece-name { position: absolute; bottom: 10px; left: 4px; right: 4px; color: #7e91ad; font-size: 7px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; text-align: center; pointer-events: none; }
.piece-slot.selected .piece-name { color: #8bbbaa; }
.piece-slot.used .piece-grid { display: none; }
.piece-slot.unplayable .piece-grid { opacity: .3; filter: saturate(.35); }
.piece-slot.is-dragging .piece-grid { opacity: .2; }
.piece-grid { display: grid; grid-auto-columns: var(--piece-cell, 21px); grid-auto-rows: var(--piece-cell, 21px); gap: var(--piece-gap, 3px); width: max-content; position: relative; flex: 0 0 auto; pointer-events: none; }
.mini-cell { position: relative; display: block; width: var(--piece-cell, 21px); height: var(--piece-cell, 21px); border-radius: 4px; }
.mini-cell:not(.empty)::before { inset: 2px; border-radius: 2px; }
.mini-cell.empty { visibility: hidden; background: none; box-shadow: none; border: none; }
.game-tools { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 8px; margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(147, 176, 219, .09); }
.game-tools button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 6px 3px; border: 0; border-radius: 6px; color: #99aac6; background: transparent; font-size: 10px; font-weight: 500; transition: color .15s, background .15s; }
.game-tools button svg { width: 14px; height: 14px; }
.game-tools button:hover { color: var(--mint); background: rgba(136, 248, 208, .055); }
.game-tools button:disabled { color: #475773; opacity: .65; }
.game-tools button:disabled:hover { background: transparent; }
.game-tools button small { display: inline-block; padding: 1px 3px; margin-left: 3px; border: 1px solid rgba(155, 183, 222, .16); border-radius: 3px; color: #627793; font-size: 8px; line-height: 1.2; }
.game-caption { margin: 11px 0 0; text-align: center; color: #8294b1; font-size: 9px; line-height: 1.5; letter-spacing: .01em; }

.guide { padding: 10px 0 0 3px; align-self: center; }
.guide-head { display: flex; align-items: center; gap: 9px; margin: 0 0 29px; color: #8091b0; font-size: 9px; letter-spacing: .2em; font-weight: 750; text-transform: uppercase; }
.guide-head::after { content: ""; width: 30px; height: 1px; background: #2c3d57; }
.guide-head .eyebrow { font-size: 9px; letter-spacing: .12em; color: #8394b0; }
.guide-head .eyebrow::before { display: none; }
.guide-symbol { color: #7fa59f; font-size: 18px; font-weight: 400; }
.guide-head::after { display: none; }
.rule { position: relative; }
.rule-number { display: inline-block; margin-bottom: 10px; color: #566b8c; font-size: 10px; line-height: 1; letter-spacing: .06em; font-weight: 700; font-variant-numeric: tabular-nums; }
.rule-title { margin: 0 0 8px; color: #c6d1e7; font-size: 15px; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
.rule-copy { margin: 0 0 25px; max-width: 200px; color: #7a8dac; font-size: 12px; line-height: 1.7; }
.rule-copy strong { color: #addccc; font-weight: 600; }
.chain-demo { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; padding: 12px; margin: 15px 0 27px; max-width: 209px; border: 1px solid rgba(134, 163, 206, .08); border-radius: 9px; background: rgba(14, 23, 42, .55); }
.demo-cell { position: relative; display: block; aspect-ratio: 1; border-radius: 2px; background: #19253b; border: 1px solid rgba(160, 183, 223, .02); }
.demo-cell.on, .demo-cell.spark { border-radius: 2px; opacity: .9; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), 0 1px 0 var(--tile-shadow); }
.demo-cell.spark { box-shadow: 0 0 14px rgba(255, 229, 141, .3); animation: demo-pulse 3.5s ease-in-out infinite; }
@keyframes demo-pulse { 0%, 75%, 100% { filter: brightness(1); } 83% { filter: brightness(1.55); } }
.tip-card { position: relative; padding: 15px 16px; border: 1px solid rgba(142, 229, 204, .12); border-radius: 10px; background: linear-gradient(120deg, rgba(107, 190, 165, .065), rgba(68, 111, 112, .02)); color: #7e9c9e; font-size: 11px; line-height: 1.7; max-width: 214px; }
.tip-card strong, .tip-card h3 { display: block; color: #a2d2c3; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.tip-card p { margin: 0; }
.tip-card > span { display: block; margin-bottom: 6px; color: #9ec9bc; font-size: 8px; letter-spacing: .09em; font-weight: 700; }
.demo-button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 214px; padding: 10px 0; margin: -12px 0 22px; border: 0; border-bottom: 1px solid rgba(149, 187, 223, .15); background: none; color: #a5c9c4; font-size: 11px; font-weight: 550; text-align: left; }
.demo-button span { color: #729a98; font-size: 15px; }
.demo-button:hover { color: var(--mint); border-color: rgba(139, 247, 206, .35); }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 57px; padding: 20px 0; color: #71839e; font-size: 9px; letter-spacing: .06em; border-top: 1px solid rgba(146, 176, 222, .07); }
.page-footer span { display: flex; align-items: center; gap: 6px; }
.page-footer .live-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #6dada0; }
.page-footer svg { width: 11px; height: 11px; color: #5d7e7e; }
.page-footer a { text-decoration: none; }
.page-footer a:hover { color: var(--mint); }

dialog { color: var(--ink); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 0; border: 1px solid rgba(173, 199, 241, .22); border-radius: 23px; background: linear-gradient(145deg, #1a2842, #101a30); box-shadow: 0 35px 130px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04); }
dialog::backdrop { background: rgba(4, 8, 20, .76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
dialog[open] { animation: modal-in .25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-inner { padding: 28px; }
.modal-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.modal-top h2 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.05em; }
.modal-top .icon-button { flex-shrink: 0; width: 32px; height: 32px; }
.modal-top .icon-button svg { width: 15px; height: 15px; }
#modal-content { color: #95a6c1; font-size: 13px; line-height: 1.8; }
#modal-content p { margin: 0 0 16px; }
#modal-content strong { color: #d0e5e1; }
#modal-content .result-score { display: block; margin: 20px 0 6px; text-align: center; font-size: 66px; font-weight: 800; line-height: 1; color: var(--mint); letter-spacing: -.06em; text-shadow: 0 0 30px rgba(139, 247, 206, .15); }
#modal-content .result-caption { text-align: center; text-transform: uppercase; font-size: 9px; letter-spacing: .16em; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px; border-radius: 9px; font-weight: 750; font-size: 12px; text-decoration: none; transition: transform .16s ease, filter .16s ease, background .16s ease; }
.primary-button { border: 1px solid #beffe8; color: #123e37; background: linear-gradient(145deg, #c2ffe1, #88e9cb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 #407d6c, 0 6px 20px rgba(101, 230, 182, .08); }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-2px); }
.primary-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #407d6c; }
.secondary-button { border: 1px solid rgba(153, 180, 224, .2); color: #b7c5dc; background: rgba(129, 159, 203, .05); }
.secondary-button:hover { background: rgba(129, 159, 203, .1); }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.modal-actions > button { flex: 1; }
.help-steps { padding: 0; margin: 0; list-style: none; counter-reset: help-step; }
.help-steps li { position: relative; padding: 0 0 18px 37px; margin: 0 0 16px; border-bottom: 1px solid rgba(145, 178, 226, .1); counter-increment: help-step; }
.help-steps li:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.help-steps li::before { content: "0" counter(help-step); position: absolute; left: 0; top: 0; color: var(--mint); font-size: 10px; font-weight: 750; }
.help-steps li strong { display: block; margin-bottom: 3px; }
.help-steps li p { margin: 0 !important; font-size: 12px; }
.help-steps > p { padding-bottom: 15px; border-bottom: 1px solid rgba(145, 178, 226, .1); }
.help-steps b { display: block; margin-bottom: 5px; color: var(--mint); font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.modal-lead { color: #c3d6e3; font-size: 16px; line-height: 1.6; }
.keyboard-help { color: #6d84a4; font-size: 11px; line-height: 1.8; }
kbd { padding: 2px 4px; border: 1px solid rgba(151, 181, 221, .16); border-bottom-width: 2px; border-radius: 4px; background: rgba(144, 174, 221, .05); color: #a6bed9; font: 10px ui-monospace, monospace; }
.end-score { margin: 24px 0; text-align: center; }
.end-score > span { display: block; color: #7b99b1; font-size: 9px; font-weight: 750; letter-spacing: .17em; }
#modal-content .end-score > strong { display: block; margin-top: 8px; color: var(--mint); font-size: 64px; line-height: 1; letter-spacing: -.055em; text-shadow: 0 0 40px rgba(139, 247, 206, .15); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 17px 0; margin-bottom: 19px; border-top: 1px solid rgba(155, 186, 225, .1); border-bottom: 1px solid rgba(155, 186, 225, .1); text-align: center; font-size: 9px; color: #7890ac; }
.end-stats strong { display: block; color: #cbd9eb; font-size: 21px; }
#drag-ghost { position: fixed; z-index: 90; pointer-events: none; opacity: .94; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); transition: opacity .12s; }
#drag-ghost .piece-grid { gap: var(--piece-gap, 5px); grid-auto-columns: var(--piece-cell, 44px); grid-auto-rows: var(--piece-cell, 44px); }
#drag-ghost .mini-cell { width: var(--piece-cell, 44px); height: var(--piece-cell, 44px); border-radius: 5px; }
#drag-ghost.invalid { opacity: .56; filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .35)); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99; }
#toast { position: fixed; bottom: 27px; left: 50%; z-index: 120; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid rgba(141, 223, 198, .25); border-radius: 10px; background: rgba(18, 35, 49, .97); color: #c0e9dc; box-shadow: 0 8px 35px rgba(0, 0, 0, .3); text-align: center; font-size: 12px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
#toast.show, #toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 1500px) and (min-height: 900px) {
  .app-shell { padding-top: 22px; }
  .play-layout { padding-top: 52px; padding-bottom: 62px; }
}
@media (max-width: 1230px) {
  .app-shell { padding-inline: 34px; }
  .play-layout { grid-template-columns: minmax(180px, 235px) minmax(380px, 460px) minmax(155px, 200px); gap: 27px; }
  .hero-title { font-size: 43px; }
  .intro-copy { font-size: 13px; }
  .game-shell { padding: 20px; }
  .guide { padding-left: 0; }
  .rule-copy { font-size: 11px; }
}
@media (max-width: 1100px) {
  .play-layout { grid-template-columns: 230px minmax(390px, 480px); gap: 52px; justify-content: center; }
  .guide { display: none; }
  .hero-title { font-size: 44px; }
  .app-shell { max-width: 1000px; }
}
@media (max-width: 1000px) {
  .app-shell { max-width: 660px; padding-inline: 30px; }
  .topbar { min-height: 100px; padding-block: 25px; }
  .play-layout { display: flex; flex-direction: column; gap: 0; padding-top: 12px; padding-bottom: 35px; }
  .intro { display: none; }
  .game-shell { max-width: 480px; padding: 23px; }
  .page-footer { max-width: 480px; margin: 0 auto; font-size: 8px; }
}
@media (max-width: 520px) {
  .app-shell { padding: 0 17px; }
  .topbar { min-height: 87px; padding: 21px 6px 17px; }
  .brand { grid-template-columns: 26px auto; column-gap: 9px; }
  .brand-mark { width: 24px; height: 24px; grid-template-columns: repeat(2, 10px); gap: 3px; }
  .brand-mark i { border-radius: 2px; }
  .brand-word { font-size: 20px; letter-spacing: .2em; }
  .brand small { font-size: 6px; letter-spacing: .17em; margin-top: 5px; }
  .top-actions { gap: 7px; }
  .session-label { display: none; }
  .icon-button { width: 35px; height: 35px; }
  .icon-button svg { width: 17px; height: 17px; }
  .top-actions .text-button { padding: 8px; font-size: 10px; }
  .play-layout { padding-top: 6px; padding-bottom: 21px; }
  .game-shell { padding: 15px; border-radius: 22px; }
  .scoreboard { min-height: 56px; padding-inline: 4px; }
  .scoreboard label { font-size: 8px; }
  .score-main strong { font-size: 35px; }
  .best-score strong { font-size: 19px; margin-top: 6px; }
  .board-status { min-height: 35px; padding-bottom: 7px; }
  #status { font-size: 10px; }
  #chain-badge { padding: 4px 5px; font-size: 8px; }
  .board-wrap { padding: 7px; border-radius: 13px; }
  .board-wrap::before { border-top-left-radius: 13px; }
  .board-wrap::after { border-bottom-right-radius: 13px; }
  .board { gap: 4px; }
  .cell { border-radius: 4px; }
  .cell:not([data-value="0"])::before { inset: 2px; border-radius: 2px; }
  .tray-label { margin-top: 15px; margin-bottom: 9px; font-size: 7px; }
  .tray-label span:last-child { font-size: 8px; }
  .tray { gap: 6px; min-height: 91px; }
  .piece-slot { --piece-cell: 16px; min-height: 91px; padding: 7px 2px 18px; border-radius: 10px; }
  .mini-cell { border-radius: 3px; }
  .mini-cell:not(.empty)::before { inset: 2px; border-radius: 1px; }
  .piece-slot.selected::after { bottom: 4px; }
  .piece-name { font-size: 6px; bottom: 9px; }
  .game-tools { margin-top: 12px; padding-top: 11px; gap: 3px; }
  .game-tools button { gap: 6px; font-size: 10px; padding-block: 4px; }
  .game-tools button svg { width: 14px; height: 14px; }
  .game-caption { font-size: 8px; margin-top: 9px; }
  .page-footer { padding: 16px 5px; min-height: 48px; font-size: 7px; letter-spacing: .02em; }
  #floating-score { font-size: 37px; }
  .modal-inner { padding: 23px; }
  .modal-top h2 { font-size: 22px; }
  #toast { bottom: 18px; font-size: 11px; }
}
@media (max-width: 374px) {
  .app-shell { padding-inline: 12px; }
  .topbar { padding-inline: 4px; min-height: 78px; padding-top: 17px; }
  .game-shell { padding: 10px; border-radius: 18px; }
  .board-wrap { padding: 6px; }
  .board { gap: 3px; }
  .score-main strong { font-size: 33px; }
  .piece-slot { --piece-cell: 13px; }
  .tray, .piece-slot { min-height: 84px; }
  .tray-label span:last-child { font-size: 7px; }
  .game-tools button { font-size: 9px; }
}
@media (max-width: 340px) {
  .piece-slot { --piece-cell: 12px; }
  .page-footer { font-size: 6px; gap: 8px; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .topbar { min-height: 85px; padding-block: 20px; }
  .play-layout { padding-top: 9px; padding-bottom: 25px; }
  .page-footer { min-height: 42px; padding-block: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .orbit-blocks { animation: none; }
  #ambient { opacity: .35; }
}

/* PULSE / pocket arcade. All sizing stays in normal flow so a tiny viewport
   can scroll instead of losing its tray or controls behind browser chrome. */
:root {
  --app-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mint: #9bffe0;
  --lilac: #c2a6ff;
  --coral: #ffaaa8;
  --yellow: #ffe798;
}
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: var(--app-height);
  overscroll-behavior-y: contain;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(124, 64, 211, .2), transparent 45%),
    radial-gradient(ellipse at 95% 43%, rgba(38, 167, 176, .12), transparent 40%),
    radial-gradient(ellipse at 45% 105%, rgba(104, 72, 200, .16), transparent 48%),
    linear-gradient(145deg, #0d1027, #070e1e 53%, #111025);
}
body::before {
  opacity: .42;
  background-image:
    radial-gradient(circle at 13% 27%, #e5f5ff 0 .7px, transparent 1.1px),
    radial-gradient(circle at 73% 53%, #c4a8ff 0 .7px, transparent 1.1px),
    radial-gradient(circle at 37% 79%, #87e4d5 0 .6px, transparent 1px),
    radial-gradient(circle at 88% 11%, #d3dcff 0 .7px, transparent 1.1px);
  background-size: 271px 303px, 347px 239px, 223px 331px, 307px 383px;
  mask-image: linear-gradient(#000, rgba(0, 0, 0, .35));
}
.brand-word { text-shadow: 0 0 24px rgba(180, 199, 255, .17); }
.brand-mark i { box-shadow: 0 0 16px rgba(139, 247, 206, .19), inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -2px 1px rgba(5, 30, 55, .3); }
.game-shell {
  border-color: rgba(160, 189, 246, .23);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(82, 100, 168, .19), transparent 56%),
    radial-gradient(ellipse at 100% 95%, rgba(105, 66, 153, .11), transparent 48%),
    linear-gradient(145deg, rgba(23, 34, 59, .98), rgba(12, 21, 40, .98));
  box-shadow: 0 26px 90px rgba(0, 0, 0, .4), 0 0 65px rgba(110, 99, 234, .06), inset 0 1px 0 rgba(231, 238, 255, .09);
}
.game-shell::before { left: 9%; right: 9%; background: linear-gradient(90deg, transparent, rgba(143, 255, 224, .6), rgba(179, 152, 255, .4), transparent); }
.score-main strong { font-weight: 850; color: #fff; text-shadow: 0 0 28px rgba(149, 190, 255, .16); }
.scoreboard label { color: #a4b2cd; }
.best-score strong { color: #ece5ff; }
.best-score label svg { filter: drop-shadow(0 0 5px rgba(255, 218, 110, .5)); }
#status { color: #a1b3ce; }
#chain-badge { border-radius: 6px; border-color: rgba(144, 247, 211, .22); color: #b4ffe4; background: rgba(126, 235, 201, .06); }
#chain-badge.lit { color: #fff2c6; border-color: rgba(255, 216, 117, .64); background: rgba(255, 207, 104, .14); box-shadow: 0 0 24px rgba(255, 203, 91, .2); }
.board-wrap {
  border-color: rgba(131, 175, 232, .26);
  background: linear-gradient(140deg, #070e20, #0b1428);
  box-shadow: inset 0 3px 15px rgba(0, 0, 0, .5), 0 1px 0 rgba(189, 210, 255, .09), 0 0 28px rgba(55, 86, 145, .06);
}
.board-wrap::before, .board-wrap::after { width: 30px; height: 30px; border-color: rgba(156, 217, 255, .52); }
.cell {
  border-color: rgba(136, 174, 234, .075);
  background: linear-gradient(145deg, #17243e, #111c33);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(165, 196, 240, .015);
  border-radius: 6px;
}
.cell:not([data-value="0"]), .mini-cell:not(.empty), .demo-cell.on, .demo-cell.spark {
  --tile-top: #cdffe6;
  --tile-mid: #6cf0c5;
  --tile-bottom: #27b99b;
  --tile-rgb: 88, 247, 196;
  --tile-shadow: #17665d;
  --tile-edge: #effff7;
  background:
    radial-gradient(ellipse at 24% 10%, rgba(255, 255, 255, .48), transparent 48%),
    linear-gradient(150deg, var(--tile-top) 0%, var(--tile-mid) 43%, var(--tile-bottom) 100%);
  border-color: rgba(255, 255, 255, .36);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .58), inset -1px -3px 0 rgba(0, 18, 34, .19), 0 2px 0 var(--tile-shadow), 0 4px 7px rgba(0, 0, 0, .32), 0 0 9px rgba(var(--tile-rgb), .07);
}
.cell[data-value="2"], .mini-cell[data-value="2"], .piece-slot[data-color="2"] .mini-cell:not(.empty), .demo-cell.on[data-value="2"] {
  --tile-top: #e6d8ff; --tile-mid: #b197ff; --tile-bottom: #7853d1;
  --tile-rgb: 179, 142, 255; --tile-shadow: #4a2b88; --tile-edge: #fff1ff;
}
.cell[data-value="3"], .mini-cell[data-value="3"], .piece-slot[data-color="3"] .mini-cell:not(.empty), .demo-cell.on[data-value="3"] {
  --tile-top: #ffe0cd; --tile-mid: #ff9caa; --tile-bottom: #e35c82;
  --tile-rgb: 255, 131, 159; --tile-shadow: #8b3158; --tile-edge: #fff2ea;
}
.cell[data-value="4"], .mini-cell[data-value="4"], .piece-slot[data-color="4"] .mini-cell:not(.empty), .demo-cell.spark {
  --tile-top: #fffbd6; --tile-mid: #ffe070; --tile-bottom: #edac3f;
  --tile-rgb: 255, 218, 102; --tile-shadow: #946124; --tile-edge: #ffffed;
}
.cell:not([data-value="0"])::before, .mini-cell:not(.empty)::before {
  border-top-color: rgba(255, 255, 255, .44);
  border-left-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), transparent 42%, rgba(16, 22, 68, .045));
}
.gem-shine { background: linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 44%); }
.cell:nth-child(7n) .gem-shine::after {
  content: "";
  position: absolute;
  inset: -50% -110%;
  background: linear-gradient(115deg, transparent 43%, rgba(255, 255, 255, .42) 49%, rgba(255, 255, 255, .02) 55%, transparent 61%);
  transform: translateX(-70%);
  animation: crystal-glint 8s ease-in-out infinite;
}
.cell:nth-child(3n) .gem-shine::after { animation-delay: -3s; }
@keyframes crystal-glint { 0%, 76% { transform: translateX(-70%); opacity: 0; } 80% { opacity: 1; } 93%, 100% { transform: translateX(70%); opacity: 0; } }
/* Gold sparks remain visibly marked after their arrival animation finishes. */
.cell[data-value="4"]::after {
  content: "✦";
  width: auto; height: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: none; color: #fff9db; opacity: .96;
  font-size: clamp(11px, 2.5vw, 18px); line-height: 1;
  text-shadow: 0 1px 1px #d5952f, 0 0 9px rgba(255, 255, 230, .8);
}
.cell.preview-valid { background: rgba(115, 255, 211, .29) !important; box-shadow: inset 0 0 12px rgba(139, 247, 206, .13), 0 0 12px rgba(139, 247, 206, .18) !important; }
.cell.preview-clear { box-shadow: inset 0 0 0 2px #fff8dc, 0 0 19px rgba(var(--tile-rgb), .63); }
.cell.clearing { animation: crystal-clear .47s cubic-bezier(.25, .5, .45, 1) both; }
@keyframes crystal-clear {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  32% { transform: scale(1.13); opacity: 1; filter: brightness(1.9); box-shadow: 0 0 24px rgba(var(--tile-rgb), .9); }
  100% { transform: scale(.1) rotate(9deg); opacity: 0; filter: brightness(2.3); }
}
.board-wrap.chain-hit { animation: pulse-impact .5s ease-out; }
@keyframes pulse-impact {
  0% { transform: scale(1); }
  17% { transform: scale(1.008); border-color: #bcffe9; box-shadow: 0 0 35px rgba(117, 255, 215, .42), inset 0 0 25px rgba(153, 232, 218, .1); }
  45% { transform: scale(.998); }
  100% { transform: scale(1); }
}
#floating-score { top: 48%; font-size: clamp(40px, 6vw, 64px); font-weight: 900; color: #fffbe8; text-shadow: 0 3px 0 #335e62, 0 0 16px #0c172c, 0 0 36px rgba(129, 255, 220, .7); }
#floating-score > span { color: #e6fff4; text-shadow: 0 1px 8px #071427, 0 0 12px #071427; letter-spacing: .22em; }
.combo-banner {
  position: absolute; z-index: 11; inset: 23% 0 auto;
  text-align: center; pointer-events: none; opacity: 0;
  color: #fff8dc; text-transform: uppercase;
  text-shadow: 0 2px 0 #543869, 0 0 15px #101529, 0 0 40px rgba(217, 156, 255, .8);
}
.combo-banner.show { animation: combo-reveal 1.35s cubic-bezier(.18, .85, .25, 1) both; }
.combo-count { display: block; font-size: clamp(30px, 7vw, 48px); line-height: 1; font-weight: 950; font-style: italic; letter-spacing: -.055em; }
.combo-caption { display: block; margin-top: 7px; font-size: 10px; line-height: 1.2; font-weight: 850; letter-spacing: .22em; color: #e4d3ff; }
@keyframes combo-reveal {
  0% { opacity: 0; transform: translateY(14px) scale(.65) rotate(-5deg); }
  15% { opacity: 1; transform: translateY(0) scale(1.09) rotate(-3deg); }
  28%, 70% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.04) rotate(-3deg); }
}
.tray-label { color: #a3b3cd; }
.tray-label span:last-child { color: #8b9cb9; }
.piece-slot {
  --piece-cell: 17px; --piece-gap: 2px;
  min-height: 116px;
  border-color: rgba(145, 170, 229, .15);
  background: linear-gradient(145deg, rgba(11, 18, 36, .9), rgba(20, 29, 52, .65));
  box-shadow: inset 0 1px 0 rgba(199, 216, 255, .035);
}
.piece-slot.selected {
  border-color: rgba(139, 255, 219, .65);
  background: linear-gradient(145deg, rgba(48, 114, 111, .22), rgba(17, 35, 52, .68));
  box-shadow: inset 0 0 25px rgba(139, 247, 206, .045), 0 0 17px rgba(139, 247, 206, .07);
}
.piece-name { color: #9daecc; }
.piece-slot.selected .piece-name { color: #c2ffe6; }
.game-tools button { min-height: 44px; border-radius: 10px; color: #c1cee4; background: rgba(130, 163, 214, .045); }
.game-tools button:disabled { color: #8796b0; opacity: .5; }
.game-tools button:active { background: rgba(130, 235, 205, .12); transform: scale(.97); }
#board, #tray, .piece-slot { touch-action: none; }
.icon-button { min-width: 44px; min-height: 44px; }
.modal-top .icon-button { width: 44px; height: 44px; }
.modal-top .icon-button svg { width: 18px; height: 18px; }
dialog { max-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 24px); }
.mobile-install-note {
  display: none; max-width: 480px; margin: 4px auto 14px; padding: 11px 13px;
  border: 1px solid rgba(162, 189, 234, .17); border-radius: 12px;
  background: rgba(20, 30, 51, .85); color: #a7bad2;
  font-size: 11px; line-height: 1.5; text-align: center;
}
.mobile-install-note strong { color: #d3ffed; }
.install-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  border: 1px solid rgba(159, 248, 218, .3); border-radius: 12px;
  color: #caffea; background: rgba(123, 236, 197, .08);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.install-button:hover { background: rgba(123, 236, 197, .15); }
[hidden] { display: none !important; }
.install-intro { margin: 0 0 18px; color: #adbfda; line-height: 1.6; }
.install-steps { margin: 0; padding-left: 22px; color: #b9cbe1; font-size: 14px; line-height: 1.65; }
.install-steps li { padding-left: 5px; margin-bottom: 12px; }
.install-steps strong { color: #d5ffed; font-weight: 700; }
#offline-status { color: #9eafc8; font-size: 12px; line-height: 1.6; margin: 20px 0; }
#toast { bottom: calc(16px + var(--safe-bottom)); }

@media (hover: none) {
  .icon-button:hover, .piece-slot:hover { transform: none; }
  .piece-slot:hover:not(.selected) { border-color: rgba(145, 170, 229, .15); background: linear-gradient(145deg, rgba(11, 18, 36, .9), rgba(20, 29, 52, .65)); }
  .cell[data-value="0"]:hover { background: linear-gradient(145deg, #17243e, #111c33); }
}
@media (max-width: 600px) {
  .app-shell { max-width: 510px; padding: var(--safe-top) 12px max(8px, var(--safe-bottom)); }
  .topbar { min-height: 56px; padding: 6px 3px; gap: 8px; }
  .brand { grid-template-columns: 26px auto; gap: 8px; }
  .brand-mark { width: 24px; height: 24px; grid-template-columns: repeat(2, 10px); gap: 3px; }
  .brand-word { font-size: 21px; letter-spacing: .18em; }
  .brand small { font-size: 6px; margin-top: 4px; letter-spacing: .13em; }
  .top-actions { gap: 6px; }
  .session-label { display: none; }
  .icon-button { width: 44px; height: 44px; }
  .icon-button svg { width: 19px; height: 19px; }
  .play-layout { display: block; padding: 0; }
  .intro, .guide { display: none; }
  .game-shell { max-width: none; width: 100%; padding: 10px 12px; border-radius: 22px; }
  .scoreboard { min-height: 50px; padding: 0 3px; }
  .scoreboard label { font-size: 8px; letter-spacing: .14em; }
  .score-main strong { font-size: 35px; line-height: 1.05; margin-top: 2px; }
  .best-score strong { font-size: 20px; margin-top: 6px; }
  .best-score label { gap: 4px; }
  .board-status { min-height: 27px; padding: 2px 3px 5px; gap: 4px; }
  #status { font-size: 10px; line-height: 1.3; }
  #chain-badge { padding: 4px 5px; font-size: 8px; letter-spacing: .035em; }
  .board-wrap {
    /* 344px reserves the header, score, tray, touch controls and all gaps.
       Below a 568px usable height, natural scrolling preserves usability. */
    width: min(100%, max(224px, calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 344px)));
    margin: 0 auto; padding: 7px; border-radius: 14px;
  }
  .board { max-width: none; gap: 4px; }
  .cell { border-radius: 5px; }
  .cell:not([data-value="0"])::before { inset: 2px; border-radius: 3px; }
  .tray-label { min-height: 10px; margin: 8px 2px 5px; font-size: 7px; line-height: 10px; letter-spacing: .13em; }
  .tray-label span:last-child { font-size: 7px; letter-spacing: .02em; }
  .tray { min-height: 104px; gap: 6px; }
  .piece-slot {
    /* Five blocks = at most 78px; with padding and label, a vertical
       five-cell shape needs 101px, including its 2px crystal depth. */
    --piece-cell: clamp(12px, calc((100vw - 110px) / 15), 14px);
    --piece-gap: 2px;
    min-height: 104px; padding: 5px 2px 17px; border-radius: 11px;
  }
  .mini-cell { border-radius: 3px; }
  .mini-cell:not(.empty)::before { inset: 2px; border-radius: 1px; }
  .piece-name { bottom: 8px; font-size: 6px; letter-spacing: .08em; }
  .piece-slot.selected::after { bottom: 3px; height: 2px; }
  .game-tools { min-height: 44px; margin-top: 6px; padding-top: 0; border: 0; gap: 5px; }
  .game-tools button { min-height: 44px; padding: 6px 2px; gap: 5px; font-size: 10px; line-height: 1.2; }
  .game-tools button svg { width: 15px; height: 15px; }
  #rotate small { display: none; }
  .game-caption, .page-footer { display: none; }
  .combo-count { font-size: clamp(30px, 8vw, 42px); }
  .combo-caption { font-size: 8px; letter-spacing: .17em; }
  #floating-score { font-size: clamp(36px, 10vw, 49px); }
  #floating-score > span { font-size: 8px; margin-bottom: 7px; letter-spacing: .16em; }
  .mobile-install-note { display: block; }
  .top-actions .install-button { width: 44px; padding: 0; font-size: 9px; }
  .modal-inner { padding: 22px; }
  .modal-top { gap: 8px; }
  .modal-top h2 { font-size: 23px; line-height: 1.15; }
}
@media (max-width: 350px) {
  .brand-word { font-size: 19px; }
  .brand small { letter-spacing: .06em; }
  .top-actions { gap: 4px; }
  .game-shell { padding-inline: 12px; }
  .board { gap: 3px; }
  .board-wrap { padding: 6px; }
  .scoreboard label { font-size: 7px; }
  #status { font-size: 9px; }
  .game-tools button { font-size: 9px; }
}
@media (max-height: 550px) and (min-width: 601px) and (max-width: 1000px) {
  .app-shell { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
  .topbar { min-height: 56px; padding-block: 6px; }
  .play-layout { padding-top: 0; }
}
@media (display-mode: standalone) {
  .mobile-install-note, .install-button { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cell .gem-shine::after { display: none; }
  .board-wrap.chain-hit { animation: none; border-color: #bcffe9; }
  #floating-score.show, .combo-banner.show { animation: accessible-flash 1.2s linear both !important; }
  @keyframes accessible-flash { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}