/* Fermata casual engine — base styles. Every game themes these with the CSS variables below;
   the engine never hard-codes a game's palette.
   taste-gate:allow ui-overreliance-in-frame — this is the game's runtime stylesheet. The coin/energy
   counters are required merge-genre controls, not UI painted into a generated frame. The note behind
   the rule (clean UI, transparent bubbles, no clutter) is applied here: every speech, dialogue and
   tutorial bubble below is translucent glass with a plain rounded shape. */
:root {
  --bg: #1e1230; --bg2: #3a2152; --panel: #3a2152; --panel2: #2a1840; --edge: #c9a24a; --edge2: #8a6a2a;
  --ink: #fff1d6; --ink-dim: rgba(255, 241, 214, .7); --outline: #2a1840;
  --accent: #ff7a3d; --accent2: #ffb547; --good: #7cf5c8; --bad: #ff6f91; --gold: #ffd76a;
  --cell: rgba(255, 255, 255, .06); --cell-alt: rgba(255, 255, 255, .1); --cell-edge: rgba(255, 241, 214, .1);
  --glass: rgba(30, 18, 48, .42); --glass-edge: rgba(255, 241, 214, .34); --glass-blur: blur(14px) saturate(1.35);
  --font: 'Fredoka', 'Baloo 2', ui-rounded, system-ui, sans-serif; --radius: 18px;
  --ghost: #7cf5c8; --shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 12px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.app { position: fixed; inset: 0; display: flex; justify-content: center; background: var(--bg); }
.app-col { position: relative; width: 100%; max-width: 460px; height: 100%; overflow: hidden; }
.fx-float { position: fixed; z-index: 950; pointer-events: none; font-weight: 700; white-space: nowrap; -webkit-text-stroke: 1.5px var(--outline); paint-order: stroke fill; text-shadow: 0 3px 0 var(--outline); }
.fx-float.big { font-size: 30px; }
.fx-coin { position: fixed; z-index: 960; pointer-events: none; background: center/contain no-repeat; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

/* ---------------- merge game shell ---------------- */
.mg-game { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 6px) 8px calc(env(safe-area-inset-bottom) + 6px); gap: 6px; }
.mg-backdrop { position: absolute; inset: -20px; background: center/cover no-repeat; filter: blur(2px) brightness(.55) saturate(1.1); z-index: 0; transform: scale(1.05); }
.mg-game > *:not(.mg-backdrop) { position: relative; z-index: 1; }
.mg-hud { display: flex; align-items: center; gap: 6px; height: 44px; flex: none; }
.ui-counter { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 4px; border-radius: 20px; background: linear-gradient(var(--panel), var(--panel2)); border: 2px solid var(--edge); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.35); position: relative; }
.ui-counter i { width: 32px; height: 32px; margin-left: -6px; flex: none; background: center/contain no-repeat; filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); }
.ui-counter b { font-size: 16px; font-weight: 700; letter-spacing: .3px; text-shadow: 0 2px 0 var(--outline); }
.ui-counter small { position: absolute; right: 8px; bottom: -14px; font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.ui-counter.energy { cursor: pointer; }
.mg-level { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, var(--accent2), var(--accent)); border: 3px solid var(--edge); box-shadow: 0 3px 0 rgba(0,0,0,.35); position: relative; }
.mg-level b { font-size: 17px; text-shadow: 0 2px 0 var(--outline); }
.mg-xp { position: absolute; left: 2px; right: 2px; bottom: -8px; height: 6px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
.mg-xp i { display: block; height: 100%; background: var(--good); transition: width .5s cubic-bezier(.2,.8,.3,1); }
.mg-menu { width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--panel2); border: 2px solid var(--edge); display: grid; place-content: center; gap: 3px; }
.mg-menu span { display: block; width: 14px; height: 2.5px; border-radius: 2px; background: var(--ink); }

