/* Pogo Hub: "cozy game menu" facelift (Claude Design, Oct 2026)
 *
 * Sky canvas, white floating cards, Baloo 2 display + Nunito UI, toy buttons.
 * Light is the default. Dark mode overrides the surface/ink tokens only
 * (:root[data-theme="dark"]); accent fills and deep pills are the same in both.
 *
 * Accent steps (one job each, same everywhere):
 *   fill  dots, bars, icons        deep  solid pill with white text (AA)
 *   ink   text on tint (AA)        tint  badge and panel surfaces
 *
 *   orange  live / high priority / Target First
 *   red     final day / urgent / degraded
 *   green   worth doing / feed live / favorites / go
 *   gold    shiny / collection / stale / review
 *   blue    primary actions / upcoming / PvP / Sleep
 *   violet  Mega / hosting / candy plan
 *   pink    one-day events / Max
 *   slate   low priority / neutral counts
 */

:root {
  color-scheme: light;

  /* surfaces */
  --canvas: linear-gradient(180deg, #BEE5FA 0px, #D6F0F8 380px, #E4F6F0 900px, #EEF8F2 100%);
  --canvas-base: #EEF8F2;
  --card: #FFFFFF;
  --inset: #F2F6FA;
  --field: #EEF4FA;
  --ghost: rgba(255, 255, 255, .72);
  --bubble: rgba(255, 255, 255, .3);
  --shadow: 0 1px 0 rgba(31, 53, 80, .05), 0 10px 24px -14px rgba(31, 80, 130, .35);
  --shadow-sm: 0 1px 0 rgba(31, 53, 80, .05), 0 6px 16px -12px rgba(31, 80, 130, .35);
  --line: #E3EBF3;
  --line2: #EEF2F6;
  --ring: #D3E2F0;
  --edge: #C9DAEC;
  --dash: #C9D8E6;
  --disc: #FFFFFF;
  --track: #E6ECF2;

  /* ink */
  --ink: #1F3550;
  --ink2: #475A72;
  --ink3: #5B6D82;
  --link: #1F5FB8;
  --link-h: #174A90;

  /* accent tints + inks (flip in dark) */
  --orange-t: #FFE8D4; --orange-i: #A84300;
  --red-t: #FFE2E2;    --red-i: #B0242B;
  --green-t: #DCF5E4;  --green-i: #1C7A3D;
  --gold-t: #FFF1C7;   --gold-i: #8A5A00;
  --blue-t: #DDEBFF;   --blue-i: #1F5FB8;
  --violet-t: #ECE4FF; --violet-i: #5B30C9;
  --pink-t: #FFE0EF;   --pink-i: #B0236B;
  --slate-t: #EDF1F5;  --slate-i: #4A5A6E;
  --shadow-t: #E9E3F5; --shadow-i: #4B3A75;

  /* warm panels */
  --cream: #FFF4E2;
  --cream-end: #FFEAD0;
  --cream-ink: #5A3A00;
  --cream-ink2: #7A4D00;
  --cream-ring: #FBE3BF;
  --cream-edge: #F1D6AC;
  --nameplate: #FFF8E8;
  --np-track: #E9E1CF;
  --np-ring: #D9CDB2;
  --review: #FFFBEF;
  --review-dash: #EBCB7A;
  --degraded: #FFF3F0;
  --degraded-ring: #F6C6C0;
  --prep-soft: #FFF4E8;
  --red-soft: #FFF3F3;
  --done: #F1FBF4;

  /* state rings */
  --final-ring: #F7B4B6;
  --live-ring: #FFD2AE;
  --today-ring: #FFD9B0;
  --today-head: linear-gradient(180deg, #FFF1DE, #FFF8EE);
  --week-live: #FFF6EE;
  --rot-bg: #F6F2E8; --rot-fg: #6A5A2E; --rot-bd: #CDBB8A;

  /* fixed accent fills + deeps (same in both themes) */
  --orange: #F07A1F; --orange-d: #BF5208; --orange-e: #8E3C05;
  --red: #E5484D;    --red-d: #D33A40;    --red-e: #A3262C;
  --green: #34B866;  --green-d: #15803F;  --green-e: #0E5C2C;
  --gold: #F2B705;   --gold-d: #8A5A00;
  --blue: #3D8BF2;   --blue-d: #2F74D9;   --blue-e: #1D4F9C;
  --violet: #8B5CF6; --violet-d: #6D43D9; --violet-e: #4E2DA6;
  --pink: #EC4C9A;   --pink-d: #C42F7A;
  --slate: #8796A8;  --slate-d: #4A5A6E;
  --hp-hi: #2FBF62; --hp-mid: #F4B91C; --hp-lo: #EC4547;
  --navy: #2A3A55;

  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 22px;
  --r-tile: 18px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: linear-gradient(180deg, #0E1730 0px, #122040 380px, #13283C 900px, #142A36 100%);
  --canvas-base: #142A36;
  --card: #1A2849;
  --inset: #22335A;
  --field: #243762;
  --ghost: rgba(26, 40, 73, .72);
  --bubble: rgba(255, 255, 255, .035);
  --shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 12px 26px -14px rgba(0, 0, 0, .65);
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 16px -12px rgba(0, 0, 0, .6);
  --line: #2A3C63;
  --line2: #263760;
  --ring: #33497A;
  --edge: #0F1934;
  --dash: #3A5482;
  --disc: #34497A;
  --track: #2A3A5C;
  --ink: #EAF1FB;
  --ink2: #BAC7DA;
  --ink3: #9CADC4;
  --link: #A2C8FF;
  --link-h: #C6DCFF;
  --orange-t: #4A2914; --orange-i: #FFB27A;
  --red-t: #4C1D27;    --red-i: #FF9DA3;
  --green-t: #143D2B;  --green-i: #7FE0A6;
  --gold-t: #40330F;   --gold-i: #FFD866;
  --blue-t: #183059;   --blue-i: #A2C8FF;
  --violet-t: #2D2459; --violet-i: #C7B5FF;
  --pink-t: #4A1B38;   --pink-i: #FF9FCD;
  --slate-t: #26365A;  --slate-i: #BAC7DA;
  --shadow-t: #2E2850; --shadow-i: #CFC2F2;
  --cream: #2C2519;
  --cream-end: #2A2216;
  --cream-ink: #F3DDB5;
  --cream-ink2: #F2CF8C;
  --cream-ring: #4A3C22;
  --cream-edge: #3D311E;
  --nameplate: #2A2418;
  --np-track: #3B3322;
  --np-ring: #4A3C22;
  --review: #2B2614;
  --review-dash: #6E5823;
  --degraded: #3A1E26;
  --degraded-ring: #5A2A33;
  --prep-soft: #3A2616;
  --red-soft: #33192A;
  --done: #183527;
  --final-ring: #7A2E38;
  --live-ring: #6A3E1E;
  --today-ring: #6A4524;
  --today-head: linear-gradient(180deg, #3A2A1C, #24283E);
  --week-live: #33261C;
  --rot-bg: #2E2A20; --rot-fg: #E3CF95; --rot-bd: #6E5E33;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas-base);
  color: var(--ink);
  font: 600 14px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, select { font-family: inherit; }
button { color: inherit; }
img { display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-h); text-decoration: underline; }

:focus-visible { outline: 2.5px solid var(--blue-d); outline-offset: 2px; }

.ambient {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--canvas);
  pointer-events: none;
  z-index: -2;
}
.ambient::before,
.ambient::after,
.ambient i {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--bubble);
}
.ambient::before { top: -120px; right: -60px; width: 380px; height: 380px; }
.ambient::after { top: 40px; left: -80px; width: 220px; height: 220px; }
.ambient i { top: 120px; right: 260px; width: 90px; height: 90px; }

.app {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px clamp(10px, 2vw, 24px) 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.view { display: none; }
.view.is-active { display: flex; flex-direction: column; gap: 18px; }

.num { font-variant-numeric: tabular-nums; }
.disp { font-family: var(--font-display); }

@keyframes ph-pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 122, 31, .6); } 70% { box-shadow: 0 0 0 7px rgba(240, 122, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 122, 31, 0); } }
@keyframes ph-pulse-g { 0% { box-shadow: 0 0 0 0 rgba(52, 184, 102, .6); } 70% { box-shadow: 0 0 0 6px rgba(52, 184, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 184, 102, 0); } }
@keyframes ph-pulse-r { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); } 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
@keyframes ph-pulse-w { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@keyframes ph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- shared atoms ---------- */

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.dot.is-live { background: var(--orange); animation: ph-pulse 1.8s ease-out infinite; }
.dot.is-ok { background: var(--green); animation: ph-pulse-g 2s ease-out infinite; }
.dot.is-stale { background: var(--gold); }
.dot.is-down { background: var(--red); }

/* toy buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font: 800 13.5px var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:disabled { cursor: progress; opacity: .85; }
.btn-primary { background: var(--blue-d); color: #fff; box-shadow: 0 4px 0 var(--blue-e), 0 8px 14px -6px rgba(29, 79, 156, .6); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-e); }
.btn-soft { background: var(--field); color: var(--blue-i); box-shadow: 0 3px 0 var(--edge); }
.btn-soft:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.btn-danger { height: 34px; background: var(--red-d); color: #fff; box-shadow: 0 3px 0 var(--red-e); }
.btn-danger:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-e); }
.btn svg { flex: none; }
.btn.is-busy svg { animation: ph-spin .8s linear infinite; }

.more-btn {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ghost);
  color: var(--blue-i);
  font: 800 13px var(--font-ui);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--ring);
}

/* section headers: colored pill + subtitle, optional right note */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 9px;
}
.sec-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sec-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 2px 14px 0;
  border-radius: 999px;
  background: var(--blue-d);
  color: #fff;
  font: 700 16px/1 var(--font-display);
  box-shadow: 0 3px 0 var(--blue-e);
  white-space: nowrap;
  margin: 0;
}
.sec-pill.c-red { background: var(--red-d); box-shadow: 0 3px 0 var(--red-e); }
.sec-pill.c-orange { background: var(--orange-d); box-shadow: 0 3px 0 var(--orange-e); }
.sec-pill.c-violet { background: var(--violet-d); box-shadow: 0 3px 0 var(--violet-e); }
.sec-pill.c-green { background: var(--green-d); box-shadow: 0 3px 0 var(--green-e); }
.sec-sub { font: 700 12.5px var(--font-ui); color: var(--ink2); }
.sec-note { display: flex; align-items: center; gap: 7px; font: 700 12px var(--font-ui); color: var(--ink3); }
.sec-note::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--green); }
.sec-note.no-bar::before { display: none; }

.sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 0 0 8px;
}
.sub-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding-top: 2px;
  font: 700 16px/1 var(--font-display);
}
.sub-head h3::before { content: ""; width: 5px; height: 16px; border-radius: 3px; background: var(--bar, var(--green)); }
.sub-head span { font: 700 12px var(--font-ui); color: var(--ink3); }

/* empty states */
.empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ghost);
  border: 2px dashed var(--dash);
  border-radius: 20px;
}
.empty-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-t);
  color: var(--blue-i);
  font: 800 16px/1 var(--font-display);
}
.empty-icon.c-orange { background: var(--orange-t); color: var(--orange-i); }
.empty-icon.c-violet { background: var(--violet-t); color: var(--violet-i); }
.empty-icon.c-green { background: var(--green-t); color: var(--green-i); }
.empty-icon.c-red { background: var(--red-t); color: var(--red-i); }
.empty-title { font: 700 16px/1.2 var(--font-display); padding-top: 2px; }
.empty-copy { font: 600 13px/1.4 var(--font-ui); color: var(--ink2); }
.empty.is-plain { display: block; font: 700 13px var(--font-ui); color: var(--ink2); }

/* notices (stale / warnings) */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--review);
  box-shadow: inset 0 0 0 2px var(--review-dash);
  font: 600 13px/1.45 var(--font-ui);
  color: var(--ink2);
}
.notice code { font: 600 12px ui-monospace, Menlo, monospace; }
.notice.is-red { background: var(--degraded); box-shadow: inset 0 0 0 2px var(--degraded-ring); }

/* pills / chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font: 900 11px/20px var(--font-ui);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--slate-t);
  color: var(--slate-i);
}
.pill.c-orange { background: var(--orange-t); color: var(--orange-i); }
.pill.c-red { background: var(--red-t); color: var(--red-i); }
.pill.c-green { background: var(--green-t); color: var(--green-i); }
.pill.c-gold { background: var(--gold-t); color: var(--gold-i); }
.pill.c-blue { background: var(--blue-t); color: var(--blue-i); }
.pill.c-violet { background: var(--violet-t); color: var(--violet-i); }
.pill.c-pink { background: var(--pink-t); color: var(--pink-i); }
.pill.c-shadow { background: var(--shadow-t); color: var(--shadow-i); }
.pill.solid-green { background: var(--green-d); color: #fff; }
.pill.solid-red { background: var(--red-d); color: #fff; }
.pill.solid-blue { background: var(--blue-d); color: #fff; }
.pill.solid-orange { background: var(--orange-d); color: #fff; }
.pill.solid-pink { background: var(--pink-d); color: #fff; }
.pill.solid-violet { background: var(--violet-d); color: #fff; }
.pill.c-slate { background: var(--slate-t); color: var(--slate-i); }
.pill.sm { height: 18px; padding: 0 7px; font-size: 10px; line-height: 18px; }

/* sprite disc: image overflows the disc; initial shows if the image fails */
.spr {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s, 44px);
  height: var(--s, 44px);
  border-radius: 50%;
  background: var(--disc-bg, var(--inset));
  /* reserve room for the part of the sprite that overflows the disc,
     so it never sits on top of the text above or below */
  margin-block: calc(var(--s, 44px) * (var(--zoom, 1.3) - 1) / 2);
}
.spr img {
  width: calc(var(--s, 44px) * var(--zoom, 1.3));
  height: calc(var(--s, 44px) * var(--zoom, 1.3));
  max-width: none;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.spr-ini { font: 800 calc(var(--s, 44px) * .38) var(--font-display); color: var(--ink3); }
.spr img ~ .spr-ini { display: none; }
.spr .shiny {
  position: absolute;
  z-index: 1;
  top: -3px;
  right: -4px;
  width: 15px;
  height: 15px;
}
.spr .fav-star {
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--card);
  color: #fff;
  font: 900 9px/15px var(--font-ui);
  text-align: center;
}

/* HP-style time meter */
.meter { display: flex; align-items: center; gap: 5px; }
.meter-tag {
  flex: none;
  padding: 3px 4px 2px;
  border-radius: 4px;
  background: var(--navy);
  color: #FFC94A;
  font: 900 8.5px/1 var(--font-ui);
  letter-spacing: .06em;
}
.meter-track {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.meter.is-pending .meter-track { box-shadow: inset 0 0 0 1.5px var(--ring); }
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hp-hi);
  transition: width 1s linear, background-color .4s;
}
.meter-fill.hp-mid { background: var(--hp-mid); }
.meter-fill.hp-lo { background: var(--hp-lo); }

/* ---------- header ---------- */

.command { display: flex; flex-direction: column; gap: 14px; }

.hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 9px 10px 9px 12px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  /* Poke Ball: red top, dark band, white bottom, center button */
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #26262B;
  background: linear-gradient(to bottom, #EF4136 0 45%, #26262B 45% 57%, #F7F7F7 57% 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 3px 8px -3px rgba(239, 65, 54, .55);
  box-sizing: border-box;
}
.brand-mark::before {
  /* center button */
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #26262B;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
}
.brand-mark::after {
  /* shine on the red half */
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 9px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  transform: rotate(-30deg);
}
.brand-name { font: 800 23px/1 var(--font-display); padding-top: 3px; letter-spacing: -.01em; margin: 0; }

.glance { display: flex; flex-wrap: wrap; gap: 6px; }
.glance-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 3px 3px 11px;
  border-radius: 999px;
  background: var(--inset);
  font: 800 12.5px var(--font-ui);
  color: var(--ink2);
}
.glance-num {
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--slate-d);
  color: #fff;
  font: 800 15px/28px var(--font-display);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.glance-num.c-orange { background: var(--orange-d); }
.glance-num.c-green { background: var(--green-d); }
.glance-num.c-red { background: var(--red-d); }

.hdr-spacer { flex: 1; }
.hdr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.map-link,
.feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: 800 13px var(--font-ui);
  white-space: nowrap;
}
.map-link { background: var(--field); color: var(--blue-i); }
.map-link:hover { text-decoration: none; color: var(--link-h); }
.feed-pill { background: var(--green-t); color: var(--green-i); }
.feed-pill.is-stale { background: var(--gold-t); color: var(--gold-i); }
.feed-pill.is-down { background: var(--red-t); color: var(--red-i); }

.theme-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--field);
  color: var(--blue-i);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease;
}
.theme-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.theme-btn .ic-moon { display: block; }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }

/* FINAL DAY banner */
.final-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 12px 14px 12px 16px;
  border-radius: 24px;
  background: linear-gradient(120deg, #E5484D 0%, #CF3346 100%);
  color: #fff;
  box-shadow: 0 4px 0 #9E2234, 0 14px 26px -12px rgba(201, 48, 74, .7);
}
.final-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fff;
  color: #B0242B;
  font: 900 13px var(--font-ui);
  letter-spacing: .06em;
}
.final-chip .dot { background: var(--red); animation: ph-pulse-r 1.4s ease-out infinite; width: 9px; height: 9px; }
.final-headline { flex: 1 1 280px; min-width: 0; font: 700 21px/1.15 var(--font-display); padding-top: 2px; text-wrap: pretty; }
.nameplate {
  flex: 0 1 300px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px 10px;
  border-radius: 14px;
  background: var(--nameplate);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--cream-ring), 0 3px 0 #9E2234;
}
.nameplate-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nameplate-when { font: 800 12.5px var(--font-ui); color: var(--ink3); }
.nameplate-cd { font: 800 22px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--red-i); }
.nameplate .meter-tag { font-size: 9px; padding: 3px 5px 2px; border-radius: 5px; }
.nameplate .meter-track { height: 9px; background: var(--np-track); box-shadow: inset 0 0 0 1.5px var(--np-ring); }

/* degraded banner */
.degraded-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--degraded);
  box-shadow: inset 0 0 0 2px var(--degraded-ring);
}
.degraded-banner .empty-icon { width: 40px; height: 40px; background: var(--red-t); }
.degraded-text { flex: 1 1 300px; }
.degraded-title { font: 700 17px/1.2 var(--font-display); color: var(--red-i); padding-top: 2px; }
.degraded-copy { font: 600 13px/1.4 var(--font-ui); color: var(--ink2); }

/* ---------- tabs + filters ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.tabbar {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font: 800 15px var(--font-ui);
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.tab:active { transform: translateY(2px); }
.tab:hover:not(.is-active) { background: var(--inset); }
.tab.is-active { background: var(--blue-d); color: #fff; box-shadow: 0 3px 0 var(--blue-e); }
.tab--sleep.is-active { background: linear-gradient(140deg, #1F3077, #3654B3); box-shadow: 0 3px 0 #141F4C; }
.tab-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--slate-t);
  color: var(--slate-i);
  font: 900 11.5px/20px var(--font-ui);
  text-align: center;
}
.tab-count:empty { display: none; }
.tab.is-active .tab-count { background: #fff; color: #1F5FB8; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.app[data-view="sleep"] .filters,
.app[data-view="sources"] .filters { display: none; }
.filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 5px 0 14px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.filter > span { font: 800 12.5px var(--font-ui); color: var(--ink3); }
.select-wrap { position: relative; display: flex; }
.filter select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 32px 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font: 800 13px var(--font-ui);
  cursor: pointer;
}
.select-wrap svg { position: absolute; right: 12px; top: 10px; pointer-events: none; }

/* ---------- Today: Raid Final Call ---------- */

.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 206px), 1fr));
  gap: 8px;
}
.fc-tile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  padding: 9px 12px 9px 9px;
  border-radius: var(--r-tile);
  background: var(--card);
  box-shadow: var(--shadow);
}
.fc-tile .spr { grid-row: span 2; }
.fc-tile.is-pending { opacity: .92; }
.fc-tile.is-final { background: var(--red-soft); box-shadow: inset 0 0 0 2px var(--final-ring), var(--shadow); }
.fc-top { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.fc-name {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  font: 700 15px/1.15 var(--font-display);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.fc-tile .pill { flex: none; margin-top: 1px; height: 18px; padding: 0 7px; font-size: 10.5px; line-height: 18px; }
.fc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-foot { display: flex; align-items: center; gap: 6px; font: 700 11.5px/1.2 var(--font-ui); color: var(--ink3); }
.fc-when { min-width: 0; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cd { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.fc-tile.is-pending .fc-cd { color: var(--blue-i); }
.fc-tile.is-final .fc-when,
.fc-tile.is-final .fc-cd { color: var(--red-i); }

/* collapsible grids: extra tiles hidden until opened */
.limit-box:not(.is-open) .x-wide { display: none; }
.limit-box .more-narrow { display: none; }
@media (max-width: 719px) {
  .limit-box:not(.is-open) .x-narrow { display: none; }
  .limit-box .more-wide { display: none; }
  .limit-box .more-narrow { display: block; }
}

/* ---------- Today: Target First + Hosting ---------- */

.duo { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.duo > .tf-section { flex: 1.3 1 520px; min-width: 0; }
.duo > .host-section { flex: 1 1 400px; min-width: 0; }
.tf-section .sec-head { margin: 0; }

.tf-row { display: flex; gap: 10px; overflow-x: auto; padding: 34px 2px 6px; margin: 0 -2px; }
.tf-card {
  flex: 1 0 132px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 52px 10px 12px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-align: center;
}
.tf-card > .spr {
  position: absolute;
  top: -26px;
  left: 50%;
  margin-left: -31px;
  --s: 62px;
  margin-block: 0;
  box-shadow: 0 0 0 4px var(--card), 0 6px 12px -4px rgba(31, 80, 130, .35);
}
.tf-rank {
  position: absolute;
  top: 8px;
  left: 9px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--orange-t);
  color: var(--orange-i);
  font: 900 11px/20px var(--font-ui);
}
.tf-card > .shiny { position: absolute; top: 8px; right: 9px; width: 17px; height: 17px; }
.tf-name { font: 700 16px/1.1 var(--font-display); text-wrap: balance; }
.tf-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px 0 3px;
  border-radius: 999px;
  font: 800 10.5px/1 var(--font-ui);
  background: var(--slate-t);
  color: var(--slate-i);
}
.tag-chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--slate); display: grid; place-items: center; }
.tag-chip svg { width: 9px; height: 9px; }
.tag-chip.t-raids { background: var(--orange-t); color: var(--orange-i); } .tag-chip.t-raids i { background: var(--orange); }
.tag-chip.t-pvp { background: var(--blue-t); color: var(--blue-i); } .tag-chip.t-pvp i { background: var(--blue); }
.tag-chip.t-mega { background: var(--violet-t); color: var(--violet-i); } .tag-chip.t-mega i { background: var(--violet); }
.tag-chip.t-candy { background: var(--green-t); color: var(--green-i); } .tag-chip.t-candy i { background: var(--green); }
.tag-chip.t-shiny { background: var(--gold-t); color: var(--gold-i); } .tag-chip.t-shiny i { background: var(--gold); }
.tag-chip.t-max { background: var(--pink-t); color: var(--pink-i); } .tag-chip.t-max i { background: var(--pink); }
.tf-why {
  font: 600 12px/1.35 var(--font-ui);
  color: var(--ink2);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.host-section .sec-head { margin-bottom: 10px; }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
.host-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 7px 9px;
  background: var(--card);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow);
}
.host-tile-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.host-rank { font: 900 11px var(--font-ui); color: var(--ink3); }
.host-tile .pill { height: 17px; padding: 0 6px; font-size: 10px; line-height: 17px; }
.host-tile .spr { --s: 46px; }
.host-tile .spr .shiny { top: -2px; right: -5px; width: 14px; height: 14px; }
.host-name {
  max-width: 100%;
  font: 800 12.5px/1.2 var(--font-ui);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.host-prefix { margin-top: 0; font: 900 9.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.host-prefix.is-shadow { color: var(--shadow-i); }
.host-prefix.is-mega { color: var(--violet-i); }
.host-prefix.is-dynamax, .host-prefix.is-gigantamax { color: var(--pink-i); }
.host-note { margin: 8px 2px 0; display: flex; gap: 7px; align-items: flex-start; font: 600 12px/1.4 var(--font-ui); color: var(--ink3); }
.host-note i {
  flex: none;
  margin-top: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--slate);
  color: #fff;
  font: 900 10px/15px var(--font-ui);
  font-style: normal;
  text-align: center;
}
.host-note.is-stale { color: var(--rot-fg); }
.host-note.is-stale i { background: #C9A23C; }

/* ---------- Today: Pokemon Sleep strip ---------- */

.sstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sstrip-seg {
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  box-shadow: -1px 0 0 var(--line);
  min-width: 0;
}
.sstrip-reset {
  flex: 1 1 220px;
  position: relative;
  overflow: hidden;
  padding: 11px 16px 12px;
  background: linear-gradient(135deg, #1F3077 0%, #2F4FAE 100%);
  color: #fff;
}
.sstrip-reset::before {
  content: "";
  position: absolute;
  right: -18px;
  top: -22px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.sstrip-reset::after {
  content: "";
  position: absolute;
  right: 38px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.night-label { font: 800 11.5px var(--font-ui); color: #C8D8FF; }
.sstrip-clock { display: block; font: 800 27px/1.1 var(--font-display); font-variant-numeric: tabular-nums; padding-top: 3px; }
.night-bar { margin-top: 4px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.night-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: #8FD3FF; }
.sstrip-reset .night-label + .night-label,
.sstrip-reset .night-sub { margin-top: 5px; }
.night-sub { font: 700 11.5px var(--font-ui); color: #C8D8FF; }
.sstrip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sstrip-row.wrap { flex-wrap: wrap; }
.eyebrow { flex: none; font: 900 10.5px var(--font-ui); letter-spacing: .05em; color: var(--ink3); text-transform: uppercase; }
.sstrip-live { font: 700 13.5px/1.25 var(--font-ui); color: var(--ink); min-width: 0; }
.sstrip-next { font: 700 15px/1.1 var(--font-display); padding-top: 2px; }
.sstrip-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sstrip-team { display: flex; flex-wrap: wrap; gap: 8px; }
.sstrip-team-seg { flex: 1.2 1 310px; }
.sstrip-team .spr { --s: 52px; --zoom: 1.25; box-shadow: inset 0 0 0 1.5px var(--line); }
.sstrip-team .spr .fav-star { width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
.sstrip-team .spr.is-fav { box-shadow: 0 0 0 2px var(--green); }
.sstrip-team .spr-ini { color: var(--ink2); }
.sstrip-nap { position: relative; flex: 1 1 230px; background: var(--cream); gap: 5px; padding-right: 92px; }
.sstrip-nap-art { position: absolute; right: 12px; top: 50%; width: 68px; height: 58px; margin-top: -29px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px var(--cream-ring); }
.sstrip-favs { display: inline-flex; gap: 2px; margin-right: auto; margin-left: -2px; }
.sstrip-favs .berry-ic { width: 20px; height: 20px; }
.sstrip-nap .eyebrow { color: var(--gold-i); }
.sstrip-nap-line { font: 700 13px/1.3 var(--font-ui); color: var(--ink); }
.sstrip-open { flex: 0 0 auto; flex-direction: row; align-items: center; }
.sstrip-muted { font: 600 12.5px/1.4 var(--font-ui); color: var(--ink2); }

/* ---------- event cards ---------- */

.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 12px;
  align-items: start;
}
.ev {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 11px 12px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  min-width: 0;
}
.ev.is-live { box-shadow: inset 0 0 0 2px var(--live-ring), var(--shadow); }
.ev.is-final { box-shadow: inset 0 0 0 2px var(--final-ring), var(--shadow); }
.ev-head { display: flex; gap: 12px; align-items: flex-start; }
.ev-thumb {
  flex: none;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--inset);
  display: grid;
  place-items: center;
}
.ev-thumb img { width: 62px; height: 62px; object-fit: cover; }
.ev-thumb.is-sprite img { width: 54px; height: 54px; object-fit: contain; }
.ev-thumb.p-high.is-sprite { background: var(--orange-t); }
.ev-thumb.p-worth.is-sprite { background: var(--green-t); }
.ev-thumb.p-collection.is-sprite { background: var(--gold-t); }
.ev-thumb.p-low.is-sprite { background: var(--slate-t); }
.ev-thumb .spr-ini { font-size: 20px; }
.ev-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 900 10.5px/1 var(--font-ui);
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--slate-t);
  color: var(--slate-i);
}
.badge .dot { width: 7px; height: 7px; }
.badge.b-live { background: var(--orange-t); color: var(--orange-i); }
.badge.b-final { background: var(--red-d); color: #fff; }
.badge.b-today { background: var(--pink-d); color: #fff; }
.badge.b-oneday { background: var(--pink-t); color: var(--pink-i); }
.badge.b-high { background: var(--orange-t); color: var(--orange-i); }
.badge.b-worth { background: var(--green-t); color: var(--green-i); }
.badge.b-collection { background: var(--gold-t); color: var(--gold-i); }
.badge.b-low { background: var(--slate-t); color: var(--slate-i); }
.badge.b-cat { background: var(--card); color: var(--ink3); border-color: var(--line); }
.badge.b-rot { background: var(--rot-bg); color: var(--rot-fg); border: 1.5px dashed var(--rot-bd); }
.ev-title { margin: 0; padding-top: 1px; font: 700 18px/1.15 var(--font-display); text-wrap: pretty; }
.ev-window { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 12.5px var(--font-ui); color: var(--ink2); }
.cd-pill {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-t);
  color: var(--blue-i);
  font: 900 11px/20px var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cd-pill.is-live { background: var(--orange-t); color: var(--orange-i); }
.cd-pill.is-live.is-low { background: var(--red-t); color: var(--red-i); }
.ev-desc {
  margin: 0;
  font: 600 13px/1.45 var(--font-ui);
  color: var(--ink2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-targets { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mon-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 9px 0 3px;
  border-radius: 999px;
  background: var(--inset);
  font: 800 12px var(--font-ui);
  color: var(--ink);
  max-width: 100%;
}
.mon-chip .spr { --s: 22px; --zoom: 1; --disc-bg: var(--card); overflow: hidden; }
.mon-chip .spr img { width: 22px; height: 22px; }
.mon-chip .spr-ini { font: 800 11px var(--font-ui); }
.mon-chip svg { flex: none; width: 11px; height: 11px; }
.mon-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-txt { font: 800 12px var(--font-ui); color: var(--ink3); }
.ev-bonuses { display: flex; flex-wrap: wrap; gap: 5px; }
.bonus {
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--cream-ink2);
  font: 700 11.5px/1.3 var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  border-top: 1.5px solid var(--line2);
}
.prep-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--prep-soft);
  color: var(--orange-i);
  font: 800 12.5px var(--font-ui);
  cursor: pointer;
  transition: transform .08s;
}
.prep-btn:active { transform: scale(.96); }
.prep-btn i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font: 900 13px/18px var(--font-ui);
  font-style: normal;
  text-align: center;
}
.prep-btn[aria-expanded="true"] { background: var(--orange-t); }
.info-link { font: 800 12.5px var(--font-ui); color: var(--link); }
.prep-note {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--cream);
  font: 600 13px/1.45 var(--font-ui);
  color: var(--cream-ink);
}
.prep-note::before { content: ""; flex: none; width: 4px; border-radius: 2px; background: var(--gold); }

/* ---------- Week ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 10px; font: 700 12px var(--font-ui); color: var(--ink2); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr));
  gap: 8px;
  align-items: start;
}
.day {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.day.is-today { box-shadow: inset 0 0 0 2px var(--today-ring), var(--shadow); }
.day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 11px 8px 13px;
  background: var(--card);
}
.day.is-today .day-head { background: var(--today-head); }
.day-wd { display: flex; align-items: center; gap: 6px; font: 800 21px/1 var(--font-display); }
.day-wd span:first-child { padding-top: 3px; }
.day-date { font: 700 12px var(--font-ui); color: var(--ink3); }
.day-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.day-rows { display: flex; flex-direction: column; padding: 2px 6px 6px; }
.wrow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 12px;
}
.wrow.is-live { background: var(--week-live); }
.wrow .spr { --s: 28px; --zoom: 1; }
.wrow .spr img { width: 28px; height: 28px; border-radius: 50%; }
.wrow .spr.is-banner img { object-fit: cover; }
.wrow .spr-ini { font: 800 12px var(--font-ui); }
.wrow .pdot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate);
  box-shadow: 0 0 0 2px var(--card);
}
.pdot.p-high { background: var(--orange); }
.pdot.p-worth { background: var(--green); }
.pdot.p-collection { background: var(--gold); }
.wrow-title {
  font: 800 12.5px/1.25 var(--font-ui);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wrow-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 700 11px/1.3 var(--font-ui);
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
}
.wrow-meta span { overflow: hidden; text-overflow: ellipsis; }
.wrow.is-live .wrow-meta { color: var(--orange-i); }
.wrow-meta .dot { width: 6px; height: 6px; }
.day-empty { padding: 14px 8px; text-align: center; font: 700 12.5px var(--font-ui); color: var(--ink3); }
.day-more {
  margin: 4px 2px 0;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--field);
  color: var(--blue-i);
  font: 800 12px var(--font-ui);
  cursor: pointer;
  transition: transform .08s;
}
.day-more:active { transform: scale(.97); }

/* ---------- Sleep view ---------- */

.sleep-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 18px 22px;
  border-radius: 28px;
  background: linear-gradient(140deg, #1A2862 0%, #28409A 55%, #3A64C6 100%);
  color: #fff;
  box-shadow: 0 4px 0 #141F4C, 0 16px 30px -14px rgba(27, 42, 102, .7);
}
.sleep-hero > * { position: relative; }
.hero-bubbles { position: absolute !important; inset: 0; pointer-events: none; }
.hero-bubbles i { position: absolute; border-radius: 50%; }
.hero-bubbles i:nth-child(1) { right: -40px; top: -60px; width: 220px; height: 220px; background: rgba(255, 255, 255, .06); }
.hero-bubbles i:nth-child(2) { right: 180px; bottom: -30px; width: 90px; height: 90px; border: 2px solid rgba(255, 255, 255, .1); }
.hero-bubbles i:nth-child(3) { left: 44%; top: 14px; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .18); }
.hero-bubbles i:nth-child(4) { left: 52%; top: 34px; width: 8px; height: 8px; background: rgba(255, 255, 255, .18); }
.hero-snorlax {
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 74px;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  position: relative;
}
.hero-snorlax img { width: 92px; height: auto; filter: drop-shadow(0 6px 8px rgba(10, 16, 50, .45)); }
.hero-main { flex: 1 1 300px; min-width: 0; }
.hero-clock { display: block; font: 800 44px/1 var(--font-display); font-variant-numeric: tabular-nums; padding-top: 6px; }
.hero-bar { margin-top: 8px; max-width: 520px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hero-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8FD3FF, #C2B5FF); }
.hero-sub { margin-top: 7px; font: 700 12.5px var(--font-ui); color: #C8D8FF; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-stat { min-width: 92px; padding: 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .12); }
.hero-stat span { display: block; font: 800 12px var(--font-ui); color: #C8D8FF; }
.hero-stat b { display: block; font: 800 30px/1 var(--font-display); padding-top: 4px; }
.hero-stat.is-review span,
.hero-stat.is-review b { color: #FFD98A; }
.hero-src { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hero-synced { display: flex; align-items: center; gap: 6px; font: 800 12px var(--font-ui); color: #C8D8FF; }
.hero-synced i { width: 8px; height: 8px; border-radius: 50%; background: #6EE7A0; }
.hero-synced.is-stale i { background: var(--gold); }
.hero-synced.is-down i { background: var(--red); }
.hero-news {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #28409A;
  font: 800 12.5px/32px var(--font-ui);
  box-shadow: 0 3px 0 #141F4C;
}
.hero-news:hover { text-decoration: none; color: #1A2862; }

.sleep-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.sleep-main { flex: 3 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sleep-side { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.fav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: var(--r-card);
  background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--cream-ring);
}
.fav-label { display: flex; flex-direction: column; gap: 2px; }
.fav-label .eyebrow { color: var(--gold-i); }
.fav-week { font: 700 15px/1.2 var(--font-display); padding-top: 2px; }
.berries { display: flex; flex-wrap: wrap; gap: 14px; }
.berry { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.berry-ic {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.berry-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(31, 53, 80, .25)); }
/* fallback when the art is missing: the old colored dot */
.berry-ic:not(:has(img))::before { content: ""; width: 62%; height: 62%; border-radius: 50%; background: var(--berry, #C9D3DE); }
.berry-ic.is-lg {
  width: 52px;
  height: 52px;
  padding: 6px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 3px 0 var(--cream-edge);
}
.berry-ic.is-lg img { filter: drop-shadow(0 2px 2px rgba(31, 53, 80, .2)); }
.fav-island { flex: none; width: 76px; height: 76px; margin: -6px -8px -6px -6px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(31, 80, 130, .25)); }
.berry-name { font: 800 12px var(--font-ui); }
.berry .pill { height: 17px; padding: 0 7px; font-size: 10px; line-height: 17px; }
.fav-spacer { flex: 1; }
.fav-match { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fav-match-row { display: flex; align-items: center; gap: 7px; font: 800 12.5px var(--font-ui); color: var(--cream-ink); }
.fav-match-num { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-d); color: #fff; font: 800 15px/28px var(--font-display); }
.check-fav {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--red-d);
  color: #fff;
  font: 900 11px/24px var(--font-ui);
  letter-spacing: .03em;
  box-shadow: 0 2px 0 var(--red-e);
}
.check-fav .dot { width: 7px; height: 7px; background: #fff; animation: ph-pulse-w 1.6s ease-out infinite; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px 12px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.team-card.is-fav { box-shadow: inset 0 0 0 2.5px var(--green), 0 10px 24px -14px rgba(21, 128, 63, .5); }
.team-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.lv-pill { height: 20px; padding: 0 8px; border-radius: 999px; background: var(--navy); color: #FFE08A; font: 900 11px/20px var(--font-ui); }
.team-card > .spr { align-self: center; --s: 80px; --zoom: 1.12; }
.team-card > .spr .fav-star { right: 0; bottom: 2px; z-index: 1; width: 20px; height: 20px; font-size: 11px; line-height: 20px; box-shadow: 0 0 0 2.5px var(--card); }
.team-card .spr-ini { color: var(--ink2); }
.team-name { text-align: center; font: 700 18px/1.05 var(--font-display); padding-top: 2px; }
.team-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.team-chips .pill { font-weight: 800; }
.berry-chip { padding-left: 4px; background: var(--inset); color: var(--ink2); }
.berry-chip.is-fav { background: var(--green-t); color: var(--green-i); }
.berry-chip { gap: 3px; }
.berry-chip .berry-ic { width: 15px; height: 15px; }
.team-next { display: flex; flex-direction: column; gap: 3px; }
.team-next-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.team-next-bar span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.team-next small { font: 700 11px/1.3 var(--font-ui); color: var(--ink3); }
.team-note { font: 600 12px/1.4 var(--font-ui); color: var(--ink2); text-align: center; text-wrap: pretty; }

.sleep-quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.s-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.s-card.is-live { align-items: center; }
.s-card .dot.is-ok { width: 10px; height: 10px; animation: ph-pulse-g 1.6s ease-out infinite; }
.s-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.s-card-title { font: 700 17px/1.15 var(--font-display); padding-top: 1px; color: var(--ink); }
a.s-card-title:hover { color: var(--link); }
.s-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.s-card-window { font: 700 12px var(--font-ui); color: var(--ink3); }
.s-card .meter-fill { background: var(--green); }
.s-bonus-list { margin: 0; padding-left: 18px; font: 600 12.5px/1.45 var(--font-ui); color: var(--ink2); }
.cal {
  flex: none;
  align-self: flex-start;
  width: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--inset);
  text-align: center;
  box-shadow: 0 2px 0 var(--line);
}
.cal-mon { background: var(--blue-d); color: #fff; font: 900 10px/18px var(--font-ui); letter-spacing: .05em; }
.cal-day { font: 800 22px/1 var(--font-display); padding-top: 6px; }
.cal-wd { font: 800 10.5px/1 var(--font-ui); color: var(--ink3); padding: 2px 0 6px; }
.s-bonuses { display: flex; flex-wrap: wrap; gap: 4px; }
.s-bonus {
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--field);
  color: var(--blue-i);
  font: 700 11.5px/1.35 var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routine-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .08s;
}
.routine-item:active { transform: scale(.985); }
.routine-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--dash);
  color: #fff;
  font: 900 13px/22px var(--font-ui);
  text-align: center;
}
.routine-text { font: 700 13px/1.4 var(--font-ui); }
.routine-text b { font-weight: 900; }
.routine-item.is-done { background: var(--done); color: var(--ink3); }
.routine-item.is-done .routine-box { background: var(--green); box-shadow: none; }
.review-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--review);
  border: 2px dashed var(--review-dash);
  color: var(--ink);
}
a.review-card:hover { text-decoration: none; color: var(--ink); }
.review-title { font: 700 15.5px/1.2 var(--font-display); padding-top: 1px; }
.review-posted { font: 700 12px var(--font-ui); color: var(--gold-i); }
.review-raw { padding: 7px 10px; border-radius: 10px; background: var(--card); font: 600 12px/1.4 ui-monospace, Menlo, monospace; color: var(--ink2); }

.recent-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--ghost);
  color: var(--ink);
  font: 700 15px/1 var(--font-display);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--ring);
}
.recent-btn i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--slate);
  color: #fff;
  font: 900 13px/20px var(--font-ui);
  font-style: normal;
  text-align: center;
}
.recent-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.recent-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--ghost); color: var(--ink); }
a.recent-item:hover { text-decoration: none; color: var(--ink); background: var(--card); }
.recent-item b { font: 700 14.5px/1.2 var(--font-display); padding-top: 1px; }
.recent-item span { font: 700 11.5px var(--font-ui); color: var(--ink3); }

/* side column */
.nap {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-end) 100%);
  box-shadow: inset 0 0 0 2px var(--cream-ring), 0 10px 24px -16px rgba(191, 82, 8, .4);
}
.nap-banner {
  margin: -14px -16px 12px;
  height: 120px;
  overflow: hidden;
  border-bottom: 2px solid var(--cream-ring);
}
.nap-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nap > * { position: relative; }
.nap-banner + .sec-pill { margin-top: -34px; }
.nap .sec-pill { margin-bottom: 10px; }
.nap-status { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nap-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--green-d);
  color: #fff;
  font: 900 11.5px/26px var(--font-ui);
  letter-spacing: .04em;
  box-shadow: 0 3px 0 var(--green-e);
}
.nap-pill.is-napping { background: var(--blue-d); box-shadow: 0 3px 0 var(--blue-e); }
.nap-pill .dot { width: 7px; height: 7px; background: #fff; animation: ph-pulse-w 1.8s ease-out infinite; }
.nap-status-text { font: 700 12.5px var(--font-ui); color: var(--cream-ink); }
.nap-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--card); }
.nap-pick .spr { --s: 46px; }
.nap-pick .spr-ini { color: var(--ink2); }
.nap-pick-name { font: 700 17px/1.1 var(--font-display); padding-top: 2px; }
.nap-pick-why { font: 600 12px/1.35 var(--font-ui); color: var(--ink2); }
.nap-active { display: flex; flex-direction: column; gap: 8px; }
.nap-who { display: flex; align-items: center; gap: 10px; }
.nap-who .spr { --s: 50px; --disc-bg: var(--card); box-shadow: 0 3px 0 var(--cream-edge); }
.nap-who-name { font: 700 18px/1.1 var(--font-display); padding-top: 2px; }
.nap-who-day { font: 800 12.5px var(--font-ui); color: var(--gold-i); }
.nap-dots { display: flex; gap: 5px; }
.nap-dots i { flex: 1; height: 10px; border-radius: 999px; background: var(--cream-edge); }
.nap-dots i.is-on { background: var(--blue); }
.nap-exp { font: 600 12.5px/1.4 var(--font-ui); color: var(--cream-ink); }
.nap-next { margin-top: 8px; }

