/* Sendy's Metaverse, the fun on the way (js/meta/fun/): the season pill and the
   shard and star counters, Sendy's text box, the star banner and words over the
   world, the Glitchling battle, the Glitchdex and Shards & secrets sheets.
   House rules hold: every font-size is max(var(--text-floor), …); control labels
   are near-black on a light fill; motion stops with reduced motion or html.motion-off. */

:root { --fun-pump: #c6f000; --fun-dump: #ff4fd8; --fun-hodl: #9fe0ff; --fun-gold: #ffb340; --fun-ink: #1f1238; }

/* ===== the HUD: the season pill, shards, stars ===== */
.fun-hud { position: absolute; right: 12px; top: 192px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 3; }
.fun-pill { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.2rem 0.75rem 0.2rem 0.45rem; border-radius: var(--r-pill); border: 2px solid rgba(159, 224, 255, 0.55); background: rgba(10, 6, 24, 0.86); color: #fff8ee; font-weight: 800; font-size: max(var(--text-floor), 0.92rem); box-shadow: 0 0 0 2px rgba(5, 3, 14, 0.7), 0 0 16px rgba(159, 224, 255, 0.22); cursor: pointer; white-space: nowrap; }
.fun-pill:hover, .fun-pill:focus-visible { border-color: #fff8ee; outline: none; }
.fun-pill[hidden] { display: none; }
.fun-pill-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: max(var(--text-floor), 1.05rem); }
.fun-pill-icon svg, .fun-gem, .fun-star { width: 24px; height: 24px; display: block; }
.fun-n { font-variant-numeric: tabular-nums; font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.08rem); }
.fun-season { border-color: color-mix(in srgb, var(--fun-gold) 75%, transparent); box-shadow: 0 0 0 2px rgba(5, 3, 14, 0.7), 0 0 16px rgba(255, 179, 64, 0.3); }
.fun-season-n { font-family: var(--font-disp); font-weight: 400; color: var(--fun-gold); letter-spacing: 0.04em; font-size: max(var(--text-floor), 1.08rem); }
.fun-season-w { color: #fff8ee; }
.fun-season-left { color: var(--text-dim, #c9bfe6); font-weight: 700; font-size: max(var(--text-floor), 0.8rem); }
.fun-stars { border-color: color-mix(in srgb, var(--fun-gold) 60%, transparent); }
@media (max-width: 760px) {
  .fun-hud { right: 8px; top: 128px; gap: 5px; }
  .fun-pill { min-height: 36px; padding: 0.15rem 0.6rem 0.15rem 0.35rem; }
  .fun-season-left { display: none; }
}

/* ===== Sendy's text box: a JRPG window that never takes the controls ===== */
.fun-say { position: absolute; left: 50%; bottom: calc(7% + 64px); transform: translate(-50%, 16px); z-index: 4; display: flex; align-items: flex-start; gap: 0.7rem; width: min(560px, calc(100% - 24px)); padding: 0.7rem 2.6rem 0.7rem 0.7rem; border-radius: 16px; background: linear-gradient(180deg, rgba(26, 12, 52, 0.97), rgba(10, 6, 24, 0.97)); border: 3px solid #f6f2ff; box-shadow: 0 0 0 3px var(--fun-ink), 0 0 26px rgba(198, 240, 0, 0.25), 0 14px 30px rgba(0, 0, 0, 0.55); color: #fff8ee; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.25s var(--ease-out); }
.fun-say.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fun-say-face { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(198, 240, 0, 0.35), rgba(31, 18, 56, 0.9) 70%); border: 2px solid rgba(198, 240, 0, 0.5); object-fit: contain; }
.fun-say-body { display: grid; gap: 0.25rem; min-width: 0; }
.fun-say-who { font-family: var(--font-disp); font-weight: 400; color: var(--meta-lime, #c6f000); letter-spacing: 0.04em; font-size: max(var(--text-floor), 1rem); }
.fun-say-text { margin: 0; font-weight: 600; line-height: 1.4; font-size: max(var(--text-floor), 0.98rem); min-height: 2.8em; }
.fun-say-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fun-say-acts:empty { display: none; }
.fun-say-x { position: absolute; top: 6px; right: 6px; min-width: 36px; min-height: 36px; border-radius: 10px; border: 0; background: transparent; color: #fff8ee; font-size: max(var(--text-floor), 1rem); cursor: pointer; }
.fun-say-x:hover { background: rgba(255, 255, 255, 0.1); }
@media (pointer: coarse) { .fun-say { bottom: 196px; } }

/* ===== the star banner ===== */
.fun-banner { position: absolute; left: 50%; top: 3%; z-index: 4; transform: translate(-50%, 0) scale(0.6); display: grid; justify-items: center; gap: 0.2rem; text-align: center; opacity: 0; pointer-events: none; }
.fun-banner.on { animation: fun-banner 3.6s var(--ease-out) forwards; }
@keyframes fun-banner { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px) scale(1); } }
.fun-banner-star svg { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(255, 179, 64, 0.8)); }
.fun-banner.on .fun-banner-star svg { animation: fun-spin 1.2s var(--ease-out); }
@keyframes fun-spin { from { transform: rotateY(0) scale(0.4); } to { transform: rotateY(720deg) scale(1); } }
.fun-banner-title { font-family: var(--font-disp); font-weight: 400; color: var(--fun-gold); letter-spacing: 0.05em; font-size: max(var(--text-floor), clamp(2rem, 5vw, 3rem)); text-shadow: 0 0 18px rgba(255, 179, 64, 0.8), 0 4px 0 var(--fun-ink), 0 8px 20px rgba(0, 0, 0, 0.7); }
.fun-banner-sub { padding: 0.2rem 0.8rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.85); color: #fff8ee; font-weight: 800; font-size: max(var(--text-floor), 0.95rem); }

/* ===== words over the world ===== */
.fun-float { position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.04em; font-size: max(var(--text-floor), 1.35rem); color: #fff8ee; text-shadow: 0 3px 0 var(--fun-ink), 0 0 12px rgba(0, 0, 0, 0.6); animation: fun-float 1.5s var(--ease-out) forwards; }
.fun-float-gem { color: var(--fun-hodl); text-shadow: 0 3px 0 var(--fun-ink), 0 0 14px rgba(159, 224, 255, 0.8); }
.fun-float-gold { color: var(--fun-gold); font-size: max(var(--text-floor), 1.6rem); text-shadow: 0 3px 0 var(--fun-ink), 0 0 16px rgba(255, 179, 64, 0.9); }
.fun-float-save { color: var(--meta-lime, #c6f000); text-shadow: 0 3px 0 var(--fun-ink), 0 0 14px rgba(198, 240, 0, 0.9); }
.fun-float-info { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; font-size: max(var(--text-floor), 0.9rem); padding: 0.2rem 0.65rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.86); text-shadow: none; }
@keyframes fun-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.fun-bang { display: inline-grid; place-items: center; width: 44px; height: 52px; border-radius: 12px 12px 12px 4px; background: #fff8ee; color: #d4006a; font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 2rem); box-shadow: 0 0 0 3px var(--fun-ink), 0 0 18px rgba(255, 43, 214, 0.7); animation: fun-bang 0.35s var(--ease-pop, ease-out); }
@keyframes fun-bang { from { transform: scale(0.2); } to { transform: scale(1); } }

/* ===== the battle (Menu.panel "battle", filling the world's own space) ===== */
.meta-sheet.fun-battle-sheet { padding: var(--hud-h) 0 0; align-items: stretch; justify-content: stretch; background: transparent; pointer-events: none; }
.fun-battle-sheet .meta-sheet-card { pointer-events: auto; }
@media (max-width: 760px) { .meta-sheet.fun-battle-sheet { padding: var(--hud-h) 0 var(--dock-h); } }
html.meta-menu-on .meta-sheet.fun-battle-sheet { visibility: hidden; }
.fun-battle-sheet .meta-sheet-card { position: relative; width: 100% !important; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #05030e; }
.fun-battle-sheet .meta-sheet-head { position: absolute; top: 10px; right: 10px; z-index: 7; padding: 0; border: 0; }
.fun-battle-sheet .meta-sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fun-battle-sheet .meta-x { background: rgba(10, 6, 24, 0.85); color: #fff8ee; border: 2px solid rgba(255, 255, 255, 0.35); }
.fun-battle-sheet .meta-sheet-body { position: relative; display: block; flex: 1; padding: 0; overflow: hidden; }
.fun-battle { position: absolute; inset: 0; overflow: hidden; color: #fff8ee; --box-h: 200px; }
.fun-b-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fun-b-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.fun-b-flash.on { animation: fun-flash 0.32s ease-out; }
@keyframes fun-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.fun-b-wipe { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(0deg, #05030e 0 18px, #1f1238 18px 20px), #05030e; opacity: 0; }
.fun-b-wipe.on { animation: fun-wipe 0.9s steps(9) forwards; }
@keyframes fun-wipe { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 30% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(50% 0 50% 0); } }

.fun-b-card { position: absolute; z-index: 2; display: grid; gap: 0.3rem; min-width: 250px; max-width: calc(100% - 92px); padding: 0.55rem 0.85rem 0.65rem; border-radius: 14px; background: linear-gradient(180deg, rgba(36, 18, 68, 0.95), rgba(14, 8, 30, 0.95)); border: 3px solid #f6f2ff; box-shadow: 0 0 0 3px var(--fun-ink), 0 0 22px color-mix(in srgb, var(--type, #c6f000) 45%, transparent), 0 10px 24px rgba(0, 0, 0, 0.5); }
.fun-b-foe { left: 16px; top: 16px; }
.fun-b-me { right: 16px; bottom: calc(var(--box-h) + 26px); --type: #c6f000; }
.fun-b-name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.fun-b-name b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.04em; font-size: max(var(--text-floor), 1.3rem); }
.fun-b-lv { font-family: var(--font-disp); font-weight: 400; color: var(--fun-gold); letter-spacing: 0.04em; font-size: max(var(--text-floor), 1rem); }
.fun-b-tags { display: flex; gap: 0.35rem; }
.fun-b-hp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.45rem; }
.fun-b-hp small { font-weight: 900; color: var(--fun-gold); letter-spacing: 0.08em; font-size: max(var(--text-floor), 0.75rem); }
.fun-b-bar { position: relative; height: 12px; border-radius: 999px; background: #120a24; box-shadow: inset 0 0 0 2px #3a2a5e; overflow: hidden; }
.fun-b-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #6fd400, #c6f000); box-shadow: 0 0 10px rgba(198, 240, 0, 0.6); }
.fun-b-bar i[data-level="low"] { background: linear-gradient(90deg, #ff9a1f, #ffd34d); box-shadow: 0 0 10px rgba(255, 179, 64, 0.6); }
.fun-b-bar i[data-level="crit"] { background: linear-gradient(90deg, #ff2b5a, #ff6a8a); box-shadow: 0 0 10px rgba(255, 43, 90, 0.7); }
.fun-b-num { font-variant-numeric: tabular-nums; font-weight: 800; font-size: max(var(--text-floor), 0.85rem); min-width: 4.2em; text-align: right; }

.fun-b-box { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 0.55rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: linear-gradient(180deg, rgba(26, 12, 52, 0.96), rgba(10, 6, 24, 0.97)); border: 3px solid #f6f2ff; box-shadow: 0 0 0 3px var(--fun-ink), 0 0 30px rgba(198, 240, 0, 0.2), 0 -10px 30px rgba(0, 0, 0, 0.4); }
.fun-b-textrow { display: flex; align-items: flex-end; gap: 0.5rem; }
.fun-b-text { flex: 1; margin: 0; min-height: 2.9em; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; font-size: max(var(--text-floor), 1.08rem); }
.fun-b-more { color: var(--meta-lime, #c6f000); opacity: 0; font-size: max(var(--text-floor), 0.9rem); }
.fun-b-box.is-talking .fun-b-more { opacity: 1; animation: fun-blink 0.8s steps(2) infinite; }
@keyframes fun-blink { 50% { opacity: 0; } }
.fun-b-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
/* the menu and the way out share one spot, so the box keeps its size (and the stage above it stays put) */
.fun-b-deck { display: grid; }
.fun-b-deck > * { grid-area: 1 / 1; }
.fun-b-menu.is-off, .fun-b-end.is-off { visibility: hidden; }
.fun-move, .fun-cube, .fun-run { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.45rem; min-height: 58px; padding: 0.35rem 0.7rem; border-radius: 12px; border: 2px solid var(--fun-ink); color: #120a20; text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--fun-ink); transition: transform 0.08s ease, box-shadow 0.08s ease; }
.fun-move:hover, .fun-cube:hover, .fun-run:hover, .fun-move:focus-visible, .fun-cube:focus-visible, .fun-run:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--fun-ink), 0 0 0 3px #fff8ee; outline: none; }
.fun-move:active, .fun-cube:active, .fun-run:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--fun-ink); }
.fun-move-ico { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; font-size: max(var(--text-floor), 1.5rem); }
.fun-move-ico svg { width: 32px; height: 32px; }
.fun-move b, .fun-cube b, .fun-run b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.12rem); line-height: 1.05; }
.fun-move small, .fun-cube small { font-weight: 800; opacity: 0.8; font-size: max(var(--text-floor), 0.75rem); }
.fun-move[data-move="pump"] { background: linear-gradient(180deg, #e9ff8c, var(--fun-pump)); }
.fun-move[data-move="dump"] { background: linear-gradient(180deg, #ffc4f2, var(--fun-dump)); }
.fun-move[data-move="hodl"] { background: linear-gradient(180deg, #e3f7ff, var(--fun-hodl)); }
.fun-cube { grid-column: span 2; background: linear-gradient(180deg, #fff1c9, var(--fun-gold)); }
.fun-cube:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.fun-odds[data-level="good"] { color: #1d5a00; }
.fun-odds[data-level="slim"] { color: #8a0030; }
.fun-run { grid-template-rows: auto; background: linear-gradient(180deg, #ffffff, #cdbcff); }
.fun-b-end { display: flex; align-items: center; justify-content: flex-end; }
.fun-b-done { min-height: 48px; }

.fun-b-pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fun-b-pop { position: absolute; transform: translate(-50%, -100%); font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 2rem); color: #fff8ee; text-shadow: 0 3px 0 var(--fun-ink), 0 0 12px rgba(0, 0, 0, 0.7); animation: fun-pop 1.3s var(--ease-out) forwards; }
.fun-b-pop-big { color: var(--fun-gold); font-size: max(var(--text-floor), 2.6rem); text-shadow: 0 3px 0 var(--fun-ink), 0 0 18px rgba(255, 179, 64, 0.9); }
.fun-b-pop-weak { color: #cdbcff; font-size: max(var(--text-floor), 1.5rem); }
.fun-b-pop-hurt { color: #ff6a8a; }
@keyframes fun-pop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

@media (max-width: 760px) {
  .fun-battle { --box-h: 236px; }
  .fun-b-card { min-width: 0; width: min(270px, calc(100% - 84px)); padding: 0.45rem 0.65rem 0.5rem; }
  .fun-b-foe { left: 8px; top: 8px; }
  .fun-b-me { right: 8px; }
  .fun-b-name b { font-size: max(var(--text-floor), 1.1rem); }
  .fun-b-box { left: 6px; right: 6px; bottom: 6px; padding: 0.6rem; }
  .fun-b-text { font-size: max(var(--text-floor), 0.98rem); min-height: 3.2em; }
  .fun-b-menu { gap: 0.4rem; }
  .fun-move, .fun-cube, .fun-run { min-height: 54px; padding: 0.3rem 0.45rem; column-gap: 0.3rem; }
  .fun-move-ico { width: 26px; height: 26px; font-size: max(var(--text-floor), 1.2rem); }
  .fun-move-ico svg { width: 26px; height: 26px; }
  .fun-move b, .fun-cube b, .fun-run b { font-size: max(var(--text-floor), 0.98rem); }
}

/* ===== type and rarity chips ===== */
.fun-type, .fun-rare, .fun-common { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.55rem; border-radius: var(--r-pill); font-weight: 900; letter-spacing: 0.03em; font-size: max(var(--text-floor), 0.75rem); color: #120a20; }
.fun-type[data-type="pump"] { background: var(--fun-pump); }
.fun-type[data-type="dump"] { background: var(--fun-dump); }
.fun-type[data-type="hodl"] { background: var(--fun-hodl); }
.fun-rare { background: linear-gradient(90deg, #ffe08a, var(--fun-gold)); }
.fun-common { background: #ddd3ff; }

/* ===== the Glitchdex and Shards & secrets sheets ===== */
.fun-dex-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.fun-stat { display: grid; align-content: center; min-width: 110px; padding: 0.5rem 0.8rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.55); border: 1px solid rgba(198, 240, 0, 0.25); }
.fun-stat b { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-disp); font-weight: 400; color: var(--meta-lime, #c6f000); letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.6rem); line-height: 1.05; }
.fun-stat b small { color: var(--text-dim, #c9bfe6); font-size: max(var(--text-floor), 0.95rem); }
.fun-stat > span { color: var(--text-dim, #c9bfe6); font-weight: 700; font-size: max(var(--text-floor), 0.78rem); }
.fun-stat svg { width: 26px; height: 26px; }
.fun-dex-types { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.fun-dex-type { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.55); border: 1.5px solid color-mix(in srgb, var(--c, #c6f000) 60%, transparent); font-size: max(var(--text-floor), 0.9rem); }
.fun-dex-type[data-type="pump"] { --c: var(--fun-pump); }
.fun-dex-type[data-type="dump"] { --c: var(--fun-dump); }
.fun-dex-type[data-type="hodl"] { --c: var(--fun-hodl); }
.fun-dex-type b { color: var(--c); }
.fun-dex-type-n { font-variant-numeric: tabular-nums; font-weight: 800; }
.fun-dex-type-star svg { width: 22px; height: 22px; display: block; }
.fun-dex-type-star[data-on="false"] svg { filter: grayscale(1) brightness(0.45); opacity: 0.6; }
.fun-dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.6rem; }
.fun-dex-card { position: relative; display: grid; justify-items: center; gap: 0.25rem; padding: 0.6rem 0.5rem 0.65rem; border-radius: var(--r-3); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--type) 16%, #1c0f38), #0c0720); border: 2px solid color-mix(in srgb, var(--type) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.fun-dex-no { position: absolute; top: 6px; left: 8px; color: var(--text-dim, #c9bfe6); font-weight: 900; font-variant-numeric: tabular-nums; font-size: max(var(--text-floor), 0.72rem); }
.fun-dex-face { width: 112px; height: 112px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--type) 45%, transparent), transparent 68%); }
.fun-dex-card[data-state="seen"] .fun-dex-face { filter: grayscale(0.75) brightness(0.8); }
.fun-dex-card[data-state="unseen"] { background: linear-gradient(180deg, #160c2e, #0a0618); border-color: rgba(255, 255, 255, 0.12); }
.fun-dex-card[data-state="unseen"] .fun-dex-face { filter: brightness(0) drop-shadow(0 0 2px rgba(159, 224, 255, 0.55)); opacity: 0.7; background: none; }
.fun-dex-card[data-state="caught"]::after { content: "✓"; position: absolute; top: 6px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--meta-lime, #c6f000); color: #0b1000; font-weight: 900; font-size: max(var(--text-floor), 0.8rem); }
.fun-dex-name { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.1rem); }
.fun-dex-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.fun-dex-status { font-weight: 800; font-size: max(var(--text-floor), 0.8rem); }
.fun-dex-card[data-state="caught"] .fun-dex-status { color: var(--meta-lime, #c6f000); }
.fun-dex-home { color: var(--text-dim, #c9bfe6); font-size: max(var(--text-floor), 0.72rem); line-height: 1.3; }
.fun-note { margin: 0; color: var(--text-dim, #c9bfe6); line-height: 1.5; font-size: max(var(--text-floor), 0.88rem); }
.fun-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.65rem 0.8rem; border-radius: var(--r-2); background: rgba(255, 179, 64, 0.1); border: 1.5px solid rgba(255, 179, 64, 0.5); }
.fun-guest p { flex: 1 1 280px; margin: 0; line-height: 1.45; font-size: max(var(--text-floor), 0.88rem); }
.fun-sec { display: grid; gap: 0.5rem; }
.fun-h { margin: 0.2rem 0 0; font-family: var(--font-disp); font-weight: 400; color: var(--meta-lime, #c6f000); letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.2rem); }
.fun-regions { display: grid; gap: 0.35rem; }
.fun-region { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto auto; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.5); }
.fun-region b { color: var(--region); font-size: max(var(--text-floor), 0.92rem); }
.fun-region-bar { position: relative; height: 10px; border-radius: 999px; background: #120a24; overflow: hidden; }
.fun-region-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #4fb8ff, var(--fun-hodl)); box-shadow: 0 0 8px rgba(159, 224, 255, 0.6); }
.fun-region-n { font-variant-numeric: tabular-nums; font-weight: 800; font-size: max(var(--text-floor), 0.85rem); }
.fun-secrets, .fun-starlist { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.fun-secret { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.45rem 0.65rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); }
.fun-secret > span:last-child { display: grid; gap: 0.1rem; }
.fun-secret b { font-size: max(var(--text-floor), 0.85rem); }
.fun-secret small { color: var(--text-dim, #c9bfe6); font-size: max(var(--text-floor), 0.82rem); }
.fun-secret[data-found="true"] { border-color: rgba(198, 240, 0, 0.35); }
.fun-secret[data-found="true"] small { color: var(--meta-lime, #c6f000); font-weight: 800; }
.fun-secret-mark { flex: 0 0 auto; font-size: max(var(--text-floor), 1rem); }
.fun-starline { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: max(var(--text-floor), 0.9rem); }
.fun-starline svg { width: 22px; height: 22px; }
@media (max-width: 760px) {
  .fun-dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun-dex-face { width: 92px; height: 92px; }
  .fun-region { grid-template-columns: 1fr 1fr auto auto; }
}

/* retro mode: the HUD's own words go chunky too */
html.meta-retro .fun-pill, html.meta-retro .fun-b-box, html.meta-retro .fun-b-card { border-radius: 4px; }

/* reduced motion: nothing slides, flashes or blinks */
html.motion-off .fun-say, html.motion-off .fun-banner.on, html.motion-off .fun-float, html.motion-off .fun-bang, html.motion-off .fun-b-flash.on, html.motion-off .fun-b-wipe.on, html.motion-off .fun-b-pop, html.motion-off .fun-b-box.is-talking .fun-b-more, html.motion-off .fun-banner.on .fun-banner-star svg { animation: none; transition: none; }
html.motion-off .fun-banner.on { opacity: 1; transform: translate(-50%, 0); }
html.motion-off .fun-b-wipe.on { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fun-say, .fun-banner.on, .fun-float, .fun-bang, .fun-b-flash.on, .fun-b-wipe.on, .fun-b-pop, .fun-b-box.is-talking .fun-b-more, .fun-banner.on .fun-banner-star svg { animation: none; transition: none; }
  .fun-banner.on { opacity: 1; transform: translate(-50%, 0); }
  .fun-b-wipe.on { opacity: 0; }
}