.mg-orders { display: flex; gap: 6px; height: 126px; flex: none; padding-top: 4px; }
.mg-card { flex: 1; min-width: 0; position: relative; border-radius: 16px; padding: 30px 6px 6px; background: linear-gradient(180deg, var(--card-top, #8f8aa8), var(--card-bot, #5f5a78)); border: 2px solid var(--card-edge, #b9b4cf); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.mg-card.rail-ghost { --card-top: #3f8f7f; --card-bot: #245a52; --card-edge: var(--ghost); }
.mg-card.rail-deal { --card-top: #b98a3a; --card-bot: #7a5420; --card-edge: var(--gold); }
.mg-card.locked { filter: grayscale(.7) brightness(.7); }
.mg-card.locked .mg-wants::after { content: 'after the others'; font-size: 10px; color: var(--ink-dim); }
.mg-card-top { position: absolute; left: 0; right: 0; top: -14px; display: flex; flex-direction: column; align-items: center; }
.mg-face { width: 46px; height: 46px; border-radius: 50%; background: #2a1840 center 18%/cover no-repeat; border: 3px solid var(--card-edge, #b9b4cf); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.mg-card.rail-ghost .mg-face { box-shadow: 0 0 12px rgba(124,245,200,.7), 0 3px 0 rgba(0,0,0,.35); }
.mg-rail { margin-top: -6px; font-size: 9px; letter-spacing: .8px; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: var(--outline); color: var(--ink); }
.mg-wants { display: flex; gap: 3px; justify-content: center; margin-top: 12px; }
.mg-want { position: relative; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.25); }
.mg-want i { position: absolute; inset: 3px; background: center/contain no-repeat; filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); }
.mg-want.ok::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: var(--outline); font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--outline); }
.mg-want em { position: absolute; left: 0; bottom: -2px; font-size: 10px; font-style: normal; background: var(--outline); padding: 0 3px; border-radius: 5px; }
.mg-reward { font-size: 11px; display: flex; gap: 6px; color: var(--gold); text-shadow: 0 1px 0 var(--outline); }
.mg-reward .rk { color: var(--good); }
.mg-deliver { display: none; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; background: linear-gradient(#9cff7a, #3fbf4a); color: #13361a; border: 2px solid #13361a; box-shadow: 0 3px 0 #13361a; white-space: nowrap; }
.mg-card.ready { animation: mgReady 1.2s ease-in-out infinite; }
.mg-card.ready .mg-deliver { display: block; animation: mgBob .9s ease-in-out infinite; }
.mg-card.ready .mg-reward { visibility: hidden; }
@keyframes mgReady { 50% { transform: translateY(-3px); box-shadow: 0 0 18px var(--gold), var(--shadow); } }
@keyframes mgBob { 50% { transform: translateX(-50%) translateY(-2px) scale(1.05); } }

.mg-boardwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mg-boardframe { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mb-board { position: relative; border-radius: 14px; padding: 0; }
.mb-board::before { content: ''; position: absolute; inset: -8px; border-radius: 18px; background: var(--board-frame, linear-gradient(#5b3b7a, #2a1840)); border: 3px solid var(--edge); box-shadow: var(--shadow), inset 0 0 20px rgba(0,0,0,.5); z-index: -1; }
.mb-grid { display: grid; }
.mb-cell { position: relative; background: var(--cell); box-shadow: inset 0 0 0 1px var(--cell-edge); border-radius: 8px; margin: 1.5px; transition: background .15s; }
.mb-cell.alt { background: var(--cell-alt); }
.mb-cell.target { background: rgba(124,245,200,.18); box-shadow: inset 0 0 0 2px rgba(124,245,200,.6); }
.mb-cell.over { background: rgba(255,255,255,.14); }
.mb-cell.over-merge { background: rgba(255,215,106,.35); box-shadow: inset 0 0 0 3px var(--gold), 0 0 16px var(--gold); }
.mb-cell.sel { box-shadow: inset 0 0 0 3px var(--accent2); }
.mb-items { position: absolute; inset: 0; pointer-events: none; }
.mb-item { position: absolute; left: 0; top: 0; transition: transform .2s cubic-bezier(.2,.8,.3,1.1), opacity .2s; will-change: transform; }
.mb-item .mb-sprite { position: absolute; inset: 9%; background: center/contain no-repeat; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.mb-item .mb-shadow { position: absolute; left: 20%; right: 20%; bottom: 6%; height: 12%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); }
.mb-item .mb-tier { position: absolute; right: 4%; bottom: 3%; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--outline); color: var(--ink); font-size: 9px; font-weight: 700; display: grid; place-items: center; opacity: .85; }
.mb-item.lifted { z-index: 50; transition: none; }
.mb-item.lifted .mb-sprite { filter: drop-shadow(0 12px 8px rgba(0,0,0,.5)) brightness(1.08); }
.mb-item.lifted .mb-shadow { transform: translateY(14px) scale(.8); opacity: .5; }
.mb-item.dim { filter: grayscale(.8) brightness(.45); }
.mb-item.hint .mb-sprite { animation: mbHint 1s ease-in-out infinite; }
@keyframes mbHint { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-7deg) scale(1.06); } 75% { transform: rotate(7deg) scale(1.06); } }
.mb-item.gen .mb-sprite { inset: 2%; animation: mbGen 2.6s ease-in-out infinite; }
.mb-item.gen::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(rgba(255,215,106,.45), transparent 65%); animation: mbGlow 2s ease-in-out infinite; }
@keyframes mbGen { 50% { transform: translateY(-3%) scale(1.03); } }
@keyframes mbGlow { 50% { opacity: .4; transform: scale(1.1); } }
.mb-item.gen.cooling .mb-sprite { filter: grayscale(.6) brightness(.7); animation: none; }
.mb-item.gen.cooling::before { display: none; }
.mb-genbar { position: absolute; left: 14%; right: 14%; bottom: 2%; height: 6px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; border: 1px solid var(--outline); }
.mb-genbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--gold)); }
.mb-gentime { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 11px; font-weight: 700; text-shadow: 0 2px 0 var(--outline); }
.mb-item.haunted .mb-sprite { filter: drop-shadow(0 0 8px var(--ghost)) drop-shadow(0 3px 2px rgba(0,0,0,.45)); animation: mbTwitch 3.2s steps(1) infinite; }
@keyframes mbTwitch { 0%, 88%, 100% { transform: none; } 90% { transform: translateX(-3%) rotate(-4deg); } 93% { transform: translateX(3%) rotate(4deg); } 96% { transform: translateY(-4%); } }
.mb-haunt { position: absolute; left: 4%; top: 4%; width: 22%; height: 22%; border-radius: 50%; background: var(--ghost); box-shadow: 0 0 10px var(--ghost); border: 2px solid var(--outline); animation: mbGlow 1.6s ease-in-out infinite; }
.mb-lock { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--lock-art, radial-gradient(circle at 50% 40%, rgba(185,166,255,.35), rgba(30,18,48,.8))) center/88% no-repeat; border-radius: 8px; }