.list-card { display: flex; flex-direction: column; padding: 6px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.candy-row { display: flex; gap: 10px; padding: 9px 10px; border-radius: 16px; }
.candy-n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--violet-t);
  color: var(--violet-i);
  font: 800 13px/25px var(--font-display);
  text-align: center;
}
.candy-name { font: 900 12.5px var(--font-ui); color: var(--ink); }
.candy-text { font: 600 12.5px/1.4 var(--font-ui); color: var(--ink2); }
.bench-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 14px;
}
.bench-row .spr { --s: 38px; --zoom: 1.25; }
.bench-row .spr-ini { color: var(--ink2); }
.bench-name { display: flex; align-items: baseline; gap: 6px; }
.bench-name b { font: 700 15px/1.1 var(--font-display); padding-top: 2px; }
.bench-name span { font: 800 11px var(--font-ui); color: var(--ink3); }
.bench-sub { display: flex; align-items: center; gap: 5px; font: 700 11.5px var(--font-ui); color: var(--ink3); white-space: nowrap; overflow: hidden; }
.bench-sub span { overflow: hidden; text-overflow: ellipsis; }
.bench-sub .berry-ic { width: 15px; height: 15px; }
.bench-row .pill { font-size: 10px; letter-spacing: .03em; }

/* ---------- Sources ---------- */

.sources { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.sources > section.credits { flex: 1 1 100%; min-width: 0; }
.sources > section:nth-child(2) { flex: 2 1 560px; min-width: 0; }
.sources > section:last-child { flex: 1 1 320px; min-width: 0; }
.source-list {
  margin: 0;
  padding: 8px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 4px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.source-list.is-col { display: flex; flex-direction: column; }
.source-row { display: flex; gap: 12px; padding: 10px 12px; }
.source-n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-t);
  color: var(--blue-i);
  font: 800 14px/27px var(--font-display);
  text-align: center;
}
.source-dot { flex: none; margin-top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--slate)); }
.source-row h3 { margin: 0; font: 700 16px/1.2 var(--font-display); padding-top: 2px; }
.source-row p { margin: 0; font: 600 13px/1.5 var(--font-ui); color: var(--ink2); }
.source-row a { font-weight: 800; }

/* ---------- PoGo Content Feed ---------- */

.yt-head-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.yt-refresh { height: 32px; padding: 0 13px; font-size: 12.5px; }
.sec-note.is-error { color: var(--red-i); }

.yt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.yt-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.yt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 6px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font: 800 13px var(--font-ui);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .08s, background .15s;
}
.yt-chip:active { transform: translateY(2px); }
.yt-chip:hover:not(.is-active) { background: var(--inset); }
.yt-chip .spr { --s: 26px; --zoom: 1; margin: 0; overflow: hidden; }
.yt-chip .spr img { width: 26px; height: 26px; object-fit: cover; }
.yt-chip-all {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red-d);
  color: #fff;
  font-size: 10px;
}
.yt-chip-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-chip-n {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--slate-t);
  color: var(--slate-i);
  font: 900 11px/22px var(--font-ui);
  text-align: center;
}
.yt-chip.is-active { background: var(--red-d); color: #fff; box-shadow: 0 3px 0 var(--red-e); }
.yt-chip.is-active .yt-chip-n { background: #fff; color: var(--red-d); }
.yt-chip.is-active .yt-chip-all { background: #fff; color: var(--red-d); }
.yt-chip .dot { margin-right: 4px; }

.yt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font: 800 13px var(--font-ui);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.yt-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--track); transition: background .15s; }
.yt-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.yt-toggle.is-on .yt-switch { background: var(--pink-d); }
.yt-toggle.is-on .yt-switch i { transform: translateX(14px); }

.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr));
  gap: 12px;
  align-items: start;
}
.yt-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 8px 12px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.yt-card:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); }
.yt-card.is-new { box-shadow: inset 0 0 0 2px var(--final-ring), var(--shadow); }
.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #1A2235;
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-thumb.is-short img { object-fit: contain; }
.yt-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.yt-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 20, 35, .82);
  color: #fff;
  font: 800 11px/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -21px 0 0 -21px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(211, 58, 64, .92);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .12s, transform .12s;
}
.yt-card:hover .yt-play,
.yt-card:focus-visible .yt-play { opacity: 1; transform: scale(1); }
.yt-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 0; min-width: 0; }
.yt-title {
  margin: 0;
  font: 700 16px/1.2 var(--font-display);
  padding-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.yt-meta .spr { --s: 22px; --zoom: 1; margin: 0; overflow: hidden; }
.yt-meta .spr img { width: 22px; height: 22px; object-fit: cover; }
.yt-avatar .spr-ini { font: 800 11px var(--font-ui); }
.yt-channel { font: 800 12.5px var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-sub { display: flex; flex-wrap: wrap; gap: 4px; font: 700 12px var(--font-ui); color: var(--ink3); }

@media (max-width: 719px) {
  .yt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px 2px 6px; }
  .yt-chips::-webkit-scrollbar { display: none; }
  .yt-chip { flex: none; }
  .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .yt-card { padding: 6px 6px 10px; border-radius: 18px; }
  .yt-thumb { border-radius: 12px; }
  .yt-title { font-size: 14px; }
  .yt-body { padding: 8px 2px 0; gap: 5px; }
  .yt-channel, .yt-sub { font-size: 11.5px; }
}

/* ---------- 100% IV CP (hundo check) ---------- */

.cp100 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--inset);
  font: 700 11px/1.4 var(--font-ui);
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cp100 b { font: 900 12.5px/1.4 var(--font-ui); color: var(--ink); }
.cp100-k { font-size: 10px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.cp100-boost { display: inline-flex; align-items: center; gap: 2px; padding-left: 5px; border-left: 1.5px solid var(--line); }
.cp100-boost svg { width: 14px; height: 14px; }
.cp100.is-sm { gap: 4px; padding: 1px 6px; font-size: 10px; }
.cp100.is-sm b { font-size: 11px; }
.cp100.is-sm .cp100-k { font-size: 9px; }
.cp100.is-sm .cp100-boost svg { width: 12px; height: 12px; }
.fc-tile .cp100 { align-self: flex-start; width: max-content; max-width: 100%; }
.host-tile .cp100 { max-width: 100%; }
.host-tile .cp100 > .cp100-k:first-child { display: none; }

/* ---------- Latest News (X posts) ---------- */

.nw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 12px;
  align-items: start;
}
.nw-today {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.nw-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 12px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.nw-card.is-new { box-shadow: inset 0 0 0 2px var(--violet-t), var(--shadow); }
.nw-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nw-head .spr { flex: none; --zoom: 1; margin: 0; overflow: hidden; }
.nw-head .spr img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nw-avatar .spr-ini { font: 800 13px var(--font-ui); }
.nw-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nw-name { font: 800 14px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-handle { font: 700 12px/1.3 var(--font-ui); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-handle a { color: inherit; }
.nw-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 50%; }
.nw-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nw-text { font: 600 14px/1.5 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.nw-text a { color: var(--link); }
.nw-empty { color: var(--ink3); font-style: italic; }
.nw-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--inset);
}
.nw-media.n-1 { grid-template-columns: 1fr; }
.nw-shot { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--inset); }
.nw-media.n-1 .nw-shot { aspect-ratio: auto; max-height: 300px; }
.nw-media.n-1 .nw-shot.is-tall { max-height: 340px; }
.nw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-media.n-1 .nw-shot img { height: auto; max-height: inherit; object-fit: contain; margin: 0 auto; }
.nw-media.n-3 .nw-shot:first-child { grid-row: span 2; aspect-ratio: auto; }
.nw-media:not(.n-1) { max-height: 300px; }
.nw-kind { position: absolute; left: 8px; bottom: 8px; }
.nw-more { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 20, 35, .78); color: #fff; font: 800 11px/1.5 var(--font-ui); }
.nw-quote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink2);
}
.nw-quote:hover { text-decoration: none; color: var(--ink); }
.nw-quote-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nw-quote-by { font: 900 10.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--violet-i); }
.nw-quote-text { font: 600 12.5px/1.45 var(--font-ui); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nw-quote img { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.nw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1.5px solid var(--line2); }
.nw-stats { display: flex; gap: 10px; font: 700 12px var(--font-ui); color: var(--ink3); }
.nw-open { font: 800 12.5px var(--font-ui); color: var(--link); white-space: nowrap; }

/* Today: text beside one thumbnail, clamped so two posts sit side by side */
.nw-card.is-compact { padding: 12px 14px 10px; gap: 8px; }
.nw-card.is-compact .nw-body { flex-direction: row; align-items: flex-start; gap: 12px; }
.nw-card.is-compact .nw-text { flex: 1; min-width: 0; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card.is-compact .nw-media { flex: none; width: 112px; grid-template-columns: 1fr; border-radius: 12px; }
.nw-card.is-compact .nw-shot { aspect-ratio: 1 / 1; max-height: none; }
.nw-card.is-compact .nw-shot img { height: 100%; object-fit: cover; }

@media (max-width: 719px) {
  .nw-today { grid-template-columns: 1fr; gap: 8px; }
  .nw-card { padding: 12px 12px 10px; border-radius: 18px; }
  .nw-card.is-compact .nw-media { width: 88px; }
  .nw-text { font-size: 13.5px; }
}

/* ---------- footer ---------- */

.app-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 6px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--r-card);
  background: var(--ghost);
}
.foot-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 800 13px var(--font-ui); color: var(--ink); }
.foot-line span { color: var(--ink3); font-weight: 700; }
.foot-sub { font: 600 12px var(--font-ui); color: var(--ink3); }

/* ---------- phone ---------- */

