/* 10.22 · Selection you can see.
 *
 * Picking a pal for a quest, a team, a trade or a favourite used to show a small number and a border
 * one shade lighter than the rest, and in some looks not even that (the glass look forced every
 * pal chip to the same border). Anything chosen now gets the same treatment everywhere: a ring in
 * the look's highlight colour, a soft halo, a small lift, and a badge (its number when order
 * matters, a tick when it doesn't). Loaded last so the three looks can't flatten it again.
 */
:root{--sel:#ffe4c0;--sel-soft:#ffe4c038;--sel-ink:#1c1723}
:root[data-theme="green"]{--sel:#c8f298;--sel-soft:#c8f29838;--sel-ink:#0d1e27}
:root[data-theme="pink"]{--sel:#fbaec5;--sel-soft:#fbaec538;--sel-ink:#241435}

/* the ring: pals in grids, route rows, family and wish choices, copies, scenes, boat and run pals */
:root .scuffle-card.picked,
:root .run-pet.is-on,
:root .quest-route[aria-pressed="true"],
:root .family-choice[aria-pressed="true"],
:root .wish-pet.picked,
:root .copy-chip.picked,
:root .scene-card.selected,
:root .run-biome.is-on,
:root .safari-ticket[aria-pressed="true"],
:root .safari-shop-row.is-on,
:root .variant-switch button.active{
  border-color:var(--sel)!important;
  box-shadow:0 0 0 2px var(--sel),0 0 0 6px var(--sel-soft),0 10px 24px -10px var(--sel)!important;
  position:relative;
}
:root .scuffle-card.picked,:root .run-pet.is-on,:root .wish-pet.picked{transform:translateY(-2px);transition:transform .18s ease,box-shadow .18s ease}
:root .scuffle-card.picked canvas,:root .run-pet.is-on canvas{filter:drop-shadow(0 0 6px var(--sel-soft))}

/* the home row: the pal on screen now */
:root .lineup .slot.selected{box-shadow:0 0 0 2px var(--sel),0 0 0 6px var(--sel-soft)!important;border-color:var(--sel)!important}

/* order badges: bigger, in the ring colour, so "1, 2, 3" reads at a glance */
:root .scuffle-card-pick{top:6px;left:6px;min-width:22px;width:auto;height:22px;padding:0 5px;border-radius:11px;box-sizing:border-box;font-size:12px;font-weight:700;background:var(--sel)!important;color:var(--sel-ink)!important;
  box-shadow:0 0 0 2px var(--sel-ink),0 2px 6px #0009;z-index:2;animation:sel-badge .3s cubic-bezier(.2,1.6,.4,1)}

/* a tick where order doesn't matter */
:root .scuffle-card.picked:not(:has(.scuffle-card-pick))::after,
:root .run-pet.is-on::after,
:root .quest-route[aria-pressed="true"]::after,
:root .family-choice[aria-pressed="true"]::after,
:root .wish-pet.picked::after,
:root .copy-chip.picked::after,
:root .scene-card.selected::after,
:root .safari-ticket[aria-pressed="true"]::after,
:root .run-biome.is-on::after{
  content:'✓';position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--sel);color:var(--sel-ink);font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--sel-ink);z-index:2;
  animation:sel-badge .3s cubic-bezier(.2,1.6,.4,1);pointer-events:none;
}
:root .run-pet.is-on::after{top:-6px;right:-6px;width:16px;height:16px;font-size:10px}
:root .copy-chip.picked::after{top:-7px;right:-7px;width:16px;height:16px;font-size:10px}
:root .quest-route[aria-pressed="true"]::after{top:50%;right:12px;transform:translateY(-50%);width:22px;height:22px;font-size:12px}
:root .quest-route[aria-pressed="true"]{padding-right:44px}
:root .run-biome.is-on::after{top:50%;right:12px;transform:translateY(-50%);width:22px;height:22px;font-size:12px;animation:none}
:root .run-biome.is-on{position:relative;padding-right:44px}
:root .quest-route[aria-pressed="true"] .route-duration{margin-right:0}

/* filter and tab chips: a clear edge and fill rather than a colour shift */
:root .class-chips button[aria-pressed="true"],
:root .family-strip button[aria-pressed="true"],
:root .filter-tabs button.selected,
:root .market-tabs button.selected,
:root .journal-tabs .selected{
  border-color:var(--sel)!important;color:var(--sel)!important;box-shadow:inset 0 0 0 1px var(--sel),0 0 12px -4px var(--sel)!important;
}

/* the battle lineup: the one you're swapping out and the lantern carrier */
:root .scuffle-slot.swapping{outline:none!important;box-shadow:0 0 0 2px var(--sel),0 0 0 6px var(--sel-soft)!important;border-color:var(--sel)!important}

@keyframes sel-badge{0%{transform:scale(.2);opacity:0}100%{opacity:1}}
:root .quest-route[aria-pressed="true"]::after{animation:none}
@media(prefers-reduced-motion:reduce){:root .scuffle-card.picked,:root .run-pet.is-on,:root .wish-pet.picked{transform:none}:root .scuffle-card-pick,:root [aria-pressed="true"]::after,:root .picked::after,:root .is-on::after{animation:none}}
:root.reduced-motion .scuffle-card.picked,:root.reduced-motion .run-pet.is-on{transform:none}

/* 10.22.1 · the EVENT tag used to sit bottom left, right on top of PIXL / FORMA. It now hangs under
   the pal's picture, where nothing else on the card goes. */
:root .creature-card .card-art{position:relative;display:flex;justify-content:center;flex:none}
:root .creature-card .card-art .card-event{left:50%;right:auto;top:auto;bottom:-5px;transform:translateX(-50%);font-size:7.5px;line-height:1;padding:3px 7px 2px;white-space:nowrap;z-index:1;
  background:#2b2320;box-shadow:0 0 0 2px #1c1723}

/* 10.22.1 · quests you can tell apart. Each row says its route, in the route's colour, on its own
   line; a finished one says HOME with a tick and keeps its route; the one open below has the ring. */
:root .quest-row{position:relative;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--route-color,#a9c4da) 70%,transparent)}
:root .quest-row .quest-row-route{display:block;font-style:normal;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--route-color,#a9c4da);margin-bottom:2px}
:root .quest-row.ready{border-color:var(--sel)!important;background:color-mix(in srgb,var(--sel) 8%,#1c1723)!important}
:root .quest-row.ready [data-time]{color:var(--sel)!important;font-weight:600}
:root .quest-row.ready::after{content:'✓';position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--sel);color:var(--sel-ink);font-size:11px;font-weight:700;box-shadow:0 0 0 2px var(--sel-ink);animation:quest-home 1.8s ease-in-out infinite}
:root .quest-row.focused{border-color:var(--sel)!important;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--route-color,#a9c4da) 70%,transparent),0 0 0 2px var(--sel),0 0 0 6px var(--sel-soft)!important}
@keyframes quest-home{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){:root .quest-row.ready::after{animation:none}}
:root.reduced-motion .quest-row.ready::after{animation:none}
.quest-door-status{display:inline-block;align-self:flex-start;margin-bottom:4px;padding:2px 8px;border-radius:999px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:#2c2838;color:#a9c4da;border:1px solid #a9c4da44}
.quest-door-status.is-ready{background:var(--sel);color:var(--sel-ink);border-color:var(--sel);font-weight:700}

/* Prismatic (11.6): the coat above shiny. Anything that names it wears a soft rainbow, and its
   collection card gets a rainbow edge. Flat colours only, no glow. */
:root{--prism:linear-gradient(90deg,#f5a9c8,#ffd9a0,#b8efc4,#a9d4ff,#cdb2ff,#f5a9c8)}
:root .creature-card.prism-card:not(.undiscovered){border-color:transparent!important}
:root .creature-card.prism-card:not(.undiscovered)::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--prism);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
:root .prism-tag,:root .prism-perk,:root .variant-switch button.prism,:root .scuffle-card.prism .scuffle-card-name,:root .prism-reveal .reveal-details h2,:root .card-coat.prism-name{background:var(--prism);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root .prism-perk{border-color:#cdb2ff40;background-color:transparent}
:root .variant-switch button.prism.active{box-shadow:inset 0 0 0 1px #cdb2ff99}
:root .scuffle-card.prism{border-color:#cdb2ff66}

/* 11.6.1: the profile button never gets pushed off the right edge. The bar's buttons keep their size;
   on a phone too narrow for everything, the wordmark keeps its ✦ and drops its letters (app.js
   fitTopbar), and the missions pill drops its word. */
:root .topbar .top-actions,:root .topbar #settings-button,:root .topbar .missions-button{flex-shrink:0}
/* 11.8.1: the wordmark never disappears any more. Tight: a smaller wordmark and no missions word.
   Tighter: the missions pill keeps only its count and the buttons close up. */
:root .topbar.is-tight .missions-word{display:none}
:root .topbar.is-tight .wordmark{flex:0 0 auto;font-size:12px!important;letter-spacing:.07em!important;gap:5px}
:root .topbar.is-tight .wordmark-text{display:inline}
:root .topbar.is-tighter .wordmark{font-size:11px!important;letter-spacing:.04em!important}
:root .topbar.is-tighter .missions-icon{display:none}
:root .topbar.is-tighter .missions-button{padding-left:10px;padding-right:10px}
:root .topbar.is-tighter .top-actions{gap:4px!important}
:root .topbar.is-tighter{padding-left:12px!important;padding-right:12px!important}

/* 11.9: Family of the Week. Each game's own card, the Games tab's week at a glance, and the chips. */
.family-week{margin:12px 0;padding:12px 14px 11px;border-radius:14px;border:1px solid #85cd7440;background:linear-gradient(180deg,#2c283899,#1c1723cc);text-align:left}
.family-week-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.family-week-head .micro{margin:0;font-size:9px;letter-spacing:.18em;color:#c8f298}
.family-week-have{font-size:10.5px;color:#a1a2a7;letter-spacing:.04em;white-space:nowrap}
.family-week-name{display:block;margin:3px 0 6px;font-weight:500;font-size:17px;letter-spacing:.03em;color:#f4efe3}
.family-week-strip{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 8px}
.family-week-strip canvas{width:30px;height:30px;image-rendering:pixelated;flex:none}
.family-week-line{margin:0 0 5px;font-size:11.5px;line-height:1.55;color:#c7c8cc}
.family-week-line b{color:#c8f298;font-weight:500}
.family-week-line.is-wild{color:#a9c4da}
.family-week-line.is-done{color:#e9c784}
.family-week-next{margin:6px 0 0;padding-top:7px;border-top:1px solid #dae7f114;font-size:10.5px;letter-spacing:.03em;color:#86878f}
.family-week.is-compact{margin:10px 0 12px;padding:10px 12px}
.family-week.is-compact .family-week-name{font-size:15px;margin-bottom:4px}
.family-week-slot:empty{display:none}
#run-family .family-week{margin-top:4px}
#pond-family .family-week{margin:14px 0 6px}
.family-table{margin-top:11px;padding-top:10px;border-top:1px solid #dae7f114}
.family-table .micro{margin:0 0 4px;font-size:9px;letter-spacing:.18em;color:#c8f298}
.games-chests .family-table-line{margin:0 0 7px;font-size:11.5px;color:#a1a2a7}
.family-table-rows{display:grid;gap:5px}
.family-table-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;column-gap:10px;font-size:11.5px}
.family-table-row span{color:#a1a2a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.family-table-row b{color:#f4efe3;font-weight:500;text-align:right}
.family-table-row i{font-style:normal;color:#86878f;font-size:10.5px;min-width:34px;text-align:right}
.family-table-row em{grid-column:1/-1;font-style:normal;font-size:10px;color:#717380;margin-top:-3px;text-align:right}
.game-family-chip{display:block;margin-top:3px;font-style:normal;font-size:10.5px;letter-spacing:.03em;color:#c8f298}
.rescue-world-text i.is-family{color:#c8f298;font-style:normal}

/* 11.9.3: the collection's controls, in one order and one look. Counts on one quiet line; search
   and sort; what to show, as six rounded pills in a tidy grid; then the three filters (family,
   class, series) as matching dropdowns side by side. */
#collection-dialog .binder-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:10px 0 0;font-size:11px;line-height:1.5;color:#a1a2a7}
#collection-dialog .binder-stats .shiny-progress{margin:0;font-size:11px;color:#a1a2a7}
#collection-dialog .binder-stats #favorites-count{color:#86878f}
#collection-dialog .collection-tools{display:flex;align-items:center;gap:8px;margin:14px 0 10px}
#collection-dialog .collection-tools .collection-search{flex:1 1 auto;width:auto;min-width:0;height:40px;min-height:40px;margin:0;border-radius:12px}
#collection-dialog .collection-sort-label{display:block;flex:0 0 132px;width:132px;margin:0}
#collection-dialog .collection-sort-label select,#collection-dialog #collection-sort{width:100%;height:40px;min-height:40px;margin:0;border-radius:12px;font-size:11.5px}
#collection-dialog .show-pills{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px;padding:0;border:0;background:none}
#collection-dialog .show-pills button{height:34px;min-height:34px;margin:0;padding:0 6px;border-radius:17px;border:1px solid #a9c4da29!important;background:#1c1723!important;color:#a1a2a7!important;font-size:11.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none!important}
#collection-dialog .show-pills button.selected{border-color:#dae7f1!important;color:#f4efe3!important;background:#121a47!important}
#collection-dialog .show-pills button[data-filter="prism"].selected{border-color:#e5b3da!important}
#collection-dialog .show-pills button[data-filter="shiny"].selected{border-color:#f1c593!important}
#collection-dialog .collection-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 6px}
#collection-dialog .collection-filters label{display:block;min-width:0;margin:0}
#collection-dialog .collection-filters select{width:100%;max-width:none;height:38px;min-height:38px;margin:0;padding:0 20px 0 10px;border-radius:12px;font-size:11px;text-overflow:ellipsis}
#collection-dialog .family-note{margin:6px 2px 4px}

/* 11.9.5: no double-tap zoom anywhere (the page can't be zoomed in by accident). */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---- 12.0.1: one way to find a pal, in every picker (pal-picker.js) ------------------------------ */
.pick-tools{display:flex;flex-direction:column;gap:6px;margin:10px 0;container-type:inline-size}
.pick-pills .pl-short{display:none}
.pick-row{display:flex;gap:8px;align-items:center}
.pick-row .pick-search{flex:1 1 auto;min-width:0;width:auto;height:40px;min-height:40px;margin:0;border-radius:12px;font-size:12px}
.pick-row .pick-sort{flex:0 0 140px;width:140px;max-width:none;height:40px;min-height:40px;margin:0;padding:0 20px 0 9px;border-radius:12px;font-size:11px}
.pick-pills{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.pick-pills button{height:32px;min-height:32px;margin:0;padding:0 6px;border-radius:16px;border:1px solid #a9c4da29;background:#1c1723;color:#a1a2a7;font:inherit;font-size:11.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:none}
.pick-pills[style*="--n: 4"] button{padding:0 3px;letter-spacing:0;font-size:11px}
.pick-pills button.selected{border-color:#dae7f1;color:#f4efe3;background:#121a47}
.pick-pills button[data-pill="shiny"].selected{border-color:#f1c593}
.pick-pills button[data-pill="prism"].selected{border-color:#e5b3da}
.pick-filters{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.pick-filters select{width:100%;max-width:none;min-width:0;height:36px;min-height:36px;margin:0;padding:0 20px 0 10px;border-radius:12px;font-size:11px;text-overflow:ellipsis}
.pick-note{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:0 2px;font-size:11px;color:#a1a2a7}
.pick-note[hidden]{display:none}
.pick-note .text-button,.pick-empty .text-button{min-height:28px;padding:0 6px;font-size:11px}
.pick-empty{grid-column:1/-1;margin:18px 0;text-align:center;font-size:12px;color:#a1a2a7}
/* favorites: your six as slots, tap one then a pal to swap */
.fav-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:8px 0 6px}
.fav-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;height:68px;margin:0;padding:4px 2px 4px;border-radius:12px;border:1px solid #a9c4da29;background:#1c1723;color:#dae7f1;font:inherit;font-size:9.5px;cursor:pointer;box-shadow:none}
.fav-slot canvas{width:36px;height:36px;image-rendering:pixelated}
.fav-slot span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-slot i{position:absolute;top:3px;left:5px;font-style:normal;font-size:8.5px;color:#7497b4}
.fav-slot.is-empty{border-style:dashed;color:#7497b4;justify-content:center}
.fav-slot.shiny{border-color:#f1c59366}.fav-slot.prism{border-color:#e5b3da77}
.fav-slot.is-swap{border-color:#ffe4c0;background:#2a2233;box-shadow:0 0 0 2px #ffe4c055}
.fav-slot.is-ask{animation:fav-ask 1.1s ease-in-out infinite alternate}
@keyframes fav-ask{to{border-color:#ffe4c0;box-shadow:0 0 0 2px #ffe4c044}}
.fav-slots.is-nudge{animation:fav-nudge .45s}
@keyframes fav-nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.reduced-motion .fav-slot.is-ask,.reduced-motion .fav-slots.is-nudge{animation:none}
.fav-help{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:28px;margin:0;font-size:11.5px;line-height:1.4;color:#a1a2a7}
.fav-help.is-swap,.fav-help.is-ask{color:#ffe4c0}
.fav-help canvas{width:32px;height:32px;image-rendering:pixelated}
.fav-help .text-button{min-height:28px;padding:0 6px;font-size:11.5px}
.favorites-dialog .favorites-grid{max-height:44vh}
/* 12.0.1: narrow dialogs on small phones. The filters lose a little padding and long pill labels
   swap for short ones, so nothing ends in dots. */
@container (max-width:300px){
  .pick-filters select{padding:0 16px 0 7px;font-size:10.5px;letter-spacing:0}
  .pick-pills .pl-long{display:none}.pick-pills .pl-short{display:inline}
  .pick-row .pick-sort{flex-basis:128px;width:128px;font-size:10.5px;padding:0 16px 0 7px}
  .pick-row .pick-search{font-size:11.5px}
}