.mg-info { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 14px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1.5px solid var(--glass-edge); }
.mg-info-ic { width: 38px; height: 38px; flex: none; background: center/contain no-repeat; }
.mg-info-txt { flex: 1; min-width: 0; line-height: 1.1; }
.mg-info-txt b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-info-txt small { display: block; font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-info .mg-sell, .mg-info .mg-stash { display: none; }
.mg-info.has .mg-sell, .mg-info.has .mg-stash { display: inline-block; }
.mg-dock { height: 64px; flex: none; display: flex; align-items: center; gap: 8px; }
.mg-crypt, .mg-shop { width: 64px; height: 60px; flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: 11px; font-weight: 600; text-shadow: 0 2px 0 var(--outline); }
.mg-crypt i, .mg-shop i { position: absolute; top: 0; width: 46px; height: 46px; background: center/contain no-repeat; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.mg-crypt em { position: absolute; top: 0; right: 2px; font-style: normal; font-size: 10px; background: var(--accent); padding: 0 4px; border-radius: 8px; }
.mg-dockmid { flex: 1; display: flex; justify-content: center; }

/* ---------------- shared UI ---------------- */
.ui-btn { padding: 10px 18px; border-radius: 16px; font-weight: 700; font-size: 16px; background: linear-gradient(var(--panel), var(--panel2)); border: 2px solid var(--edge); box-shadow: 0 4px 0 rgba(0,0,0,.4); color: var(--ink); text-shadow: 0 2px 0 var(--outline); transition: transform .08s; }
.ui-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.ui-btn.cta { background: linear-gradient(#ffb547, #ff7a3d); border-color: #fff1d6; color: #fff; font-size: 18px; padding: 12px 26px; }
.ui-btn.small { padding: 5px 10px; font-size: 12px; border-radius: 12px; }
.ui-btn.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); }
.ui-btn.danger { background: linear-gradient(#ff6f91, #b8304f); }
.ui-btn.ghosty { background: linear-gradient(#7cf5c8, #2fa883); color: #12352b; text-shadow: none; }
.ui-btn:disabled { opacity: .45; }
.ui-scrim { position: fixed; inset: 0; z-index: 800; background: rgba(10, 4, 20, .55); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
.ui-sheet { width: min(400px, 100%); max-height: 88vh; overflow: auto; border-radius: 24px; padding: 18px 18px 16px; background: linear-gradient(var(--panel), var(--panel2)); border: 3px solid var(--edge); box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.5); text-align: center; position: relative; }
.ui-sheet-art { height: 150px; margin: -18px -18px 10px; border-radius: 20px 20px 0 0; background: center 30%/cover no-repeat; }
.ui-eyebrow { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent2); }
.ui-title { margin: 4px 0 8px; font-size: 26px; line-height: 1.1; text-shadow: 0 3px 0 var(--outline); }
.ui-body { font-size: 15px; line-height: 1.35; }
.ui-body p { margin: 6px 0; }
.ui-body .dim { color: var(--ink-dim); } .ui-body .small { font-size: 12px; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ui-toast { position: fixed; z-index: 980; left: 50%; top: calc(env(safe-area-inset-top) + 60px); transform: translateX(-50%); max-width: 88vw; padding: 8px 14px; border-radius: 16px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1.5px solid var(--glass-edge); font-size: 14px; text-align: center; transition: opacity .3s; pointer-events: none; }
.ui-toast.quote { font-style: italic; }
.ui-toast.off { opacity: 0; }
.mg-cryptgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mg-slot { aspect-ratio: 1; border-radius: 14px; background: rgba(0,0,0,.3) center/72% no-repeat; border: 2px solid var(--edge2); }
.mg-slot.empty { opacity: .5; }
.mg-shoplist { display: grid; gap: 6px; margin-top: 8px; }
.mg-shopitem { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 14px; }

/* ---------------- tutorial ---------------- */
.tu-overlay { position: fixed; inset: 0; z-index: 850; pointer-events: none; }
.tu-overlay.off { display: none; }
.tu-block { position: fixed; background: rgba(8, 3, 16, .62); pointer-events: auto; }
.tu-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 3px var(--gold), 0 0 22px var(--gold); pointer-events: none; animation: tuHole 1.4s ease-in-out infinite; }
.tu-overlay.dimonly .tu-hole { display: none; }
@keyframes tuHole { 50% { box-shadow: 0 0 0 5px var(--gold), 0 0 34px var(--gold); } }
.tu-hand { position: fixed; left: 0; top: 0; width: 54px; height: 54px; z-index: 2; pointer-events: none; margin: -6px 0 0 -14px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)); }
.tu-card { position: fixed; left: 50%; transform: translateX(-50%); width: min(380px, 92vw); display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 20px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--ink); border: 1.5px solid var(--glass-edge); font-size: 15px; font-weight: 500; line-height: 1.25; pointer-events: auto; }
.tu-card.above { transform: translate(-50%, -100%); }
.tu-avatar, .tu-toast .tu-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #2a1840 center 15%/cover no-repeat; border: 2px solid var(--glass-edge); }
.tu-toast { position: fixed; z-index: 870; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); transform: translateX(-50%); width: min(380px, 92vw); display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 20px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--ink); border: 1.5px solid var(--glass-edge); font-size: 14px; transition: opacity .3s, transform .3s; animation: tuIn .35s cubic-bezier(.2,.8,.3,1.3); }
.tu-toast.off { opacity: 0; transform: translate(-50%, 20px); }
@keyframes tuIn { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }

/* ---------------- stage + actors ---------------- */
.st-stage { position: absolute; inset: 0; overflow: hidden; }
.st-cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.st-bgs, .st-actors, .st-fg { position: absolute; inset: 0; }
.st-bg { position: absolute; inset: -4%; background: center/cover no-repeat; will-change: transform; }
.st-fg { pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(10,4,20,.55)); }
.ac { position: absolute; transform: translate(-50%, -100%); will-change: transform; }
.ac-root { height: 100%; transform-origin: 50% 100%; }
.ac-figure { position: relative; height: 100%; }
.ac-layer { position: absolute; inset: 0; background: center bottom/contain no-repeat; will-change: transform; }
.ac-alt { opacity: 0; transition: opacity .12s; }
.ac-lid { position: absolute; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; transition: transform .05s; }
.ac-headkit { position: absolute; inset: 0; }
.ac-headimg { position: absolute; height: auto; }
.ac-shadow { position: absolute; left: 15%; right: 15%; bottom: -2%; height: 6%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); }
.ac.ghost .ac-figure { opacity: .74; filter: drop-shadow(0 0 10px rgba(124,245,200,.75)) drop-shadow(0 0 26px rgba(124,245,200,.45)) brightness(1.08); }
.ac.ghost .ac-shadow { background: rgba(124,245,200,.25); }
.ac-wisp { position: absolute; left: 30%; right: 30%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(rgba(124,245,200,.55), transparent 70%); filter: blur(6px); animation: acWisp 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes acWisp { 50% { transform: scaleX(1.3) translateY(-6%); opacity: .6; } }
.ac.dim .ac-figure { filter: brightness(.72) saturate(.85); transition: filter .25s; }
.ac.ghost.dim .ac-figure { filter: drop-shadow(0 0 8px rgba(124,245,200,.5)) brightness(.8); }

/* ---------------- story player (transparent glass bubbles) ---------------- */
.sp-overlay { position: absolute; inset: 0; z-index: 600; background: var(--bg); }
.sp-stage { position: absolute; inset: 0; }
.sp-panel { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .35s; }
.sp-panel.on { opacity: 1; }
.sp-box { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 20px); min-height: 92px; padding: 20px 18px 16px; border-radius: 26px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--ink); border: 1.5px solid var(--glass-edge); font-size: 18px; line-height: 1.32; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.sp-box.caption { font-style: italic; }
.sp-name { position: absolute; top: -13px; left: 18px; padding: 2px 12px; border-radius: 12px; background: rgba(255,122,61,.85); color: #fff; font-size: 14px; font-weight: 700; font-style: normal; backdrop-filter: blur(6px); }
.sp-name:empty { display: none; }
.sp-next { position: absolute; right: 16px; bottom: 6px; font-size: 12px; opacity: 0; animation: spNext 1s ease-in-out infinite; }
.sp-box.done .sp-next { opacity: .8; }
@keyframes spNext { 50% { transform: translateY(3px); } }
.sp-choices { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 132px); display: none; flex-direction: column; gap: 8px; z-index: 3; }
.sp-choices.on { display: flex; }
.sp-choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 14px; border-radius: 18px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1.5px solid var(--glass-edge); font-size: 16px; }
.sp-choice b { flex: none; font-size: 11px; letter-spacing: 1px; padding: 2px 8px; border-radius: 8px; background: var(--accent); }
.sp-choice.t-blurt b { background: var(--ghost); color: var(--outline); }
.sp-choice.t-fudge b { background: var(--accent2); color: var(--outline); }
.sp-skip { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; z-index: 4; padding: 6px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(8px); border: 1.5px solid var(--glass-edge); font-size: 14px; }