@media (max-width: 719px) {
  .hdr { padding: 8px 8px 8px 10px; }
  .brand-name { font-size: 21px; }
  .hdr-spacer { display: none; }
  .glance-item { font-size: 12px; }
  .map-link, .feed-pill { padding: 0 11px; }
  .hdr .refresh-btn { width: 36px; padding: 0; }
  .hdr .refresh-btn span { display: none; }
  .filter { flex: 1 1 100%; }
  .filter .select-wrap, .filter select { flex: 1; width: 100%; }
  .final-headline { font-size: 18px; }
  .nameplate { flex: 1 1 100%; min-width: 0; }
  .tf-card { flex: 0 0 140px; }
  .host-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sstrip-seg { flex-basis: 100%; box-shadow: 0 -1px 0 var(--line); }
  .sstrip-reset { flex-basis: 100%; }
  .sstrip-open { justify-content: flex-end; }
  .sleep-hero { padding: 16px; }
  .hero-clock { font-size: 36px; }
  .hero-stat { min-width: 76px; padding: 8px 12px; }
  .hero-stat b { font-size: 24px; }
  .fav-match { align-items: flex-start; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Fun layer: sky, weather, wanderer, Snorlax, glints ----------
 * Everything here is CSS-only motion except the wanderer and the holo shine
 * (app.js "Fun layer"). html[data-fun="off"] and prefers-reduced-motion stop it.
 */

/* 1. live sky (light theme recolors the canvas; dark theme adds a glow) */
:root:not([data-theme="dark"])[data-sky="dawn"] {
  --canvas: linear-gradient(180deg, #F7C6D3 0px, #FBDCCB 260px, #E7F1EE 700px, #EEF8F2 100%);
}
:root:not([data-theme="dark"])[data-sky="dusk"] {
  --canvas: linear-gradient(180deg, #F4A574 0px, #F8C9A4 260px, #EBE3E8 700px, #EEF2F4 100%);
}
:root:not([data-theme="dark"])[data-sky="night"] {
  --canvas: linear-gradient(180deg, #34477F 0px, #8DA3D2 150px, #C9D9EA 420px, #E2EEF0 900px, #E8F2F0 100%);
}
:root[data-theme="dark"][data-sky="dawn"] { --canvas: linear-gradient(180deg, #3A2140 0px, #2A2448 260px, #13283C 900px, #142A36 100%); }
:root[data-theme="dark"][data-sky="dusk"] { --canvas: linear-gradient(180deg, #45261F 0px, #2B2340 260px, #13283C 900px, #142A36 100%); }
.ambient { transition: background 2s ease; }
.sky-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 2s ease;
}
:root[data-sky="night"] .sky-stars { opacity: .9; animation: fun-twinkle 6s ease-in-out infinite; }
:root:not([data-theme="dark"])[data-sky="night"] .sky-stars { opacity: .7; }
:root[data-theme="dark"][data-sky="dawn"] .sky-stars,
:root[data-theme="dark"][data-sky="dusk"] .sky-stars { opacity: .35; }
@keyframes fun-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }

/* 2. weather chip + background effect */
.wx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--field);
  color: var(--ink2);
  font: 800 12.5px var(--font-ui);
  white-space: nowrap;
  cursor: help;
}
.wx-chip.is-stale { opacity: .7; }
.wx-ic { font-size: 17px; line-height: 1; }
.wx-boost { display: inline-flex; gap: 3px; }
.ty { padding: 2px 6px; border-radius: 999px; font: 900 10px/1.3 var(--font-ui); font-style: normal; color: #fff; background: #8796A8; letter-spacing: .02em; }
.ty-fire { background: #E8662E; } .ty-grass { background: #3FA34D; } .ty-ground { background: #B0813A; }
.ty-normal { background: #8D8C78; } .ty-rock { background: #A08E4A; }
.ty-fairy { background: #D9629B; } .ty-fighting { background: #C0392B; } .ty-poison { background: #9549B0; }
.ty-water { background: #3D7FE0; } .ty-electric { background: #D9A400; } .ty-bug { background: #8AA21E; }
.ty-ice { background: #3BA6B8; } .ty-steel { background: #6E8494; }
.ty-dark { background: #5A4B44; } .ty-ghost { background: #6A57A6; }
.ty-dragon { background: #5A49D6; } .ty-flying { background: #6F8FD9; } .ty-psychic { background: #E0577F; }

.wx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 2s ease; }
.wx i { position: absolute; display: block; }
:root[data-wx="rain"] .wx,
:root[data-wx="snow"] .wx,
:root[data-wx="partly"] .wx,
:root[data-wx="cloudy"] .wx,
:root[data-wx="fog"] .wx,
:root[data-wx="windy"] .wx,
:root[data-wx="sunny"] .wx { opacity: 1; }

/* rain: two layers of slanted streaks */
:root[data-wx="rain"] .wx i:nth-child(-n+2) {
  inset: -200px 0 0 0;
  background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(110, 150, 200, .22) 22px 23.5px, transparent 23.5px 47px);
  background-size: 140px 140px;
  animation: fun-rain .7s linear infinite;
}
:root[data-wx="rain"] .wx i:nth-child(2) { background-size: 90px 90px; opacity: .6; animation-duration: 1.1s; }
:root[data-theme="dark"][data-wx="rain"] .wx i:nth-child(-n+2) { filter: brightness(1.6); }
@keyframes fun-rain { to { transform: translate(-40px, 140px); } }

/* snow: soft dots drifting down */
:root[data-wx="snow"] .wx i:nth-child(-n+2) {
  inset: -300px 0 0 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.4px, transparent 2px);
  background-size: 120px 120px, 70px 70px;
  background-position: 0 0, 35px 50px;
  animation: fun-snow 12s linear infinite;
}
:root[data-wx="snow"] .wx i:nth-child(2) { animation-duration: 19s; opacity: .7; }
:root:not([data-theme="dark"])[data-wx="snow"] .wx i { filter: drop-shadow(0 0 1px rgba(80, 110, 150, .5)); }
@keyframes fun-snow { to { transform: translate(30px, 300px); } }

/* clouds (partly / cloudy / fog / windy share drifting blobs) */
:root[data-wx="partly"] .wx i,
:root[data-wx="cloudy"] .wx i,
:root[data-wx="fog"] .wx i,
:root[data-wx="windy"] .wx i {
  width: 340px;
  height: 90px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  filter: blur(18px);
  animation: fun-drift 70s linear infinite;
}
.wx i:nth-child(1) { top: 60px; left: -360px; }
.wx i:nth-child(2) { top: 210px; left: -360px; animation-delay: -28s !important; transform: scale(.7); }
.wx i:nth-child(3) { top: 360px; left: -360px; animation-delay: -50s !important; }
:root[data-wx="cloudy"] .wx i { background: rgba(225, 232, 240, .7); width: 460px; height: 120px; }
:root[data-wx="fog"] .wx i { width: 120vw; height: 160px; background: rgba(240, 244, 248, .55); filter: blur(30px); animation-duration: 110s; }
:root[data-wx="windy"] .wx i { width: 240px; height: 3px; filter: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation-duration: 3.2s; }
:root[data-theme="dark"] .wx i { opacity: .25; }
@keyframes fun-drift { to { transform: translateX(calc(100vw + 720px)); } }

/* sunny: a slow warm glow top right */
:root[data-wx="sunny"] .wx i:first-child {
  top: -220px;
  right: -160px;
  left: auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 223, 120, .55), rgba(255, 223, 120, 0) 65%);
  animation: fun-sun 9s ease-in-out infinite;
}
@keyframes fun-sun { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* 3. wandering Pokemon */
.wander {
  position: fixed;
  left: 0;
  bottom: 6px;
  z-index: 30;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wander-body { display: block; width: 100%; height: 100%; animation: fun-hop .55s ease-in-out infinite alternate; }
.wander img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(31, 53, 80, .3)); }
.wander.to-right img { transform: scaleX(-1); }
.wander.is-shiny img { filter: drop-shadow(0 0 6px rgba(242, 183, 5, .9)); }
.wander:hover .wander-body { animation-play-state: paused; }
@keyframes fun-hop { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.wander .ball { display: grid; place-items: center; width: 100%; height: 100%; transform-origin: 50% 80%; animation: fun-wobble 2.6s ease-in-out forwards; }
@keyframes fun-wobble {
  0% { transform: translateY(-40px) scale(.6); }
  15% { transform: translateY(0) scale(1); }
  25%, 45%, 65% { transform: rotate(0); }
  32% { transform: rotate(-22deg); }
  38% { transform: rotate(14deg); }
  52% { transform: rotate(-22deg); }
  58% { transform: rotate(14deg); }
  72% { transform: rotate(-22deg); }
  78% { transform: rotate(14deg); }
  86%, 100% { transform: rotate(0); }
}
.wander.is-done .ball-btn { fill: #FFD84A; }
.gotcha {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: 800 12.5px/1.25 var(--font-ui);
  white-space: nowrap;
  animation: fun-pop .35s ease-out;
}
.gotcha small { display: block; font-size: 10.5px; color: var(--ink3); }
@keyframes fun-pop { from { transform: translate(-50%, 6px) scale(.8); opacity: 0; } }

/* 4. breathing Snorlax + Nap Island clouds */
.hero-snorlax img { transform-origin: 50% 92%; animation: fun-breathe 4.6s ease-in-out infinite; }
@keyframes fun-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.035, 1.06); } }
.zzz { position: absolute; top: -4px; right: -6px; width: 30px; height: 50px; pointer-events: none; }
.zzz i {
  position: absolute;
  bottom: 0;
  left: 0;
  font: 900 13px var(--font-display);
  font-style: normal;
  color: #C8D8FF;
  opacity: 0;
  animation: fun-zzz 4.6s ease-out infinite;
}
.zzz i:nth-child(2) { animation-delay: 1.5s; font-size: 15px; }
.zzz i:nth-child(3) { animation-delay: 3s; font-size: 18px; }
@keyframes fun-zzz {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translate(16px, -40px) rotate(12deg); opacity: 0; }
}
.nap-banner { position: relative; }
.nap-cloud {
  position: absolute;
  top: 14px;
  left: -120px;
  width: 110px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  filter: blur(6px);
  animation: fun-cloud 34s linear infinite;
}
.nap-cloud + .nap-cloud { top: 56px; width: 80px; height: 22px; animation-duration: 47s; animation-delay: -20s; opacity: .8; }
@keyframes fun-cloud { to { transform: translateX(calc(100% + 520px)); } }

/* 5. shiny glints + holo shine */
.spr .shiny, .tf-card > .shiny, .mon-chip svg { animation: fun-glint 6s ease-in-out infinite; transform-origin: 50% 50%; }
.tf-card:nth-child(2n) .shiny, .host-tile:nth-child(3n+1) .shiny, .fc-tile:nth-child(2n) .shiny, .mon-chip:nth-child(2n) svg { animation-delay: -2s; }
.tf-card:nth-child(3n) .shiny, .host-tile:nth-child(3n+2) .shiny, .fc-tile:nth-child(3n) .shiny, .mon-chip:nth-child(3n) svg { animation-delay: -4.1s; }
@keyframes fun-glint {
  0%, 84%, 100% { transform: scale(1) rotate(0); filter: none; }
  90% { transform: scale(1.45) rotate(25deg); filter: brightness(1.35) drop-shadow(0 0 3px rgba(255, 216, 74, .9)); }
  95% { transform: scale(.9) rotate(0); }
}
.tf-card, .host-tile, .fc-tile, .team-card, .yt-card { position: relative; }
.shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, rgba(190, 220, 255, .35) 50%, rgba(255, 220, 245, .3) 55%, transparent 70%);
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: soft-light;
  animation: fun-shine 1.3s ease-out forwards;
}
:root[data-theme="dark"] .shine { mix-blend-mode: screen; opacity: .5; }
@keyframes fun-shine { to { background-position: 0 0; } }

/* off switch */
.fun-btn { font-size: 16px; filter: grayscale(1); opacity: .65; }
.fun-btn.is-on { filter: none; opacity: 1; }
:root[data-fun="off"] .wx,
:root[data-fun="off"] .sky-stars { animation: none !important; }
:root[data-fun="off"] .wx { display: none; }
:root[data-fun="off"] .wander,
:root[data-fun="off"] .zzz,
:root[data-fun="off"] .nap-cloud,
:root[data-fun="off"] .shine { display: none; }
:root[data-fun="off"] .hero-snorlax img,
:root[data-fun="off"] .spr .shiny,
:root[data-fun="off"] .tf-card > .shiny,
:root[data-fun="off"] .mon-chip svg { animation: none; }

@media (max-width: 719px) {
  .wx-boost { display: none; }
  .wander { width: 46px; height: 46px; }
}

/* ---------- Animated 3D-model sprites ---------- */
/* Full-body renders: a touch smaller than the icon zoom so tall Pokemon fit,
   plus a soft ground shadow. */
.spr.is-model img { width: calc(var(--s, 44px) * 1.18); height: calc(var(--s, 44px) * 1.18); filter: drop-shadow(0 3px 2px rgba(31, 53, 80, .28)); }
.tf-card > .spr.is-model img { width: 78px; height: 78px; }
.team-card > .spr.is-model { margin-bottom: 12px; }
.team-card > .spr.is-model img { width: 86px; height: 86px; transform: translate(-50%, -54%); }
.wander.is-model { width: 72px; height: 72px; }
.wander.is-model img { filter: drop-shadow(0 6px 4px rgba(31, 53, 80, .3)); }
:root[data-theme="dark"] .spr.is-model img { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }

/* ---------- Target First: raid tier ranks (Oct 2026) ---------- */
.tf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 40px 10px;
  overflow: visible;
}
.tf-row .tf-card { flex: none; min-width: 0; }
.tf-where { font: 800 10.5px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.tf-ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rank-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 800 10.5px/1 var(--font-ui);
  background: var(--orange-t);
  color: var(--orange-i);
  white-space: nowrap;
}
.rank-chip.is-top { background: var(--orange-d); color: #fff; }
.rank-chip.is-overall { background: var(--violet-t); color: var(--violet-i); }
.tf-card .tf-why { -webkit-line-clamp: 4; }
.host-rank-meta {
  max-width: 100%;
  font: 800 10px/1.2 var(--font-ui);
  color: var(--orange-i);
  text-align: center;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.host-rank-meta.is-top { color: var(--orange-i); font-weight: 900; }
@media (max-width: 719px) {
  .tf-row { display: flex; overflow-x: auto; gap: 10px; }
  .tf-row .tf-card { flex: 0 0 150px; }
}

/* ---------- Raid counters pop-out (Oct 2026) ---------- */
.is-clickable { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.is-clickable:hover { transform: translateY(-2px); }
.is-clickable:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.cx-lock, .cx-lock body { overflow: hidden; }

.cx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  background: rgba(14, 23, 48, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.cx-backdrop.is-open { opacity: 1; }
.cx-backdrop.is-closing { opacity: 0; }
.cx-panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 14px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 24px 60px -18px rgba(14, 23, 48, .55);
  transform: translateY(14px) scale(.96);
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.15);
}
.cx-backdrop.is-open .cx-panel { transform: none; }
.cx-backdrop.is-closing .cx-panel { transform: translateY(10px) scale(.97); transition-duration: .18s; }
.cx-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--line2);
  color: var(--ink);
  font: 700 22px/1 var(--font-ui);
  cursor: pointer;
  z-index: 1;
}
.cx-close:hover { background: var(--slate-t); }

.cx-head { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.cx-head > .spr { flex: none; margin-block: 0; }
.cx-head > .spr.is-model img { width: 84px; height: 84px; }
.cx-head-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 0 1 auto; }
.cx-kicker { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.cx-head h2 { margin: 0; font: 800 25px/1.05 var(--font-display); color: var(--ink); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tc);
  color: #fff;
  font: 800 10.5px/1 var(--font-ui);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.type-chip b { font-weight: 900; opacity: .9; }
.cx-chips.is-muted .type-chip { opacity: .72; }
.cx-types { flex: 1 1 auto; display: grid; gap: 7px; margin-left: auto; padding: 10px 12px; border-radius: 16px; background: var(--line2); max-width: 520px; }
.cx-row { display: flex; align-items: flex-start; gap: 10px; }
.cx-k { flex: 0 0 58px; padding-top: 4px; font: 800 10.5px/1 var(--font-ui); color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.cx-none { font: 700 12px var(--font-ui); color: var(--ink3); }

.cx-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font: 800 14.5px/1 var(--font-display); color: var(--ink); }
.cx-h span { font: 700 11px/1 var(--font-ui); color: var(--ink3); }
.cx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cx-mon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  border-radius: 16px;
  background: var(--line2);
  opacity: 0;
  transform: translateY(6px);
  animation: cx-in .3s cubic-bezier(.2, .9, .3, 1.1) forwards;
  animation-delay: calc(var(--i) * 35ms + 60ms);
}
.cx-grid.is-megas .cx-mon { animation-delay: calc(var(--i) * 35ms + 340ms); }
.cx-grid.is-budget .cx-mon { animation-delay: calc(var(--i) * 35ms + 440ms); }
.cx-mon.is-mega { background: color-mix(in srgb, var(--violet-t) 70%, var(--line2)); }
.cx-mon.is-budget { background: color-mix(in srgb, var(--green-t) 55%, var(--line2)); }
@keyframes cx-in { to { opacity: 1; transform: none; } }
.cx-mon > .spr { flex: none; margin-block: 0; box-shadow: 0 0 0 3px var(--card); }
.cx-mon > .spr.is-model img { width: 56px; height: 56px; }
.cx-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--orange-d);
  color: #fff;
  font: 900 10px/18px var(--font-ui);
  text-align: center;
  z-index: 1;
}
.cx-txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cx-mon > .type-chip { flex: none; align-self: center; }
.cx-name { display: flex; align-items: baseline; gap: 6px; max-width: 100%; font: 800 14px/1.1 var(--font-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tag { flex: none; font: 900 9px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.cx-tag.is-shadow { color: var(--shadow-i); }
.cx-tag.is-mega { color: var(--violet-i); }
.cx-moves { max-width: 100%; font: 700 11px/1.2 var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-moves b { color: var(--ink); font-weight: 800; }
.cx-empty { margin-top: 18px; font: 700 13px var(--font-ui); color: var(--ink2); }
.cx-note { margin: 12px 0 0; font: 600 11px/1.4 var(--font-ui); color: var(--ink3); }
.cx-note a { color: var(--blue-d); font-weight: 800; }

@media (max-width: 899px) {
  .cx-head { flex-wrap: wrap; }
  .cx-types { flex-basis: 100%; max-width: none; margin-left: 0; }
  .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .cx-backdrop { place-items: end center; padding: 0; }
  .cx-panel { width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0; padding: 16px 12px 22px; transform: translateY(40px); }
  .cx-backdrop.is-closing .cx-panel { transform: translateY(40px); }
  .cx-head h2 { font-size: 22px; }
  .cx-grid { grid-template-columns: 1fr; gap: 6px; }
  .cx-h span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-backdrop, .cx-panel, .is-clickable { transition: none; }
  .cx-mon { animation: none; opacity: 1; transform: none; }
}

/* ---------- Egg Hatchery (Oct 2026) ---------- */
.duo > .duo-side { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.egg-section .sec-head { margin-bottom: 10px; }
.egg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.egg-pick {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px 10px 10px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  min-width: 0;
}
.egg-pick.is-limited { box-shadow: var(--shadow), inset 0 0 0 2px var(--green); }
.egg-pick.is-soon { box-shadow: var(--shadow), inset 0 0 0 2px var(--gold); }
.egg-pick-spr { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
.egg-pick-spr::before {
  content: "";
  position: absolute;
  inset: 2px 6px 0;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 30% 30%, var(--green-t) 0 18%, transparent 19%),
              radial-gradient(circle at 70% 60%, var(--green-t) 0 14%, transparent 15%),
              var(--line2);
}
.egg-pick-spr > .spr { position: relative; --s: 54px; }
.egg-pick-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.egg-pick-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.egg-pick-name { font: 800 15px/1.1 var(--font-display); color: var(--ink); margin-right: 2px; }
.egg-pick-ranks { display: flex; flex-wrap: wrap; gap: 4px; }
.egg-pick-why {
  font: 600 11.5px/1.35 var(--font-ui);
  color: var(--ink2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.egg-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ec) 16%, var(--card));
  color: var(--ink);
  font: 800 10.5px/1 var(--font-ui);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 45%, transparent);
  white-space: nowrap;
}
.egg-badge i { font-style: normal; font-weight: 900; color: var(--violet-i); margin-left: 2px; }
.egg-limit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding-top: 2px;
  font: 800 11.5px/1.2 var(--font-ui);
  color: var(--ink);
}
.egg-limit-k { padding: 3px 7px; border-radius: 999px; background: var(--green-d); color: #fff; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.egg-pick.is-soon .egg-limit-k { background: var(--gold-d); }
.egg-limit [data-cd] { font-variant-numeric: tabular-nums; }
.egg-limit-ev { flex-basis: 100%; font-weight: 700; font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.egg-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.egg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 2px 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ec) 9%, var(--card));
  box-shadow: inset 4px 0 0 var(--ec);
  min-width: 0;
}
.egg-row-head { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 11px/1.1 var(--font-ui); color: var(--ink); text-align: center; }
.egg-row-head i { display: block; font-style: normal; font-size: 9px; font-weight: 900; color: var(--violet-i); }
.egg-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; min-width: 0; scrollbar-width: thin; }
.egg-mon { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.egg-mon > .spr { --s: 34px; }
.egg-mon > .spr.is-model img { width: 42px; height: 42px; }
.egg-mon-name { max-width: 52px; font: 700 9.5px/1.15 var(--font-ui); color: var(--ink2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egg-mon.is-pick .egg-mon-name { color: var(--green-i); font-weight: 900; }
.egg-mon.is-pick > .spr { box-shadow: 0 0 0 2px var(--green); border-radius: 50%; }

.egg-svg { flex: none; }
@keyframes egg-wobble {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-9deg); }
  92% { transform: rotate(8deg); }
  96% { transform: rotate(-4deg); }
}
.egg-row-head .egg-svg { transform-origin: 50% 90%; animation: egg-wobble 5s ease-in-out infinite; }
.egg-row:nth-child(2n) .egg-row-head .egg-svg { animation-delay: -1.7s; }
.egg-row:nth-child(3n) .egg-row-head .egg-svg { animation-delay: -3.1s; }
.egg-row:hover .egg-row-head .egg-svg { animation-duration: 1.2s; }
:root[data-fun="off"] .egg-row-head .egg-svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .egg-row-head .egg-svg { animation: none; } }
@media (max-width: 719px) {
  .egg-picks { grid-template-columns: 1fr; }
  .egg-row-head { flex-basis: 58px; }
}

/* Egg Hatchery: compact board + full-pool pop-out */
.egg-section.is-clickable:hover { transform: none; }
.egg-section.is-clickable:hover .egg-more { background: color-mix(in srgb, var(--green) 22%, var(--card)); }
.egg-section.is-clickable:focus-visible { border-radius: var(--r-card); }
.egg-more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, var(--card));
  box-shadow: var(--shadow);
  font: 800 13px/1.2 var(--font-ui);
  color: var(--green-i);
  transition: background .16s ease;
}
.egg-more b { margin-left: auto; font-size: 16px; transition: transform .16s ease; }
.egg-section.is-clickable:hover .egg-more b { transform: translateX(3px); }
.egg-more-eggs { display: inline-flex; gap: 2px; }
.egg-more-eggs .egg-svg { transform-origin: 50% 90%; animation: egg-wobble 5s ease-in-out infinite; }
.egg-more-eggs .egg-svg:nth-child(2n) { animation-delay: -1.7s; }
.egg-more-eggs .egg-svg:nth-child(3n) { animation-delay: -3.1s; }
:root[data-fun="off"] .egg-more-eggs .egg-svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .egg-more-eggs .egg-svg { animation: none; } }

