/* Campaign mode: the map page, the level sheet, the shop, items, and boss fights (see js/campaign.js, js/bosses.js) */

/* ---------------- the home screen card ---------------- */
.home-grid > .campaign-card { grid-column: 1 / -1; }
.home-campaign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hc-bar { flex: 1 1 220px; height: 14px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); overflow: hidden; }
.hc-bar i { display: block; height: 100%; width: calc(var(--k) * 100%); min-width: 6px; background: linear-gradient(90deg, #ffd23f, var(--accent)); border-radius: inherit; }
.hc-line { margin: 0; font-weight: 800; }

/* the campaign screens have no world toggle, and levels have no difficulty buttons */
.in-campaign #world-toggle { display: none; }
.in-level .difficulty { display: none; }
#world-bg { transition: opacity .38s ease; }

/* ======================= the map: its own page ======================= */
.in-map .top-bar { display: none; }
.in-map main { max-width: none; padding: 0 0 40px; }
.cm-page { position: relative; }
.cmv-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, calc(50% - 560px));
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--c, var(--accent)); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); transition: border-color .4s; }
.cmv-exit { flex-shrink: 0; text-decoration: none; }
.cmv-where { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.cmv-where small { color: var(--c, var(--accent)); font-weight: 900; letter-spacing: .16em; font-size: .7rem; }
.cmv-where b { font: 700 calc(1.45rem * var(--head-scale, 1)) var(--font-head, var(--font-body)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmv-where span { color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmv-stat { flex-shrink: 0; font-weight: 900; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); }
.cmv-stat.coins { background: #fff3c4; color: #7a5600; border-color: #e9c64a; }
@media (max-width: 640px) { .cmv-stat:not(.coins) { display: none; } .cmv-where span { display: none; } .cmv-bar { gap: 8px; } }

.cm-map { position: relative; width: min(860px, 100%); margin: 18px auto 0; border-radius: 26px; overflow: hidden; box-shadow: 0 14px 50px rgba(0, 0, 0, .28); border: 4px solid var(--surface-solid); background: var(--surface-2); min-height: 60vh; }
.cm-map > .status { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; }
@media (max-width: 880px) { .cm-map { border-radius: 0; border-width: 0; margin-top: 0; } }
.cm-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.cm-svg-dyn { position: absolute; top: 0; left: 0; will-change: transform; }      /* the moving parts, on their own layer */
.cm-road, .cm-road-shadow, .cm-road-dash, .cm-road-done { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cm-road { stroke-width: 30; }
.cm-road-shadow { stroke: rgba(0, 0, 0, .16); stroke-width: 30; }
.cm-road-dash { stroke: rgba(255, 255, 255, .65); stroke-width: 4; stroke-dasharray: 2 18; }
.cm-road-done { stroke: #ffd23f; stroke-width: 9; stroke-dasharray: 18 12; filter: drop-shadow(0 0 5px rgba(255, 210, 63, .9)); animation: cm-march 1.2s linear infinite; }
@keyframes cm-march { to { stroke-dashoffset: -30; } }
.cm-sign-kick { fill: #fff; font: 900 20px var(--font-body); letter-spacing: .3em; text-anchor: middle; opacity: .9; }
.cm-sign-name { fill: #fff; font: 800 40px var(--font-body); text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .3); stroke-width: 5px; }
.cm-start-text { font: 900 18px var(--font-body); text-anchor: middle; fill: #2b2233; }
.cm-finish-text { font-size: 26px; text-anchor: middle; }
.cm-node { cursor: pointer; outline: none; }
.cm-node-shadow { fill: rgba(0, 0, 0, .22); }
.cm-node-base { stroke: #fff; stroke-width: 6; transform-box: fill-box; transform-origin: center; transition: stroke .2s; }
.cm-node.locked { cursor: default; }
.cm-node.locked .cm-node-base { fill: #9aa0ab; stroke: #d7dae0; }
.cm-node:hover .cm-node-base, .cm-node:focus-visible .cm-node-base { stroke: #ffe680; }
.cm-node.sel .cm-node-base { stroke: #ffd23f; stroke-width: 10; }
.cm-node.cm-bump .cm-node-base { animation: cm-bump .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cm-bump { 40% { transform: scale(1.18); } }
.cm-node-num { fill: #fff; font: 900 32px var(--font-body); text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 5px; pointer-events: none; }
.cm-node.locked .cm-node-num { font-size: 24px; stroke: none; }
.cm-pulse { fill: none; stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: cm-pulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes cm-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.cm-star { fill: rgba(0, 0, 0, .28); stroke: #fff; stroke-width: 1.5; }
.cm-star.on { fill: #ffd23f; stroke: #b88a00; }
.cm-boss-tag { fill: #fff; font: 900 18px var(--font-body); letter-spacing: .2em; text-anchor: middle; paint-order: stroke; stroke: #c0283a; stroke-width: 6px; }
.cm-dim { opacity: .45; filter: grayscale(1); }
.cm-fog rect { fill: rgba(14, 14, 26, .55); }
.cm-fog-lock { font-size: 80px; text-anchor: middle; }
.cm-fog-text { fill: #fff; font: 800 32px var(--font-body); text-anchor: middle; }
.cm-player { pointer-events: none; }
.cm-bob { animation: cm-bob 1.1s ease-in-out infinite alternate; }
@keyframes cm-bob { to { transform: translateY(-8px); } }
.cm-prize-badge circle { fill: #fff; stroke: #2b2233; stroke-width: 2.5; }
.cm-prize-badge text { font-size: 18px; text-anchor: middle; dominant-baseline: central; }
.cm-prize-badge.todo { opacity: .8; }
.cm-prize-badge.todo circle { stroke-dasharray: 4 3; }

/* the rail of worlds down the right side */
.cm-rail { position: fixed; right: max(8px, calc(50% - 540px)); top: 50%; z-index: 30; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface-solid) 80%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.cm-dot { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--surface-solid); cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: transform .15s; }
.cm-dot:hover { transform: scale(1.12); }
.cm-dot.done { border-color: var(--c); background: color-mix(in srgb, var(--c) 25%, var(--surface-solid)); }
.cm-dot.on { border-color: var(--c); box-shadow: 0 0 0 3px var(--c); transform: scale(1.15); }
.cm-dot.locked { background: var(--surface-2); opacity: .6; }
@media (max-width: 960px) { .cm-rail { right: 4px; gap: 2px; } .cm-dot { width: 24px; height: 24px; font-size: 11px; } }
/* the rail never hides (it used to vanish under 640px of height): its 15 dots shrink to fit the window, and it scrolls as a last resort */
.cm-rail { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.cm-rail::-webkit-scrollbar { display: none; }
.cm-rail .cm-dot { --dot: clamp(16px, calc((100vh - 150px) / 15 - 4px), 30px); width: var(--dot); height: var(--dot); flex: 0 0 auto; font-size: calc(var(--dot) * .47); }
@media (max-height: 560px) { .cm-rail { gap: 2px; padding: 4px; } }

/* the level sheet, from the bottom of the screen */
.cm-detail { position: fixed; left: 50%; bottom: 14px; z-index: 45; width: min(720px, calc(100vw - 24px)); display: flex; gap: 16px; padding: 16px 18px; background: var(--surface-solid);
    border: 3px solid var(--c, var(--line)); border-radius: 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, .35); transform: translate(-50%, 130%); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); }
.cm-detail.in { transform: translate(-50%, 0); }
.cm-sheet-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: 900 1.3rem/1 var(--font-body); cursor: pointer; }
.cm-detail-art .boss-art { width: 140px; height: 140px; display: block; }
.cm-detail-body { flex: 1; min-width: 0; padding-right: 26px; }
.cm-detail-kicker { display: block; color: var(--c, var(--accent)); font-weight: 900; letter-spacing: .12em; font-size: .72rem; }
.cm-detail h2 { margin: 2px 0 6px; font: 700 calc(1.6rem * var(--head-scale, 1)) var(--font-head, var(--font-body)); }
.cm-taunt { margin: 0 0 6px; font-style: italic; font-weight: 700; }
.cm-rules { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
.cm-best { margin: 0 0 8px; font-weight: 800; color: #b07f00; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cm-prize { margin: 0 0 8px; font-weight: 800; font-size: .9rem; padding: 5px 10px; border-radius: var(--radius-sm); border: 1.5px dashed var(--c, var(--accent)); display: inline-block; }
.cm-prize.got { border-style: solid; background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); }
@media (max-width: 560px) { .cm-detail { flex-direction: column; align-items: center; text-align: center; } .cm-detail-body { padding-right: 0; } .cm-actions { justify-content: center; } .cm-detail-art .boss-art { width: 100px; height: 100px; } }

/* ======================= boss art: idle animations ======================= */
.boss-art { overflow: visible; }
.boss-art .bz-float { animation: bz-float 2.6s ease-in-out infinite alternate; }
@keyframes bz-float { to { transform: translateY(-6px); } }
.boss-art .bz-eyes { transform-box: fill-box; transform-origin: center; animation: bz-blink 5.5s infinite; }
@keyframes bz-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.boss-art .bz-sway { transform-box: view-box; animation: bz-sway 2.3s ease-in-out infinite alternate; }
@keyframes bz-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.boss-art .bz-bit { animation: bz-bit 3.2s ease-in-out infinite alternate; }
@keyframes bz-bit { from { transform: translateY(5px); opacity: .7; } to { transform: translateY(-7px); opacity: 1; } }
.boss-art .bz-glow { animation: bz-glow 1.3s ease-in-out infinite alternate; }
@keyframes bz-glow { from { opacity: .72; } to { opacity: 1; } }
.boss-art .bz-spin { transform-box: fill-box; transform-origin: center; animation: bz-spin 7s linear infinite; }
@keyframes bz-spin { to { transform: rotate(360deg); } }
.boss-art .bz-glitch { animation: bz-glitch 1.7s steps(1) infinite; }
@keyframes bz-glitch { 0% { transform: translateX(0); } 20% { transform: translateX(-14px); } 24% { transform: translateX(6px); } 60% { transform: translateX(0); } 80% { transform: translateX(10px); } 84% { transform: translateX(-4px); } }
.boss-art .bz-rain path { stroke-dasharray: 14 10; animation: bz-rain .45s linear infinite; }
@keyframes bz-rain { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .boss-art * { animation: none !important; } }
[data-motion="still"] .boss-art * { animation: none !important; }

/* ======================= boss fights ======================= */
/* the arena: a full-screen backdrop behind everything in a boss fight */
.boss-arena { position: fixed; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none; }
.in-boss .boss-arena { display: block; }
.in-boss #world-bg { opacity: 0 !important; }
.ba-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--a1) 80%, #fff 20%), var(--a1) 35%, var(--a2) 100%); }
.ba-rays { position: absolute; left: 70%; top: 34%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%); opacity: .14;
    background: repeating-conic-gradient(from 0deg, #fff 0deg 7deg, transparent 7deg 20deg); animation: ba-turn 60s linear infinite; }
@keyframes ba-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ba-giant { position: absolute; right: 2vw; top: 3vh; width: min(70vh, 56vw); transform-origin: 50% 35%; opacity: .2; filter: blur(1.5px) saturate(.8); animation: ba-breathe 5s ease-in-out infinite alternate; }
.ba-giant .boss-art { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes ba-breathe { to { transform: scale(1.05) translateY(10px); } }
/* the scenery strip draws past its own top edge (it used to be sliced flat: the Big Top's Ferris wheel on a wide
   screen), and on narrow screens it's shorter so more of it fits across. The giant boss above sits fully on screen for the same reason. */
.ba-horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: min(42vh, 50vw); overflow: visible; }
.ba-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-tint { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(255, 30, 30, .45)); opacity: 0; transition: opacity .8s; }
.boss-arena.enraged .ba-tint { opacity: 1; animation: ba-pulse 1.1s ease-in-out infinite alternate; }
.boss-arena.enraged .ba-rays { animation-duration: 12s; opacity: .22; }
@keyframes ba-pulse { from { opacity: .55; } to { opacity: 1; } }
.ba-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45)); }
.in-boss main { max-width: 1500px; }
.in-boss .game-head h1, .in-boss .game-head .subtitle { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

/* your board, your clues and the boss, side by side */
.puzzle.boss-mode { display: grid; grid-template-columns: min(430px, 92vw) minmax(220px, 1fr) minmax(310px, 400px); grid-template-areas: "board clues boss" "kb kb kb"; gap: 18px; align-items: start; }
.puzzle.boss-mode .board-area { grid-area: board; width: auto; }
.puzzle.boss-mode .clues { grid-area: clues; flex-direction: column; gap: 12px; max-width: none; }
.puzzle.boss-mode .keyboard { grid-area: kb; }
.boss-panel { grid-area: boss; }
@media (max-width: 1240px) {
    .puzzle.boss-mode { grid-template-columns: min(430px, 92vw) minmax(310px, 1fr); grid-template-areas: "board boss" "clues clues" "kb kb"; }
    .puzzle.boss-mode .clues { flex-direction: row; margin-top: 0; }
}
@media (max-width: 780px) {
    /* on a phone your board comes first (the boss panel, with your abilities, right under it) */
    .puzzle.boss-mode { grid-template-columns: 1fr; grid-template-areas: "board" "boss" "clues" "kb"; justify-items: center; }
    .boss-panel { margin-top: 4px; }
    .bp-stage { height: 124px; }
    .bp-portrait { width: 120px; height: 120px; margin-left: -60px; }
    .puzzle.boss-mode .clues { flex-direction: column; width: min(440px, 92vw); }
    .boss-panel { width: min(440px, 92vw); }
}

.boss-panel { position: relative; margin-top: 18px; padding: 12px 14px 14px; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); color: var(--ink); border: 3px solid var(--boss, var(--accent)); border-radius: 22px;
    box-shadow: var(--shadow), 0 0 0 5px color-mix(in srgb, var(--boss, #000) 22%, transparent), 0 0 40px color-mix(in srgb, var(--boss, #000) 40%, transparent); font-family: var(--font-body); }
.boss-panel.enraged { animation: bp-rage 1s ease-in-out infinite alternate; }
@keyframes bp-rage { to { box-shadow: var(--shadow), 0 0 0 6px rgba(255, 60, 60, .6), 0 0 60px rgba(255, 40, 40, .7); } }
.bp-stage { position: relative; height: 190px; margin: -6px -6px 4px; border-radius: 16px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--boss) 45%, #fff), color-mix(in srgb, var(--boss) 70%, #1a1026) 75%); }
.bp-stage::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 70%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, .3); filter: blur(2px); }
.bp-stage::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255, 255, 255, .12) 0deg 8deg, transparent 8deg 22deg); }
.bp-portrait { position: absolute; left: 50%; bottom: 4px; width: 186px; height: 186px; margin-left: -93px; z-index: 1; }
.bp-portrait .boss-art { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.bp-portrait.hit { animation: bp-hit .5s; }
.bp-portrait.attack { animation: bp-attack .6s; }
.bp-portrait.buff { animation: bp-buff .5s; }
.bp-portrait.charge { animation: bp-charge 1.2s ease-in-out 2; }
@keyframes bp-hit { 15% { transform: translateX(-12px) rotate(-8deg); filter: brightness(2.4); } 40% { transform: translateX(10px) rotate(6deg); } 70% { transform: translateX(-4px); } }
@keyframes bp-attack { 30% { transform: scale(1.3) translateY(-10px); } 60% { transform: scale(1.08); } }
@keyframes bp-buff { 40% { filter: drop-shadow(0 0 14px #ffd23f); transform: scale(1.06); } }
@keyframes bp-charge { 50% { transform: scale(1.1); filter: drop-shadow(0 0 16px #ff4040) brightness(1.2); } }
.boss-panel.ko .bp-portrait { transform: rotate(-24deg) translateY(16px); filter: grayscale(1); opacity: .55; transition: all .6s; }
.boss-panel.ko .bp-portrait .boss-art * { animation: none !important; }
.bp-speech { position: absolute; left: 8px; top: 8px; z-index: 2; max-width: 58%; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: #fff; color: #2b2233; font: 800 .82rem/1.25 var(--font-body); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.bp-speech.pop { animation: pop-in .3s; }
.bp-windup { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2; height: 24px; border-radius: 999px; background: rgba(0, 0, 0, .55); overflow: hidden; border: 2px solid #ff5c6c; animation: bp-blink .4s infinite alternate; }
.bp-windup i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff5c6c, #ffb21e); }
.bp-windup span { position: relative; display: block; text-align: center; font: 900 .78rem/20px var(--font-body); color: #fff; text-shadow: 0 1px 3px #000; letter-spacing: .06em; }
.bp-who { text-align: center; }
.bp-who small { display: block; color: var(--boss); font-weight: 900; letter-spacing: .14em; font-size: .68rem; }
.bp-who b { display: block; font: 700 calc(1.35rem * var(--head-scale, 1)) / 1.15 var(--font-head, var(--font-body)); }
.bp-status { font-size: .82rem; font-weight: 800; color: var(--muted); min-height: 1.2em; }
.bp-bar { position: relative; height: 22px; margin-top: 6px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); overflow: hidden; }
.bp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .35s cubic-bezier(.3, 1.2, .5, 1); }
.bp-bar span { position: relative; display: block; padding: 0 10px; font: 800 .78rem/19px var(--font-body); color: var(--ink); text-shadow: 0 0 3px var(--surface-solid), 0 0 3px var(--surface-solid); }
@keyframes bp-blink { to { opacity: .55; } }
.bp-race i { background: var(--boss); opacity: .7; }
.bp-abilities { margin-top: 10px; }
.bp-abilities small { display: block; font-weight: 900; letter-spacing: .12em; font-size: .68rem; color: var(--muted); margin-bottom: 4px; }
.bp-ab-row { display: grid; grid-template-columns: repeat(3, minmax(0, 132px)); justify-content: center; gap: 8px; }   /* the 3 abilities, centred */
.bp-ab, .bp-super { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface-solid); color: var(--ink); font-family: var(--font-body); cursor: pointer; transition: transform .12s; overflow: hidden; }
.bp-ab:hover:not(:disabled), .bp-super:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 12%, var(--surface-solid)); }
.bp-ab:disabled { border-color: var(--line); background: var(--surface-2); color: var(--muted); cursor: default; }
.bp-ab-icon { position: relative; font-size: 1.45rem; }
.bp-ab b, .bp-super b { position: relative; font-size: .76rem; line-height: 1.1; text-align: center; }
.bp-ab small, .bp-super small { position: relative; font-size: .64rem; color: var(--muted); }
.bp-ab-none { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted); }
.bp-super { border-color: #ffb21e; cursor: default; }
.bp-super-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #ffb21e, #ffe066); opacity: .55; transition: height .4s; }
.bp-super.ready { cursor: pointer; border-color: #ff5c00; animation: bp-ready .7s ease-in-out infinite alternate; }
.bp-super.ready .bp-super-fill { opacity: .9; }
@keyframes bp-ready { to { box-shadow: 0 0 0 4px rgba(255, 178, 30, .6), 0 0 22px #ffb21e; transform: scale(1.05); } }
.bp-board-wrap { position: relative; margin: 10px auto 0; width: min(210px, 100%); }
.bp-board { display: grid; grid-template-columns: repeat(var(--size, 5), 1fr); gap: 2px; padding: 3px; background: #2b2233; border-radius: 8px; }
.bp-cell { position: relative; aspect-ratio: 1; background: #fff; border-radius: 3px; display: grid; place-items: center; }
.bp-cell.block { background: #2b2233; }
.bp-cell.cur { background: color-mix(in srgb, var(--boss) 30%, #fff); }
.bp-ltr { font: 800 calc(130px / var(--size, 5)) / 1 var(--font-body); color: #2b2233; }
.bp-num { position: absolute; top: 1px; left: 2px; font-size: 7px; font-weight: 800; color: #6d6a73; }
.bp-cell.pop { animation: bp-pop .3s; }
.bp-cell.shake { animation: shake .45s; }
@keyframes bp-pop { 40% { transform: scale(1.25); background: var(--boss); } }
.bp-fog { position: absolute; inset: -4px; border-radius: 10px; background: radial-gradient(circle at 30% 40%, rgba(60, 50, 80, .95), rgba(30, 25, 45, .92)); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bp-fog.on { opacity: 1; }
.bp-fog.on::after { content: "🙈"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; }
.boss-panel.frozen .bp-board { box-shadow: 0 0 0 4px #9fd8ff, 0 0 18px #9fd8ff; filter: saturate(.5) brightness(1.08); }
.boss-panel.frozen .bp-portrait .boss-art { filter: drop-shadow(0 0 12px #9fd8ff) saturate(.5) brightness(1.15); }
.boss-panel.frozen .bp-portrait .boss-art * { animation-play-state: paused !important; }
.bp-loading { margin: 8px 0; text-align: center; font-weight: 700; color: var(--muted); }
.bp-clues { margin-top: 10px; font-size: .8rem; }
.bp-clues summary { cursor: pointer; font-weight: 800; color: var(--muted); }
.bp-clue-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; max-height: 200px; overflow: auto; }
.bp-clues h3 { margin: 0 0 4px; font-size: .85rem; }
.bp-clues ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.bp-clues li { display: flex; gap: 5px; padding: 2px 4px; border-radius: 5px; }
.bp-clues li b { min-width: 14px; }
.bp-clues li.active { background: color-mix(in srgb, var(--boss) 25%, transparent); font-weight: 800; }
.bp-clues li.done span { text-decoration: line-through 2px var(--boss); opacity: .6; }

/* what the boss is doing to you, and its wind-up warning over your board */
.me-status { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.me-status:empty { display: none; }
.ms-chip { padding: 3px 10px; border-radius: 999px; background: #ffe1e4; color: #8a1424; border: 1.5px solid #ff8a96; font: 800 .8rem var(--font-body); animation: pop-in .3s; }
.ms-chip.good { background: #dff7e4; color: #155a2a; border-color: #6cd08a; }
.ms-chip.combo { background: #fff1c4; color: #7a4a00; border-color: #ffb21e; }
.board-wrap { position: relative; }
/* the attack warning covers the timer row (your time is in the boss panel too), never the clue bar or the board */
.me-warn { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; padding: 3px 12px 6px; border-radius: 14px; background: #2b2233; color: #fff; text-align: center; overflow: hidden;
    border: 2px solid #ff5c6c; box-shadow: 0 0 0 3px rgba(255, 92, 108, .3), 0 6px 18px rgba(0, 0, 0, .3); animation: me-warn-shake .35s ease-in-out infinite alternate; pointer-events: none; }
.me-warn b { display: block; font: 900 .95rem/1.2 var(--font-body); color: #ffd23f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-warn b em { font-style: normal; color: #fff; }
.me-warn > span { display: block; font: 700 .72rem/1.25 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-warn i { position: absolute; left: 0; bottom: 0; height: 4px; background: #ff5c6c; }
@keyframes me-warn-shake { from { transform: rotate(-.4deg); } to { transform: rotate(.4deg); } }
.board-area.fx-blind .board-wrap, .clues.fx-blind { filter: blur(7px); transition: filter .3s; }
#board.fx-smudge .ltr { color: transparent !important; text-shadow: 0 0 9px rgba(80, 80, 90, .6); }
#board.fx-frozen { box-shadow: 0 0 0 5px #9fd8ff, 0 0 26px #9fd8ff; filter: saturate(.55) brightness(1.06); }
.clue-bar.fx-scramble { filter: blur(3px); }

/* shots, damage numbers and combos */
.bh-shot { position: fixed; left: -17px; top: -17px; z-index: 9000; width: 34px; height: 34px; display: grid; place-items: center; font-size: 28px; pointer-events: none; filter: drop-shadow(0 0 10px #fff); }
.bh-orb { position: fixed; left: -12px; top: -12px; z-index: 9000; width: 24px; height: 24px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff 20%, #ffe066 45%, rgba(255, 140, 0, 0) 72%); box-shadow: 0 0 18px 6px rgba(255, 210, 63, .8); }
.bh-orb.big { left: -18px; top: -18px; width: 36px; height: 36px; box-shadow: 0 0 28px 10px rgba(255, 120, 60, .9); }
.bh-dmg { position: fixed; z-index: 9001; transform: translate(-50%, -50%); pointer-events: none; font: 900 2rem/1 var(--font-body); color: #fff; -webkit-text-stroke: 2px #2b2233; text-shadow: 0 3px 0 #2b2233; animation: bh-dmg 1.05s ease-out forwards; }
.bh-dmg.crit { font-size: 2.8rem; color: #ffd23f; }
@keyframes bh-dmg { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -90%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
.hud-row { position: relative; }
.bh-combo { position: absolute; right: 4px; top: 50%; margin-top: -32px; z-index: 7; pointer-events: none; text-align: center; transform: rotate(8deg); animation: bh-combo 1.15s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.bh-combo small { display: block; font: 900 .8rem var(--font-body); letter-spacing: .25em; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.bh-combo b { display: block; font: 900 2.6rem/1 var(--font-body); color: #ffb21e; -webkit-text-stroke: 2px #2b2233; text-shadow: 0 4px 0 #2b2233; }
@keyframes bh-combo { 0% { transform: rotate(8deg) scale(.3); opacity: 0; } 25% { transform: rotate(8deg) scale(1.2); opacity: 1; } 75% { opacity: 1; } 100% { transform: rotate(8deg) scale(1) translateY(-30px); opacity: 0; } }
.toast.bad .toast-body small { color: #d0283a; }

/* ---- full-screen moments (js/bosses.js) ---- */
.bfx-intro, .bfx-ko { position: fixed; inset: 0; z-index: 2; overflow: hidden; display: grid; place-items: center; }
.bi-bg, .bk-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, var(--a1), var(--a2)); opacity: 0; transition: opacity .35s; }
.bi-bg::after, .bk-bg::after { content: ""; position: absolute; left: 60%; top: 45%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .14) 0deg 6deg, transparent 6deg 16deg); animation: ba-turn 18s linear infinite; }
.bfx-intro.in .bi-bg, .bfx-ko.in .bk-bg { opacity: 1; }
.bi-band { position: absolute; left: -10%; right: -10%; top: 58%; height: 30vh; background: var(--boss); transform: rotate(-6deg) scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .9, .3, 1); box-shadow: 0 0 0 10px #2b2233, 0 0 60px rgba(0, 0, 0, .5); }
.bfx-intro.in .bi-band { transform: rotate(-6deg) scaleX(1); }
.bi-boss { position: absolute; right: 4vw; bottom: 6vh; width: min(72vh, 62vw); transform: translateX(80vw) rotate(10deg); transition: transform .6s cubic-bezier(.2, 1.2, .4, 1); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.bi-boss .boss-art { width: 100%; height: auto; display: block; }
.bfx-intro.in .bi-boss { transform: none; }
.bi-text { position: absolute; left: 5vw; top: 54%; max-width: 50vw; color: #fff; transform: translateX(-90vw); transition: transform .5s .15s cubic-bezier(.2, 1.3, .4, 1); }
.bi-text small { display: block; font: 900 clamp(.9rem, 2vw, 1.3rem) var(--font-body); letter-spacing: .4em; color: #ffd23f; text-shadow: 0 2px 0 #2b2233; }
.bi-text b { display: block; font: 900 clamp(2.4rem, 7vw, 5.6rem)/1 var(--font-head, var(--font-body)); -webkit-text-stroke: 3px #2b2233; text-shadow: 0 6px 0 #2b2233; }
.bi-text em { display: block; margin-top: 8px; font: 800 clamp(1rem, 2.2vw, 1.5rem) var(--font-body); font-style: italic; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .4s .5s; }
.bfx-intro.slam .bi-text { transform: none; }
.bfx-intro.slam .bi-text em { opacity: 1; }
.bi-fight { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(5rem, 18vw, 13rem)/1 var(--font-body); color: #fff; -webkit-text-stroke: 5px #2b2233; text-shadow: 0 10px 0 #2b2233; opacity: 0; transform: scale(2.5); }
.bfx-intro.fight .bi-fight { opacity: 1; transform: scale(1); transition: all .3s cubic-bezier(.2, 1.6, .4, 1); }
.bfx-intro.fight .bi-text { opacity: 0; transition: opacity .2s; }
.bfx-intro.out, .bfx-ko.out { opacity: 0; transition: opacity .3s; }
.bk-boss, .bk-shards { position: absolute; left: 50%; top: 45%; width: min(70vh, 80vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); }
.bk-boss { transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.bfx-ko.in .bk-boss { transform: translate(-50%, -50%) scale(1); animation: bk-shake .12s .6s 8; }
@keyframes bk-shake { 50% { margin-left: 8px; } }
.bk-boss .boss-art, .bk-piece .boss-art { width: 100%; height: 100%; display: block; }
.bk-cracks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; filter: drop-shadow(0 0 6px #fff); }
.bfx-ko.crack .bk-cracks { opacity: 1; transition: opacity .15s; }
.bfx-ko.crack .bk-boss .boss-art { filter: brightness(1.4) saturate(.6); }
.bk-shards { transform: translate(-50%, -50%); visibility: hidden; }
.bk-piece { position: absolute; inset: 0; }
.bfx-ko.shatter .bk-boss { visibility: hidden; }
.bfx-ko.shatter .bk-shards { visibility: visible; }
.bfx-ko.shatter .bk-piece { animation: bk-fly 1.4s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes bk-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.7); opacity: 0; } }
.bk-text { position: absolute; left: 50%; top: 76%; transform: translate(-50%, -50%) scale(0); text-align: center; color: #fff; transition: transform .45s cubic-bezier(.2, 1.7, .4, 1); }
.bfx-ko.shatter .bk-text { transform: translate(-50%, -50%) scale(1); }
.bk-text small { display: block; font: 900 clamp(.9rem, 2vw, 1.3rem) var(--font-body); letter-spacing: .3em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bk-text b { display: block; font: 900 clamp(3rem, 10vw, 6.5rem)/1 var(--font-head, var(--font-body)); color: #ffd23f; -webkit-text-stroke: 3px #2b2233; text-shadow: 0 7px 0 #2b2233; }

/* ======================= the shop: one page for everything ======================= */
.shop-page { align-items: stretch !important; padding: 0 !important; }
.shop-card { position: relative; width: min(1060px, 100vw); height: min(92vh, 100%); margin: auto; display: flex; flex-direction: column; background: var(--surface-solid); color: var(--ink);
    border-radius: 24px; box-shadow: 0 20px 70px rgba(0, 0, 0, .45); overflow: hidden; transform: translateY(30px) scale(.97); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); }
.shop-page.in .shop-card { transform: none; }
@media (max-width: 700px) { .shop-card { height: 100%; border-radius: 0; } }
.shop-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface-solid)), var(--surface-solid)); }
.shop-title { flex: 1; }
.shop-title small { display: block; font-weight: 900; letter-spacing: .2em; font-size: .72rem; color: var(--accent); }
.shop-title h2 { margin: 0; font: 700 calc(2rem * var(--head-scale, 1)) / 1.1 var(--font-head, var(--font-body)); }
.shop-coins { font-weight: 900; font-size: 1.2rem; padding: 5px 14px; border-radius: 999px; background: #fff3c4; color: #7a5600; border: 1.5px solid #e9c64a; }
.shop-tabs { display: flex; gap: 6px; padding: 0 20px 10px; border-bottom: 1.5px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); }
.shop-tab { padding: 8px 16px; border-radius: 12px 12px 0 0; border: 1.5px solid transparent; background: none; color: var(--muted); font: 800 1rem var(--font-body); cursor: pointer; margin-bottom: -11px; }
.shop-tab.on { background: var(--surface-solid); color: var(--ink); border-color: var(--line); border-bottom-color: var(--surface-solid); }
.shop-scroll { flex: 1; overflow: auto; padding: 14px 20px 26px; }
.shop-note { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.shop-loadout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); margin-bottom: 6px; }
.shop-eq { padding: 3px 10px; border-radius: 999px; background: var(--surface-solid); border: 1.5px solid var(--accent); font-weight: 800; font-size: .85rem; }
.shop-eq.none { border-style: dashed; color: var(--muted); font-weight: 600; }
.shop-world { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 3px solid var(--c); font-size: 1.15rem; }
.shop-world small { color: var(--muted); font-size: .8rem; font-weight: 700; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shop-item-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface-solid); box-shadow: var(--shadow); }
.shop-item-card.ability { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.shop-item-card.on { border-color: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 35%, transparent), var(--shadow); }
.shop-item-card.locked { opacity: .65; }
.sic-icon { font-size: 2.1rem; line-height: 1; }
.shop-item-card b { font-size: 1.02rem; }
.shop-item-card p { margin: 0; font-size: .86rem; }
.sic-effect { color: var(--muted); font-weight: 700; }
.sic-unlock { color: var(--muted); font-weight: 700; font-size: .74rem; }
.sic-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.shop-owned { font-weight: 900; margin-right: auto; }

/* the item bar under the board in campaign levels */
.cm-items { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border-radius: 14px; background: var(--surface-solid); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.cm-items[hidden] { display: none; }
.cm-item { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: 800 .85rem var(--font-body); cursor: pointer; transition: transform .12s; }
.cm-item:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.cm-item:disabled { opacity: .45; cursor: default; }
.cm-item-icon { font-size: 1.15rem; }
.cm-item.shop { margin-left: auto; font-size: 1.1rem; }
/* the items themselves: always one row, the buttons share it (they shrink on a narrow screen instead of wrapping) */
.cm-item-row { display: flex; align-items: center; gap: 6px; flex: 1 0 100%; min-width: 0; flex-wrap: nowrap; }
.cm-item-row .cm-item { flex: 1 1 0; min-width: 0; justify-content: center; padding: 5px 4px; }
.cm-item-row .helper-label { flex: none; }
@media (max-width: 480px) { .cm-item-row { gap: 4px; } .cm-item-row .cm-item-icon { font-size: 1rem; } .cm-item-row .cm-item { font-size: .78rem; } }

/* ======================= the results card ======================= */
.res-stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.res-star { font-size: 3rem; line-height: 1; color: color-mix(in srgb, var(--ink) 18%, transparent); transition: color .2s; }
.res-star.on { color: #ffc61a; text-shadow: 0 0 14px rgba(255, 198, 26, .7); animation: res-star-pop .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes res-star-pop { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } }
.res-earned { list-style: none; margin: 4px auto 6px; padding: 0; display: inline-grid; gap: 2px; text-align: left; font-weight: 700; color: var(--muted); }
.res-earned li.ok { color: var(--ink); }
.res-coins { margin: 4px 0; font-weight: 900; color: #a77700; }
.res-unlock { margin: 6px 0; font-weight: 900; color: var(--accent); }
.res-ability { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 10px auto 4px; padding: 8px 14px; border-radius: 14px; width: fit-content;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-solid)); border: 2px solid var(--accent); animation: res-ability-in .6s 1.4s both cubic-bezier(.3, 1.6, .5, 1); }
.res-ability .ra-icon { font-size: 2rem; }
.res-ability small { display: block; font-size: .7rem; letter-spacing: .12em; color: var(--muted); font-weight: 900; }
@keyframes res-ability-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.lose-art { display: flex; justify-content: center; }
.lose-art .boss-art { width: 170px; height: 170px; animation: bp-attack 1.2s ease-in-out infinite; }
.cm-node .bz-sway, .cm-node .bz-glitch { animation: none !important; }

/* boss phase 2: the full-screen power-up, and a fiercer arena afterwards */
.bfx-phase { position: fixed; inset: 0; z-index: 2; overflow: hidden; }
.bp2-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--boss) 70%, #fff), var(--a2) 70%); opacity: 0; transition: opacity .35s; }
.bfx-phase.in .bp2-bg { opacity: 1; }
.bp2-ring { position: absolute; left: 50%; top: 42%; width: 40vmin; height: 40vmin; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; border: 14px solid #fff; box-shadow: 0 0 60px #fff, inset 0 0 60px #fff; opacity: 0; }
.bfx-phase.charge .bp2-ring { animation: bp2-ring .5s ease-out infinite; }
@keyframes bp2-ring { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 60% { opacity: .8; } to { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.bfx-phase.burst .bp2-ring { animation: bp2-blast .7s ease-out forwards; }
@keyframes bp2-blast { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
.bp2-boss { position: absolute; left: 50%; top: 42%; width: min(56vh, 70vw); transform: translate(-50%, -50%) scale(.5); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); filter: drop-shadow(0 0 0 var(--boss)); }
.bp2-boss .boss-art { width: 100%; height: auto; display: block; }
.bfx-phase.in .bp2-boss { transform: translate(-50%, -50%) scale(.85); }
.bfx-phase.charge .bp2-boss { animation: bp2-shake .08s linear infinite; filter: drop-shadow(0 0 22px #fff) brightness(1.25); }
@keyframes bp2-shake { 50% { margin-left: 6px; } }
.bfx-phase.burst .bp2-boss { animation: none; transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 30px var(--boss)) saturate(1.4) hue-rotate(-12deg); }
.bp2-text { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%) scale(0); text-align: center; color: #fff; width: 92vw; transition: transform .45s cubic-bezier(.2, 1.7, .4, 1); }
.bfx-phase.burst .bp2-text { transform: translate(-50%, -50%) scale(1); }
.bp2-text small { display: block; font: 900 clamp(.8rem, 1.8vw, 1.2rem) var(--font-body); letter-spacing: .3em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bp2-text b { display: block; font: 900 clamp(3rem, 11vw, 7rem)/1 var(--font-head, var(--font-body)); color: #ffd23f; -webkit-text-stroke: 3px #2b2233; text-shadow: 0 7px 0 #2b2233; }
.bp2-text em { display: block; font: 900 clamp(1.2rem, 3vw, 2rem) var(--font-body); font-style: normal; text-shadow: 0 3px 0 #2b2233; }
.bp2-text span { display: block; font: 700 clamp(.9rem, 2vw, 1.15rem) var(--font-body); text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.bfx-phase.out { opacity: 0; transition: opacity .3s; }
.boss-arena.phase2 .ba-rays { animation-duration: 20s; opacity: .2; }
.boss-arena.phase2 .ba-giant { opacity: .3; filter: blur(1px) saturate(1.3) hue-rotate(-10deg); }
.boss-panel.phase2 .bp-portrait .boss-art { filter: drop-shadow(0 0 14px var(--boss)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)) saturate(1.3); }
.bp-phase { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--boss); color: #fff; font-size: .66rem; letter-spacing: .1em; vertical-align: 2px; }

/* ===================================================================================================
   Powers (powers.js): shots, swarms, and every ability's and boss move's own look
   =================================================================================================== */

.pw-proj { position: fixed; left: -24px; top: -24px; z-index: 9400; width: 48px; height: 48px; display: grid; place-items: center; font-size: 40px; pointer-events: none; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pw-aura { position: fixed; z-index: 9300; pointer-events: none; font-size: calc(22px * var(--s, 1)); line-height: 1; margin: -11px 0 0 -11px; animation: pw-pop 1.4s ease-out both; }
.pw-aura.m-pop { animation-name: pw-pop; }
.pw-aura.m-fall { animation-name: pw-fall; animation-timing-function: ease-in; }
.pw-aura.m-rise { animation-name: pw-rise; }
.pw-aura.m-drift { animation-name: pw-drift; }
.pw-aura.m-swirl { animation-name: pw-swirl; animation-timing-function: ease-in; }
.pw-aura.m-orbit { animation-name: pw-orbit; animation-timing-function: linear; }
.pw-aura.m-spark { animation-name: pw-spark; animation-timing-function: steps(6); }
@keyframes pw-pop { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }
@keyframes pw-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
@keyframes pw-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }
@keyframes pw-drift { 0% { transform: translateX(-40px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--dx) * 2 + 80px), var(--dy)); opacity: 0; } }
@keyframes pw-swirl { 0% { transform: rotate(0) translate(40px) rotate(0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--cx), var(--cy)) rotate(540deg) scale(.1); opacity: 0; } }
@keyframes pw-orbit { 0% { transform: translate(var(--cx), var(--cy)) rotate(0) translate(70px) rotate(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translate(var(--cx), var(--cy)) rotate(360deg) translate(70px) rotate(-360deg); opacity: 0; } }
@keyframes pw-spark { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1.5) rotate(20deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(-20deg); opacity: 0; } }

/* the ability buttons take their ability's colour */
.bp-ab { border-color: var(--c, var(--accent)); }
.bp-ab:not(:disabled) .bp-ab-icon { filter: drop-shadow(0 0 6px var(--c, transparent)); }
.cm-threat { margin: 4px 0; font-weight: 800; color: #c0283c; }
.cm-moves { margin: 2px 0 6px; font-size: .86rem; color: var(--muted); }
.bh-dmg.small { font-size: 1.3rem; color: #ff5c6c; }
.bh-dmg.small.good { color: #4fdf6b; }

/* ---- the boss's states (classes on the boss panel) ---- */
.boss-panel.st-slow .bp-board { box-shadow: 0 0 0 4px #ff6fb5, 0 0 18px #ff6fb5; }
.boss-panel.st-slow .bp-portrait .boss-art { filter: drop-shadow(0 0 10px #ff6fb5) saturate(1.3); }
.boss-panel.st-slow .bp-portrait .boss-art * { animation-duration: 6s !important; }
.boss-panel.st-stutter .bp-portrait { animation: st-sneeze 3s infinite; }
@keyframes st-sneeze { 0%, 60% { transform: none; } 66% { transform: scale(1.12) rotate(-6deg); } 72% { transform: scale(.9) translateY(10px) rotate(4deg); } 80% { transform: none; } }
.boss-panel.st-hypno .bp-portrait::after { content: "🌀"; position: absolute; left: 50%; top: 30%; font-size: 44px; margin: -22px 0 0 -22px; animation: bz-spin 1.2s linear infinite; opacity: .85; }
.boss-panel.st-crash .bp-portrait::after { content: "💤"; position: absolute; right: 6px; top: 6px; font-size: 34px; animation: cm-bob .8s ease-in-out infinite alternate; }
.boss-panel.st-bubble .bp-portrait::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; z-index: 2;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9) 0 6%, rgba(160, 230, 255, .25) 14%, rgba(120, 210, 255, .18) 60%, rgba(180, 240, 255, .6) 72%, transparent 74%); }
.boss-panel.st-bubble .bp-portrait { animation: cm-bob 1.4s ease-in-out infinite alternate; }
.boss-panel.st-dig .bp-board-wrap::after { content: "🍂🍁🍂"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; background: rgba(224, 122, 46, .35); border-radius: 8px; }
.boss-panel.st-quick .bp-portrait { transform: translateY(26px); filter: sepia(.5); transition: transform 1s, filter 1s; }
.boss-panel.st-quick .bp-stage::before { background: radial-gradient(ellipse, #b9823e, #8a5a26); height: 46px; opacity: .9; }
.boss-panel.st-sand .bp-board-wrap::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; pointer-events: none;
    background: repeating-linear-gradient(100deg, rgba(217, 163, 92, 0) 0 6px, rgba(217, 163, 92, .45) 6px 9px); background-size: 60px 60px; animation: st-sand .6s linear infinite; }
@keyframes st-sand { to { background-position: 60px 10px; } }
.boss-panel.st-lava .bp-board { box-shadow: 0 6px 0 #ff3d00, 0 0 24px #ff6a00; }
.boss-panel.st-lava .bp-board-wrap::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 16px; border-radius: 0 0 10px 10px; background: linear-gradient(0deg, #ff3d00, #ffb21e); filter: blur(1px); animation: bp-blink .5s infinite alternate; }
.boss-panel.st-reverse .bp-board { filter: hue-rotate(160deg) saturate(1.3); }
.boss-panel.st-reverse .bp-portrait .boss-art { animation: bz-spin 2.4s linear infinite reverse; }
.boss-panel.st-worm .bp-board-wrap::before { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 50%;
    background: conic-gradient(#c06bff, #2b2233, #58d6ff, #2b2233, #c06bff); filter: blur(4px); animation: bz-spin 1.6s linear infinite; }
.boss-panel.st-ghost .bp-portrait .boss-art { opacity: .55; filter: drop-shadow(0 0 14px #a99bff); }
.boss-panel.st-haunt .bp-stage::after { content: "👻"; background: none; font-size: 30px; inset: auto 10px 10px auto; animation: cm-bob 1s ease-in-out infinite alternate; }
.boss-panel.st-calm { box-shadow: var(--shadow), 0 0 0 5px rgba(185, 166, 232, .5), 0 0 40px rgba(185, 166, 232, .6); animation: none; }
.boss-panel.st-blind .bp-portrait .boss-art { filter: brightness(1.6) blur(1px); }
.bp-cell.blot .bp-ltr { color: #2b2233; font-size: calc(150px / var(--size, 5)); }
.bp-cell.blot { background: radial-gradient(circle, #2b2233 0 30%, #fff 45%); }
.bp-cell.vine { background: #c9f0c9; }
.bp-cell.vine::after { content: "🌿"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(110px / var(--size, 5)); }
.bp-cell.chomped { background: #ffd23f; }
.bp-cell.chomped::after { content: "👾"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(110px / var(--size, 5)); }
.bp-cell.blown { animation: st-blown .5s; }
@keyframes st-blown { 30% { background: #e8c48a; transform: translateX(4px) rotate(4deg); } }

/* ---- the boss's moves on you (classes on your board area) ---- */
.board-area.fx-crumple .board-wrap { transform: perspective(500px) rotateX(9deg) rotateY(-12deg) skewX(4deg) scale(.94); transition: transform .4s; filter: contrast(1.08) drop-shadow(6px 8px 0 rgba(0, 0, 0, .15)); }
.board-area.fx-crumple #board { background-image: linear-gradient(115deg, rgba(0, 0, 0, .1), transparent 30%, rgba(0, 0, 0, .12) 55%, transparent 70%, rgba(0, 0, 0, .1)); }
.board-area.fx-whirl #board { animation: fx-whirl 4s linear infinite; }
@keyframes fx-whirl { to { transform: rotate(360deg); } }
.board-area.fx-mirror #board { transform: scaleX(-1); transition: transform .4s; }
.board-area.fx-static .board-wrap::after { content: ""; position: absolute; inset: -6px; z-index: 5; pointer-events: none; border-radius: 12px; opacity: .55;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, rgba(0, 0, 0, .5) 1px 3px), repeating-linear-gradient(90deg, rgba(120, 120, 120, .4) 0 2px, transparent 2px 5px);
    animation: fx-static .12s steps(2) infinite; }
@keyframes fx-static { 50% { background-position: 3px 5px, 7px 0; opacity: .7; } }
.board-area.fx-lights .board-wrap::after { content: ""; position: absolute; inset: -8px; z-index: 5; pointer-events: none; border-radius: 12px;
    background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), transparent 0 var(--lr, 46px), rgba(5, 4, 12, .96) calc(var(--lr, 46px) + 36px)); }
.board-area.fx-confetti .board-wrap { filter: saturate(1.3); }
.board-area.fx-downpour .board-wrap::after { content: ""; position: absolute; inset: -6px; z-index: 5; pointer-events: none; border-radius: 12px;
    background: repeating-linear-gradient(104deg, transparent 0 14px, rgba(90, 140, 220, .5) 14px 16px); background-size: 40px 120px; animation: fx-rain .35s linear infinite; }
@keyframes fx-rain { to { background-position: -10px 120px; } }
.board-area.fx-gravity #board .cell .ltr { transform: translateY(18%); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.board-area.fx-gravity #board { box-shadow: 0 0 0 5px #6b4dff, 0 0 26px #6b4dff; }
.board-area.fx-sticky #board .cell.selected { box-shadow: inset 0 0 0 5px #c98a2b; background: #ffe3a0; }
.board-area.fx-sandblast #board { box-shadow: 0 0 0 5px #d9a35c; filter: sepia(.35); }
.board-area.fx-lock #board .cell:not(.in-word) { opacity: .45; }
.board-area.fx-lock #board { box-shadow: 0 0 0 5px #9aa7b8, 0 0 20px #5d6b80; }
.clues.fx-petals .clue-text { color: transparent !important; text-shadow: none; background: repeating-radial-gradient(circle at 20% 50%, #ffc1d9 0 4px, #ff8fb8 4px 6px, transparent 6px 11px); border-radius: 6px; }
.fx-flare-screen { position: fixed; inset: 0; z-index: 9200; pointer-events: none; background: radial-gradient(circle, #fff, #fff6c8 60%, #ffd23f); opacity: 0; transition: opacity .25s; }
.fx-flare-screen.on { opacity: .97; }
#board .cell.snowed::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(circle at 40% 30%, #fff, #eaf6ff 70%); box-shadow: inset 0 -4px 0 #cfe6f7; }
#board .cell.thorny::after { content: "🌹"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 1.6em; background: rgba(70, 120, 60, .35); border-radius: inherit; }
#board .cell .ghost-ltr, #board .cell .cheat-ltr { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.6em var(--font-body); pointer-events: none; }
#board .cell .ghost-ltr { color: rgba(140, 120, 220, .55); text-shadow: 0 0 8px rgba(160, 140, 255, .8); animation: bz-glow 1.2s ease-in-out infinite alternate; }
#board .cell.filled .ghost-ltr { display: none; }
#board .cell .cheat-ltr { color: #0aa6b0; text-shadow: 0 0 10px #5ce1e6; animation: fx-cheat 2.5s ease-out forwards; }
@keyframes fx-cheat { 0% { opacity: 0; transform: scale(1.6); } 10%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#board .cell.scorched { animation: fx-scorch .9s; }
@keyframes fx-scorch { 20% { background: #ff6a00; box-shadow: 0 0 20px #ff3d00; } }
#board .cell.heavy { animation: fx-heavy .35s; }
@keyframes fx-heavy { 40% { transform: translateY(6px) scaleY(.85); } }

/* combo pops sit beside the timer; the combo chip shows how long the combo has left */
.bh-combo.hot b { color: #ff5c00; font-size: 3rem; }
.ms-chip { position: relative; overflow: hidden; }
.ms-chip .ms-text { position: relative; z-index: 1; }
.ms-chip .ms-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: currentColor; opacity: .55; transition: width .1s linear; }

/* Give up, at the end of the item bar */
.cm-item.giveup { margin-left: auto; width: auto; padding: 0 12px; font: 800 .8rem var(--font-body); color: #a3283a; border-color: #f0a4ae; }
.cm-item.giveup:hover { background: #ffe8eb; }

/* lessons: the level sheet's lesson box and the skill book */
.cm-lesson { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface-solid)); border: 2px solid color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }
.cm-lesson small { display: block; font: 900 .68rem var(--font-body); letter-spacing: .14em; color: var(--c, var(--accent)); }
.cm-lesson b { display: block; font-size: 1.05rem; margin: 2px 0; }
.cm-lesson p { margin: 3px 0; font-size: .9rem; }
.cm-tip { color: var(--ink); opacity: .85; }
.skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.skill-card { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--line); }
.skill-card.mastered { border-color: #e2b13c; background: color-mix(in srgb, #ffd23f 16%, var(--surface-2)); }
.sk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sk-badge { font: 800 .74rem var(--font-body); padding: 2px 8px; border-radius: 999px; background: var(--surface-solid); border: 1.5px solid var(--line); white-space: nowrap; }
.skill-card p { margin: 4px 0; font-size: .86rem; }
.sk-levels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sk-level { padding: 3px 8px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface-solid); color: var(--ink); font: 700 .78rem var(--font-body); cursor: pointer; }
.sk-level:hover { border-color: var(--accent); }

/* a boss fight waiting for the boss's puzzle: a cover over your board */
.boss-wait { position: absolute; inset: -6px; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center;
    border-radius: 14px; background: color-mix(in srgb, #1d1530 82%, transparent); color: #fff; font-family: var(--font-body); backdrop-filter: blur(6px); }
.boss-wait b { font-size: 1.15rem; }
.boss-wait small { opacity: .8; }
.boss-wait.error { background: color-mix(in srgb, #5a1020 85%, transparent); }

/* the loadout on a boss's level sheet */
.cm-loadout { margin: 8px 0; }
.cm-loadout > small { display: block; font: 900 .68rem var(--font-body); letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.lo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lo-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 12px; border: 2px solid var(--c, var(--line)); background: var(--surface-solid); color: var(--ink); font-family: var(--font-body); cursor: pointer; transition: transform .12s; }
.lo-slot:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface-solid)); }
.lo-slot.empty { border-style: dashed; color: var(--muted); }
.lo-icon { font-size: 1.5rem; }
.lo-slot b { font-size: .78rem; text-align: center; line-height: 1.1; }
.lo-slot small { font-size: .66rem; color: var(--muted); }
.shop-item-card.pick { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.shop-item-card.pick:hover { transform: translateY(-2px); }

/* ---- the boss moves added when every boss got 5 ---- */
#board .cell { transform: translateX(var(--sx, 0px)); transition: transform .3s; }
#board .cell.folded::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: linear-gradient(135deg, #d9d2c4, #a89f8e 50%, #e9e3d6); box-shadow: inset 0 0 8px rgba(0, 0, 0, .35); }
#board .cell.piled::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
    background: radial-gradient(circle at 20% 30%, #ff5c6c 0 12%, transparent 13%), radial-gradient(circle at 70% 25%, #ffd23f 0 14%, transparent 15%), radial-gradient(circle at 40% 75%, #4fc3f7 0 13%, transparent 14%),
        radial-gradient(circle at 80% 70%, #7be36b 0 12%, transparent 13%), radial-gradient(circle at 55% 50%, #c08bff 0 12%, transparent 13%), #fff3d6; }
#board .cell.gummed::after { content: "🫧"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 1.4em; border-radius: inherit; background: rgba(255, 140, 200, .75); cursor: pointer; }
#board .cell.bombed::after { content: "💣"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 1.5em; animation: bp-blink .3s infinite alternate; pointer-events: none; }
#board .cell.clouded::after { content: ""; position: absolute; inset: -2px; z-index: 3; border-radius: 40%; background: radial-gradient(circle, #fff 40%, #eef4fb 70%); }
#board .cell.masked .ltr { color: transparent !important; }
#board .cell .mask-ltr { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.6em var(--font-body); color: var(--ink); pointer-events: none; }
#board .cell .ghost-ltr { color: var(--ink); text-shadow: none; animation: none; opacity: .92; }
.board-area.fx-inkblot .board-wrap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; height: 58%; z-index: 5; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none;
    background: radial-gradient(circle at 35% 40%, #1a1424 0 45%, transparent 46%), radial-gradient(circle at 65% 55%, #1a1424 0 40%, transparent 41%), radial-gradient(circle at 50% 30%, #1a1424 0 30%, transparent 31%), radial-gradient(circle at 30% 70%, #1a1424 0 22%, transparent 23%); }
.board-area.fx-jitter #board { animation: fx-jitter .09s linear infinite; }
@keyframes fx-jitter { 25% { transform: translate(calc(5px * var(--jit, 1)), calc(-4px * var(--jit, 1))) rotate(calc(1deg * var(--jit, 1))); } 50% { transform: translate(calc(-6px * var(--jit, 1)), calc(3px * var(--jit, 1))) rotate(calc(-1.2deg * var(--jit, 1))); } 75% { transform: translate(calc(4px * var(--jit, 1)), calc(5px * var(--jit, 1))); } }
.board-area.fx-tidal #board { transform: translateX(var(--tide, 46%)) rotate(4deg); transition: transform .6s; }
.board-area.fx-tidal .board-wrap { overflow: hidden; }
.board-area.fx-shrink #board { transform: scale(.5); transition: transform .5s; }
.board-area.fx-upside #board { transform: rotate(180deg); transition: transform .6s; }
.board-area.fx-halffog .board-wrap::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -6px; height: var(--flood, 52%); transition: height .6s ease; z-index: 5; pointer-events: none; border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(60, 120, 200, .85), #1f4f8f); box-shadow: 0 -6px 18px rgba(60, 120, 200, .6); animation: cm-bob 1.2s ease-in-out infinite alternate; }
.board-area.fx-darkcreep .board-wrap::after { content: ""; position: absolute; inset: -8px; z-index: 5; pointer-events: none; border-radius: 12px; background: #05040c; opacity: var(--dark, 0); transition: opacity .3s; }
.fx-numberless .clue-num, .board-area.fx-numberless #board .num { visibility: hidden; }
.board-area.fx-shatter #board { gap: 5px; filter: drop-shadow(0 0 2px #9fd8ff); }
.board-area.fx-nobackspace #board { box-shadow: 0 0 0 5px #2b2233; }
.board-area.fx-slowmo #board { filter: saturate(.4) brightness(1.05); box-shadow: 0 0 0 5px #9fd8ff; }
.board-area.fx-fumble #board, .board-area.fx-echo #board, .board-area.fx-backwards #board { box-shadow: 0 0 0 5px #ffb21e; }
.board-area.fx-vowels #board { filter: hue-rotate(220deg) saturate(.6); }
.board-area.fx-static .board-wrap::after { opacity: .78; }
.board-area.fx-taunt #board .cell:not(.in-word) { opacity: .4; }
.board-area.fx-taunt #board { box-shadow: 0 0 0 5px #ff4d6d, 0 0 20px #ff4d6d; }
.minion { position: absolute; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(140, 220, 120, .6));
    font-size: 30px; cursor: pointer; transition: left .45s cubic-bezier(.3, 1.4, .5, 1), top .45s cubic-bezier(.3, 1.4, .5, 1); animation: cm-bob .3s ease-in-out infinite alternate; box-shadow: 0 0 0 3px #3fbf6b, 0 6px 14px rgba(0, 0, 0, .3); left: 50%; top: 50%; }

/* spells.js: the canvas for lightning, splats, vines..., and copies of letters flying off */
.spells-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9360; pointer-events: none; }
.spell-letter { position: fixed; z-index: 9370; display: grid; place-items: center; pointer-events: none; }
.spell-tool { position: fixed; left: 0; top: 0; z-index: 9380; font-size: 40px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.spell-dot { position: fixed; left: -5px; top: -5px; z-index: 9365; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; }

/* the boss's story */
.cm-story { margin: 6px 0; font-size: .92rem; line-height: 1.45; }
.bi-stakes { margin: 10px auto 0; max-width: 520px; font: 800 1.05rem/1.35 var(--font-body); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

/* the shop: your equipped abilities at the top */
.shop-equipped { padding: 8px 16px 10px; border-bottom: 1.5px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); }
.shop-equipped > small { display: block; font: 900 .66rem var(--font-body); letter-spacing: .14em; color: var(--muted); margin-bottom: 5px; }
.se-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.se-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--c, var(--line)); background: var(--surface-solid); flex-wrap: wrap; }
.se-slot.empty { border-style: dashed; color: var(--muted); }
.se-icon { font-size: 1.5rem; }
.se-text { flex: 1; min-width: 80px; display: grid; }
.se-text b { font-size: .86rem; line-height: 1.15; }
.se-text small { font-size: .7rem; color: var(--muted); }
@media (max-width: 700px) { .se-row { grid-template-columns: 1fr; } }

/* a boss's moves, in a menu on the left of its level sheet */
.cm-moves-menu { flex: 0 0 220px; align-self: stretch; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--c, #000) 10%, var(--surface-2)); border: 1.5px solid color-mix(in srgb, var(--c, #000) 35%, transparent); max-height: 420px; overflow: auto; }
.cm-moves-menu > small { font: 900 .66rem var(--font-body); letter-spacing: .14em; color: var(--c, var(--muted)); }
.cm-move { display: flex; gap: 7px; align-items: flex-start; padding: 5px 6px; border-radius: 10px; background: var(--surface-solid); }
.cm-move-icon { font-size: 1.3rem; line-height: 1.2; }
.cm-move b { display: block; font-size: .84rem; line-height: 1.15; }
.cm-move small { display: block; font-size: .72rem; line-height: 1.25; color: var(--muted); }
@media (max-width: 760px) { .cm-moves-menu { flex-basis: auto; width: 100%; max-height: none; order: 3; } }
/* a boss's sheet fits the screen with nothing to scroll: its moves | you vs the boss and its
   story | the details, with a footer (your abilities, Fight, Shop, How It Works) that's always in view */
/* while a boss's sheet is open your companion steps aside (its speech bubble covered an ability slot), and so does the Beta strip */
html.cm-boss-sheet .mascot { opacity: 0; transform: translateY(150%); }
html.cm-boss-sheet .cm-beta { display: none; }
.cm-detail.boss { display: grid; grid-template-columns: 214px 262px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
    width: min(1060px, calc(100vw - 24px)); max-height: calc(100vh - 28px); padding: 14px 16px; }
.cm-detail.boss .cm-moves-menu { grid-column: 1; grid-row: 1 / 3; max-height: none; min-height: 0; }
.cm-detail.boss .cm-side { grid-column: 2; grid-row: 1 / 3; }
.cm-detail.boss .cm-detail-body { grid-column: 3; grid-row: 1; min-height: 0; overflow: auto; padding-right: 30px; }
.cm-detail.boss .cm-foot { grid-column: 3; grid-row: 2; }
.cm-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.cm-side .cm-detail-art.cm-vs { align-self: center; }
.cm-side .cm-story { margin: 0; font-size: .84rem; line-height: 1.42; text-align: center; }
.cm-foot { background: var(--surface-solid); }
.cm-foot .cm-loadout { margin: 4px 0 8px; }
.cm-detail.boss .cm-lesson { margin: 6px 0; padding: 8px 10px; }
.cm-detail.boss .cm-rules { font-size: .84rem; }
.cm-detail.boss .cm-move { padding: 4px 6px; }
.cm-detail.boss.many-moves { grid-template-columns: 400px 236px minmax(0, 1fr); width: min(1180px, calc(100vw - 24px)); }
.cm-moves-menu.many { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.cm-moves-menu.many > small { grid-column: 1 / -1; }
/* shorter screens: the lines that How It Works explains anyway go, and everything gets a little tighter */
@media (max-height: 800px) {
    .cm-detail.boss .cm-rules, .cm-detail.boss .cm-lesson p:not(.cm-tip) { display: none; }
    .cm-detail.boss h2 { margin-bottom: 2px; font-size: calc(1.35rem * var(--head-scale, 1)); }
    .cm-side .cm-story { font-size: .78rem; }
    .cm-detail.boss .cm-move small { font-size: .68rem; line-height: 1.2; }
    .cm-detail.boss .cm-vs .boss-art { width: 120px; height: 120px; } .cm-detail.boss .cm-vs .hero-art { width: 96px; height: 96px; }
}
@media (max-height: 640px) {
    .cm-side .cm-story { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .cm-detail.boss .lo-slot small { display: none; }
}
/* narrow screens: one column that scrolls inside the sheet, the footer pinned to its bottom edge */
@media (max-width: 1100px) { .cm-detail.boss.many-moves { grid-template-columns: 330px 210px minmax(0, 1fr); } .cm-detail.boss.many-moves .cm-vs .boss-art { width: 104px; height: 104px; } .cm-detail.boss.many-moves .cm-vs .hero-art { width: 84px; height: 84px; } }
@media (max-width: 900px) {
    .cm-detail.boss { display: flex; flex-direction: column; overflow: auto; }
    .cm-detail.boss > * { flex-shrink: 0; }
    .cm-detail.boss .cm-detail-body { overflow: visible; padding-right: 0; flex: none; }
    .cm-detail.boss .cm-moves-menu { order: 3; flex: none; width: 100%; }
    .cm-detail.boss .cm-foot { order: 4; position: sticky; bottom: -14px; margin: 0 -16px -14px; padding: 8px 16px 12px; box-shadow: 0 -8px 18px rgba(0, 0, 0, .2); z-index: 2; }
}

/* ---- the race bar (boss fights are a race) ----
   The friend of the level on the left, the boss on the right; the knot is pushed right when you're ahead */
.race-bar { --x: 50%; --me: #3fbf6b; --me2: #9be36b; position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto 14px; padding: 8px 14px;
    border-radius: 22px; background: var(--surface-solid, #fff); border: 2px solid #2b2233; box-shadow: 0 6px 0 rgba(43, 34, 51, .18), 0 10px 26px rgba(0, 0, 0, .18); }
.race-bar[hidden] { display: none; }
.rb-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
.rb-face { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #e8f7ea); border: 2.5px solid var(--me); box-shadow: 0 0 0 3px rgba(63, 191, 107, .2); }
.rb-boss-face { background: radial-gradient(circle at 50% 40%, #fff, #f6e9ee); border-color: var(--boss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--boss) 25%, transparent); overflow: hidden; display: grid; place-items: center; }
.rb-boss-face svg { width: 120%; height: 120%; margin-top: 8%; }
.rb-who { display: flex; flex-direction: column; line-height: 1.05; }
.rb-who small { font: 900 .62rem/1.1 var(--font-body); letter-spacing: .08em; color: var(--ink-soft, #6b6178); white-space: nowrap; }
.rb-who b { font: 900 1.25rem/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.rb-boss .rb-who { align-items: flex-end; }
.rb-track { position: relative; flex: 1 1 auto; height: 30px; border-radius: 999px; background: #2b2233; border: 2.5px solid #2b2233; overflow: visible; }
.rb-fill-me, .rb-fill-boss { position: absolute; top: 0; bottom: 0; transition: width .45s cubic-bezier(.3, 1.3, .5, 1), left .45s cubic-bezier(.3, 1.3, .5, 1); }
.rb-fill-me { left: 0; width: var(--x); border-radius: 999px 0 0 999px;
    background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px), linear-gradient(180deg, var(--me2), var(--me)); background-size: 28px 100%, auto; animation: rb-push-right 1s linear infinite; }
.rb-fill-boss { left: var(--x); right: 0; border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(55deg, rgba(255, 255, 255, .2) 0 10px, transparent 10px 20px), linear-gradient(180deg, color-mix(in srgb, var(--boss) 70%, #fff), var(--boss)); background-size: 28px 100%, auto; animation: rb-push-left 1s linear infinite; }
@keyframes rb-push-right { to { background-position: 28px 0, 0 0; } }
@keyframes rb-push-left { to { background-position: -28px 0, 0 0; } }
.rb-ticks { position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
    background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .7) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.rb-knot { position: absolute; top: 50%; left: var(--x); width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; z-index: 2;
    background: radial-gradient(circle at 40% 35%, #fff, #ffe066 55%, #ffb21e); border: 3px solid #2b2233; box-shadow: 0 0 0 4px rgba(255, 224, 102, .35), 0 0 18px rgba(255, 210, 63, .8);
    transition: left .45s cubic-bezier(.3, 1.3, .5, 1); }
.rb-knot i::before { content: "⚔️"; font-style: normal; font-size: 20px; }
.rb-knot.push { animation: rb-knot-push .45s ease-out; }
@keyframes rb-knot-push { 30% { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 10px rgba(255, 224, 102, .4), 0 0 34px #fff; } }
.rb-lead { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font: 900 .78rem/1.2 var(--font-body); color: var(--ink); white-space: nowrap;
    padding: 1px 10px; border-radius: 999px; background: var(--surface-solid, #fff); border: 1.5px solid var(--line); }
.race-bar.ahead .rb-lead { color: #1f8a46; border-color: var(--me); }
.race-bar.behind .rb-lead { color: #c42536; border-color: #ff5c6c; }
.rb-phase { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font: 900 .66rem/1.4 var(--font-body); letter-spacing: .1em; color: #fff;
    padding: 0 10px; border-radius: 999px; background: var(--boss); white-space: nowrap; }
.rb-phase:empty { display: none; }
.race-bar { margin-top: 12px; margin-bottom: 26px; }
.race-bar.danger { animation: rb-danger .7s ease-in-out infinite alternate; }
@keyframes rb-danger { to { box-shadow: 0 6px 0 rgba(43, 34, 51, .18), 0 0 0 5px rgba(255, 92, 108, .55), 0 0 30px rgba(255, 92, 108, .6); } }
.race-bar.enraged .rb-boss-face { animation: rb-rage .18s linear infinite alternate; }
@keyframes rb-rage { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.race-bar.ahead .rb-me .rb-face { animation: rb-bob .6s ease-in-out infinite alternate; }
@keyframes rb-bob { to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .race-bar *, .race-bar { animation: none !important; } }
@media (max-width: 640px) {
    .race-bar { gap: 6px; padding: 6px 8px; margin: 8px 0 24px; border-radius: 18px; }
    .rb-face { width: 40px; height: 40px; }
    .rb-who small { display: none; }
    .rb-who b { font-size: 1rem; }
    .rb-track { height: 24px; }
    .rb-knot { width: 36px; height: 36px; }
    .rb-knot i::before { font-size: 16px; }
}
/* Downpour: a letter running down and away */
#board .cell.drip .ltr { animation: cell-drip .6s ease-in forwards; }
@keyframes cell-drip { to { transform: translateY(40%) scaleY(1.4); opacity: 0; filter: blur(2px); } }

/* ---- later boss phases: the arena goes wild (chaos.js draws the set pieces; this turns everything up) ---- */
.ba-chaos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.boss-arena[data-chaos="1"] .ba-rays { animation-duration: 14s; opacity: .26; }
.boss-arena[data-chaos="2"] .ba-rays { animation-duration: 9s; opacity: .32; }
.boss-arena[data-chaos="3"] .ba-rays, .boss-arena[data-chaos="4"] .ba-rays { animation-duration: 5s; opacity: .4; }
.boss-arena[data-chaos] .ba-giant { animation-duration: 1.8s; }
.boss-arena[data-chaos="2"] .ba-giant { opacity: .38; filter: saturate(1.5) hue-rotate(-18deg) drop-shadow(0 0 40px var(--boss)); }
.boss-arena[data-chaos="3"] .ba-giant, .boss-arena[data-chaos="4"] .ba-giant { opacity: .45; filter: saturate(1.7) hue-rotate(-28deg) drop-shadow(0 0 60px var(--boss)); animation: ba-breathe .9s ease-in-out infinite alternate; }
.boss-arena[data-chaos="2"] .ba-sky { filter: saturate(1.25) brightness(.92); }
.boss-arena[data-chaos="3"] .ba-sky { filter: saturate(1.4) brightness(.84) hue-rotate(-10deg); }
.boss-arena[data-chaos="4"] .ba-sky { filter: saturate(1.6) brightness(.75) hue-rotate(-20deg); animation: ba-sky-throb 2.4s ease-in-out infinite alternate; }
@keyframes ba-sky-throb { to { filter: saturate(1.9) brightness(.9) hue-rotate(-34deg); } }
.boss-arena[data-chaos="3"] .ba-horizon, .boss-arena[data-chaos="4"] .ba-horizon { animation: ba-quake .22s linear infinite alternate; }
@keyframes ba-quake { from { transform: translate(-2px, 1px); } to { transform: translate(2px, -1px); } }
/* the phase card: phase pips, and a final phase in its own colours */
.bp2-pips { display: flex; gap: 8px; justify-content: center; margin-top: 10px; font-style: normal; }
.bp2-pips u { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; background: rgba(255, 255, 255, .15); text-decoration: none; }
.bp2-pips u.on { background: var(--boss); box-shadow: 0 0 12px var(--boss); }
.bfx-phase.final .bp2-text b { color: #ffe066; text-shadow: 0 0 30px #ff3d00, 0 4px 0 #2b2233; }
@media (prefers-reduced-motion: reduce) { .boss-arena[data-chaos] * { animation: none !important; } }

/* the level sheet keeps its own world's look while the map scrolls through other worlds */
.cm-detail[data-world] { font-family: var(--font-body); color: var(--ink); }

/* squares the boss erased or changed: a clear mark until the letter changes again */
.cell .hit-mark { position: absolute; inset: 2px; z-index: 4; pointer-events: none; border-radius: inherit; border: 2.5px dashed #e2283c; background: rgba(226, 40, 60, .08); animation: hit-mark-in .35s cubic-bezier(.2, 1.6, .4, 1), hit-mark-pulse 1.4s ease-in-out .35s infinite alternate; }
.cell .hit-mark::after { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font: 900 11px/1 system-ui, sans-serif; color: #fff; background: #e2283c; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .3); content: "\2715"; }
.cell .hit-mark.changed { border-color: #ff8a00; background: rgba(255, 138, 0, .1); }
.cell .hit-mark.changed::after { background: #ff8a00; content: "\21C4"; font-size: 12px; }
.board[style*="--size: 9"] .cell .hit-mark::after, .board[style*="--size:9"] .cell .hit-mark::after { width: 14px; height: 14px; top: -6px; right: -6px; font-size: 9px; }
@keyframes hit-mark-in { from { transform: scale(1.4); opacity: 0; } }
@keyframes hit-mark-pulse { to { box-shadow: 0 0 10px rgba(226, 40, 60, .45); } }
@media (prefers-reduced-motion: reduce) { .cell .hit-mark { animation: none; } }

/* the boss blocking your abilities or items: shown on the buttons for as long as it lasts */
.bp-ab, .bp-super, .cm-item { position: relative; }
.ab-block { position: absolute; inset: -2px; z-index: 5; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    pointer-events: none; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); animation: ab-block-in .3s cubic-bezier(.2, 1.6, .4, 1); }
.ab-block b { font: 900 .7rem/1 var(--font-body); letter-spacing: .06em; }
.ab-block small { font: 800 .72rem/1.1 var(--font-body); }
.ab-block.seal { background:
    repeating-linear-gradient(35deg, transparent 0 9px, rgba(63, 122, 44, .95) 9px 13px, transparent 13px 22px),
    repeating-linear-gradient(-35deg, transparent 0 11px, rgba(111, 191, 74, .9) 11px 14px, transparent 14px 24px), rgba(30, 60, 20, .62);
    box-shadow: inset 0 0 0 2px #3f7a2c; }
.ab-block.ward { justify-content: flex-start; padding-top: 4px; background: linear-gradient(180deg, rgba(60, 110, 200, .85), rgba(60, 110, 200, .25) 55%, transparent); box-shadow: inset 0 0 0 2px #7fb2ff; }
.ab-block.ward small { font-size: .58rem; }
.ab-block.firewall { background: repeating-linear-gradient(90deg, rgba(255, 60, 80, .22) 0 1px, transparent 1px 10px), repeating-linear-gradient(0deg, rgba(255, 60, 80, .22) 0 1px, transparent 1px 10px), rgba(120, 10, 30, .62);
    box-shadow: inset 0 0 0 2px #ff3b5c, 0 0 12px rgba(255, 60, 80, .5); }
.cm-item .ab-block b { font-size: .55rem; } .cm-item .ab-block small { font-size: .6rem; }
.bp-ab.blocked, .cm-item.blocked { filter: saturate(.6); }
@keyframes ab-block-in { from { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-block { animation: none; } }
.ab-block b, .ab-block small { padding: 1px 5px; border-radius: 5px; background: rgba(20, 30, 15, .82); }
.ab-block.firewall b, .ab-block.firewall small { background: rgba(90, 10, 25, .85); }
.ab-block.ward b, .ab-block.ward small { background: rgba(20, 40, 90, .82); }

/* the boss's blocks on your buttons: the Umbrella is a banner above your abilities (still
   visible); Weed Wrap and Firewall cover the whole row (hidden until they wear off) */
.ab-ward-banner { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 6px; padding: 5px 10px; border-radius: 999px; color: #fff;
    background: linear-gradient(90deg, #2f6fbf, #4fa3e8); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(79, 163, 232, .6); animation: ab-block-in .3s cubic-bezier(.2, 1.6, .4, 1), ward-pulse 1.4s ease-in-out .3s infinite alternate; }
.ab-ward-banner b { font: 900 .78rem var(--font-body); letter-spacing: .08em; }
.ab-ward-banner span { font: 700 .75rem var(--font-body); opacity: .95; }
.ab-ward-banner::before { content: ""; width: 18px; height: 12px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: inset 0 -3px 0 #ff5c6c; }
@keyframes ward-pulse { to { box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(79, 163, 232, .9); } }
.bp-ab-row, .cm-items { position: relative; }
.ab-cover { position: absolute; inset: -4px; z-index: 6; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
    color: #fff; animation: ab-block-in .3s cubic-bezier(.2, 1.6, .4, 1); pointer-events: auto; cursor: not-allowed; }
.ab-cover b { font: 900 .95rem var(--font-body); letter-spacing: .08em; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.ab-cover small { font: 800 .78rem var(--font-body); }
.ab-cover.seal { background:
    repeating-linear-gradient(35deg, transparent 0 9px, #3f7a2c 9px 14px, transparent 14px 22px),
    repeating-linear-gradient(-35deg, transparent 0 11px, #6fbf4a 11px 15px, transparent 15px 24px), #1f3a16;
    box-shadow: inset 0 0 0 3px #3f7a2c, 0 4px 12px rgba(0, 0, 0, .35); }
.ab-cover.seal b, .ab-cover.seal small { padding: 1px 8px; border-radius: 6px; background: rgba(15, 30, 10, .85); }
.ab-cover.firewall { background: repeating-linear-gradient(90deg, rgba(255, 90, 110, .35) 0 2px, transparent 2px 12px), repeating-linear-gradient(0deg, rgba(255, 90, 110, .35) 0 2px, transparent 2px 12px), #5a0a1c;
    box-shadow: inset 0 0 0 3px #ff3b5c, 0 0 16px rgba(255, 60, 80, .55); }
.ab-cover.firewall b, .ab-cover.firewall small { padding: 1px 8px; border-radius: 6px; background: rgba(60, 5, 18, .85); }
/* Wilt: your board goes grey and the highlight of the word you're on disappears */
#board.fx-wilt { filter: grayscale(1) contrast(.9); }
#board.fx-wilt .cell.in-word, #board.fx-wilt .cell.selected { background: var(--cell, #fff) !important; box-shadow: none !important; }
#board.fx-wilt .cell.selected::after { content: none; }

/* ---- counterplay ---- */
/* the target you click during a wind-up to turn the move back on the boss */
.counter-target { position: absolute; z-index: 30; width: 74px; height: 74px; margin: -37px 0 0 -37px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 40%, color-mix(in srgb, var(--c, #ff5c6c) 45%, transparent) 62%, transparent 72%);
    filter: drop-shadow(0 0 12px var(--c, #ff5c6c)); animation: ct-in .35s cubic-bezier(.2, 1.6, .4, 1), ct-pulse .7s ease-in-out .35s infinite alternate; }
.counter-target svg { width: 64%; height: 64%; display: block; margin: 18% auto 0; pointer-events: none; }
.counter-target .ct-label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px); white-space: nowrap; pointer-events: none;
    padding: 2px 9px; border-radius: 999px; background: #2b2233; color: #ffe066; font: 900 .72rem var(--font-body); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.counter-target .ct-ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px dashed var(--c, #ff5c6c); animation: spin 2.4s linear infinite; pointer-events: none; }
.counter-target.hit { animation: ct-hit .25s ease-out; }
.counter-target:hover { filter: drop-shadow(0 0 18px #fff) brightness(1.1); }
@keyframes ct-in { from { transform: scale(0) rotate(-90deg); } }
@keyframes ct-pulse { to { transform: scale(1.1); } }
@keyframes ct-hit { 40% { transform: scale(.78) rotate(8deg); } }
/* squares in finished words resist: they stay visible and steady through some moves */
#board.fx-smudge .cell.safe .ltr { color: var(--ink) !important; text-shadow: none; }
.board-area.fx-darkcreep #board .cell.safe { box-shadow: inset 0 0 0 2px rgba(255, 224, 102, .7); }
@media (prefers-reduced-motion: reduce) { .counter-target, .counter-target .ct-ring { animation: none; } }
/* Flash Flood held back by a finished word: a dam line on top of the water */
.board-area.fx-halffog.flood-dammed .board-wrap::after { border-top: 4px solid #8a5a2b; box-shadow: 0 -3px 0 #c9945a; }
/* the attack warning hangs under the race bar's "who's ahead" label */
.rb-track .me-warn { inset: auto; left: 50%; top: calc(100% + 30px); width: min(480px, 86vw); min-height: 46px; transform: translateX(-50%); z-index: 8; }
.rb-track .me-warn { animation: me-warn-pop .25s cubic-bezier(.2, 1.5, .4, 1), me-warn-nudge .35s ease-in-out .25s infinite alternate; }
@keyframes me-warn-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes me-warn-nudge { from { transform: translateX(-50%) rotate(-.6deg); } to { transform: translateX(-50%) rotate(.6deg); } }
/* the counter target lives anywhere on the screen (fixed), smaller, and jumps after each hit */
.counter-target { position: fixed; width: 58px; height: 58px; margin: -29px 0 0 -29px; z-index: 9450; touch-action: none; }
.counter-target .ct-label { font-size: .68rem; }
.counter-target.hop { animation: ct-in .22s cubic-bezier(.2, 1.6, .4, 1), ct-pulse .7s ease-in-out .22s infinite alternate; }
/* performance: the boss's animated parts make the browser redo the SVG's layout every frame. The portrait keeps them;
   the tiny race-bar face and the faded giant in the arena don't need them (the giant still breathes as a whole) */
.rb-boss-face svg *, .ba-giant svg * { animation: none !important; }
/* the boss music volume, in the fight */
.bp-volume { display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; padding: 4px 10px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--boss, #888) 10%, var(--surface-2, #f4f0f6)); border: 1.5px solid color-mix(in srgb, var(--boss, #888) 30%, transparent); }
.bp-volume input { flex: 1; min-width: 0; accent-color: var(--boss, var(--accent)); cursor: pointer; }
.bp-volume output { min-width: 3.2em; text-align: right; font: 800 .78rem var(--font-body); color: var(--ink-soft, #6b6178); font-variant-numeric: tabular-nums; }
.bp-vol-mute { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--surface-solid, #fff); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.bp-vol-mute:hover { transform: scale(1.08); }
.bp-volume.off input { opacity: .45; }
/* a campaign level's music control, by the timer (the level's own chill song) */
.music-ctl { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; width: 132px; margin-left: auto; padding: 3px 8px 3px 3px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #888) 9%, var(--surface-2, #f4f0f6)); border: 1.5px solid color-mix(in srgb, var(--accent, #888) 25%, transparent); }
.music-ctl[hidden] { display: none; }
.music-ctl input { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.music-ctl output { display: none; }   /* (the level shows in the button's tooltip; the slider says the rest) */
.mc-mute { width: 28px; height: 28px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--surface-solid, #fff); font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .15s; }
.mc-mute:hover { transform: scale(1.08); }
.music-ctl.off input { opacity: .45; }
@media (max-width: 600px) { .music-ctl { width: 108px; } }
.in-level .hud-row .points-today { flex: 1 1 0; min-width: 0; }
@media (max-width: 960px) { .cm-rail .cm-dot { --dot: clamp(16px, calc((100vh - 150px) / 15 - 4px), 24px); } }
/* the campaign has no Check or Reveal: you solve it
   yourself, with the shop's items as the only help. The Daily and Unlimited Boss keep them (and have no items, only
   Give Up). One class decides it: no-help, set by syncHelp() in campaign.js */
.no-help #helpers .helper-row { display: none; }
/* ...and the bar with only Give Up in it centres it */
.cm-items.only-giveup { justify-content: center; }
.cm-items.only-giveup .cm-item.giveup { margin-left: 0; }

/* ---- How to Play: the ? buttons (the player itself is in howto.css) ---- */
#howto-btn .dot { stroke-width: 2.6; }

/* ---- the warning box's other messages (campaign.js drawWarn): what just happened, and the boss almost done ---- */
.rb-track .me-warn[data-tone="good"], .rb-track .me-warn[data-tone="mine"], .rb-track .me-warn[data-tone="info"] { animation: me-warn-pop .25s cubic-bezier(.2, 1.5, .4, 1); }
.me-warn[data-tone="good"] { background: #163a26; border-color: #3fbf6b; box-shadow: 0 0 0 3px rgba(63, 191, 107, .3), 0 6px 18px rgba(0, 0, 0, .3); }
.me-warn[data-tone="good"] b { color: #9be36b; }
.me-warn[data-tone="good"] i { background: #3fbf6b; }
.me-warn[data-tone="mine"] { background: #1d2a44; border-color: #4fa3e8; box-shadow: 0 0 0 3px rgba(79, 163, 232, .3), 0 6px 18px rgba(0, 0, 0, .3); }
.me-warn[data-tone="mine"] b { color: #9fd0ff; }
.me-warn[data-tone="mine"] i { background: #4fa3e8; }
.me-warn[data-tone="info"] { border-color: #8a8494; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.me-warn[data-tone="info"] b { color: #fff; }
.me-warn[data-tone="info"] i { background: #8a8494; }
.me-warn[data-tone="bad"] b { color: #ff8a8a; }
.me-warn[data-tone="rage"] { background: #3a1020; border-color: #ff3b3b; }
.me-warn[data-tone="rage"] b { color: #ff6b6b; }
.me-warn[data-tone="close"] { background: #5a0f1c; border-color: #ff5c6c; animation: me-warn-pop .25s cubic-bezier(.2, 1.5, .4, 1), close-box 0.9s ease-in-out .25s infinite alternate; }
.me-warn[data-tone="close"] b { color: #fff; }
@keyframes close-box { to { box-shadow: 0 0 0 5px rgba(255, 92, 108, .6), 0 0 28px rgba(255, 60, 80, .7); } }
/* the boss is almost done: the screen's edges glow red and pulse like a heartbeat (pointer-events none: clicks go through) */
.close-edge { position: fixed; inset: 0; z-index: 700; pointer-events: none; opacity: 0; transition: opacity .4s;
    box-shadow: inset 0 0 90px 24px rgba(255, 30, 60, .55), inset 0 0 0 4px rgba(255, 60, 80, .6); }
.boss-close .close-edge { opacity: 1; animation: close-beat 1.05s ease-in-out infinite; }
@keyframes close-beat { 0%, 100% { opacity: .55; } 12% { opacity: 1; } 24% { opacity: .7; } 36% { opacity: .95; } }
.boss-close .rb-boss-face { animation: close-face .45s ease-in-out infinite alternate; }
@keyframes close-face { to { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(255, 60, 80, .7), 0 0 18px rgba(255, 60, 80, .7); } }
.boss-close .bp-race i { background: linear-gradient(90deg, #ff8a3d, #ff3b4f) !important; }
@media (prefers-reduced-motion: reduce) { .boss-close .close-edge, .boss-close .rb-boss-face, .me-warn[data-tone="close"] { animation: none; } .boss-close .close-edge { opacity: .8; } }
/* empty loadout slots and the shop's swap buttons */
.se-swap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.se-swap:hover .se-icon { transform: scale(1.08); }
.bp-ab-none { grid-column: 1 / -1; margin: 4px 0; font-size: .82rem; color: var(--muted); text-align: center; }
/* the campaign header on phones: Exit and the world on top, the buttons on a second row (How to Play shrinks to ?) */
.cmv-shop { white-space: nowrap; flex-shrink: 0; }
#cm-howto .ht-q { display: none; }
@media (max-width: 640px) {
    .cmv-bar { flex-wrap: wrap; row-gap: 6px; }
    .cmv-where { flex: 1 1 60%; }
    .cmv-bar .btn { padding-left: 11px; padding-right: 11px; }
    #cm-howto { width: 42px; padding-left: 0; padding-right: 0; }
    #cm-howto .ht-lbl { display: none; }
    #cm-howto .ht-q { display: inline; font-weight: 900; }
    .cmv-bar .cmv-stat.coins { margin-left: auto; }
}
/* the beta's helpers on the map (+500 Coins, Unlock All): a small strip in the bottom-left corner */
.cm-beta { position: fixed; left: 14px; bottom: 14px; z-index: 45; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px;
    background: var(--surface-solid, #fff); border: 2px dashed color-mix(in srgb, var(--accent, #888) 55%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.cm-beta { display: none; }
.in-map .cm-beta { display: flex; }
.cm-beta > b { font-size: .72rem; font-weight: 900; color: var(--accent, #c33); margin-right: 2px; }
.cm-beta .btn { padding: 5px 12px; font-size: .8rem; }
@media (max-width: 640px) { .cm-beta { left: 8px; bottom: 8px; } }

/* ---- the Cursed Angel's moves (the Celestial Rift) ---- */
/* Judgment Rays: the rows it aims at glow gold while it winds up */
#board .cell.ray-target { box-shadow: inset 0 0 0 2px #ffd06b, 0 0 16px rgba(255, 214, 120, .85); animation: ray-warn .45s ease-in-out infinite alternate; }
@keyframes ray-warn { to { box-shadow: inset 0 0 0 3px #fff6d8, 0 0 26px rgba(255, 236, 170, 1); background-color: rgba(255, 236, 170, .35); } }
/* Wings of Night: dark wings fold over the board from both sides; every finished word pushes them back */
.board-area.fx-wings .board-wrap::before, .board-area.fx-wings .board-wrap::after {
    content: ""; position: absolute; top: -12px; bottom: -12px; z-index: 6; width: calc(var(--wing, 20%) + 12px); pointer-events: none;
    background: radial-gradient(ellipse at 30% 50%, rgba(155, 107, 255, .35), transparent 65%), repeating-linear-gradient(162deg, #1c1230 0 13px, #2e1a58 13px 16px, #1c1230 16px 22px), #100822;
    filter: drop-shadow(0 0 14px rgba(122, 60, 255, .75));
    transition: width .7s cubic-bezier(.3, .9, .3, 1);
}
.board-area.fx-wings .board-wrap::before { left: -12px; clip-path: polygon(0 0, 100% 0, 84% 6%, 100% 12%, 82% 19%, 100% 26%, 80% 33%, 100% 40%, 82% 47%, 100% 54%, 80% 61%, 100% 68%, 82% 75%, 100% 82%, 84% 89%, 100% 95%, 100% 100%, 0 100%); }
.board-area.fx-wings .board-wrap::after { right: -12px; clip-path: polygon(100% 0, 0 0, 16% 6%, 0 12%, 18% 19%, 0 26%, 20% 33%, 0 40%, 18% 47%, 0 54%, 20% 61%, 0 68%, 18% 75%, 0 82%, 16% 89%, 0 95%, 0 100%, 100% 100%);
    background: radial-gradient(ellipse at 70% 50%, rgba(155, 107, 255, .35), transparent 65%), repeating-linear-gradient(-162deg, #1c1230 0 13px, #2e1a58 13px 16px, #1c1230 16px 22px), #100822; }
/* Holy Light: a blinding disc of light drifting over the board; every finished word shrinks it */
#board { position: relative; }
.board-area.fx-holylight #board::before {
    content: ""; position: absolute; z-index: 7; left: var(--hx, 50%); top: var(--hy, 50%); width: var(--hr, 50%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fffef6 0 40%, rgba(255, 248, 224, .97) 55%, rgba(255, 220, 140, .55) 70%, transparent 74%);
    box-shadow: 0 0 46px 22px rgba(255, 236, 170, .55);
    transition: left .1s linear, top .1s linear, width .5s ease;
    animation: holy-pulse 1.5s ease-in-out infinite;
}
@keyframes holy-pulse { 50% { box-shadow: 0 0 64px 30px rgba(255, 236, 170, .75); filter: brightness(1.08); } }
/* Stolen Scripture: one clue list taken; click it 5 times to take it back */
.clues .clue-col.stolen { position: relative; cursor: pointer; }
.clues .clue-col.stolen ol { filter: blur(7px); opacity: .45; pointer-events: none; }
.clues .clue-col.stolen::after {
    content: "Taken by the Cursed Angel · Click to Take It Back"; position: absolute; inset: 40px 8px auto; padding: 12px 14px; border-radius: 14px; text-align: center;
    background: linear-gradient(135deg, #2a0f5a, #4a1f9a); color: #ffe7a3; font: 700 .8rem "Cinzel", serif; letter-spacing: .04em;
    box-shadow: 0 0 0 2px #e8c66a, 0 0 22px rgba(155, 107, 255, .6);
}
#clue-bar.fx-stolen .cb-text { filter: blur(6px); }
/* ---- its second five ---- */
/* Seraph's Lance: the column it aims at glows like a pillar while it winds up */
#board .cell.lance-target { box-shadow: inset 2px 0 0 #ffd06b, inset -2px 0 0 #ffd06b, 0 0 18px rgba(255, 236, 170, .9); animation: lance-warn .4s ease-in-out infinite alternate; }
@keyframes lance-warn { to { box-shadow: inset 3px 0 0 #fff6d8, inset -3px 0 0 #fff6d8, 0 0 30px rgba(255, 246, 216, 1); background-color: rgba(255, 246, 216, .4); } }
/* Divine Decree: a golden tablet over the board names the forbidden letter and counts down its 10 seconds (it can't be clicked) */
.decree-tablet {
    position: absolute; z-index: 12; top: -34px; left: 50%; translate: -50% 0; width: 74px; padding: 14px 6px 8px; pointer-events: none;
    border: 3px solid #8a5a1a; border-radius: 38px 38px 8px 8px; color: #4a2a08; text-align: center;
    background: linear-gradient(180deg, #fff0c0, #e8c66a 55%, #b88a2e); box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 214, 120, .6);
    animation: decree-in .5s cubic-bezier(.3, 1.5, .5, 1);
}
.decree-tablet small { display: block; font: 800 .55rem "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; }
.decree-tablet b { position: relative; display: block; font: 700 2.1rem/1 "Cinzel", Georgia, serif; text-shadow: 0 0 10px #fff6d8; }
.decree-tablet b::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 5px; border-radius: 3px; background: #c62d3a; transform: rotate(-35deg); }
.decree-tablet em { display: block; margin-top: 4px; font: 800 .8rem/1 "Nunito", system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: #7a1d26; }
@keyframes decree-in { from { translate: -50% -60px; opacity: 0; } }
/* Ascension: a soft updraft of light over the board; a letter leaving rises and fades, the one arriving drops in */
.board-area.fx-ascend .board-wrap::after { content: ""; position: absolute; inset: -6px; z-index: 5; pointer-events: none; border-radius: 12px;
    background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(255, 246, 216, .16) 18px 20px), linear-gradient(0deg, rgba(255, 236, 170, .28), transparent 70%);
    background-size: 100% 40px, 100% 100%; animation: ascend-up 1.2s linear infinite; }
@keyframes ascend-up { to { background-position: 0 -40px, 0 0; } }
#board .cell.ascended .ltr { animation: ascend-out .6s ease-in; }
#board .cell.ascended-in .ltr { animation: ascend-in .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ascend-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-60%); opacity: 0; } }
@keyframes ascend-in { from { transform: translateY(70%); opacity: 0; filter: drop-shadow(0 0 6px #ffd06b); } }
/* Penance: a golden chain runs round the board while it lasts */
.board-area.fx-penance .board-wrap { outline: 4px dashed #e8c66a; outline-offset: 8px; filter: drop-shadow(0 0 8px rgba(255, 214, 120, .55)); }
/* Ascension's angel birds: doves that carry your letters off (click one to get its letter back), and the halo lock on
   a square a bird has taken (no typing there, and clicking it doesn't bring the letter back) */
.angel-bird { position: fixed; z-index: 760; width: 58px; height: 48px; translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer;
    transition: left .62s cubic-bezier(.3, .9, .4, 1), top .62s cubic-bezier(.3, .9, .4, 1), opacity .4s; filter: drop-shadow(0 0 8px rgba(255, 236, 170, .9)); }
.angel-bird svg { width: 100%; height: 100%; overflow: visible; }
.angel-bird .ab-wing { transform-box: fill-box; animation: ab-flap .3s ease-in-out infinite alternate; }
.angel-bird .ab-wing.l { transform-origin: right bottom; }
.angel-bird .ab-wing.r { transform-origin: left bottom; }
@keyframes ab-flap { to { transform: scaleY(.3); } }
.angel-bird.flying { transition: opacity .4s; }             /* (moved every frame while it flies: no easing) */
.angel-bird.flying.left svg { transform: scaleX(-1); }
.angel-bird.ab-hit { animation: ab-hit .3s ease-out; }
@keyframes ab-hit { 30% { scale: .82; filter: drop-shadow(0 0 14px #fff) brightness(1.6); } }
.angel-bird .ab-count { position: absolute; right: -8px; top: -6px; display: none; min-width: 20px; padding: 1px 5px; border-radius: 10px; background: #2a0f5a; color: #ffe7a3;
    font: 800 .7rem/1.3 system-ui, sans-serif; font-style: normal; box-shadow: 0 0 0 2px #e8c66a; }
.angel-bird.holding .ab-count { display: block; }
.angel-bird .ab-letter { position: absolute; left: 50%; bottom: -15px; translate: -50% 0; display: none; min-width: 22px; padding: 1px 5px; border-radius: 6px;
    background: #fff6d8; border: 2px solid #c9902f; color: #2b2233; font: 900 .9rem/1.2 var(--font-cell, Georgia, serif); box-shadow: 0 0 10px rgba(255, 214, 120, .8); }
.angel-bird.holding .ab-letter { display: block; }
.angel-bird.away { transition-duration: .9s; opacity: 0; }
.angel-bird:hover { filter: drop-shadow(0 0 14px #fff6d8) brightness(1.08); }
#board .cell.bird-taken { box-shadow: inset 0 0 0 3px #ffd06b, 0 0 14px rgba(255, 214, 120, .8); background-color: color-mix(in srgb, #fff6d8 16%, transparent); cursor: not-allowed; }
#board .cell .taken-mark { position: absolute; inset: 6%; z-index: 4; pointer-events: none; animation: tm-in .45s cubic-bezier(.3, 1.6, .5, 1); }
#board .cell .taken-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255, 214, 120, .9)); }
@keyframes tm-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } }