/* Adire Blocks, in Block Blast's language: royal-blue backdrop, dark inset 8×8 board with cell wells,
   chamfered jewel blocks, big white score with a crown best and a gear, a roomy 3-piece tray, flash + chips on a clear.
   The adire identity: an indigo resist-dye texture in the backdrop, a crisp adire motif stamped on every block
   (oniko ring, olokun star, sun, ewe leaf, chevrons, eleko dots, osupa moon), indigo gems and a cloth-banner logo.
   All art below is our own inline SVG (URL-encoded data URIs). */

/* ---------- Tokens and backdrop ---------- */
:root {
  --ink: #fff; --navy: #0f1645; --well: #1c2650;
  --crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 5.5l5.2 4L12 2.2l4.8 7.3 5.2-4-2.1 10.7H4.1z' fill='%23ffc93c' stroke='%23c47f12' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M4.6 13.6h14.8' stroke='%23fff3b8' stroke-width='1.3' stroke-linecap='round' opacity='.8'/%3E%3Ccircle cx='12' cy='2.4' r='1.6' fill='%23fff3b8'/%3E%3C/svg%3E"); --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9.5 10.5L12 22.5 2.5 12z' fill='%232a4fd6' stroke='%230f1645' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M12 1.5L21.5 12h-19z' fill='%236f9bff'/%3E%3Cpath d='M12 6.5l4 5.5H8z' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='12' cy='15.5' r='1.6' fill='%23dfe7ff' opacity='.75'/%3E%3C/svg%3E");
}
body {
  background: linear-gradient(180deg, #4a63cf, #3a52b8) fixed;
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Indigo resist-dye watermark (3.5%), only in the outer margins: masked clear of the play column. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cg fill='none' stroke='%230b1258' stroke-opacity='.035' stroke-width='3'%3E %3Ccircle cx='40' cy='40' r='7'/%3E%3Ccircle cx='40' cy='40' r='15'/%3E%3Ccircle cx='40' cy='40' r='23'/%3E%3Ccircle cx='40' cy='40' r='31'/%3E %3Ccircle cx='120' cy='120' r='7'/%3E%3Ccircle cx='120' cy='120' r='15'/%3E%3Ccircle cx='120' cy='120' r='23'/%3E%3Ccircle cx='120' cy='120' r='31'/%3E %3Cpath d='M96 8l48 48M88 24l40 40M16 104l40 40M8 120l32 32' stroke-dasharray='6 5'/%3E%3C/g%3E %3Cg fill='%230b1258' fill-opacity='.035'%3E%3Ccircle cx='120' cy='40' r='3'/%3E%3Ccircle cx='108' cy='40' r='2'/%3E%3Ccircle cx='132' cy='40' r='2'/%3E%3Ccircle cx='120' cy='28' r='2'/%3E%3Ccircle cx='120' cy='52' r='2'/%3E %3Ccircle cx='40' cy='120' r='3'/%3E%3Ccircle cx='28' cy='120' r='2'/%3E%3Ccircle cx='52' cy='120' r='2'/%3E%3Ccircle cx='40' cy='108' r='2'/%3E%3Ccircle cx='40' cy='132' r='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px;
  -webkit-mask: radial-gradient(ellipse 62% 56% at 50% 50%, transparent 72%, #000 100%); mask: radial-gradient(ellipse 62% 56% at 50% 50%, transparent 72%, #000 100%);
}

/* ---------- Shared chrome (pz-* overrides) ---------- */
.pz-chip { display: flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 16px; background: #1f2b6eb3; box-shadow: inset 0 2px 0 #ffffff1f, 0 2px 0 #0002; color: #fff; }
.pz-ico { font-size: 0; width: 22px; height: 22px; flex: none; background: center / contain no-repeat; filter: drop-shadow(0 1px 0 #0004); }
.pz-chip.lives .pz-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a96'/%3E%3Cstop offset='.55' stop-color='%23f0303f'/%3E%3Cstop offset='1' stop-color='%23b8142a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 21.5S2 15.2 2 8.6A5.1 5.1 0 0 1 12 6.4a5.1 5.1 0 0 1 10 2.2c0 6.6-10 12.9-10 12.9z' fill='url(%23h)' stroke='%238e0f22' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='7.2' cy='8' rx='2.6' ry='1.6' fill='%23fff' opacity='.75' transform='rotate(-35 7.2 8)'/%3E%3C/svg%3E"); } .pz-chip.coins .pz-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1a0'/%3E%3Cstop offset='.5' stop-color='%23ffc21a'/%3E%3Cstop offset='1' stop-color='%23e8900c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23b8700a'/%3E%3Ccircle cx='12' cy='11.4' r='9.6' fill='url(%23c)'/%3E%3Ccircle cx='12' cy='11.4' r='6.4' fill='none' stroke='%23c47f12' stroke-width='1.6'/%3E%3Cpath d='M10.2 8v7M13.8 8v7M9 11.4h6' stroke='%23c47f12' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='8' cy='6.6' rx='3' ry='1.6' fill='%23fff' opacity='.7' transform='rotate(-30 8 6.6)'/%3E%3C/svg%3E"); }
.pz-brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the logo plate is the title */
/* In play Block Blast shows only crown/best, gear and score: hide the shared top bar and level head. The gear's sheet quits. */
#app[data-screen='level'] > .pz-top, #app[data-screen='mode'] > .pz-top,
#app[data-screen='level'] > .pz-level-head, #app[data-screen='mode'] > .pz-level-head { display: none; }
#app[data-screen='level'] > .pz-board, #app[data-screen='mode'] > .pz-board { justify-content: flex-start; padding-top: max(8px, env(safe-area-inset-top)); } /* HUD hugs the top, as in Block Blast */

/* ---------- Home: logo plate, big centred mode buttons, three icon keys ---------- */
#app[data-screen='home'] .pz-node { display: none; } /* Block Blast has no map: the Level button carries the number */
.pz-home { align-items: center; gap: 14px; }
.pz-path { flex: 1 1 0; min-height: 0; width: 100%; padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-start; }
.pz-path::before { content: ''; flex: 0 0 124px; width: 100%; max-width: 330px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -14 370 236'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6c2'/%3E%3Cstop offset='.45' stop-color='%23ffc21a'/%3E%3Cstop offset='1' stop-color='%23f0860e'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe680'/%3E%3Cstop offset='.5' stop-color='%23ffa41a'/%3E%3Cstop offset='1' stop-color='%23ee640c'/%3E%3C/linearGradient%3E %3Cpattern id='p' width='34' height='34' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='17' cy='17' r='5' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='2'/%3E%3Ccircle cx='17' cy='17' r='11' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23fff' fill-opacity='.2'/%3E%3C/pattern%3E %3CclipPath id='t'%3E%3Crect width='330' height='88'/%3E%3Crect y='120' width='330' height='26'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg transform='rotate(-4 165 105)'%3E %3Crect x='14' y='46' width='302' height='124' rx='16' fill='%230f1645'/%3E %3Crect x='19' y='51' width='292' height='114' rx='12' fill='%2322308e'/%3E%3Crect x='19' y='51' width='292' height='114' rx='12' fill='url(%23p)'/%3E %3Cpath d='M19 63h292M19 153h292' stroke='%23ffc21a' stroke-width='3' stroke-dasharray='10 6' opacity='.7'/%3E %3Cg transform='translate(2 24)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%23ff7a1a'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3Cg transform='translate(28 24)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%23ffc21a'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3Cg transform='translate(2 50)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%23f2384a'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3Cg transform='translate(302 140)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%232fcb4a'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3Cg transform='translate(276 166)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%2329c8f0'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3Cg transform='translate(302 166)'%3E%3Crect width='26' height='26' rx='4' fill='%230f1645'/%3E%3Crect x='2' y='2' width='22' height='22' rx='3' fill='%239b4cea'/%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h19l-4 4H6z' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M24 5v18a3 3 0 0 1-3 3H6l4-4h14V6z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E %3C/g%3E %3Cg font-family='Arial Black, Arial, Helvetica, sans-serif' font-weight='900' font-style='italic' text-anchor='middle' stroke-linejoin='round' paint-order='stroke'%3E %3Ctext x='165' y='108' font-size='66' fill='%230f1645' stroke='%230f1645' stroke-width='11' transform='translate(0 6)'%3EADIRE%3C/text%3E %3Ctext x='165' y='108' font-size='66' fill='url(%23g)' stroke='%230f1645' stroke-width='11'%3EADIRE%3C/text%3E %3Ctext x='165' y='166' font-size='56' fill='%230f1645' stroke='%230f1645' stroke-width='11' transform='translate(0 6)'%3EBLOCKS%3C/text%3E %3Ctext x='165' y='166' font-size='56' fill='url(%23b)' stroke='%230f1645' stroke-width='11'%3EBLOCKS%3C/text%3E %3Cg clip-path='url(%23t)' fill='%23fff' fill-opacity='.35'%3E%3Ctext x='165' y='104' font-size='60'%3EADIRE%3C/text%3E%3Ctext x='165' y='162' font-size='50'%3EBLOCKS%3C/text%3E%3C/g%3E %3C/g%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 8px 12px #0b123a55); } /* logo plate */
.pz-path::after { content: ''; flex: 1 1 0; min-height: 96px; width: 100%; max-width: 270px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -40 280 280'%3E%3Cg transform='rotate(-6 140 120)'%3E %3Crect x='34' y='14' width='196' height='196' rx='14' fill='%230f1645' opacity='.35' transform='translate(4 10)'/%3E %3Crect x='34' y='14' width='196' height='196' rx='14' fill='%2319224c'/%3E%3Crect x='40' y='20' width='184' height='184' rx='9' fill='%23121935'/%3E %3Crect x='46' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='26' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='46' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='56' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='46' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='86' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='46' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='116' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='46' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='146' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='46' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='76' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='106' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='136' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='166' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Crect x='196' y='176' width='28' height='28' rx='3' fill='%231c2650'/%3E%3Cg transform='translate(46 26)'%3E%3Crect width='28' height='28' rx='3' fill='%23183278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23789af5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234e7bf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%232855cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231f419c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232f64f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(76 26)'%3E%3Crect width='28' height='28' rx='3' fill='%23183278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23789af5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234e7bf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%232855cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231f419c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232f64f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(166 26)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(196 26)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(46 56)'%3E%3Crect width='28' height='28' rx='3' fill='%23183278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23789af5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234e7bf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%232855cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231f419c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232f64f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(196 56)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(106 86)'%3E%3Crect width='28' height='28' rx='3' fill='%23803d0d'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffa96a'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ff8e3c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d96816'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a64f11'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ff7a1a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(136 86)'%3E%3Crect width='28' height='28' rx='3' fill='%23803d0d'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffa96a'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ff8e3c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d96816'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a64f11'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ff7a1a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(46 116)'%3E%3Crect width='28' height='28' rx='3' fill='%23166125'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2376d789'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234ccb65'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2326a53f'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231d7e30'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232dc24a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(76 116)'%3E%3Crect width='28' height='28' rx='3' fill='%23166125'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2376d789'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234ccb65'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2326a53f'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231d7e30'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232dc24a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(106 116)'%3E%3Crect width='28' height='28' rx='3' fill='%23803d0d'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffa96a'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ff8e3c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d96816'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a64f11'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ff7a1a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(136 116)'%3E%3Crect width='28' height='28' rx='3' fill='%23803d0d'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffa96a'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ff8e3c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d96816'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a64f11'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ff7a1a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(166 116)'%3E%3Crect width='28' height='28' rx='3' fill='%230c6278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2369d8f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%233bccf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2314a6cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23107f9c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%2318c3f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(196 116)'%3E%3Crect width='28' height='28' rx='3' fill='%230c6278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2369d8f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%233bccf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2314a6cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23107f9c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%2318c3f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(46 146)'%3E%3Crect width='28' height='28' rx='3' fill='%23166125'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2376d789'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%234ccb65'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2326a53f'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%231d7e30'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%232dc24a'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(136 146)'%3E%3Crect width='28' height='28' rx='3' fill='%23781820'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23f57882'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23f24f5c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23cc2936'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%239c1f29'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23f0303f'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(196 146)'%3E%3Crect width='28' height='28' rx='3' fill='%230c6278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2369d8f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%233bccf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2314a6cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23107f9c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%2318c3f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(46 176)'%3E%3Crect width='28' height='28' rx='3' fill='%2380640a'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffdb66'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ffd037'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d9aa11'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a6820d'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ffc814'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(76 176)'%3E%3Crect width='28' height='28' rx='3' fill='%2380640a'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23ffdb66'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23ffd037'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23d9aa11'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23a6820d'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23ffc814'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(136 176)'%3E%3Crect width='28' height='28' rx='3' fill='%23781820'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23f57882'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23f24f5c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23cc2936'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%239c1f29'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23f0303f'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(166 176)'%3E%3Crect width='28' height='28' rx='3' fill='%23781820'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23f57882'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23f24f5c'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%23cc2936'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%239c1f29'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%23f0303f'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(196 176)'%3E%3Crect width='28' height='28' rx='3' fill='%230c6278'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%2369d8f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%233bccf2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%2314a6cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%23107f9c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%2318c3f0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Crect x='167' y='57' width='26' height='26' rx='3' fill='%23dfe6ff' fill-opacity='.25' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'/%3E%3Crect x='167' y='87' width='26' height='26' rx='3' fill='%23dfe6ff' fill-opacity='.25' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'/%3E%3Crect x='137' y='57' width='26' height='26' rx='3' fill='%23dfe6ff' fill-opacity='.25' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'/%3E%3Crect x='107' y='57' width='26' height='26' rx='3' fill='%23dfe6ff' fill-opacity='.25' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/g%3E %3Cg transform='rotate(-6 140 120) translate(-60 4)'%3E%3Cellipse cx='216' cy='62' rx='50' ry='9' fill='%230b123a' opacity='.35'/%3E%3C/g%3E %3Cg transform='rotate(-6 140 120) translate(-60 -10)'%3E%3Cg transform='translate(150 -8)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(180 -8)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(210 -8)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(210 22)'%3E%3Crect width='28' height='28' rx='3' fill='%234d1e78'/%3E%3Cpath d='M1 1H27L22 6H6z' fill='%23bd80f5'/%3E%3Cpath d='M1 1L6 6V22L1 27z' fill='%23a959f2'/%3E%3Cpath d='M27 1V27L22 22V6z' fill='%238333cc'/%3E%3Cpath d='M1 27H27L22 22H6z' fill='%2364279c'/%3E%3Crect x='6' y='6' width='16' height='16' fill='%239a3cf0'/%3E%3Cpath d='M6 6.6H22' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 12px 16px #0b123a55); } /* hero: tilted mini-board */
.pz-play {
  width: 82%; max-width: 310px; min-height: 64px; border-radius: 18px; padding: 14px; color: #fff;
  font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: .01em; text-shadow: 0 2px 0 #b5550a;
  background: linear-gradient(180deg, #ffc247, #f5841a);
  box-shadow: inset 0 3px 0 #ffffff66, inset 0 -5px 0 #0000001f, 0 6px 0 #b0500a, 0 10px 18px #0b123a55;
}
.pz-play.alt {
  font-size: 26px; padding: 14px; color: #fff; text-shadow: 0 2px 0 #187028;
  background: linear-gradient(180deg, #6ee36f, #2cae3e);
  box-shadow: inset 0 3px 0 #ffffff66, inset 0 -5px 0 #0000001f, 0 6px 0 #177a2a, 0 10px 18px #0b123a55;
}
.pz-play.alt small { display: block; font-size: 13px; font-style: normal; color: #ffffffd9; text-shadow: none; }
.pz-play:active { transform: translateY(4px); box-shadow: inset 0 3px 0 #ffffff66, 0 2px 0 #0003; }
.pz-ghost { min-height: 44px; border-radius: 14px; background: #2b3a8c; color: #fff; font-weight: 800; font-size: 15px; padding: 10px 6px; box-shadow: inset 0 2px 0 #ffffff26, 0 4px 0 #18225a; }
.pz-ghost:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff26, 0 2px 0 #18225a; }
.pz-home .pz-row { justify-content: center; gap: 22px; margin-top: 6px; }
.pz-home .pz-ghost {
  flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; min-height: 0;
  background: none; box-shadow: none; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 0 var(--navy);
}
.pz-home .pz-ghost::before {
  content: ''; width: 72px; height: 72px; border-radius: 16px;
  background: var(--ico) center / 38px no-repeat, linear-gradient(180deg, #7d97f8 0%, #5675ea 46%, #3049c2 100%);
  box-shadow: inset 0 3px 0 #ffffff55, inset 0 -5px 0 #0000001f, 0 6px 0 #1b2a80, 0 10px 18px #0b123a55;
}
.pz-home .pz-ghost:active { transform: none; }
.pz-home .pz-ghost:active::before { transform: translateY(4px); box-shadow: inset 0 3px 0 #ffffff55, 0 2px 0 #1b2a80; }
.pz-home .pz-ghost:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M4.6 8h14.8l-1.3 12.6a1.6 1.6 0 0 1-1.6 1.4H7.5a1.6 1.6 0 0 1-1.6-1.4z' fill='%23fff'/%3E%3Ccircle cx='12' cy='14.5' r='2.4' fill='%23ffc21a'/%3E%3C/svg%3E"); }
.pz-home .pz-ghost:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1a0'/%3E%3Cstop offset='.45' stop-color='%23ffc21a'/%3E%3Cstop offset='1' stop-color='%23d77f0a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%238a5206' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M7 5H3.8v1.4A3.6 3.6 0 0 0 7.6 10M17 5h3.2v1.4A3.6 3.6 0 0 1 16.4 10' fill='none' stroke='%23ffc21a' stroke-width='2.1'/%3E%3Cpath d='M6.6 2.5h10.8V8a5.4 5.4 0 0 1-10.8 0z' fill='url(%23t)'/%3E%3Crect x='10.4' y='13' width='3.2' height='4' fill='url(%23t)'/%3E%3Crect x='7.2' y='17' width='9.6' height='4' rx='1.2' fill='url(%23t)'/%3E%3C/g%3E%3Cpath d='M8.8 4.2v3.6a3 3 0 0 0 1.4 2.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E"); }
.pz-home .pz-ghost:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.2' fill='%23fff'/%3E%3Cpath d='M9.1 9.3a2.9 2.9 0 1 1 4.3 2.6c-.9.5-1.4 1.1-1.4 2.1v.6' fill='none' stroke='%232b47c8' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.5' fill='%232b47c8'/%3E%3C/svg%3E"); }
.pz-note { color: #cdd6ffcc; }

/* ---------- Boosters: bevelled blue keys with drawn icons ---------- */
.pz-boost { position: relative; background: linear-gradient(180deg, #3b4fb4, #2b3a8c); box-shadow: inset 0 2px 0 #ffffff33, 0 4px 0 #18225a; }
.pz-boost:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff33, 0 2px 0 #18225a; }
.pz-boost i { font-size: 0; width: 32px; height: 32px; background: center / contain no-repeat; }
.pz-boost[data-id='refresh'] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9a7.5 7.5 0 0 0-13.6-1.6M5 15a7.5 7.5 0 0 0 13.6 1.6'/%3E%3Cpath d='M19 3.5V9h-5.5M5 20.5V15h5.5'/%3E%3C/svg%3E"); }
.pz-boost[data-id='bomb'] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 8.5l3-3' stroke='%23e2c08a' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='8' fill='%23151a38'/%3E%3Ccircle cx='7.3' cy='11.3' r='2.3' fill='%23fff' fill-opacity='.35'/%3E%3Ccircle cx='19' cy='4' r='2.6' fill='%23ffb52e'/%3E%3Ccircle cx='19' cy='4' r='1.2' fill='%23fff6c8'/%3E%3C/svg%3E"); }
.pz-boost small { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ff4d5e; color: #fff; font-size: 12px; line-height: 22px; box-shadow: 0 2px 0 #9a1f2c; }

/* ---------- Sheets ---------- */
.pz-modal { background: #0a1240b3; }
.pz-sheet { background: linear-gradient(180deg, #5a6fd0, #3b4ea6); box-shadow: inset 0 2px 0 #ffffff33; }
.pz-sheet h2 { font-size: 30px; font-weight: 900; font-style: italic; text-shadow: 0 3px 0 var(--navy); }
.pz-sheet:has(.pz-stars):not(.lose) h2::before { content: ''; display: block; width: 72px; height: 54px; margin: 0 auto 4px; background: var(--crown) center / contain no-repeat; filter: drop-shadow(0 3px 0 #a2620a); }
.pz-sheet p { color: #e3e8ff; }
.pz-stars { font-size: 52px !important; font-weight: 900; line-height: 1.05; color: #ffd23f !important; text-shadow: 0 4px 0 #a2620a; font-variant-numeric: tabular-nums; }
.pz-sheet .pz-play { width: 100%; max-width: none; align-self: stretch; }
.pz-buy { background: #2b3a8c; box-shadow: inset 0 2px 0 #ffffff1f; }
.pz-buy small { color: #cdd6ff; }
.pz-buy b { background: linear-gradient(180deg, #6ee36f, #2cae3e); color: #fff; text-shadow: 0 1px 0 #187028; }
.pz-toast { background: #141c3df0; }

/* ---------- HUD: crown + best (or level) and gear on one line, big score centred below ---------- */
.pz-board { touch-action: none; }
.ab-head { position: relative; height: 128px; flex: none; }
.ab-hrow { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.ab-best { display: flex; align-items: center; gap: 6px; color: #ffc93c; font-weight: 900; font-size: 19px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #0003; }
.ab-crown { width: 27px; height: 21px; background: var(--crown) center / contain no-repeat; }
.ab-lvl { font-size: 17px; font-weight: 900; font-style: italic; padding: 6px 14px; border-radius: 99px; background: #1f2b6e99; box-shadow: inset 0 2px 0 #ffffff1f; }
.ab-gear { width: 44px; height: 44px; margin-right: -6px; border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(0 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(45 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(90 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(135 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(180 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(225 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(270 12 12)'/%3E%3Crect x='10' y='1' width='4' height='6' rx='1.2' transform='rotate(315 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.6' fill='none' stroke='%23fff' stroke-width='4.4'/%3E%3C/svg%3E") center / 26px no-repeat; filter: drop-shadow(0 2px 0 #0003); }
.ab-gear:active { transform: rotate(30deg) scale(.94); }
.ab-score { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 #1f2b6e66; }
.ab-score.bump { animation: abbump .26s ease-out; }
.ab-goal { position: absolute; left: 0; right: 0; top: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ab-gemi { width: 38px; height: 38px; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 3px 0 #0003); }
.ab-goal .ab-side { font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Board: dark inset, ~8% white grid lines, sunken wells, inner top shadow ---------- */
.ab-wrap { position: relative; }
.ab-grid {
  --sz: var(--cell); position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 6px; overflow: hidden; touch-action: none;
  background: linear-gradient(#ffffff14, #ffffff14), #121935;
  box-shadow: 0 0 0 3px #19224c, 0 0 0 4px #ffffff1f, 0 12px 26px #0b123a66;
}
.ab-grid::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 2px #000a, inset 0 0 0 1px #0006; pointer-events: none; }
.ab-grid.armed { box-shadow: 0 0 0 3px #19224c, 0 0 0 5px #ff6b3d, 0 12px 26px #0b123a66; cursor: crosshair; }
.ab-grid.stuck { filter: grayscale(.75) brightness(.7); transition: filter .5s; }
.ab-c { position: relative; }
.ab-c::before { content: ''; position: absolute; inset: 1px; border-radius: 3px; background: var(--well); box-shadow: inset 0 1px 1px #0006; }

/* ---------- Jewel blocks: 3px radius, 4–5px mitred bevel (top +35%, left +15%, right −15%, bottom −35%),
   flat face with a 1px inner highlight line, 1px darker outline, and a small debossed adire motif ---------- */
.s1 { --c: #2f64f0; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Ccircle cx='12' cy='12' r='8.3' fill='none' stroke='currentColor' stroke-width='3.2'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s2 { --c: #ffc814; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Cpath d='M12 1.5L15.2 8.8 22.5 12 15.2 15.2 12 22.5 8.8 15.2 1.5 12 8.8 8.8z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s3 { --c: #ff7a1a; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cg stroke='currentColor' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 1.8v3.4M12 18.8v3.4M1.8 12h3.4M18.8 12h3.4M4.8 4.8l2.4 2.4M16.8 16.8l2.4 2.4M19.2 4.8l-2.4 2.4M7.2 16.8l-2.4 2.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s4 { --c: #2dc24a; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Cpath d='M12 2c6.5 4.6 6.5 15.4 0 20-6.5-4.6-6.5-15.4 0-20z' fill='none' stroke='currentColor' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6v12' stroke='currentColor' stroke-width='2.6'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s5 { --c: #f0303f; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Cpath d='M3.5 6.5L12 12.5l8.5-6M3.5 12.5L12 18.5l8.5-6' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s6 { --c: #18c3f0; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Ccircle cx='5.5' cy='5.5' r='3'/%3E%3Ccircle cx='18.5' cy='5.5' r='3'/%3E%3Ccircle cx='5.5' cy='18.5' r='3'/%3E%3Ccircle cx='18.5' cy='18.5' r='3'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s7 { --c: #9a3cf0; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30'%3E%3Cdefs%3E%3Cg id='m' fill='currentColor'%3E%3Cpath d='M15.5 2.2A10 10 0 1 0 21.8 15 7.6 7.6 0 1 1 15.5 2.2z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(1.4 1.4)' style='color:%23fff'/%3E%3Cuse href='%23m' transform='translate(-1.4 -1.4)' style='color:%23000'/%3E%3Cuse href='%23m' style='color:%23000' opacity='.45'/%3E%3C/svg%3E"); }
.s8 { --c: #e9c48a; } .s9 { --c: #4a5888; }
.ab-c[class*=' s']::before {
  border: clamp(3px, calc(var(--sz) * .11), 5px) solid; border-radius: 3px;
  border-color: color-mix(in srgb, var(--c), #fff 35%) color-mix(in srgb, var(--c), #000 15%) color-mix(in srgb, var(--c), #000 35%) color-mix(in srgb, var(--c), #fff 15%);
  background: var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c), #000 50%), inset 0 1px 0 #ffffff8c;
}
.ab-c[class*=' s']::after { content: ''; position: absolute; inset: 33%; pointer-events: none; background: var(--m) center / contain no-repeat; opacity: .35; }
.ab-c.s8::after { inset: 18%; opacity: 1; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 2px 0 #0003); animation: abgem 2.4s ease-in-out infinite; }
.ab-c.s9::after { content: none; }
.ab-c.s9::before { background: repeating-linear-gradient(45deg, transparent 0 3px, #ffffff12 3px 5px), linear-gradient(180deg, #56659a, #475586); }
.ab-ghosts { position: absolute; inset: 0; pointer-events: none; }
.ab-ghost { position: absolute; }
.ab-ghost::before { content: ''; position: absolute; inset: 1px; border-radius: 3px; background: #dfe6ff40; box-shadow: inset 0 0 0 1.5px #ffffffb3; }
.ab-c.hot::before { filter: brightness(1.12); }
.ab-c.pop::before, .ab-c.pop::after { animation: abpop .32s ease-in forwards; }

/* ---------- Clear effects ---------- */
.ab-burst { position: absolute; inset: 0; pointer-events: none; }
.ab-beam { position: absolute; background: linear-gradient(90deg, #fff0, #fffffff0 20% 80%, #fff0); mix-blend-mode: screen; animation: abbeam .42s ease-out forwards; }
.ab-beam.col { background: linear-gradient(180deg, #fff0, #fffffff0 20% 80%, #fff0); animation-name: abbeamc; }
.ab-spark { position: absolute; width: calc(var(--cell) * .26); height: calc(var(--cell) * .26); margin: calc(var(--cell) * -.13); border-radius: 3px; background: var(--c); box-shadow: inset 0 2px 0 #fff6, inset 0 -2px 0 #0003, 0 0 0 1px #0004; animation: abspark .7s cubic-bezier(.2, .7, .4, 1) forwards; }
.ab-spark.star { width: calc(var(--cell) * .16); height: calc(var(--cell) * .16); margin: calc(var(--cell) * -.08); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }

/* ---------- Praise: big italic white with navy outline, scale bounce ---------- */
.ab-fx { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ab-say {
  font-size: 40px; font-weight: 900; font-style: italic; letter-spacing: .01em; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--navy); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--navy), 0 8px 16px #0b123a99;
  animation: absay 1.1s cubic-bezier(.2, .8, .3, 1) forwards;
}
.ab-say.big { font-size: 48px; color: #ffd23f; text-shadow: 0 4px 0 #a2620a, 0 8px 18px #0b123a99; -webkit-text-stroke-color: #7a4606; }
.ab-say.combo { font-size: 28px; color: #ffd23f; }
.ab-say.gem { font-size: 24px; color: #9fd0ff; }
.ab-say.bad { font-size: 32px; color: #fff; animation-duration: 1.4s; }

/* ---------- Tray: fixed row of three equal columns 28px below the board; each piece centred in its column ---------- */
.ab-tray { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; touch-action: none; }
.ab-slot { min-width: 0; display: grid; place-items: center; touch-action: none; transition: opacity .15s; }
.ab-slot.lifted .ab-piece { opacity: 0; }
.ab-slot.dead { opacity: .3; filter: grayscale(.6); }
.ab-piece { position: relative; pointer-events: none; filter: drop-shadow(0 3px 3px #0b123a55); }
.ab-piece .ab-c { position: absolute; width: var(--sz); height: var(--sz); }
.ab-drag { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; filter: drop-shadow(0 12px 10px #0b123a88); }
.ab-tip { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; color: #cdd6ff; font-size: 13px; font-weight: 700; text-align: center; max-width: calc(var(--cell, 40px) * 8); pointer-events: none; }

@keyframes abpop { 0% { filter: brightness(1); } 35% { filter: brightness(2.3) saturate(.5); transform: scale(1.08); } 100% { transform: scale(.15); opacity: 0; } }
@keyframes abbeam { 0% { opacity: 0; transform: scale(1, .3); } 30% { opacity: .95; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.04, 1.1); } }
@keyframes abbeamc { 0% { opacity: 0; transform: scale(.3, 1); } 30% { opacity: .95; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.1, 1.04); } }
@keyframes abspark { 0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(var(--r)); opacity: 0; } }
@keyframes absay { 0% { transform: scale(.3); opacity: 0; } 22% { transform: scale(1.18); opacity: 1; } 36% { transform: scale(.94); } 50% { transform: scale(1.03); } 62% { transform: scale(1); } 80% { opacity: 1; transform: translateY(0); } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes abbump { 40% { transform: scale(1.14); } }
@keyframes abgem { 50% { filter: brightness(1.25) drop-shadow(0 0 4px #9fd0ff); } }