.egg-pop-head { display: flex; align-items: center; gap: 14px; padding-right: 44px; margin-bottom: 14px; }
.egg-pop-head h2 { margin: 2px 0 0; font: 800 24px/1.05 var(--font-display); color: var(--ink); }
.egg-pop-icons { display: inline-flex; gap: 3px; }
.egg-pop-icons .egg-svg { transform-origin: 50% 90%; animation: egg-wobble 5s ease-in-out infinite; }
.egg-pop-icons .egg-svg:nth-child(2n) { animation-delay: -1.7s; }
.egg-pop-icons .egg-svg:nth-child(3n) { animation-delay: -3.1s; }
:root[data-fun="off"] .egg-pop-icons .egg-svg { animation: none; }
.egg-pop-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--font-ui); color: var(--ink3); }
.egg-mon-key { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--green); }
.egg-rows.is-pop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-top: 0; }
.egg-rows.is-pop .egg-row { opacity: 0; transform: translateY(6px); animation: cx-in .3s cubic-bezier(.2, .9, .3, 1.1) forwards; }
.egg-rows.is-pop .egg-row:nth-child(n) { animation-delay: calc(var(--n, 0) * 35ms + 60ms); }
@media (max-width: 899px) { .egg-rows.is-pop { grid-template-columns: 1fr; } .egg-pop-legend { display: none; } }
@media (prefers-reduced-motion: reduce) { .egg-rows.is-pop .egg-row { animation: none; opacity: 1; transform: none; } }

/* ---------- Special-info twinkle (Oct 2026) ---------- */
.twinkle {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .16s ease;
}
.twinkle svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(138, 90, 0, .35)); }
.twinkle:hover { transform: scale(1.25) rotate(12deg); }
.twinkle:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 1px; }
.twinkle svg { animation: fun-glint 6s ease-in-out infinite; transform-origin: 50% 50%; }
:root[data-fun="off"] .twinkle svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .twinkle svg { animation: none; } }
.mon-chip .twinkle { position: static; width: 18px; height: 18px; padding: 2px; margin-left: -2px; }
.host-tile .twinkle, .egg-mon .twinkle, .cx-mon .twinkle { width: 19px; height: 19px; top: -4px; right: -6px; }

.cx-backdrop.is-info { z-index: 1100; }
.info-panel { width: min(480px, 100%); padding: 18px 20px 16px; }
.info-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.info-head > .spr { flex: none; margin-block: 0; }
.info-head > .spr.is-model img { width: 78px; height: 78px; }
.info-head h2 { margin: 3px 0 6px; font: 800 21px/1.1 var(--font-display); color: var(--ink); }
.info-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.info-tag { height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--gold-t); color: var(--gold-i); font: 800 10.5px/1 var(--font-ui); }
.info-lines { margin: 14px 0 0; padding: 12px 14px 12px 30px; border-radius: 16px; background: var(--line2); display: grid; gap: 7px; font: 600 13px/1.45 var(--font-ui); color: var(--ink); }
.info-lines li::marker { color: var(--gold); }
@media (max-width: 719px) { .info-panel { width: 100%; } }
.tf-card .twinkle, .egg-pick .twinkle, .fc-tile .twinkle { width: 26px; height: 26px; top: -6px; right: -9px; }

