:root {
  --bg: #050414;
  --panel: rgba(9, 9, 39, 0.78);
  --cyan: #05d9ff;
  --blue: #1778ff;
  --violet: #8758ff;
  --pink: #ed3cff;
  --gold: #ffbd19;
  --text: #f4f3ff;
  --muted: #8988ad;
  --cell-gap: clamp(3px, .45vw, 6px);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); overflow-x: hidden; background: radial-gradient(circle at 50% 36%, rgba(52, 18, 121, .3), transparent 38%), linear-gradient(145deg, #02030d, #08051d 55%, #080318); transition: background 800ms ease; }
body[data-level-theme="2"] { background: radial-gradient(circle at 50% 35%, rgba(0, 139, 149, .3), transparent 40%), linear-gradient(145deg, #020d11, #041d25 55%, #07101d); }
body[data-level-theme="3"] { background: radial-gradient(circle at 50% 35%, rgba(157, 54, 0, .3), transparent 40%), linear-gradient(145deg, #110502, #241004 55%, #160412); }
body[data-level-theme="4"] { background: radial-gradient(circle at 50% 35%, rgba(94, 0, 150, .38), transparent 40%), linear-gradient(145deg, #08020f, #1d062d 55%, #030d1d); }
button { font: inherit; }

.ambient-grid { position: fixed; inset: 0; pointer-events: none; opacity: .25; background-image: linear-gradient(rgba(34, 78, 178, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 78, 178, .12) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, transparent, black 25%, transparent); }
.game-shell { position: relative; width: min(1460px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 50px; }
.game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.brand-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--cyan); font-size: 24px; border: 1px solid rgba(5,217,255,.55); clip-path: polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); background: rgba(10,24,63,.7); text-shadow: 0 0 12px var(--cyan); }
.brand p { margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .35em; }
.brand h1 { margin: 1px 0 0; font-size: 22px; letter-spacing: .08em; }
.brand h1 span { color: var(--pink); }
.icon-button { width: 42px; height: 42px; color: var(--cyan); border: 1px solid rgba(5,217,255,.35); border-radius: 10px; background: rgba(7,11,35,.75); cursor: pointer; box-shadow: inset 0 0 18px rgba(5,217,255,.08); }
.icon-button.is-muted { color: var(--muted); }

.game-layout { display: grid; grid-template-columns: 210px minmax(440px, 720px) 240px; justify-content: center; align-items: center; gap: clamp(24px, 3vw, 48px); }
.stats-panel { display: grid; gap: 18px; }
.hud-card, .pieces-panel, .leaderboard-section { position: relative; border: 1px solid rgba(105, 79, 222, .5); background: linear-gradient(145deg, rgba(8,12,40,.88), rgba(16,6,49,.72)); box-shadow: inset 0 0 28px rgba(24, 68, 185, .08), 0 12px 35px rgba(0,0,0,.3); }
.hud-card { min-height: 142px; padding: 19px; display: flex; flex-direction: column; justify-content: center; align-items: center; clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); }
.hud-label { color: #b9b8d0; text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 700; }
.hud-symbol { margin: 8px 0 2px; color: var(--pink); font-size: 31px; text-shadow: 0 0 14px currentColor; }
.hud-card strong { font-size: clamp(28px, 2.2vw, 40px); font-variant-numeric: tabular-nums; }
.best-card strong { color: var(--pink); text-shadow: 0 0 18px rgba(237,60,255,.35); }
.score-card { border-color: rgba(5,217,255,.65); }
.score-card .hud-symbol, .score-card strong { color: var(--cyan); text-shadow: 0 0 18px rgba(5,217,255,.4); }
.level-card strong { color: #b767ff; }
.level-bars { margin: 12px 0 0; color: #6c5cff; font-size: 25px; letter-spacing: 2px; }
.combo-card { min-height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; color: var(--muted); border: 1px solid rgba(237,60,255,.18); border-radius: 12px; background: rgba(9,7,31,.65); transition: .25s; }
.combo-card strong { color: var(--pink); font-size: 22px; }
.combo-card.is-active { border-color: var(--pink); box-shadow: 0 0 20px rgba(237,60,255,.2); }

.board-section { min-width: 0; }
.board-frame { position: relative; width: 100%; aspect-ratio: 1; padding: clamp(18px, 2.1vw, 30px); border: 2px solid var(--violet); border-radius: 24px; background: linear-gradient(145deg, rgba(8,18,52,.95), rgba(18,6,45,.96)); box-shadow: 0 0 0 5px rgba(16,90,229,.13), 0 0 36px rgba(28,109,255,.36), 0 0 60px rgba(237,60,255,.17), inset 0 0 28px rgba(39,85,202,.2); }
.board-frame::before, .board-frame::after { content: ""; position: absolute; width: 30%; height: 3px; top: -3px; background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 12px var(--cyan); }
.board-frame::before { left: 6%; } .board-frame::after { right: 6%; transform: scaleX(-1); background: linear-gradient(90deg, var(--pink), transparent); box-shadow: 0 0 12px var(--pink); }
.board-crown { position: absolute; z-index: 2; top: -18px; left: 50%; transform: translateX(-50%); width: 65px; text-align: center; color: #a962ff; font-size: 27px; background: #0b0824; text-shadow: 0 0 13px currentColor; }
.game-board { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--cell-gap); padding: var(--cell-gap); border: 1px solid rgba(5,217,255,.5); border-radius: 12px; background: rgba(1,4,20,.78); touch-action: none; }
.board-cell { position: relative; min-width: 0; aspect-ratio: 1; border: 1px solid rgba(54, 112, 219, .27); border-radius: 7px; background: linear-gradient(145deg, rgba(7,25,59,.72), rgba(10,7,38,.72)); transition: transform 110ms ease, background 110ms ease, box-shadow 110ms ease; }
.board-cell.filled { --block-color: var(--blue); border-color: color-mix(in srgb, var(--block-color), white 35%); background: linear-gradient(145deg, color-mix(in srgb, var(--block-color), white 30%), var(--block-color) 52%, color-mix(in srgb, var(--block-color), black 28%)); box-shadow: inset 2px 2px 3px rgba(255,255,255,.28), inset -3px -4px 6px rgba(0,0,0,.25), 0 0 12px color-mix(in srgb, var(--block-color), transparent 42%); }
.board-cell.preview-valid { background: rgba(5,217,255,.28); border-color: var(--cyan); box-shadow: inset 0 0 13px rgba(5,217,255,.42); transform: scale(.94); }
.board-cell.preview-invalid { background: rgba(255,50,105,.25); border-color: #ff3269; }
.board-cell.clearing { animation: clearCell .35s ease both; }
@keyframes clearCell { 40% { transform: scale(1.15); filter: brightness(2); } 100% { transform: scale(0); opacity: 0; } }
.score-pop { position: absolute; z-index: 8; top: 50%; left: 50%; pointer-events: none; opacity: 0; color: white; font-size: clamp(28px,4vw,52px); font-weight: 900; text-shadow: 0 0 15px var(--cyan); transform: translate(-50%,-50%); }
.score-pop.show { animation: scorePop .7s ease-out; }
@keyframes scorePop { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-100%) scale(1.1); } }
.status-message { margin: 14px 0 0; min-height: 22px; color: var(--muted); text-align: center; font-size: 13px; letter-spacing: .04em; }

.pieces-panel { padding: 20px 16px; border-color: rgba(237,60,255,.55); clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); }
.panel-heading { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; }
.panel-heading span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--violet)); }
.panel-heading span:last-child { transform: scaleX(-1); }
.panel-heading h2 { margin: 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.piece-list { display: grid; gap: 12px; }
.piece-slot { min-height: 142px; display: grid; place-items: center; padding: 12px; border: 1px solid rgba(95,74,205,.28); border-radius: 12px; background: rgba(3,5,22,.58); transition: opacity .25s, border-color .2s, transform .2s; touch-action: none; user-select: none; cursor: grab; }
.piece-slot:hover { border-color: rgba(5,217,255,.55); transform: translateY(-2px); }
.piece-slot:active { cursor: grabbing; }
.piece-slot.is-used { opacity: .12; pointer-events: none; transform: scale(.86); }
.piece-shape { --piece-columns: 1; display: grid; grid-template-columns: repeat(var(--piece-columns), var(--preview-size, 29px)); grid-auto-rows: var(--preview-size, 29px); gap: 4px; }
.piece-block { --block-color: var(--blue); border: 1px solid color-mix(in srgb, var(--block-color), white 30%); border-radius: 4px; background: linear-gradient(145deg, color-mix(in srgb, var(--block-color), white 30%), var(--block-color) 55%, color-mix(in srgb, var(--block-color), black 25%)); box-shadow: inset 2px 2px 3px rgba(255,255,255,.25), 0 0 10px color-mix(in srgb, var(--block-color), transparent 35%); }
.drag-ghost { --ghost-cell: 38px; position: fixed; z-index: 1000; display: none; pointer-events: none; grid-template-columns: repeat(var(--piece-columns), var(--ghost-cell)); grid-auto-rows: var(--ghost-cell); gap: var(--cell-gap); opacity: .88; transform: translate(-50%, calc(-100% - 28px)); filter: drop-shadow(0 8px 15px rgba(0,0,0,.45)); }
.drag-ghost.is-active { display: grid; }

.mobile-stats, .mobile-pieces { display: none; }
.leaderboard-section { margin: 42px auto 0; padding: 24px; max-width: 970px; border-radius: var(--radius); }
.section-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.section-title span { color: var(--cyan); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.section-title h2 { margin: 2px 0 0; font-size: 23px; }
.secondary-button { color: var(--cyan); padding: 10px 15px; border: 1px solid rgba(5,217,255,.4); border-radius: 9px; background: transparent; cursor: pointer; }
.leaderboard { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 28px; margin: 0; padding: 0; counter-reset: rank; }
.leaderboard li { counter-increment: rank; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; color: #b7b6cc; border-bottom: 1px solid rgba(102,88,183,.18); font-size: 13px; }
.leaderboard li::before { content: counter(rank, decimal-leading-zero); color: var(--violet); font-variant-numeric: tabular-nums; }
.leaderboard li strong { color: white; font-variant-numeric: tabular-nums; }
.leaderboard .empty-score { grid-column: 1 / -1; display: block; text-align: center; color: var(--muted); }
.leaderboard .empty-score::before { display: none; }

.game-dialog { width: min(420px, calc(100% - 32px)); padding: 38px; overflow: hidden; color: var(--text); text-align: center; border: 1px solid var(--pink); border-radius: 22px; background: #09071f; box-shadow: 0 0 60px rgba(237,60,255,.28); }
.game-dialog::backdrop { background: rgba(1,2,12,.82); backdrop-filter: blur(7px); }
.dialog-glow { position: absolute; width: 220px; height: 150px; top: -100px; left: 50%; transform: translateX(-50%); background: var(--pink); filter: blur(75px); opacity: .35; }
.dialog-kicker { color: var(--pink); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.game-dialog h2 { margin: 7px 0 10px; font-size: 42px; text-transform: uppercase; }
.game-dialog p { color: var(--muted); }
.dialog-score { margin: 24px 0; padding: 18px; border: 1px solid rgba(5,217,255,.25); border-radius: 12px; background: rgba(5,217,255,.04); }
.dialog-score span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.dialog-score strong { color: var(--cyan); font-size: 36px; }
.primary-button { width: 100%; padding: 14px; color: #030617; font-weight: 800; border: 0; border-radius: 10px; background: linear-gradient(90deg, var(--cyan), #9f64ff); cursor: pointer; box-shadow: 0 0 20px rgba(5,217,255,.25); }

@media (max-width: 1050px) {
  .game-shell { width: min(720px, calc(100% - 28px)); }
  .game-layout { display: block; }
  .stats-panel, .pieces-panel { display: none; }
  .mobile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
  .stat-card { display: flex; flex-direction: column; min-width: 0; padding: 11px 12px; border: 1px solid rgba(94,82,195,.35); border-radius: 11px; background: rgba(8,8,35,.72); }
  .stat-card span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
  .stat-card strong { margin-top: 3px; color: var(--cyan); font-size: clamp(18px,4vw,28px); overflow: hidden; text-overflow: ellipsis; }
  .stat-card.best strong { color: var(--pink); }
  .stat-card.level strong { color: #a769ff; }
  .mobile-pieces { display: block; margin-top: 24px; }
  .mobile-pieces .piece-list { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .mobile-pieces .piece-slot { min-height: 120px; padding: 8px; }
  .piece-shape { --preview-size: clamp(21px, 5vw, 31px); gap: 3px; }
}

@media (max-width: 600px) {
  :root { --cell-gap: 3px; }
  .game-shell { width: calc(100% - 22px); padding-top: max(14px, env(safe-area-inset-top)); }
  .game-header { margin-bottom: 15px; }
  .brand-icon { width: 37px; height: 37px; }
  .brand h1 { font-size: 18px; }
  .board-frame { padding: 10px; border-radius: 16px; }
  .game-board { border-radius: 9px; }
  .board-cell { border-radius: 4px; }
  .mobile-pieces .piece-slot { min-height: 98px; }
  .piece-shape { --preview-size: clamp(17px, 5.2vw, 23px); gap: 3px; }
  .leaderboard-section { margin-top: 30px; padding: 17px 13px; }
  .leaderboard { grid-template-columns: 1fr; }
  .game-dialog { padding: 30px 22px; }
}

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

/* Viewport-bound layout and leaderboard inside the game-over overlay */
html, body { height: 100%; overflow: hidden; }
.game-shell { height: 100dvh; padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; justify-content: center; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.game-dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 28px); padding: clamp(20px, 3vh, 34px); overflow-y: auto; }
.game-dialog h2 { margin-top: 5px; margin-bottom: 5px; font-size: 36px; }
.game-dialog p { margin: 5px 0; }
.dialog-score { margin: 12px 0; padding: 11px; }
.dialog-leaderboard { margin-bottom: 14px; padding: 11px; border: 1px solid rgba(135,88,255,.25); border-radius: 12px; background: rgba(4,4,20,.48); }
.dialog-list-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 5px 6px; }
.dialog-list-heading span { color: var(--cyan); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.dialog-list-heading h3 { margin: 0; font-size: 16px; text-transform: uppercase; }
.dialog-leaderboard .leaderboard { grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.dialog-leaderboard .leaderboard li { grid-template-columns: 24px minmax(0,1fr) auto; gap: 6px; padding: 5px 7px; font-size: 11px; }
.dialog-leaderboard .leaderboard li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .game-shell { padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .game-header { margin-bottom: 8px; }
  .mobile-pieces { margin-top: 10px; }
  .dialog-leaderboard .leaderboard { grid-template-columns: 1fr; }
  .game-dialog { padding: 20px 15px; }
  .game-dialog h2 { font-size: 29px; }
  .header-actions .secondary-button { padding: 8px 10px; font-size: 12px; }
}
@media (max-height: 800px) and (min-width: 1051px) {
  .game-layout { grid-template-columns: 180px minmax(400px, 590px) 210px; }
  .hud-card { min-height: 112px; }
  .piece-slot { min-height: 110px; }
  .game-header { margin-bottom: 10px; }
}