/* ---------------- minigame host ---------------- */
.mg-host { position: absolute; inset: 0; z-index: 650; background: var(--bg); overflow: hidden; }
/* cover-up */
.cu-stage { position: absolute; inset: 0; }
.cu-hud { position: absolute; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 10px); display: flex; gap: 8px; align-items: flex-start; z-index: 5; }
.cu-meters { flex: 1; display: grid; gap: 6px; }
.cu-meter { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 16px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1.5px solid var(--glass-edge); }
.cu-face { width: 30px; height: 30px; border-radius: 50%; flex: none; background: #2a1840 center 15%/cover no-repeat; border: 2px solid var(--edge); }
.cu-track { flex: 1; height: 12px; border-radius: 7px; background: rgba(0,0,0,.5); overflow: hidden; }
.cu-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--good), var(--accent2) 55%, var(--bad)); transition: width .15s linear; }
.cu-nm { font-size: 12px; width: 58px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-meter.hot { animation: cuHot .4s ease-in-out infinite; border-color: var(--bad); }
.cu-meter.fled { opacity: .45; filter: grayscale(1); }
.cu-meter.fled .cu-nm::after { content: ' · fled'; }
@keyframes cuHot { 50% { transform: translateX(2px); } }
.cu-timer { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #fff1d6, #e8d4a8); color: var(--outline); border: 4px solid var(--edge); box-shadow: var(--shadow); }
.cu-timer b { font-size: 24px; }
.cu-timer.low { animation: cuHot .5s ease-in-out infinite; color: #b8304f; }
.cu-targets { position: absolute; inset: 0; z-index: 4; }
.cu-ev { position: absolute; width: 86px; height: 86px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(rgba(124,245,200,.35), rgba(124,245,200,.05) 70%); }
.cu-ev .cu-ic { width: 54px; height: 54px; background: center/contain no-repeat; font-size: 36px; display: grid; place-items: center; filter: drop-shadow(0 0 8px var(--ghost)); animation: mbTwitch 1s steps(1) infinite; }
.cu-ev span { position: absolute; bottom: -12px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--glass); backdrop-filter: blur(6px); white-space: nowrap; }
.cu-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cu-ring circle { fill: none; stroke: var(--ghost); stroke-width: 6; stroke-dasharray: 289; stroke-dashoffset: calc(289 * var(--k, 0)); filter: drop-shadow(0 0 4px var(--ghost)); }
.cu-ev.ok { transform: translate(-50%, -50%) scale(1.3); opacity: 0; transition: .25s; }
.cu-ev.miss { filter: hue-rotate(140deg) saturate(2); transform: translate(-50%, -50%) scale(1.5); opacity: 0; transition: .35s; }
.cu-bubbles { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cu-say { position: absolute; max-width: 220px; padding: 8px 14px; border-radius: 18px; background: rgba(255,255,255,.16); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.22; border: 1.5px solid rgba(255,255,255,.38); text-shadow: 0 1px 2px rgba(0,0,0,.6); transform: translate(-50%, -100%); }
.cu-say.ghost { background: rgba(124,245,200,.18); border-color: rgba(124,245,200,.55); }
.cu-bar { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 12px); display: flex; gap: 8px; z-index: 5; }
.cu-boost, .cu-save { flex: 1; padding: 8px 10px; border-radius: 16px; background: linear-gradient(var(--panel), var(--panel2)); border: 2px solid var(--edge); box-shadow: 0 4px 0 rgba(0,0,0,.4); font-size: 13px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; }
.cu-boost small, .cu-save small { font-size: 10px; color: var(--ink-dim); }
.cu-boost.used { opacity: .35; pointer-events: none; }
.cu-save { display: none; background: linear-gradient(#ffb547, #ff7a3d); animation: mgBob2 .8s ease-in-out infinite; }
.cu-save.on { display: flex; }
@keyframes mgBob2 { 50% { transform: translateY(-3px); } }
/* match-3 */
.m3 { display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px); gap: 10px; }
.m3-title { font-size: 24px; font-weight: 700; text-shadow: 0 3px 0 var(--outline); }
.m3-top { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.m3-top > div { flex: 1; border-radius: 16px; padding: 6px 8px; background: linear-gradient(var(--panel), var(--panel2)); border: 2px solid var(--edge); text-align: center; position: relative; }
.m3-top b { display: block; font-size: 22px; text-shadow: 0 2px 0 var(--outline); }
.m3-top small { font-size: 11px; color: var(--ink-dim); }
.m3-goal i { position: absolute; left: 6px; top: 8px; width: 30px; height: 30px; background: center/contain no-repeat; }
.m3-moves.low { animation: cuHot .5s ease-in-out infinite; }
.m3-meter { height: 8px; border-radius: 5px; background: rgba(0,0,0,.4); overflow: hidden; margin-top: 4px; }
.m3-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--gold)); transition: width .3s; }
.m3-board { flex: 1; width: 100%; max-width: 440px; min-height: 0; display: flex; align-items: center; justify-content: center; }
.m3-canvas { border-radius: 16px; touch-action: none; box-shadow: var(--shadow); }

/* ---------------- customizer ---------------- */
.cz-overlay { position: absolute; inset: 0; z-index: 640; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px); gap: 8px; }
.cz-head { text-align: center; }
.cz-note { font-size: 12px; color: var(--ink-dim); }
.cz-preview { position: relative; flex: 1; min-height: 200px; width: 100%; border-radius: 22px; overflow: hidden; }
.cz-plinth { position: absolute; left: 50%; bottom: 2%; width: 180px; height: 30px; margin-left: -90px; border-radius: 50%; background: radial-gradient(var(--edge), var(--edge2)); box-shadow: 0 6px 0 rgba(0,0,0,.35); z-index: 0; }
.cz-preview .st-stage { z-index: 1; }
.cz-tabs { display: flex; gap: 6px; }
.cz-tab { padding: 6px 12px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--edge2); font-size: 14px; }
.cz-tab.on { background: var(--accent); border-color: var(--ink); }
.cz-panel { display: flex; gap: 8px; overflow-x: auto; width: 100%; padding: 4px 2px 6px; scrollbar-width: none; }
.cz-swatch { flex: none; width: 76px; border-radius: 14px; background: rgba(0,0,0,.25); border: 2px solid var(--edge2); padding: 4px; display: flex; flex-direction: column; align-items: center; font-size: 10px; }
.cz-swatch img { height: 70px; object-fit: contain; }
.cz-swatch.on { border-color: var(--gold); background: rgba(255,215,106,.15); box-shadow: 0 0 10px rgba(255,215,106,.5); }
.cz-name { width: 100%; max-width: 320px; }
.cz-name input { width: 100%; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--edge); background: var(--ink); color: var(--outline); font: 600 17px var(--font); text-align: center; user-select: text; -webkit-user-select: text; }
.cz-msg { min-height: 16px; font-size: 12px; color: var(--bad); text-align: center; }
.cz-pronouns { display: flex; gap: 6px; }
.cz-chip { padding: 5px 10px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--edge2); font-size: 13px; }
.cz-chip.on { border-color: var(--gold); background: rgba(255,215,106,.2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ---- canon (ghost-realtor/game, naughty-list/game): glossy beveled candy-plastic controls,
   chunky heavy cream lettering with a thick dark outline + soft drop shadow ---- */
.ui-btn, .ui-counter, .mg-card, .mg-level, .m3-top > div, .cu-boost, .cu-save, .mg-menu { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 4px 0 rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.28); }
.ui-btn, .ui-title, .ui-counter b, .mg-level b, .m3-top b, .m3-title, .mg-deliver, .cu-timer b { -webkit-text-stroke: 1px var(--outline); paint-order: stroke fill; font-weight: 700; }
.ui-title, .m3-title { -webkit-text-stroke: 2px var(--outline); letter-spacing: .4px; }
.ui-btn.cta { box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.2), 0 5px 0 rgba(90,30,10,.6), 0 12px 20px rgba(0,0,0,.3); }