/* Legacy / special move flags (Oct 2026) */
.mv-flag {
  display: inline-flex;
  align-items: center;
  height: 15px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  font: 900 9px/1 var(--font-ui);
  font-style: normal;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 1px;
  background: var(--violet-t);
  color: var(--violet-i);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet-i) 35%, transparent);
  cursor: help;
}
.mv-flag.is-fusion { background: var(--blue-t); color: var(--blue-i); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-i) 35%, transparent); }
.mv-flag.is-form { background: var(--gold-t); color: var(--gold-i); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-i) 35%, transparent); }
.cx-note .mv-flag { margin-left: 0; }
/* let a long move line wrap instead of hiding its ETM/Fusion badge */
.cx-moves { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* ---------- Counter pop-out options (Oct 2026) ---------- */
.cx-backdrop.no-anim .cx-mon { animation: none; opacity: 1; transform: none; }
.cx-backdrop.no-anim .cx-panel { transition: none; }
.cx-head { flex-wrap: wrap; }
.cx-toggles { flex-basis: 100%; order: 5; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cx-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--line2);
  color: var(--ink2);
  font: 800 12px/1 var(--font-ui);
  cursor: pointer;
}
.cx-switch i { width: 28px; height: 16px; border-radius: 999px; background: var(--slate-t); box-shadow: inset 0 0 0 1px var(--line); position: relative; transition: background .15s ease; }
.cx-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.cx-switch.is-on { color: var(--ink); }
.cx-switch.is-on i { background: var(--green-d); }
.cx-switch.is-on i::after { transform: translateX(12px); }
.cx-switch:disabled { opacity: .55; cursor: not-allowed; }
.cx-switch:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.cx-wx { font-weight: 700; color: var(--ink3); }
.wx-boosted { margin-left: 3px; }
.cx-mon.is-mine { background: color-mix(in srgb, var(--blue-t) 60%, var(--line2)); }
.cx-grid.is-megas .cx-mon.is-mine { background: color-mix(in srgb, var(--violet-t) 70%, var(--line2)); }
.mv.is-se { color: var(--green-i); }
.mv.is-nve { color: var(--red-i); text-decoration: line-through; text-decoration-thickness: 1px; }
.cx-mine-meta { font: 700 10.5px/1.25 var(--font-ui); color: var(--ink3); }
.cx-tip { font-style: normal; color: var(--violet-i); font-weight: 800; }

/* weather chip is a button now (home vs here) */
button.wx-chip { border: 0; cursor: pointer; }
button.wx-chip:hover { background: var(--slate-t); }
.wx-chip.is-here { box-shadow: inset 0 0 0 2px var(--blue-d); }
.wx-chip.has-note { box-shadow: inset 0 0 0 2px var(--gold); }
.wx-chip .wx-label svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }

/* search */
.search-filter { padding-right: 5px; }
.search-wrap { display: flex; }
.search-wrap input {
  width: 220px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font: 800 13px var(--font-ui);
}
.search-wrap input::placeholder { color: var(--ink3); font-weight: 700; }
.search-wrap input:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 1px; }
.app[data-view="rocket"] .filter:not(.search-filter),
.app[data-view="research"] .filter:not(.search-filter) { display: none; }
@media (max-width: 719px) { .search-wrap, .search-wrap input { flex: 1; width: 100%; } }

/* ---------- Team GO Rocket ---------- */
.rk-today .sec-head { margin-bottom: 10px; }
.rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.rk-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.rk-grid.is-grunts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.rk-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; }
.rk-card.is-boss { box-shadow: var(--shadow), inset 0 0 0 2px var(--red-d); }
.rk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rk-leader { font: 800 16px/1.1 var(--font-display); color: var(--ink); }
.rk-title { font: 700 11px var(--font-ui); color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.rk-weak { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-left: auto; font: 800 10.5px var(--font-ui); color: var(--ink3); }
.rk-weak .type-chip { height: 18px; padding: 0 6px; font-size: 9.5px; }
.rk-slots { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; }
.rk-slot { display: contents; }
.rk-slot-n { align-self: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red-t); color: var(--red-i); font: 900 11px/20px var(--font-ui); text-align: center; }
.rk-slot-mons { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rk-mon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 0;
  border-radius: 999px;
  background: var(--line2);
  color: var(--ink);
  font: 800 12px/1 var(--font-ui);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.rk-mon:hover { transform: translateY(-1px); background: var(--slate-t); }
.rk-mon:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.rk-mon > .spr { margin-block: 0; }
.rk-mon > .spr.is-model img { width: 44px; height: 44px; }
.rk-catch { padding: 2px 6px; border-radius: 999px; background: var(--shadow-t); color: var(--shadow-i); font: 900 9px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; }
.rk-more { margin-top: 10px; }
.rk-h { margin: 18px 0 8px; font: 800 15px/1 var(--font-display); color: var(--ink); }
.rk-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font: 600 12.5px/1.45 var(--font-ui); color: var(--ink2); }
.rk-note i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--slate-t); color: var(--ink2); font: 900 11px/18px var(--font-ui); font-style: normal; text-align: center; }

/* ---------- Field Research ---------- */
.rs-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rs-top-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rs-top-task { font: 700 12px/1.35 var(--font-ui); color: var(--ink2); }
.rs-search { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 4px; height: 42px; padding: 0 5px 0 14px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); font: 800 12.5px var(--font-ui); color: var(--ink3); }
.rs-search input { width: 240px; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: 800 13px var(--font-ui); }
.rs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 4px 18px; }
.rs-group { min-width: 0; }
.rs-task { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); }
.rs-text { font: 800 13.5px/1.3 var(--font-ui); color: var(--ink); }
.rs-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-reward { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--line2); font: 800 12px/1 var(--font-ui); color: var(--ink); }
.rs-reward.is-pick { background: var(--green-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-i) 35%, transparent); }
.rs-reward > .spr { margin-block: 0; }
.rs-reward > .spr.is-model img { width: 44px; height: 44px; }
.rs-rank { padding: 2px 6px; border-radius: 999px; background: var(--orange-t); color: var(--orange-i); font: 900 9.5px/1.2 var(--font-ui); }
.rs-shiny { padding: 2px 6px; border-radius: 999px; background: var(--gold-t); color: var(--gold-i); font: 900 9.5px/1.2 var(--font-ui); }
@media (max-width: 719px) {
  .rk-grid, .rk-grid.is-wide, .rk-grid.is-grunts, .rs-groups { grid-template-columns: 1fr; }
  .rs-search, .rs-search input { width: 100%; }
}

/* Team GO Rocket character art (assets/rocket) */
.rk-face {
  flex: none;
  width: var(--fs, 44px);
  height: var(--fs, 44px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--red-t) 0 55%, color-mix(in srgb, var(--red-d) 35%, var(--red-t)) 100%);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--red-d) 55%, transparent);
}
.rk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-card.is-boss .rk-face { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--red-d); }
.rk-who-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-head-faces { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.rk-head-faces .rk-face { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.rk-head-faces .rk-face:first-child { margin-left: 0; }
.rk-card.is-hero { position: relative; overflow: hidden; padding-right: 120px; min-height: 230px; }
.rk-body {
  position: absolute;
  right: -4px;
  bottom: -18px;
  height: 250px;
  width: auto;
  opacity: .95;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(14, 23, 48, .25));
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.rk-card.is-hero .rk-slots { position: relative; z-index: 1; }
@media (max-width: 719px) {
  .rk-card.is-hero { padding-right: 12px; min-height: 0; }
  .rk-body { display: none; }
}

/* Research tab: masonry columns so short groups don't leave gaps on desktop */
.rs-groups { display: block; columns: 3 360px; column-gap: 16px; }
.rs-group { display: contents; }
.rs-group > .rk-h { break-after: avoid; margin: 0 0 8px; padding-top: 10px; }
.rs-task { break-inside: avoid; }
.rs-group > .rk-h:first-child { padding-top: 0; }
.rs-group-head { break-inside: avoid; }
@media (max-width: 719px) { .rs-groups { columns: 1; } }
.rs-group-head > .rk-h { margin: 0 0 8px; }
.rs-group-head { padding-top: 6px; }
.rk-h span { font: 800 11px var(--font-ui); color: var(--ink3); margin-left: 4px; }

/* rank number sits inline before the name, not over the sprite */
.cx-name .cx-rank { position: static; flex: none; min-width: 18px; height: 18px; padding: 0 5px; margin-right: 2px; font: 900 10px/18px var(--font-ui); align-self: center; }

/* Rocket reward explainer in the counters pop-out */
.cx-reward {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--shadow-t);
  color: var(--ink);
  font: 600 12.5px/1.4 var(--font-ui);
}
.cx-reward b { font-weight: 800; }
.cx-reward-k { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--red-d); color: #fff; font: 900 10px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Pokemon info card (search) ---------- */
.mi-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px 18px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--line2); }
.mi-col { min-width: 0; }
.mi-col.is-ratings { border-left: 1px solid var(--line); padding-left: 16px; }
.mi-h { margin: 0 0 6px; font: 800 13px/1 var(--font-display); color: var(--ink); }
.mi-h span { font: 700 10.5px var(--font-ui); color: var(--ink3); margin-left: 4px; }
.mi-col.is-ratings .mi-h:not(:first-child) { margin-top: 10px; }
.mi-src, .mi-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mi-src li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-left: 12px; position: relative; font: 600 12px/1.35 var(--font-ui); color: var(--ink2); }
.mi-src li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.mi-src.is-soon li::before { background: var(--gold); }
.mi-src li.src-rocket::before { background: var(--red-d); }
.mi-src li b { color: var(--ink); font-weight: 800; }
.mi-src.is-soon { margin-top: 4px; }
.mi-none { margin: 0; font: 700 12px/1.35 var(--font-ui); color: var(--ink3); }
.mi-tips { margin-top: 8px; }
.mi-tips li { font: 600 11.5px/1.4 var(--font-ui); color: var(--ink2); padding-left: 12px; position: relative; }
.mi-tips li::before { content: "›"; position: absolute; left: 1px; color: var(--ink3); font-weight: 900; }
.mi-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.raid-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: 6px; }
.raid-line i { font: 800 10px/1 var(--font-ui); font-style: normal; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.raid-line.is-muted { font: 700 11.5px/1.3 var(--font-ui); color: var(--ink3); }
.pvp-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue-t); color: var(--blue-i); font: 800 11px/1 var(--font-ui); cursor: help; }
.pvp-chip b { font-weight: 900; }
.pvp-chip.is-top { background: var(--blue-d); color: #fff; }
.pvp-chip.is-none { background: var(--card); color: var(--ink3); }
@media (max-width: 719px) {
  .mi-card { grid-template-columns: 1fr; }
  .mi-col.is-ratings { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }
}
.mi-sub { margin: 8px 0 4px; font: 800 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d, var(--ink2)); }
.mi-fold[hidden] { display: none; }

/* Look up sits beside the tabs now that Noise/Focus are gone (2026-10-12) */
@media (max-width: 719px) {
  .filters { width: 100%; margin-left: 0; }
  .search-filter { flex: 1; }
}

/* ---------- Credits (Sources tab, "Credits" in the public build) ---------- */
.credits { display: flex; flex-direction: column; gap: 12px; }
.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.credit-card { padding: 14px 16px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.credit-card h3 { margin: 0 0 8px; font: 700 16px/1.2 var(--font-display); color: var(--ink); }
.credit-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.credit-card li { font: 600 13px/1.45 var(--font-ui); color: var(--ink2); }
.credit-card a, .credit-legal a { color: var(--blue-i); font-weight: 800; }
.credit-legal { padding: 12px 16px; border-radius: var(--r-card); background: var(--ghost); display: flex; flex-direction: column; gap: 6px; }
.credit-legal p { margin: 0; font: 600 12.5px/1.5 var(--font-ui); color: var(--ink2); }
.credit-legal b { color: var(--ink); }
.foot-credit { font: 600 12px/1.5 var(--font-ui); color: var(--ink3); }
.foot-link { padding: 0; border: 0; background: none; color: var(--blue-i); font: 800 12px var(--font-ui); cursor: pointer; }
.foot-link:hover { text-decoration: underline; }

/* Public build: no server refresh endpoints */
html[data-public="1"] [data-action="yt-refresh"],
html[data-public="1"] [data-action="news-refresh"] { display: none; }