/* =================================================================================================
   13.0 · THE GLOW UP. The new look, layered over everything else (loaded last, scoped to html.glow).

   Lit, not drawn: panels of frosted glass with fine lit edges, soft shadows and a gradient title
   ribbon, a rendered 3D logo, trading cards with fine rarity frames, and a card pull lit by bloom,
   light shafts and drifting sparkles. The letters are the game's own typewriter face, as before.
   Home, the top and bottom bars and the title keep the old look (its light mode is near the end).

   Light and dark mode, on html[data-lux]: "day" is light, "dusk" is dark (glow-ui.js picks it from
   the setting, or from the phone when it's on Auto). Every colour below comes from the tokens at the
   top, so a component never needs to know which mode it's in. The landscapes switch with it: light
   mode is daytime, dark mode is night (home-biome.js).

   Gameplay stays pixel art; its HUDs are dark glass in both modes. Painted art only appears in menus
   and on the title.
   ================================================================================================= */
/* =================================================================================================
   TOKENS
   ================================================================================================= */
html.glow{
  --lx-font:systemmono,wispsymbols,'Courier New',monospace;
  --lx-name:systemmono,wispsymbols,'Courier New',monospace;
  --lx-ease:cubic-bezier(.22,1,.36,1);
  /* fixed colours, the same in both modes */
  --lx-ink:#1d2b4f;--lx-ink2:#4f5e82;--lx-ink3:#58668d;   /* 13.5: ink3 and pearl3 reach 4.5:1 on panels and cards */
  --lx-pearl:#f4f7ff;--lx-pearl2:#c6d2ec;--lx-pearl3:#adbbdb;
  --lx-sky:#2f9ff0;--lx-sky2:#79c8ff;--lx-mint:#2fbf9b;--lx-coral:#ff6b7c;--lx-gold:#f2a516;
  --lx-sun1:#ffeb94;--lx-sun2:#ffcc40;--lx-sun3:#ffad24;--lx-sun-ink:#4a2c00;--lx-new:#ffbe0b;
  --lx-navy1:#24407e;--lx-navy2:#172d5f;--lx-navy3:#0d1b3f;
  --lx-holo:linear-gradient(120deg,#ff9fd2 0%,#ffc79a 42%,#9fd6ff 100%);

  /* ---- light mode (the default) ---- */
  --c-page:linear-gradient(180deg,#8fd0ff 0%,#c9e9ff 55%,#eef8ff 100%);
  --c-text:var(--lx-ink);--c-text2:var(--lx-ink2);--c-text3:var(--lx-ink3);
  --c-accent:var(--lx-sky);--c-accent-text:#1666a8;--c-accent-soft:#e6f3ff;
  --c-panel:radial-gradient(130% 60% at 50% 0%,rgba(214,236,255,.9) 0%,rgba(214,236,255,0) 60%),#f8fbff;
  --c-panel-edge:rgba(255,255,255,.95);--c-panel-shadow:0 32px 80px rgba(10,30,80,.32),0 3px 10px rgba(10,30,80,.12);
  --c-header-fade:none;--c-panel-solid:#f8fbff;
  --c-tile:linear-gradient(180deg,#ffffff 0%,#f2f8ff 100%);--c-tile-edge:rgba(29,43,79,.06);
  --c-tile-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(30,70,140,.09),0 1px 2px rgba(30,70,140,.08);
  --c-soft:linear-gradient(180deg,#eef7ff,#e3f1ff);--c-soft-edge:rgba(47,159,240,.16);
  --c-hair:rgba(29,43,79,.08);
  --c-track:rgba(29,43,79,.06);--c-track-edge:rgba(29,43,79,.05);
  --c-pill:linear-gradient(180deg,#ffffff,#f3f8ff);--c-pill-ink:var(--lx-ink);--c-pill-shadow:0 4px 12px rgba(20,60,130,.16),0 1px 2px rgba(20,60,130,.12);
  --c-chip:linear-gradient(180deg,#ffffff,#f3f8ff);--c-chip-ink:var(--lx-ink2);--c-chip-edge:rgba(29,43,79,.07);
  --c-chip-on:linear-gradient(180deg,color-mix(in srgb,var(--lx-sky) 70%,var(--lx-sky2)),var(--lx-sky));--c-chip-on-ink:#ffffff;
  --c-input:rgba(255,255,255,.9);--c-input-edge:rgba(29,43,79,.12);--c-input-ink:var(--lx-ink);
  --c-close:rgba(255,255,255,.8);--c-close-ink:var(--lx-ink);--c-close-edge:rgba(29,43,79,.08);
  --c-second:linear-gradient(180deg,#ffffff,#eef6ff);--c-second-ink:#1666a8;--c-second-edge:rgba(47,159,240,.22);
  --c-scrim:rgba(214,232,250,.78);
  --c-bar-fade:linear-gradient(180deg,rgba(249,252,255,0),rgba(249,252,255,.94) 34%,rgba(249,252,255,.98));
  --c-toast:rgba(255,255,255,.94);--c-toast-ink:var(--lx-ink);
  /* cards */
  --c-card-top:#ffffff;--c-card-bot:#e8f0fb;--c-card-glow:#ffffff;--c-card-ink:var(--lx-ink);--c-card-ink2:var(--lx-ink3);
  --c-card-tag:rgba(255,255,255,.88);--c-card-tag-ink:var(--lx-ink2);--c-card-tag-edge:rgba(29,43,79,.08);
  --c-card-foot:rgba(255,255,255,.62);--c-card-foot-edge:rgba(255,255,255,.85);--c-card-shadow:0 10px 22px -8px rgba(20,50,110,.38),0 2px 4px rgba(20,50,110,.12);
  /* the card pull */
  --c-rv-bg:radial-gradient(120% 75% at 50% 36%,#ffffff 0%,#dff0ff 30%,#a9d6fb 70%,#7fbef2 100%);--c-rv-ink:var(--lx-ink);--c-rv-ink2:var(--lx-ink2);
  --c-rv-chip:rgba(255,255,255,.6);--c-rv-chip-edge:rgba(255,255,255,.9);
  /* frosted glass over the landscape (home, the top bar, the bottom bar) */
  --fr-bg:linear-gradient(180deg,rgba(52,102,196,.88) 0%,rgba(40,86,176,.88) 100%);   /* 13.5: deep enough for white words at 4.5:1 */
  --fr-bg-strong:linear-gradient(180deg,#ffffff,#eef6ff);
  --fr-edge:rgba(255,255,255,.5);
  --fr-shadow:0 10px 26px rgba(24,64,140,.2),inset 0 1px 0 rgba(255,255,255,.45);
  --fr-blur:blur(22px) saturate(1.6);
  --fr-ink:#ffffff;--fr-ink2:rgba(255,255,255,.88);--fr-label:#e2f2ff;--fr-text-shadow:0 1px 2px rgba(20,56,130,.35);
  --fr-float-ink:#ffffff;--fr-float-shadow:0 1px 2px rgba(16,44,104,.5),0 2px 14px rgba(16,44,104,.42);
  /* the old look's names, pointed at the new colours */
  --white:var(--lx-pearl);--accent:var(--c-accent);--muted:var(--lx-pearl2);
}
/* inside a panel the old names follow the panel's colours; over a game they stay light */
html.glow dialog.lx-panel:not(.is-playing):not(.is-arena){--white:var(--c-text);--muted:var(--c-text2)}
/* ---- dark mode ---- */
html.glow[data-lux="dusk"]{
  --c-page:linear-gradient(180deg,#0e2150 0%,#163170 50%,#0b1838 100%);
  --c-text:var(--lx-pearl);--c-text2:var(--lx-pearl2);--c-text3:var(--lx-pearl3);
  --c-accent:var(--lx-sky2);--c-accent-text:#8fd2ff;--c-accent-soft:rgba(121,200,255,.12);
  --c-panel:radial-gradient(120% 50% at 50% 0%,rgba(120,180,255,.16) 0%,rgba(120,180,255,0) 60%),linear-gradient(180deg,#24407e 0%,#142856 46%,#0c1a3c 100%);
  --c-panel-edge:rgba(170,205,255,.16);--c-panel-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 32px 80px rgba(0,6,24,.6);
  --c-header-fade:none;--c-panel-solid:#1d3670;
  --c-tile:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));--c-tile-edge:rgba(170,205,255,.15);
  --c-tile-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,6,24,.25);
  --c-soft:linear-gradient(180deg,rgba(121,200,255,.12),rgba(121,200,255,.06));--c-soft-edge:rgba(121,200,255,.2);
  --c-hair:rgba(170,205,255,.12);
  --c-track:rgba(0,8,30,.32);--c-track-edge:rgba(170,205,255,.1);
  --c-pill:linear-gradient(180deg,#ffffff,#e9f2ff);--c-pill-ink:var(--lx-ink);--c-pill-shadow:0 6px 16px rgba(0,8,30,.35);
  --c-chip:rgba(255,255,255,.07);--c-chip-ink:var(--lx-pearl2);--c-chip-edge:rgba(170,205,255,.16);
  --c-chip-on:linear-gradient(180deg,#ffffff,#e9f2ff);--c-chip-on-ink:var(--lx-ink);
  --c-input:rgba(0,8,30,.35);--c-input-edge:rgba(170,205,255,.16);--c-input-ink:var(--lx-pearl);
  --c-close:rgba(255,255,255,.1);--c-close-ink:#ffffff;--c-close-edge:rgba(255,255,255,.14);
  --c-second:rgba(255,255,255,.1);--c-second-ink:#ffffff;--c-second-edge:rgba(255,255,255,.2);
  --c-scrim:rgba(4,12,36,.72);
  --c-bar-fade:linear-gradient(180deg,rgba(14,28,62,0),rgba(14,28,62,.94) 34%,rgba(14,28,62,.98));
  --c-toast:rgba(22,42,90,.94);--c-toast-ink:var(--lx-pearl);
  --c-card-top:#2a457f;--c-card-bot:#13254f;--c-card-glow:#4f74b8;--c-card-ink:#ffffff;--c-card-ink2:var(--lx-pearl3);
  --c-card-tag:rgba(255,255,255,.14);--c-card-tag-ink:#ffffff;--c-card-tag-edge:rgba(255,255,255,.12);
  --c-card-foot:rgba(0,8,30,.28);--c-card-foot-edge:rgba(255,255,255,.06);--c-card-shadow:0 12px 26px -8px rgba(0,6,24,.7),0 2px 4px rgba(0,6,24,.3);
  --c-rv-bg:radial-gradient(120% 75% at 50% 38%,#24488f 0%,#122a5c 45%,#081534 100%);--c-rv-ink:var(--lx-pearl);--c-rv-ink2:var(--lx-pearl2);
  --c-rv-chip:rgba(255,255,255,.1);--c-rv-chip-edge:rgba(255,255,255,.18);
  --fr-bg:linear-gradient(180deg,rgba(34,58,116,.66) 0%,rgba(16,32,72,.6) 100%);
  --fr-bg-strong:linear-gradient(180deg,#ffffff,#e9f2ff);
  --fr-edge:rgba(170,205,255,.22);
  --fr-shadow:0 12px 30px rgba(0,8,30,.4),inset 0 1px 0 rgba(255,255,255,.12);
  --fr-ink:#ffffff;--fr-ink2:var(--lx-pearl2);--fr-label:#a9dcff;--fr-text-shadow:none;
  --fr-float-ink:#ffffff;--fr-float-shadow:0 1px 8px rgba(0,8,30,.75),0 1px 2px rgba(0,8,30,.6);
}
/* the three colour looks change the accent and the night's hue */
html.glow[data-theme="green"]{--lx-sky:#16a98d;--lx-sky2:#6fe3c8;--lx-navy1:#1f5a5c;--lx-navy2:#14403f;--lx-navy3:#0a2627;--c-accent-text:#0a7462;--c-accent-soft:#e1f8f2;--lx-holo:linear-gradient(120deg,#9ff0d6 0%,#ffe6a0 50%,#9fe0ff 100%)}
html.glow[data-theme="green"][data-lux="dusk"]{--c-accent-text:#7ef0d4;--c-accent-soft:rgba(111,227,200,.12);
  --c-page:linear-gradient(180deg,#0a2e30 0%,#114846 50%,#06201f 100%);
  --c-panel:radial-gradient(120% 50% at 50% 0%,rgba(120,255,220,.14) 0%,rgba(120,255,220,0) 60%),linear-gradient(180deg,#1f5a5c 0%,#14403f 46%,#0a2627 100%);
  --c-header-fade:none;--c-panel-solid:#1b4f50;
  --c-card-top:#245e5a;--c-card-bot:#0f3532;--c-card-glow:#3f8f86;--c-rv-bg:radial-gradient(120% 75% at 50% 38%,#1f6b66 0%,#0f3b39 45%,#06201f 100%);
  --fr-bg:linear-gradient(180deg,rgba(30,92,90,.66) 0%,rgba(12,48,46,.6) 100%)}
html.glow[data-theme="green"]:not([data-lux="dusk"]){--c-page:linear-gradient(180deg,#8fe6d4 0%,#cdf3ea 55%,#f0fbf8 100%);
  --c-panel:radial-gradient(130% 60% at 50% 0%,rgba(205,246,234,.9) 0%,rgba(205,246,234,0) 60%),#f8fffd;--c-second-ink:#0a7462;--c-second-edge:rgba(22,169,141,.24)}
html.glow[data-theme="pink"]{--lx-sky:#e8609f;--lx-sky2:#ffaed2;--lx-navy1:#6b2f63;--lx-navy2:#4b2047;--lx-navy3:#2c1029;--c-accent-text:#b0336f;--c-accent-soft:#ffeef6}
html.glow[data-theme="pink"][data-lux="dusk"]{--c-accent-text:#ffb3d8;--c-accent-soft:rgba(255,174,210,.12);
  --c-page:linear-gradient(180deg,#3a1236 0%,#56204f 50%,#240a22 100%);
  --c-panel:radial-gradient(120% 50% at 50% 0%,rgba(255,170,220,.14) 0%,rgba(255,170,220,0) 60%),linear-gradient(180deg,#6b2f63 0%,#4b2047 46%,#2c1029 100%);
  --c-header-fade:none;--c-panel-solid:#5f2a59;
  --c-card-top:#6a2f64;--c-card-bot:#36143a;--c-card-glow:#9a5294;--c-rv-bg:radial-gradient(120% 75% at 50% 38%,#7a3070 0%,#45173f 45%,#240a22 100%);
  --fr-bg:linear-gradient(180deg,rgba(104,44,96,.66) 0%,rgba(58,20,54,.6) 100%)}
html.glow[data-theme="pink"]:not([data-lux="dusk"]){--c-page:linear-gradient(180deg,#ffc2df 0%,#ffe2ef 55%,#fff6fa 100%);
  --c-panel:radial-gradient(130% 60% at 50% 0%,rgba(255,224,240,.9) 0%,rgba(255,224,240,0) 60%),#fffafd;--c-second-ink:#b0336f;--c-second-edge:rgba(232,96,159,.24)}

/* =================================================================================================
   BASICS
   ================================================================================================= */
html.glow,html.glow body{font-family:var(--lx-font)!important;font-weight:500;-webkit-font-smoothing:antialiased}
html.glow :is(button,input,select,textarea,label,h1,h2,h3,h4){font-family:inherit!important}
html.glow .micro{font-family:inherit!important}
html.glow body{background:var(--c-page) fixed!important}

/* ---- buttons ----------------------------------------------------------------------------------- */
html.glow .primary-button:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){
  font-weight:400!important;letter-spacing:.02em!important;font-size:15.5px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important;
  color:var(--lx-sun-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
  background:linear-gradient(180deg,var(--lx-sun1) 0%,var(--lx-sun2) 52%,var(--lx-sun3) 100%)!important;
  border:0!important;border-radius:16px!important;min-height:52px;padding-left:14px;padding-right:14px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(190,100,0,.22),0 10px 24px -8px rgba(255,160,20,.75),0 2px 4px rgba(120,60,0,.18)!important;
  transition:transform .15s var(--lx-ease),box-shadow .2s,filter .2s!important}
html.glow .primary-button:not(:is(.topbar,#home,.bottom-nav,#title-screen) *) span{color:inherit!important;opacity:.6}
html.glow .secondary-button:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){
  font-weight:400!important;letter-spacing:.02em!important;color:var(--c-second-ink)!important;text-shadow:none!important;
  background:var(--c-second)!important;border:1px solid var(--c-second-edge)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -8px rgba(30,90,170,.35)!important;transition:transform .15s var(--lx-ease)!important}
html.glow :is(.primary-button,.secondary-button):not(:is(.topbar,#home,.bottom-nav,#title-screen) *):not(:disabled):active{filter:brightness(.98)}
html.glow :is(.primary-button,.secondary-button):disabled{filter:saturate(.3);opacity:.6}
html.glow .text-button:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){color:var(--c-accent-text)!important;font-weight:400!important;letter-spacing:.01em!important}
html.glow .close-dialog:not(.text-button):not(:is(.topbar,#home,.bottom-nav,#title-screen) *){
  width:38px!important;height:38px!important;border-radius:50%!important;font-size:15px!important;font-weight:400!important;outline:none!important;
  color:var(--c-close-ink)!important;background:var(--c-close)!important;border:1px solid var(--c-close-edge)!important;box-shadow:0 4px 12px rgba(20,50,110,.12)!important}

html.glow .icon-button:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){border-radius:50%!important}

/* =================================================================================================
   PANELS. Every popup is a panel (glow-ui.js marks them .lx-panel), except the card pull. While a
   game is being played its dialog is the game's own screen, so it isn't styled as a panel.
   ================================================================================================= */
html.glow dialog::backdrop{background:var(--c-scrim)!important;-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
html.glow dialog.lx-panel:not(.is-playing):not(.is-arena){
  background:var(--c-panel)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--c-panel-edge)!important;border-radius:28px!important;color:var(--c-text)!important;box-shadow:var(--c-panel-shadow)!important}
/* everything inside takes the panel's text colour; the few things with a colour of their own get it back below */
html.glow dialog.lx-panel :where(p,span,small,label,li,dd,dt,em,i,b,strong,h1,h2,h3,h4,h5,summary,a,td,th,div,time,output,legend,figcaption):where(:not(.arena *,.is-playing *,.is-arena *,.arena,.rescue-hud *)):where(:not([style*="color"])){color:inherit!important}
html.glow .lx-panel :is(.micro,.scuffle-help,.binder-footnote,.settings-intro,.storage-note,.detail-meta,.detail-description,.fav-help,.haul-total,.quest-door-text span,.card-when,.card-class,.debug-label,.version,.world-demo-note,.friends-status,dd,small,.empty,.hint){color:var(--c-text2)!important}
html.glow .lx-panel :is(.quest-door-text b,dt,summary,h3,h4){color:var(--c-text)!important}
html.glow .lx-panel :is(.quest-door-prize,.text-button,a){color:var(--c-accent-text)!important}
html.glow .lx-panel .quest-door-go{color:var(--c-text3)!important}
html.glow .lx-panel :is(.card-new,.quest-door-new){color:var(--lx-new)!important}
html.glow .lx-panel .series-tag{color:#fff!important}
html.glow .lx-panel .rarity-label b,html.glow .lx-panel .rarity>span:nth-child(2){color:color-mix(in srgb,var(--rarity-color,#ffb000) 62%,var(--c-text))!important}
html.glow .lx-panel hr{border-color:var(--c-hair)!important}
html.glow .lx-panel .progress-track{background:var(--c-track)!important}
html.glow .lx-panel .progress-track>div{background:linear-gradient(90deg,var(--lx-sky2),var(--lx-sky))!important}
/* the title ribbon */
html.glow dialog .panel-header{background:none!important}
html.glow .friends-dialog .panel-header{position:relative!important;top:auto!important;background:none!important;padding-top:4px!important}
html.glow dialog .panel-header h2{position:relative;isolation:isolate;display:inline-block;font-size:22px!important;line-height:1.25!important;color:#fff!important;padding:5px 18px 6px 16px;margin-top:4px;text-shadow:0 1px 2px rgba(10,50,120,.25);background:none!important}
html.glow dialog .panel-header h2::before{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc(100% + 150px);border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,var(--lx-sky) 0%,color-mix(in srgb,var(--lx-sky) 70%,var(--lx-sky2)) 45%,var(--lx-sky2) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.55) 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.55) 70%,transparent 100%)}
html.glow .lx-panel .panel-header .micro{color:var(--c-accent-text)!important;margin:0 0 2px 4px!important}
/* tiles, cards and rows inside a panel */
html.glow .lx-panel :is(.setting-row,.account-restore,.setting-block,.look-option,.scene-option,.mode-option,.howto,.quest-door,.play-card,.chest-tier,.event-row,.family-week,.friend-card,.friend-request,.safari-today,.safari-ticket,.safari-shop-row,.safari-log,.safari-resume,.haul-row,.featured-card,.mark-row,.run-route,.tide-card,.rescue-world,.scuffle-mode,.ladder-card,.offer-card,.trade-card,.market-row,.shop-row,.chest-offer){
  background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;box-shadow:var(--c-tile-shadow)!important;border-radius:18px!important;transition:transform .2s var(--lx-ease),box-shadow .25s!important}

html.glow .lx-panel .setting-row{border-bottom-width:1px!important}
html.glow .lx-panel :is(.look-option,.scene-option,.mode-option).is-on{box-shadow:0 0 0 2px var(--lx-sky),var(--c-tile-shadow)!important}
/* soft notes (a box of information, not a button) */
html.glow .lx-panel :is(.games-chests,.world-demo-note,.family-table,.notice,.note-box){background:var(--c-soft)!important;border:1px solid var(--c-soft-edge)!important;box-shadow:none!important;border-radius:16px!important}
html.glow .lx-panel .games-chests .games-count{color:var(--c-accent-text)!important}
/* the pixel-art pictures on doors sit in a soft window */
html.glow .lx-panel .quest-door-art{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.9) 0%,var(--c-accent-soft) 70%);border-radius:14px}
html.glow[data-lux="dusk"] .lx-panel .quest-door-art{background:radial-gradient(circle at 50% 40%,rgba(121,200,255,.22) 0%,rgba(121,200,255,.05) 70%)}

/* ---- tabs, chips and switches ------------------------------------------------------------------- */
html.glow :is([role="tablist"],.filter-tabs,.collection-switch,.variant-switch){
  background:var(--c-track)!important;border:1px solid var(--c-track-edge)!important;border-radius:999px!important;padding:4px!important;gap:3px!important;box-shadow:inset 0 1px 3px rgba(20,40,90,.08)!important}
html.glow :is([role="tablist"],.filter-tabs,.collection-switch,.variant-switch)>button{
  border-radius:999px!important;border:0!important;background:transparent!important;color:var(--c-text2)!important;font-weight:400!important;letter-spacing:.01em!important;box-shadow:none!important;min-height:34px;transition:background .25s,color .2s!important}
html.glow :is([role="tablist"],.filter-tabs,.collection-switch,.variant-switch)>button:is(.selected,.active,[aria-selected="true"],[aria-pressed="true"]){
  background:var(--c-pill)!important;color:var(--c-pill-ink)!important;box-shadow:var(--c-pill-shadow)!important}
html.glow .filter-tabs{flex-wrap:wrap;border-radius:20px!important}
html.glow .switch{border:0!important;background:var(--c-track)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
html.glow .switch::before{background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.2)}
html.glow input:checked+.switch{background:linear-gradient(180deg,#59d6b4,var(--lx-mint))!important}
/* chips that stand alone (filters, families, classes) */
html.glow :is(#collection-dialog .show-pills button,.class-chips button,#family-strip button,#class-filter button,.family-strip button,.chip,.pick-pills button){
  border:1px solid var(--c-chip-edge)!important;background:var(--c-chip)!important;color:var(--c-chip-ink)!important;box-shadow:0 2px 6px rgba(20,60,130,.06)!important;font-weight:400!important;border-radius:999px!important}
html.glow :is(#collection-dialog .show-pills button.selected,.class-chips button[aria-pressed="true"],#family-strip button[aria-pressed="true"],#class-filter button[aria-pressed="true"],.family-strip button[aria-pressed="true"],.chip.is-on,.pick-pills button[aria-pressed="true"]){
  background:var(--c-chip-on)!important;color:var(--c-chip-on-ink)!important;border-color:transparent!important;box-shadow:0 6px 14px rgba(20,40,90,.25)!important}
html.glow #collection-dialog .show-pills{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}

/* ---- inputs ------------------------------------------------------------------------------------- */
html.glow :is(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"],input:not([type]),select,textarea){
  border-radius:14px!important;font-weight:400;border:1px solid var(--c-input-edge)!important;background-color:var(--c-input)!important;color:var(--c-input-ink)!important;box-shadow:inset 0 1px 3px rgba(20,40,90,.08)!important}
html.glow :is(input,select,textarea):focus-visible{outline:2px solid var(--lx-sky)!important;outline-offset:2px}
html.glow ::placeholder{color:var(--c-text3);opacity:1}
html.glow select option{color:var(--lx-ink);background:#fff}

/* ---- little tags -------------------------------------------------------------------------------- */
html.glow .series-tag:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){font-weight:400!important;font-size:10.5px!important;letter-spacing:.06em!important;border:0!important;border-radius:999px!important;padding:3px 9px!important;
  background:linear-gradient(180deg,#2f86d8,#1a63b4)!important;color:#fff!important;text-shadow:0 1px 1px rgba(0,40,100,.25);box-shadow:0 3px 8px rgba(26,99,180,.28)!important}
html.glow .series-tag[data-series="forma"]:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){background:linear-gradient(180deg,#d84d90,#b52c6e)!important;box-shadow:0 3px 8px rgba(181,44,110,.28)!important}
/* class tags (Sly, Bold, Calm): a soft tinted chip */
html.glow .class-tag:not(:is(.topbar,#home,.bottom-nav,#title-screen) *){border:0!important;border-radius:999px!important;font-weight:400!important;background:color-mix(in srgb,var(--class-color,#a9c4da) 26%,#ffffff)!important;color:color-mix(in srgb,var(--class-color,#a9c4da) 40%,#1d2b4f)!important;box-shadow:none!important}
html.glow[data-lux="dusk"] .lx-panel .class-tag{background:color-mix(in srgb,var(--class-color,#a9c4da) 26%,transparent)!important;color:color-mix(in srgb,var(--class-color,#a9c4da) 60%,#ffffff)!important}
/* "New": the bright yellow word with a little sparkle */
html.glow :is(.card-new,.quest-door-new){background:none!important;border:0!important;color:var(--lx-new)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.01em!important;
  text-shadow:0 1px 0 rgba(120,70,0,.25),0 0 10px rgba(255,190,11,.45)!important;position:relative;padding:0 2px!important;box-shadow:none!important}
html.glow :is(.card-new,.quest-door-new)::after{content:'';position:absolute;left:50%;bottom:-6px;width:7px;height:7px;margin-left:-3.5px;background:var(--lx-new);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---- toast -------------------------------------------------------------------------------------- */
html.glow .toast{font-weight:400!important;letter-spacing:.01em!important;color:var(--c-toast-ink)!important;background:var(--c-toast)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--c-panel-edge)!important;border-radius:18px!important;box-shadow:0 18px 40px rgba(10,30,80,.3)!important;text-shadow:none!important}

/* ---- big doors with painted art (Games, Quests) -------------------------------------------------- */
html.glow .quest-door.has-art{flex-direction:column!important;align-items:stretch!important;padding:0!important;overflow:hidden;gap:0!important}
html.glow .quest-door.has-art::before{content:'';display:block;aspect-ratio:16/7;background:var(--art) center 38%/cover no-repeat;border-radius:17px 17px 0 0}
html.glow .quest-door.has-art .quest-door-art{display:none}
html.glow .quest-door.has-art .quest-door-text{padding:12px 16px 14px}
html.glow .quest-door.has-art .quest-door-go{position:absolute;right:14px;bottom:14px}

/* the logo in the top bar (the rest of home is the old look; light mode is below) */
html.glow .wordmark{gap:0!important}
html.glow .wordmark .brand-mark,html.glow .wordmark .wordmark-text,html.glow .wordmark .edition{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.glow .glow-logo{display:block;height:46px;width:auto;margin:-4px 0 -4px -6px;filter:drop-shadow(0 4px 10px rgba(8,24,70,.35));transition:transform .3s var(--lx-ease)}
html.glow .wordmark:active .glow-logo{transform:scale(.96)}
@media(max-width:389px){html.glow .glow-logo{height:38px}}

/* =================================================================================================
   TRADING CARDS: every pal in the collection is a card. A thin metal frame in its rarity's colour,
   a soft light behind the pal, a sheen that follows your finger, and a holo on shinies. Light faces
   in light mode, deep blue faces in dark mode.
   ================================================================================================= */
html.glow .creature-card,html.glow .detail-portrait,html.glow .reveal-card{
  --foil:linear-gradient(135deg,#ffffff 0%,#c7d1dc 30%,#f4f7fa 52%,#a9b6c4 75%,#eef2f6 100%);--tint:#b8c6d8;--star:#9fb0c6;
}
html.glow :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="2"]{--foil:linear-gradient(135deg,#f0fff6 0%,#8fe0b5 30%,#e4fbef 52%,#4fbf86 75%,#d7f6e5 100%);--tint:#86e0b0;--star:#3fbf7f}
html.glow :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="3"]{--foil:linear-gradient(135deg,#f0f9ff 0%,#8ccbff 30%,#e3f3ff 52%,#4c9cf0 75%,#d5ecff 100%);--tint:#83c6ff;--star:#3f95f0}
html.glow :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="4"]{--foil:linear-gradient(135deg,#faf4ff 0%,#c4a8ff 30%,#efe6ff 52%,#9270e8 75%,#e6dbff 100%);--tint:#b89cff;--star:#8f6cf0}
html.glow :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="5"]{--foil:linear-gradient(135deg,#fffbe8 0%,#ffd76a 30%,#fff3c2 52%,#e9a52a 75%,#ffeaa6 100%);--tint:#ffd36b;--star:#f0a51c}
html.glow :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="6"]{--foil:linear-gradient(135deg,#ffffff 0%,#ffe0f0 20%,#e0f4ff 40%,#fff5d9 60%,#e6e0ff 80%,#ffffff 100%);--tint:#ffd9ef;--star:#f08cc0}
html.glow[data-lux="dusk"] :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="6"]{--star:#ffb8de}
html.glow[data-lux="dusk"] :is(.creature-card,.detail-portrait,.reveal-card)[data-tier="1"],html.glow[data-lux="dusk"] :is(.creature-card,.detail-portrait,.reveal-card):not([data-tier]){--star:#c8d4e4}

html.glow .collection-grid{gap:12px!important}
html.glow .creature-card{
  position:relative;overflow:visible!important;height:auto!important;min-height:0!important;aspect-ratio:5/7.2;padding:0!important;
  display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;
  border:3px solid transparent!important;border-radius:16px!important;
  background:
    radial-gradient(85% 55% at 50% 36%,var(--c-card-glow) 0%,color-mix(in srgb,var(--tint) 40%,var(--c-card-glow)) 45%,transparent 75%) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--tint) 18%,var(--c-card-top)) 0%,color-mix(in srgb,var(--tint) 30%,var(--c-card-bot)) 100%) padding-box,
    var(--foil) border-box!important;
  box-shadow:var(--c-card-shadow)!important;
  transition:transform .18s var(--lx-ease),box-shadow .3s!important;color:var(--c-card-ink)!important}
html.glow .creature-card.is-tilting{transition:transform .08s linear,box-shadow .2s!important;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);z-index:2;
  box-shadow:0 22px 40px -10px rgba(20,50,110,.5),0 2px 6px rgba(20,50,110,.14)!important}

/* the sheen that follows the finger */
html.glow .creature-card::before{content:'';position:absolute;inset:-3px;border-radius:16px;pointer-events:none;z-index:3;
  background:radial-gradient(circle at var(--mx,50%) var(--my,25%),rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 50%);opacity:0;transition:opacity .35s;mix-blend-mode:soft-light}
html.glow .creature-card.is-tilting::before{opacity:1}
/* the holo on shinies: a soft opal light under the pal, not stripes */
html.glow .creature-card::after{content:''!important;position:absolute!important;inset:-3px!important;height:auto!important;border-radius:16px!important;pointer-events:none;z-index:2;opacity:0!important;background:none}
html.glow .creature-card:is(.shiny-card,.prism-card)::after{opacity:calc(.5 + var(--hyp,0)*.4)!important;mix-blend-mode:soft-light;filter:saturate(1.2);
  background:linear-gradient(115deg,rgba(255,170,220,0) 10%,rgba(255,170,220,.85) 28%,rgba(170,230,255,.9) 44%,rgba(255,240,170,.85) 60%,rgba(200,180,255,.8) 76%,rgba(255,170,220,0) 92%) var(--mx,30%) var(--my,30%)/280% 280%!important;
  animation:lx-holo 7s ease-in-out infinite}
html.glow[data-lux="dusk"] .creature-card:is(.shiny-card,.prism-card)::after{mix-blend-mode:screen;opacity:calc(.28 + var(--hyp,0)*.3)!important}
html.glow .creature-card.prism-card::after{opacity:calc(.7 + var(--hyp,0)*.3)!important;animation-duration:4s}
@keyframes lx-holo{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
html.glow .creature-card.is-tilting::after{animation:none}
/* number, level and status tags */
html.glow .creature-card :is(.card-number,.card-level,.card-fuse,.card-togo){position:absolute!important;z-index:4;font-weight:400!important;letter-spacing:.03em!important;line-height:1.5;
  padding:1px 7px!important;border-radius:999px!important;color:var(--c-card-tag-ink)!important;background:var(--c-card-tag)!important;border:1px solid var(--c-card-tag-edge)!important;box-shadow:0 1px 3px rgba(20,50,110,.08)!important;text-shadow:none!important;opacity:1!important}
html.glow .creature-card .card-number{left:6px!important;top:6px!important}
html.glow .creature-card :is(.card-level,.card-fuse,.card-togo){right:6px!important;top:6px!important;left:auto!important}
html.glow .creature-card .card-level{color:var(--c-accent-text)!important}
html.glow .creature-card .card-fuse{background:var(--lx-mint)!important;color:#fff!important;border-color:transparent!important}
html.glow .creature-card .card-new{position:absolute!important;right:7px!important;top:4px!important;left:auto!important;z-index:5;font-size:12px!important;animation:lx-new 2.4s ease-in-out infinite}
@keyframes lx-new{50%{transform:translateY(-1.5px)}}
/* the pal */
html.glow .creature-card>canvas,html.glow .creature-card .card-art{margin-top:16%!important;width:70%!important;height:auto!important;aspect-ratio:1;flex:none;
  filter:drop-shadow(0 6px 6px rgba(20,50,110,.22))}
html.glow .creature-card .card-art canvas{width:100%!important;height:auto!important}
html.glow .creature-card>canvas,html.glow .creature-card .card-art,html.glow .detail-portrait .detail-sprite,html.glow .reveal-card #reveal-canvas{position:relative;z-index:4}
/* the name plate */
html.glow .creature-card .card-name{font-weight:400!important;line-height:1.2!important;letter-spacing:.01em!important;color:var(--c-card-ink)!important;text-shadow:none!important;
  margin:auto 0 0!important;padding:0 6px;min-height:0!important;text-align:center}
html.glow .creature-card .card-coat{font-weight:400;color:var(--c-card-ink2)!important;letter-spacing:.01em!important;margin-top:1px}
html.glow .creature-card .card-coat.shiny-name{color:#8a5d00!important}
html.glow[data-lux="dusk"] .creature-card .card-coat.shiny-name{color:#ffd66b!important}
html.glow .creature-card .card-coat.prism-name{background:linear-gradient(90deg,#ef6fb0,#e5a400,#26b5a0,#3c9cf0,#8f6cf0);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html.glow .creature-card .rarity-label{min-height:0!important;margin:2px 0 0;gap:2px}
html.glow .creature-card .rarity-label b{display:none}
html.glow .creature-card .card-footer{width:100%;margin:5px 0 0!important;padding:5px 8px 6px!important;justify-content:space-between;background:var(--c-card-foot);border-top:1px solid var(--c-card-foot-edge);border-radius:0 0 13px 13px;min-height:0!important}
html.glow .creature-card :is(.card-series,.card-class,.card-when){letter-spacing:.04em!important;color:var(--c-card-ink2)!important}
html.glow .creature-card .class-tag{min-height:0!important}
/* not found yet: the back of a card */
html.glow .creature-card.undiscovered{
  background:
    radial-gradient(60% 40% at 50% 38%,rgba(255,255,255,.14) 0%,transparent 70%) padding-box,
    linear-gradient(180deg,#2a4787,#16295a) padding-box,
    linear-gradient(135deg,#7fa3e0,#3d5ea8 50%,#7fa3e0) border-box!important}
html.glow .creature-card.undiscovered>canvas,html.glow .creature-card.undiscovered .card-art{opacity:.6;filter:brightness(.35) drop-shadow(0 0 8px rgba(160,210,255,.35))}
html.glow .creature-card.undiscovered :is(.card-name,.card-number){color:var(--lx-pearl3)!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
html.glow .creature-card.undiscovered .card-footer{background:rgba(0,8,30,.25);border-top-color:rgba(255,255,255,.06)}

/* ---- the pal page: one big card ---------------------------------------------------------------- */
html.glow .detail-portrait{
  width:min(260px,66vw)!important;aspect-ratio:5/6.2;margin:12px auto 8px!important;display:grid!important;place-items:center;position:relative;
  border:4px solid transparent!important;border-radius:24px!important;
  background:
    radial-gradient(80% 60% at 50% 42%,var(--c-card-glow) 0%,color-mix(in srgb,var(--tint) 45%,var(--c-card-glow)) 48%,transparent 78%) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--tint) 20%,var(--c-card-top)),color-mix(in srgb,var(--tint) 34%,var(--c-card-bot))) padding-box,
    var(--foil) border-box!important;
  box-shadow:0 26px 50px -16px rgba(20,50,110,.5),0 3px 8px rgba(20,50,110,.14)!important;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s var(--lx-ease);transform-style:preserve-3d}
html.glow .detail-portrait.is-tilting{transition:transform .08s linear}
html.glow .detail-portrait .detail-sprite{width:88%!important;height:auto!important;transform:translateZ(30px);filter:drop-shadow(0 10px 10px rgba(20,50,110,.25))}
html.glow .detail-portrait::after{content:'';position:absolute;inset:-4px;border-radius:24px;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.6),transparent 52%);mix-blend-mode:soft-light;opacity:.9}
html.glow .detail-portrait:is(.shiny,.prism)::before{content:'';position:absolute;inset:-4px;border-radius:24px;pointer-events:none;mix-blend-mode:soft-light;opacity:calc(.55 + var(--hyp,0)*.4);
  background:linear-gradient(115deg,transparent 10%,rgba(255,170,220,.85) 28%,rgba(170,230,255,.9) 44%,rgba(255,240,170,.85) 60%,rgba(200,180,255,.8) 76%,transparent 92%) var(--mx,30%) var(--my,30%)/280% 280%;
  animation:lx-holo 7s ease-in-out infinite}
html.glow[data-lux="dusk"] .detail-portrait:is(.shiny,.prism)::before{mix-blend-mode:screen;opacity:calc(.3 + var(--hyp,0)*.3)}
html.glow .detail-portrait.is-tilting::before{animation:none}
html.glow .detail-portrait.is-unknown .detail-sprite{filter:brightness(.3)}

/* =================================================================================================
   THE CARD PULL: the chest bursts, a soft bloom of the rarity's colour opens behind it, light shafts
   turn slowly, sparkles drift up, and the card flies out spinning and lands with a flash of light.
   Bright sky in light mode, deep night in dark mode.
   ================================================================================================= */
html.glow .reveal-dialog{background:var(--c-rv-bg)!important;color:var(--c-rv-ink)!important}
html.glow .reveal-dialog::backdrop{background:var(--lx-navy3)!important}
html.glow[data-lux="day"] .reveal-dialog::backdrop{background:#9fd3f8!important}
html.glow #reveal-effects{display:none!important}
html.glow .reveal-light{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
html.glow .reveal-light i{position:absolute;left:var(--lx-cx,50%);top:var(--lx-cy,34%);display:block;border-radius:50%}
html.glow .rl-bloom{width:240vmin;height:240vmin;margin:-120vmin 0 0 -120vmin;opacity:0;transform:scale(.3);
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--reveal-color,#9fd0ff) 75%,#fff) 0%,color-mix(in srgb,var(--reveal-color,#9fd0ff) 62%,transparent) 26%,color-mix(in srgb,var(--reveal-color,#9fd0ff) 26%,transparent) 50%,transparent 80%);
  filter:blur(18px);transition:opacity .7s ease,transform 1.4s var(--lx-ease)}
html.glow .rl-shafts{width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--reveal-color,#9fd0ff) 55%,rgba(255,255,255,.5)) 6deg,transparent 13deg,transparent 30deg);
  -webkit-mask:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.75) 16%,rgba(0,0,0,.35) 34%,transparent 58%);mask:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.75) 16%,rgba(0,0,0,.35) 34%,transparent 58%);
  filter:blur(16px);mix-blend-mode:screen;transition:opacity 1.2s ease}
html.glow[data-lux="day"] .rl-shafts{mix-blend-mode:normal;background:repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.85) 6deg,transparent 13deg,transparent 30deg)}
html.glow .rl-flash{width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 20%,transparent 55%)}
html.glow .reveal-dialog.is-lit .rl-bloom{opacity:1;transform:scale(1)}
html.glow .reveal-dialog.is-lit .rl-shafts{opacity:.9;animation:lx-turn 90s linear infinite}
html.glow .reveal-dialog.is-landed .rl-flash{animation:lx-flash .9s ease-out both}
@keyframes lx-turn{to{transform:rotate(360deg)}}
@keyframes lx-flash{0%{opacity:0;transform:scale(.5)}18%{opacity:.9}100%{opacity:0;transform:scale(1.4)}}
html.glow[data-lux="dusk"] .reveal-dialog:is(.secret-reveal,.prism-reveal) .rl-shafts{background:repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,200,235,.55) 6deg,transparent 13deg,transparent 24deg,rgba(190,235,255,.55) 30deg,transparent 37deg,transparent 48deg,rgba(255,240,190,.55) 54deg,transparent 61deg)}
html.glow[data-lux="day"] .reveal-dialog:is(.secret-reveal,.prism-reveal) .rl-shafts{background:repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,214,240,.9) 6deg,transparent 13deg,transparent 24deg,rgba(214,240,255,.9) 30deg,transparent 37deg,transparent 48deg,rgba(255,246,214,.9) 54deg,transparent 61deg)}
html.glow .glow-motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
html.glow .reveal-stage{z-index:2;position:relative}
html.glow .reveal-stage{--cw:min(232px,62vw,calc((100dvh - 470px)*.78));--ch:calc(var(--cw)*1.4)}
html.glow .reveal-chest{display:block;width:200px!important;height:200px!important;flex:none;transition:opacity .3s,transform .4s cubic-bezier(.4,0,.6,1)}
html.glow .reveal-dialog.is-lit .reveal-chest{opacity:0;transform:translateY(30px) scale(.7)}
html.glow .reveal-cardslot{position:relative;width:calc(var(--cw) + 10px);height:calc(var(--ch) + 10px);flex:none;perspective:1000px;margin-top:calc(-100px - var(--ch)/2 - 5px)}
html.glow .reveal-card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:5/7;margin:0;translate:-50% -50%;transform-style:preserve-3d;opacity:0;pointer-events:none;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(calc(var(--spin,0deg) + var(--ry,0deg))) scale(var(--scale,.25))}
html.glow .reveal-dialog.is-lit .reveal-card{opacity:1;pointer-events:auto;animation:lx-fly var(--fly,900ms) cubic-bezier(.16,.8,.24,1) both}
html.glow .reveal-dialog.is-landed .reveal-card{animation:lx-land .7s var(--lx-ease) both}
@keyframes lx-fly{0%{transform:perspective(1000px) translateY(90px) rotateY(0deg) scale(.2)}
  72%{transform:perspective(1000px) translateY(-8px) rotateY(calc(var(--turns,2) * -360deg + 30deg)) scale(1.02)}
  100%{transform:perspective(1000px) translateY(0) rotateY(calc(var(--turns,2) * -360deg)) scale(1)}}
@keyframes lx-land{0%{transform:perspective(1000px) scale(1.07)}100%{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1)}}
html.glow .reveal-dialog.is-settled .reveal-card{animation:none;transition:transform .55s var(--lx-ease);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1)}
html.glow .reveal-dialog.is-settled .reveal-card.is-tilting{transition:transform .08s linear}
html.glow .rc-face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid transparent;
  box-shadow:0 0 70px -6px color-mix(in srgb,var(--reveal-color,#9fd0ff) 70%,transparent),0 28px 50px -12px rgba(0,6,24,.45)}
html.glow .rc-front{display:flex;flex-direction:column;align-items:center;overflow:hidden;color:var(--c-card-ink);
  background:
    radial-gradient(85% 55% at 50% 40%,var(--c-card-glow) 0%,color-mix(in srgb,var(--tint) 45%,var(--c-card-glow)) 45%,transparent 76%) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--tint) 20%,var(--c-card-top)),color-mix(in srgb,var(--tint) 34%,var(--c-card-bot))) padding-box,
    var(--foil) border-box}
html.glow .rc-back{transform:rotateY(180deg);display:grid;place-items:center;
  background:
    radial-gradient(70% 50% at 50% 50%,rgba(150,210,255,.35) 0%,transparent 70%) padding-box,
    linear-gradient(180deg,#2c4f98,#132a5f) padding-box,
    linear-gradient(135deg,#fff3c9,#e7b74c 30%,#fff7dc 52%,#d29a2a 76%,#ffeeb0) border-box}
html.glow .rc-back img{width:80%;filter:drop-shadow(0 6px 14px rgba(0,8,30,.45))}
html.glow .rc-back::after{content:'';position:absolute;inset:10px;border-radius:13px;border:1px solid rgba(255,230,170,.45);box-shadow:inset 0 0 0 4px rgba(255,230,170,.08)}
html.glow .reveal-card #reveal-canvas{width:80%!important;height:auto!important;aspect-ratio:1;margin-top:12%;transform:translateZ(30px);filter:drop-shadow(0 10px 10px rgba(20,50,110,.28))}
html.glow .rc-num{position:absolute;left:10px;top:9px;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--c-card-tag-ink);background:var(--c-card-tag);border:1px solid var(--c-card-tag-edge);padding:2px 8px;border-radius:999px;z-index:2}
html.glow .rc-stars{position:absolute;right:10px;top:9px;font-size:12px;letter-spacing:-.5px;color:var(--star);z-index:2}
html.glow .rc-plate{margin-top:auto;width:100%;padding:10px 10px 12px;background:var(--c-card-foot);border-top:1px solid var(--c-card-foot-edge);text-align:center;font-weight:400;font-size:18px;color:var(--c-card-ink);z-index:2;line-height:1.15;letter-spacing:.01em}
html.glow .rc-plate small{display:block;font-weight:400;font-size:11px;color:color-mix(in srgb,var(--reveal-color,#ffb000) 60%,var(--c-card-ink));margin-top:3px;letter-spacing:.03em}
/* the shine as it lands: one soft wide glint, then gone */
html.glow .rc-front::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-position:130% 0;filter:blur(6px)}
html.glow .reveal-dialog.is-landed .rc-front::after{animation:lx-glint 1.4s .15s var(--lx-ease) both}
@keyframes lx-glint{0%{opacity:0;background-position:130% 0}20%{opacity:1}100%{opacity:0;background-position:-40% 0}}
html.glow .reveal-dialog:is(.shiny-reveal,.prism-reveal) .rc-front::before{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:1;mix-blend-mode:soft-light;opacity:.75;
  background:linear-gradient(115deg,transparent 10%,rgba(255,170,220,.85) 28%,rgba(170,230,255,.9) 44%,rgba(255,240,170,.85) 60%,rgba(200,180,255,.8) 76%,transparent 92%) var(--mx,30%) var(--my,30%)/280% 280%;
  animation:lx-holo 5s ease-in-out infinite}
html.glow[data-lux="dusk"] .reveal-dialog:is(.shiny-reveal,.prism-reveal) .rc-front::before{mix-blend-mode:screen;opacity:.35}
html.glow .reveal-details{margin-top:14px;min-height:0!important}
html.glow .reveal-details h2{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;margin:0!important}
html.glow .reveal-dialog:not(.revealed) :is(.primary-button,.secondary-button,.share-button){opacity:0!important;pointer-events:none}
html.glow .reveal-details>p{color:var(--c-rv-ink2)!important;font-size:14px!important;line-height:1.6!important}
html.glow #reveal-reward{color:var(--c-rv-ink)!important;font-weight:400;font-size:11.5px!important;letter-spacing:.03em;padding:6px 12px;border-radius:999px;background:var(--c-rv-chip);border:1px solid var(--c-rv-chip-edge);display:inline-block}
html.glow .reveal-stage>.micro{font-weight:400!important;font-size:13px!important;letter-spacing:.06em!important;color:var(--c-rv-ink)!important;text-transform:uppercase!important;
  background:var(--c-rv-chip);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 14px;border-radius:999px;border:1px solid var(--c-rv-chip-edge)}
html.glow .reveal-stage>.micro::first-letter{text-transform:uppercase}
html.glow .reveal-stage>.micro:empty{visibility:hidden}
html.glow .reveal-dialog .primary-button{margin-top:16px!important}
html.glow .reveal-dialog .secondary-button{color:var(--c-second-ink)!important;background:var(--c-rv-chip)!important;border-color:var(--c-rv-chip-edge)!important;box-shadow:none!important}
html.glow .reveal-dialog .text-button{color:var(--c-accent-text)!important}
html.glow .reveal-stage{min-height:0!important;padding-top:max(14px,env(safe-area-inset-top))!important}
html.glow .reveal-classification{display:none!important}


/* =================================================================================================
   GAME HUDS: while a game or a battle is playing, everything floating over it is dark glass with
   white text, in both modes, so it reads on the game's own picture.
   ================================================================================================= */
html.glow :is(.arena-plate,.arena-chip,.arena-round,.arena-caption,.arena-pill,.arena-result,.run-hud-left,.run-hud-right,.rescue-bar,.rescue-stats,.rescue-status,.safari-hud,.tide-hud,.pond-hud,.hud-pill){
  background:linear-gradient(180deg,rgba(26,46,96,.62),rgba(10,22,52,.66))!important;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(170,205,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,6,24,.35)!important;color:#fff!important}
html.glow .arena-plate{border-radius:16px!important}
html.glow .arena-who{color:var(--lx-pearl2)!important;font-weight:400!important;letter-spacing:.08em!important}
html.glow .arena-pal{font-weight:400!important;letter-spacing:.04em!important;color:#fff!important}
html.glow .arena-lv{color:#bfe6ff!important;font-weight:400!important}
html.glow .arena-hp{background:rgba(0,8,30,.55)!important;border-radius:999px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)!important}
html.glow .arena-hp i{background:linear-gradient(90deg,#7ff0c0,#3fd6a0)!important;border-radius:999px!important;box-shadow:0 0 8px rgba(127,240,192,.5)}
html.glow .arena-hp i[data-level="low"]{background:linear-gradient(90deg,#ffe38a,#ffbf2e)!important;box-shadow:0 0 8px rgba(255,200,60,.5)}
html.glow .arena-hp i[data-level="bad"]{background:linear-gradient(90deg,#ff9a8a,#ff5f6f)!important;box-shadow:0 0 8px rgba(255,95,111,.5)}
html.glow .arena-meter i{background:rgba(255,255,255,.18)!important;border-radius:999px!important}
html.glow .arena-meter i.on{background:linear-gradient(90deg,#fff3b0,#ffcc40)!important;box-shadow:0 0 6px rgba(255,204,64,.7)!important}
html.glow .arena-chip{border-radius:12px!important}
html.glow .arena-chip.is-active{border-color:#fff!important;box-shadow:0 0 0 1px #fff,0 0 12px rgba(170,220,255,.8)!important}
html.glow .arena-round{border-radius:50%!important;font-weight:400!important}
html.glow .arena-caption{border-radius:14px!important;font-weight:400!important}
html.glow .arena-result{border-radius:24px 24px 0 0!important;color:#fff!important}
html.glow .arena-result :is(p,span,b){color:#fff!important}
html.glow .arena-result .scuffle-help{color:var(--lx-pearl2)!important}
html.glow .arena-stars i{color:rgba(255,255,255,.25)!important}
html.glow .arena-stars i.on{color:#ffd34d!important;text-shadow:0 0 14px rgba(255,211,77,.7)}

/* ---- calm, when asked -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){html.glow *{animation-duration:.01ms!important;animation-iteration-count:1!important}}
html.glow.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important}

/* ---- the light or dark choice in the profile ----------------------------------------------------- */
html.glow .mode-swatch{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto 6px;box-shadow:inset 0 0 0 1px rgba(29,43,79,.12),0 3px 8px rgba(20,50,110,.18)}
html.glow .mode-day{background:radial-gradient(circle at 34% 34%,#fff8d8 0 16%,#ffe08a 17% 24%,transparent 25%),linear-gradient(180deg,#5fb3f5,#c9e9ff)}
html.glow .mode-dusk{background:radial-gradient(circle at 62% 36%,#f6f0e2 0 15%,transparent 16%),radial-gradient(circle at 70% 30%,#24407e 0 14%,transparent 15%),linear-gradient(180deg,#0e2150,#24407e)}
html.glow .mode-auto{background:linear-gradient(135deg,#8fd0ff 0 50%,#163170 50% 100%)}

/* ---- the soft vignette over the landscape: by day it's light, so the sea of cloud stays bright ---- */
html.glow[data-lux="day"] body::after{background:linear-gradient(180deg,rgba(255,255,255,0) 62%,rgba(190,225,255,.22) 100%)!important}

/* =================================================================================================
   SCREENS THE OLD LOOK STYLED BY NAME, given the same tiles, chips and pills as everything else
   ================================================================================================= */
/* pal tiles in pickers (favorites, battle teams, the night run's runner) */
html.glow .lx-panel :is(.scuffle-card,.fav-slot,.run-pet,.scuffle-slot,.pick-foe){background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;box-shadow:var(--c-tile-shadow)!important;border-radius:16px!important;color:var(--c-text)!important}
html.glow .lx-panel :is(.scuffle-card,.fav-slot).shiny{border-color:rgba(242,165,22,.45)!important}
html.glow .lx-panel :is(.scuffle-card.picked,.fav-slot.selected,.fav-slot[aria-pressed="true"],.run-pet.is-on,.run-pet[aria-pressed="true"],.scuffle-card.highlight){box-shadow:0 0 0 2px var(--lx-sky),0 8px 18px rgba(47,159,240,.25)!important;background:linear-gradient(180deg,var(--c-accent-soft),var(--c-accent-soft)),var(--c-tile)!important}
html.glow .lx-panel :is(.scuffle-card,.fav-slot) :is(.scuffle-card-name,span,b,small){color:inherit!important}
/* boxes of information */
html.glow .lx-panel :is(.prize-board,.pick-match,.twists,.safari-feature,.stat-tile,.safari-note,.howto){background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;box-shadow:var(--c-tile-shadow)!important;border-radius:18px!important}
html.glow .lx-panel .stat-tile{border-radius:14px!important}
html.glow .lx-panel .stat-tile :is(b,strong){color:var(--c-text)!important}
/* choices: routes, biomes, twists, the safari's steps */
html.glow .lx-panel .run-biome{background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;box-shadow:var(--c-tile-shadow)!important;border-radius:16px!important}
html.glow .lx-panel .run-biome.is-on{box-shadow:0 0 0 2px var(--lx-sun2),0 8px 18px rgba(255,170,30,.25)!important}
html.glow .lx-panel :is(.twist-chip,.safari-stepper button){background:var(--c-chip)!important;border:1px solid var(--c-chip-edge)!important;color:var(--c-chip-ink)!important;border-radius:999px!important;box-shadow:none!important}
html.glow .lx-panel :is(.twist-chip.is-on,.safari-stepper button:is(.is-on,[aria-pressed="true"],.selected)){background:var(--c-chip-on)!important;color:var(--c-chip-on-ink)!important;border-color:transparent!important}
/* the safari's picture of today's place: words go white over the art */
html.glow .lx-panel .safari-banner :is(p,span,b,small,h3,div){color:#fff!important;text-shadow:0 1px 4px rgba(0,10,40,.6)!important}
/* the shop's prices */
html.glow .lx-panel .featured-buy{background:var(--c-second)!important;color:var(--c-second-ink)!important;border:1px solid var(--c-second-edge)!important;border-radius:14px!important;box-shadow:0 4px 12px -6px rgba(30,90,170,.35)!important}
html.glow .lx-panel .featured-buy *{color:inherit!important}
/* Deep Tide's big button is the main action */
html.glow #pond-act.tide-pad{background:linear-gradient(180deg,var(--lx-sun1) 0%,var(--lx-sun2) 52%,var(--lx-sun3) 100%)!important;color:var(--lx-sun-ink)!important;border:0!important;border-radius:16px!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 10px 24px -8px rgba(255,160,20,.75)!important;font-weight:400!important;letter-spacing:.06em!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important}
html.glow #pond-act.tide-pad *{color:inherit!important}
/* the journal: its tabs and its chapter steps */
html.glow .journal-tabs{background:var(--c-track)!important;border:1px solid var(--c-track-edge)!important;border-radius:999px!important;padding:4px!important}
html.glow .journal-tabs button{border-radius:999px!important;color:var(--c-text2)!important;font-weight:400!important;background:transparent!important}
html.glow .journal-tabs :is(.selected,[aria-selected="true"]){background:var(--c-pill)!important;color:var(--c-pill-ink)!important;box-shadow:var(--c-pill-shadow)!important}
html.glow .chapter-step{background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;color:var(--c-text3)!important;box-shadow:var(--c-tile-shadow)!important}
html.glow .chapter-step.current{box-shadow:0 0 0 2px var(--lx-sky),0 6px 14px rgba(47,159,240,.3)!important;color:var(--c-accent-text)!important}
html.glow .chapter-steps::before{background:var(--c-hair)!important}
/* the collection's sort and series menus (styled by id in the old look) */
html.glow #collection-dialog :is(#collection-sort,#series-filter,select){background-color:var(--c-input)!important;color:var(--c-input-ink)!important;border:1px solid var(--c-input-edge)!important}
/* the look and light-or-dark choices */
html.glow .lx-panel :is(.look-option,.mode-option){opacity:1!important}
html.glow .lx-panel :is(.look-option,.mode-option) b{color:var(--c-text)!important;font-weight:400!important}
html.glow .lx-panel :is(.look-option,.mode-option)>span:last-child{color:var(--c-text2)!important}
/* pale words coloured in by the game itself (rarity names in the odds, and so on) read darker on light panels */
html.glow[data-lux="day"] .lx-panel :is([style^="color"],[style*=";color"],[style*="; color"]){filter:brightness(.52) saturate(1.7)}
/* sticky bars at the bottom of a panel fade into the panel's own colour */
html.glow .lx-panel .pick-bar{background:var(--c-bar-fade)!important}
html.glow .lx-panel .pick-suggest{background:var(--c-second)!important;color:var(--c-second-ink)!important;border:1px solid var(--c-second-edge)!important;border-radius:999px!important;font-weight:400!important}
/* the light or dark choice is laid out like the colour looks (but is its own control) */
html.glow .mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
html.glow .mode-option{display:grid;grid-template-columns:1fr;row-gap:3px;justify-items:center;text-align:center;padding:10px 6px!important;cursor:pointer;font:inherit}
html.glow .mode-option b{font-size:13px}
html.glow .mode-option>span:last-child{font-size:11px}

/* shop or trade: two-line choices need room inside their pill */
html.glow .market-modes>.market-mode{padding:9px 14px 10px!important;border-radius:20px!important;gap:1px!important;overflow:hidden}
html.glow .market-modes>.market-mode b{font-weight:400!important}
html.glow .market-modes>.market-mode span{font-size:9.5px!important;letter-spacing:0!important;line-height:1.3!important}
html.glow :is([role="tablist"],.filter-tabs)>button:not(.market-mode){padding-left:12px!important;padding-right:12px!important}
/* the order badge on a picked pal: sky with a white number, in both modes */
html.glow .lx-panel .scuffle-card-pick{background:var(--lx-sky)!important;color:#fff!important;border:2px solid #fff!important;box-shadow:0 2px 6px rgba(20,60,140,.3)!important;font-weight:400!important}
/* refresh sits beside close and looks like it */
html.glow #friends-refresh{width:38px!important;height:38px!important;border-radius:50%!important;font-size:16px!important;font-weight:400!important;margin-right:8px;
  color:var(--c-close-ink)!important;background:var(--c-close)!important;border:1px solid var(--c-close-edge)!important;box-shadow:0 4px 12px rgba(20,50,110,.12)!important}
/* rarity names in the odds read as words, not hints */
html.glow .odds-table tbody th,html.glow .odds-pet span:first-child{font-weight:400!important}
/* card tags on dark cards: level in white so it reads on the pale card face */
html.glow[data-lux="dusk"] .creature-card .card-level{color:#fff!important}
html.glow[data-lux="dusk"] .creature-card :is(.card-number,.card-level){background:rgba(20,34,72,.42)!important;border-color:rgba(255,255,255,.18)!important}

/* ---- the last of the old look: every box, row and chip still painted in the old night colours ---- */
html.glow[data-lux="day"]{color-scheme:light}
html.glow input[type="checkbox"],html.glow input[type="radio"]{accent-color:var(--lx-sky)}
html.glow .lx-panel :is(.quest-row,.quest-route,.postcard,.expedition-meter>div,.expedition-chip,.trade-panel.filled,.wish-pet,.scene-card,.daily-row,.family-choice,.install-block,.notify-block,.friend-cell,.waiting-card,.offer-dust,.offer-note,.safari-last-pal,.safari-ware,.copy-chip,.quest-door-status,.walk-card,.journey-away .journey-frame){
  background:var(--c-tile)!important;border:1px solid var(--c-tile-edge)!important;box-shadow:var(--c-tile-shadow)!important;color:var(--c-text)!important;border-radius:16px!important}
html.glow .lx-panel :is(.quest-row,.quest-route,.postcard,.expedition-meter>div,.daily-row,.family-choice,.wish-pet,.scene-card) :is(b,strong,h3,h4){color:var(--c-text)!important}
html.glow .lx-panel .expedition-meter b{color:var(--c-accent-text)!important}
html.glow .lx-panel .quest-row.empty{background:var(--c-soft)!important;border:1.5px dashed var(--c-soft-edge)!important;box-shadow:none!important;color:var(--c-text3)!important}
html.glow .lx-panel :is(.quest-route[aria-pressed="true"],.quest-row.ready,.family-choice[aria-pressed="true"],.wish-pet.picked,.scene-card.selected,.copy-chip.picked){
  box-shadow:0 0 0 2px var(--lx-sky),0 8px 18px rgba(47,159,240,.22)!important;background:linear-gradient(180deg,var(--c-accent-soft),var(--c-accent-soft)),var(--c-tile)!important;border-color:transparent!important}
html.glow .lx-panel .daily-row.done{box-shadow:0 0 0 2px var(--lx-mint),0 8px 18px rgba(47,191,155,.18)!important}
html.glow .lx-panel .scene-card.locked{opacity:.55}
/* the wish keeps its own colour as a glow on the new surface */
html.glow .lx-panel .wish-card{background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--wish-color) 22%,transparent),transparent 68%),var(--c-tile)!important;
  border:1px solid color-mix(in srgb,var(--wish-color) 30%,transparent)!important;box-shadow:var(--c-tile-shadow)!important;color:var(--c-text)!important}
/* small chips and toggles */
html.glow .lx-panel :is(.scuffle-chip,.offer-chip,.swap-chip,.showcase-tab,.showcase-chip,.showcase-habitat,.showcase-glass,.binder-buttons button,.scuffle-lamp){
  background:var(--c-chip)!important;border:1px solid var(--c-chip-edge)!important;color:var(--c-chip-ink)!important;box-shadow:0 2px 6px rgba(20,60,130,.08)!important}
html.glow .lx-panel :is(.scuffle-chip,.offer-chip,.swap-chip,.showcase-tab,.showcase-chip,.showcase-habitat,.showcase-glass,.binder-buttons button):is(.selected,.is-on,.picked,[aria-pressed="true"]),
html.glow .lx-panel :is(.showcase-pal,.showcase-thing).is-in,html.glow .lx-panel .twist-chip.is-on{
  background:var(--c-chip-on)!important;color:var(--c-chip-on-ink)!important;border-color:transparent!important}
html.glow .lx-panel .scuffle-lamp.is-on{background:linear-gradient(180deg,#ffe08a,var(--lx-gold))!important;color:#fff!important;border-color:transparent!important}
/* the "no scene" choice */
html.glow .lx-panel .scene-option .scene-none{background:var(--c-soft)!important}
/* a quiet "Not now" stays a word, not a box */
html.glow .text-button.close-dialog{background:none!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important;border-radius:999px!important;color:var(--c-accent-text)!important}
/* the event tag on a card */
html.glow .creature-card .card-event{background:var(--c-card-tag)!important;color:var(--c-accent-text)!important;border:1px solid var(--c-card-tag-edge)!important;font-weight:400!important}
/* not found yet, by day: a pale card back with the shape in soft blue */
html.glow[data-lux="day"] .creature-card.undiscovered{
  background:
    radial-gradient(60% 40% at 50% 38%,rgba(255,255,255,.9) 0%,transparent 70%) padding-box,
    linear-gradient(180deg,#e9f3ff,#d3e5fa) padding-box,
    linear-gradient(135deg,#ffffff,#b9d4f3 50%,#ffffff) border-box!important}
html.glow[data-lux="day"] .creature-card.undiscovered>canvas,html.glow[data-lux="day"] .creature-card.undiscovered .card-art{opacity:.42;filter:brightness(0) sepia(1) hue-rotate(185deg) saturate(3) brightness(.55) drop-shadow(0 0 6px rgba(255,255,255,.9))}
html.glow[data-lux="day"] .creature-card.undiscovered :is(.card-name,.card-number,.card-series,.card-stars,.card-footer *){color:#6f8fb8!important}
html.glow[data-lux="day"] .creature-card.undiscovered .card-footer{background:rgba(255,255,255,.45)!important;border-top-color:rgba(255,255,255,.8)!important}
html.glow dialog :is(input[type="checkbox"],input[type="radio"]){background:none!important;border:0!important;box-shadow:none!important;border-radius:5px!important}
/* the three looks shown as their own colours, the same round swatch as light or dark */
html.glow .look-swatch{border-radius:50%!important;width:34px!important;height:34px!important;margin:0 auto 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,0,0,.12),0 3px 8px rgba(20,50,110,.18)!important}
html.glow .look-blue{background:radial-gradient(circle at 34% 30%,#ffffff 0%,rgba(255,255,255,0) 34%),linear-gradient(160deg,#9fd7ff,#2f9ff0 70%)!important}
html.glow .look-green{background:radial-gradient(circle at 34% 30%,#ffffff 0%,rgba(255,255,255,0) 34%),linear-gradient(160deg,#8fead3,#16a98d 66%,#f2c25b 100%)!important}
html.glow .look-pink{background:radial-gradient(circle at 34% 30%,#ffffff 0%,rgba(255,255,255,0) 34%),linear-gradient(160deg,#ffc4dd,#e8609f 66%,#9c4a8f 100%)!important}
/* scene choices read in the panel's own ink */
html.glow .lx-panel .scene-option{color:var(--c-text)!important}
html.glow .lx-panel .scene-option b{color:var(--c-text)!important;font-weight:400!important}
html.glow .lx-panel .scene-option span:last-child{color:var(--c-text3)!important}

/* =================================================================================================
   RARITY url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1.5c2.2 4.3 8.2 8.1 8.2 15.2a8.2 8.2 0 0 1-16.4 0c0-3.9 2.1-6.4 3.9-8.4.4 2.4 1.7 3.9 3.2 4.6-.9-4.2-.3-7.6 1.1-11.4z'/%3E%3C/svg%3E")S: little wisp flames, one for each step of rarity. Each flame is its rarity's colour
   (silver, emerald, sapphire, amethyst, gold, and a pink opal for Secret) with a bright core and a
   glint, a darker rim underneath and a soft glow. On home and the pal page they flicker gently.
   ================================================================================================= */
html.glow :is(.rarity-dots,.rarity-pips){--g1:#ffffff;--g2:#b9c6d6;--g3:#7d8ca3;--gs:15px;
  display:inline-flex!important;align-items:flex-end;gap:1px!important;
  filter:drop-shadow(0 1px 0 var(--g3)) drop-shadow(0 1px 3px color-mix(in srgb,var(--g2) 55%,transparent))}
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="2"]{--g1:#dcffd2;--g2:#46c46c;--g3:#1f7f45}
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="3"]{--g1:#d8f0ff;--g2:#3a9cf2;--g3:#1a57b8}
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="4"]{--g1:#f1e5ff;--g2:#9a68f2;--g3:#5a33b3}
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="5"]{--g1:#fff7c8;--g2:#ffbd2a;--g3:#c47404}
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="6"]{--g1:#ffe6f3;--g2:#d9c8ff;--g3:#b77fd0}
html.glow :is(.rarity-dots,.rarity-pips) i{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
html.glow :is(.rarity-dots,.rarity-pips) i:not(.filled){display:none!important}
html.glow :is(.rarity-dots,.rarity-pips) i.filled{display:block!important;width:var(--gs)!important;height:calc(var(--gs) * 1.25)!important;flex:none;transform-origin:50% 92%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1.5c2.2 4.3 8.2 8.1 8.2 15.2a8.2 8.2 0 0 1-16.4 0c0-3.9 2.1-6.4 3.9-8.4.4 2.4 1.7 3.9 3.2 4.6-.9-4.2-.3-7.6 1.1-11.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1.5c2.2 4.3 8.2 8.1 8.2 15.2a8.2 8.2 0 0 1-16.4 0c0-3.9 2.1-6.4 3.9-8.4.4 2.4 1.7 3.9 3.2 4.6-.9-4.2-.3-7.6 1.1-11.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:
    radial-gradient(5% 7% at 39% 43%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(16% 15% at 50% 65%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)!important}
/* Secret: an opal flame, pink into lilac into sky */
html.glow :is(.rarity-dots,.rarity-pips)[data-tier="6"] i.filled{background:
    radial-gradient(5% 7% at 39% 43%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(16% 15% at 50% 65%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#ffd1ea 0%,#c9b2ff 55%,#8fcdfb 100%)!important}
html.glow[data-lux="dusk"] :is(.rarity-dots,.rarity-pips){filter:drop-shadow(0 1px 0 var(--g3)) drop-shadow(0 0 5px color-mix(in srgb,var(--g2) 75%,transparent))}
/* sizes where they live */
html.glow #pet-rarity .rarity-pips{--gs:15px}
html.glow .detail-dialog .rarity .rarity-pips{--gs:17px;gap:2px!important}
html.glow .creature-card .rarity-dots{--gs:10px;gap:0!important;filter:drop-shadow(0 1px 0 var(--g3))}
html.glow .rc-stars{right:9px!important;top:7px!important;font-size:0!important}
html.glow .rc-stars .rarity-pips{--gs:11px;gap:0!important}
html.glow .wish-card .rarity-dots{--gs:15px}
html.glow .wish-pet .rarity-dots{--gs:9px;gap:0!important}
/* a gentle flicker on home and the pal page, each flame out of step with the next */
html.glow :is(#pet-rarity,.detail-dialog .rarity) .rarity-pips i.filled{animation:lx-flicker 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.43s)}
@keyframes lx-flicker{0%,100%{transform:scale(1,1) rotate(0deg)}30%{transform:scale(.96,1.06) rotate(-2deg)}60%{transform:scale(1.03,.97) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){html.glow .rarity-pips i.filled{animation:none!important}}
html.reduced-motion.glow .rarity-pips i.filled{animation:none!important}

/* =================================================================================================
   THE PAL PAGE STAGE: the card floats in its rarity's light. Soft bloom, slow soft rays, a few
   motes, a shadow on the floor. On opening the card turns in and lands with a soft flash; the pal
   pops up, the name rises and the stars set in one by one.
   ================================================================================================= */
html.glow .pal-stage{--s1:236,242,250;--s2:196,208,226;--s3:160,176,200;
  position:relative;isolation:isolate;display:grid;place-items:center;perspective:1100px;
  margin:2px calc(-1 * var(--bleed-r,22px)) 4px calc(-1 * var(--bleed-l,22px));padding:22px 0 34px}
/* the light lives in its own layer, which reaches a little above and below the card and fades out there */
html.glow .pal-stage .ps-fx{position:absolute;inset:-80px 0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 70%,transparent 100%)}
html.glow .pal-stage .ps-fx>i,html.glow .pal-stage .ps-fx>canvas{position:absolute;pointer-events:none}
html.glow .pal-stage[data-tier="2"]{--s1:186,240,200;--s2:96,206,132;--s3:58,170,100}
html.glow .pal-stage[data-tier="3"]{--s1:178,220,255;--s2:86,170,245;--s3:52,128,230}
html.glow .pal-stage[data-tier="4"]{--s1:220,200,255;--s2:164,122,244;--s3:124,86,220}
html.glow .pal-stage[data-tier="5"]{--s1:255,234,160;--s2:255,198,64;--s3:240,160,30}
html.glow .pal-stage[data-tier="6"],html.glow .pal-stage.is-prism{--s1:255,214,236;--s2:243,154,208;--s3:160,200,255}
html.glow .pal-stage .ps-fx>canvas.glow-motes{inset:0;width:100%;height:100%;z-index:3}
/* the glow behind the card */
html.glow .pal-stage .ps-bloom{left:50%;top:47%;width:min(520px,130%);aspect-ratio:1;translate:-50% -50%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--s1),.95) 0%,rgba(var(--s2),.55) 34%,rgba(var(--s2),.16) 62%,rgba(var(--s2),0) 100%);
  animation:ps-breathe 7s ease-in-out infinite}
html.glow[data-lux="dusk"] .pal-stage .ps-bloom{background:radial-gradient(closest-side,rgba(var(--s1),.55) 0%,rgba(var(--s2),.34) 34%,rgba(var(--s2),.1) 62%,rgba(var(--s2),0) 100%)}
@keyframes ps-breathe{0%,100%{scale:1;opacity:.92}50%{scale:1.07;opacity:1}}
/* slow, soft light from behind: blurred so no edge ever reads as a line */
html.glow .pal-stage .ps-rays{left:50%;top:46%;width:min(560px,150%);aspect-ratio:1;translate:-50% -50%;z-index:1;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.75) 9deg,rgba(255,255,255,0) 18deg,rgba(255,255,255,0) 30deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.5) 48%,transparent 78%);mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.5) 48%,transparent 78%);
  filter:blur(9px);animation:ps-turn 60s linear infinite}
html.glow[data-lux="dusk"] .pal-stage .ps-rays{opacity:.32;background:repeating-conic-gradient(from 0deg,rgba(var(--s1),0) 0deg,rgba(var(--s1),.8) 9deg,rgba(var(--s1),0) 18deg,rgba(var(--s1),0) 30deg)}
html.glow .pal-stage:is([data-tier="6"],.is-prism) .ps-rays{opacity:.6;background:conic-gradient(from 0deg,rgba(255,170,220,0) 0deg,rgba(255,170,220,.8) 10deg,rgba(255,170,220,0) 20deg,rgba(0,0,0,0) 36deg,rgba(150,215,255,.8) 46deg,rgba(150,215,255,0) 56deg,rgba(0,0,0,0) 72deg,rgba(255,232,150,.8) 82deg,rgba(255,232,150,0) 92deg,rgba(0,0,0,0) 108deg,rgba(200,180,255,.8) 118deg,rgba(200,180,255,0) 128deg,rgba(0,0,0,0) 144deg,rgba(160,240,210,.8) 154deg,rgba(160,240,210,0) 164deg,rgba(0,0,0,0) 180deg,rgba(255,170,220,.8) 190deg,rgba(255,170,220,0) 200deg,rgba(0,0,0,0) 216deg,rgba(150,215,255,.8) 226deg,rgba(150,215,255,0) 236deg,rgba(0,0,0,0) 252deg,rgba(255,232,150,.8) 262deg,rgba(255,232,150,0) 272deg,rgba(0,0,0,0) 288deg,rgba(200,180,255,.8) 298deg,rgba(200,180,255,0) 308deg,rgba(0,0,0,0) 324deg,rgba(160,240,210,.8) 334deg,rgba(160,240,210,0) 344deg,rgba(0,0,0,0) 360deg)}
@keyframes ps-turn{to{rotate:360deg}}
html.glow .pal-stage.is-unknown :is(.ps-rays){display:none}
html.glow .pal-stage.is-unknown .ps-bloom{opacity:.45;animation:none}
/* the floor shadow, which shrinks as the card rises */
html.glow .pal-stage .ps-floor{left:50%;bottom:94px;width:min(190px,48%);height:20px;translate:-50% 0;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,50,110,.28),rgba(20,50,110,0));animation:ps-shadow 5.5s ease-in-out infinite}
html.glow[data-lux="dusk"] .pal-stage .ps-floor{background:radial-gradient(closest-side,rgba(0,4,20,.55),rgba(0,4,20,0))}
@keyframes ps-shadow{0%,100%{scale:1;opacity:1}50%{scale:.86;opacity:.7}}
/* the card itself floats */
html.glow .pal-stage .ps-card{position:relative;z-index:2;transform-style:preserve-3d;animation:ps-float 5.5s ease-in-out infinite}
@keyframes ps-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
html.glow .pal-stage .detail-portrait{margin:0 auto!important;width:min(250px,64vw)!important}
html.glow .pal-stage .detail-portrait{box-shadow:0 30px 50px -18px rgba(var(--s3),.55),0 18px 30px -16px rgba(20,50,110,.4),0 0 0 1px rgba(255,255,255,.4)!important}
html.glow[data-lux="dusk"] .pal-stage .detail-portrait{box-shadow:0 30px 60px -18px rgba(0,4,24,.75),0 0 40px -6px rgba(var(--s2),.45)!important}
/* little glints around shinies, prismatics and the top two rarities */
html.glow .pal-stage .ps-glint{position:absolute;z-index:5;width:16px;height:16px;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0,rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000,#000) center/2px 100% no-repeat,linear-gradient(#000,#000) center/100% 2px no-repeat;mask:linear-gradient(#000,#000) center/2px 100% no-repeat,linear-gradient(#000,#000) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 3px rgba(var(--s2),.9));opacity:0;animation:ps-twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--n) * .8s)}
html.glow .pal-stage .ps-glint{left:-6%;top:12%}
html.glow .pal-stage .ps-glint:nth-of-type(2){left:auto;right:-5%;top:30%;width:12px;height:12px}
html.glow .pal-stage .ps-glint:nth-of-type(3){left:8%;top:auto;bottom:6%;width:10px;height:10px}
html.glow .pal-stage .ps-glint:nth-of-type(4){left:auto;right:6%;top:-3%;width:14px;height:14px}
@keyframes ps-twinkle{0%,100%{opacity:0;scale:.3;rotate:0deg}40%{opacity:1;scale:1;rotate:45deg}70%{opacity:0;scale:.5;rotate:90deg}}
/* ---- the entrance ---- */
html.glow .pal-stage .ps-flash{left:50%;top:46%;width:min(420px,110%);aspect-ratio:1;translate:-50% -50%;z-index:4;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(var(--s1),.6) 30%,rgba(var(--s2),0) 70%)}
html.glow[data-lux="day"] .pal-stage .ps-flash{background:radial-gradient(closest-side,rgba(255,255,255,1) 0%,rgba(var(--s1),.75) 30%,rgba(var(--s2),0) 70%)}
html.glow .pal-stage.is-entering .ps-flash{animation:ps-flash 1s cubic-bezier(.2,.7,.3,1) .42s both}
@keyframes ps-flash{0%{opacity:0;scale:.35}22%{opacity:.95}100%{opacity:0;scale:1.25}}
html.glow .pal-stage.is-entering .ps-card{animation:ps-in 1.05s cubic-bezier(.2,.75,.25,1) both,ps-float 5.5s ease-in-out 1.05s infinite}
@keyframes ps-in{
  0%{transform:translateY(60px) scale(.55) rotateY(-170deg) rotateX(14deg);opacity:0}
  28%{opacity:1}
  60%{transform:translateY(-10px) scale(1.05) rotateY(12deg) rotateX(-3deg)}
  80%{transform:translateY(2px) scale(.99) rotateY(-4deg)}
  100%{transform:translateY(0) scale(1) rotateY(0) rotateX(0);opacity:1}}
html.glow .pal-stage.is-entering .ps-bloom{animation:ps-bloom-in 1.2s ease-out both,ps-breathe 7s ease-in-out 1.2s infinite}
@keyframes ps-bloom-in{0%{opacity:0;scale:.4}55%{opacity:1;scale:1.12}100%{opacity:.92;scale:1}}
html.glow .pal-stage.is-entering .ps-rays{animation:ps-rays-in 1.6s ease-out both,ps-turn 60s linear infinite}
@keyframes ps-rays-in{0%{opacity:0;scale:.5}100%{scale:1}}
html.glow .pal-stage.is-entering .detail-sprite{animation:ps-pal .75s cubic-bezier(.3,1.65,.45,1) .5s both}
@keyframes ps-pal{0%{opacity:0;transform:translateY(26px) scale(.5)}100%{opacity:1;transform:translateZ(30px)}}
/* a coat switch turns the card over */
html.glow .pal-stage.is-flipping .ps-card{animation:ps-flip .7s cubic-bezier(.3,1.25,.4,1) both,ps-float 5.5s ease-in-out .7s infinite}
@keyframes ps-flip{0%{transform:rotateY(-100deg) scale(.92);opacity:.2}100%{transform:rotateY(0) scale(1);opacity:1}}
html.glow .pal-stage.is-flipping .ps-flash{animation:ps-flash .8s ease-out .18s both}
/* the words arrive after the card */
html.glow #detail-content.is-entering>:where(h2,.detail-nickname,.rarity){animation:ps-rise .6s cubic-bezier(.2,.8,.3,1) .55s both}
html.glow #detail-content.is-entering>:where(.detail-nickname){animation-delay:.65s}
html.glow #detail-content.is-entering>:where(.rarity){animation-delay:.7s}
html.glow #detail-content.is-entering>:is(.variant-switch,.shiny-battle-perk,.detail-class,.detail-level){animation:ps-rise .6s cubic-bezier(.2,.8,.3,1) .8s both}
@keyframes ps-rise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
html.glow #detail-content:is(.is-entering,.is-flipping) .rarity .rarity-pips i.filled{animation:ps-star .6s cubic-bezier(.3,1.8,.45,1) both;animation-delay:calc(.82s + var(--i,0) * .085s)}
html.glow #detail-content.is-flipping .rarity .rarity-pips i.filled{animation-delay:calc(.2s + var(--i,0) * .06s)}
html.glow .rarity-pips i:nth-child(2){--i:1}html.glow .rarity-pips i:nth-child(3){--i:2}html.glow .rarity-pips i:nth-child(4){--i:3}html.glow .rarity-pips i:nth-child(5){--i:4}html.glow .rarity-pips i:nth-child(6){--i:5}
@keyframes ps-star{0%{opacity:0;transform:scale(.2,0)}60%{opacity:1;transform:scale(1.15,1.3)}80%{transform:scale(.95,.92)}100%{opacity:1;transform:scale(1,1)}}
/* the name on the pal page, bigger */
@media (prefers-reduced-motion:reduce){html.glow .pal-stage *,html.glow .pal-stage,html.glow #detail-content *{animation:none!important}}
html.reduced-motion.glow .pal-stage *,html.reduced-motion.glow #detail-content *{animation:none!important}
/* ---- more light: the stage reads as a place, not a faint glow ---- */
html.glow .pal-stage{padding:30px 0 44px}
html.glow .pal-stage .ps-fx{background:radial-gradient(62% 46% at 50% 47%,rgba(var(--s2),.42) 0%,rgba(var(--s2),.14) 55%,rgba(var(--s2),0) 80%)}
html.glow[data-lux="dusk"] .pal-stage .ps-fx{background:radial-gradient(62% 46% at 50% 47%,rgba(var(--s2),.38) 0%,rgba(var(--s2),.12) 55%,rgba(var(--s2),0) 80%)}
html.glow .pal-stage .ps-bloom{background:radial-gradient(closest-side,rgba(255,255,255,1) 0%,rgba(var(--s1),.95) 22%,rgba(var(--s2),.6) 46%,rgba(var(--s2),.18) 70%,rgba(var(--s2),0) 100%)}
html.glow[data-lux="dusk"] .pal-stage .ps-bloom{background:radial-gradient(closest-side,rgba(var(--s1),.85) 0%,rgba(var(--s2),.6) 26%,rgba(var(--s2),.22) 55%,rgba(var(--s2),0) 100%)}
html.glow .pal-stage .ps-rays{opacity:.85;background:repeating-conic-gradient(from 0deg,rgba(var(--s2),0) 0deg,rgba(var(--s2),.7) 8deg,rgba(var(--s2),0) 16deg,rgba(var(--s2),0) 30deg);filter:blur(10px)}
html.glow[data-lux="dusk"] .pal-stage .ps-rays{opacity:.6;background:repeating-conic-gradient(from 0deg,rgba(var(--s1),0) 0deg,rgba(var(--s1),.9) 8deg,rgba(var(--s1),0) 16deg,rgba(var(--s1),0) 30deg)}
html.glow .pal-stage:is([data-tier="6"],.is-prism) .ps-rays{opacity:.9}
html.glow[data-lux="dusk"] .pal-stage:is([data-tier="6"],.is-prism) .ps-rays{opacity:.7}
/* a soft pool of light the card hovers over */
html.glow .pal-stage .ps-pad{left:50%;bottom:86px;width:min(300px,76%);height:46px;translate:-50% 0;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(var(--s1),.8) 30%,rgba(var(--s2),.35) 62%,rgba(var(--s2),0) 100%);animation:ps-shadow 5.5s ease-in-out infinite reverse}
html.glow[data-lux="dusk"] .pal-stage .ps-pad{background:radial-gradient(closest-side,rgba(var(--s1),.85) 0%,rgba(var(--s2),.45) 40%,rgba(var(--s2),0) 100%)}
html.glow .pal-stage .ps-floor{z-index:2}
html.glow .pal-stage.is-unknown :is(.ps-pad){opacity:.4}
/* the card face takes its rarity's colour properly, and glows at the edges */
html.glow .pal-stage .detail-portrait{background:
    radial-gradient(70% 52% at 50% 44%,rgba(255,255,255,.98) 0%,rgba(var(--s1),.75) 46%,rgba(var(--s1),0) 82%) padding-box,
    linear-gradient(180deg,rgb(var(--s1)) 0%,color-mix(in srgb,rgb(var(--s2)) 70%,#ffffff) 100%) padding-box,
    var(--foil) border-box!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 60px -6px rgba(var(--s2),.75),0 34px 50px -20px rgba(20,50,110,.45)!important}
html.glow[data-lux="dusk"] .pal-stage .detail-portrait{background:
    radial-gradient(72% 54% at 50% 44%,rgba(var(--s1),.6) 0%,rgba(var(--s2),.34) 40%,rgba(var(--s2),0) 78%) padding-box,
    linear-gradient(180deg,#2c4c92 0%,#152a63 60%,#0f2152 100%) padding-box,
    var(--foil) border-box!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 70px -4px rgba(var(--s2),.7),0 34px 60px -20px rgba(0,4,24,.8)!important}
html.glow .pal-stage.is-unknown .detail-portrait{box-shadow:0 30px 50px -20px rgba(20,50,110,.45)!important}
/* one soft sweep of light across the card as it lands */
html.glow .pal-stage .ps-sweep{position:absolute;inset:0;z-index:6;border-radius:24px;overflow:hidden;pointer-events:none;opacity:0}
html.glow .pal-stage .ps-sweep::before{content:'';position:absolute;inset:-20% -60%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%);filter:blur(6px);translate:-70% 0}
html.glow .pal-stage.is-entering .ps-sweep{opacity:1}
html.glow .pal-stage.is-entering .ps-sweep::before{animation:ps-sweep 1.1s cubic-bezier(.4,0,.2,1) .95s both}
html.glow .pal-stage.is-flipping .ps-sweep{opacity:1}
html.glow .pal-stage.is-flipping .ps-sweep::before{animation:ps-sweep .9s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes ps-sweep{from{translate:-70% 0}to{translate:70% 0}}
/* Secret and Prismatic: an opal card face */
html.glow .pal-stage:is([data-tier="6"],.is-prism) .detail-portrait{background:
    radial-gradient(70% 52% at 50% 44%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 80%) padding-box,
    linear-gradient(160deg,#ffd9ee 0%,#eadfff 34%,#d6efff 66%,#d8fbef 100%) padding-box,
    var(--foil) border-box!important}
html.glow[data-lux="dusk"] .pal-stage:is([data-tier="6"],.is-prism) .detail-portrait{background:
    radial-gradient(70% 52% at 50% 44%,rgba(255,220,240,.6) 0%,rgba(200,190,255,.25) 46%,rgba(0,0,0,0) 82%) padding-box,
    linear-gradient(160deg,#6b3f86 0%,#41407f 40%,#264f86 75%,#1f5a6a 100%) padding-box,
    var(--foil) border-box!important}

/* =================================================================================================
   THE TITLE: the old splash (pals drifting in the dark, SET 001, a spark, Tap to begin) with the new
   logo in place of the typed word. By day the sky behind it is light.
   ================================================================================================= */
html.glow .title-screen .title-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.glow .title-logo{display:block;width:min(300px,74vw);height:auto;margin:6px auto 0;filter:drop-shadow(0 10px 22px rgba(6,20,60,.5));animation:lx-logo-in .9s var(--lx-ease) both}
@keyframes lx-logo-in{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
html.glow .title-screen .title-spark{margin-bottom:-4px}
html.glow[data-lux="day"] .title-screen{background:radial-gradient(58% 34% at 50% 50%,rgba(255,255,255,.75),transparent 72%),linear-gradient(180deg,#9fd3fb 0%,#cfe9ff 55%,#eef7ff 100%)!important}
html.glow[data-lux="day"] .title-screen canvas{opacity:.95}
html.glow[data-lux="day"] .title-screen .title-set{background:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.9)!important;color:#3d6aa8!important}
html.glow[data-lux="day"] .title-screen .title-hint{background:rgba(255,255,255,.6)!important;border-color:rgba(255,255,255,.95)!important;color:#2f5f9e!important;text-shadow:none!important;box-shadow:0 8px 22px rgba(40,100,180,.18)!important}
html.glow[data-lux="day"] .title-logo{filter:drop-shadow(0 10px 20px rgba(40,100,180,.35))}

/* =================================================================================================
   HOME BY DAY: the old home, shapes and letters as they were, in blue glass with white words so the
   sunny landscapes show through; the words around the pal are ink (13.5, below). (By night it is
   exactly the old look.)
   ================================================================================================= */
html.glow[data-lux="day"] :is(.dust-button,.profile-pill,.missions-button,.guide-button,.journal-home,.news-door,.market-button,.stage-arrow,.lineup .slot,.event-banner,.bottom-nav){
  background:var(--fr-bg)!important;border-color:rgba(255,255,255,.55)!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(24,64,140,.16),inset 0 1px 0 rgba(255,255,255,.35)!important;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
html.glow[data-lux="day"] .lineup .slot.selected{background:rgba(255,255,255,.42)!important;border:1.5px solid #fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 18px rgba(24,64,140,.22)!important}
html.glow[data-lux="day"] .lineup .slot.empty{background:rgba(255,255,255,.14)!important;border:1px dashed rgba(255,255,255,.7)!important}
html.glow[data-lux="day"] .lineup .slot.chest-slot::before{background:rgba(255,255,255,.3)!important}
html.glow[data-lux="day"] :is(.topbar,#home,.bottom-nav) :is(span,b,small,em,strong,p,.micro,a,button,h1,h2,label){text-shadow:0 1px 2px rgba(16,44,104,.4)}
html.glow[data-lux="day"] :is(.topbar,#home,.bottom-nav) :is(.dust-icon,.missions-icon,.journal-icon,.news-door,.market-button,.nav-icon,.stage-arrow){color:#fff!important;filter:drop-shadow(0 1px 2px rgba(16,44,104,.35))!important}
html.glow[data-lux="day"] :is(.missions-count,.missions-word){background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.6)!important;color:#fff!important}
html.glow[data-lux="day"] .wordmark{color:#fff}
html.glow[data-lux="day"] .nav-item{color:rgba(255,255,255,.92)!important}
html.glow[data-lux="day"] .nav-item.is-active{background:rgba(255,255,255,.3)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important;color:#fff!important}
html.glow[data-lux="day"] :is(.nav-badge,.bottom-nav .nav-badge,.bottom-nav #collection-count){background:rgba(255,255,255,.3)!important;border-color:rgba(255,255,255,.75)!important;color:#fff!important}
html.glow[data-lux="day"] #home :is(.chest-info h1,.chest-info p,.chest-info .micro,#chest-countdown,.chest-family,.chest-info .text-button){
  color:#fff!important;text-shadow:0 1px 2px rgba(12,38,96,.65),0 0 14px rgba(12,38,96,.45)!important}
html.glow[data-lux="day"] #home :is(.series-tag,.class-tag,.mark-tag){background:var(--fr-bg)!important;border:1px solid rgba(255,255,255,.6)!important;color:#fff!important;box-shadow:none!important;text-shadow:0 1px 2px rgba(16,44,104,.35)!important}
html.glow[data-lux="day"] .nav-item{text-shadow:0 1px 2px rgba(12,38,96,.55)!important}
html.glow[data-lux="day"] .bottom-nav{background:var(--fr-bg)!important}
html.glow[data-lux="day"] :is(.journal-home,#journal-home-label,#journal-home-action){color:#fff!important}
html.glow[data-lux="day"] #journal-home-progress{background:#fff!important}
html.glow[data-lux="day"] .event-banner-left{color:rgba(255,255,255,.9)!important}

/* =================================================================================================
   COLLECTION CARDS, IN BETWEEN: the new rarity frames, faces and wisps, but slim like the old cards:
   a fine frame, smaller corners, plain small numbers instead of pills, a light shadow.
   ================================================================================================= */
html.glow .collection-grid{gap:10px!important}
html.glow .creature-card{border-width:1.5px!important;border-radius:12px!important;aspect-ratio:5/7!important;
  box-shadow:0 4px 12px -6px rgba(20,50,110,.32)!important}
html.glow[data-lux="dusk"] .creature-card{box-shadow:0 4px 14px -6px rgba(0,4,24,.6)!important}
html.glow .creature-card::before,html.glow .creature-card::after{border-radius:12px!important;inset:-1.5px!important}
html.glow .creature-card :is(.card-number,.card-level,.card-fuse,.card-togo){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font-size:10px!important;letter-spacing:.04em!important}
html.glow .creature-card .card-number{left:9px!important;top:7px!important;color:var(--c-card-ink2)!important}
html.glow .creature-card :is(.card-level,.card-fuse,.card-togo){right:9px!important;top:7px!important}
html.glow .creature-card .card-fuse{background:var(--lx-mint)!important;color:#fff!important;padding:1px 6px!important;border-radius:999px!important;opacity:1!important}
html.glow[data-lux="dusk"] .creature-card .card-level{color:#cfeaff!important}
html.glow[data-lux="dusk"] .creature-card :is(.card-number,.card-level){background:none!important;border:0!important}
html.glow .creature-card>canvas,html.glow .creature-card .card-art{margin-top:18%!important;width:64%!important;filter:drop-shadow(0 4px 4px rgba(20,50,110,.18))}
html.glow .creature-card .card-name{font-size:11px!important;letter-spacing:.02em!important;font-weight:400!important}
html.glow .creature-card .card-coat{font-size:10px!important}
html.glow .creature-card .card-footer{margin-top:4px!important;padding:4px 8px 5px!important;border-radius:0 0 10.5px 10.5px!important;background:transparent!important;border-top:1px solid var(--c-card-foot-edge)!important}
html.glow[data-lux="dusk"] .creature-card .card-footer{border-top-color:rgba(255,255,255,.1)!important}
html.glow .creature-card :is(.card-series,.card-class,.card-when){font-size:9.5px!important;font-weight:400!important}
html.glow .creature-card .class-tag{font-size:9.5px!important;padding:0 5px!important;font-weight:400!important}
html.glow .creature-card .rarity-dots{--gs:9px}
html.glow .creature-card.undiscovered{border-width:1.5px!important}

/* by night the slim cards keep a deep face, with only a breath of their rarity's colour */
html.glow[data-lux="dusk"] .creature-card:not(.undiscovered){background:
    radial-gradient(80% 50% at 50% 36%,color-mix(in srgb,var(--tint) 26%,transparent) 0%,transparent 72%) padding-box,
    linear-gradient(180deg,#203b76,#112352) padding-box,
    var(--foil) border-box!important}
html.glow[data-lux="dusk"] .creature-card .card-name{color:#f4f7ff!important}
html.glow[data-lux="dusk"] .creature-card .card-number{color:rgba(244,247,255,.86)!important}
html.glow[data-lux="dusk"] .creature-card :is(.card-series,.card-class,.card-when){color:rgba(244,247,255,.82)!important}

/* 13.3 · Sorting and filters, one look everywhere.
 *
 * The collection, every pal picker (favorites, battle team, trades, the market, quests, wishes, the
 * crew, icons, showcases) and the leaderboards all sort and filter the same way, so they look the
 * same way too:
 *   - a search box with a magnifier, and the sort beside it with a little up-down mark;
 *   - what to show (All, Shiny, Spares...) as one segmented track on a single line, the same as the
 *     Collection | Showcase switch, sliding sideways if it runs out of room;
 *   - Family / Class / Rarity dropdowns that light up while they are narrowing the list, so it's
 *     always clear why some pals are missing;
 *   - "12 of 131 · Clear" under them whenever anything is narrowed.
 * At the end of glow.css (which loads last), using its light and dark tokens.
 */

/* ---- search and sort ------------------------------------------------------------------------- */
html.glow :is(.pick-row,#collection-dialog .collection-tools){display:flex!important;gap:8px!important;align-items:center}
html.glow :is(.pick-search,#collection-dialog .collection-search){
  height:40px!important;min-height:40px!important;margin:0!important;padding:0 12px 0 34px!important;border-radius:14px!important;font-size:12px!important;
  background-image:var(--srt-find)!important;background-repeat:no-repeat!important;background-position:12px 50%!important;background-size:14px 14px!important}
html.glow :is(.pick-sort,#collection-sort){
  -webkit-appearance:none!important;appearance:none!important;height:40px!important;min-height:40px!important;margin:0!important;
  padding:0 22px 0 29px!important;border-radius:14px!important;font-size:11.5px!important;letter-spacing:0!important;cursor:pointer;text-overflow:ellipsis;
  background-image:var(--srt-sort),var(--srt-down)!important;background-repeat:no-repeat,no-repeat!important;
  background-position:11px 50%,calc(100% - 10px) 50%!important;background-size:13px 13px,10px 10px!important}
html.glow .pick-row .pick-sort{flex:0 0 152px!important;width:152px!important}
html.glow #collection-dialog .collection-sort-label{flex:0 0 152px!important;width:152px!important;margin:0!important;display:block!important}
html.glow #collection-dialog .collection-sort-label select{width:100%!important}

/* ---- what to show: one segmented track ------------------------------------------------------- */
html.glow :is(.pick-pills,#collection-dialog .show-pills){
  display:flex!important;flex-wrap:nowrap!important;gap:2px!important;margin:0!important;padding:3px!important;
  border-radius:999px!important;background:var(--c-track)!important;border:1px solid var(--c-track-edge)!important;
  box-shadow:inset 0 1px 3px rgba(20,40,90,.08)!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
html.glow :is(.pick-pills,#collection-dialog .show-pills)::-webkit-scrollbar{display:none}
html.glow :is(.pick-pills,#collection-dialog .show-pills) button{
  flex:1 0 auto!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 8px!important;border:0!important;border-radius:999px!important;
  background:transparent!important;color:var(--c-text2)!important;box-shadow:none!important;font-size:11.5px!important;letter-spacing:0!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;transition:background .2s,color .2s!important}
html.glow :is(.pick-pills,#collection-dialog .show-pills) button:is(.selected,[aria-pressed="true"]){
  background:var(--c-pill)!important;color:var(--c-pill-ink)!important;box-shadow:var(--c-pill-shadow)!important}
html.glow :is(.pick-pills,#collection-dialog .show-pills) button:focus-visible{outline:2px solid var(--c-accent-text)!important;outline-offset:-2px}
/* the shiny and prismatic pills keep a hint of their colour while they're on */
html.glow :is(.pick-pills button[data-pill="shiny"],#collection-dialog .show-pills button[data-filter="shiny"]):is(.selected,[aria-pressed="true"]){box-shadow:var(--c-pill-shadow),inset 0 -2px 0 #e9c784!important}
html.glow :is(.pick-pills button[data-pill="prism"],#collection-dialog .show-pills button[data-filter="prism"]):is(.selected,[aria-pressed="true"]){box-shadow:var(--c-pill-shadow),inset 0 -2px 0 #e5b3da!important}
html.glow .pick-pills .pl-long{display:inline}html.glow .pick-pills .pl-short{display:none}

/* ---- the dropdowns --------------------------------------------------------------------------- */
html.glow :is(.pick-filters,#collection-dialog .collection-filters){display:grid!important;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))!important;gap:6px!important;margin:0!important}
html.glow #collection-dialog .collection-filters label{display:block;min-width:0;margin:0}
html.glow :is(.pick-filters select,#collection-dialog .collection-filters select){
  -webkit-appearance:none!important;appearance:none!important;width:100%!important;max-width:none!important;min-width:0!important;height:36px!important;min-height:36px!important;margin:0!important;
  padding:0 22px 0 11px!important;border-radius:12px!important;font-size:11.5px!important;letter-spacing:0!important;text-overflow:ellipsis;cursor:pointer;
  background-image:var(--srt-down)!important;background-repeat:no-repeat!important;background-position:calc(100% - 9px) 50%!important;background-size:9px 9px!important}
/* narrowing the list right now */
html.glow :is(.pick-filters select,#collection-dialog .collection-filters select).is-set{
  border-color:var(--c-accent-text)!important;color:var(--c-accent-text)!important;background-color:var(--c-accent-soft)!important;font-weight:600!important;
  background-image:var(--srt-down-on)!important}

/* ---- how many are showing -------------------------------------------------------------------- */
html.glow .pick-tools{gap:8px!important}
html.glow #collection-dialog .collection-tools{margin:0 0 8px!important}
html.glow #collection-dialog .show-pills{margin:0 0 8px!important}
html.glow #collection-dialog .collection-filters{margin:0 0 8px!important}
html.glow .pick-note{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:0!important;padding:0 4px!important;font-size:11.5px!important;color:var(--c-text2)!important}
html.glow .pick-note[hidden]{display:none!important}
html.glow .pick-note .text-button{min-height:26px!important;padding:0 8px!important;border-radius:999px!important;font-size:11px!important;color:var(--c-accent-text)!important;background:var(--c-accent-soft)!important;border:0!important}

/* ---- the leaderboard's six boards: one row, always ----------------------------------------------- */
html.glow .ranks-tabs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:2px!important;flex-wrap:nowrap!important;
  margin:4px 16px 12px!important;padding:3px!important;border-radius:999px!important;background:var(--c-track)!important;border:1px solid var(--c-track-edge)!important;
  box-shadow:inset 0 1px 3px rgba(20,40,90,.08)!important}
html.glow dialog .ranks-tabs>button.ranks-tab{min-width:0!important;min-height:34px!important;height:34px;padding:0 2px!important;border-radius:999px!important;border:0!important;
  font-size:12px!important;letter-spacing:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent!important;color:var(--c-text2)!important;font-weight:400!important}
html.glow dialog .ranks-tabs>button.ranks-tab.is-on{background:var(--c-pill)!important;color:var(--c-pill-ink)!important;box-shadow:var(--c-pill-shadow)!important;font-weight:600!important}
html.glow dialog .ranks-tabs>button.ranks-tab:focus-visible{outline:2px solid var(--c-accent-text)!important;outline-offset:-2px}
@media (max-width:374px){html.glow .ranks-tabs{margin:4px 12px 12px!important;gap:1px!important}html.glow dialog .ranks-tabs>button.ranks-tab{font-size:11px!important;padding:0!important;letter-spacing:-.02em!important}}

/* ---- the little marks (drawn, so they match the text colour in either mode) ----------------------- */
html.glow{
  --srt-find:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238794b3' stroke-width='1.8'/%3E%3Cpath d='M10.5 10.5l3.6 3.6' stroke='%238794b3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --srt-sort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5v11M2.2 5.3L5 2.5l2.8 2.8M11 13.5v-11M8.2 10.7L11 13.5l2.8-2.8' fill='none' stroke='%231f86d6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --srt-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%238794b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --srt-down-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%231f86d6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.glow[data-lux="dusk"]{
  --srt-find:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238b9bc0' stroke-width='1.8'/%3E%3Cpath d='M10.5 10.5l3.6 3.6' stroke='%238b9bc0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --srt-sort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5v11M2.2 5.3L5 2.5l2.8 2.8M11 13.5v-11M8.2 10.7L11 13.5l2.8-2.8' fill='none' stroke='%238fd2ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --srt-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%238b9bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --srt-down-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%238fd2ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* the green and pink looks keep their own accent on the sort mark */
html.glow[data-theme="green"]{--srt-sort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5v11M2.2 5.3L5 2.5l2.8 2.8M11 13.5v-11M8.2 10.7L11 13.5l2.8-2.8' fill='none' stroke='%2316a98d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.glow[data-theme="pink"]{--srt-sort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5v11M2.2 5.3L5 2.5l2.8 2.8M11 13.5v-11M8.2 10.7L11 13.5l2.8-2.8' fill='none' stroke='%23e8609f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

@media (max-width:374px){
  html.glow .pick-row .pick-sort,html.glow #collection-dialog .collection-sort-label{flex-basis:132px!important;width:132px!important}
  html.glow :is(.pick-sort,#collection-sort){padding-left:27px!important;background-position:9px 50%,calc(100% - 8px) 50%!important;font-size:11px!important}
  html.glow :is(.pick-pills,#collection-dialog .show-pills) button{padding:0 7px!important;font-size:11px!important}
  html.glow :is(.pick-filters select,#collection-dialog .collection-filters select){font-size:11px!important;padding:0 18px 0 9px!important;background-position:calc(100% - 7px) 50%!important}
}

/* ---- the market's Buy / Sell / Listings / Sold stays on one line too ---------------------------- */
html.glow .filter-tabs.market-tabs{display:flex!important;flex-wrap:nowrap!important}
html.glow .filter-tabs.market-tabs>button:not(.market-mode){flex:1 1 auto!important;min-width:0!important;padding-left:8px!important;padding-right:8px!important;white-space:nowrap!important;font-size:12px!important;letter-spacing:0!important}
@media (max-width:374px){html.glow .filter-tabs.market-tabs>button:not(.market-mode){padding-left:5px!important;padding-right:5px!important;font-size:11px!important}}

/* =================================================================================================
   13.5 · FEEL. How things answer a touch, and text that reads in both lights (Apple's guidelines:
   44 pt hit regions, a press state on every button, 4.5:1 for small text, 11 pt at the smallest).
   feel.js moves the panels; this is the rest.
   ================================================================================================= */
/* panels are moved by feel.js (styles.css only fades in the ones it leaves alone); the scrim follows a pull */
html dialog:is(.feel-sheet,.feel-pop)::backdrop{opacity:var(--feel-scrim,1)}

/* Press: shows the moment a finger lands. Small things give more, big surfaces less. `scale` rather
   than `transform`, so it adds to whatever else an element is doing. */
:is(button,summary,[role=button],.slot,.pet-target,.creature-card,.quest-door,.scuffle-card,.haul-row,.quest-row,.chest-tier,.look-option,.scene-option,.mode-option,.safari-ticket,.run-route,.rescue-world){--press:.96}
:is(.creature-card,.quest-door,.scuffle-card,.haul-row,.quest-row,.chest-tier,.look-option,.scene-option,.mode-option,.safari-ticket,.run-route,.rescue-world,.tide-pad){--press:.975}
:is(.primary-button,.secondary-button,.run-jump){--press:.97}
.slot,.close-dialog{--press:.93}
.pet-target{--press:.985}
:is(button,summary,[role=button],.slot,.pet-target,.creature-card,.quest-door,.scuffle-card,.haul-row,.quest-row,.chest-tier,.look-option,.scene-option,.mode-option,.safari-ticket,.run-route,.rescue-world):not(:disabled):active{scale:var(--press);transition-duration:.06s}

/* every close button is a 44 pt target, whatever size it's drawn */
:where(.close-dialog:not(.text-button)){position:relative}   /* :where, so a close button placed absolutely stays put */
.close-dialog:not(.text-button)::after{content:'';position:absolute;inset:-4px}

/* the bottom bar's labels at the 11 pt floor */
.bottom-nav .nav-item{font-size:11px!important}

/* the panel titles: white on a deeper blue where the words sit */
html.glow dialog .panel-header h2::before{background:linear-gradient(90deg,#1f86d6 0%,var(--lx-sky) 34%,color-mix(in srgb,var(--lx-sky) 70%,var(--lx-sky2)) 60%,var(--lx-sky2) 100%)!important}

/* "New" reads on a light panel too; the dot stays gold */
html.glow[data-lux="day"] :is(.card-new,.quest-door-new){color:#8a5d00!important}
/* the set number in a panel's heading sits where the blue pill turns pale, so it gets its own shade */
html.glow dialog .panel-header .set-badge{color:#fff;background:rgba(8,40,100,.4);border-color:rgba(255,255,255,.4)}

/* home in daylight: the words around the pal are small and sit on bright sky and fog, where white
   can't be read. In light mode they're set in ink with soft light behind them, the way light mode
   reads everywhere else; the tags, the top bar and the bottom bar keep their blue glass. */
html.glow[data-lux="day"] #home :is(#pet-name,.pet-index,.rarity,.rarity span,.pet-level,.pet-reaction,.home-links .text-button,.home-links span,.gesture-hint button,.gesture-hint span,.moon-line,.away-watch){
  color:var(--lx-ink)!important;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.7)!important}
html.glow[data-lux="day"] #home .pet-caption::before{background:radial-gradient(closest-side,rgba(255,255,255,.66),rgba(255,255,255,.3) 55%,rgba(255,255,255,0))!important}
html.glow[data-lux="day"] #home :is(.home-links,.gesture-hint){position:relative;isolation:isolate}
html.glow[data-lux="day"] #home :is(.home-links,.gesture-hint)::before{content:'';position:absolute;z-index:-1;inset:-8px 4%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.26) 60%,rgba(255,255,255,0))}

/* daylight chrome: the glass (--fr-bg) is deep enough now to carry white words; counts become white
   chips in blue ink, and the tab you're on is a white pill, the way a selected tab reads on iPhone */
html.glow[data-lux="day"] :is(.missions-count,.bottom-nav .nav-badge,.bottom-nav #collection-count){background:#fff!important;border-color:#fff!important;color:#1d5fb0!important;text-shadow:none!important}
html.glow[data-lux="day"] .nav-item.is-active{background:rgba(255,255,255,.94)!important;color:#1d5fb0!important;text-shadow:none!important}
html.glow[data-lux="day"] .nav-item.is-active .nav-icon{color:#1d5fb0!important;filter:none!important}
/* the smallest words on home, up to a size that reads */
html.glow .bottom-nav :is(.nav-badge,#collection-count){font-size:10px!important}
html.glow #journal-home-label{font-size:10px!important;letter-spacing:.12em!important}
@media(max-height:740px){html.glow #journal-home-label{font-size:9px!important}}

/* words tinted by a rarity or a class: tinted, but dark enough to read on a light panel */
html.glow[data-lux="day"] .lx-panel .rarity>span:nth-child(2){color:color-mix(in srgb,var(--rarity-color,#ffb000) 40%,var(--c-text))!important}
html.glow .lx-panel .rarity-tier{opacity:1!important;color:var(--c-text3)!important}
html.glow[data-lux="day"] .detail-class b{color:color-mix(in srgb,var(--class-color,#a9c4da) 45%,var(--lx-ink))}
html.glow .lx-panel .play-moon{color:var(--c-text2)!important}

/* words printed over a picture (the featured banner) are white on a soft shade, in both lights */
html.glow .featured-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,48,.6),rgba(8,18,48,0) 28%)}
html.glow .featured-hero :is(.featured-hero-text,.featured-scene){z-index:1}
html.glow .lx-panel .featured-hero :is(.micro,.featured-ends,.featured-scene){color:#fff!important;text-shadow:0 1px 3px rgba(8,18,48,.75)!important}
html.glow .lx-panel .featured-hero .featured-ends{color:#ffe4c2!important}
html.glow .lx-panel .featured-hero .featured-scene{background:rgba(8,18,48,.5);padding:2px 9px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Increase Contrast: solid panels, firm edges, no faint text */
@media (prefers-contrast:more){
  html.glow{--c-text3:var(--c-text2)}
  html.glow dialog.lx-panel:not(.is-playing):not(.is-arena){background:var(--c-panel-solid)!important;border-color:var(--c-text3)!important}
}
/* Reduce Transparency: frosted surfaces become solid */
@media (prefers-reduced-transparency:reduce){
  html.glow dialog.lx-panel:not(.is-playing):not(.is-arena){background:var(--c-panel-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.glow dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}