/* Royal Ọba Match. Visual language of the genre leader (royal blue bands, gold frames, cream panels,
   chunky glossy pieces, big bevelled CTAs), drawn entirely with our own CSS and inline SVG (art.js). */
:root {
  --om-font: 'Arial Rounded MT Bold', ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  --om-navy: #0b2a6e; --om-ink: #1d2f6b; --om-gold: #ffc21a; --om-gold2: #f29a0c; --om-cream: #fffbea; --om-cream2: #f1e2bd;
  --om-blue: linear-gradient(#5a9bff, #2357d6); --om-green: linear-gradient(#a6f06a, #4fbf2e 50%, #23801a);
  --om-orange: linear-gradient(#ffe07a, #ffa21a 50%, #e86a00); --om-bevel: linear-gradient(#fff3a0, #ffc21a 40%, #d98400);
  --r1: 8px; --r2: 14px; --r3: 22px;
  --om-ol: 0 2px 0 var(--om-navy), 2px 0 0 var(--om-navy), -2px 0 0 var(--om-navy), 0 -2px 0 var(--om-navy), 1.5px 1.5px 0 var(--om-navy), -1.5px 1.5px 0 var(--om-navy), 1.5px -1.5px 0 var(--om-navy), -1.5px -1.5px 0 var(--om-navy);
}
body { font-family: var(--om-font); background: #2557cc; }

/* painted backdrops (art.js): the palace compound on the map, the palace hall in a level */
.om-world, .om-hall { position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none; overflow: hidden; }
.om-world svg, .om-hall svg { display: block; width: 100%; height: 100%; }
.om-hall svg { filter: blur(2.5px) saturate(1.05); transform: scale(1.05); }
#app[data-screen="home"] ~ .om-world, #app[data-screen="level"] ~ .om-hall { display: block; }

/* ---------- top bar (map screen): resource pills and the logo plaque */
.pz-top { padding: 4px 4px 0 14px; }
/* home screen: brand on its own row below the resource chips */
#app[data-screen="home"] .pz-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 4px 4px 0; }
#app[data-screen="home"] .pz-chip.lives { grid-column: 1; grid-row: 1; }
#app[data-screen="home"] .pz-chip.coins { grid-column: 3; grid-row: 1; }
#app[data-screen="home"] .pz-brand { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 8px 0 0; padding: 8px 24px 10px; }
#app[data-screen="home"] .pz-brand strong { font-size: 24px; letter-spacing: .03em; }
.pz-chip { position: relative; display: inline-flex; align-items: center; height: 36px; min-width: 92px; padding: 0 14px 0 34px; margin: 0 4px; border-radius: 999px;
  background: linear-gradient(#fffdf3, #e9ddbd); color: var(--om-ink); font: 900 17px/1 var(--om-font); box-shadow: inset 0 -3px 0 #0000001a, 0 0 0 2px var(--om-navy), 0 3px 0 var(--om-navy); }
.pz-chip small { color: #4a5f95; font-size: 12px; margin-left: 3px; }
.pz-ico { position: absolute; left: -14px; top: 50%; width: 42px; height: 42px; translate: 0 -50%; font-size: 0; background: center / contain no-repeat; filter: drop-shadow(0 2px 0 #0b2a6e99); }
.pz-chip.lives .pz-ico { background-image: var(--om-i-heart); }
.pz-chip.coins .pz-ico { background-image: var(--om-i-coin); }
.pz-chip.coins .pz-ico::after { content: ''; position: absolute; left: -3px; bottom: -3px; width: 19px; height: 19px; background: var(--om-i-plus) center / contain no-repeat; }
.pz-brand { padding: 6px 12px 7px; border-radius: var(--r2); background: linear-gradient(#4f8dff, #1d4fc4); border: 3px solid var(--om-gold);
  box-shadow: 0 0 0 2px var(--om-navy), 0 4px 0 var(--om-navy), inset 0 3px 0 #ffffff55, inset 0 -4px 0 #0b2a6e55; }
.pz-brand strong { font: 900 21px/1 var(--om-font); color: var(--om-gold); text-shadow: var(--om-ol), 0 3px 0 var(--om-navy); letter-spacing: .01em; }
.pz-brand small { display: none; }

/* ---------- map screen: the world, two big CTAs and a tab bar (no node map, as in the genre) */
#app[data-screen="home"] .pz-home { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto auto 78px; column-gap: 10px; row-gap: 14px; }
.pz-path { display: none !important; }
.pz-note { grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative; color: var(--om-ink); background: #fffbeaee; border-radius: var(--r1); padding: 6px 12px; font: 800 13px/1.3 var(--om-font); box-shadow: 0 0 0 2px var(--om-navy); }
.pz-row { display: contents; }
.pz-play, .pz-row .pz-ghost:nth-child(1) { position: relative; border: 6px solid transparent; border-radius: var(--r2); padding: 14px 6px; color: #fffbe6; font: 900 27px/1.05 var(--om-font); letter-spacing: .01em;
  box-shadow: 0 0 0 2px #6b3200, 0 7px 0 #6b3200, 0 12px 18px #0006; }
.pz-play { background: linear-gradient(#a6f06a, #4fbf2e 50%, #23801a) padding-box, var(--om-bevel) border-box;
  text-shadow: 0 2px 0 #145010, 2px 0 0 #145010, -2px 0 0 #145010, 0 -2px 0 #145010, 0 4px 0 #145010; }
.pz-play::before, .pz-row .pz-ghost:nth-child(1)::after { content: ''; position: absolute; left: 6px; right: 6px; top: 3px; height: 34%; border-radius: var(--r1) var(--r1) 40% 40%; background: #ffffff40; pointer-events: none; }
.pz-play:active, .pz-row .pz-ghost:nth-child(1):active { transform: translateY(3px); box-shadow: 0 0 0 2px #6b3200, 0 4px 0 #6b3200, 0 8px 12px #0006; }
#app[data-screen="home"] .pz-home > .pz-play { grid-column: 1 / 4; grid-row: 3; }
.pz-row .pz-ghost:nth-child(1) { grid-column: 4 / 7; grid-row: 3; width: auto; min-height: 0; background: var(--om-orange) padding-box, var(--om-bevel) border-box;
  text-shadow: 0 2px 0 #7a3000, 2px 0 0 #7a3000, -2px 0 0 #7a3000, 0 -2px 0 #7a3000, 0 4px 0 #7a3000; }
/* tab bar: full-bleed dark blue, icon slots, raised centre Home, label only on the active tab */
#app[data-screen="home"] .pz-home::before { content: ''; position: absolute; left: -12px; right: -12px; bottom: calc(-10px - env(safe-area-inset-bottom)); height: calc(88px + env(safe-area-inset-bottom));
  background: linear-gradient(#1f4fc0, #0f2f86); border-top: 3px solid var(--om-gold); box-shadow: 0 -3px 0 var(--om-navy), 0 -10px 20px #0004; }
.pz-row .pz-ghost:nth-child(2), .pz-row .pz-ghost:nth-child(3) { position: relative; grid-row: 4; align-self: stretch; width: auto; margin-top: 4px; background: none; border: 0; box-shadow: none; font-size: 0; color: transparent; min-height: 0; padding: 0; }
.pz-row .pz-ghost:nth-child(2) { grid-column: 1 / 3; } .pz-row .pz-ghost:nth-child(3) { grid-column: 5 / 7; }
.pz-row .pz-ghost:nth-child(2)::before, .pz-row .pz-ghost:nth-child(3)::before { content: ''; position: absolute; inset: 6px 0 10px; background: center / 50px 50px no-repeat; filter: drop-shadow(0 3px 0 #06184a); }
.pz-row .pz-ghost:nth-child(2)::before { background-image: var(--om-i-trophy); } .pz-row .pz-ghost:nth-child(3)::before { background-image: var(--om-i-book); }
.pz-row .pz-ghost:nth-child(2):active::before, .pz-row .pz-ghost:nth-child(3):active::before { scale: .92; }
#app[data-screen="home"] .pz-home::after { content: 'Home'; grid-column: 3 / 5; grid-row: 4; position: relative; align-self: end; height: 94px; margin-bottom: -2px; border-radius: var(--r2) var(--r2) 0 0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: #fff; font: 900 15px/1 var(--om-font); text-shadow: var(--om-ol);
  background: var(--om-i-home) 50% 10px / 58px 58px no-repeat, linear-gradient(#5a9bff, #2a64e6 60%, #1d4fc4); border: 3px solid var(--om-gold); border-bottom: 0; box-shadow: 0 -3px 0 var(--om-navy), inset 0 3px 0 #ffffff55; }

/* ---------- level screen: no top bar; boosters and the settings gear share the bottom band */
#app[data-screen="level"] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 0; }
#app[data-screen="level"] > .pz-top { display: none; }
#app[data-screen="level"] > .pz-board { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
#app[data-screen="level"] > .pz-boosters { grid-column: 1; grid-row: 2; }
#app[data-screen="level"] > .pz-level-head { grid-column: 2; grid-row: 2; align-self: center; }
#app[data-screen="level"]::before { content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; bottom: 0; height: calc(84px + env(safe-area-inset-bottom));
  background: linear-gradient(#2f6cf0, #173f9e); border-top: 3px solid var(--om-gold); box-shadow: 0 -3px 0 var(--om-navy), 0 -10px 20px #0005; }
.pz-level-head b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pz-level-head .pz-x { display: none; }
.om-gear { width: 52px; height: 52px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #7cb8ff, #2a64e6 62%, #173f9e);
  border: 3px solid var(--om-gold); box-shadow: 0 0 0 2px var(--om-navy), 0 4px 0 var(--om-navy), inset 0 3px 0 #ffffff66; }
.om-gear svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 0 #0b2a6e88); }
.om-gear:active { scale: .93; }
.pz-boosters { gap: 4px; justify-content: space-evenly; align-items: center; min-height: 74px; }
.pz-boost { position: relative; width: 54px; height: 54px; border-radius: 50%; padding: 0; background: radial-gradient(circle at 50% 30%, #a6f06a, #45b52c 58%, #1f6e14);
  border: 3px solid var(--om-gold); box-shadow: 0 0 0 2px var(--om-navy), 0 4px 0 var(--om-navy), inset 0 3px 0 #ffffff77, inset 0 -4px 0 #00000026; }
.pz-boost:active { scale: .93; }
.pz-boost i { display: block; line-height: 0; } .pz-boost i svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 #0b2a6e88); }
.pz-boost small { position: absolute; right: -6px; bottom: -6px; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #ff7a7a, #e0182a 60%, #a80f22);
  border: 2px solid #fff; color: #fff; font: 900 13px/19px var(--om-font); box-shadow: 0 2px 0 #0b2a6e99; }
.pz-boost[data-count="0"] small { font-size: 0; min-width: 0; width: 25px; height: 25px; padding: 0; border: 0; background: var(--om-i-plus) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 2px 0 #0b2a6e99); }

/* ---------- HUD band */
.om-hud { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); gap: 8px; align-items: start; width: calc(100% + 24px); margin: -8px -12px 0; padding: 18px 10px 10px;
  background: linear-gradient(#3d7bff, #1d4fc4 62%, #163f9e); border-bottom: 3px solid var(--om-gold); box-shadow: 0 3px 0 var(--om-navy), 0 10px 18px #0b2a6e66; }
.om-panel { position: relative; min-height: 98px; padding: 14px 6px 8px; display: flex; align-items: center; justify-content: center; border-radius: var(--r2);
  background: linear-gradient(var(--om-cream), var(--om-cream2)); border: 3px solid var(--om-gold); box-shadow: inset 0 0 0 2px #ffffffaa, inset 0 -6px 10px #c9a86a55, 0 0 0 2px var(--om-navy), 0 4px 0 var(--om-navy); }
.om-rib { position: absolute; top: -16px; left: -7px; right: -7px; text-align: center; background: var(--om-blue); border: 2px solid var(--om-navy); border-radius: var(--r1);
  color: #fff; font: 900 16px/23px var(--om-font); text-shadow: var(--om-ol); box-shadow: inset 0 2px 0 #ffffff66, 0 2px 0 var(--om-navy); }
.om-rib::before, .om-rib::after { content: ''; position: absolute; top: 8px; width: 9px; height: 16px; background: #173f9e; border: 2px solid var(--om-navy); z-index: -1; }
.om-rib::before { left: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.om-rib::after { right: -6px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
/* bevelled numerals: a navy stroke layer under a white-to-blue gradient fill */
.om-mv, .om-goal b { position: relative; color: transparent; font-variant-numeric: tabular-nums; }
.om-mv::before, .om-mv::after, .om-goal b::before, .om-goal b::after { content: attr(data-n); position: absolute; inset: 0; }
.om-mv::before, .om-goal b::before { color: var(--om-navy); -webkit-text-stroke: 8px var(--om-navy); text-shadow: 0 4px 0 var(--om-navy); }
.om-mv::after, .om-goal b::after { background: linear-gradient(#ffffff 0 42%, #d6e6ff 50%, #8fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.om-mv { font: 900 52px/1 var(--om-font); }
.om-mv.low::after { background-image: linear-gradient(#fff4f4 0 42%, #ff9a9a 50%, #ff3a3a); }
.om-mv.low { animation: omlow 0.9s ease-in-out infinite; }
.om-mv.bump { animation: ombump .32s ease-out; }
.om-mv.low.bump { animation: ombump .32s ease-out, omlow 0.9s ease-in-out .32s infinite; }
.om-mid { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -14px; }
.om-king { width: 100px; height: 112px; border-radius: 50px 50px var(--r2) var(--r2); overflow: hidden; border: 4px solid var(--om-gold); background: #2a6fe0;
  box-shadow: 0 0 0 2px var(--om-navy), 0 5px 0 var(--om-navy), inset 0 0 0 2px #ffffff66; }
.om-king svg { display: block; width: 100%; height: 100%; }
.om-lvl { margin-top: -12px; position: relative; padding: 4px 11px; border-radius: 999px; background: var(--om-bevel); border: 2px solid var(--om-navy);
  color: var(--om-ink); font: 900 12px/1 var(--om-font); white-space: nowrap; box-shadow: 0 2px 0 var(--om-navy), inset 0 2px 0 #ffffff88; }
.om-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.om-goal { position: relative; width: 46px; height: 46px; }
.om-goals:has(> :nth-child(3)) .om-goal { width: 36px; height: 36px; }
.om-gi, .om-gi svg { display: block; width: 100%; height: 100%; }
.om-gi svg { filter: drop-shadow(0 2px 2px #0b2a6e66); }
.om-goal b { position: absolute; right: -10px; bottom: -8px; font: 900 21px/1 var(--om-font); }
.om-goal b::before { -webkit-text-stroke-width: 6px; text-shadow: 0 3px 0 var(--om-navy); }
.om-goal.bump .om-gi { animation: ombump .3s ease-out; }
.om-check { position: absolute; right: -7px; bottom: -7px; width: 25px; height: 25px; animation: ombump .3s ease-out; }
.om-check svg { width: 100%; height: 100%; display: block; }
.om-carpet-swatch { display: block; width: 100%; height: 100%; border-radius: var(--r1); background: radial-gradient(circle, #ffd66b 0 2px, #0000 2.5px) center / 50% 50%, linear-gradient(#ef4a5c, #b51c33); box-shadow: inset 0 0 0 2px var(--om-gold), 0 0 0 1.5px #7d0a18; }
/* Ọba Adé speaks from his portrait */
.om-say { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 30; width: 230px; margin: 0; padding: 10px 14px; border-radius: var(--r2); text-align: center;
  background: #fff; color: var(--om-ink); font: 800 14px/1.3 var(--om-font); box-shadow: 0 0 0 2.5px var(--om-navy), 0 5px 0 var(--om-navy), 0 10px 18px #0006;
  opacity: 0; translate: -50% -6px; scale: .85; transform-origin: 50% 0; pointer-events: none; transition: opacity .18s, translate .18s, scale .22s cubic-bezier(.3,.7,.4,1.4); }
.om-say::before { content: ''; position: absolute; top: -11px; left: 50%; width: 18px; height: 12px; translate: -50% 0; background: var(--om-navy); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.om-say::after { content: ''; position: absolute; top: -7px; left: 50%; width: 13px; height: 9px; translate: -50% 0; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.om-say.show { opacity: 1; translate: -50% 0; scale: 1; }

/* ---------- board */
.om-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.om-frame { padding: 7px; border-radius: var(--r2); }
.om-frame.shake { animation: omshake .32s ease-out; }
.om-grid { position: relative; overflow: hidden; border-radius: var(--r1); background: #0b2a6e8c; touch-action: none;
  box-shadow: 0 0 0 2px #fff6c9, 0 0 0 5px var(--om-gold2), 0 0 0 7px #8a4d00, 0 12px 26px #050d30b0; }
.om-grid.armed { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ffe34a, 0 0 0 7px #8a4d00, 0 0 22px 6px #ffe34aaa; }
.om-cell, .om-box, .om-t, .om-fx { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); }
.om-cell { background: #cbd8fc; box-shadow: inset 0 0 0 .5px #ffffff77; }
.om-cell.alt { background: #b2c2f2; }
.om-cell.hole { background: transparent; box-shadow: none; }
.om-cell.carpet { background: radial-gradient(circle, #ffd66b 0 1.5px, #0000 2px) center / 50% 50%, linear-gradient(#ef4a5c, #b51c33); box-shadow: inset 0 0 0 2px #ffc21acc; }
.om-box { z-index: 1; padding: 1px; transition: opacity .22s, scale .22s; }
.om-box svg { display: block; width: 100%; height: 100%; }
.om-box.hit { animation: omhit .25s ease-out; }
.om-box.pop { opacity: 0; scale: 1.35; }

.om-t { display: grid; place-items: center; z-index: 2; transition: transform .2s cubic-bezier(.3,.7,.4,1.15), opacity .18s, scale .18s, filter .18s; will-change: transform; pointer-events: none; }
.om-t svg { width: 94%; height: 94%; overflow: visible; filter: drop-shadow(0 2px 2px #0a143cb0); }
.om-t.rv svg { rotate: 90deg; }
.om-t.sp svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 2px 2px #0a143cb0); }
.om-t.light svg { animation: omglow 1.1s ease-in-out infinite alternate; }
.om-t.prop svg { animation: omspin 2.4s linear infinite; }
.om-t.sel { scale: 1.12; z-index: 4; }
.om-t.sel svg { animation: ombob .5s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 3px 2px #0b2a6e66); }
.om-t.born { animation: omborn .26s cubic-bezier(.3,.7,.4,1.4); }
.om-t.pop { opacity: 0; scale: 1.45; filter: brightness(1.8); transition: opacity .2s, scale .2s, filter .2s; }

/* clear pops: shards + a ring in the item's colour */
.om-shard, .om-ring { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; }
.om-shard { width: calc(var(--cell) * .22); height: calc(var(--cell) * .22); border-radius: 30%; background: var(--sc, #fff); box-shadow: inset 0 -1.5px 0 #0003, 0 0 0 1px #0b2a6e33;
  transform: translate(var(--x), var(--y)) translate(-50%, -50%); animation: omshard .42s cubic-bezier(.2,.7,.4,1) forwards; }
.om-ring { width: var(--cell); height: var(--cell); border-radius: 50%; border: 3px solid var(--sc, #fff); transform: translate(var(--x), var(--y)) translate(-50%, -50%); animation: omring .34s ease-out forwards; }
.c0 { --sc: #ff5a40; } .c1 { --sc: #ffd6e6; } .c2 { --sc: #c45cff; } .c3 { --sc: #c8641e; } .c4 { --sc: #ffd21a; } .c5 { --sc: #6fd63a; }
.om-shard.sp, .om-ring.sp { --sc: #fff7c2; } .om-shard.wood, .om-ring.wood { --sc: #d9944c; }
.om-shard.wood { border-radius: 2px; width: calc(var(--cell) * .28); height: calc(var(--cell) * .12); }

/* specials */
.om-fx { pointer-events: none; z-index: 7; }
.om-fx.row { width: 100%; background: linear-gradient(#0000, #ffe34a99 25%, #fff 45% 55%, #ffe34a99 75%, #0000); box-shadow: 0 0 18px #ffe34a; animation: omrow .38s ease-out forwards; }
.om-fx.col { height: 100%; background: linear-gradient(90deg, #0000, #ffe34a99 25%, #fff 45% 55%, #ffe34a99 75%, #0000); box-shadow: 0 0 18px #ffe34a; animation: omcol .38s ease-out forwards; }
.om-fx.area { border-radius: 50%; background: radial-gradient(#fff 0 14%, #ffe34a 30%, #ff8a1a 52%, #e2333399 66%, #0000 70%); animation: omboom .38s ease-out forwards; }
.om-fx.area.big { box-shadow: 0 0 0 4px #fff8, 0 0 30px 10px #ff8a1a88; }
.om-fx.rays { width: calc(var(--cell) * 16); height: calc(var(--cell) * 16); border-radius: 50%; transform: translate(var(--x), var(--y)) translate(-50%, -50%);
  background: repeating-conic-gradient(#fffbe6dd 0 7deg, #0000 7deg 20deg), radial-gradient(#fff 0 6%, #e9c9ff99 14%, #0000 40%);
  -webkit-mask: radial-gradient(#000 10%, #0000 55%); mask: radial-gradient(#000 10%, #0000 55%); animation: omrays .52s ease-out forwards; }
.om-fx.board { width: 100%; height: 100%; background: radial-gradient(#ffffffee, #e9c9ff88 45%, #0000 80%); animation: omflash .52s ease-out forwards; }
.om-fx.fly { display: grid; place-items: center; transition: transform .22s ease-in-out; z-index: 8; }
.om-fx.fly svg { width: 100%; height: 100%; animation: omspin .25s linear infinite; filter: drop-shadow(0 4px 3px #0b2a6e88); }

.om-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 10; pointer-events: none; animation: omban .7s cubic-bezier(.3,.7,.4,1.3); }
.om-banner b { font: 900 54px/1 var(--om-font); color: var(--om-gold); letter-spacing: .01em;
  text-shadow: 0 3px 0 var(--om-navy), 3px 0 0 var(--om-navy), -3px 0 0 var(--om-navy), 0 -3px 0 var(--om-navy), 2px 2px 0 var(--om-navy), -2px 2px 0 var(--om-navy), 2px -2px 0 var(--om-navy), -2px -2px 0 var(--om-navy), 0 7px 0 var(--om-navy), 0 12px 20px #0008; }
.om-banner small { font: 900 17px/1 var(--om-font); color: #fff; text-shadow: var(--om-ol); }

/* ---------- shared sheets: centred cream card, blue title bar, gold frame */
.pz-modal { align-items: center; background: #08143cb3; overflow: hidden; }
.pz-sheet { position: relative; z-index: 1; width: min(92%, 380px); border-radius: var(--r3); padding: 0 16px 18px; gap: 12px; color: var(--om-ink);
  background: linear-gradient(var(--om-cream), var(--om-cream2)); border: 4px solid var(--om-gold); box-shadow: 0 0 0 3px var(--om-navy), 0 8px 0 var(--om-navy), 0 22px 40px #0009;
  animation: ompop .26s cubic-bezier(.3,.7,.4,1.3); }
.pz-sheet h2 { margin: 0 -16px 4px; padding: 12px 12px 10px; border-radius: calc(var(--r3) - 4px) calc(var(--r3) - 4px) 0 0; background: var(--om-blue); border-bottom: 3px solid var(--om-navy);
  color: #fff; font: 900 26px/1.1 var(--om-font); text-shadow: var(--om-ol), 0 4px 0 var(--om-navy); box-shadow: inset 0 3px 0 #ffffff55; }
.pz-sheet p { color: #2a3f7a; font-weight: 800; }
.pz-sheet .pz-note { background: none; padding: 0; box-shadow: none; }
.pz-stars { font: 900 58px/1.1 var(--om-font); letter-spacing: 4px; color: var(--om-gold) !important;
  text-shadow: 0 3px 0 #b36b00, 2px 0 0 #b36b00, -2px 0 0 #b36b00, 0 -2px 0 #b36b00, 0 6px 0 var(--om-navy); animation: omban .5s cubic-bezier(.3,.7,.4,1.3); }
.pz-sheet .pz-play { font-size: 24px; padding: 11px 12px; }
.pz-sheet .pz-ghost { background: var(--om-blue); color: #fff; border: 2px solid var(--om-navy); border-radius: var(--r2); font: 900 18px/1.1 var(--om-font);
  text-shadow: var(--om-ol); box-shadow: 0 4px 0 var(--om-navy), inset 0 2px 0 #ffffff66; min-height: 48px; }
.pz-sheet .pz-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--om-navy), inset 0 2px 0 #ffffff66; }
.pz-buy { background: #fff; color: var(--om-ink); border: 2px solid #c9d6f5; border-radius: var(--r2); box-shadow: 0 3px 0 #b8c6ea; min-height: 56px; flex: 0 0 auto; }
.pz-buy small { color: #4a5f95; }
.pz-buy b { background: var(--om-green); color: #fff; border: 2px solid #1f6e14; border-radius: 999px; text-shadow: 0 1px 0 #1a5a10, 0 0 2px #1a5a10; box-shadow: inset 0 2px 0 #ffffff77, 0 2px 0 #1f6e14; font-weight: 900; }
.pz-buy.focus { outline: 3px solid var(--om-gold); outline-offset: 1px; }
.pz-buy:disabled { opacity: .6; }
.pz-lb li { color: var(--om-ink); font-weight: 800; }
.pz-modal:has(.win)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; translate: -50% -50%;
  background: repeating-conic-gradient(#ffe58a40 0 9deg, #0000 9deg 20deg); -webkit-mask: radial-gradient(#000 8%, #0000 55%); mask: radial-gradient(#000 8%, #0000 55%); animation: omspin 14s linear infinite; }
.pz-toast { background: linear-gradient(#2f6cf0, #173f9e); color: #fff; border: 2px solid var(--om-gold); border-radius: 999px; box-shadow: 0 0 0 2px var(--om-navy); font-weight: 800; text-shadow: 0 1px 0 var(--om-navy); }

@keyframes omshard { to { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) translate(-50%, -50%) rotate(220deg) scale(.35); opacity: 0; } }
@keyframes omring { from { scale: .35; opacity: 1; } to { scale: 1.5; opacity: 0; } }
@keyframes omrow { from { scale: .05 1; opacity: 1; } 60% { scale: 1 1; opacity: 1; } to { scale: 1 .4; opacity: 0; } }
@keyframes omcol { from { scale: 1 .05; opacity: 1; } 60% { scale: 1 1; opacity: 1; } to { scale: .4 1; opacity: 0; } }
@keyframes omboom { from { scale: .2; opacity: 1; } 55% { scale: 1.12; opacity: 1; } to { scale: 1.25; opacity: 0; } }
@keyframes omrays { from { rotate: 0deg; opacity: 1; scale: .4; } to { rotate: 40deg; opacity: 0; scale: 1.1; } }
@keyframes omflash { from { opacity: 1; } to { opacity: 0; } }
@keyframes omshake { 20% { translate: -4px 2px; } 40% { translate: 4px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; } }
@keyframes omhit { 30% { scale: .86; rotate: -4deg; } 70% { scale: 1.05; rotate: 2deg; } }
@keyframes omborn { from { scale: .2; } }
@keyframes ombob { to { translate: 0 -8%; } }
@keyframes omglow { to { filter: brightness(1.3) drop-shadow(0 0 6px #fff); } }
@keyframes omspin { to { rotate: 360deg; } }
@keyframes ombump { 40% { scale: 1.35; } }
@keyframes omlow { 50% { scale: 1.08; } }
@keyframes ompop { from { scale: .7; opacity: 0; } }
@keyframes omban { from { opacity: 0; scale: .5; } 60% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .om-shard, .om-ring, .om-fx.rays, .pz-modal:has(.win)::before { display: none; } }