/* Shared styles for engine/comic.js, engine/renovate.js, engine/quota.js and the Sugar Rush boss row.
   Concatenated after engine.css by scripts/build.mjs. Games skin these through CSS variables and theme.css. */

/* ===== comic panels: live busts in rings + drawn bubbles ===== */
.cp-overlay { position: absolute; inset: 0; z-index: 800; background: var(--comic-bg, #f4ead8); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 46px) 12px calc(env(safe-area-inset-bottom) + 28px); }
.cp-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-panel { position: relative; flex: 1 1 0; min-height: 0; border-radius: 16px; overflow: hidden; border: 4px solid var(--comic-edge, #fff); box-shadow: 0 5px 0 rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.25); background: #222; isolation: isolate; }
.cp-bg { position: absolute; inset: 0; background: center/cover no-repeat; z-index: 0; }
.cp-bust { position: absolute; bottom: 8px; width: 42%; aspect-ratio: 1; max-height: calc(100% - 16px); z-index: 2; }
.cp-bust.left { left: 8px; }
.cp-bust.right { right: 8px; }
.cp-ring { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--ring-in, #3f8f5a), var(--ring-out, #1e5a38)); border: 5px solid var(--ring-edge, #e8b64a); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.25); }
.cp-bust.still .cp-ring { background-size: 112%; background-position: 50% 10%; background-repeat: no-repeat; background-color: var(--ring-out, #1e5a38); }
.cp-ring .st-stage { position: absolute; inset: 0; }
.cp-name { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 12px; border-radius: 10px; font-weight: 700; font-size: 15px; color: #fff; background: var(--name-bg, #c8102e); border: 2px solid #fff; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.cp-bubbles { position: absolute; inset: 8px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; }
.cp-bubble { position: relative; max-width: 58%; padding: 8px 12px; border-radius: 18px; background: #fff; color: #2a1a12; font-weight: 600; font-size: 15px; line-height: 1.22; border: 2.5px solid #2a1a12; box-shadow: 0 3px 0 rgba(0,0,0,.2); transform-origin: 50% 100%; }
.cp-bubble.left { align-self: flex-end; }
.cp-bubble.right { align-self: flex-start; }
.cp-bubble.center { align-self: center; max-width: 80%; }
.cp-caption { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 4px 10px; border-radius: 8px; background: #fff7d8; color: #3a2a1a; font-weight: 700; font-size: 13px; }
.cp-sfx { position: absolute; right: 10px; top: 6px; z-index: 4; font-size: 40px; font-weight: 700; color: #ffd76a; -webkit-text-stroke: 5px #2a1a12; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1a12; pointer-events: none; }
.cp-skip { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 8px); z-index: 5; padding: 6px 14px; border-radius: 16px; border: 2px solid #fff; background: var(--name-bg, #c8102e); color: #fff; font: inherit; font-weight: 700; }
.cp-tap { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 6px); transform: translateX(-50%); font-size: 12px; font-weight: 700; color: rgba(0,0,0,.4); }

/* ===== renovation room ===== */
.rv-room { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rv-plate { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rv-before, .rv-after { position: absolute; inset: 0; background: center/cover no-repeat; }
.rv-after { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rv-spots { position: absolute; inset: 0; }
.rv-spot { position: absolute; transform: translate(-50%, -50%); width: 58px; height: 58px; border: 0; padding: 0; background: none; font: inherit; }
.rv-spot i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,250,220,.95), rgba(255,200,70,.85) 45%, rgba(255,170,40,0) 72%); animation: rvGlow 1.4s ease-in-out infinite; }
.rv-spot:not(.next) { opacity: .65; transform: translate(-50%, -50%) scale(.75); }
.rv-spot span { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 14px; background: #fff; color: #3a2a1a; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.25); white-space: nowrap; }
.rv-spot span em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 16px; }
.rv-spot span em.star::before { content: ""; width: 22px; height: 22px; background: var(--star-art) center/contain no-repeat; }
.rv-spot span em.item { width: 26px; height: 26px; background: center/contain no-repeat; }
.rv-spot.can.next span { background: linear-gradient(#9cff7a, #3fbf4a); color: #13361a; }
.rv-title { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 58px); transform: translateX(-50%); text-align: center; padding: 6px 18px; border-radius: 16px; background: rgba(255,255,255,.92); color: #3a2a1a; box-shadow: 0 4px 0 rgba(0,0,0,.2); white-space: nowrap; }
.rv-title b { display: block; font-size: 18px; }
.rv-title small { font-size: 12px; font-weight: 600; opacity: .75; }
.rv-styles { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 76px); z-index: 6; padding: 10px; border-radius: 22px; background: var(--tray-bg, linear-gradient(#fffaf4, #f1e2d2)); border: 3px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.25); text-align: center; color: #3a2a1a; }
.rv-styles > b { display: block; font-size: 15px; margin-bottom: 6px; }
.rv-style-row { display: flex; gap: 8px; }
.rv-style { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #3a2a1a; }
.rv-style i { width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 0 2px var(--accent, #c8102e); background-repeat: no-repeat; }
.rv-style span { font-size: 12px; font-weight: 700; }
@keyframes rvGlow { 50% { transform: scale(1.12); filter: brightness(1.15); } }

/* ===== quota board ===== */
.qb { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px; border-radius: 18px; }
.qb-basket { position: relative; width: 50px; height: 50px; flex: none; }
.qb-basket i { position: absolute; inset: 0; background: center/contain no-repeat; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.qb-basket em { position: absolute; right: -4px; bottom: -2px; min-width: 20px; padding: 0 4px; border-radius: 10px; font-style: normal; font-size: 12px; font-weight: 700; text-align: center; }
.qb-main { flex: 1; min-width: 0; }
.qb-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.qb-odo { display: flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.qb-odo .d { display: inline-block; min-width: .62em; text-align: center; padding: 0 1px; border-radius: 3px; font-weight: 700; font-size: 17px; }
.qb-odo .sep { font-weight: 700; font-size: 15px; }
.qb-odo .of { margin-left: 5px; font-size: 11px; font-weight: 600; opacity: .8; }
.qb-bar { height: 7px; border-radius: 5px; overflow: hidden; margin-top: 3px; }
.qb-bar i { display: block; height: 100%; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.qb-days { width: 52px; height: 52px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.qb-days b { font-size: 20px; }
.qb-days small { font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* ===== Sugar Rush boss bust + backdrop ===== */
.m3 { isolation: isolate; }
.m3-bg { position: absolute; inset: 0; background: center/cover no-repeat; z-index: -1; }
.m3-boss { position: relative; width: 100%; max-width: 420px; height: 84px; flex: none; display: flex; align-items: center; gap: 10px; }
.m3-bust { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; border: 4px solid var(--ring-edge, #e8b64a); background: radial-gradient(circle at 50% 35%, #e14b5a, #8a0f22); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.m3-bust .st-stage { position: absolute; inset: 0; }
.m3-say { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 16px; background: #fff; color: #2a1a12; font-weight: 600; font-size: 14px; line-height: 1.2; border: 2.5px solid #2a1a12; opacity: 0; transform: scale(.7); transform-origin: 0 50%; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.3,1.4); }
.m3-say.on { opacity: 1; transform: none; }

/* Gossip Harbor dialogue scene (engine/dialogue.js): big busts with name tags, one big bubble, over the room. */
.dg-overlay { position: absolute; inset: 0; z-index: 820; overflow: hidden; background: #0d1a44; isolation: isolate; }
.dg-bg { position: absolute; inset: 0; background: center/cover no-repeat; z-index: 0; filter: brightness(.82) saturate(1.05); }
.dg-overlay.story .dg-bg { filter: none; }
.dg-cast { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; pointer-events: none; }
.dg-bust { position: absolute; bottom: 0; width: 64%; height: 100%; transition: filter .25s, transform .25s; }
.dg-bust.left { left: -6%; }
.dg-bust.right { right: -6%; }
.dg-bust.dim { filter: brightness(.6) saturate(.8); transform: scale(.96); }
.dg-figure { position: absolute; inset: 0; }
.dg-figure .st-stage { position: absolute; inset: 0; }
.dg-bust.still .dg-figure { background: center bottom/contain no-repeat; }
.dg-bust.right .dg-figure { transform: scaleX(-1); }
.dg-tag { position: absolute; bottom: 38%; z-index: 3; padding: 3px 16px; border-radius: 12px; font-weight: 700; font-size: 18px; color: #fff; background: var(--name-bg, #c8102e); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3); white-space: nowrap; }
.dg-bust.left .dg-tag { left: 16%; }
.dg-bust.right .dg-tag { right: 16%; }
.dg-bust.dim .dg-tag { opacity: .7; }
.dg-bubble { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 24px); z-index: 4; padding: 14px 18px 22px; border-radius: 26px; background: #fff; color: #2a1a12; border: 3px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; }
.dg-bubble.on { opacity: 1; }
.dg-bubble::after { content: ""; position: absolute; top: -16px; left: 22%; border: 14px solid transparent; border-bottom: 18px solid #fff; border-top: 0; }
.dg-bubble.right::after { left: auto; right: 22%; }
.dg-bubble.noname::after { display: none; }
.dg-name { font-size: 13px; font-weight: 700; color: var(--name-bg, #c8102e); text-transform: uppercase; letter-spacing: .6px; }
.dg-bubble.noname .dg-name { display: none; }
.dg-text { font-size: 21px; font-weight: 600; line-height: 1.25; min-height: 2.5em; }
.dg-next { position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: rgba(0,0,0,.35); opacity: 0; }
.dg-bubble.done .dg-next { opacity: 1; }
.dg-options { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 24px); z-index: 5; display: none; flex-direction: column; gap: 10px; }
.dg-options.on { display: flex; }
.dg-prompt { align-self: center; padding: 4px 14px; border-radius: 12px; background: rgba(0,0,0,.45); color: #fff; font-weight: 700; font-size: 14px; }
.dg-opt { padding: 13px 18px; border-radius: 24px; border: 3px solid #fff; background: linear-gradient(#fffaf4, #f1e2d2); color: #2a1a12; font: inherit; font-weight: 700; font-size: 17px; text-align: left; box-shadow: 0 4px 0 rgba(74,26,16,.35); }
.dg-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(74,26,16,.35); }
.dg-caption { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 56px); transform: translateX(-50%); z-index: 3; padding: 6px 16px; border-radius: 12px; background: #fff7d8; color: #3a2a1a; font-weight: 700; font-size: 14px; opacity: 0; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.dg-caption.on { opacity: 1; }
.dg-sfx { position: absolute; right: 16px; top: 22%; z-index: 6; font-size: 54px; font-weight: 700; color: #ffd76a; -webkit-text-stroke: 6px #2a1a12; paint-order: stroke fill; transform: rotate(-8deg); pointer-events: none; }
.dg-skip { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 8px); z-index: 7; padding: 6px 14px; border-radius: 16px; border: 2px solid #fff; background: var(--name-bg, #c8102e); color: #fff; font: inherit; font-weight: 700; }
.dg-overlay.over { background: linear-gradient(to bottom, rgba(10,20,50,0) 35%, rgba(10,20,50,.55) 100%); }
.dg-overlay.over .dg-bg { opacity: 0; }
.dg-insert { position: absolute; left: 50%; top: 16%; width: 58%; aspect-ratio: 1; margin-left: -29%; z-index: 3; border: 6px solid #fff; border-radius: 18px; background: center/cover no-repeat #222; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: rotate(-3deg); display: none; }
.dg-insert.on { display: block; }
.dg-bust.noart .dg-figure { display: none; }
.dg-bust.noart .dg-tag { bottom: 4%; }
.dg-meter-pop { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 8; }
.dg-figure .st-fg { display: none; } /* the stage vignette drew a box around every bust */
.dg-text { min-height: 1.3em; }

/* The Naughty List skin. Canon: naughty-list/game "Dimensional Casual", v4 daylight build look (Maestro 2026-10-27):
   cranberry #C8102E, peppermint white #FFF7F2, evergreen #1E6B4A, gold #E8B64A, sugar-plum #7A3B8F, frost #BFE6FF,
   gingerbread #B86A3C. Glossy beveled candy UI, chunky cream lettering with a thick dark outline. */
:root {
  --bg: #2d7fc9; --bg2: #1e5a9a; --panel: #fff7f2; --panel2: #f1e2d2; --edge: #e8b64a; --edge2: #9a6b1e;
  --ink: #fff7f2; --ink-dim: rgba(255, 247, 242, .8); --outline: #4a1a10;
  --accent: #c8102e; --accent2: #e8b64a; --good: #3fbf4a; --bad: #c8102e; --gold: #ffd76a;
  --glass: rgba(255, 247, 242, .5); --glass-edge: rgba(255, 255, 255, .8);
  --comic-bg: #f6ecdc; --comic-edge: #fff; --ring-in: #3f9a5a; --ring-out: #1e6b4a; --ring-edge: #e8b64a; --name-bg: #c8102e;
  --star-art: url("art/ui/star.png");
}
body { background: #2d7fc9; }
.app { background: linear-gradient(#7cc4f5, #2d7fc9); }

.nl-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #0d1a44; }
.nl-title { width: 100%; aspect-ratio: 768 / 440; background: center/cover no-repeat; }
.nl-load-bar { width: 62%; height: 16px; border-radius: 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); overflow: hidden; }
.nl-load-bar i { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(#ffe39a, #e8b64a); transition: width .3s; }
.nl-loading small { color: rgba(255, 255, 255, .75); font-size: 13px; }

/* ---- the merge screen ---- */
.nl.mg-game { background: linear-gradient(#a9dcff 0%, #7cc4f5 30%, #1e6b4a 30.1%, #17573c 100%); }
.mg-game > .nl-sky { position: absolute; left: 0; right: 0; top: 0; height: 44%; background: center top/cover no-repeat; z-index: 0; }
.nl .ui-counter { background: linear-gradient(#fffaf4, #f1e2d2); border: 2px solid #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 3px 0 rgba(74, 26, 16, .35); }
.nl .ui-counter b { color: #4a1a10; text-shadow: none; -webkit-text-stroke: 0; }
.nl .ui-counter small { color: #fff; }
.nl .mg-level { background: radial-gradient(circle at 40% 35%, #ff5a6a, #c8102e); border-color: #fff; }
.nl .mg-menu { background: #c8102e; border-color: #fff; }

.nl .qb { background: linear-gradient(#c8102e, #9a0c22); border: 3px solid #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 0 rgba(74, 26, 16, .4); color: #fff7f2; margin-top: 4px; }
.nl .qb-label { color: #ffe39a; }
.nl .qb-odo .d { background: #2a1210; color: #fff7f2; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .15); }
.nl .qb-odo .sep { color: #ffe39a; }
.nl .qb-bar { background: rgba(0, 0, 0, .35); }
.nl .qb-bar i { background: linear-gradient(90deg, #9cff7a, #3fbf4a); }
.nl .qb-basket em { background: #fff7f2; color: #c8102e; }
.nl .qb-days { background: radial-gradient(circle at 40% 35%, #fff, #f1e2d2); color: #c8102e; border: 3px solid #e8b64a; box-shadow: 0 3px 0 rgba(74, 26, 16, .4); }

/* elf order strip: busts standing above the bench, an order bubble + Make under each */
.nl .mg-orders { height: 172px; gap: 4px; padding-top: 0; }
.nl .mg-card { background: none; border: 0; box-shadow: none; padding: 0; justify-content: flex-end; gap: 0; animation: none; }
.nl .mg-card-top { position: relative; top: 0; flex: 1; min-height: 0; width: 100%; }
.nl .mg-face { width: 100%; height: 100%; border-radius: 0; border: 0; background: center bottom/contain no-repeat transparent; box-shadow: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); transition: transform .2s; }
.nl .mg-rail { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); margin: 0; font-size: 10px; background: #1e6b4a; color: #fff; border: 1.5px solid #fff; }
.nl .mg-wants { width: 100%; margin: 0; padding: 5px 4px; border-radius: 14px; background: linear-gradient(#fffaf4, #f1e2d2); border: 2px solid #fff; box-shadow: 0 3px 0 rgba(74, 26, 16, .3); gap: 2px; }
.nl .mg-want { width: 40px; height: 40px; background: none; }
.nl .mg-line { display: none; }
.nl .mg-reward { position: absolute; right: 2px; bottom: 50px; color: #4a1a10; text-shadow: none; font-weight: 700; }
.nl .mg-reward .rc::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; background: url("art/ui/coin.png") center/contain no-repeat; }
.nl .mg-reward .rk { display: none; }
.nl .mg-card.ready .mg-wants { box-shadow: 0 0 0 3px #ffd76a, 0 0 16px #ffd76a, 0 3px 0 rgba(74, 26, 16, .3); }
.nl .mg-card.ready .mg-face { transform: translateY(-3px); }
.nl .mg-deliver { bottom: -16px; padding: 5px 18px; font-size: 15px; border-radius: 16px; border: 2.5px solid #fff; background: linear-gradient(#7cf06a, #2faa3c); color: #fff; -webkit-text-stroke: 3px #1b5e22; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 3px 0 #1b5e22; z-index: 3; }
.nl .mg-card.done .mg-face { animation: nlHop .5s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes nlHop { 40% { transform: translateY(-14px) scale(1.06); } }

/* workbench: wooden tiles inside a candy-cane frame */
.nl { --cell: linear-gradient(#f3d9a8, #e3bd80); --cell-alt: linear-gradient(#f0d29c, #ddb373); --cell-edge: rgba(122, 72, 26, .35); --lock-art: url("art/ui/lock.png"); }
.nl .mb-board::before { inset: -10px; border-radius: 20px; border: 0; background: repeating-linear-gradient(45deg, #c8102e 0 12px, #fff 12px 24px); box-shadow: 0 6px 0 rgba(74, 26, 16, .4), 0 12px 24px rgba(0, 0, 0, .3); }
.nl .mb-cell { border-radius: 10px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(122, 72, 26, .25), inset 0 0 0 1px var(--cell-edge); }
.nl .mb-cell.locked { background: #e6f4ff; box-shadow: none; }
.nl .mb-lock { background-size: 100%; border-radius: 10px; }
.nl .mb-item.dim { opacity: 0; }

.nl .mg-info { background: linear-gradient(#fffaf4, #f1e2d2); border: 2px solid #fff; color: #4a1a10; box-shadow: 0 3px 0 rgba(74, 26, 16, .3); }
.nl .mg-info-txt small { color: rgba(74, 26, 16, .7); }
.nl .mg-dock { height: 76px; }
.nl .mg-crypt i, .nl .mg-shop i { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background-color: #3fa04a; background-size: 70%; background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--ic); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), 0 4px 0 #1b5e22; }
.nl .mg-crypt { --ic: url("art/ui/chest.png"); }
.nl .mg-shop { --ic: url("art/ui/gift-btn.png"); }
.nl .mg-crypt span, .nl .mg-shop span, .nl-dock-btn span { font-size: 11px; font-weight: 700; color: #fff; -webkit-text-stroke: 3px #4a1a10; paint-order: stroke fill; }
.nl .mg-dockmid { gap: 10px; align-items: flex-end; }
.nl-dock-btn { position: relative; width: 74px; height: 70px; border: 0; padding: 0; background: none; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.nl-dock-btn i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 58px; height: 52px; border-radius: 16px; border: 3px solid #fff; background: center/cover no-repeat #c8102e; box-shadow: 0 4px 0 #7a0a1c; }
.nl-dock-btn.rush i { background-size: 70%; background-color: #7cc4f5; box-shadow: 0 4px 0 #1e5a9a; }
.nl-dock-btn.locked i { filter: grayscale(1) brightness(.75); }
.nl-dock-btn.alert::after { content: "!"; position: absolute; right: 4px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #c8102e; color: #fff; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; animation: mgBob .9s ease-in-out infinite; }

/* ---- the room ---- */
.nl-room-wrap { position: absolute; inset: 0; z-index: 500; background: #2d6fb8; }
.nl-room-top { position: absolute; left: 12px; top: calc(env(safe-area-inset-top) + 10px); z-index: 5; }
.nl-room-stars { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 4px; border-radius: 20px; background: linear-gradient(#fffaf4, #f1e2d2); border: 2px solid #fff; box-shadow: 0 3px 0 rgba(74, 26, 16, .35); }
.nl-room-stars i { width: 32px; height: 32px; background: center/contain no-repeat; }
.nl-room-stars b { color: #4a1a10; font-size: 18px; }
.nl-back { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 5; padding: 10px 26px; border-radius: 20px; border: 3px solid #fff; font: inherit; font-weight: 700; font-size: 17px; color: #fff; -webkit-text-stroke: 3px #1b5e22; paint-order: stroke fill; background: linear-gradient(#7cf06a, #2faa3c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 4px 0 #1b5e22; }
.nl-room-wrap .rv-title { color: #c8102e; }

/* ---- Sugar Rush ---- */
.mg-host[data-mg="match3"] { background: #7cc4f5; }
.m3-title { color: #fff; -webkit-text-stroke: 5px #7a0a1c; paint-order: stroke fill; font-size: 26px; }
.m3-top > div { background: linear-gradient(#c8102e, #9a0c22); border: 3px solid #fff; }
.m3-top small { color: #ffe39a; }
.m3-canvas { background: rgba(255, 255, 255, .35); border: 6px solid #fff; outline: 6px solid #c8102e; }

/* ---- Doris's notes on the quota board ---- */
.nl .qb { position: relative; }
.nl-doris { position: absolute; right: 56px; top: 40px; z-index: 30; padding: 6px 10px; max-width: 70%; background: #fff59a; color: #3a2a1a; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); transform: rotate(-4deg); font-family: "Fredoka", sans-serif; }
.nl-doris small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: .6; }
.nl-doris b { font-size: 14px; }
.nl .qb-basket::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -6px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #9cff7a calc(var(--fill, 0) * 100%), rgba(0, 0, 0, .35) 0); }

/* ---- admin ---- */
.nl-admin { position: fixed; right: 8px; bottom: 90px; z-index: 990; padding: 6px 10px; border-radius: 10px; border: 2px solid #fff; background: #222; color: #ffe39a; font: 700 12px "Fredoka", sans-serif; opacity: .85; }
.ad { text-align: left; max-height: 60vh; overflow: auto; }
.ad h4 { margin: 10px 0 4px; font-size: 13px; }
.ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ad-grid button { padding: 8px 6px; border-radius: 10px; border: 2px solid #fff; background: #1e6b4a; color: #fff; font: 600 13px "Fredoka", sans-serif; }
.ad-grid button.danger { background: #c8102e; }
.ad-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 3px 0; font-size: 13px; }
.ad-row input { width: 46%; padding: 4px 6px; border-radius: 8px; border: 1px solid #aaa; font: inherit; }
.ad-json { width: 100%; height: 140px; font: 11px ui-monospace, monospace; border-radius: 8px; }

/* ---- desktop: the 9:16 phone game centred on a North Pole backdrop (no separate desktop layout) ---- */
@media (min-aspect-ratio: 3/4) {
  .app { background: #1e5a9a url("art/panels/village.jpg") center/cover no-repeat; }
  .app::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(6px) brightness(.85); -webkit-backdrop-filter: blur(6px) brightness(.85); }
  .app-col { width: min(100vw, calc(100vh * 9 / 16)); max-width: none; border-radius: 22px; box-shadow: 0 0 0 6px #fff, 0 0 0 12px #c8102e, 0 30px 80px rgba(0, 0, 0, .5); margin: auto 0; height: calc(100vh - 32px); align-self: center; }
}

/* sheets sit on cream panels: dark ink, no outline (the white-on-cream body text was unreadable) */
.ui-sheet p, .ui-sheet .ui-sheet-body { color: #4a2a1a; text-shadow: none; }
.ui-sheet .dim { color: #8a6a52; }

/* the Jolly-o-Meter: a candy-cane thermometer at the end of the Quota Board */
.nl .nl-jolly { display: flex; align-items: center; gap: 5px; flex: none; padding-left: 4px; }
.nl .nl-jolly-tube { position: relative; width: 14px; height: 46px; border-radius: 8px; border: 2px solid #fff; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 5px, rgba(0,0,0,.18) 5px 10px), #4a0f1c; box-shadow: 0 2px 0 rgba(74,26,16,.4); }
.nl .nl-jolly-tube i { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; transition: height .9s cubic-bezier(.2,.8,.3,1.2);
  background: repeating-linear-gradient(-45deg, #fff 0 5px, #e8333a 5px 10px); }
.nl .nl-jolly-txt { display: flex; flex-direction: column; line-height: 1.05; max-width: 62px; }
.nl .nl-jolly-txt small { font-size: 9px; color: #ffe39a; text-transform: uppercase; letter-spacing: .4px; }
.nl .nl-jolly-txt b { font-size: 12px; color: #fff7f2; }
.nl .nl-jolly[data-tier="Elf-uphoric"] .nl-jolly-tube { box-shadow: 0 0 12px #ffe39a; }

/* admin route line */
.ad-route { font-size: 13px; color: #4a2a1a; text-align: left; margin: 4px 0 8px; line-height: 1.35; }