/* Six jewel palettes: the same variables are shared by tray, ghost, board and shards. */
.tone-1,[data-preview-color="1"] { --gem:#438dff; --gem-light:#a2d5ff; --gem-dark:#1847b9; }
.tone-2,[data-preview-color="2"] { --gem:#9c62ee; --gem-light:#e0b6ff; --gem-dark:#5c2ba4; }
.tone-3,[data-preview-color="3"] { --gem:#ffbc38; --gem-light:#ffefa5; --gem-dark:#bd7611; }
.tone-4,[data-preview-color="4"] { --gem:#50c780; --gem-light:#b0f8b7; --gem-dark:#16864c; }
.tone-5,[data-preview-color="5"] { --gem:#38c4df; --gem-light:#aff8ff; --gem-dark:#147d9c; }
.tone-6,[data-preview-color="6"] { --gem:#f76d76; --gem-light:#ffc8bc; --gem-dark:#af324a; }
.block-game { background:linear-gradient(155deg,#242f44,#1b2436 80%); border:1px solid #4b5c78; border-radius:16px; box-shadow:0 16px 45px #0004,inset 0 1px #ffffff12; padding:22px; }
.block-topbar { border-color:#42516b; }
.block-game-name h3 { font-size:20px; font-weight:750; color:#f1f5ff; }
.block-glyph { color:#a0c6ff; }
.experiment-label { color:#aabedb; font-size:8px; }
.block-hud { padding-block:18px 16px; }
.block-hud span { color:#b7c9e4; font-size:12px; }
.block-hud b { color:#eef4ff; font-size:34px; font-weight:750; }
.block-hud > div:first-child b { color:#bdd7ff; }
.block-board { background:#111b2f; border-color:#465675; border-radius:8px; box-shadow:inset 0 3px 12px #0005; padding:8px; }
.block-cell { background:#26324b; border:1px solid #2c3b57; border-radius:5px; box-shadow:inset 0 1px 2px #080e1a45; }
.block-cell.filled,.mini-shape i,.blast-tile { background:linear-gradient(140deg,var(--gem-light) -30%,var(--gem) 42%,var(--gem-dark) 145%); border:1px solid var(--gem-dark); border-radius:5px; box-shadow:inset 0 2px 1px #ffffff6b,inset 2px 0 1px #ffffff28,inset -2px -4px 1px #00000035,0 2px 2px #060d1a40; position:relative; }
.block-cell.filled:after,.mini-shape i:after,.blast-tile:after { content:''; position:absolute; inset:12% 13% 19%; border:1px solid #ffffff24; border-bottom-color:#0000000d; border-radius:2px; background:linear-gradient(145deg,#ffffff1c,transparent 65%); pointer-events:none; }
/* Override old single-blue styles while retaining each piece's material. */
.block-cell.filled.tone-2,.block-cell.filled.tone-3 { background:linear-gradient(140deg,var(--gem-light) -30%,var(--gem) 42%,var(--gem-dark) 145%); border-color:var(--gem-dark); }
.block-cell.preview { background:var(--gem); opacity:.5; border:1px solid var(--gem-light); box-shadow:inset 0 0 0 2px #ffffff1a,0 0 10px #ffffff12; }
.block-cell.invalid { opacity:1; background:repeating-linear-gradient(135deg,#68708566,#68708566 2px,#26324b 2px,#26324b 5px); border-color:#9eabc1; }
.block-cell.clear-ready { box-shadow:inset 0 0 0 2px #fff8,0 0 13px #adcfff75; filter:brightness(1.2); }
.block-cell:focus-visible { outline-color:#d4e8ff; }
.block-cover { background:#152036ef; border-color:#4d607f; border-radius:8px; }
.cover-shape i { background:linear-gradient(135deg,#fff3b0,#ffbd3f 60%,#ce8222); box-shadow:inset 0 2px #ffffff65,inset 0 -3px #9d5b314d; border-radius:3px; }
.game-kicker { color:#adc4e7; font-size:9px; }
.block-cover h4 { color:#f2f6ff; font-size:36px; font-weight:650; }
.block-cover > p:not(.game-kicker) { color:#bbcee9; font-size:14px; }
.block-tray { gap:10px; margin-block:14px 9px; }
.piece-button { background:#202c43; border-color:#3d506e; border-radius:8px; height:124px; gap:12px; transition:background .15s,border-color .15s,transform .15s; }
.piece-button[aria-pressed=true],.piece-button:not(:disabled):hover { background:#2d3e5b; border-color:#8bb7ff; }
.piece-button:disabled { background:#202a3d; border-color:#34425a; }
.mini-shape { --unit:20px; }
.piece-label { color:#c1d2ed; font-size:11px; }
.piece-label kbd { color:#adccff; font-size:10px; }
.piece-used { color:#8fa5c4; }
.piece-used small { color:#aabbd2; font-size:11px; }
.block-controls { align-items:center; }
.block-controls > p { color:#b6c8e2; font-size:11px; max-width:195px; }
.text-button { color:#d4e2fa; font-size:12px; min-height:44px; }
.text-button:hover { color:#fff; }
.text-button:disabled { color:#8091ac; }
.block-status { color:#afc1dd; border-color:#40506b; font-size:11px; min-height:34px; }
.block-toast { background:#f2f7ff; color:#162441; font-size:13px; font-weight:750; box-shadow:0 4px 16px #0005; bottom:18px; border-radius:7px; z-index:6; }
.block-drag-ghost { transform:none; opacity:1; filter:drop-shadow(0 6px 8px #0006); transition:none; }
.block-drag-ghost .mini-shape { grid-template-columns:repeat(var(--cols),var(--drag-unit-x)); grid-template-rows:repeat(var(--rows),var(--drag-unit-y)); column-gap:var(--drag-gap-x); row-gap:var(--drag-gap-y); width:100%; height:100%; }
.block-drag-ghost .mini-shape i { width:100%; height:100%; }
.block-drag-ghost.is-snapped { filter:drop-shadow(0 0 7px #ffffff30); }
.block-drag-ghost.is-invalid { opacity:.5; }
.block-fx { position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:5; }
.blast-tile { position:absolute; animation:jewel-shatter .46s cubic-bezier(.2,.6,.2,1) var(--delay) forwards; }
.blast-shard { position:absolute; width:8px; height:8px; background:var(--gem-light); border:1px solid var(--gem); border-radius:2px; box-shadow:0 0 7px var(--gem); opacity:0; animation:jewel-shard .55s ease-out var(--delay) forwards; }
.blast-beam { position:absolute; background:linear-gradient(0deg,transparent 20%,#ffffffa6 50%,transparent 80%); mix-blend-mode:screen; transform-origin:center; animation:line-blast .5s ease-out forwards; }
.blast-beam.vertical { background:linear-gradient(90deg,transparent 20%,#ffffffa6 50%,transparent 80%); }
.clearing { animation:clear-impact .24s ease-out; }
.just-placed { animation:jewel-land .23s ease-out; }
.game-noscript { color:#cddcf3; }
@keyframes jewel-shatter { 0% { opacity:1; transform:scale(1); } 23% { filter:brightness(2.1); transform:scale(1.06); } 48% { filter:brightness(1.6); opacity:1; } 100% { opacity:0; transform:scale(.15) rotate(12deg); } }
@keyframes jewel-shard { 0% { opacity:1; transform:translate(-50%,-50%) scale(1.1); } 100% { opacity:0; transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) rotate(var(--spin)) scale(.1); } }
@keyframes line-blast { 0% { opacity:0; scale:.5 .25; } 30% { opacity:1; scale:1.04 1; } 100% { opacity:0; scale:1.12 .1; } }
@keyframes clear-impact { 25% { translate:0 2px; } 60% { translate:0 -1px; } 100% { translate:0 0; } }
@keyframes jewel-land { 0% { transform:scale(.87); filter:brightness(1.45); } 60% { transform:scale(1.05); } 100% { transform:scale(1); } }
@media(max-width:1100px) { .block-game { padding:18px; } .block-game-name h3 { font-size:18px; } .block-controls { align-items:flex-start; } .block-controls > p { max-width:none; } .text-button { min-height:44px; } }
@media(max-width:800px) { .block-controls { flex-direction:column; align-items:flex-start; } .block-controls > div { width:100%; justify-content:space-between; } }
@media(max-width:520px) { .block-game { padding:13px; border-radius:12px; box-shadow:0 12px 35px #0004; } .block-game-name h3 { font-size:18px; } .experiment-label { font-size:7px; } .block-hud span { font-size:11px; } .block-hud b { font-size:31px; } .block-board { padding:6px; } .block-cell,.block-cell.filled,.mini-shape i { border-radius:4px; } .block-cover h4 { font-size:30px; } .block-cover > p:not(.game-kicker) { font-size:12px; } .piece-button { height:116px; } .mini-shape { --unit:18px; } .piece-label { font-size:10px; } .block-controls > p { max-width:none; font-size:11px; } .text-button { font-size:12px; } .block-status { font-size:11px; } .block-toast { font-size:12px; padding:9px 12px; } }
@media(prefers-reduced-motion:reduce) { .blast-tile,.blast-shard,.blast-beam,.clearing,.just-placed { animation:none; } }