:root {
  /* Values are sourced from docs/design/design-tokens.json. */
  --chocolate-950: #1e100d;
  --chocolate-900: #2c1710;
  --chocolate-800: #422416;
  --cream-50: #fffdf6;
  --cream-100: #fff9e9;
  --cream-200: #fff0cf;
  --navy-900: #10165b;
  --navy-700: #292d7e;
  --muted-500: #626391;
  --pink-700: #d90055;
  --pink-600: #f50961;
  --pink-500: #ff267a;
  --gold-700: #a86606;
  --gold-600: #de8d09;
  --gold-500: #ffb823;
  --gold-400: #ffd45b;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-control: 9px;
  --radius-card: 14px;
  --radius-panel: 21px;
  --radius-pill: 999px;
  --content-max: 1640px;
  --page-gutter: clamp(20px, 3.1vw, 48px);
  --nav-height: clamp(58px, 4.3vw, 68px);
  --studio-heading-weight: 800;
  --studio-section-gap: clamp(40px, 6vw, 64px);
  --font-body: ui-rounded, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: ui-rounded, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  overflow-x: clip;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  color: var(--chocolate-950);
  background: var(--cream-50);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

button {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: var(--studio-heading-weight);
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

h1 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 6vw, 5.25rem);
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 3.25rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

p {
  max-width: 70ch;
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

::selection {
  color: var(--chocolate-950);
  background: var(--gold-400);
}

/* The skip link stays out of the way until it receives keyboard focus. */
.skip-to-main {
  position: fixed;
  z-index: 100;
  inset-block-start: max(var(--space-3), env(safe-area-inset-top, 0px));
  inset-inline-start: max(var(--space-3), env(safe-area-inset-left, 0px));
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 var(--space-5);
  transform: translateY(calc(-100% - 16px));
  border: 2px solid var(--gold-400);
  border-radius: var(--radius-control);
  color: var(--cream-50);
  background: var(--chocolate-900);
  font-weight: 800;
  text-decoration: none;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
  transform: translateY(0);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cream-50);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--button-fill);
}

/* Global chocolate shell. Unenhanced navigation remains fully visible. */
.site-header {
  position: sticky;
  z-index: 30;
  inset-block-start: 0;
  border-bottom: 1px solid rgb(255 253 246 / 18%);
  color: var(--cream-50);
  background: var(--chocolate-900);
}

.site-nav {
  width: min(100%, var(--content-max));
  min-height: var(--nav-height);
  margin-inline: auto;
  padding: var(--space-2) var(--page-gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-brand {
  min-height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-end: auto;
  color: var(--cream-50);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.site-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(var(--space-2), 1.6vw, var(--space-5));
}

.site-links a,
.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  color: var(--cream-100);
  font-weight: 700;
  text-decoration: none;
}

.site-links a:hover,
.site-footer a:hover {
  color: var(--gold-400);
  text-decoration: underline;
}

.nav-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgb(255 253 246 / 42%);
  border-radius: var(--radius-control);
  color: var(--cream-50);
  background: var(--chocolate-800);
  cursor: pointer;
  font-weight: 800;
}

main {
  min-height: 70vh;
}

.shell,
.studio-layout {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  min-width: 0;
  margin-inline: auto;
}

.section {
  padding-block: var(--studio-section-gap);
}

/* Renderer-owned wrappers are full-bleed section bands, not extra cards. */
.studio-rich-text.shell.section[data-studio-variant] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.studio-rich-text.shell.section[data-studio-variant="accessibility-tools"] {
  color: var(--cream-50);
  background: var(--chocolate-800);
}

.studio-rich-text.shell.section[data-studio-variant="home-hero"] {
  color: var(--cream-50);
  background: var(--chocolate-900);
}

.studio-rich-text.shell.section[data-studio-variant="home-game-grid"] {
  background: var(--cream-100);
}

.studio-rich-text.shell.section[data-studio-variant="feast-pass"] {
  color: var(--cream-50);
  background: var(--chocolate-900);
}

.studio-rich-text.shell.section[data-studio-variant="today"] {
  background: var(--cream-50);
}

.studio-rich-text.shell.section[data-studio-variant="discovery"] {
  background: var(--cream-100);
}

.studio-rich-text.shell.section[data-studio-variant="app-conversion"] {
  background: var(--cream-200);
}

.studio-rich-text.shell.section[data-studio-variant="whats-next"] {
  background: var(--cream-50);
}

.studio-rich-text.shell.section[data-studio-variant="companion"] {
  position: relative;
  z-index: 25;
  background: transparent;
  pointer-events: none;
}

.studio-rich-text.shell.section[data-studio-variant="companion"] :where(button, a, [role="dialog"]) {
  pointer-events: auto;
}

.home-section-inner {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  min-width: 0;
  margin-inline: auto;
  padding-block: var(--studio-section-gap);
}

.section-kicker,
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--chocolate-800);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.section-heading {
  max-width: 19ch;
  margin-block-end: var(--space-3);
}

.section-lede {
  max-width: 66ch;
  color: var(--muted-500);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* Hero art remains visible behind a restrained, solid scrim. */
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(280px, 29vw, 360px);
  overflow: hidden;
  color: var(--cream-50);
  background: var(--chocolate-900);
}

.hero-world {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(30 16 13 / 42%);
  pointer-events: none;
}

.home-hero__layout {
  position: relative;
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  min-height: inherit;
  margin-inline: auto;
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: clamp(var(--space-5), 5vw, var(--space-12));
}

.home-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.home-hero__eyebrow {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-pill);
  color: var(--gold-400);
  background: var(--chocolate-950);
}

.feast-pass-panel .section-kicker {
  color: var(--gold-400);
}

.home-hero__title {
  max-width: 12ch;
  margin-block-end: var(--space-4);
  color: var(--cream-50);
  font-size: clamp(2.7rem, 6.4vw, 5.7rem);
  text-wrap: balance;
  text-shadow: 0 2px 10px rgb(30 16 13 / 36%);
}

.home-hero__lede,
.home-hero__truth {
  max-width: 58ch;
  color: var(--cream-50);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-shadow: 0 1px 5px rgb(30 16 13 / 48%);
}

.home-hero__truth {
  margin-block-start: var(--space-3);
  font-size: 0.9rem;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.button-link,
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.button-link--primary,
.btn.primary {
  border-color: var(--button-border);
  color: var(--cream-50); background: var(--button-background);
}

.button-link--primary:hover,
.btn.primary:hover {
  border-color: var(--chocolate-950);
  color: var(--cream-50);
  background: var(--chocolate-800);
}

.button-link--secondary,
.btn.secondary {
  border-color: var(--cream-50);
  color: var(--chocolate-950);
  background: var(--cream-50);
}

.button-link--secondary:hover,
.btn.secondary:hover {
  border-color: var(--gold-400);
  background: var(--cream-100);
}

.btn.quiet {
  color: var(--navy-900);
  background: transparent;
}

.home-hero__toadal {
  width: min(100%, 390px);
  max-height: 340px;
  justify-self: center;
  align-self: end;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 14px rgb(30 16 13 / 30%));
}

.home-food-floats {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-food-float {
  position: absolute;
  display: block;
  width: clamp(22px, 2.3vw, 34px);
  height: auto;
  object-fit: contain;
  opacity: .55;
  filter: drop-shadow(0 3px 4px rgb(30 16 13 / 28%));
  animation: home-candy-float 13s ease-in-out infinite;
}

.home-food-float--blue {
  top: 65%;
  left: 47%;
  animation-delay: -3s;
}

.home-food-float--green {
  top: 21%;
  left: 47%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.home-food-float--purple {
  top: 50%;
  right: 2.5%;
  animation-delay: -5s;
  animation-duration: 14s;
}

@keyframes home-candy-float {
  0%, 100% { transform: translateY(5px) rotate(-6deg); opacity: .45; }
  50% { transform: translateY(-9px) rotate(4deg); opacity: .62; }
}

.home-search {
  width: min(100%, 620px);
  margin-block-start: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.home-search__field {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 2px solid var(--cream-50);
  border-radius: var(--radius-control);
  color: var(--chocolate-950);
  background: var(--cream-50);
}

.home-search__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-2);
  border: 0;
  outline: 0;
  color: var(--chocolate-950);
  background: transparent;
}

.home-search__input:disabled {
  color: var(--chocolate-800);
  -webkit-text-fill-color: var(--chocolate-800);
  opacity: 1;
  cursor: not-allowed;
}

.home-search__input::placeholder {
  color: var(--muted-500);
  opacity: 1;
}

.home-search__field button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--chocolate-800);
  border-radius: var(--radius-control);
  color: var(--chocolate-800);
  background: var(--cream-200);
  font-weight: 800;
  cursor: not-allowed;
}

.home-search__field:focus-within {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}

.home-search__status {
  width: fit-content;
  max-width: 100%;
  min-height: 1.5em;
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-control);
  color: var(--cream-50);
  background: var(--chocolate-950);
  font-size: 0.9rem;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Simple tab-like filters retain clear keyboard and selected states. */
.game-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-5);
}

.game-tab {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--chocolate-800);
  border-radius: var(--radius-pill);
  color: var(--chocolate-800);
  background: var(--cream-50);
  font-weight: 800;
  cursor: pointer;
}

.game-tab[aria-selected="true"],
.game-tab[aria-pressed="true"] {
  border-color: var(--navy-900);
  color: var(--cream-50);
  background: var(--navy-900);
}

.game-tab:hover:not([aria-selected="true"]):not([aria-pressed="true"]) {
  border-color: var(--gold-700);
  background: var(--cream-200);
}

.game-empty {
  padding: var(--space-5);
  border: 2px dashed var(--gold-700);
  border-radius: var(--radius-card);
  color: var(--chocolate-800);
  background: var(--cream-50);
}

.studio-rich-text.shell.section[data-studio-variant="games-intro"] .home-section-inner {
  padding-block-end: var(--space-5);
}

.studio-layout.variant-home-game-grid,
.studio-layout-grid.variant-home-game-grid,
.studio-layout[data-studio-variant="home-game-grid"],
.studio-layout-grid[data-studio-variant="home-game-grid"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.studio-game-card.module {
  min-width: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(66 36 22 / 16%);
  border-radius: var(--radius-panel);
  color: var(--chocolate-950);
  background: var(--cream-50);
  box-shadow: 0 6px 0 rgb(66 36 22 / 9%);
}

.studio-game-card[hidden] {
  display: none !important;
}

.studio-game-card :where(img, picture) {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.studio-game-card :where(h2, h3, p, .chip) {
  margin-inline: var(--space-5);
}

.studio-game-card :where(h2, h3) {
  margin-block: var(--space-4) var(--space-2);
  color: var(--navy-900);
}

.studio-game-card p {
  color: var(--muted-500);
}

.studio-game-card .chip.preview {
  width: fit-content;
  min-height: 28px;
  margin-block: var(--space-4) 0;
  padding: 3px var(--space-3);
  border: 1px solid var(--gold-700);
  border-radius: var(--radius-pill);
  color: var(--chocolate-950);
  background: var(--gold-400);
  font-size: 0.78rem;
  font-weight: 900;
}

.studio-game-card :where(.button-link, .btn) {
  align-self: flex-start;
  margin: auto var(--space-5) var(--space-5);
}

/* Pass and daily-feature states are explicit, warm panels—not fake controls. */
.feast-pass-panel,
.today-panel,
.app-conversion-panel {
  padding: clamp(var(--space-5), 4vw, var(--space-10));
  border: 1px solid rgb(66 36 22 / 16%);
  border-radius: var(--radius-panel);
  background: var(--cream-50);
  box-shadow: 0 7px 0 rgb(66 36 22 / 9%);
}

.feast-pass-panel {
  position: relative;
  overflow: hidden;
  border-color: var(--gold-600);
  color: var(--cream-50);
  background: var(--chocolate-800);
  box-shadow: 0 8px 0 var(--chocolate-950);
}

.feast-pass-panel :where(h2, h3) {
  color: var(--cream-50);
}

.feast-pass-panel :where(p, .pass-state) {
  color: var(--cream-100);
}

.pass-state {
  width: fit-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-pill);
  color: var(--chocolate-950);
  background: var(--gold-400);
  font-weight: 900;
}

.pass-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.pass-signals > * {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid rgb(255 212 91 / 50%);
  border-radius: var(--radius-card);
  color: var(--cream-50);
  background: rgb(30 16 13 / 24%);
}

.today-panel {
  border-color: var(--gold-600);
  background: var(--cream-100);
}

.discovery-grid,
.whats-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.discovery-grid {
  align-items: start;
}

.discovery-card,
.next-card {
  min-width: 0;
  padding: clamp(var(--space-4), 2.4vw, var(--space-6));
  border: 1px solid rgb(66 36 22 / 16%);
  border-radius: var(--radius-panel);
  color: var(--chocolate-950);
  background: var(--cream-50);
  box-shadow: 0 6px 0 rgb(66 36 22 / 8%);
}

.discovery-card :where(h2, h3),
.next-card :where(h2, h3) {
  color: var(--navy-900);
}

.character-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.genie-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.genie-row img {
  width: 100%;
  max-height: clamp(112px, 12vw, 160px);
  object-fit: contain;
}

.genie-discovery-card {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 3px;
  padding: 6px 4px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--navy-900);
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.genie-discovery-card:hover,
.genie-discovery-card:focus-visible {
  border-color: rgb(166 102 6 / 30%);
  background: rgb(255 255 255 / 70%);
}

.genie-discovery-card:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

.genie-discovery-card[aria-disabled="true"] {
  cursor: default;
}

.genie-discovery-card[aria-disabled="true"] .genie-discovery-name::after {
  content: " ✓";
  color: var(--gold-700);
}

.genie-discovery-name {
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.1;
}

.genie-discovery-status {
  color: var(--navy-700);
  font-size: .64rem;
  line-height: 1.15;
}

.genie-row span {
  grid-column: 1 / -1;
  color: var(--navy-900);
  font-weight: 800;
  text-align: center;
}

.character-figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.character-figure img {
  width: 100%;
  max-height: 260px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center bottom;
}

.character-figure figcaption {
  margin-block-start: var(--space-2);
  color: var(--navy-900);
  font-weight: 800;
}

.stories-art,
.app-art {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.world-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.stories-art img,
.app-art img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.app-conversion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-10));
  border-color: var(--gold-600);
  background: var(--cream-100);
}

.app-art img {
  max-height: 380px;
  border-radius: var(--radius-card);
}

/* The floating companion respects device safe areas and stays compact. */
.toadal-companion {
  position: fixed;
  z-index: 40;
  inset-inline-end: max(var(--space-4), env(safe-area-inset-right, 0px));
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  width: min(340px, calc(100vw - 2 * var(--space-4) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  pointer-events: none;
}

.companion-toggle {
  min-width: 52px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 3px solid var(--cream-50);
  border-radius: var(--radius-pill);
  color: var(--cream-50); background: var(--button-background);
  box-shadow: 0 3px 0 var(--chocolate-950);
  cursor: pointer;
  font-weight: 900;
  pointer-events: auto;
}

.companion-panel {
  width: 100%;
  max-height: min(60vh, 480px);
  overflow: auto;
  padding: var(--space-4);
  border: 2px solid var(--gold-600);
  border-radius: var(--radius-panel);
  color: var(--chocolate-950);
  background: var(--cream-50);
  box-shadow: 0 8px 0 rgb(30 16 13 / 24%);
  pointer-events: auto;
}

.companion-panel[hidden] {
  display: none;
}

.companion-panel :where(h2, h3) {
  color: var(--navy-900);
}

.companion-message {
  margin-block: var(--space-2) 0;
  color: var(--chocolate-800);
}

.companion-image {
  width: min(120px, 35%);
  max-height: 140px;
  margin-inline: auto;
  object-fit: contain;
}

/* Chocolate footer closes the shared site frame. */
.site-footer {
  margin: 0;
  border-top: 3px solid var(--gold-600);
  color: var(--cream-50);
  background: var(--chocolate-900);
}

.site-footer-inner {
  width: min(100%, var(--content-max));
  min-height: 88px;
  margin-inline: auto;
  padding: var(--space-5) var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.site-footer strong {
  margin-inline-end: auto;
  color: var(--cream-50);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

@media (max-width: 1023px) {
  .studio-layout.variant-home-game-grid,
  .studio-layout-grid.variant-home-game-grid,
  .studio-layout[data-studio-variant="home-game-grid"],
  .studio-layout-grid[data-studio-variant="home-game-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .discovery-grid,
  .whats-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav {
    gap: var(--space-3);
  }

  .site-links {
    gap: var(--space-2);
  }
}

@media (max-width: 960px) {
  .site-nav {
    flex-wrap: wrap;
  }

  .site-links {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }

  .site-nav[data-menu-enhanced="true"] .nav-toggle {
    display: inline-flex;
  }

  .site-nav[data-menu-enhanced="true"] .site-links {
    display: none;
  }

  .site-nav[data-menu-enhanced="true"]:has(.nav-toggle[aria-expanded="true"]) .site-links {
    display: flex;
  }

  .site-links a {
    padding-inline: var(--space-2);
  }

  /* Keep the helper available without letting its fixed panel cover tablet content. */
  .toadal-companion {
    position: static;
    width: min(100%, 360px);
    margin: var(--space-6) auto;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 20px;
    --studio-section-gap: 40px;
  }

  .site-nav {
    min-height: 64px;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2);
  }

  .site-brand {
    min-height: 48px;
    font-size: 1rem;
  }

  .site-links {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }

  .site-links a {
    padding-inline: var(--space-2);
  }

  .studio-rich-text.shell.section[data-studio-variant="home-hero"] .home-hero,
  .home-hero {
    min-height: 0;
  }

  .home-hero__layout {
    min-height: 480px;
    padding-block: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--space-3);
  }

  .home-hero__copy {
    max-width: 38rem;
  }

  .home-hero__title {
    max-width: 11ch;
    font-size: clamp(2.65rem, 11vw, 4.15rem);
  }

  .home-hero__toadal {
    position: absolute;
    z-index: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: min(44vw, 210px);
    max-height: 220px;
    opacity: 0.95;
  }

  .home-search__status {
    max-width: calc(100% - min(44vw, 210px));
  }

  .home-hero__copy > :not(.home-hero__toadal) {
    position: relative;
    z-index: 1;
  }

  .studio-layout.variant-home-game-grid,
  .studio-layout-grid.variant-home-game-grid,
  .studio-layout[data-studio-variant="home-game-grid"],
  .studio-layout-grid[data-studio-variant="home-game-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .discovery-grid,
  .whats-next-grid,
  .pass-signals {
    grid-template-columns: minmax(0, 1fr);
  }

  .character-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  .character-figure img {
    max-height: 200px;
  }

  .app-conversion-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-art img {
    max-height: 260px;
  }

  .site-footer-inner {
    align-items: flex-start;
  }

  .site-footer strong {
    width: 100%;
    margin-inline-end: 0;
  }

  .site-footer-links {
    gap: var(--space-1) var(--space-3);
  }
}

@media (max-width: 420px) {
  :root {
    --page-gutter: 16px;
  }

  .home-hero__layout {
    min-height: 500px;
    padding-block: var(--space-6);
  }

  .home-hero__title {
    max-width: 10ch;
    font-size: clamp(2.5rem, 11.8vw, 3.25rem);
  }

  .home-actions {
    align-items: stretch;
  }

  .home-actions .button-link {
    flex: 1 1 100%;
  }

  .toadal-companion {
    inset-inline-end: max(var(--space-2), env(safe-area-inset-right, 0px));
    inset-block-end: max(var(--space-2), env(safe-area-inset-bottom, 0px));
    width: min(300px, calc(100vw - 2 * var(--space-2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   APPROVED HOME PARITY REMEDIATION — 2026-09-30
   Target: owner-approved dense premium TOADAL FEAST portal.
   Keep feature-state truth, accessibility, and responsive behavior intact.
   ========================================================================== */

.site-header {
  box-shadow: 0 4px 0 rgb(24 8 4 / 22%), 0 10px 28px rgb(24 8 4 / 18%);
}

.site-brand {
  position: relative;
  gap: 9px;
  color: var(--cream-50);
  font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  letter-spacing: -0.045em;
  text-shadow: 0 2px 0 rgb(117 52 9 / 55%);
}

.site-links a {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding-inline: clamp(7px, .8vw, 12px);
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.site-links a:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.site-links a[aria-current="page"] {
  border-color: rgb(255 212 91 / 72%);
  color: var(--pink-700);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  box-shadow: 0 3px 0 rgb(130 70 12 / 32%);
}

/* Bright, character-led hero instead of a dark editorial masthead. */
.home-hero {
  min-height: clamp(430px, 34vw, 560px);
  background: #694377;
}

.hero-scrim {
  background:
    linear-gradient(90deg,
      rgb(30 16 13 / 68%) 0%,
      rgb(30 16 13 / 48%) 31%,
      rgb(30 16 13 / 13%) 62%,
      rgb(30 16 13 / 5%) 100%);
}

.home-hero__layout {
  min-height: inherit;
  padding-block: clamp(26px, 3vw, 42px);
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
  gap: clamp(var(--space-4), 2.8vw, var(--space-8));
}

.home-hero__copy {
  max-width: 700px;
  align-self: center;
}

.home-hero__title {
  max-width: 9.2ch;
  margin-block-end: 12px;
  font-size: clamp(3.5rem, 6.7vw, 6.25rem);
  line-height: .88;
  letter-spacing: -.065em;
  text-shadow: 0 4px 0 rgb(49 15 24 / 25%), 0 14px 32px rgb(30 16 13 / 34%);
}

.home-hero__lede {
  max-width: 51ch;
  margin-bottom: 12px;
  font-size: clamp(.97rem, 1.15vw, 1.12rem);
  line-height: 1.46;
}

.home-actions {
  margin-block-start: 14px;
  gap: 10px;
}

.home-actions .button-link {
  min-height: 50px;
  padding: 10px 20px;
  box-shadow: 0 5px 0 rgb(30 16 13 / 24%);
}

.home-actions .button-link--primary {
  border-color: var(--button-border); background: var(--button-background);
}

.hero-benefits {
  max-width: 650px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 13px;
  color: var(--cream-100);
  font-size: .76rem;
  font-weight: 800;
}

.hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-benefits b {
  color: var(--gold-400);
  font-size: .8em;
}

.home-hero__toadal {
  position: relative;
  z-index: 1;
  width: min(100%, 570px);
  max-height: none;
  justify-self: center;
  align-self: end;
  transform: translateY(7%);
  filter: drop-shadow(0 22px 18px rgb(62 27 7 / 34%));
}

.home-hero__toadal img,
.home-hero__toadal > img {
  width: 100%;
  height: auto;
  max-height: 590px;
  object-fit: contain;
  object-position: center bottom;
}

.home-search {
  width: min(100%, 520px);
  margin-block-start: 13px;
  gap: 5px;
}

.home-search > label {
  font-size: .76rem;
  font-weight: 800;
}

.home-search__field {
  min-height: 44px;
  padding-inline: 7px;
}

.home-search__input {
  min-height: 42px;
  padding-block: 5px;
  font-size: .9rem;
}

.home-search__field button {
  min-height: 40px;
  padding: 6px 12px;
  font-size: .82rem;
}

.home-search__status {
  min-height: 0;
  margin-block-start: 2px;
  padding: 5px 8px;
  border-width: 1px;
  font-size: .7rem;
  line-height: 1.3;
}

/* Denser portal rhythm. */
.home-section-inner {
  padding-block: clamp(22px, 3.4vw, 42px);
}

.studio-rich-text.shell.section[data-studio-variant="games-intro"] .home-section-inner {
  padding-block: 24px 9px;
}

.studio-layout.variant-home-game-grid,
.studio-layout-grid.variant-home-game-grid,
.studio-layout[data-studio-variant="home-game-grid"],
.studio-layout-grid[data-studio-variant="home-game-grid"] {
  gap: 10px;
}

.studio-game-card.module {
  border-color: rgb(166 102 6 / 27%);
  border-radius: 15px;
  box-shadow: 0 5px 0 rgb(66 36 22 / 9%), 0 12px 22px rgb(66 36 22 / 7%);
}

.studio-game-card :where(img, picture) {
  max-height: 155px;
}

.studio-game-card :where(h2, h3, p, .chip) {
  margin-inline: 13px;
}

.studio-game-card :where(h2, h3) {
  margin-block: 11px 5px;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
}

.studio-game-card p {
  font-size: .82rem;
  line-height: 1.42;
}

.studio-game-card .chip.preview {
  margin-block: 10px 0;
  font-size: .67rem;
}

.studio-game-card :where(.button-link, .btn) {
  margin: auto 13px 13px;
}

/* Planned Feast Pass reads like a premium sidecar without inventing live state. */
.feast-pass-panel {
  min-height: 100%;
  padding: clamp(20px, 2.2vw, 30px);
  border-width: 2px;
  background:
    radial-gradient(circle at 88% 18%, rgb(255 212 91 / 16%), transparent 32%),
    linear-gradient(145deg, #542815 0%, var(--chocolate-800) 62%, #29120c 100%);
}

.pass-signals {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-block: 15px 0;
}

.pass-signals > * {
  padding: 9px 11px;
  font-size: .76rem;
}

.pass-emblem {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-start: 22px;
  display: grid;
  justify-items: center;
  color: var(--gold-400);
  opacity: .95;
}

.pass-emblem span {
  font-size: .55rem;
  letter-spacing: .12em;
}

.pass-emblem strong {
  font-size: .9rem;
}

/* "Today" becomes a compact current-adventure ribbon, not a full editorial page. */
.today-panel {
  min-height: 0;
  padding: 17px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-width: 1px;
  background:
    linear-gradient(90deg, var(--cream-100), #fff8db 58%, #ffe8a8 100%);
}

.today-panel .section-kicker {
  margin-bottom: 4px;
  font-size: .68rem;
}

.today-panel .section-heading {
  max-width: none;
  margin-bottom: 5px;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.today-panel .section-lede {
  margin: 0;
  font-size: .85rem;
}

/* Richer discovery dashboard. */
.discovery-grid {
  gap: 12px;
}

.discovery-card,
.next-card {
  padding: clamp(14px, 1.5vw, 20px);
  border-color: rgb(166 102 6 / 24%);
  box-shadow: 0 5px 0 rgb(66 36 22 / 8%), 0 12px 22px rgb(66 36 22 / 6%);
}

.character-row {
  gap: 8px;
  margin-block-start: 13px;
}

.character-figure img {
  max-height: 145px;
}

.character-figure figcaption {
  margin-block-start: 4px;
  font-size: .74rem;
}

.genie-row {
  gap: 6px;
  margin-block-start: 10px;
}

.genie-row img {
  max-height: 86px;
}

.world-art {
  border-radius: 12px;
  box-shadow: 0 4px 0 rgb(66 36 22 / 13%);
}

.stories-art {
  min-height: 180px;
  margin-block: 16px 12px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 2px solid rgb(168 102 6 / 30%);
  background:
    radial-gradient(circle at 24% 24%, rgb(255 38 122 / 28%) 0 12%, transparent 13%),
    radial-gradient(circle at 76% 34%, rgb(255 212 91 / 42%) 0 11%, transparent 12%),
    radial-gradient(circle at 52% 80%, rgb(41 45 126 / 25%) 0 14%, transparent 15%),
    linear-gradient(145deg, #fff6d0, #ffd77b 55%, #f5a2bb);
  color: var(--navy-900);
  text-align: center;
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / 38%);
}

.stories-art span {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.stories-art strong {
  display: block;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
}

.stories-art i {
  color: var(--pink-700);
  font-size: 1.4rem;
}

/* Premium app-conversion card. */
.app-conversion-panel {
  min-height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr);
  padding: clamp(18px, 2.3vw, 30px);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgb(255 38 122 / 14%), transparent 32%),
    linear-gradient(135deg, #fff8df, var(--cream-200));
}

.app-art img {
  max-height: 295px;
  object-fit: contain;
}

.store-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 13px;
}

.store-badge {
  min-height: 45px;
  min-width: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #5b3929;
  border-radius: 10px;
  color: #fff;
  background: #1d1512;
  opacity: .62;
  cursor: not-allowed;
}

.store-badge > span:last-child {
  display: grid;
  text-align: left;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.05;
}

.store-badge small {
  font-size: .52rem;
  font-weight: 700;
}

/* Character-first companion: Toadal is the control, bubble is the support. */
.toadal-companion {
  width: min(250px, calc(100vw - 24px));
  gap: 5px;
}

.companion-panel {
  width: min(210px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 7px 0 rgb(30 16 13 / 18%);
  font-size: .75rem;
}

.companion-label {
  margin: 0 0 3px;
  color: var(--pink-700);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.companion-message {
  margin: 0;
  line-height: 1.35;
}

.companion-toggle {
  width: 118px;
  height: 118px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.companion-toggle:hover {
  transform: translateY(-3px) rotate(-1deg);
}

.companion-image {
  width: 118px;
  max-height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgb(62 27 7 / 32%));
}

@media (min-width: 1100px) {
  .toadal-companion {
    margin-inline-end: 0;
    margin-inline-start: auto;
  }
}

/* Desktop portal composition: approved dense band hierarchy. */
@media (min-width: 1100px) {
  main:has(.home-hero) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
    grid-template-areas:
      "access access"
      "hero hero"
      ". ."
      "today today"
      "interactive interactive"
      "discovery discovery"
      "app next"
      "companion companion";
    column-gap: 10px;
    background: var(--cream-100);
  }

  main:has(.home-hero) > [data-studio-variant="accessibility-tools"] { grid-area: access; }
  main:has(.home-hero) > [data-studio-variant="home-hero"] { grid-area: hero; }
  main:has(.home-hero) > [data-studio-variant="today"] { grid-area: today; }
  main:has(.home-hero) > [data-studio-variant="home-interactive-discovery"] { grid-area: interactive; }
  main:has(.home-hero) > [data-studio-variant="discovery"] { grid-area: discovery; }
  main:has(.home-hero) > [data-studio-variant="app-conversion"] { grid-area: app; }
  main:has(.home-hero) > [data-studio-variant="whats-next"] { grid-area: next; }
  main:has(.home-hero) > [data-studio-variant="companion"] { grid-area: companion; }

  main:has(.home-hero) > [data-studio-variant="feast-pass"] {
    background: var(--cream-100);
  }

  main:has(.home-hero) > [data-studio-variant="feast-pass"] .home-section-inner {
    width: 100%;
    height: 100%;
    padding: 24px 0 24px 0;
  }

  main:has(.home-hero) #browser-games {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-block: 0 24px;
    padding-inline-end: 0;
  }

  main:has(.home-hero) #browser-games-intro .home-section-inner {
    width: 100%;
    margin: 0;
    padding-inline-end: 0;
  }

  main:has(.home-hero) > [data-studio-variant="today"] .home-section-inner {
    padding-block: 10px;
  }

  main:has(.home-hero) > [data-studio-variant="app-conversion"] {
    background: var(--cream-200);
    padding-inline-start: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
  }

  main:has(.home-hero) > [data-studio-variant="whats-next"] {
    background: var(--cream-200);
    padding-inline-end: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
  }

  main:has(.home-hero) > [data-studio-variant="app-conversion"] .home-section-inner,
  main:has(.home-hero) > [data-studio-variant="whats-next"] .home-section-inner {
    width: 100%;
    margin: 0;
    padding-block: 24px;
  }

  main:has(.home-hero) > [data-studio-variant="app-conversion"] .home-section-inner {
    padding-inline-end: 0;
  }

  main:has(.home-hero) > [data-studio-variant="whats-next"] .home-section-inner {
    padding-inline-start: 0;
  }

  .whats-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .next-card {
    padding: 12px;
  }

  .next-card p {
    font-size: .72rem;
    line-height: 1.35;
  }
}

@media (max-width: 1099px) {
  .home-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  }

  .home-hero__toadal {
    width: min(100%, 440px);
  }
}

@media (max-width: 760px) {
  .home-hero {
    min-height: 0;
  }

  .home-hero__layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 22px 0;
  }

  .home-hero__title {
    max-width: 8.5ch;
    font-size: clamp(3rem, 13vw, 4.4rem);
  }

  .home-hero__toadal {
    width: min(82vw, 360px);
    max-height: 330px;
    margin-top: -12px;
    transform: translateY(5%);
  }

  .home-hero__toadal img,
  .home-hero__toadal > img {
    max-height: 340px;
  }

  .hero-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    font-size: .7rem;
  }

  .today-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .store-badge {
    min-width: 132px;
  }

  .toadal-companion {
    width: 180px;
  }

  .companion-panel {
    width: 165px;
  }

  .companion-toggle,
  .companion-image {
    width: 86px;
    height: 86px;
  }
}


/* Layering hardening for the bright Feast-world hero. */
.hero-world { z-index: 0; }
.hero-scrim { z-index: 1; }
.home-hero__layout { z-index: 2; }

@media (max-width: 760px) {
  .home-search { display: none; }
  .home-hero__layout {
    position: relative;
    display: block;
    padding-block: 22px 165px;
  }
  .home-hero__copy { max-width: 100%; }
  .home-hero__toadal {
    position: absolute;
    inset-inline-end: -8px;
    inset-block-end: -18px;
    width: min(62vw, 235px);
    margin: 0;
    transform: none;
  }
  .home-hero__toadal img,
  .home-hero__toadal > img {
    width: 100%;
    max-height: 250px;
  }
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgb(30 16 13 / 64%) 0%,
        rgb(30 16 13 / 47%) 54%,
        rgb(30 16 13 / 16%) 100%);
  }
}


/* Small-screen parity polish after 390px visual review. */
@media (max-width: 760px) {
  .home-hero__layout {
    width: min(calc(100% - 32px), var(--content-max));
    padding-block: 20px 142px;
  }

  .home-hero__title {
    max-width: 8.7ch;
    font-size: clamp(2.85rem, 12.4vw, 4.05rem);
    line-height: .9;
  }

  .home-hero__lede {
    width: 100%;
    max-width: 100%;
    font-size: .93rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .home-actions {
    width: 100%;
  }

  .home-actions .button-link {
    width: 100%;
  }

  .hero-benefits {
    max-width: 67%;
  }

  .hero-world img {
    object-position: 60% center;
  }

  .home-hero__toadal {
    inset-inline-end: -4px;
    inset-block-end: -8px;
    width: min(48vw, 190px);
  }

  .home-hero__toadal img,
  .home-hero__toadal > img {
    max-height: 215px;
  }

  .section-heading {
    text-wrap: balance;
  }
}


/* Desktop hero compression: keep the approved focal character while revealing the portal content sooner. */
@media (min-width: 1100px) {
  .home-hero {
    min-height: 510px;
    height: 510px;
  }

  .home-hero__layout {
    height: 510px;
    min-height: 510px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    padding-block: 12px;
  }

  .home-hero__copy {
    max-width: 690px;
  }

  .home-hero__title {
    max-width: 18ch;
    font-size: clamp(3.5rem, 5.35vw, 5.25rem);
    line-height: .9;
  }

  .home-actions {
    margin-block-start: 10px;
  }

  .hero-benefits {
    margin-block-start: 8px;
  }

  .home-hero__toadal {
    position: absolute;
    inset-inline-end: clamp(24px, 5vw, 82px);
    inset-block-end: -10px;
    width: min(42vw, 500px);
    max-height: 500px;
    transform: none;
  }

  .home-hero__toadal img,
  .home-hero__toadal > img {
    max-height: 510px;
  }

  .home-search {
    width: min(100%, 510px);
    margin-block-start: 6px;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 4px 8px;
  }

  .home-search > label {
    grid-column: 1;
    grid-row: 1;
  }

  .home-search__field {
    grid-column: 2;
    grid-row: 1;
  }

  .home-search__status {
    grid-column: 1 / -1;
    margin-block-start: 0;
    padding: 3px 8px;
    font-size: .68rem;
  }
}

/* WO-002: Play hub, reusable game-detail layout, and responsive cartridge player. */
.studio-rich-text[data-studio-variant^="wo002-"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wo002-play-page,
.wo002-detail-page,
.wo002-player-page {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  margin-inline: auto;
}

.wo002-play-page {
  padding-block: clamp(24px, 4vw, 54px) var(--space-12);
}

.wo002-play-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  min-height: 318px;
  padding: clamp(24px, 4.5vw, 60px);
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-panel);
  color: #fffdf6;
  background:
    radial-gradient(circle at 86% 16%, rgb(255 212 91 / 30%), transparent 32%),
    radial-gradient(circle at 14% 100%, rgb(245 9 97 / 22%), transparent 36%),
    linear-gradient(130deg, #292d7e, #10165b 72%);
  box-shadow: 0 9px 0 rgb(30 16 13 / 14%), 0 22px 48px rgb(30 16 13 / 13%);
}

.wo002-play-hero__copy,
.wo002-play-proof {
  position: relative;
  z-index: 1;
}

.wo002-play-hero .section-kicker,
.wo002-player-heading .section-kicker {
  margin: 0 0 9px;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.wo002-play-hero h1 {
  max-width: 13ch;
  margin: 0;
  color: #fffdf6;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 950;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wo002-play-hero__copy > p:not(.section-kicker) {
  max-width: 58ch;
  margin: 18px 0 22px;
  color: rgb(255 253 246 / 88%);
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
}

.wo002-play-hero .button-link--primary {
  color: var(--chocolate-950);
  background: var(--gold-400);
  box-shadow: 0 4px 0 #b77706;
}

.wo002-play-proof {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 18px;
  color: var(--chocolate-950);
  background: linear-gradient(145deg, #fffdf6, #fff0cf);
  box-shadow: 0 7px 0 rgb(30 16 13 / 18%);
}

.wo002-play-proof .chip { margin-bottom: 5px; }
.wo002-play-proof > strong { color: var(--navy-900); font-size: clamp(3.7rem, 6vw, 5rem); line-height: .95; }
.wo002-play-proof > p { margin: 0; font-size: 1.05rem; font-weight: 900; }
.wo002-play-proof > small { max-width: 24ch; margin-top: 9px; color: #55453b; line-height: 1.4; }

.wo002-game-library { padding-block: clamp(34px, 5vw, 58px) 20px; }
.wo002-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.wo002-section-heading h2 { margin: 0; color: var(--navy-900); font-size: clamp(1.8rem, 3.3vw, 2.65rem); line-height: 1; }
.wo002-section-heading .section-kicker { margin: 0 0 8px; color: var(--pink-700); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.wo002-section-heading .text-link { flex: 0 0 auto; color: var(--navy-700); font-weight: 850; }

.wo002-game-library .game-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 19px; }
.wo002-game-library .game-tab { min-height: 44px; padding: 9px 16px; border: 1px solid rgb(41 45 126 / 24%); border-radius: var(--radius-pill); color: var(--navy-900); background: #fffdf6; font-weight: 850; }
.wo002-game-library .game-tab[aria-pressed="true"] { border-color: var(--navy-900); color: #fff; background: var(--navy-900); }
.wo002-game-library .game-tab span { display: inline-grid; min-width: 23px; min-height: 23px; margin-inline-start: 5px; place-items: center; border-radius: 50%; color: var(--navy-900); background: var(--gold-400); font-size: .75rem; }

.play-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.play-card.studio-game-card.module { display: grid; grid-template-columns: minmax(155px, .7fr) minmax(0, 1.3fr); min-height: 248px; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgb(166 102 6 / 24%); border-radius: 17px; background: #fffdf6; box-shadow: 0 5px 0 rgb(66 36 22 / 8%), 0 12px 22px rgb(66 36 22 / 6%); }
.play-card__art { position: relative; display: grid; min-height: 210px; overflow: hidden; background: linear-gradient(145deg, #fff0cf, #ffd45b); }
.play-card__art img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.play-card__art .chip { position: absolute; inset: 12px auto auto 12px; }
.play-card__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(15px, 1.8vw, 23px); }
.play-card__eyebrow { margin: 0 0 7px !important; color: var(--pink-700); font-size: .66rem !important; font-weight: 900; letter-spacing: .12em; }
.play-card__body h3 { margin: 0 0 8px !important; color: var(--navy-900); font-size: clamp(1.28rem, 2vw, 1.7rem); line-height: 1.06; }
.play-card__body > p:not(.play-card__eyebrow) { flex: 1 0 auto; margin: 0 0 13px !important; color: #4b3930; font-size: .9rem; line-height: 1.45; }
.play-card__body .button-link { min-height: 42px; margin-top: auto; }
.wo002-game-library .game-empty { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; color: var(--navy-900); background: var(--cream-200); }

.wo002-truth-note { margin-top: 23px; padding: 16px 20px; border-inline-start: 5px solid var(--gold-600); border-radius: 0 12px 12px 0; background: var(--cream-100); }
.wo002-truth-note strong { color: var(--navy-900); }
.wo002-truth-note p { margin: 4px 0 0; color: #55453b; }

.wo002-detail-page { padding-block: 22px var(--space-12); }
.detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 14px; color: #62544b; font-size: .86rem; }
.detail-breadcrumb a { color: var(--navy-700); font-weight: 850; }
.wo002-detail-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: clamp(22px, 4vw, 54px); padding: clamp(20px, 3.6vw, 48px); overflow: hidden; border: 1px solid rgb(166 102 6 / 24%); border-radius: var(--radius-panel); background: linear-gradient(140deg, #fff9e9 0%, #fff0cf 72%, #ffd45b 155%); box-shadow: 0 8px 0 rgb(66 36 22 / 8%); }
.wo002-detail-copy .section-kicker { margin: 0 0 11px; color: var(--pink-700); font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.wo002-detail-copy h1 { margin: 11px 0 13px; color: var(--navy-900); font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 950; line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
.wo002-detail-lede { max-width: 62ch; margin: 0; color: #45352e; font-size: clamp(1rem, 1.5vw, 1.14rem); }
.wo002-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.detail-unavailable { max-width: 35ch; margin: 0; padding: 12px 14px; border-radius: 10px; color: var(--chocolate-900); background: rgb(255 255 255 / 75%); }
.detail-unavailable strong { display: block; color: var(--navy-900); }
.wo002-detail-art { margin: 0; padding: 12px; border: 1px solid rgb(66 36 22 / 11%); border-radius: 16px; background: rgb(255 253 246 / 86%); }
.wo002-detail-art img { width: 100%; max-height: 340px; border-radius: 10px; object-fit: contain; }
.wo002-detail-art figcaption { margin: 8px 3px 0; color: #66564d; font-size: .75rem; line-height: 1.35; }
.wo002-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.detail-fact { min-height: 150px; padding: 18px 19px; border: 1px solid rgb(166 102 6 / 22%); border-radius: 14px; background: #fffdf6; box-shadow: 0 4px 0 rgb(66 36 22 / 6%); }
.detail-fact .section-kicker { margin: 0 0 5px; color: var(--pink-700); font-size: .62rem; font-weight: 900; letter-spacing: .13em; }
.detail-fact h2 { margin: 0 0 7px; color: var(--navy-900); font-size: 1.18rem; }
.detail-fact p:last-child { margin: 0; color: #55453b; font-size: .9rem; line-height: 1.45; }

.wo002-player-page { padding-block: 18px max(24px, env(safe-area-inset-bottom)); }
.wo002-player-heading { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(0, 1.8fr) auto; align-items: center; gap: 18px; padding-block: 8px 18px; }
.player-back-link { color: var(--navy-700); font-weight: 850; text-decoration: none; }
.player-back-link:hover { text-decoration: underline; }
.wo002-player-heading .section-kicker { margin-bottom: 3px; color: var(--pink-700); }
.wo002-player-heading h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; }
.wo002-player-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 10px; border: 1px solid rgb(41 45 126 / 17%); border-radius: 14px; background: #fffdf6; }
.player-toolbar__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.wo002-player-toolbar .btn { min-height: 44px; }
.wo002-player-toolbar .btn:disabled { opacity: .5; cursor: not-allowed; }
.player-status { min-height: 26px; margin: 8px 2px; color: var(--navy-900); font-size: .88rem; font-weight: 750; }
.wo002-player-frame-wrap { position: relative; min-height: 62vh; min-height: 62dvh; overflow: hidden; border: 2px solid rgb(41 45 126 / 28%); border-radius: 17px; background: #10165b; box-shadow: 0 8px 0 rgb(30 16 13 / 14%); }
.wo002-player-frame { display: block; width: 100%; height: min(78vh, 940px); height: min(78dvh, 940px); min-height: 560px; border: 0; background: #10165b; }
.wo002-player-frame:focus-visible { outline: 4px solid var(--gold-400); outline-offset: -5px; }
.wo002-player-frame-wrap:focus-within,
.wo002-player-frame-wrap.wo002-player-frame-focused { outline: 4px solid var(--gold-400); outline-offset: -5px; }
.wo002-player-frame[hidden] { display: none; }
.player-fullscreen-exit { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-end: 12px; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 999px; color: #fffdf6; background: rgb(37 25 20 / 92%); font: inherit; font-weight: 750; cursor: pointer; }
.player-fullscreen-exit[hidden] { display: none; }
.wo002-player-frame-wrap:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
.wo002-player-frame-wrap:fullscreen .wo002-player-frame { width: 100vw; height: 100vh; min-height: 100vh; }
.player-back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; }
.player-error { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 24px; color: #fffdf6; background: linear-gradient(145deg, #292d7e, #10165b); text-align: center; }
.player-error[hidden] { display: none; }
.player-error h2 { margin: 0; color: #fffdf6; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.player-error p { max-width: 48ch; margin: 0 0 4px; color: rgb(255 253 246 / 86%); }
.player-error .btn { min-width: 180px; }
.player-error .btn.primary { color: var(--chocolate-950); background: var(--gold-400); }
.wo002-player-footnote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; margin-top: 16px; padding: 15px 18px; border-radius: 12px; background: var(--cream-100); }
.wo002-player-footnote p { margin: 0; color: #55453b; font-size: .83rem; line-height: 1.45; }
.wo002-player-footnote strong { color: var(--navy-900); }

@media (max-width: 900px) {
  .play-card-grid { grid-template-columns: 1fr; }
  .play-card.studio-game-card.module { min-height: 210px; }
  .wo002-detail-hero { grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr); }
}

@media (max-width: 680px) {
  .wo002-play-page { padding-top: 18px; }
  .wo002-play-hero { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 24px 20px; }
  .wo002-play-hero h1 { max-width: 11ch; font-size: clamp(2.65rem, 12vw, 3.6rem); }
  .wo002-play-proof { grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 12px; padding: 14px 16px; }
  .wo002-play-proof .chip { grid-column: 1 / -1; }
  .wo002-play-proof > strong { grid-row: span 2; font-size: 3rem; }
  .wo002-play-proof > p { align-self: end; }
  .wo002-play-proof > small { max-width: none; align-self: start; margin-top: 0; }
  .wo002-section-heading { align-items: start; }
  .wo002-section-heading .text-link { margin-top: 4px; font-size: .8rem; }
  .play-card.studio-game-card.module { grid-template-columns: minmax(110px, .6fr) minmax(0, 1.4fr); min-height: 0; }
  .play-card__art, .play-card__art img { min-height: 200px; }
  .play-card__body { padding: 14px 13px; }
  .play-card__body h3 { font-size: 1.2rem; }
  .play-card__body > p:not(.play-card__eyebrow) { font-size: .82rem; }
  .play-card__body .button-link { width: 100%; justify-content: center; padding-inline: 9px; font-size: .8rem; }
  .wo002-detail-page { padding-top: 14px; }
  .wo002-detail-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px 17px; }
  .wo002-detail-copy h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .wo002-detail-art img { max-height: 240px; }
  .wo002-detail-actions { display: grid; grid-template-columns: 1fr; }
  .wo002-detail-actions .button-link { justify-content: center; }
  .wo002-detail-facts { grid-template-columns: 1fr; gap: 9px; }
  .detail-fact { min-height: 0; padding: 14px 16px; }
  .wo002-player-page { width: min(calc(100% - 20px), var(--content-max)); padding-top: 8px; }
  .wo002-player-heading { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding-bottom: 12px; }
  .player-back-link { grid-column: 1 / -1; }
  .wo002-player-heading .chip { justify-self: end; }
  .wo002-player-heading h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .wo002-player-toolbar { align-items: stretch; padding: 8px; }
  .player-toolbar__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .player-toolbar__controls .btn { padding-inline: 9px; font-size: .83rem; }
  .wo002-player-toolbar > .btn { justify-content: center; }
  .wo002-player-frame-wrap { min-height: 58vh; min-height: 58dvh; border-radius: 12px; }
  .wo002-player-frame { height: 68vh; height: 68dvh; min-height: 430px; }
  .wo002-player-footnote { grid-template-columns: 1fr; gap: 9px; padding: 12px 14px; }
}

@media (max-width: 760px) {
  .home-food-floats { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-food-float { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wo002-play-page *, .wo002-detail-page *, .wo002-player-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Keep the original contextual helper behavior, but make it available at the lower-right viewport edge on every route. */
.toadal-companion {
  position: fixed !important;
  z-index: 1000;
  inset: auto max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: min(340px, calc(100vw - 24px));
  margin: 0 !important;
  pointer-events: none;
}

.toadal-companion :where(.companion-panel, .companion-toggle) { pointer-events: auto; }
.toadal-companion .companion-panel { width: min(250px, calc(100vw - 112px)); }
.toadal-companion .companion-toggle,
.toadal-companion .companion-image { width: 78px; height: 82px; }
.toadal-companion .companion-image { max-height: 82px; }

@media (min-width: 1100px) {
  .home-hero,
  .home-hero__layout { min-height: 430px; height: 430px; }
  .home-hero__title { font-size: clamp(3.1rem, 4.5vw, 4.4rem); }
  .home-hero__toadal { width: min(37vw, 430px); max-height: 420px; }
  .home-hero__toadal img,
  .home-hero__toadal > img { max-height: 420px; }
  .home-search { display: none; }
}

@media (max-width: 760px) {
  .toadal-companion { width: min(264px, calc(100vw - 20px)); inset-inline-end: max(12px, env(safe-area-inset-right)) !important; inset-block-end: max(12px, env(safe-area-inset-bottom)) !important; }
  .toadal-companion .companion-panel { width: min(194px, calc(100vw - 78px)); padding: 8px 10px; font-size: .68rem; }
  .toadal-companion .companion-toggle,
  .toadal-companion .companion-image { width: 52px; height: 56px; }
  .toadal-companion .companion-image { max-height: 56px; }
}

/* WO-visual-convergence-20261001: compact, branded header and denser Home portal. */
main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
  position: static !important;
  inset: auto !important;
  z-index: 1;
  width: min(340px, 100%);
  margin: 8px 0 14px auto !important;
}

.site-nav {
  gap: clamp(10px, 1.15vw, 18px);
}

.site-brand {
  gap: 8px;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  letter-spacing: -.04em;
  text-shadow: 0 2px 0 rgb(117 52 9 / 55%);
}

.site-links {
  gap: clamp(2px, .45vw, 8px);
}

.site-links a {
  min-height: 42px;
  padding: 7px clamp(7px, .72vw, 11px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.site-links a:hover {
  border-color: rgb(255 212 91 / 35%);
  background: rgb(255 253 246 / 8%);
  text-decoration: none;
  transform: translateY(-1px);
}

.site-links a[aria-current="page"] {
  border-color: var(--gold-400);
  color: var(--pink-700);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  box-shadow: 0 3px 0 rgb(130 70 12 / 32%);
}

.nav-toggle {
  border-color: rgb(255 212 91 / 55%);
  border-radius: var(--radius-pill);
}

@media (min-width: 961px) and (max-width: 1099px) {
  .site-nav {
    gap: 8px;
  }

  .site-brand {
    gap: 5px;
    font-size: 1.05rem;
  }

  .site-links {
    gap: 0;
  }

  .site-links a {
    padding-inline: 5px;
    font-size: .78rem;
  }
}

@media (min-width: 1100px) {
  main:has(.home-hero) {
    grid-template-columns: minmax(0, 2.55fr) minmax(330px, 1fr);
    column-gap: 12px;
  }

  .home-hero,
  .home-hero__layout {
    min-height: 370px;
    height: 370px;
  }

  .hero-scrim {
    background:
      linear-gradient(90deg,
        rgb(30 16 13 / 56%) 0%,
        rgb(30 16 13 / 40%) 34%,
        rgb(30 16 13 / 16%) 62%,
        rgb(30 16 13 / 3%) 100%);
  }

  .home-hero__layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(18px, 2.4vw, 36px);
    padding-block: 10px;
  }

  .home-hero__title {
    max-width: 11.5ch;
    margin-block-end: 10px;
    font-size: clamp(3.05rem, 4.45vw, 4.35rem);
    line-height: .91;
  }

  .home-hero__lede {
    max-width: 60ch;
    margin-block-end: 8px;
    font-size: 1rem;
    line-height: 1.38;
  }

  .home-actions {
    gap: 8px;
    margin-block-start: 10px;
  }

  .home-actions .button-link {
    min-height: 46px;
    padding: 9px 16px;
  }

  .hero-benefits {
    gap: 5px 11px;
    margin-block-start: 8px;
    font-size: .72rem;
  }

  .home-hero__toadal {
    inset-inline-end: clamp(22px, 4.2vw, 70px);
    inset-block-end: -7px;
    width: min(39vw, 440px);
    max-height: 360px;
  }

  .home-hero__toadal img,
  .home-hero__toadal > img {
    max-height: 368px;
  }

  main:has(.home-hero) #browser-games-intro .home-section-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker filters"
      "title cta"
      "lede cta"
      "empty empty";
    align-items: end;
    column-gap: 16px;
    row-gap: 0;
    padding-block: 12px 8px;
  }

  main:has(.home-hero) #browser-games-intro .section-kicker {
    grid-area: kicker;
    margin-block-end: 3px;
    font-size: .7rem;
  }

  main:has(.home-hero) #browser-games-intro .section-heading {
    grid-area: title;
    max-width: none;
    margin: 0;
    font-size: clamp(2rem, 2.6vw, 2.7rem);
  }

  main:has(.home-hero) #browser-games-intro .section-lede {
    grid-area: lede;
    max-width: none;
    margin: 5px 0 2px;
    font-size: .84rem;
    line-height: 1.38;
  }

  .game-tabs {
    grid-area: filters;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
  }

  .game-tab {
    min-height: 34px;
    padding: 5px 9px;
    font-size: .75rem;
  }

  .home-play-directory-link {
    grid-area: cta;
    align-self: start;
    justify-self: end;
    min-height: 38px;
    margin: 7px 0 0;
    padding: 7px 12px;
    font-size: .78rem;
  }

  .game-empty {
    grid-area: empty;
    margin-block-start: 8px;
  }

  .studio-layout.variant-home-game-grid,
  .studio-layout-grid.variant-home-game-grid,
  .studio-layout[data-studio-variant="home-game-grid"],
  .studio-layout-grid[data-studio-variant="home-game-grid"] {
    gap: 9px;
  }

  .studio-game-card :where(img, picture) {
    max-height: 98px;
  }

  .studio-game-card :where(h2, h3) {
    margin-block: 7px 3px;
    font-size: .96rem;
  }

  .studio-game-card p {
    font-size: .72rem;
    line-height: 1.28;
  }

  .studio-game-card .chip.preview {
    min-height: 22px;
    margin-block-start: 5px;
    font-size: .64rem;
  }

  .feast-pass-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-content: center;
    align-items: center;
    gap: 8px;
    min-height: 100%;
    padding: 17px;
    border-width: 2px;
    border-color: var(--gold-600);
    color: var(--chocolate-950);
    background:
      radial-gradient(circle at 88% 8%, rgb(255 212 91 / 60%), transparent 30%),
      linear-gradient(145deg, #fffdf6 0%, #fff2cf 68%, #ffe09a 100%);
    box-shadow: 0 5px 0 rgb(66 36 22 / 10%), 0 12px 22px rgb(66 36 22 / 7%);
  }

  .feast-pass-panel :where(h2, h3) {
    color: var(--navy-900);
  }

  .feast-pass-panel :where(p, .pass-state) {
    color: var(--chocolate-800);
  }

  .feast-pass-copy {
    min-width: 0;
  }

  .feast-pass-copy .section-kicker {
    margin-block-end: 5px;
    color: var(--gold-700);
    font-size: .64rem;
  }

  .feast-pass-copy .section-heading {
    max-width: 15ch;
    margin-block-end: 7px;
    font-size: clamp(1.18rem, 1.35vw, 1.42rem);
    line-height: 1.02;
  }

  .feast-pass-copy .section-lede {
    margin-block-end: 7px;
    font-size: .74rem;
    line-height: 1.34;
  }

  .pass-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 7px 0;
  }

  .pass-state {
    min-height: 23px;
    padding: 3px 7px;
    border-color: rgb(168 102 6 / 35%);
    color: var(--chocolate-950) !important;
    background: #fff9e9;
    font-size: .58rem;
    line-height: 1.2;
  }

  .feast-pass-copy > .button-link {
    min-height: 36px;
    padding: 7px 10px;
    font-size: .72rem;
  }

  .pass-emblem {
    position: relative;
    inset: auto;
    width: 72px;
    min-height: 86px;
    display: grid;
    align-content: center;
    justify-self: end;
    border: 2px solid var(--gold-600);
    border-radius: 18px;
    color: var(--cream-50);
    background: linear-gradient(155deg, #57301a, var(--chocolate-900));
    box-shadow: 0 3px 0 rgb(66 36 22 / 18%);
  }

  .pass-emblem span {
    font-size: .52rem;
  }

  .pass-emblem strong {
    font-size: .8rem;
  }

  .pass-emblem i {
    color: var(--gold-400);
    font-style: normal;
    font-size: .9rem;
    line-height: 1;
  }

  main:has(.home-hero) > [data-studio-variant="today"] .home-section-inner {
    padding-block: 6px;
  }

  .today-panel {
    min-height: 0;
    padding: 10px 14px;
    gap: 12px;
  }

  .today-panel > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.55fr);
    align-items: center;
    gap: 4px 10px;
  }

  .today-panel .section-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: .6rem;
  }

  .today-panel .section-heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.02rem, 1.35vw, 1.25rem);
    line-height: 1.08;
  }

  .today-panel .section-lede {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin: 0;
    font-size: .72rem;
    line-height: 1.25;
  }

  main:has(.home-hero) > [data-studio-variant="discovery"] .home-section-inner,
  main:has(.home-hero) > [data-studio-variant="app-conversion"] .home-section-inner,
  main:has(.home-hero) > [data-studio-variant="whats-next"] .home-section-inner {
    padding-block: 22px;
  }
}

@media (max-width: 760px) {
  .site-brand {
    gap: 6px;
    font-size: .98rem;
  }

  .nav-toggle {
    min-width: 46px;
    min-height: 44px;
    padding-inline: 12px;
  }

  .site-nav[data-menu-enhanced="true"]:has(.nav-toggle[aria-expanded="true"]) .site-links {
    padding: 5px 0 8px;
  }

  .site-links a {
    min-height: 40px;
    padding-inline: 10px;
    font-size: .86rem;
  }

  .home-hero,
  .studio-rich-text.shell.section[data-studio-variant="home-hero"] .home-hero {
    height: auto;
    min-height: 0;
  }

  .home-hero__layout {
    height: auto;
    min-height: 0;
    padding-block: 17px 112px;
  }

  .home-hero__title {
    max-width: 9ch;
    margin-block-end: 8px;
    font-size: clamp(2.55rem, 11.2vw, 3.45rem);
    line-height: .9;
  }

  .home-hero__lede {
    font-size: .88rem;
    line-height: 1.36;
  }

  .home-actions {
    gap: 7px;
    margin-block-start: 8px;
  }

  .home-actions .button-link {
    min-height: 44px;
    padding: 8px 12px;
  }

  .hero-benefits {
    gap: 3px;
    margin-block-start: 7px;
    font-size: .66rem;
  }

  .home-hero__toadal {
    inset-inline-end: -4px;
    inset-block-end: -6px;
    width: min(48vw, 186px);
  }

  .home-hero__toadal img,
  .home-hero__toadal > img {
    max-height: 205px;
  }

  main:has(.home-hero) #browser-games-intro .home-section-inner {
    padding-block: 18px 10px;
  }

  .studio-layout.variant-home-game-grid,
  .studio-layout-grid.variant-home-game-grid,
  .studio-layout[data-studio-variant="home-game-grid"],
  .studio-layout-grid[data-studio-variant="home-game-grid"] {
    gap: 8px;
  }

  .studio-game-card :where(img, picture) {
    max-height: 135px;
  }

  .studio-game-card :where(h2, h3, p, .chip) {
    margin-inline: 10px;
  }

  .studio-game-card :where(h2, h3) {
    margin-block: 8px 4px;
    font-size: .92rem;
  }

  .studio-game-card p {
    font-size: .72rem;
  }

  .studio-game-card .chip.preview {
    margin-block-start: 6px;
  }

  .studio-rich-text.shell.section[data-studio-variant="discovery"] .home-section-inner,
  .studio-rich-text.shell.section[data-studio-variant="app-conversion"] .home-section-inner,
  .studio-rich-text.shell.section[data-studio-variant="whats-next"] .home-section-inner {
    padding-block: 22px;
  }

}

/* DISCOVERY VISUAL ENRICHMENT 2026-10-01 */
.discovery-page .wo002-detail-copy > .section-kicker { display: inline-flex; margin-right: 9px; }
.discovery-page .wo002-detail-copy > .chip { display: inline-flex; vertical-align: middle; margin-bottom: 11px; }
.discovery-band { margin-top: 20px; padding: clamp(18px, 2.2vw, 28px); border: 1px solid rgb(166 102 6 / 22%); border-radius: 16px; background: linear-gradient(145deg, #fffdf6 0%, #fff7e1 100%); box-shadow: 0 5px 0 rgb(66 36 22 / 6%); }
.discovery-band-heading { max-width: 74ch; margin-bottom: 15px; }
.discovery-band-heading .section-kicker { margin: 0 0 5px; color: var(--pink-700); font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.discovery-band-heading h2 { margin: 0 0 7px; color: var(--navy-900); font-size: clamp(1.55rem, 2.7vw, 2.25rem); line-height: 1.05; }
.discovery-band-heading p { margin: 0; color: #55453b; max-width: 66ch; }
.discovery-scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.discovery-scene-card { margin: 0; overflow: hidden; border: 1px solid rgb(66 36 22 / 11%); border-radius: 14px; background: #fffdf6; }
.discovery-scene-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.discovery-scene-card figcaption { display: grid; gap: 2px; padding: 10px 12px 12px; color: #55453b; font-size: .82rem; }
.discovery-scene-card figcaption strong { color: var(--navy-900); font-size: .95rem; }
.discovery-cast-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.discovery-cast-tile { display: grid; place-items: center; gap: 7px; min-width: 0; padding: 10px 8px 11px; border: 1px solid rgb(66 36 22 / 10%); border-radius: 14px; background: #fffdf6; color: var(--navy-900); text-align: center; }
.discovery-cast-tile img { width: 100%; height: 110px; object-fit: contain; }
.discovery-cast-tile strong { font-size: .86rem; }
.discovery-story-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 12px; }
.discovery-story-scene { margin: 0; overflow: hidden; border: 1px solid rgb(66 36 22 / 11%); border-radius: 14px; background: #fffdf6; }
.discovery-story-scene img { display: block; width: 100%; height: 280px; object-fit: cover; }
.discovery-story-scene figcaption { padding: 10px 12px 12px; color: #55453b; font-size: .8rem; }
.discovery-story-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.discovery-story-cast article { display: grid; place-items: center; gap: 5px; min-width: 0; padding: 8px; border: 1px solid rgb(66 36 22 / 10%); border-radius: 13px; background: #fffdf6; color: var(--navy-900); }
.discovery-story-cast img { width: 100%; height: 115px; object-fit: contain; }
.discovery-story-cast strong { font-size: .82rem; }
.media-character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.media-character-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 160px auto; border: 1px solid rgb(66 36 22 / 11%); border-radius: 14px; background: #fffdf6; box-shadow: 0 3px 0 rgb(66 36 22 / 5%); }
.media-character-card img { display: block; width: 100%; height: 160px; padding: 9px; object-fit: contain; }
.media-character-card > div { padding: 0 13px 13px; }
.media-character-card .section-kicker { margin: 0 0 3px; color: var(--pink-700); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.media-character-card h2 { margin: 0; color: var(--navy-900); font-size: 1rem; }
.media-character-card--genie { grid-template-rows: 145px auto; }
.media-character-card--genie img { height: 145px; }
.discovery-character-hero img { object-fit: contain; }
@media (max-width: 800px) {
  .discovery-scene-grid, .discovery-story-layout { grid-template-columns: 1fr; }
  .discovery-scene-card img, .discovery-story-scene img { height: 190px; }
  .discovery-cast-strip, .discovery-story-cast, .media-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-cast-tile img, .discovery-story-cast img { height: 96px; }
  .media-character-card { grid-template-rows: 128px auto; }
  .media-character-card img { height: 128px; padding: 6px; }
  .media-character-card--genie { grid-template-rows: 118px auto; }
  .media-character-card--genie img { height: 118px; }
}
@media (max-width: 340px) { .media-character-grid { grid-template-columns: 1fr; } }

/* Hub visual convergence — 2026-10-01.
   Uses canonical repository art to move Play/World/Stories/Media toward the
   approved portal references while preserving honest availability states. */
@media (min-width: 1100px) {
  .wo002-play-page {
    padding-block: 0 20px;
  }

  .wo002-play-hero {
    position: relative;
    isolation: isolate;
    min-height: 365px;
    overflow: hidden;
    border-color: rgb(255 212 91 / 55%);
    color: var(--cream-50);
    background:
      linear-gradient(90deg,
        rgb(36 14 10 / 78%) 0%,
        rgb(45 20 26 / 56%) 38%,
        rgb(32 14 28 / 26%) 68%,
        rgb(32 14 28 / 16%) 100%),
      url("../images/world/candy-kingdom.webp") center 58% / cover no-repeat;
    box-shadow: 0 8px 0 rgb(66 36 22 / 12%), 0 18px 34px rgb(66 36 22 / 15%);
  }

  .wo002-play-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto 21% -30px auto;
    width: min(29vw, 365px);
    aspect-ratio: 611 / 640;
    background: url("../images/characters/toadal-victory.webp") center bottom / contain no-repeat;
    filter: drop-shadow(0 18px 18px rgb(28 10 8 / 34%));
    pointer-events: none;
  }

  .wo002-play-hero__copy,
  .wo002-play-proof {
    position: relative;
    z-index: 1;
  }

  .wo002-play-hero__copy {
    max-width: 610px;
    align-self: center;
  }

  .wo002-play-hero__copy .section-kicker {
    color: var(--gold-300);
  }

  .wo002-play-hero__copy h1 {
    max-width: 10ch;
    margin-block: 4px 10px;
    color: var(--cream-50);
    font-size: clamp(3.25rem, 4.6vw, 4.8rem);
    line-height: .91;
    letter-spacing: -.055em;
    text-shadow: 0 4px 0 rgb(50 16 20 / 22%), 0 14px 30px rgb(30 16 13 / 28%);
  }

  .wo002-play-hero__copy > p:not(.section-kicker) {
    max-width: 56ch;
    color: var(--cream-100);
    font-size: .98rem;
    line-height: 1.45;
  }

  .wo002-play-proof {
    justify-self: end;
    align-self: center;
    width: min(260px, 100%);
    margin-inline-start: auto;
    padding: 18px;
    border: 2px solid rgb(255 212 91 / 50%);
    border-radius: 18px;
    color: var(--chocolate-950);
    background: rgb(255 250 236 / 94%);
    box-shadow: 0 7px 0 rgb(67 31 13 / 16%);
    backdrop-filter: blur(4px);
  }

  .wo002-play-proof strong {
    color: var(--navy-900);
    font-size: 3.15rem;
  }

  .wo002-game-library {
    margin-block-start: 12px;
    padding: 14px;
    border: 1px solid rgb(166 102 6 / 18%);
    border-radius: 18px;
    background: rgb(255 253 246 / 92%);
    box-shadow: 0 5px 0 rgb(66 36 22 / 7%);
  }

  .wo002-section-heading {
    margin-block-end: 8px;
  }

  .wo002-section-heading h2 {
    font-size: clamp(1.85rem, 2.25vw, 2.45rem);
  }

  .play-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .play-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }

  .play-card__art {
    min-height: 148px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .play-card__art img {
    width: 100%;
    height: 148px;
    object-fit: cover;
  }

  .play-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 11px 11px;
  }

  .play-card__eyebrow {
    margin-block: 0 4px;
    font-size: .61rem;
    line-height: 1.25;
  }

  .play-card__body h3 {
    margin-block: 0 4px;
    font-size: 1rem;
  }

  .play-card__body > p:not(.play-card__eyebrow) {
    margin-block: 0 9px;
    font-size: .72rem;
    line-height: 1.34;
  }

  .play-card__body .button-link {
    min-height: 36px;
    margin-block-start: auto;
    padding: 7px 10px;
    border-color: var(--button-border);
    color: #fff; background: var(--button-background);
    font-size: .72rem;
  }

  .wo002-truth-note {
    margin-block-start: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .78rem;
  }

  .live-visual-page .detail-breadcrumb {
    margin-block-end: 8px;
  }

  .discovery-page .wo002-detail-hero {
    min-height: 360px;
    overflow: hidden;
    border: 2px solid rgb(255 212 91 / 45%);
    box-shadow: 0 8px 0 rgb(66 36 22 / 10%), 0 18px 32px rgb(66 36 22 / 10%);
  }

  .discovery-world .wo002-detail-hero {
    position: relative;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    color: var(--cream-50);
    background:
      linear-gradient(90deg,
        rgb(35 15 9 / 82%) 0%,
        rgb(35 15 9 / 58%) 35%,
        rgb(35 15 9 / 20%) 66%,
        rgb(35 15 9 / 5%) 100%),
      url("../images/world/candy-kingdom.webp") center / cover no-repeat;
  }

  .discovery-world .wo002-detail-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
    align-self: center;
  }

  .discovery-world .wo002-detail-copy :where(h1, .wo002-detail-lede) {
    color: var(--cream-50);
  }

  .discovery-world .wo002-detail-copy h1 {
    max-width: 9.8ch;
    font-size: clamp(3.25rem, 4.7vw, 4.8rem);
    line-height: .91;
    text-shadow: 0 4px 0 rgb(44 15 12 / 28%);
  }

  .discovery-world .wo002-detail-art {
    align-self: stretch;
    min-height: 300px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .discovery-world .wo002-detail-art img {
    opacity: 0;
  }

  .discovery-world .wo002-detail-art figcaption {
    display: none;
  }

  .discovery-stories .wo002-detail-hero,
  .discovery-media .wo002-detail-hero {
    background:
      radial-gradient(circle at 85% 18%, rgb(255 207 77 / 24%), transparent 28%),
      linear-gradient(135deg, #fffdf6 0%, #fff0c9 68%, #ffe2a1 100%);
  }

  .discovery-stories .wo002-detail-copy h1,
  .discovery-media .wo002-detail-copy h1 {
    font-size: clamp(3rem, 4.15vw, 4.35rem);
    line-height: .93;
  }

  .discovery-stories .discovery-character-hero {
    background:
      radial-gradient(circle at 50% 30%, rgb(255 78 144 / 17%), transparent 48%),
      rgb(255 253 246 / 92%);
  }

  .discovery-band {
    margin-block-start: 12px;
    padding: 13px;
    border-radius: 16px;
    background: rgb(255 253 246 / 92%);
  }

  .discovery-band-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
    column-gap: 18px;
    align-items: end;
    margin-block-end: 10px;
  }

  .discovery-band-heading .section-kicker {
    grid-column: 1 / -1;
  }

  .discovery-band-heading h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2vw, 2.05rem);
  }

  .discovery-band-heading > p:last-child {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
  }

  .discovery-world .discovery-band {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    grid-template-areas:
      "heading cast"
      "scenes cast";
    gap: 10px 14px;
  }

  .discovery-world .discovery-band-heading { grid-area: heading; }
  .discovery-world .discovery-scene-grid { grid-area: scenes; }
  .discovery-world .discovery-cast-strip {
    grid-area: cast;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgb(166 102 6 / 18%);
    border-radius: 14px;
    background: linear-gradient(145deg, #fffaf0, #fff0cb);
  }

  .discovery-scene-grid {
    gap: 9px;
  }

  .discovery-scene-card {
    border-radius: 13px;
    overflow: hidden;
  }

  .discovery-scene-card img {
    height: 160px;
    object-fit: cover;
  }

  .discovery-cast-tile {
    padding: 7px;
    border-radius: 12px;
    background: #fffdf7;
  }

  .discovery-cast-tile img {
    max-height: 105px;
    object-fit: contain;
  }

  .discovery-story-layout {
    gap: 10px;
  }

  .discovery-story-scene img {
    max-height: 250px;
    object-fit: cover;
  }

  .discovery-story-cast {
    gap: 7px;
  }

  .discovery-story-cast article,
  .media-character-card {
    border-radius: 14px;
  }

  .media-character-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }

  .media-character-card {
    min-height: 265px;
    padding: 10px;
  }

  .media-character-card img {
    max-height: 180px;
    object-fit: contain;
  }

  .wo002-detail-facts {
    gap: 9px;
    margin-block-start: 12px;
  }

  .detail-fact {
    padding: 13px;
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  .wo002-play-hero {
    background:
      linear-gradient(180deg, rgb(35 14 10 / 68%) 0%, rgb(35 14 10 / 42%) 55%, rgb(35 14 10 / 72%) 100%),
      url("../images/world/candy-kingdom-mobile.webp") center / cover no-repeat;
  }

  .wo002-play-hero__copy :where(h1, p) {
    color: var(--cream-50);
  }

  .wo002-play-proof {
    color: var(--chocolate-950);
    background: rgb(255 250 236 / 94%);
  }

  .play-card-grid {
    gap: 10px;
  }

  .play-card__art img {
    min-height: 150px;
    object-fit: cover;
  }
}

/* Mobile Play containment closure — 2026-10-01. */
@media (max-width: 760px) {
  .wo002-play-page {
    width: min(calc(100% - 20px), 100%);
    max-width: 100%;
    padding-block: 14px 24px;
    overflow-x: clip;
  }

  .wo002-play-hero {
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 22px 18px 18px;
    border-radius: 18px;
  }

  .wo002-play-hero__copy {
    min-width: 0;
    max-width: none;
  }

  .wo002-play-hero__copy h1 {
    max-width: 9ch;
    font-size: clamp(2.5rem, 13vw, 3.3rem);
    line-height: .92;
  }

  .wo002-play-hero__copy > p:not(.section-kicker) {
    max-width: none;
    margin: 12px 0 14px;
    font-size: .9rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .wo002-play-hero .button-link {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .wo002-play-proof {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    overflow-wrap: anywhere;
  }

  .wo002-play-proof .chip {
    grid-column: 1 / -1;
  }

  .wo002-game-library {
    min-width: 0;
    margin-block-start: 10px;
    padding: 12px 10px;
    overflow: hidden;
  }

  .wo002-section-heading {
    display: block;
    min-width: 0;
  }

  .wo002-section-heading .text-link {
    display: inline-flex;
    margin-block-start: 8px;
  }

  .wo002-game-library .game-tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    overflow: visible;
    padding-block-end: 4px;
  }

  .wo002-game-library .game-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 6px 10px;
    font-size: .76rem;
  }

  .play-card-grid {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .play-card.studio-game-card.module {
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
  }

  .play-card__art {
    min-width: 0;
    min-height: 150px;
  }

  .play-card__art img {
    min-width: 0;
    min-height: 150px;
    height: 100%;
  }

  .play-card__body {
    min-width: 0;
    padding: 11px;
  }

  .play-card__body h3 {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
  }

  .play-card__body > p:not(.play-card__eyebrow) {
    font-size: .76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

/* Home LOCK_VISUAL reconciliation - manifest controlled - 2026-10-01. */
@media (min-width:1180px){body:has(.home-hero) .site-header{position:relative;z-index:30;box-shadow:0 2px 0 rgb(255 184 35 / 34%);}
body:has(.home-hero) .site-nav{min-height:54px;padding:4px 18px;gap:clamp(16px,2vw,30px);}
body:has(.home-hero) .site-brand{position:relative;font-size:1.36rem;font-weight:1000;letter-spacing:-.06em;text-shadow:0 1px 0 rgb(0 0 0 / 24%);}
body:has(.home-hero) .site-links{gap:clamp(2px,.55vw,8px);}
body:has(.home-hero) .site-links a{min-height:34px;padding:5px 8px;font-size:.78rem;}
main:has(.home-hero){width:min(100%,var(--content-max));margin-inline:auto;display:grid;grid-template-columns:minmax(0,3.15fr) minmax(310px,.95fr);grid-template-areas:"access access" "hero hero" ". ." "today today" "interactive interactive" "discovery discovery" "app next" "companion companion";column-gap:12px;align-items:stretch;background:var(--cream-100);}
main:has(.home-hero) > .section,main:has(.home-hero) > .studio-layout{width:100%;min-width:0;margin-inline:0;}
main:has(.home-hero) > [data-studio-variant="accessibility-tools"]{position:absolute;width:auto;padding:0;}
main:has(.home-hero) > #top{grid-area:hero;padding-block:0;}
body:has(.home-hero) .home-hero,body:has(.home-hero) .home-hero__layout{min-height:350px;height:350px;}
body:has(.home-hero) .home-hero__layout{grid-template-columns:minmax(400px,.86fr) minmax(480px,1.14fr);padding:18px clamp(24px,3vw,46px) 12px;}
body:has(.home-hero) .home-hero__copy{max-width:520px;}
body:has(.home-hero) .home-hero__title{max-width:620px;font-size:clamp(3rem,4.25vw,4.25rem);line-height:.9;text-wrap:balance;}
body:has(.home-hero) .home-hero__lede{display:-webkit-box;max-width:520px;margin-block:8px 10px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.91rem;line-height:1.35;}
body:has(.home-hero) .home-actions{gap:8px;}
body:has(.home-hero) .home-actions .button-link{min-height:40px;padding:8px 14px;font-size:.84rem;}
body:has(.home-hero) .hero-benefits{margin-block-start:8px;gap:10px;font-size:.68rem;}
body:has(.home-hero) .home-hero__toadal{width:min(40vw,490px);transform:translate(-5%,9%);}
body:has(.home-hero) .home-hero__toadal img,body:has(.home-hero) .home-hero__toadal > img{max-height:390px;}
#browser-games-intro{padding:10px 0 0;}
#browser-games-intro .home-section-inner{position:relative;min-height:64px;padding:0 6px 0 14px;}
#browser-games-intro .section-kicker{margin:0 0 2px;font-size:.58rem;}
#browser-games-intro .section-heading{margin:0 0 2px;font-size:1.45rem;}
#browser-games-intro .section-lede{display:-webkit-box;max-width:760px;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:.72rem;line-height:1.3;}
#browser-games-intro .game-tabs{display:none;}
#browser-games-intro .home-play-directory-link{position:absolute;right:6px;top:9px;width:190px;min-height:30px;margin:0;padding:4px 9px;font-size:.68rem;white-space:nowrap;}
body:has(.home-hero) #browser-games{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:7px !important;min-height:0;padding:3px 6px 10px 14px;}
body:has(.home-hero) #browser-games .studio-game-card{min-width:0;min-height:0;padding:7px;border-radius:12px;}
body:has(.home-hero) #browser-games .studio-game-card img{width:100%;height:92px;object-fit:cover;border-radius:9px;}
body:has(.home-hero) #browser-games .studio-game-card h3{margin:5px 0 2px;font-size:.82rem;line-height:1.05;}
body:has(.home-hero) #browser-games .studio-game-card p{display:-webkit-box;margin:0 0 4px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.58rem;line-height:1.2;}
body:has(.home-hero) #browser-games .studio-game-card .chip,body:has(.home-hero) #browser-games .status-chip{min-height:0;padding:3px 6px;font-size:.56rem;}
#feast-pass{padding:10px 14px 10px 0;}
#feast-pass .home-section-inner,#feast-pass .feast-pass-panel{height:100%;}
#feast-pass .feast-pass-panel{min-height:0;max-height:296px;padding:15px;overflow:hidden;}
#feast-pass .section-kicker{font-size:.57rem;}
#feast-pass .section-heading{margin:4px 0 6px;font-size:clamp(1.55rem,2vw,2.15rem);line-height:.95;}
#feast-pass .section-lede{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.72rem;line-height:1.3;}
#feast-pass .pass-signals{margin-block:8px 9px;gap:4px;}
#feast-pass .pass-state{padding:4px 7px;font-size:.57rem;}
#feast-pass .button-link{min-height:32px;padding:5px 9px;font-size:.66rem;}
#feast-pass .pass-emblem{width:42px;min-width:42px;}
#today{padding:0 14px 7px;}
#today .today-panel{min-height:48px;padding:4px 10px;grid-template-columns:180px minmax(0,1fr) auto;column-gap:12px;align-items:center;}
#today .today-panel > div{display:contents;}
#today .section-kicker{margin:0;font-size:.53rem;}
#today .section-heading{margin:0;font-size:1rem;}
#today .section-lede{display:none;}
#today .button-link{min-height:32px;padding:5px 10px;font-size:.68rem;}
#discovery{padding:0 14px 9px;}
#discovery .discovery-heading{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:48px;margin-bottom:5px;column-gap:14px;align-items:end;}
#discovery .discovery-heading .section-kicker{display:none;}
#discovery .discovery-heading .section-heading{margin:0;font-size:1.35rem;}
#discovery .discovery-heading .section-lede{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.69rem;line-height:1.25;}
#discovery .discovery-grid{grid-template-columns:1.2fr 1.08fr .92fr;gap:7px;}
#discovery .discovery-card{min-height:188px;max-height:188px;padding:9px;overflow:hidden;border-radius:12px;}
#discovery .discovery-card .section-kicker{font-size:.53rem;}
#discovery .discovery-card h3{margin:2px 0 3px;font-size:.9rem;}
#discovery .discovery-card > p:not(.section-kicker){display:-webkit-box;margin:0 0 5px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.61rem;line-height:1.2;}
#discovery .character-row{gap:3px;margin-top:3px;}
#discovery .character-figure img{max-height:58px;}
#discovery .character-figure figcaption{font-size:.55rem;}
#discovery .genie-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:3px;}
#discovery .genie-discovery-card{gap:2px;padding:3px 2px 4px;}
#discovery .genie-discovery-card img{height:42px;max-height:42px;}
#discovery .genie-discovery-name{font-size:.57rem;}
#discovery .genie-discovery-status{font-size:.48rem;}
#discovery .world-art{height:76px;max-height:76px;object-fit:cover;}
#discovery .status-chip{padding:3px 5px;font-size:.54rem;}
#discovery .button-link{min-height:28px;padding:4px 7px;font-size:.59rem;}
#discovery .stories-art{min-height:65px;margin-block:4px;}
#discovery .stories-art span{font-size:.48rem;}
#discovery .stories-art strong{font-size:1rem;}
#discovery .discovery-card--stories .status-chip,#discovery .discovery-card--stories .home-actions{display:none;}
#app{padding:0 0 11px 14px;}
#app .app-conversion-panel{min-height:230px;max-height:none;height:auto;overflow:visible;padding:16px 18px;color:var(--cream-50);border-color:rgb(255 196 51 / 55%);background:linear-gradient(90deg,rgb(35 14 8 / 92%) 0%,rgb(35 14 8 / 79%) 48%,rgb(35 14 8 / 24%) 100%),url("../images/world/candy-kingdom.webp") 70% center / cover no-repeat;}
#app .app-conversion-copy{max-width:57%;}
#app .app-conversion-panel .section-heading,#app .app-conversion-panel .section-lede{color:var(--cream-50);}
#app .section-heading{margin:4px 0 5px;font-size:clamp(1.85rem,2.5vw,2.55rem);line-height:.95;}
#app .section-lede{display:-webkit-box;margin:0 0 8px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.72rem;line-height:1.3;}
#app .app-art img{max-height:190px;filter:drop-shadow(0 16px 14px rgb(0 0 0 / 34%));}
#app .store-badge-row{gap:6px;}
#app .store-badge{min-height:38px;padding:5px 9px;}
#app .app-links-status{margin-top:4px;font-size:.56rem;}
#whats-next{padding:0 14px 11px 0;}
#whats-next .home-section-inner{min-height:230px;max-height:230px;height:100%;padding:10px;overflow:hidden;border:1px solid rgb(166 102 6 / 24%);border-radius:16px;background:#fffaf0;}
#whats-next .whats-next-heading .section-kicker,#whats-next .section-lede{display:none;}
#whats-next .section-heading{margin:0 0 5px;font-size:1.08rem;}
#whats-next .whats-next-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
#whats-next .next-card{min-height:0;padding:6px;border-radius:11px;}
#whats-next .next-card h3{margin:3px 0 2px;font-size:.72rem;}
#whats-next .next-card p{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.53rem;line-height:1.2;}
#whats-next .status-chip{padding:2px 4px;font-size:.48rem;}
#whats-next .next-card .button-link{min-height:24px;padding:3px 5px;font-size:.5rem;}
#companion{height:0;padding:0;}
}
@media (max-width:680px){body:has(.home-hero) main{padding-bottom:18px;}
body:has(.home-hero) .home-hero,body:has(.home-hero) .home-hero__layout{min-height:455px;height:455px;}
body:has(.home-hero) .home-hero__layout{padding:16px 16px 10px;}
body:has(.home-hero) .home-hero__title{max-width:330px;font-size:clamp(2.15rem,11vw,3rem);line-height:.92;}
body:has(.home-hero) .home-hero__lede{display:-webkit-box;margin-block:6px 8px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.78rem;line-height:1.28;}
body:has(.home-hero) .home-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
body:has(.home-hero) .home-actions .button-link{min-width:0;min-height:36px;padding:6px 8px;font-size:.72rem;}
body:has(.home-hero) .hero-benefits{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.58rem;}
body:has(.home-hero) .home-hero__toadal{width:170px;right:2px;bottom:-8px;}
#browser-games-intro{padding:14px 12px 7px;}
#browser-games-intro .home-section-inner{padding:0;}
#browser-games-intro .section-heading{margin:2px 0 4px;font-size:1.35rem;}
#browser-games-intro .section-lede{display:-webkit-box;margin:0 0 8px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.72rem;line-height:1.28;}
#browser-games-intro .game-tabs{display:none;}
#browser-games-intro .home-play-directory-link{min-height:34px;padding:5px 10px;font-size:.68rem;}
body:has(.home-hero) #browser-games{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important;padding:4px 12px 14px;}
body:has(.home-hero) #browser-games .studio-game-card{min-width:0;padding:7px;}
body:has(.home-hero) #browser-games .studio-game-card img{width:100%;height:82px;object-fit:cover;border-radius:8px;}
body:has(.home-hero) #browser-games .studio-game-card h3{margin:5px 0 2px;font-size:.77rem;line-height:1.05;}
body:has(.home-hero) #browser-games .studio-game-card p{display:-webkit-box;margin:0 0 4px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.57rem;line-height:1.2;}
#feast-pass{padding:0 12px 12px;}
#feast-pass .feast-pass-panel{min-height:0;padding:15px;}
#feast-pass .section-heading{margin:4px 0 6px;font-size:1.75rem;line-height:.95;}
#feast-pass .section-lede{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:.72rem;line-height:1.28;}
#today{display:none;}
#discovery{padding:0 12px 12px;}
#discovery .discovery-heading{display:block;margin-bottom:7px;}
#discovery .discovery-heading .section-heading{margin:0 0 4px;font-size:1.45rem;}
#discovery .discovery-heading .section-lede{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.68rem;line-height:1.25;}
#discovery .discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
#discovery .discovery-card{min-height:0;padding:8px;}
#discovery .discovery-card--characters{grid-column:1 / -1;}
#discovery .discovery-card h3{margin:2px 0 3px;font-size:.82rem;}
#discovery .discovery-card > p:not(.section-kicker){display:-webkit-box;margin:0 0 5px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.58rem;line-height:1.2;}
#discovery .character-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}
#discovery .character-figure img{height:66px;max-height:66px;}
#discovery .genie-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:3px;}
#discovery .genie-discovery-card{gap:2px;padding:3px 2px 4px;}
#discovery .genie-discovery-card img{height:50px;max-height:50px;}
#discovery .genie-discovery-name{font-size:.61rem;}
#discovery .genie-discovery-status{font-size:.52rem;}
#discovery .world-art{height:84px;object-fit:cover;}
#discovery .stories-art{min-height:82px;}
#discovery .discovery-card--stories .home-actions{gap:3px;}
#discovery .discovery-card--stories .button-link{min-height:28px;padding:4px 6px;font-size:.58rem;}
#app{padding:0 12px 12px;}
#app .app-conversion-panel{grid-template-columns:minmax(0,1fr) 105px;gap:8px;min-height:300px;padding:14px;background-position:58% center;}
#app .app-conversion-copy{max-width:none;}
#app .section-heading{margin:4px 0 6px;font-size:1.65rem;line-height:.95;}
#app .section-lede{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:.69rem;line-height:1.28;}
#app .app-art img{width:100%;height:150px;min-height:0;max-height:150px;object-fit:contain;}
#app .app-links-status{display:none;}
#app .store-badge{min-height:34px;padding:4px 7px;font-size:.62rem;}
#whats-next{padding:0 12px 12px;}
#whats-next .home-section-inner{padding:11px;}
#whats-next .section-heading{margin:0 0 5px;font-size:1.25rem;}
#whats-next .section-lede{display:-webkit-box;margin:0 0 7px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.64rem;line-height:1.2;}
#whats-next .whats-next-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
#whats-next .next-card{min-height:0;padding:7px;}
#whats-next .next-card h3{margin:3px 0 2px;font-size:.7rem;}
#whats-next .next-card p{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.54rem;line-height:1.2;}
}
main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion{position:fixed !important;z-index:50;inset-inline-end:max(12px,env(safe-area-inset-right,0px)) !important;inset-block-end:max(12px,env(safe-area-inset-bottom,0px)) !important;inset-block-start:auto !important;inset-inline-start:auto !important;width:min(280px,calc(100vw - 24px));margin:0 !important;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-panel{width:min(210px,calc(100vw - 92px));max-height:180px;padding:8px 10px;font-size:.68rem;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-toggle,main:has(.home-hero) > [data-studio-variant="companion"] .companion-image{width:68px;height:72px;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-image{max-height:72px;object-fit:contain;}
@media (max-width:680px){main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion{width:min(246px,calc(100vw - 20px));inset-inline-end:max(10px,env(safe-area-inset-right,0px)) !important;inset-block-end:max(10px,env(safe-area-inset-bottom,0px)) !important;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-panel{width:min(184px,calc(100vw - 74px));max-height:150px;padding:7px 9px;font-size:.64rem;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-toggle,main:has(.home-hero) > [data-studio-variant="companion"] .companion-image{width:52px;height:56px;}
main:has(.home-hero) > [data-studio-variant="companion"] .companion-image{max-height:56px;}
}


/* Manifest rows 06-07: Characters Hub + Toadal Profile - 2026-10-01 */
.character-family-page{display:grid;gap:14px;padding:12px 14px 28px;background:linear-gradient(180deg,#fff6da 0%,#fffdf6 100%);color:var(--chocolate-950)}
.character-family-page .detail-breadcrumb{width:min(1180px,100%);margin:0 auto}
.character-hero,.profile-hero{position:relative;width:min(1180px,100%);min-height:330px;margin:0 auto;overflow:hidden;border:2px solid rgb(168 102 6 / 35%);border-radius:22px;box-shadow:0 8px 0 rgb(66 36 22 / 10%)}
.character-hero-bg,.profile-hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgb(24 13 48 / 88%) 0%,rgb(24 13 48 / 64%) 40%,rgb(24 13 48 / 10%) 72%),url("../images/world/candy-kingdom.webp") center / cover no-repeat}
.character-hero-copy,.profile-hero-copy{position:relative;z-index:2;width:min(54%,610px);padding:38px;color:#fff}
.character-hero-copy .section-kicker,.profile-hero-copy .section-kicker{color:#ffd45b}
.character-hero-copy h1,.profile-hero-copy h1{margin:6px 0 6px;font-size:clamp(3rem,6vw,5.9rem);line-height:.88;letter-spacing:-.045em;color:#fff;text-shadow:0 3px 0 rgb(23 12 48 / 35%)}
.profile-hero-copy h1{color:#ffd45b}
.profile-hero-copy h2{margin:0 0 10px;color:#fff;font-size:clamp(1.65rem,2.7vw,2.7rem)}
.character-hero-copy p,.profile-hero-copy p{max-width:58ch;font-size:.96rem;line-height:1.45}
.character-hero-toadal,.profile-hero-toadal{position:absolute;z-index:1;right:4%;bottom:-8%;width:min(39%,440px);height:auto;filter:drop-shadow(0 18px 16px rgb(30 16 13 / 28%))}
.profile-hero-toadal{right:9%;width:min(36%,410px)}
.profile-hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.character-browser,.character-info-grid,.profile-anchor-nav,.profile-grid{width:min(1180px,100%);margin:0 auto}
.character-browser{padding:18px;border:1px solid rgb(166 102 6 / 26%);border-radius:20px;background:#fffdf6;box-shadow:0 5px 0 rgb(66 36 22 / 7%)}
.character-browser-heading{display:grid;grid-template-columns:1fr minmax(260px,.8fr);gap:18px;align-items:end;margin-bottom:12px}
.character-browser-heading h2{margin:2px 0 0;color:var(--navy-900);font-size:clamp(1.65rem,3vw,2.65rem)}
.character-browser-heading p{margin:0;color:#675348}
.character-filter-controls{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.character-filter-controls input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.character-filter-controls label{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid rgb(166 102 6 / 30%);border-radius:999px;background:#fff9e9;color:var(--navy-900);font-size:.78rem;font-weight:900;cursor:pointer}
.character-filter-controls input:focus-visible + label{outline:3px solid var(--button-fill);outline-offset:2px}
.character-filter-controls input:checked + label{color:#fff; background: var(--button-background);border-color:var(--button-border)}

.character-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.character-card{display:grid;grid-template-rows:160px 1fr;min-width:0;overflow:hidden;border:1px solid rgb(66 36 22 / 12%);border-radius:15px;background:#fffaf0}
.character-card-art{display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#fff2b9,#ffe8f0)}
.character-card-art img{width:100%;height:100%;padding:8px;object-fit:contain}
.character-card-copy{display:flex;flex-direction:column;align-items:flex-start;padding:10px 11px 12px}
.character-card-copy h2{margin:5px 0 3px;color:var(--navy-900);font-size:1.05rem}
.character-card-copy p{margin:0 0 8px;color:#675348;font-size:.72rem;line-height:1.32}
.character-card-action,.character-card-state{margin-top:auto;font-size:.7rem;font-weight:900}
.character-card-action{color:var(--button-fill)}
.character-card-state{color:#816b5e}
.character-card--future{border-style:dashed}
.future-character-mark{display:grid;place-items:center;height:160px;background:linear-gradient(145deg,#4d395e,#26172f);color:#fff;font-size:4rem;font-weight:1000}

.characters-page:has(#character-filter-hero:checked) .character-card:not([data-character-group="hero"]),
.characters-page:has(#character-filter-genies:checked) .character-card:not([data-character-group="genie"]),
.characters-page:has(#character-filter-cast:checked) .character-card:not([data-character-group="cast"]),
.characters-page:has(#character-filter-future:checked) .character-card:not([data-character-group="future"]){display:none}

.character-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.character-info-panel,.profile-panel{padding:14px;border:1px solid rgb(166 102 6 / 22%);border-radius:15px;background:#fffdf6;box-shadow:0 4px 0 rgb(66 36 22 / 6%)}
.character-info-panel h2,.profile-panel h2{margin:3px 0 6px;color:var(--navy-900);font-size:1.15rem}
.character-info-panel p,.profile-panel p{margin:0 0 8px;color:#675348;font-size:.78rem;line-height:1.4}
.character-info-links{display:flex;flex-wrap:wrap;gap:6px}
.character-info-links a{padding:5px 8px;border-radius:999px;background:#fff0cf;color:var(--navy-900);font-size:.7rem;font-weight:900}

.profile-anchor-nav{display:flex;gap:6px;overflow:auto;padding:8px;border:1px solid rgb(166 102 6 / 24%);border-radius:15px;background:#fffdf6;scrollbar-width:thin}
.profile-anchor-nav a{flex:0 0 auto;padding:6px 10px;border:1px solid rgb(166 102 6 / 18%);border-radius:999px;color:var(--navy-900);background:#fff9e9;font-size:.7rem;font-weight:900}
.profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.profile-panel{scroll-margin-top:90px}
.profile-panel--wide{grid-column:span 2}
.profile-panel--gallery{grid-column:span 2}
.profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:10px 0 0}
.profile-facts div{padding:7px 8px;border-radius:9px;background:#fff6dc}
.profile-facts dt{font-size:.6rem;font-weight:900;color:#8b5b08;text-transform:uppercase;letter-spacing:.08em}
.profile-facts dd{margin:2px 0 0;color:var(--navy-900);font-size:.76rem;font-weight:800}
.profile-gallery{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}
.profile-gallery img{width:100%;height:150px;padding:6px;object-fit:contain;border-radius:11px;background:linear-gradient(145deg,#fff2b9,#ffe8f0)}

.character-family-page .toadal-companion{width:min(280px,calc(100vw - 24px))}
.character-family-page .companion-image{object-fit:contain}

@media (max-width:900px){
  .character-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-hero-copy,.profile-hero-copy{width:65%;padding:26px}
  .character-hero-toadal,.profile-hero-toadal{right:1%;width:42%}
}
@media (max-width:680px){
  .character-family-page{gap:10px;padding:8px 10px 20px}
  .character-hero,.profile-hero{min-height:430px;border-radius:16px}
  .character-hero-bg,.profile-hero-bg{background:linear-gradient(180deg,rgb(24 13 48 / 80%) 0%,rgb(24 13 48 / 55%) 52%,rgb(24 13 48 / 8%) 100%),url("../images/world/candy-kingdom-mobile.webp") center / cover no-repeat}
  .character-hero-copy,.profile-hero-copy{width:100%;padding:20px 18px}
  .character-hero-copy h1,.profile-hero-copy h1{font-size:clamp(2.65rem,15vw,4.3rem)}
  .profile-hero-copy h2{font-size:1.55rem}
  .character-hero-copy p,.profile-hero-copy p{max-width:90%;font-size:.78rem}
  .character-hero-toadal,.profile-hero-toadal{right:4px;bottom:-5%;width:48%;max-width:210px}
  .character-browser{padding:12px}
  .character-browser-heading{grid-template-columns:1fr;gap:4px}
  .character-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .character-card{grid-template-rows:115px 1fr}
  .future-character-mark{height:115px;font-size:3rem}
  .character-card-copy{padding:7px 8px 9px}
  .character-card-copy h2{font-size:.88rem}
  .character-card-copy p{font-size:.62rem}
  .character-info-grid{grid-template-columns:1fr}
  .profile-anchor-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:5px;padding:7px}
  .profile-anchor-nav a{min-width:0;text-align:center}
  .profile-grid{grid-template-columns:1fr 1fr;gap:7px}
  .profile-panel{padding:10px}
  .profile-panel--wide,.profile-panel--gallery{grid-column:1 / -1}
  .profile-facts{grid-template-columns:1fr 1fr}
  .profile-gallery img{height:120px}
}
@media (max-width:390px){
  .character-filter-controls label{padding:5px 8px;font-size:.68rem}
  .character-card-grid{grid-template-columns:1fr 1fr}
  .profile-grid{grid-template-columns:1fr}
  .profile-panel--wide,.profile-panel--gallery{grid-column:auto}
}


/* Character-family polish: separate hero labels and keep mobile companion non-blocking. */
.character-hero-copy > .section-kicker,.profile-hero-copy > .section-kicker{display:block;margin:0 0 7px}
.character-hero-copy > .chip,.profile-hero-copy > .chip{display:inline-flex;margin:0 0 7px}
@media (max-width:680px){
  .character-family-page .toadal-companion{width:min(216px,calc(100vw - 20px));inset-inline-end:max(8px,env(safe-area-inset-right,0px));inset-block-end:max(8px,env(safe-area-inset-bottom,0px))}
  .character-family-page .companion-panel{width:min(166px,calc(100vw - 66px));padding:6px 8px;font-size:.6rem}
  .character-family-page .companion-toggle,.character-family-page .companion-image{width:44px;height:48px}
  .character-family-page .companion-image{max-height:48px}
}

/* Guest-local progression surfaces. Intentionally scoped away from Home and shell. */
[data-progression-page] {
  --progression-ink: #351b32;
  --progression-muted: #68545f;
  --progression-line: rgb(91 48 69 / 16%);
  --progression-paper: #fffdf7;
  width: min(calc(100% - 32px), 1120px);
  margin-inline: auto;
  padding-block: clamp(18px, 3vw, 34px) 56px;
  color: var(--progression-ink);
}

[data-progression-page] .detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 14px;
  color: var(--progression-muted);
  font-size: .83rem;
}

[data-progression-page] .detail-breadcrumb a,
[data-progression-page] .progression-nav a {
  color: var(--pink-700);
  font-weight: 800;
  text-underline-offset: .18em;
}

[data-progression-page] :where(a, button):focus-visible {
  outline: 3px solid var(--button-fill);
  outline-offset: 3px;
}

[data-progression-page] .progression-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 5vw, 52px);
  border: 2px solid rgb(255 212 91 / 72%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgb(255 212 91 / 68%), transparent 34%),
    linear-gradient(135deg, #fff7df 0%, #fffdf6 56%, #ffeaf1 100%);
  box-shadow: 0 8px 0 rgb(66 36 22 / 8%), 0 18px 36px rgb(66 36 22 / 8%);
}

[data-progression-page] .progression-hero h1 {
  max-width: 16ch;
  margin: 2px 0 12px;
  color: var(--navy-900);
  font-size: clamp(2.5rem, 7vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.045em;
}

[data-progression-page] .progression-eyebrow {
  margin: 0 0 8px;
  color: var(--pink-700);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

[data-progression-page] .progression-lede {
  max-width: 70ch;
  margin: 0;
  color: #493a42;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
}

[data-progression-page] .progression-truth-note {
  max-width: 78ch;
  margin: 18px 0 0;
  padding: 11px 14px;
  border-inline-start: 4px solid var(--gold-400);
  border-radius: 0 10px 10px 0;
  color: #59444d;
  background: rgb(255 255 255 / 66%);
  font-size: .88rem;
  line-height: 1.5;
}

[data-progression-page] .progression-section,
[data-progression-page] .progression-controls {
  min-width: 0;
  margin-block-start: 18px;
  padding: clamp(17px, 3vw, 26px);
  border: 1px solid var(--progression-line);
  border-radius: 19px;
  background: var(--progression-paper);
  box-shadow: 0 5px 0 rgb(66 36 22 / 5%);
}

[data-progression-page] .progression-section-heading,
[data-progression-page] .progression-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

[data-progression-page] .progression-section-heading {
  margin-block-end: 16px;
}

[data-progression-page] .progression-section-heading .section-kicker {
  margin: 0 0 4px;
  color: var(--pink-700);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .13em;
}

[data-progression-page] .progression-section-heading h2,
[data-progression-page] .progression-daily h2,
[data-progression-page] .progression-controls h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.12;
}

[data-progression-page] .progression-local-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgb(217 0 85 / 20%);
  border-radius: 999px;
  color: var(--pink-700);
  background: #fff1f6;
  font-size: .76rem;
  font-weight: 850;
}

[data-progression-page] .progression-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

[data-progression-page] .progression-stat {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--progression-line);
  border-radius: 14px;
  background: linear-gradient(150deg, #fff 0%, #fff8e8 100%);
}

[data-progression-page] .progression-stat dt {
  color: var(--progression-muted);
  font-size: .77rem;
  font-weight: 750;
}

[data-progression-page] .progression-stat dd {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  color: var(--navy-900);
  font-size: clamp(1.45rem, 3.8vw, 2rem);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

[data-progression-page] .progression-storage,
[data-progression-page] .progression-daily p,
[data-progression-page] .progression-controls p {
  color: var(--progression-muted);
  font-size: .9rem;
  line-height: 1.5;
}

[data-progression-page] .progression-storage {
  margin: 13px 0 0;
}

[data-progression-page] .progression-daily {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(110deg, #fff5d8, #fffdf7 70%);
}

[data-progression-page] .progression-daily .section-kicker {
  margin: 0 0 5px;
  color: var(--pink-700);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .13em;
}

[data-progression-page] .progression-daily p:not(.section-kicker) {
  margin: 8px 0 0;
}

[data-progression-page] .progression-daily button:disabled {
  cursor: not-allowed;
  opacity: .68;
}

[data-progression-page] .progression-empty {
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
  border: 1px dashed rgb(91 48 69 / 27%);
  border-radius: 15px;
  color: var(--progression-muted);
  background: #fffaf0;
  line-height: 1.55;
}

[data-progression-page] .progression-empty > :first-child { margin-block-start: 0; }
[data-progression-page] .progression-empty > :last-child { margin-block-end: 0; }
[data-progression-page] .progression-empty h3 { color: var(--navy-900); }
[data-progression-page] .progression-muted { color: var(--progression-muted); font-size: .84rem; }

[data-progression-page] .progression-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-block-start: 18px;
  padding: 12px;
  border: 1px solid var(--progression-line);
  border-radius: 15px;
  background: #fffdf7;
}

[data-progression-page] .progression-nav a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgb(217 0 85 / 17%);
  border-radius: 999px;
  background: #fff;
}

[data-progression-page] .progression-nav a[aria-current='page'] {
  color: #fff; background:var(--button-background);
}

[data-progression-page] .progression-controls {
  align-items: center;
}

[data-progression-page] .progression-controls h2 { font-size: 1.12rem; }
[data-progression-page] .progression-controls p { max-width: 68ch; margin: 7px 0 0; }
[data-progression-page] .progression-controls button { flex: 0 0 auto; cursor: pointer; }

@media (max-width: 760px) {
  [data-progression-page] {
    width: min(calc(100% - 20px), 100%);
    padding-block: 14px 36px;
  }

  [data-progression-page] .progression-hero { border-radius: 18px; }
  [data-progression-page] .progression-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-progression-page] .progression-stat { padding: 11px; }
  [data-progression-page] .progression-section-heading,
  [data-progression-page] .progression-daily,
  [data-progression-page] .progression-controls { align-items: flex-start; }
  [data-progression-page] .progression-daily,
  [data-progression-page] .progression-controls { flex-direction: column; }
  [data-progression-page] .progression-daily .button-link,
  [data-progression-page] .progression-controls .button-link { width: 100%; justify-content: center; }
  [data-progression-page] .progression-muted { max-width: 40%; text-align: end; }
}

@media (max-width: 360px) {
  [data-progression-page] .progression-stat-grid { grid-template-columns: 1fr 1fr; }
  [data-progression-page] .progression-stat dt { font-size: .7rem; }
  [data-progression-page] .progression-nav { gap: 6px; padding: 9px; }
  [data-progression-page] .progression-nav a { min-height: 40px; padding-inline: 10px; font-size: .86rem; }
}


/* Gated ecosystem manifest pages: Account, Community, Store, Contact, About, Coming Soon, Legal. */
.gated-page {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--page-gutter) clamp(44px, 6vw, 72px);
}

.studio-rich-text.shell.section[data-studio-variant="gated-about"] > .gated-page {
  padding-block-end: clamp(16px, 2vw, 24px);
}

.gated-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  min-height: 340px;
  padding: clamp(22px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid rgb(168 102 6 / 22%);
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 78% 18%, rgb(255 212 91 / 50%), transparent 34%),
    linear-gradient(135deg, var(--cream-50), var(--cream-100) 56%, #ffe3ee);
  box-shadow: 0 22px 58px rgb(64 30 11 / 12%);
}

.gated-hero::after {
  content: "";
  position: absolute;
  inset: auto -7% -42% auto;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 38 122 / 9%);
  pointer-events: none;
}

.gated-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.gated-hero h1 {
  max-width: 780px;
  margin: 8px 0 10px;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.045em;
}

.gated-lede {
  max-width: 760px;
  margin: 0;
  color: #403a53;
  font-size: clamp(.95rem, 1.25vw, 1.1rem);
}

.gated-hero-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: end;
  min-height: 260px;
  margin: 0;
}

.gated-hero-art img {
  width: min(100%, 430px);
  max-height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgb(72 32 8 / 17%));
}

.gated-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(18px, 3vw, 32px);
}

.gated-card,
.legal-card,
.gated-form {
  border: 1px solid rgb(168 102 6 / 17%);
  border-radius: var(--radius-panel);
  background: rgb(255 253 246 / 94%);
  box-shadow: 0 12px 30px rgb(57 28 10 / 8%);
}

.gated-card {
  min-width: 0;
  padding: clamp(18px, 2.3vw, 28px);
}

.gated-card h2,
.legal-card h2,
.gated-form h2 {
  margin: 4px 0 8px;
  color: var(--navy-900);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.05;
}

.gated-card p,
.legal-card p {
  margin: 0 0 12px;
  color: #514c60;
}

.gated-card a:not(.button-link),
.legal-card a,
.legal-toc a {
  color: var(--button-fill);
  font-weight: 800;
}

.gated-actions,
.gated-disabled-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.gated-disabled-actions button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #c9c4ce;
  border-radius: var(--radius-control);
  color: #80798b;
  background: #eeeaf0;
  font: inherit;
  font-weight: 800;
  cursor: not-allowed;
}

.gated-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(18px, 3vw, 32px);
}

.gated-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 2.5vw, 30px);
}

.gated-field {
  display: grid;
  gap: 6px;
}

.gated-field--wide,
.gated-form-status,
.gated-form > button {
  grid-column: 1 / -1;
}

.gated-field label {
  color: var(--navy-900);
  font-weight: 800;
}

.gated-field input,
.gated-field select,
.gated-field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #c9bca6;
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--chocolate-950);
  background: #fff;
  font: inherit;
}

.gated-field textarea {
  min-height: 142px;
  resize: vertical;
}

.gated-form-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #5e4d27;
  background: #fff2bf;
  font-size: .9rem;
}

.gated-side-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.construction-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 20px;
  align-items: center;
  margin-top: clamp(18px, 3vw, 32px);
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius-panel);
  color: #24130d;
  background:
    linear-gradient(135deg, rgb(255 184 35 / 92%), rgb(255 212 91 / 92%)),
    repeating-linear-gradient(135deg, #20130d 0 14px, #f8bd1f 14px 28px);
  box-shadow: 0 14px 34px rgb(76 43 8 / 12%);
}

.construction-panel h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
}

.construction-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.construction-links a {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgb(33 17 12 / 20%);
  border-radius: 10px;
  color: #20110c;
  background: rgb(255 255 255 / 72%);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.legal-template {
  display: grid;
  grid-template-columns: minmax(180px, .28fr) minmax(0, .72fr);
  gap: 14px 22px;
  margin-top: clamp(18px, 3vw, 32px);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgb(168 102 6 / 16%);
  border-radius: var(--radius-card);
  background: var(--cream-100);
}

.legal-toc a {
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  background: var(--cream-200);
}

.legal-card {
  grid-column: 2;
  padding: clamp(18px, 2.4vw, 28px);
}

@media (max-width: 880px) {
  .gated-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .gated-hero-art {
    min-height: 180px;
  }

  .gated-hero-art img {
    max-height: 250px;
  }

  .gated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gated-split,
  .construction-panel,
  .legal-template {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-card {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  main:has(.home-hero) > [data-studio-variant="companion"] {
    height: auto;
    padding: 8px 14px 12px;
  }

  main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
    position: static !important;
    inset: auto !important;
    width: min(100%, 340px);
    margin: 0 auto !important;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .gated-page {
    padding-inline: 12px;
  }

  .gated-hero {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .gated-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.25rem);
  }

  .gated-grid,
  .gated-form,
  .construction-links,
  .legal-toc {
    grid-template-columns: 1fr;
  }

  .gated-field,
  .gated-field--wide,
  .gated-form-status,
  .gated-form > button {
    grid-column: 1;
  }
}


/* Keep gated-preview links visually identical to the existing What's Next card titles. */
.next-card-title-link {
  color: inherit;
  text-decoration: none;
}
.next-card-title-link:hover,
.next-card-title-link:focus-visible {
  color: var(--button-fill);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Gated ecosystem polish after visual review. */
.gated-hero .section-kicker {
  display: block;
  margin: 0 0 7px;
}

.gated-hero > .gated-hero-copy > .chip {
  display: inline-flex;
  margin: 0 0 10px;
}

.gated-field input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0 7px 0 0;
  accent-color: var(--pink-700);
}

.gated-field label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
}

/* Stories, Manga, and reader lane — intentionally scoped to these routes. */
.stories-publishing-page {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  margin-inline: auto;
  padding-block: 22px clamp(48px, 7vw, 92px);
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
  color: var(--chocolate-950);
}

.story-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #6d584e; font-size: .88rem; }
.story-breadcrumb a, .story-text-link, .story-category-card a { color: var(--navy-700); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.story-kicker { margin: 0 0 8px; color: var(--gold-700); font-size: .76rem; font-weight: 900; letter-spacing: .13em; line-height: 1.3; }
.story-status { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; border: 1px solid rgb(168 102 6 / 25%); border-radius: var(--radius-pill); color: #71430b; background: #fff5d9; font-size: .74rem; font-weight: 900; letter-spacing: .04em; }
.story-status-muted { color: #5a5364; background: #f0edf3; border-color: #d8d1df; }
.story-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--radius-pill); font: inherit; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.story-button:hover:not(:disabled) { transform: translateY(-2px); }
.story-button:focus-visible, .story-text-link:focus-visible, .story-category-card:focus-visible, .reader-control:focus-visible, .reader-thumbnail-button:focus-visible, .reader-chapter-link:focus-visible { outline: 3px solid #126fd6; outline-offset: 3px; }
.story-button-primary { color: #fff; background: var(--button-background); box-shadow: 0 5px 0 rgb(16 22 91 / 20%); }
.story-button-secondary { color: var(--navy-900); border-color: rgb(41 45 126 / 18%); background: #fffdf8; }
.story-button-disabled, .story-button:disabled { color: #645c65; background: #e8e2e6; border-color: #d6ced4; box-shadow: none; cursor: not-allowed; }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.story-art-note { max-width: 60ch; margin: 0; color: #6a5950; font-size: .82rem; }

.stories-hero, .manga-series-hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(18px, 3vw, 42px); align-items: center; overflow: hidden; padding: clamp(20px, 3.2vw, 44px); border: 1px solid rgb(168 102 6 / 24%); border-radius: var(--radius-panel); background: linear-gradient(135deg, var(--cream-100) 0%, #fff2d4 65%, #f8d977 145%); box-shadow: 0 8px 0 rgb(66 36 22 / 8%); }
.stories-hero-copy h1, .manga-series-copy h1, .reader-page-heading h1 { margin: 8px 0 14px; color: var(--navy-900); font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 4.45rem); font-weight: 950; letter-spacing: -.04em; line-height: .98; }
.stories-hero-copy > p:not(.story-kicker):not(.story-art-note), .manga-series-summary { max-width: 58ch; margin: 0 0 20px; color: #51443f; font-size: clamp(1rem, 1.4vw, 1.16rem); }
.stories-hero-copy .story-status { margin-bottom: 8px; }
.stories-hero-art, .manga-series-art { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgb(66 36 22 / 17%); border-radius: calc(var(--radius-panel) - 5px); background: #593b2b; box-shadow: 0 7px 20px rgb(44 23 16 / 17%); }
.stories-hero-art { min-height: 300px; aspect-ratio: 1.38; }
.stories-world-art, .manga-series-art > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.stories-hero-art::after { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgb(30 16 13 / 66%)); content: ''; pointer-events: none; }
.stories-toadal-art { position: absolute; z-index: 1; right: 4%; bottom: 28px; width: clamp(105px, 19vw, 205px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 9px rgb(30 16 13 / 28%)); }
.stories-hero-art figcaption, .manga-series-art figcaption { position: absolute; z-index: 2; right: 14px; bottom: 11px; left: 14px; color: #fff; font-size: .78rem; font-weight: 750; text-shadow: 0 1px 3px #1e100d; }

.stories-feature-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 18px; }
.story-panel { min-width: 0; padding: clamp(18px, 2vw, 27px); border: 1px solid rgb(168 102 6 / 22%); border-radius: var(--radius-panel); background: linear-gradient(145deg, #fffef9 0%, #fff7e6 100%); box-shadow: 0 5px 0 rgb(66 36 22 / 6%); }
.story-panel h2, .story-discovery-band h2 { margin: 0; color: var(--navy-900); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }
.story-panel p { color: #5a4b45; }
.story-panel-heading, .story-section-heading, .reader-thumbnail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.story-panel-heading .story-kicker, .story-section-heading .story-kicker { margin-bottom: 4px; }
.story-empty-card, .story-progress-empty { display: flex; align-items: center; gap: 14px; min-height: 122px; padding: 18px; border: 1px dashed rgb(168 102 6 / 42%); border-radius: var(--radius-card); background: #fffaf0; }
.story-empty-card h3 { margin: 0 0 5px; color: var(--navy-900); }
.story-empty-card p, .story-progress-empty p { margin: 0; }
.story-empty-mark, .story-progress-empty > span { flex: 0 0 auto; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #71430b; background: #ffe7a6; font-size: 1.55rem; }
.story-progress-panel { display: flex; flex-direction: column; align-items: flex-start; }
.story-progress-panel .story-text-link { margin-top: auto; padding-top: 16px; }
.story-empty-copy { margin: 0; color: #625650; }
.story-series-list { display: grid; gap: 12px; }
.story-series-card, .story-latest-card { padding: 17px; border: 1px solid #ead7b0; border-radius: var(--radius-card); background: #fff; }
.story-series-card h3, .story-latest-card h3 { margin: 8px 0; color: var(--navy-900); }
.story-series-card p { margin: 0 0 12px; }
.story-latest-panel { display: grid; gap: 12px; }
.story-latest-panel .story-panel-heading { margin-bottom: 0; }
.story-latest-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.story-latest-card .story-kicker, .story-latest-card h3 { margin-block: 0; }
.story-section-heading { align-items: end; margin-bottom: 16px; }
.story-section-heading > p { max-width: 58ch; margin: 0; color: #64534a; }
.story-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.story-category-card { display: flex; min-width: 0; min-height: 194px; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid rgb(168 102 6 / 22%); border-radius: var(--radius-card); color: inherit; background: #fffdf7; box-shadow: 0 4px 0 rgb(66 36 22 / 6%); }
.story-category-card h3 { margin: 11px 0 5px; color: var(--navy-900); font-size: 1.03rem; }
.story-category-card p { margin: 0 0 10px; color: #64534a; font-size: .9rem; }
.story-category-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #683b09; background: #ffe8ab; font-size: 1.25rem; font-weight: 900; }
.story-category-link { text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.story-category-link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgb(66 36 22 / 8%); }
.story-category-cta { margin-top: auto; color: var(--button-fill); font-weight: 900; }
.story-discovery-band { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(20px, 3vw, 34px); border: 1px solid rgb(168 102 6 / 25%); border-radius: var(--radius-panel); background: linear-gradient(120deg, #fff3d8, #fffdf6); }
.story-discovery-band p:not(.story-kicker) { max-width: 68ch; margin: 8px 0 0; color: #5e4e45; }

.manga-series-art { min-height: 350px; aspect-ratio: .95; }
.manga-series-art > img { min-height: 350px; }
.manga-series-copy { min-width: 0; }
.manga-series-copy h1 { margin-top: 11px; }
.manga-series-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.manga-series-progress { min-height: 48px; margin-top: 16px; padding: 12px 14px; border: 1px solid #eedcb8; border-radius: 13px; background: rgb(255 255 255 / 70%); }
.manga-series-progress p { margin: 0; }
.manga-series-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.manga-series-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.manga-series-facts > div { display: grid; gap: 4px; min-width: 0; padding: 12px; border-radius: 12px; background: #fff; }
.manga-series-facts span { color: #74655e; font-size: .77rem; }
.manga-series-facts strong { color: var(--navy-900); font-size: .88rem; }
.story-chapter-row { display: grid; grid-template-columns: minmax(65px, .45fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eadfc8; }
.story-chapter-row:last-child { border-bottom: 0; }
.story-chapter-row > span:first-child { color: #736259; font-size: .86rem; }
.story-chapter-row strong { color: var(--navy-900); }
.manga-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.manga-related-grid .story-panel h2 { margin-bottom: 7px; }
.manga-related-grid .story-panel p:not(.story-kicker) { min-height: 52px; }
.manga-back-link { padding-top: 4px; }
.manga-back-link a { color: var(--navy-700); font-weight: 850; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.comic-reader-page { max-width: 1760px; }
.reader-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.reader-page-heading h1 { margin-bottom: 0; font-size: clamp(1.85rem, 3.4vw, 3.1rem); }
.comic-reader-layout { display: grid; grid-template-columns: minmax(160px, .66fr) minmax(0, 2.2fr) minmax(185px, .76fr); align-items: stretch; gap: 12px; min-width: 0; }
.reader-side-panel, .reader-main-panel, .reader-thumbnail-panel { min-width: 0; border: 1px solid rgb(168 102 6 / 22%); border-radius: 17px; background: #fffdf7; box-shadow: 0 5px 0 rgb(66 36 22 / 6%); }
.reader-side-panel { padding: 16px; }
.reader-side-panel h2 { margin: 0 0 8px; color: var(--navy-900); font-size: 1.1rem; }
.reader-side-panel h3 { margin: 18px 0 8px; color: var(--navy-900); font-size: .95rem; }
.reader-side-panel p:not(.story-kicker) { color: #64534a; font-size: .9rem; }
.reader-side-panel > a { color: var(--navy-700); font-weight: 800; }
.reader-series-list { display: grid; gap: 8px; margin-top: 14px; }
.reader-empty-mini { display: block; color: #6d605a; font-size: .82rem; }
.reader-main-panel { overflow: hidden; color: #fff; background: #201a24; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--chocolate-950); background: #fffaf0; }
.reader-current-story { display: flex; min-width: 0; align-items: center; gap: 10px; }
.reader-current-story > div { display: grid; min-width: 0; }
.reader-current-story strong { overflow: hidden; color: var(--navy-900); text-overflow: ellipsis; white-space: nowrap; }
.reader-current-story span:not(.reader-story-mark) { color: #6e5b51; font-size: .81rem; }
.reader-story-mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #74460b; background: #ffe7a6; font-size: 1.2rem; }
.reader-toolbar-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.reader-control { display: inline-flex; min-height: 40px; justify-content: center; align-items: center; padding: 8px 12px; border: 1px solid #b9a98f; border-radius: 11px; color: var(--navy-900); background: #fffdf8; font: inherit; font-size: .83rem; font-weight: 850; cursor: pointer; }
.reader-control:hover:not(:disabled) { background: #fff0c9; }
.reader-control:disabled { color: #827a7c; background: #ece8e5; cursor: not-allowed; }
.reader-progress-track { height: 5px; background: #423a42; }
.reader-progress-track > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink-500), var(--gold-400)); transition: width .15s ease; }
.reader-viewer { position: relative; display: grid; min-height: min(58vh, 590px); place-items: center; padding: clamp(12px, 2vw, 24px); background: radial-gradient(ellipse at 50% 30%, #453c48 0%, #201a24 73%); touch-action: pan-y; }
.reader-empty-state { display: grid; max-width: 510px; justify-items: center; gap: 8px; padding: 30px; text-align: center; }
.reader-empty-state h2 { margin: 4px 0 0; color: #fff6df; font-size: clamp(1.2rem, 2vw, 1.7rem); }
.reader-empty-state p { max-width: 46ch; margin: 0 0 10px; color: #e6dce7; }
.reader-empty-icon { display: grid; width: 60px; height: 60px; place-items: center; border: 1px solid rgb(255 216 120 / 42%); border-radius: 50%; color: #ffd878; background: rgb(255 216 120 / 9%); font-size: 1.8rem; }
.reader-page-figure { display: grid; width: 100%; height: min(66vh, 680px); justify-items: center; margin: 0; }
.reader-page-figure img { width: 100%; height: 100%; object-fit: contain; }
.reader-page-figure figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reader-load-error { position: absolute; inset: auto 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #f2a2aa; border-radius: 12px; color: #571d27; background: #fff2f2; }
.reader-load-error[hidden], .reader-page-figure[hidden], .reader-empty-state[hidden] { display: none; }
.reader-load-error p { margin: 0; }
.reader-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; background: #2a242e; }
.reader-controls .reader-control { color: #fff; border-color: #6c626e; background: #3b3440; }
.reader-controls .reader-control:disabled { color: #a9a0ab; background: #302b34; }
.reader-controls .reader-control-next { border-color: var(--button-border); background:var(--button-background); }
.reader-controls .reader-control-next:disabled { border-color: #62545f; background: #49434a; }
.reader-page-count { min-width: 72px; color: #fff; font-weight: 850; text-align: center; }
.reader-keyboard-hint { margin: 0; padding: 0 12px 12px; color: #d5cbd7; background: #2a242e; font-size: .77rem; text-align: center; }
.reader-chapter-list { display: grid; gap: 5px; }
.reader-chapter-link { display: block; padding: 7px; border-radius: 8px; color: var(--navy-700); text-decoration: none; font-size: .84rem; }
.reader-chapter-link:hover { background: #fff1d3; }
.reader-thumbnail-panel { padding: 14px; }
.reader-thumbnail-heading { align-items: center; margin-bottom: 9px; }
.reader-thumbnail-heading h2 { margin: 0; color: var(--navy-900); font-size: 1.05rem; }
.reader-thumbnail-heading span { color: #65544a; font-size: .8rem; }
.reader-thumbnail-panel ol { display: flex; gap: 9px; overflow-x: auto; margin: 0; padding: 4px 2px 10px; list-style: none; overscroll-behavior-inline: contain; }
.reader-thumbnail-item { flex: 0 0 92px; }
.reader-thumbnail-button { display: grid; width: 100%; gap: 4px; padding: 5px; border: 1px solid #b8a98f; border-radius: 9px; color: var(--navy-900); background: #fff; font: inherit; cursor: pointer; }
.reader-thumbnail-button img { width: 100%; height: 76px; object-fit: cover; background: #eee8df; }
.reader-thumbnail-button[aria-current='page'] { outline: 3px solid var(--button-fill); outline-offset: 1px; }

@media (max-width: 1050px) {
  .story-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comic-reader-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .reader-main-panel { grid-column: 1 / -1; grid-row: 1; }
  .reader-side-panel { grid-row: 2; }
}

@media (max-width: 760px) {
  .stories-publishing-page { width: min(calc(100% - 20px), var(--content-max)); padding-block: 14px max(42px, env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .stories-hero, .manga-series-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 18px; }
  .stories-hero-copy h1, .manga-series-copy h1 { font-size: clamp(2rem, 11vw, 3.15rem); }
  .stories-hero-art { min-height: 215px; aspect-ratio: 1.35; }
  .stories-world-art { min-height: 215px; }
  .stories-toadal-art { right: 2%; bottom: 24px; width: min(34vw, 142px); }
  .stories-feature-grid, .manga-series-grid, .manga-related-grid { grid-template-columns: minmax(0, 1fr); }
  .story-panel { padding: 17px; border-radius: 16px; }
  .story-panel-heading, .story-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .story-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .story-category-card { min-height: 174px; padding: 13px; }
  .story-discovery-band { align-items: flex-start; flex-direction: column; padding: 18px; }
  .story-actions, .manga-series-actions { width: 100%; }
  .story-actions .story-button, .manga-series-actions .story-button { flex: 1 1 auto; }
  .manga-series-art, .manga-series-art > img { min-height: 230px; }
  .manga-series-art { aspect-ratio: 1.45; }
  .manga-series-facts { grid-template-columns: 1fr; }
  .manga-related-grid .story-panel p:not(.story-kicker) { min-height: auto; }
  .reader-page-heading { align-items: flex-start; flex-direction: column; }
  .comic-reader-layout { grid-template-columns: 1fr; }
  .reader-main-panel { grid-column: auto; grid-row: 1; }
  .reader-side-panel { grid-row: auto; }
  .reader-series-panel { display: none; }
  .reader-toolbar { align-items: flex-start; flex-direction: column; }
  .reader-toolbar-actions { width: 100%; }
  .reader-toolbar-actions .reader-control { flex: 1; }
  .reader-viewer { min-height: 52vh; min-height: min(64svh, 560px); padding: 10px; }
  .reader-page-figure { height: min(62svh, 620px); }
  .reader-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .reader-controls .reader-control { min-width: 0; padding-inline: 7px; font-size: .78rem; }
  .reader-page-count { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .reader-thumbnail-panel ol { margin-inline: -3px; }
  .reader-load-error { align-items: stretch; flex-direction: column; }
}

@media (max-width: 390px) {
  .story-category-grid { grid-template-columns: 1fr 1fr; }
  .story-category-card { padding: 11px; }
  .story-button { min-height: 43px; padding-inline: 13px; font-size: .9rem; }
  .reader-controls { gap: 5px; padding: 8px; }
  .reader-controls .reader-control { min-height: 39px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stories-publishing-page *, .stories-publishing-page *::before, .stories-publishing-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Local search and support discovery donor lane. */
.search-workspace,
.support-search-panel {
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgb(168 102 6 / 16%);
  border-radius: var(--radius-card);
  background: var(--cream-100);
}

.search-workspace {
  display: grid;
  gap: 18px;
}

.search-heading h2,
.support-search-panel h2 {
  margin: 0 0 8px;
}

.search-form {
  display: grid;
  gap: 12px;
}
.search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: stretch;
}

.search-controls input,
.search-controls select,
.support-search-panel input {
  min-height: 46px;
  width: 100%;
  border: 1px solid rgb(78 45 22 / 22%);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  padding: 10px 12px;
}

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-suggestions button {
  border: 1px solid rgb(168 102 6 / 18%);  border-radius: 999px;
  background: var(--cream-200);
  color: inherit;
  font: inherit;
  font-weight: 800;
  padding: 7px 11px;
  cursor: pointer;
}

.search-suggestions button:hover,
.search-suggestions button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.search-status {
  margin: 0;
  font-weight: 700;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.search-result-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgb(168 102 6 / 14%);  border-radius: 16px;
  background: rgb(255 255 255 / 76%);
}

.search-result-card h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.08rem, 2vw, 1.34rem);
}

.search-result-card p {
  margin: 0;
}

.support-search-panel input {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .search-controls,
  .search-results {
    grid-template-columns: 1fr;
  }

  .search-controls .button-link {
    justify-content: center;
  }
}

/* Owner-preview Home closure: keep the product art-led, truthful, and compact. */
body:has(.home-hero) .site-links a[href$="/search/"] {
  margin-inline-start: 5px;
  border: 1px solid rgb(255 207 91 / 76%);
  border-radius: 999px;
  background: #f1c75b;
  color: #35180f;
  font-weight: 900;
  box-shadow: 0 2px 0 rgb(31 14 8 / 24%);
}

body:has(.home-hero) .site-links a[href$="/search/"]:hover,
body:has(.home-hero) .site-links a[href$="/search/"]:focus-visible,
body:has(.home-hero) .site-links a[href$="/search/"][aria-current="page"] {
  background: #fff4cf;
  color: #35180f;
}

body:has(.home-hero) .hero-scrim {
  background:
    linear-gradient(90deg, rgb(39 17 11 / 60%) 0%, rgb(39 17 11 / 39%) 39%, rgb(39 17 11 / 7%) 75%),
    linear-gradient(0deg, rgb(39 17 11 / 21%) 0%, transparent 46%);
}

body:has(.home-hero) .home-hero__lede {
  max-width: 470px;
  margin-block: 8px 6px;
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  line-height: 1.36;
}

body:has(.home-hero) .home-hero__truth {
  max-width: 470px;
  margin: 0 0 12px;
  padding: 5px 9px;
  border-inline-start: 3px solid #f4c647;
  border-radius: 0 8px 8px 0;
  background: rgb(44 20 14 / 55%);
  color: #fff5df;
  font-size: .72rem;
  line-height: 1.32;
  text-wrap: pretty;
}

body:has(.home-hero) .home-hero__toadal {
  z-index: 2;
  filter: drop-shadow(0 14px 15px rgb(38 17 8 / 28%));
}

body:has(.home-hero) #browser-games .studio-game-card {
  border: 1px solid rgb(115 63 35 / 15%);
  background: linear-gradient(155deg, #fffdf6 0%, #f7e8cb 100%);
  box-shadow: 0 5px 12px rgb(77 42 22 / 10%);
}

body:has(.home-hero) #browser-games .studio-game-card img {
  display: block;
  border: 1px solid rgb(76 39 22 / 12%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
}

#feast-pass .home-feast-pass-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(248 207 94 / 70%);
  background:
    radial-gradient(ellipse at 94% 8%, rgb(255 219 113 / 24%), transparent 44%),
    linear-gradient(145deg, #512517 0%, #2f160f 100%);
  box-shadow: 0 10px 24px rgb(54 25 13 / 19%), inset 0 1px 0 rgb(255 255 255 / 12%);
}

#feast-pass .home-feast-pass-panel .feast-pass-copy {
  min-width: 0;
}

#feast-pass .home-feast-pass-panel .section-kicker {
  color: #f4cc64;
  letter-spacing: .12em;
}

#feast-pass .home-feast-pass-panel .section-heading,
#feast-pass .home-feast-pass-panel .section-lede {
  color: #fff5df;
}

#feast-pass .home-feast-pass-panel .section-heading {
  margin-block: 5px 7px;
  font-size: clamp(1.35rem, 1.55vw, 1.65rem);
  line-height: 1;
  text-wrap: balance;
}

#feast-pass .home-feast-pass-panel .section-lede {
  display: -webkit-box;
  margin: 0 0 9px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .7rem;
  line-height: 1.35;
}

.home-pass-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 6px;
}

.home-pass-metrics > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid rgb(255 232 175 / 23%);
  border-radius: 8px;
  background: rgb(255 249 230 / 10%);
}

.home-pass-metrics dt {
  color: #f8e9c9;
  font-size: .58rem;
  font-weight: 800;
}

.home-pass-metrics dd {
  margin: 0;
  color: #ffe17a;
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-pass-storage-status {
  min-height: 1.2em;
  margin: 0 0 7px;
  color: #e8d8be;
  font-size: .56rem;
  line-height: 1.25;
}

#feast-pass .home-feast-pass-panel .button-link {
  justify-content: center;
  border-color: #f7cc57;
  background: #f4c951;
  color: #34170e;
  font-weight: 900;
}

#feast-pass .home-feast-pass-panel .pass-emblem {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 58px;
  place-content: center;
  border: 2px solid #eac04b;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(155deg, #ffedb1, #d8a839 70%, #9d5c24);
  color: #512517;
  box-shadow: 0 4px 10px rgb(0 0 0 / 24%);
  transform: rotate(4deg);
}

#feast-pass .home-feast-pass-panel .pass-emblem span,
#feast-pass .home-feast-pass-panel .pass-emblem strong {
  color: inherit;
  font-size: .55rem;
  line-height: 1;
}

#feast-pass .home-feast-pass-panel .pass-emblem i {
  display: none;
}

#today .today-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-inline: 14px;
  border: 1px solid rgb(214 164 64 / 48%);
  background: linear-gradient(100deg, #fff6df, #f8e8c7);
  box-shadow: 0 5px 14px rgb(77 42 22 / 8%);
}

#today .today-panel > div {
  display: block;
}

#today .today-copy .section-kicker {
  color: #9f5725;
  font-weight: 900;
}

#today .today-checkin-status {
  margin: 4px 0 0;
  color: #704124;
  font-size: .67rem;
  font-weight: 700;
}

#today .today-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#today .today-actions .button-link {
  justify-content: center;
  white-space: nowrap;
}

#discovery .discovery-card {
  border: 1px solid rgb(119 72 36 / 15%);
  background: #fffaf0;
  box-shadow: 0 7px 16px rgb(77 42 22 / 9%);
}

#discovery .discovery-card--characters {
  background: linear-gradient(140deg, #fff7e6, #f4dfbd);
}

#discovery .discovery-card--world {
  background: linear-gradient(140deg, #fff9eb, #dfefd7);
}

#discovery .discovery-card--stories .stories-art--illustrated {
  position: relative;
  min-height: 82px;
  margin-block: 6px;
  overflow: hidden;
  border: 1px solid rgb(84 46 28 / 18%);
  border-radius: 10px;
  background: #4c2a1c;
  isolation: isolate;
}

#discovery .stories-art__world {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(1.12);
}

#discovery .stories-art--illustrated::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(42 19 12 / 72%), rgb(42 19 12 / 9%) 92%);
  content: "";
}

#discovery .stories-art__toadal {
  position: absolute;
  right: 2%;
  bottom: -17%;
  width: auto;
  height: 130%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgb(34 13 8 / 35%));
}

#discovery .stories-art__label {
  position: absolute;
  left: 8px;
  top: 9px;
  max-width: 62%;
  color: #fff5df;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .06em;
  line-height: 1.2;
  text-shadow: 0 1px 3px #31150d;
}

#discovery .discovery-card--stories .status-chip {
  display: inline-flex;
  margin: 0 0 5px;
}

#discovery .discovery-card--stories .home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#discovery .discovery-card--stories .button-link {
  flex: 1 1 auto;
  min-height: 27px;
  padding-inline: 6px;
}

#app .app-conversion-panel {
  border-color: rgb(255 207 91 / 72%);
  background-image:
    linear-gradient(90deg, rgb(38 16 10 / 85%) 0%, rgb(38 16 10 / 65%) 49%, rgb(38 16 10 / 5%) 100%),
    url("../images/world/candy-kingdom.webp");
}

#app .app-art img {
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 13px rgb(0 0 0 / 30%));
}

#whats-next .next-card {
  border: 1px solid rgb(164 105 38 / 18%);
  background: linear-gradient(145deg, #fffdf6, #f7ead2);
}

@media (min-width: 681px) and (max-width: 1179px) {
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout {
    min-height: 410px;
    height: 410px;
  }

  body:has(.home-hero) .home-hero__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr);
    padding: 22px clamp(18px, 4vw, 36px) 14px;
  }

  body:has(.home-hero) .home-hero__title {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
  }

  body:has(.home-hero) .home-hero__truth {
    max-width: 420px;
    font-size: .69rem;
  }

  #browser-games {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #browser-games .studio-game-card img {
    height: 130px;
  }
}

@media (max-width: 680px) {
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout {
    min-height: 425px;
    height: 425px;
  }

  body:has(.home-hero) .home-hero__layout {
    padding: 15px 15px 10px;
  }

  body:has(.home-hero) .home-hero__copy {
    position: relative;
    z-index: 3;
    max-width: min(100%, 405px);
  }

  body:has(.home-hero) .home-hero__title {
    max-width: 330px;
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  body:has(.home-hero) .home-hero__lede {
    max-width: 84%;
    font-size: .76rem;
  }

  body:has(.home-hero) .home-hero__truth {
    max-width: 84%;
    margin-bottom: 8px;
    font-size: .64rem;
  }

  body:has(.home-hero) .home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body:has(.home-hero) .home-actions .button-link {
    min-height: 34px;
    padding: 5px 6px;
    font-size: .67rem;
    line-height: 1.1;
  }

  body:has(.home-hero) .hero-benefits {
    display: none;
  }

  body:has(.home-hero) .home-hero__toadal {
    z-index: 2;
    width: 156px;
    right: 0;
    bottom: -3px;
    transform: none;
  }

  #feast-pass .home-feast-pass-panel {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 4px;
    padding: 13px;
  }

  #feast-pass .home-feast-pass-panel .pass-emblem {
    width: 36px;
    min-width: 36px;
    height: 50px;
  }

  #feast-pass .home-feast-pass-panel .section-heading {
    font-size: 1.55rem;
  }

  #feast-pass .home-feast-pass-panel .section-lede {
    -webkit-line-clamp: 3;
    font-size: .68rem;
  }

  .home-pass-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .home-pass-metrics > div {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 3px;
    padding: 5px;
  }

  .home-pass-metrics dt {
    font-size: .55rem;
  }

  .home-pass-metrics dd {
    font-size: 1rem;
  }

  #today {
    display: block !important;
    padding: 0 12px 12px;
  }

  #today .today-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  #today .today-panel > div {
    display: block;
  }

  #today .today-copy .section-kicker {
    margin: 0 0 3px;
  }

  #today .today-copy .section-heading {
    margin: 0 0 4px;
    font-size: 1.2rem;
  }

  #today .today-copy .section-lede {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: .63rem;
    line-height: 1.25;
  }

  #today .today-checkin-status {
    font-size: .59rem;
  }

  #today .today-actions {
    display: grid;
    min-width: 122px;
    align-content: center;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #today .today-actions .button-link {
    min-height: 32px;
    padding: 5px 7px;
    white-space: normal;
    font-size: .62rem;
    line-height: 1.1;
  }

  #discovery .discovery-card--stories .status-chip {
    display: inline-flex;
  }

  #discovery .discovery-card--stories .home-actions {
    display: flex;
  }

  #discovery .discovery-card--stories .stories-art--illustrated {
    min-height: 86px;
  }

  #app .app-conversion-panel {
    min-height: 290px;
  }

  #app .app-art img {
    max-height: 170px;
  }
}

@media (max-width: 360px) {
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout {
    min-height: 445px;
    height: 445px;
  }

  body:has(.home-hero) .home-hero__title {
    max-width: 285px;
    font-size: 2.2rem;
  }

  body:has(.home-hero) .home-hero__lede,
  body:has(.home-hero) .home-hero__truth {
    max-width: 82%;
  }

  body:has(.home-hero) .home-hero__toadal {
    width: 132px;
  }

  main:has(.home-hero) > [data-studio-variant="companion"] .companion-toggle,
  main:has(.home-hero) > [data-studio-variant="companion"] .companion-image {
    width: 44px;
    height: 48px;
  }

  main:has(.home-hero) > [data-studio-variant="companion"] .companion-image {
    max-height: 48px;
  }

  #today .today-panel {
    grid-template-columns: 1fr;
  }

  #today .today-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final owner-preview mobile fixes: readable game cards and a spaced Search label. */
@media (max-width: 680px) {
  .play-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .play-card.studio-game-card.module {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .play-card__art {
    min-height: 176px;
    max-height: 196px;
  }

  .play-card__art img {
    height: 184px;
    min-height: 0;
  }

  .play-card__body {
    padding: 14px 16px 16px;
  }

  .play-card__body > p:not(.play-card__eyebrow) {
    font-size: .86rem;
    line-height: 1.4;
  }

  .play-card__body .button-link {
    min-height: 44px;
  }

  .profile-hero-copy {
    padding-block-end: 170px;
  }

  .profile-hero-toadal {
    right: 3%;
    bottom: -2%;
    width: 38%;
  }
}

.search-page .wo002-detail-copy > .section-kicker {
  display: block;
  margin-block-end: 8px;
}

.search-page .wo002-detail-copy > .chip {
  display: inline-flex;
  margin-block-end: 10px;
}

/* Keep the daily check-in readable on narrow screens; do not let the copy and actions compete for one row. */
@media (max-width: 680px) {
  #today .today-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  #today .today-panel > .today-copy {
    min-width: 0;
    display: block;
  }

  #today .today-panel > .today-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: stretch;
    gap: 8px;
  }

  #today .today-copy .section-heading {
    font-size: 1.3rem;
    line-height: 1.1;
  }

  #today .today-copy .section-lede {
    display: block;
    max-width: none;
    overflow: visible;
    font-size: .78rem;
    line-height: 1.4;
  }

  #today .today-checkin-status {
    font-size: .72rem;
    line-height: 1.35;
  }

  #today .today-actions .button-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    font-size: .72rem;
    line-height: 1.15;
    text-align: center;
  }
}

@media (max-width: 360px) {
  #today .today-panel > .today-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the lower Home app-conversion copy legible over its candy-world artwork. */
#app .app-conversion-copy > .section-kicker {
  color: var(--gold-400);
}

#app .app-conversion-copy > .section-heading,
#app .app-conversion-copy > .section-lede {
  color: var(--cream-50);
  text-shadow: 0 1px 3px rgb(20 10 8 / 55%);
}

@media (max-width: 680px) {
  #app .app-conversion-copy {
    position: relative;
    z-index: 1;
    padding: 10px;
    border: 1px solid rgb(255 207 91 / 58%);
    border-radius: 12px;
    background: rgb(38 16 10 / 92%);
    box-shadow: 0 5px 14px rgb(20 10 8 / 28%);
  }

  #app .app-conversion-copy > .section-heading {
    font-size: 1.48rem;
    line-height: .98;
  }

  #app .app-conversion-copy > .section-lede {
    font-size: .68rem;
    line-height: 1.3;
  }
}

/* Owner visual closure: keep Toadal attached to the viewport, not the page-flow slot. */
.toadal-companion {
  position: fixed !important;
  z-index: 1000;
  inset-inline-end: max(14px, env(safe-area-inset-right, 0px)) !important;
  inset-block-end: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  inset-inline-start: auto !important;
  inset-block-start: auto !important;
  width: min(360px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  margin: 0 !important;
  justify-content: flex-end;
  pointer-events: none;
}

main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
  position: fixed !important;
  z-index: 1000;
  inset-inline-end: max(14px, env(safe-area-inset-right, 0px)) !important;
  inset-block-end: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  inset-inline-start: auto !important;
  inset-block-start: auto !important;
  width: min(360px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  margin: 0 !important;
  justify-content: flex-end;
  pointer-events: none;
}

/* The character remains a generous touch target; only the speech panel collapses. */
.toadal-companion :where(.companion-panel, .companion-toggle) { pointer-events: auto; }
.toadal-companion .companion-panel { width: min(236px, calc(100vw - 148px)); }
.toadal-companion .companion-toggle,
.toadal-companion .companion-image { width: 108px; height: 114px; }
.toadal-companion .companion-image { max-height: 114px; object-fit: contain; }

@media (max-width: 760px) {
  .toadal-companion,
  main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px)) !important;
    inset-block-end: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    width: min(320px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  .toadal-companion .companion-panel { width: min(196px, calc(100vw - 112px)); padding: 8px 10px; font-size: .7rem; }
  .toadal-companion .companion-toggle,
  .toadal-companion .companion-image { width: 82px; height: 88px; }
  .toadal-companion .companion-image { max-height: 88px; }
}

@media (max-width: 360px) {
  .toadal-companion,
  main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
    inset-inline-end: max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-block-end: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    width: min(292px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  .toadal-companion .companion-panel { width: min(176px, calc(100vw - 100px)); padding: 7px 9px; font-size: .67rem; }
  .toadal-companion .companion-toggle,
  .toadal-companion .companion-image { width: 72px; height: 78px; }
  .toadal-companion .companion-image { max-height: 78px; }
}

/* Bring the canonical world scene and flagship panel closer to the approved visual authority. */
body:has(.home-hero) .hero-world img {
  filter: saturate(1.1) contrast(1.02);
}

body:has(.home-hero) .home-hero {
  border-block-end: 3px solid var(--gold-400);
  box-shadow: 0 9px 24px rgb(66 36 22 / 16%);
}

body:has(.home-hero) .home-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 9px;
  border: 1px solid rgb(255 221 133 / 58%);
  border-radius: 14px;
  box-shadow: inset 0 0 28px rgb(255 226 145 / 8%);
  pointer-events: none;
}

@media (min-width: 1100px) {
  body:has(.home-hero) .home-hero__title {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.035em;
  }

  body:has(.home-hero) .home-hero__toadal {
    width: min(39vw, 460px);
  }
}

body:has(.home-hero) #app .app-conversion-panel {
  border: 2px solid rgb(255 196 51 / 78%);
  box-shadow: 0 9px 0 rgb(66 36 22 / 10%), 0 18px 34px rgb(66 36 22 / 18%);
}

body:has(.home-hero) #app .app-capture-caption {
  color: var(--cream-50);
  text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
}

body:has(.home-hero) #app .app-capture-caption span {
  color: var(--cream-50);
}

body:has(.home-hero) #app .app-conversion-copy > .section-kicker {
  display: inline-flex;
  margin: 0 0 6px;
  padding: 4px 9px;
  border: 1px solid rgb(255 214 92 / 72%);
  border-radius: 999px;
  color: var(--cream-50);
  background: var(--pink-700);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .12em;
}

/* Reserve a clear vertical pocket for the canonical hero character on small phones. */
@media (max-width: 430px) {
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout {
    min-height: 540px;
    height: 540px;
  }

  body:has(.home-hero) .home-hero__toadal {
    width: clamp(128px, 31.5vw, 136px);
    right: -8px;
    bottom: -8px;
  }
}

@media (max-width: 360px) {
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout {
    min-height: 560px;
    height: 560px;
  }

  body:has(.home-hero) .home-hero__title {
    max-width: 255px;
    font-size: 2.08rem;
  }

  body:has(.home-hero) .home-hero__lede,
  body:has(.home-hero) .home-hero__truth {
    max-width: 94%;
  }

  body:has(.home-hero) .home-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(236px, 86%);
  }

  body:has(.home-hero) .home-actions .button-link {
    min-width: 0;
    min-height: 42px;
  }

  body:has(.home-hero) .home-hero__toadal {
    width: 120px;
    right: -8px;
    bottom: -7px;
  }
}

/* One viewport shell; script-owned x/y never follows contextual reactions or page flow. */
:root {
  --toadal-safe-top: env(safe-area-inset-top, 0px);
  --toadal-safe-right: env(safe-area-inset-right, 0px);
  --toadal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --toadal-safe-left: env(safe-area-inset-left, 0px);
}

main:has(.home-hero) > #companion {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.toadal-companion,
main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
  position: fixed !important;
  z-index: 1000;
  inset: 0 auto auto 0 !important;
  width: 152px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  pointer-events: none;
  left: var(--toadal-companion-x, calc(100vw - 164px)) !important;
  top: var(--toadal-companion-y, calc(100vh - 164px)) !important;
}

.toadal-companion .companion-toggle {
  width: 142px;
  height: 142px;
  min-width: 142px;
  min-height: 142px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.toadal-companion[data-dragging="true"] .companion-toggle { cursor: grabbing; }
.toadal-companion .companion-image {
  display: block;
  width: 142px;
  height: 142px;
  max-height: 142px;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 75%;
  transition: transform 180ms ease, filter 180ms ease;
  filter: drop-shadow(0 8px 7px rgb(62 27 7 / 32%));
}

.toadal-companion[data-companion-current-reaction] .companion-image {
  transform: scale(1.045);
}

.toadal-companion .companion-panel {
  position: fixed !important;
  z-index: 1001;
  width: min(250px, calc(100vw - 24px)) !important;
  max-height: min(48vh, 360px);
  margin: 0;
}

@media (max-width: 760px) {
  .toadal-companion,
  main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
    width: 110px;
    left: var(--toadal-companion-x, calc(100vw - 122px)) !important;
    top: var(--toadal-companion-y, calc(100vh - 122px)) !important;
  }

  .toadal-companion .companion-toggle {
    width: 102px;
    height: 106px;
    min-width: 102px;
    min-height: 106px;
  }

  .toadal-companion .companion-image {
    width: 102px;
    height: 106px;
    max-height: 106px;
  }
}

@media (max-width: 360px) {
  .toadal-companion,
  main:has(.home-hero) > [data-studio-variant="companion"] .toadal-companion {
    width: 100px;
    left: var(--toadal-companion-x, calc(100vw - 112px)) !important;
    top: var(--toadal-companion-y, calc(100vh - 112px)) !important;
  }

  .toadal-companion .companion-toggle {
    width: 92px;
    height: 96px;
    min-width: 92px;
    min-height: 96px;
  }

  .toadal-companion .companion-image {
    width: 92px;
    height: 96px;
    max-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toadal-companion .companion-image {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

/* Scoped Home discovery controls; no page-wide layout or companion overrides. */
.home-discovery-section {
  max-width: var(--content-max);
  padding-block: clamp(22px, 3vw, 38px);
}

.home-discovery-heading {
  max-width: 720px;
  margin: 0 auto 18px;
  text-align: center;
}

.app-puzzle-abilities {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 38px) var(--page-gutter);
  color: var(--chocolate-950);
  background: linear-gradient(145deg, #fffdf1, #fff2c9);
}

.app-puzzle-abilities > :where(h2, p) {
  max-width: 760px;
}

.app-puzzle-abilities h2 {
  margin-block: 4px 8px;
  color: var(--navy-900);
}

.app-puzzle-ability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  margin-block-start: 18px;
}

.app-puzzle-ability-grid figure {
  min-width: 0;
  margin: 0;
  padding: clamp(10px, 2vw, 18px);
  border: 1px solid rgb(166 102 6 / 25%);
  border-radius: var(--radius-panel);
  background: #fffaf0;
  text-align: center;
}

.app-puzzle-ability-grid img {
  display: block;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
  object-fit: contain;
}

.app-puzzle-ability-grid figcaption {
  margin-block-start: 8px;
  color: var(--chocolate-800);
  font-size: .85rem;
  font-weight: 800;
}

.home-discovery-heading .section-heading {
  margin-bottom: 7px;
}

.home-discovery-heading .section-lede {
  margin: 0;
}

.home-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(12px, 2vw, 20px);
}

.home-discovery-card {
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgb(166 102 6 / 27%);
  border-radius: var(--radius-panel);
  color: var(--chocolate-950);
  background: linear-gradient(145deg, #fffdf1, #fff2c9);
  box-shadow: 0 5px 0 rgb(66 36 22 / 8%), 0 12px 24px rgb(66 36 22 / 7%);
}

.home-discovery-card__heading h3 {
  margin: 0 0 12px;
  color: var(--navy-900);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.home-discovery-card .section-kicker {
  margin: 0 0 4px;
  color: var(--pink-700);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.portal-discovery-art {
  display: grid;
  width: min(100%, 172px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  place-items: center;
}

.portal-discovery-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgb(63 35 110 / 23%));
  transform-origin: 50% 50%;
  animation: home-portal-idle 7s ease-in-out infinite;
}

.portal-discovery-button,
.golden-block-hit-button {
  min-height: 46px;
  justify-content: center;
  width: 100%;
}

.portal-discovery-button {
  gap: 12px;
}

.discovery-action-status {
  min-height: 2.5em;
  margin: 9px 0 12px;
  color: var(--chocolate-800);
  font-size: .82rem;
  line-height: 1.45;
}

.home-candy-button {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 5px 12px 5px 7px;
  border: 1px solid rgb(166 102 6 / 35%);
  border-radius: 14px;
  color: var(--navy-900);
  background: #fffdf4;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.home-candy-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgb(66 36 22 / 10%);
}

.home-candy-button img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.home-candy-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-candy-button[data-collected="true"] {
  border-color: rgb(43 121 72 / 46%);
  background: #eef9e8;
  cursor: default;
}

.home-candy-button:disabled:not([data-collected="true"]) {
  opacity: .68;
  cursor: not-allowed;
}

.golden-block-art {
  width: min(100%, 230px);
  aspect-ratio: 1;
  margin: 2px auto 12px;
  border-radius: 18px;
  background-color: #241018;
  background-image: radial-gradient(circle at 50% 35%, #ffe866, #e18b0e 55%, #8a3607 100%);
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 3px rgb(255 219 84 / 52%), 0 7px 15px rgb(78 36 8 / 20%);
}

.golden-block-art[data-asset-unavailable="true"]::after {
  content: "Golden Block";
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff6c7;
  font-weight: 950;
  text-shadow: 0 2px 5px #482307;
}

.golden-block-hit-button:disabled {
  cursor: default;
}

.home-candy-reveal[hidden],
.daily-burst-sprite[hidden] {
  display: none !important;
}

.home-candy-reveal {
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid rgb(166 102 6 / 24%);
}

.discovery-daily.today-panel {
  grid-template-columns: minmax(0, 1fr) auto;
}

.daily-chest-actions {
  min-width: 190px;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.daily-chest-button {
  width: min(100%, 210px);
  min-height: 56px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 10px 10px;
  white-space: normal;
}

.daily-chest-button:disabled {
  cursor: default;
}

.daily-chest-scene {
  position: relative;
  width: clamp(128px, 15vw, 160px);
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}

.daily-chest-sprite,
.daily-burst-sprite {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

.daily-chest-sprite {
  border-radius: 16px;
  background-color: #fff3c7;
  background-image: radial-gradient(circle at 50% 55%, #ffe37b, #f3ac35 66%, transparent 67%);
}

.daily-burst-sprite {
  z-index: 1;
}

.daily-chest-help {
  max-width: 215px;
  margin: 0;
  color: var(--chocolate-800);
  font-size: .76rem;
  line-height: 1.4;
  text-align: center;
}

.home-app-candy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr);
  align-items: center;
  gap: 3px 16px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgb(166 102 6 / 22%);
}

.home-app-candy .section-kicker {
  grid-column: 1 / -1;
}

.home-app-candy p:not(.section-kicker) {
  margin: 0;
  font-size: .84rem;
}

.home-app-candy .home-candy-button {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.home-discovery-section :where(button, a):focus-visible,
.discovery-daily :where(button, a):focus-visible {
  outline: 3px solid #244b91;
  outline-offset: 3px;
}

@keyframes home-portal-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

@media (max-width: 760px) {
  .home-discovery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-daily.today-panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .daily-chest-actions {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .daily-chest-button {
    justify-self: center;
  }

  .daily-chest-help {
    max-width: none;
  }

  .home-app-candy {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .app-puzzle-ability-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-app-candy .home-candy-button {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 420px) {
  .home-discovery-section {
    padding-inline: max(var(--page-gutter), 12px);
  }

  .home-discovery-card {
    padding: 15px;
  }

  .daily-chest-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-discovery-art img,
  .home-candy-button {
    animation: none !important;
    transition: none !important;
  }
}

/* Real mobile-app captures: reusable device frame, separate from browser-game cards. */
.app-device-frame {
  box-sizing: border-box;
  width: min(100%, 174px);
  margin-inline: auto;
  padding: 5px;
  border: 2px solid #3b2319;
  border-radius: 24px;
  background: #24140f;
  box-shadow: 0 8px 18px rgb(35 18 11 / 24%);
}

.app-device-frame img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 440 / 820;
  border-radius: 16px;
  object-fit: cover;
  filter: none;
}

.app-home-capture {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  overflow: visible;
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.app-home-capture .app-device-frame {
  width: min(100%, 96px);
  padding: 4px;
  border-radius: 17px;
}

.app-home-capture .app-device-frame img {
  border-radius: 11px;
}

.app-capture-caption {
  max-width: 19ch;
  margin: 0;
  color: var(--chocolate-800);
  font-size: .65rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.app-capture-caption span {
  font-size: .58rem;
  font-weight: 650;
}

.app-detail-capture {
  display: grid;
  justify-items: center;
  align-content: start;
}

.app-detail-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.app-detail-status .section-kicker,
.app-detail-status .chip {
  margin: 0;
}

@media (max-width: 680px) {
  .wo002-detail-copy #app-download-status {
    padding-inline-end: 90px;
  }

  .app-detail-capture figcaption {
    padding-inline-end: 96px;
    text-align: start;
  }
}

.app-detail-capture .app-device-frame {
  width: min(100%, 188px);
}

.app-capture-gallery {
  margin-block: clamp(18px, 3vw, 30px);
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid rgb(166 102 6 / 28%);
  border-radius: var(--radius-panel);
  background: linear-gradient(145deg, #fffaf0, #fff0c9);
  box-shadow: 0 6px 0 rgb(66 36 22 / 7%);
}

.app-capture-gallery-heading {
  max-width: 760px;
  margin: 0 auto clamp(16px, 2vw, 24px);
  text-align: center;
}

.app-capture-gallery-heading h2 {
  margin: 4px 0 7px;
  color: var(--navy-900);
}

.app-capture-gallery-heading p:last-child {
  margin: 0;
  color: var(--chocolate-800);
  font-size: .9rem;
}

.app-capture-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(8px, 1.4vw, 16px);
}

.app-capture-card {
  min-width: 0;
  margin: 0;
  padding: clamp(8px, 1vw, 13px);
  border: 1px solid rgb(66 36 22 / 15%);
  border-radius: 16px;
  background: #fffdf7;
}

.app-capture-card .app-device-frame {
  width: min(100%, 152px);
}

.app-capture-card figcaption {
  display: grid;
  gap: 3px;
  margin-block-start: 9px;
  color: var(--chocolate-800);
  font-size: .72rem;
  line-height: 1.35;
  text-align: center;
}

.app-capture-card figcaption strong {
  color: var(--navy-900);
  font-size: .78rem;
}

.wicked-gameplay-capture img {
  object-fit: contain;
}

@media (max-width: 900px) {
  .app-capture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #app .app-home-capture .app-device-frame img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .app-capture-card .app-device-frame {
    width: min(100%, 126px);
  }
}


/* App / Download production package — real gameplay convergence (2026-10-01).
   Scoped to the new production classes so the existing Home responsive stack is not reopened. */
#app .app-conversion-panel--production {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(250px, .92fr) minmax(330px, 1.08fr);
  align-items: stretch;
  gap: clamp(10px, 1.3vw, 18px);
  min-height: 230px;
  max-height: none;
  padding: 14px 16px 14px 18px;
  overflow: visible;
  border: 2px solid rgb(255 196 51 / 82%);
  border-radius: 18px;
  color: var(--cream-50);
  background:
    linear-gradient(90deg, rgb(38 16 10 / 94%) 0%, rgb(38 16 10 / 83%) 42%, rgb(38 16 10 / 44%) 70%, rgb(38 16 10 / 18%) 100%),
    url("../images/world/candy-kingdom.webp") 66% center / cover no-repeat;
  box-shadow: 0 9px 0 rgb(66 36 22 / 10%), 0 18px 34px rgb(66 36 22 / 18%);
}

#app .app-conversion-panel--production::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 77% 28%, rgb(255 214 76 / 20%), transparent 24%),
    radial-gradient(circle at 92% 72%, rgb(255 38 122 / 20%), transparent 30%);
}

#app .app-conversion-panel--production .app-conversion-copy {
  position: relative;
  z-index: 5;
  display: flex;
  min-width: 0;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2px 0;
}

#app .app-conversion-panel--production .section-kicker {
  display: inline-flex;
  margin: 0 0 5px;
  padding: 3px 8px;
  border: 1px solid rgb(255 214 92 / 76%);
  border-radius: 999px;
  color: var(--cream-50);
  background: var(--pink-700);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;
}

#app .app-conversion-panel--production .section-heading {
  max-width: 390px;
  margin: 0 0 5px;
  color: var(--cream-50);
  font-size: clamp(1.6rem, 2.25vw, 2.35rem);
  line-height: .94;
  text-wrap: balance;
  text-shadow: 0 2px 4px rgb(20 10 8 / 56%);
}

#app .app-conversion-panel--production .section-lede {
  display: -webkit-box;
  max-width: 430px;
  margin: 0 0 7px;
  overflow: hidden;
  color: var(--cream-50);
  font-size: .67rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-shadow: 0 1px 3px rgb(20 10 8 / 58%);
}

.app-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 7px;
  padding: 0;
  list-style: none;
}

.app-mode-list li {
  padding: 3px 7px;
  border: 1px solid rgb(255 222 128 / 48%);
  border-radius: 999px;
  color: #fff7db;
  background: rgb(33 15 11 / 62%);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.app-conversion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#app .app-conversion-panel--production .store-badge-row {
  gap: 5px;
  margin: 0;
}

#app .app-conversion-panel--production .store-badge {
  min-width: 118px;
  min-height: 35px;
  padding: 4px 8px;
  border-color: rgb(255 255 255 / 26%);
  background: rgb(12 10 10 / 86%);
  font-size: .67rem;
  opacity: .74;
}

#app .app-conversion-panel--production .store-badge small {
  font-size: .48rem;
}

#app .app-conversion-panel--production .app-more-link {
  min-height: 35px;
  padding: 6px 9px;
  border-color: rgb(255 214 92 / 70%);
  color: #fff7dc;
  background: rgb(255 255 255 / 10%);
  font-size: .62rem;
}

#app .app-conversion-panel--production .app-links-status {
  margin: 5px 0 0;
  color: rgb(255 246 219 / 78%);
  font-size: .51rem;
  line-height: 1.25;
}

.app-production-showcase {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 202px;
  align-self: center;
}

.app-phone-frame,
.app-product-phone {
  position: absolute;
  overflow: hidden;
  border: 5px solid #17110f;
  border-radius: 22px;
  background: #15110f;
  box-shadow: 0 12px 24px rgb(0 0 0 / 38%), inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.app-phone-frame {
  top: 1px;
  left: 46%;
  z-index: 4;
  width: 116px;
  height: 196px;
  transform: translateX(-50%) rotate(-3deg);
}

.app-phone-frame::before,
.app-product-phone::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 6;
  width: 38%;
  height: 7px;
  border-radius: 0 0 8px 8px;
  background: #17110f;
  transform: translateX(-50%);
}

.app-phone-frame img,
.app-product-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-phone-frame figcaption,
.app-product-phone figcaption,
.app-shot-card figcaption,
.app-product-stage-card figcaption {
  position: absolute;
  z-index: 7;
  right: 6px;
  bottom: 6px;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  color: #fff;
  background: rgb(22 13 10 / 78%);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.app-shot-label {
  position: absolute;
  top: 10px;
  left: 8px;
  z-index: 7;
  padding: 2px 5px;
  border-radius: 999px;
  color: #2a150b;
  background: #ffd351;
  box-shadow: 0 2px 7px rgb(0 0 0 / 24%);
  font-size: .43rem;
  font-weight: 1000;
  letter-spacing: .07em;
}

.app-shot-card,
.app-product-stage-card {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 3px solid rgb(255 236 172 / 88%);
  border-radius: 12px;
  background: #1b100c;
  box-shadow: 0 10px 20px rgb(0 0 0 / 32%);
}

.app-shot-card img,
.app-product-stage-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-shot-card--puzzle {
  top: 19px;
  left: 0;
  z-index: 1;
  width: 49%;
  height: 92px;
  transform: rotate(-5deg);
}

.app-shot-card--feastfall {
  bottom: 11px;
  left: 7%;
  z-index: 2;
  width: 48%;
  height: 88px;
  transform: rotate(4deg);
}
.app-product-page {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 20px 56px;
}

.app-product-hero {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(440px, 1.2fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  min-height: 520px;
  padding: clamp(24px, 4vw, 52px);
  overflow: hidden;
  border: 2px solid rgb(255 196 51 / 70%);
  border-radius: 28px;
  color: var(--cream-50);
  background:
    linear-gradient(104deg, rgb(37 15 10 / 95%) 0%, rgb(37 15 10 / 82%) 43%, rgb(37 15 10 / 32%) 100%),
    url("../images/world/candy-kingdom.webp") center / cover no-repeat;
  box-shadow: 0 12px 0 rgb(82 44 28 / 10%), 0 26px 60px rgb(82 44 28 / 22%);
}

.app-product-copy {
  position: relative;
  z-index: 4;
}

.app-product-copy .section-kicker {
  color: var(--gold-400);
}

.app-product-copy h1 {
  max-width: 580px;
  margin: 10px 0 12px;
  color: #fff9e7;
  font-size: clamp(2.65rem, 5vw, 5.25rem);
  line-height: .88;
  text-wrap: balance;
}

.app-product-copy .wo002-detail-lede {
  max-width: 590px;
  color: rgb(255 249 231 / 90%);
  font-size: clamp(.96rem, 1.4vw, 1.13rem);
  line-height: 1.5;
}

.app-product-store-row {
  margin-block-start: 18px;
}

.app-product-status {
  max-width: 560px;
  margin: 10px 0 0;
  color: rgb(255 249 231 / 72%);
  font-size: .75rem;
  line-height: 1.4;
}

.app-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.app-product-actions .button-link--secondary {
  color: #fff7db;
  border-color: rgb(255 219 109 / 70%);
  background: rgb(255 255 255 / 10%);
}

.app-product-stage {
  position: relative;
  min-height: 430px;
}

.app-product-phone {
  top: 10px;
  left: 50%;
  z-index: 5;
  width: 205px;
  height: 342px;
  transform: translateX(-50%) rotate(-2deg);
}

.app-product-stage-card--puzzle {
  top: 22px;
  left: 0;
  z-index: 2;
  width: 58%;
  aspect-ratio: 16 / 9;
  transform: rotate(-6deg);
}

.app-product-stage-card--feastfall {
  right: 0;
  bottom: 22px;
  z-index: 3;
  width: 58%;
  aspect-ratio: 16 / 9;
  transform: rotate(5deg);
}
.app-gameplay-section {
  margin-top: 26px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgb(166 102 6 / 24%);
  border-radius: 24px;
  background: linear-gradient(145deg, #fffdf6, #f8ead1);
  box-shadow: 0 10px 24px rgb(76 41 22 / 9%);
}

.app-gameplay-heading {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(300px, 1.35fr);
  gap: 8px 28px;
  align-items: end;
  margin-bottom: 18px;
}

.app-gameplay-heading .section-kicker {
  grid-column: 1;
  margin: 0;
}

.app-gameplay-heading h2 {
  grid-column: 1;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: .95;
}

.app-gameplay-heading p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.app-gameplay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.app-gameplay-card {
  overflow: hidden;
  border: 1px solid rgb(155 93 23 / 22%);
  border-radius: 18px;
  background: #fffaf0;
}

.app-gameplay-card-art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgb(155 93 23 / 18%);
  background: #21120d;
}

.app-gameplay-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-gameplay-card--arcade .app-gameplay-card-art img {
  object-position: center 63%;
}

.app-gameplay-card > div:last-child {
  padding: 14px;
}

.app-gameplay-card h3 {
  margin: 8px 0 5px;
  color: var(--ink);
  font-size: 1.25rem;
}

.app-gameplay-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .83rem;
  line-height: 1.42;
}

.app-product-facts {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .app-product-hero {
    grid-template-columns: minmax(0, .88fr) minmax(340px, 1.12fr);
    padding: 28px;
  }
}

@media (max-width: 760px) {
  #app .app-conversion-panel--production {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 444px;
    max-height: none;
    padding: 14px;
    background-position: 66% center;
  }

  #app .app-conversion-panel--production .app-conversion-copy {
    padding: 10px 11px;
    border: 1px solid rgb(255 207 91 / 58%);
    border-radius: 13px;
    background: rgb(38 16 10 / 91%);
    box-shadow: 0 5px 14px rgb(20 10 8 / 28%);
  }

  #app .app-conversion-panel--production .section-heading {
    font-size: 1.6rem;
  }

  #app .app-conversion-panel--production .section-lede {
    -webkit-line-clamp: 3;
  }

  #app .app-conversion-panel--production .app-links-status {
    display: block;
  }

  .app-production-showcase {
    height: 196px;
  }

  .app-phone-frame {
    left: 49%;
    width: 110px;
    height: 184px;
  }

  .app-shot-card--puzzle,
  .app-shot-card--feastfall {
    width: 48%;
    height: 82px;
  }
.app-product-page {
    width: min(100% - 24px, 680px);
    padding-block: 14px 42px;
  }

  .app-product-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .app-product-copy h1 {
    font-size: clamp(2.45rem, 12vw, 4rem);
  }

  .app-product-stage {
    min-height: 338px;
  }

  .app-product-phone {
    width: 164px;
    height: 274px;
  }

  .app-product-stage-card--puzzle,
  .app-product-stage-card--feastfall {
    width: 57%;
  }
.app-gameplay-heading {
    grid-template-columns: 1fr;
  }

  .app-gameplay-heading .section-kicker,
  .app-gameplay-heading h2,
  .app-gameplay-heading p {
    grid-column: 1;
    grid-row: auto;
  }

  .app-gameplay-grid {
    grid-template-columns: 1fr;
  }

  .app-gameplay-card {
    display: grid;
    grid-template-columns: minmax(120px, 42%) 1fr;
  }

  .app-gameplay-card-art {
    height: 100%;
    min-height: 150px;
    aspect-ratio: auto;
    border-right: 1px solid rgb(155 93 23 / 18%);
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  #app .app-conversion-panel--production {
    min-height: 474px;
  }

  #app .app-conversion-panel--production .store-badge {
    min-width: 0;
    flex: 1 1 112px;
  }

  #app .app-conversion-panel--production .app-more-link {
    width: 100%;
    justify-content: center;
  }

  .app-mode-list {
    margin-bottom: 6px;
  }

  .app-product-store-row .store-badge {
    flex: 1 1 130px;
  }

  .app-product-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-product-actions .button-link {
    width: 100%;
    justify-content: center;
  }

  .app-product-stage {
    min-height: 312px;
  }

  .app-product-phone {
    width: 148px;
    height: 248px;
  }

  .app-product-stage-card--puzzle {
    top: 18px;
    width: 59%;
  }

  .app-product-stage-card--feastfall {
    bottom: 18px;
    width: 59%;
  }
.app-gameplay-section {
    padding: 16px;
  }

  .app-gameplay-card {
    grid-template-columns: 1fr;
  }

  .app-gameplay-card-art {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid rgb(155 93 23 / 18%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-phone-frame,
  .app-shot-card,
  .app-product-phone,
  .app-product-stage-card {
    transform: none !important;
  }
}

/* App product label separation. */
.app-product-copy > .section-kicker {
  display: block;
  margin: 0 0 8px;
}

.app-product-copy > .chip {
  display: inline-flex;
  margin: 0 0 6px;
}

/* Owner visual convergence pass: denser portal rhythm using only approved art. */
@media (min-width: 1180px) {
  body:has(.home-hero) .site-header {
    border-bottom: 2px solid rgb(255 196 51 / 72%);
    box-shadow: 0 5px 16px rgb(35 14 8 / 18%);
  }

  body:has(.home-hero) .site-nav {
    min-height: 60px;
    padding-inline: clamp(18px, 2.5vw, 44px);
  }

  body:has(.home-hero) .site-brand {
    font-size: clamp(1.3rem, 1.65vw, 1.6rem);
    letter-spacing: -.055em;
  }

  body:has(.home-hero) .site-links a {
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
  }

  body:has(.home-hero) .site-links a:hover,
  body:has(.home-hero) .site-links a:focus-visible {
    border-color: rgb(255 220 131 / 58%);
    color: #fff1cd;
    background: rgb(255 255 255 / 9%);
  }

  main:has(.home-hero) {
    width: min(calc(100% - 48px), 1880px);
  }

  body:has(.home-hero) .home-hero {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }

  #today .discovery-daily.today-panel {
    min-height: 132px;
    padding: 10px 18px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: none;
  }

  #today .home-section-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  #today .today-copy .section-lede {
    display: -webkit-box;
    max-width: 68ch;
    margin: 5px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .72rem;
    line-height: 1.35;
  }

  #today .today-checkin-status {
    margin-top: 4px;
    font-size: .62rem;
  }

  #today .today-panel .today-actions.daily-chest-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    gap: 5px 12px;
  }

  #today .today-panel .daily-chest-actions .daily-chest-button {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 78px;
    min-height: 88px;
    padding: 4px;
    font-size: .62rem;
  }

  #today .today-panel .daily-chest-actions .daily-chest-scene {
    width: 62px;
  }

  #today .today-panel .daily-chest-actions .daily-chest-help {
    grid-column: 2;
    max-width: none;
    font-size: .65rem;
    line-height: 1.3;
    text-align: left;
  }

  #today .today-panel .daily-chest-actions > a.button-link {
    grid-column: 2;
    justify-self: start;
  }

  .home-discovery-section {
    padding-block: 20px;
  }

  .home-discovery-heading {
    display: grid;
    max-width: 1080px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: end;
    gap: 0 20px;
    margin-bottom: 10px;
    text-align: left;
  }

  .home-discovery-heading .section-kicker {
    grid-column: 1 / -1;
    margin-bottom: 3px;
  }

  .home-discovery-heading .section-heading,
  .home-discovery-heading .section-lede {
    margin-block: 0;
  }

  .home-discovery-heading .section-lede {
    max-width: none;
    font-size: .8rem;
    line-height: 1.4;
  }

  .home-discovery-grid {
    gap: 12px;
  }

  .home-discovery-card {
    padding: 16px;
  }

  .home-discovery-card__heading h3 {
    margin-bottom: 7px;
    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  }

  .portal-discovery-art {
    width: min(100%, 124px);
    margin-bottom: 8px;
  }

  .golden-block-art {
    width: min(100%, 140px);
    margin-block: 2px 8px;
  }

  .discovery-action-status {
    min-height: 2em;
    margin-block: 7px 9px;
    font-size: .74rem;
    line-height: 1.35;
  }

  .home-candy-button {
    min-height: 48px;
  }
}

@media (max-width: 760px) {
  .home-discovery-section {
    padding-block: 18px;
  }

  .home-discovery-heading {
    margin-bottom: 12px;
  }

  .home-discovery-card {
    padding: 14px;
  }

  .portal-discovery-art {
    width: min(100%, 138px);
    margin-bottom: 8px;
  }

  .golden-block-art {
    width: min(100%, 168px);
    margin-block: 2px 8px;
  }

  .discovery-action-status {
    min-height: 0;
    margin-block: 7px 9px;
    font-size: .76rem;
    line-height: 1.35;
  }
}

@media (max-width: 430px) {
  #today .daily-chest-scene {
    width: min(100px, 28vw);
  }

  #today .daily-chest-actions {
    gap: 5px;
  }

  #today .daily-chest-button {
    padding: 5px;
  }

  .home-discovery-card {
    padding: 12px;
  }

  .portal-discovery-art {
    width: min(100%, 124px);
  }

  .golden-block-art {
    width: min(100%, 146px);
  }
}

/* Owner acceptance polish: approved world framing and compact illustrated lanes. */
body:has(.home-hero) {
  background:
    linear-gradient(180deg, rgb(47 20 16 / 8%), rgb(47 20 16 / 40%)),
    url("../images/world/candy-kingdom.webp") center / cover fixed;
}

body:has(.home-hero) main { background: transparent; }

body:has(.home-hero) .section-heading,
body:has(.home-hero) .discovery-card h3,
body:has(.home-hero) .home-discovery-card__heading h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

body:has(.home-hero) .hero-scrim {
  background: linear-gradient(90deg, rgb(40 17 16 / 70%), rgb(40 17 16 / 24%) 44%, transparent 68%);
}

body:has(.home-hero) #interactive-discovery,
body:has(.home-hero) #discovery {
  background: var(--cream-100);
  border: 1px solid rgb(255 215 122 / 85%);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgb(35 14 8 / 20%);
}

body:has(.home-hero) .home-discovery-card { background: linear-gradient(135deg, #fffef8, #fff1ce); }
body:has(.home-hero) .site-footer { margin-top: 18px; border-top: 1px solid rgb(255 204 95 / 65%); }

@media (min-width: 1180px) {
  main:has(.home-hero) {
    width: min(calc(100% - 48px), 1640px);
    column-gap: 14px;
    row-gap: 12px;
  }

  body:has(.home-hero) .home-hero { margin-bottom: 2px; }
  body:has(.home-hero) #browser-games-intro {
    padding: 14px 0 0;
    border: 1px solid rgb(255 215 122 / 85%);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--cream-100);
  }

  body:has(.home-hero) #browser-games {
    padding: 8px 14px 14px;
    gap: 10px !important;
    border: 1px solid rgb(255 215 122 / 85%);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: var(--cream-100);
    box-shadow: 0 6px 18px rgb(35 14 8 / 20%);
  }

  body:has(.home-hero) #browser-games .studio-game-card { background: #fffdf6; border-color: rgb(174 109 41 / 25%); }
  body:has(.home-hero) #browser-games .studio-game-card img { height: clamp(106px, 8.6vw, 146px); }
  body:has(.home-hero) #browser-games .studio-game-card h3 { font-size: .95rem; }
  body:has(.home-hero) #browser-games .studio-game-card p { font-size: .68rem; line-height: 1.3; }

  body:has(.home-hero) #feast-pass {
    padding: 0;
    border: 1px solid rgb(255 215 122 / 85%);
    border-radius: 20px;
    background: var(--cream-100);
    box-shadow: 0 6px 18px rgb(35 14 8 / 20%);
  }

  #feast-pass .home-feast-pass-panel {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 20px;
    color: var(--chocolate-800);
    border: 0;
    border-radius: 20px;
    background: linear-gradient(145deg, #fffdf6, #ffedba);
    box-shadow: none;
  }

  #feast-pass .home-feast-pass-panel :is(.section-kicker, .section-lede, .home-pass-storage-status, dt) { color: var(--chocolate-800); }
  #feast-pass .home-feast-pass-panel .section-heading { color: var(--navy-900); }
  #feast-pass .home-pass-metrics > div { background: rgb(255 255 255 / 70%); border-color: #e3c689; }
  #feast-pass .home-pass-metrics dd { color: #925505; }

  body:has(.home-hero) #today { padding: 0; }
  #today .today-panel { border-radius: 18px; }
  #today .today-panel .today-actions.daily-chest-actions { grid-template-columns: 112px minmax(0, 1fr); }
  #today .today-panel .daily-chest-actions .daily-chest-button {
    min-height: 94px;
    min-width: 0;
    width: 112px;
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr);
    white-space: normal;
    font-size: .72rem;
  }
  #today .daily-chest-button [data-daily-claim-label] { min-width: 0; width: 100%; line-height: 1.2; }
  #today .today-panel .daily-chest-actions .daily-chest-scene { width: 62px; }

  body:has(.home-hero) #interactive-discovery { padding: 0 18px; }
  .home-discovery-section { padding-block: 16px; }
  .home-discovery-heading { max-width: none; margin-bottom: 12px; }
  .home-discovery-heading .section-heading { font-size: 1.8rem; }
  .home-discovery-heading .section-lede { font-size: .78rem; }
  .home-discovery-grid { gap: 12px; }

  .home-discovery-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    align-content: start;
    gap: 6px 16px;
    min-height: 0;
    padding: 14px;
  }

  .home-discovery-card__heading { grid-column: 1; grid-row: 1; }
  .home-discovery-card__heading h3 { margin: 0; font-size: 1.2rem; }
  .home-discovery-card :is(.portal-discovery-art, .golden-block-art) {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 126px;
    margin: 0;
    align-self: center;
  }
  .home-discovery-card :is(.portal-discovery-button, .golden-block-hit-button) { grid-column: 1; grid-row: 2; }
  .home-discovery-card .discovery-action-status { grid-column: 1; grid-row: 3; margin: 0; min-height: 0; font-size: .73rem; }
  .home-discovery-card :is(.home-candy-button, .home-candy-reveal) { grid-column: 1 / -1; }
  .home-discovery-card .home-candy-button { min-height: 48px; }

  body:has(.home-hero) #discovery { padding: 14px; }
  #discovery .discovery-heading { min-height: 0; margin-bottom: 12px; }
  #discovery .discovery-heading .section-heading { font-size: 1.6rem; }
  #discovery .discovery-card { min-height: 242px; max-height: none; padding: 12px; }
  #discovery .discovery-card h3 { font-size: 1.15rem; }
  #discovery .discovery-card > p:not(.section-kicker) { font-size: .7rem; }
  #discovery .character-figure img { max-height: 74px; }
  #discovery .character-figure figcaption { font-size: .66rem; }
  #discovery .world-art { height: 94px; max-height: 94px; }
  #discovery .button-link { min-height: 32px; font-size: .69rem; }
  #discovery .discovery-card--stories .stories-art--illustrated { min-height: 94px; }

  body:has(.home-hero) #app { padding: 0; }
  body:has(.home-hero) #whats-next { padding: 0; }
  #whats-next .home-section-inner { min-height: 100%; max-height: none; }
}

@media (max-width: 1179px) {
  body:has(.home-hero) #browser-games-intro,
  body:has(.home-hero) #browser-games { background: var(--cream-100); }
  body:has(.home-hero) #browser-games-intro { border-radius: 18px 18px 0 0; }
  body:has(.home-hero) #browser-games { border-radius: 0 0 18px 18px; margin-bottom: 14px; }
  body:has(.home-hero) #interactive-discovery,
  body:has(.home-hero) #discovery { margin-block: 14px; }
  body:has(.home-hero) #discovery { padding: 16px 0; }
}

@media (max-width: 960px) {
  /* The automatic companion fits between the brand and Menu; content stays free. */
  .toadal-companion[data-mobile-docked="true"] {
    width: var(--toadal-dock-width, 102px);
    height: 52px;
    align-items: center;
  }
  .toadal-companion[data-mobile-docked="true"] .companion-toggle {
    width: var(--toadal-dock-width, 102px);
    min-width: 0;
    height: 52px;
    min-height: 52px;
  }
  .toadal-companion[data-mobile-docked="true"] .companion-image {
    width: 52px;
    height: 52px;
    max-height: 52px;
    margin-inline: auto;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 28%));
    transform: none;
  }
  /* Keep the Profile mascot artwork inside its measured, accessible header target. */
  body:has([data-progression-page="profile"]) .toadal-companion[data-mobile-docked="true"][data-minimized="true"] .companion-image {
    width: min(52px, var(--toadal-dock-width, 52px));
  }
  body:has(.home-hero) .hero-scrim { background: linear-gradient(180deg, rgb(40 17 16 / 65%), rgb(40 17 16 / 34%) 63%, transparent); }
}

@media (min-width: 361px) and (max-width: 430px) {
  /* Remove excess sky while retaining the separate hero-character pocket. */
  body:has(.home-hero) .home-hero,
  body:has(.home-hero) .home-hero__layout { min-height: 480px; height: 480px; }
  body:has(.home-hero) .home-hero__layout { padding-block: 20px 86px; }
}
/* Tab-local appearance preference; never overrides OS reduced-motion protection. */
html[data-site-reduced-motion] *, html[data-site-reduced-motion] *::before,
html[data-site-reduced-motion] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
:is(a, [role='button']).character-card { color: inherit; text-decoration: none; cursor: pointer; }
:is(a, [role='button']).character-card:focus-visible { outline: 3px solid #126fd6; outline-offset: 4px; }
:is(a, [role='button']).character-card:hover { box-shadow: 0 5px 22px #45356426; }
/* Native whole-object navigation retains each approved card's existing paint. */
a.owner-object-link { color: inherit; text-decoration: none; cursor: pointer; }
a.owner-object-link:focus-visible { outline: 3px solid #126fd6; outline-offset: 4px; }
a.owner-object-link:hover { outline: 2px solid #126fd680; outline-offset: 2px; }
/* TOADAL FEAST staging completion: shared premium portal composition. */
:root { --portal-display: Georgia, 'Times New Roman', serif; --portal-line: #e3c78b; --portal-depth: 0 3px 0 rgb(91 42 27 / 9%), 0 12px 28px rgb(30 16 13 / 10%); }
body .site-header { background: linear-gradient(180deg,#422416,#1e100d); border-bottom: 2px solid var(--gold-500); }
body .site-brand { color:var(--cream-100); letter-spacing:-.045em; text-shadow:0 2px #1e100d; }
body .site-links a { border:1px solid transparent; border-radius:999px; transition:background .16s,color .16s; }
body .site-links a[aria-current='page'] { background:var(--cream-100); border-color:var(--gold-500); color:var(--pink-700); box-shadow:0 2px 0 rgb(0 0 0 / 15%); }
body .site-links a[href$='/search/'] { background:var(--gold-400); color:var(--chocolate-950); }
body .site-links a:focus-visible { outline:3px solid var(--gold-400); outline-offset:3px; }
body .site-footer { background:linear-gradient(145deg,#422416,#1e100d); border-top:2px solid var(--gold-500); }
body .site-footer-inner { align-items:start; padding-block:24px; gap:18px 32px; }
body .site-footer-links { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px 16px; width:100%; }
body .site-footer-links a { padding:7px 0; min-height:36px; color:var(--cream-200); font-size:.8rem; }
body .site-footer-links a:hover { color:var(--gold-400); }
body:has(.wo002-detail-page,.wo002-play-page,.stories-publishing-page,.app-product-page) { background:linear-gradient(135deg,#fffdf6,#fff6df); }
:is(.wo002-detail-page,.wo002-play-page,.stories-publishing-page,.app-product-page) h1,
:is(.wo002-detail-page,.wo002-play-page,.stories-publishing-page,.app-product-page) h2,
:is(.wo002-detail-page,.wo002-play-page,.stories-publishing-page,.app-product-page) h3 { font-family:var(--portal-display); letter-spacing:-.035em; }
body .wo002-detail-hero, body .stories-hero { border-color:var(--portal-line); box-shadow:var(--portal-depth); }
body .wo002-detail-hero h1, body .stories-hero-copy h1 { max-width:17ch; font-size:clamp(2.35rem,4.7vw,4.5rem); text-wrap:balance; }
body .wo002-detail-hero :is(.section-kicker,.story-kicker), body .stories-hero-copy .story-kicker { display:block; margin-bottom:8px; }
body .wo002-detail-hero .section-kicker { color:var(--pink-700); }
body .discovery-world .wo002-detail-hero .section-kicker { color:var(--gold-400); }
:is(.wo002-detail-page,.wo002-play-page,.stories-publishing-page) .button-link--primary { color:white; border:1px solid var(--button-border); background: var(--button-background); box-shadow:inset 0 1px rgb(255 255 255 / 40%),0 3px 0 rgb(16 22 91 / 20%); }
:is(.wo002-detail-page,.wo002-play-page,.stories-publishing-page) .button-link--secondary { border:1px solid var(--portal-line); background:var(--cream-50); color:var(--navy-900); }
:is(.wo002-detail-page,.wo002-play-page) .wo002-section,
.stories-publishing-page .story-panel { border-color:var(--portal-line); background:linear-gradient(145deg,#fffdf6,#fff9e9); box-shadow:var(--portal-depth); }
body .wo002-play-hero.portal-play-hero { position:relative; isolation:isolate; background:#422416; border-color:var(--gold-500); }
body .wo002-play-hero.portal-play-hero::after { content:none; }
.portal-play-hero .portal-play-environment { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }
.portal-play-hero::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgb(30 16 13 / 82%),rgb(30 16 13 / 12%) 70%); }
.portal-play-hero .portal-play-character { position:absolute; z-index:-1; left:51%; bottom:0; width:28%; height:90%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 12px rgb(30 16 13 / 30%)); }
.portal-play-hero .wo002-play-hero__copy { max-width:520px; }
.portal-play-hero .wo002-play-proof { position:relative; margin-left:auto; }
body .wo002-play-hero h1 { font-family:var(--portal-display); }
.portal-section-nav { display:flex; flex-wrap:wrap; gap:8px; padding:10px; margin:16px 0 20px; border:1px solid var(--portal-line); border-radius:16px; background:var(--cream-50); box-shadow:0 3px 0 rgb(91 42 27 / 6%); }
.portal-section-nav :is(a,button) { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid #ead9b5; border-radius:999px; color:var(--navy-900); background:#fff9e9; font-size:.85rem; font-weight:800; text-decoration:none; }
.portal-section-nav :is(a,button):hover,.portal-section-nav :is(a,button):focus-visible { color:var(--button-fill); border-color:var(--button-fill); }
.portal-section-nav :is(a,button):focus-visible,.portal-journey-card:focus-visible { outline:3px solid var(--button-fill); outline-offset:3px; }
.portal-journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.portal-journey-card { display:flex; flex-direction:column; min-width:0; padding:16px; border:1px solid var(--portal-line); border-radius:18px; color:var(--chocolate-800); background:linear-gradient(145deg,#fffdf6,#fff0cf); box-shadow:var(--portal-depth); text-decoration:none; }
.portal-journey-card:hover { border-color:var(--gold-600); }
.portal-journey-card .portal-journey-card-art { width:100%; height:164px; object-fit:contain; margin:0 auto 14px; border-radius:12px; background:rgb(255 255 255 / 55%); }
.portal-journey-card .portal-journey-icon { width:72px; height:72px; object-fit:contain; margin-bottom:10px; }
.portal-journey-card h3 { font-size:1.4rem; margin:0 0 8px; }
.portal-journey-card p { font-size:.9rem; line-height:1.5; }
.portal-journey-card .portal-card-action { margin-top:auto; color:var(--button-fill); font-size:.85rem; font-weight:800; }
.portal-app-feature { display:grid; grid-template-columns:minmax(180px,.45fr) minmax(0,1fr); gap:28px; align-items:center; padding:24px; margin-top:22px; border:1px solid var(--gold-600); border-radius:21px; background:linear-gradient(120deg,#422416,#1e100d); color:var(--cream-100); box-shadow:var(--portal-depth); }
.portal-app-feature .portal-app-art { width:100%; height:auto; padding:10px; margin:0; border:1px solid rgb(255 212 91 / 45%); border-radius:16px; background:rgb(255 249 233 / 8%); }
.portal-app-feature .portal-app-art img { display:block; width:100%; height:180px; object-fit:contain; }
.portal-app-feature :is(h2,h3) { color:var(--cream-100); font-family:var(--portal-display); }
.portal-app-feature .section-kicker { color:var(--gold-400); }
.portal-app-feature p { color:var(--cream-200); }
.portal-context-art { display:grid; justify-items:center; background:radial-gradient(ellipse at 50% 55%,#ffedaf,transparent 68%),#fffdf6; }
body .portal-context-art img { max-height:290px; width:auto; max-width:100%; object-fit:contain; padding:8px; }
.portal-context-art figcaption { justify-self:start; }
body .stories-hero-art .stories-toadal-art { width:32%; height:75%; max-height:310px; aspect-ratio:auto; object-fit:contain; bottom:24px; }
.progression-page .portal-pass-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(200px,.6fr); gap:28px; align-items:center; }
.portal-pass-copy { min-width:0; }
.portal-pass-art { position:relative; margin:0; min-width:0; display:grid; justify-items:center; align-items:center; min-height:250px; }
.portal-pass-art .portal-pass-character { height:260px; width:100%; object-fit:contain; filter:drop-shadow(0 8px 6px rgb(168 102 6 / 15%)); }
.portal-pass-art [class*='portal-pass-candy--'] { position:absolute; width:40px; height:40px; object-fit:contain; }
.portal-pass-candy--blue { left:7%; top:20%; transform:rotate(-18deg); }
.portal-pass-candy--green { right:3%; top:8%; transform:rotate(12deg); }
.portal-pass-candy--purple { right:4%; bottom:20%; transform:rotate(-8deg); }
.portal-pass-art figcaption { font-size:.75rem; text-align:center; color:var(--chocolate-800); }
.portal-daily-art { width:100px; height:100px; float:right; margin:0 0 8px 12px; }
.portal-daily-art img { width:100px; height:100px; object-fit:cover; object-position:50% 0; }
body:has(.home-hero) #browser-games .studio-game-card { display:flex; flex-direction:column; gap:7px; height:auto; background:linear-gradient(145deg,#fffdf6,#fff9e9); border:1px solid var(--portal-line); box-shadow:0 3px 0 rgb(91 42 27 / 8%); }
body:has(.home-hero) #browser-games .studio-game-card h3 { margin:0; }
body:has(.home-hero) #browser-games .studio-game-card p { display:block; margin:0; overflow:visible; font-size:.78rem; line-height:1.4; }
body:has(.home-hero) #browser-games .studio-game-card .chip { margin-top:auto; align-self:flex-start; }
body:has(.home-hero) #browser-games .studio-game-card .home-game-action { display:flex; align-items:center; justify-content:center; min-height:36px; margin-top:3px; padding:7px 9px; border-radius:999px; color:white; background: var(--button-background); font-size:.73rem; font-weight:800; text-align:center; box-shadow:0 2px 0 rgb(16 22 91 / 20%); }
body:has(.home-hero) #browser-games a.owner-object-link:hover { outline-color:var(--gold-600); }
body:has(.home-hero) #browser-games a.owner-object-link:focus-visible { outline-color:var(--button-fill); }
@media(min-width:1180px) { body:has(.home-hero) #browser-games { align-self:start; } body:has(.home-hero) #browser-games .studio-game-card { min-height:278px; } }
@media(max-width:1023px) { body .site-footer-links { grid-template-columns:repeat(4,minmax(0,1fr)); } .portal-play-hero .wo002-play-hero__copy { max-width:60%; } .portal-play-hero .portal-play-character { left:auto; right:0; width:38%; opacity:.9; } }
@media(max-width:760px) {
 body .site-footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 14px; }
 body .site-footer-links a { min-height:44px; padding:10px 0; }
 .portal-journey-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 .portal-journey-card { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; padding:14px; }
 .portal-journey-card .portal-journey-card-art { grid-column:1; grid-row:1 / span 3; width:88px; height:110px; margin:0; }
 .portal-journey-card .portal-journey-icon { grid-column:1; grid-row:1 / span 3; width:64px; height:64px; }
 .portal-journey-card h3 { font-size:1.3rem; }
 .portal-journey-card p { font-size:.85rem; }
 .portal-app-feature { grid-template-columns:100px minmax(0,1fr); gap:16px; padding:18px; }
 .portal-app-feature .portal-app-art { height:180px; padding:3px; }
 .portal-app-feature h2 { font-size:1.65rem; }
 .portal-app-feature p { font-size:.85rem; }
 .progression-page .portal-pass-hero { grid-template-columns:minmax(0,1fr); gap:12px; }
 .portal-pass-art { min-height:170px; }
 .portal-pass-art .portal-pass-character { height:180px; }
 .portal-pass-art [class*='portal-pass-candy--'] { width:32px; height:32px; }
 .portal-pass-candy--blue { left:20%; } .portal-pass-candy--green { right:18%; } .portal-pass-candy--purple { right:20%; }
 .portal-play-hero .wo002-play-hero__copy { max-width:100%; padding-bottom:155px; }
 .portal-play-hero .portal-play-character { height:165px; width:50%; right:4%; bottom:0; opacity:1; }
 .portal-play-hero::before { background:linear-gradient(180deg,rgb(30 16 13 / 85%),rgb(30 16 13 / 25%)); }
 .portal-section-nav { gap:6px; padding:8px; }
 .portal-section-nav :is(a,button) { flex:1 1 42%; padding:8px; font-size:.8rem; }
 body .wo002-detail-hero h1, body .stories-hero-copy h1 { font-size:clamp(2.35rem,10vw,3.4rem); }
 body .portal-context-art img { height:220px; }
 body:has(.home-hero) #browser-games .studio-game-card .home-game-action { min-height:44px; font-size:.75rem; }
}
@media(max-width:380px) { .portal-app-feature { grid-template-columns:minmax(0,1fr); } .portal-app-feature .portal-app-art { height:150px; } }
@media(prefers-reduced-motion:reduce) { body .site-links a { transition:none; } }

/* A hidden companion keeps its position preference but releases every hit area. */
.toadal-companion[data-companion-hidden="true"], .toadal-companion[hidden] { display: none !important; }
.companion-restore[hidden] { display: none !important; }
.companion-hide, .companion-restore { min-height: 36px; border: 1px solid currentColor; border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.companion-hide { margin-top: 8px; color: #5d3626; background: #fff9e9; }
.companion-restore { color: #fff4d7; background: transparent; align-self: start; }
.companion-hide:focus-visible, .companion-restore:focus-visible { outline: 3px solid var(--gold-400, #ffcf68); outline-offset: 3px; }
/* Reserve a safe control rail above the iframe; no control overlays gameplay. */
.player-fullscreen-rail[hidden] { display: none !important; }
.wo002-player-frame-wrap:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; min-height: 0; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom, 0px); }
.wo002-player-frame-wrap:fullscreen .player-fullscreen-rail { position: relative; order: -1; z-index: 3; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; box-sizing: border-box; padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 4px max(8px, env(safe-area-inset-left, 0px)); background: #211716; }
.wo002-player-frame-wrap:fullscreen .player-fullscreen-exit { position: static; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 0; line-height: 1; box-shadow: none; }
.wo002-player-frame-wrap:fullscreen .wo002-player-frame { flex: 1 1 0; width: 100%; height: auto; min-height: 0; }
@media(max-width:760px) { .companion-hide,.companion-restore { min-height:44px; } }
.portal-art-caption { padding:10px 14px; font-size:.82rem; line-height:1.5; }
.portal-art-caption h3 { margin-bottom:4px; }
.portal-app-stage-caption { display:block; padding:10px 12px; font-size:.78rem; line-height:1.4; }
.app-gameplay-card-art { display:block; }
.media-character-card { color:inherit; text-decoration:none; }
.media-character-card h3 { margin:0; font-size:1.15rem; }
.story-discovery-band:has(> .portal-journey-grid) { display:block; }
.story-discovery-band > .portal-journey-grid { width:100%; }
/* Final route polish verified against the actual Studio export. */
[data-editorial-news] > .progression-section { padding:22px; margin-block:16px; border:1px solid var(--portal-line); border-radius:18px; background:linear-gradient(145deg,#fffdf6,#fff9e9); box-shadow:var(--portal-depth); }
[data-editorial-news] > .progression-section h2 { font-size:clamp(1.55rem,2.5vw,2.1rem); margin:4px 0 12px; }
[data-editorial-news] > .progression-section .section-kicker { font-size:.7rem; color:var(--pink-700); letter-spacing:.13em; margin-bottom:7px; }
[data-editorial-news] label[for='manifest-news-query'] { display:block; margin-bottom:7px; font-size:.85rem; font-weight:800; }
[data-editorial-news] [data-news-query] { width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--portal-line); border-radius:12px; color:var(--navy-900); background:white; }
[data-editorial-news] [data-news-filters] { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
[data-editorial-news] [data-news-filters] button { min-height:44px; border:1px solid var(--portal-line); background:var(--cream-50); }
[data-editorial-news] [data-news-filters] button[aria-pressed='true'] { background:var(--navy-900); color:white; }
[data-editorial-news] [data-news-query]:focus-visible { outline:3px solid var(--button-fill); outline-offset:3px; }
[data-editorial-news] > .progression-nav { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
[data-editorial-news] > .progression-nav a { min-height:44px; padding:10px 16px; border:1px solid var(--portal-line); border-radius:999px; font-size:.85rem; font-weight:800; text-decoration:none; background:var(--cream-50); }
@media(max-width:760px) {
 .portal-play-hero .wo002-play-hero__copy { padding-bottom:0; }
 .portal-play-hero .portal-play-character { position:relative; grid-column:1; grid-row:2; justify-self:center; left:auto; right:auto; top:auto; bottom:auto; width:65%; height:170px; z-index:0; }
 .portal-play-hero .wo002-play-proof { grid-column:1; grid-row:3; margin-top:0; }
 [data-editorial-news] > .progression-section { padding:16px; }
}

.portal-section-nav [data-media-filter][aria-pressed='true'] { background:var(--navy-900); border-color:var(--navy-900); color:white; }

/* Mobile interaction closure — 2026-10-05. */
.companion-panel {
  position: relative;
}

.companion-hide {
  position: absolute;
  z-index: 2;
  inset-block-start: 1px;
  inset-inline-end: 1px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--chocolate-800);
  background: transparent;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.companion-hide::before {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(66 36 22 / 18%);
  border-radius: 999px;
  background: rgb(255 253 246 / 90%);
  content: "×";
  font: 800 20px/1 var(--font-body);
}

.companion-hide:hover::before,
.companion-hide:focus-visible::before {
  color: var(--cream-50);
  background: var(--chocolate-800);
}

.companion-message {
  padding-inline-end: 38px;
}

.toadal-companion[data-hidden="true"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.companion-restore {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding: 8px 14px;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  color: var(--cream-50);
  background: var(--chocolate-800);
  font: 800 .82rem/1.2 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
}

.companion-restore[hidden] {
  display: none !important;
}

.player-fullscreen-exit {
  inset-block-start: max(8px, env(safe-area-inset-top, 0px));
  inset-inline-end: max(8px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-color: rgb(255 255 255 / 38%);
  border-radius: 50%;
  color: #fffdf6;
  background: rgb(20 14 12 / 56%);
  font-size: 0;
  line-height: 1;
  opacity: .72;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: opacity 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.player-fullscreen-exit::before {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(#fffdf6, #fffdf6) left top / 7px 2px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) left top / 2px 7px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) right top / 7px 2px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) right top / 2px 7px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) left bottom / 7px 2px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) left bottom / 2px 7px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) right bottom / 7px 2px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) right bottom / 2px 7px no-repeat;
  content: "";
  transform: scale(.76);
}

.player-fullscreen-exit:hover,
.player-fullscreen-exit:focus-visible {
  background: rgb(20 14 12 / 84%);
  opacity: 1;
}

.player-fullscreen-exit:active {
  transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {
  .player-fullscreen-exit {
    transition-duration: .01ms;
  }
}

.companion-hide { margin-top: 0; }

/* Compact native Support disclosures retain editable questions, answers and links. */
.support-help-page .support-faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; }
.support-help-page .support-faq { min-width:0; min-height:0; padding:0; overflow:hidden; border-color:var(--portal-line); background:linear-gradient(145deg,#fffdf6,#fff9e9); box-shadow:var(--portal-depth); }
.support-faq-summary { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:5px 14px; min-height:96px; padding:18px; cursor:pointer; list-style:none; }
.support-faq-summary::-webkit-details-marker { display:none; }
.support-faq-summary::marker { content:''; }
.support-faq-summary:hover { background:var(--cream-200); }
.support-faq-summary:focus-visible { outline:3px solid var(--button-fill); outline-offset:-4px; border-radius:13px; }
.support-faq-summary .section-kicker { grid-column:1; grid-row:1; margin:0; }
.support-faq-summary h2 { grid-column:1; grid-row:2; margin:0; font-size:1.2rem; line-height:1.3; text-wrap:balance; }
.support-faq-icon { grid-column:2; grid-row:1 / span 2; position:relative; display:block; width:28px; height:28px; border:1px solid var(--portal-line); border-radius:50%; background:white; }
.support-faq-icon::before,.support-faq-icon::after { content:''; position:absolute; left:8px; top:12px; width:10px; height:2px; border-radius:1px; background:var(--pink-700); }
.support-faq-icon::after { transform:rotate(90deg); }
.support-faq[open] .support-faq-icon::after { transform:none; }
.support-faq[open] .support-faq-summary { border-bottom:1px solid var(--portal-line); }
.support-faq-answer { padding:16px 18px 18px; }
.support-faq-answer p { margin:0 0 12px; font-size:.95rem; line-height:1.6; }
.support-faq-answer .companion-help-note { font-size:.85rem; }
.support-faq-answer a { display:inline-flex; align-items:center; min-height:44px; color:var(--pink-700); font-weight:800; }
.support-help-page .support-search-panel label { display:block; font-size:.9rem; font-weight:800; }
.support-help-page [data-support-count] { margin:10px 0 0; font-size:.9rem; color:var(--chocolate-800); }
.search-suggestions button { min-height:44px; }
@media(max-width:760px) {
 .support-help-page .support-faq-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
 .support-faq-summary { min-height:88px; padding:16px; }
 .support-faq-answer { padding:14px 16px 16px; }
 .site-links a { min-height:44px; }
}

/* Native donor modules are siblings of the original page wrapper. */
.portal-journey-card :is(h2,h3),
:is(.app-puzzle-abilities,.app-gameplay-heading,.app-gameplay-card) :is(h2,h3) { font-family:var(--portal-display); letter-spacing:-.035em; }
.portal-journey-card h2 { margin:0 0 8px; font-size:1.4rem; line-height:1.3; }

/* Audit repairs: keep existing native filters and media inside narrow screens. */
.leaderboard-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.leaderboard-filter-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.leaderboard-filter-field label { font-size:.9rem; font-weight:800; color:var(--navy-900); }
.leaderboard-filter-field select { width:100%; max-width:100%; min-width:0; min-height:48px; padding:10px 12px; border:1px solid var(--portal-line); border-radius:12px; color:var(--navy-900); background:white; font:inherit; }
.leaderboard-filter-field select:disabled { opacity:1; color:var(--chocolate-800); background:var(--cream-100); }
.leaderboard-filter-field select:focus-visible { outline:3px solid var(--button-fill); outline-offset:3px; }
.leaderboard-filter-field .progression-muted { margin:0; font-size:.85rem; line-height:1.5; }
label[for='site-motion-toggle'] { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 0; cursor:pointer; }
label[for='site-motion-toggle'] input { flex:0 0 auto; width:18px; height:18px; accent-color:var(--button-fill); }
@media(max-width:760px) {
 .manga-series-art { width:100%; max-width:100%; }
 .leaderboard-filters { grid-template-columns:minmax(0,1fr); gap:14px; }
 [data-leaderboard-view] .progression-section-heading { flex-direction:column; align-items:flex-start; gap:10px; }
 .wo002-game-library .game-tab,.reader-control,.reader-controls .reader-control,.character-filter-controls label { min-height:44px; }
 .character-filter-controls label { min-width:44px; justify-content:center; }
}

/* Quest journey: existing website-local data, native owner-editable containers. */
[data-progression-page] .quest-next { margin-top:14px; padding:14px; border:1px solid var(--gold-400); border-radius:12px; background:var(--cream-50); }
[data-progression-page] .quest-next h2 { margin:0 0 6px; font-size:1.05rem; }
[data-progression-page] .quest-next h3 { margin:0 0 6px; font-size:1.2rem; }
[data-progression-page] .quest-next p { margin:0 0 10px; font-size:.9rem; line-height:1.45; }
[data-progression-page] .quest-filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
[data-progression-page] .quest-filters [aria-pressed='true'] { outline:2px solid var(--button-fill); outline-offset:2px; font-weight:700; }
[data-progression-page] .quest-list { display:grid; gap:12px; }
[data-progression-page] .quest-card { min-width:0; padding:16px; border:1px solid var(--gold-400); border-radius:12px; background:var(--cream-50); overflow-wrap:anywhere; }
[data-progression-page] .quest-card h3 { margin:0 0 6px; }
[data-progression-page] .quest-card p { margin:6px 0; }
[data-progression-page] .quest-card__state { font-size:.82rem; font-weight:700; }
[data-progression-page] .quest-card__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
[data-progression-page] :is(.quest-next,.quest-filters,.quest-card__actions) .button-link { min-height:44px; max-width:100%; white-space:normal; text-align:center; }
[data-progression-page] :is(.quest-card,.quest-card__actions > *,[data-quest-empty])[hidden] { display:none !important; }

/* Guest showcase: native authored controls; no new reward/economy authority. */
.guest-showcase { min-width: 0; overflow-wrap: anywhere; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.showcase-group { display: flex; flex-direction: column; gap: .65rem; min-width: 0; padding: 1rem; border: 1px solid var(--gold, #b78628); border-radius: 16px; }
.showcase-group h3, .showcase-group p { margin: 0; }
.showcase-current { font-weight: 700; }
.showcase-select { width: 100%; min-width: 0; min-height: 44px; padding: .6rem; font: inherit; border-radius: 8px; background: var(--cream, #fffaf0); color: inherit; }
.showcase-group [data-showcase-save] { min-height: 44px; align-self: flex-start; }
.showcase-group :disabled { opacity: .6; cursor: not-allowed; }
.showcase-group :focus-visible { outline: 3px solid var(--pink, #f60062); outline-offset: 3px; }
.showcase-status { margin-block: .75rem; }
@media (max-width: 620px) { .showcase-grid { grid-template-columns: minmax(0, 1fr); } }

/* Availability-aware native Play catalogue. Existing cards/launch boundaries remain unchanged. */
[data-catalogue-root] .catalogue-controls{padding:20px;margin:0 0 22px;border:1px solid var(--gold-400);border-radius:18px;background:var(--cream-100,#fffaf0);color:var(--navy-900);scroll-margin-top:110px}
[data-catalogue-root] .catalogue-help{margin:0 0 16px;max-width:76ch;line-height:1.6}
[data-catalogue-root] .catalogue-search-row,[data-catalogue-root] .catalogue-options-row{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
[data-catalogue-root] .catalogue-field{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 240px}
[data-catalogue-root] label{font-weight:750}
[data-catalogue-root] input,[data-catalogue-root] select{font:inherit;width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--navy-900);border-radius:10px;background:#fffdf6;color:var(--navy-900);box-sizing:border-box}
[data-catalogue-root] .catalogue-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
[data-catalogue-root] .game-tab{min-height:44px;white-space:normal;font:inherit;font-weight:750}
[data-catalogue-root] .game-tab .catalogue-filter-label{display:inline;min-width:0;min-height:0;margin:0;border-radius:0;background:transparent;color:inherit;font-size:inherit}
[data-catalogue-root] .catalogue-filter-count{font-variant-numeric:tabular-nums}
[data-catalogue-root] [disabled]{opacity:.6;cursor:not-allowed}
[data-catalogue-root] :is(input,select,button):focus-visible{outline:3px solid var(--button-fill);outline-offset:3px}
[data-catalogue-root] .catalogue-status{margin:16px 0 0;font-weight:750;overflow-wrap:anywhere}
[data-catalogue-root] .catalogue-url-status{padding:10px;border:1px solid currentColor;border-radius:8px}
[data-catalogue-root] .catalogue-availability{margin:8px 0;padding:6px 10px;border:1px solid currentColor;border-radius:8px;align-self:flex-start;font-size:.9rem;font-weight:800}
.play-card__body > p.catalogue-availability { flex: 0 0 auto; min-height: 0; }
[data-catalogue-root] [hidden]{display:none!important}
@media(max-width:600px){[data-catalogue-root] .catalogue-controls{padding:14px}[data-catalogue-root] .catalogue-search-row .catalogue-field,[data-catalogue-root] .catalogue-options-row .catalogue-field{flex-basis:100%}[data-catalogue-root] .catalogue-filters .game-tab{flex:1 1 125px;padding:9px 10px}}
/* Toadal visibility is a real navigation/menu preference, not a floating-only gesture. */
.site-links .companion-nav-visibility {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px clamp(7px, .72vw, 11px);
  border: 1px solid rgb(255 212 91 / 46%);
  border-radius: var(--radius-pill);
  color: var(--cream-100);
  background: transparent;
  font: 800 .9rem/1.2 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.site-links .companion-nav-visibility:hover,
.site-links .companion-nav-visibility:focus-visible {
  border-color: rgb(255 212 91 / 78%);
  color: var(--gold-400);
  background: rgb(255 253 246 / 8%);
  transform: translateY(-1px);
}
.site-links .companion-nav-visibility[aria-pressed="false"] {
  border-color: var(--gold-400);
  color: #35180f;
  background: var(--gold-400);
}
.site-links .companion-nav-visibility:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}
@media (min-width: 961px) and (max-width: 1099px) {
  .site-links .companion-nav-visibility { padding-inline: 5px; font-size: .78rem; }
}
@media (max-width: 960px) {
  .site-links .companion-nav-visibility { min-height: 44px; padding-inline: 10px; font-size: .86rem; }
}
/* Source-labelled per-game progress: three independent trust dimensions. */
[data-game-record] .game-progress-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-block: 8px 10px;
}
[data-game-record] .game-progress-trust-grid > p {
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--gold-400);
  border-radius: 9px;
  background: var(--cream-50);
  overflow-wrap: anywhere;
}
[data-game-progress-state="unavailable"] .game-progress-trust-grid,
[data-game-progress-state="stale"] .game-progress-trust-grid {
  opacity: .82;
}
@media (max-width: 760px) {
  [data-game-record] .game-progress-trust-grid { grid-template-columns: 1fr; }
}

/* Optional Home Pass summary: native in-flow content, no overlay or new authority. */
#feast-pass [data-pass-display] { max-height: none; overflow: visible; }
#feast-pass .pass-display-toggle { min-height: 44px; margin-block: 6px; white-space: normal; }
#feast-pass .pass-display-toggle:focus-visible { outline: 3px solid #ffb823; outline-offset: 3px; }
#feast-pass .pass-display-preference-status { color: var(--chocolate-800); font-size: .75rem; line-height: 1.45; margin: 0 0 8px; }
#feast-pass .pass-display-content[hidden],
#feast-pass [data-pass-display-hidden="true"] .pass-emblem { display: none !important; }
#feast-pass .pass-display-content { min-width: 0; }
#feast-pass .home-pass-metrics { overflow-wrap: anywhere; }
@media (min-width: 1180px) {
  /* A taller optional Pass must not split the adjacent cream games surface. */
  body:has([data-pass-display]) #browser-games-intro { align-self: stretch; }
}

/* Home owner-review polish: preserve the market scene, native copy, and existing card art. */
html body:has(.home-hero) {
  background:
    linear-gradient(180deg, rgb(255 247 226 / 72%) 0%, rgb(255 247 226 / 91%) 440px, rgb(255 247 226 / 97%) 100%),
    url("../images/world/owner-daylight-market-20261007.webp") center top / cover scroll;
}

html body:has(.home-hero) .site-brand {
  min-width: 108px;
}

html body .site-brand__wordmark {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: clamp(84px, 8vw, 108px);
  height: 36px;
  transform: translateY(-50%);
  visibility: hidden;
  pointer-events: none;
}

html body .site-brand__lettering {
  display: block;
  width: 100%;
  height: 100%;
}

html body .site-brand.site-brand--lettering-ready {
  min-width: 108px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
}

html body .site-brand.site-brand--lettering-ready .site-brand__wordmark {
  visibility: visible;
}

html body:has(.home-hero) .home-hero__title {
  color: #fff6df;
  font-family: var(--feast-display, Georgia, "Times New Roman", serif);
  font-weight: 700;
  letter-spacing: -.045em;
  text-shadow: 0 3px 14px rgb(37 19 15 / 72%);
}

html body:has(.home-hero) #browser-games-intro .home-section-inner {
  grid-template-areas: none;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  grid-auto-rows: min-content;
  align-content: start;
  align-items: start;
  min-height: 0;
  height: auto;
}

html body:has(.home-hero) #browser-games-intro :is(.section-kicker, .section-heading, .section-lede, .game-tabs, .home-play-directory-link) {
  grid-area: auto;
}

html body:has(.home-hero) #browser-games-intro .section-kicker {
  grid-column: 1;
  grid-row: 1;
}

html body:has(.home-hero) #browser-games-intro .section-heading {
  grid-column: 1;
  grid-row: 2;
}

html body:has(.home-hero) #browser-games-intro .section-lede {
  grid-column: 1 / -1;
  grid-row: 3;
}

html body:has(.home-hero) #browser-games-intro .game-tabs {
  grid-column: 1 / -1;
  grid-row: 4;
}

html body:has(.home-hero) #browser-games-intro .home-play-directory-link {
  grid-column: 2;
  grid-row: 1 / span 2;
}

html body:has(.home-hero) #browser-games-intro .section-heading {
  position: relative;
  width: fit-content;
  padding-block-end: .2em;
  color: #17214e;
  font-family: var(--feast-display, Georgia, "Times New Roman", serif);
  font-weight: 700;
  letter-spacing: -.035em;
}

html body:has(.home-hero) #browser-games-intro .section-heading::after {
  display: block;
  width: 2.7rem;
  height: 3px;
  margin-block-start: .16em;
  border-radius: 999px;
  background: linear-gradient(90deg, #c98c20, #f4d88c);
  content: "";
}

html body:has(.home-hero) #feast-pass .framed-feast-pass {
  border: 2px solid #d9ad56;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #261827, inset 0 0 0 4px #d9ad56,
    0 5px 0 #442838, 0 10px 20px rgb(16 23 44 / 24%);
}

@media (max-width: 1079px) {
  html body:has(.home-hero) main > #feast-pass {
    grid-area: auto;
    grid-row: auto;
    grid-column: 1 / -1;
    align-self: start;
  }
}

@media (max-width: 760px) {
  html body:has(.home-hero) {
    background-attachment: scroll, scroll;
  }

  html body .site-brand__wordmark {
    width: 84px;
    height: 32px;
  }
}

/* The game introduction and card grid share one native desktop column. */
html body:has(.home-hero) .home-browser-games-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content;
  grid-auto-rows: max-content;
  align-self: start;
  align-content: start;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
}
html body:has(.home-hero) .home-browser-games-column > :is(#browser-games-intro, #browser-games) {
  grid-area: auto;
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
}
@media (min-width: 1080px) {
  html body:has(.home-hero) main > #browser-games-column {
    grid-area: 2 / 1 / 4 / 10;
    align-self: start;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }
  html body:has(.home-hero) #browser-games-intro .home-section-inner {
    height: auto;
    min-height: 0;
    max-width: none;
    margin-inline: 0;
  }
  html body:has(.home-hero) #browser-games {
    padding-block: 0 24px;
    padding-inline-end: 0;
  }
  html body:has(.home-hero) main > #feast-pass {
    grid-area: 2 / 10 / 4 / -1;
    align-self: start;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }
  html body:has(.home-hero) #feast-pass .home-section-inner,
  html body:has(.home-hero) #feast-pass .home-feast-pass-panel {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}
/* Home speech visibility never changes the avatar's compact hit box. */
html body:has(.home-hero) .toadal-companion {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  align-items: center;
}
html body:has(.home-hero) .toadal-companion .companion-toggle,
html body:has(.home-hero) .toadal-companion .companion-image {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain;
}

@media (max-width: 960px) {
  /* The measured Home nav pocket is a square at the larger compact artwork size. */
  html body:has(.home-hero) .toadal-companion[data-mobile-docked="true"] {
    width: var(--toadal-dock-width, 64px) !important;
    height: 64px !important;
  }
  html body:has(.home-hero) .toadal-companion[data-mobile-docked="true"] .companion-toggle,
  html body:has(.home-hero) .toadal-companion[data-mobile-docked="true"] .companion-image {
    width: var(--toadal-dock-width, 64px) !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* Keep full gameplay screenshots visible inside a consistent landscape frame. */
.discovery-media .discovery-scene-card--gameplay img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
/* Give editorial routes the same wrapped, keyboard-friendly link rows. */
.progression-nav--media,
#about-stories-characters .progression-nav--about,
.progression-nav--wicked-bites,
.progression-nav--grove-depot,
.progression-nav--devlog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-block-start: 14px;
}
.progression-nav--media > a,
#about-stories-characters .progression-nav--about > a,
.progression-nav--wicked-bites > a,
.progression-nav--grove-depot > a,
.progression-nav--devlog > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgb(217 0 85 / 17%);
  border-radius: 999px;
  background: var(--cream-50);
}
.progression-nav--media > a:focus-visible,
#about-stories-characters .progression-nav--about > a:focus-visible,
.progression-nav--wicked-bites > a:focus-visible,
.progression-nav--grove-depot > a:focus-visible,
.progression-nav--devlog > a:focus-visible {
  outline: 3px solid var(--button-fill);
  outline-offset: 3px;
}


/* Keep the Characters Hub title intact on narrow screens. */
@media (max-width: 680px) {
  .characters-page .character-hero-copy h1 {
    max-width: 100%;
    overflow-wrap: normal;
    font-size: clamp(2rem, 9vw, 2.4rem);
  }
}


/* Keep Toadal fully inside the clipped profile hero. */
.toadal-profile-page .profile-hero-toadal {
  bottom: 0;
}

/* Keep the Characters Hub's canonical full-body Toadal inside its clipped hero. */
@media (min-width: 681px) {
  .characters-page .character-hero {
    min-height: clamp(330px, 40.8vw, 461px);
  }

  .characters-page .character-hero-toadal {
    bottom: 0;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .characters-page .character-hero-toadal {
    width: 36%;
  }
}

@media (max-width: 680px) {
  .characters-page .character-hero-toadal {
    bottom: 0;
  }
}

/* Screenshot-reviewed App, World, and Play polish. */
.app-gameplay-section:has(#infinite-mode-title) .app-product-actions .button-link--secondary {
  color: var(--navy-900);
  border-color: var(--gold-600);
  background: var(--cream-50);
}

.discovery-world .world-map-preview .discovery-scene-card > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 10px;
}

@media (max-width: 600px) {
  :is(#mobile-adventure-world, #mobile-adventure-play).portal-app-feature {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  :is(#mobile-adventure-world, #mobile-adventure-play).portal-app-feature .portal-app-art {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 8px;
  }

  :is(#mobile-adventure-world, #mobile-adventure-play).portal-app-feature .portal-app-art img {
    display: block;
    width: 100%;
    height: 160px;
  }

  :is(#mobile-adventure-world, #mobile-adventure-play).portal-app-feature .portal-app-art figcaption {
    display: block;
    margin: 6px 2px 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

/* The floating companion cannot dock beside navigation on the narrowest phones.
   Keep the preview disclosure readable and preserve a 44px minimum control.
   Source adaptation of the measured PR #38 QA candidate, 2026-10-10. */
@media (max-width: 323px) {
  body:has(.wo002-player-footnote) .wo002-player-footnote {
    padding-inline-end: calc(84px + max(0px, 320px - 100vw)) !important;
  }
  body:has(.wo002-player-footnote) .toadal-companion .companion-toggle,
  body:has(.wo002-player-footnote) .toadal-companion .companion-image {
    width: 60px !important;
    height: 64px !important;
    min-width: 44px;
    min-height: 44px;
    max-height: 64px !important;
  }
}

.player-postplay {
  margin-block: 20px;
  padding: 20px;
  border: 1px solid var(--gold-400);
  border-radius: 16px;
  background: #fffaf0;
  color: var(--chocolate-800);
}
.player-postplay[hidden] { display: none; }
.player-postplay h2 { margin-block: 6px; color: var(--navy-900); }
.player-postplay .btn { margin: 6px 8px 0 0; }

/* Compact, read-only Home view of the existing exploration quests. */
.home-explorer-passport {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--gold-400);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--cream-50), var(--cream-100));
  color: var(--chocolate-800);
}
.home-explorer-passport__title {
  margin: 0;
  color: var(--navy-900);
  font-size: 1rem;
  line-height: 1.25;
}
.home-explorer-passport__summary {
  margin: 4px 0 7px;
  color: var(--chocolate-800);
  font-size: .76rem;
  line-height: 1.4;
}
.home-explorer-passport__activities {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.home-explorer-passport__activity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px solid rgb(145 101 47 / 18%);
  font-size: .72rem;
  line-height: 1.35;
}
.home-explorer-passport__activity-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.home-explorer-passport__activity-status {
  flex: 0 0 auto;
  color: var(--chocolate-900);
  font-size: .68rem;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}
.home-explorer-passport__activity[data-passport-state="ready"] .home-explorer-passport__activity-status {
  color: var(--pink-700);
}
.home-explorer-passport__activity[data-passport-state="claimed"] .home-explorer-passport__activity-status {
  color: var(--green-800);
}
.home-explorer-passport__link {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}
@media (max-width: 360px) {
  .home-explorer-passport__activity {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }
  .home-explorer-passport__activity-status { text-align: start; }
}

/* Optional owner-approved managed header image; existing lettering is the fallback. */
html body .site-brand__image {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: clamp(84px, 8vw, 108px);
  height: 54px;
  object-fit: contain;
  transform: translateY(-50%);
  visibility: hidden;
  pointer-events: none;
}

html body .site-brand__image[data-fit="cover"] { object-fit: cover; }

html body .site-brand.site-brand--image-ready {
  position: relative;
  min-width: 108px;
  min-height: 54px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
}

html body .site-brand.site-brand--image-ready .site-brand__image {
  visibility: visible;
}

html body .site-brand.site-brand--image-ready .site-brand__wordmark {
  visibility: hidden;
}

@media (max-width: 760px) {
  html body .site-brand__image { width: 84px; height: 42px; }
  html body .site-brand.site-brand--image-ready { min-width: 84px; min-height: 44px; }
}

/* Website visual finish: readable cards, consistent actions and safe companion docking. */
html body .button-link { font-size: clamp(.88rem, 1vw, .98rem); }
html body .studio-game-card p { font-size: .9rem; line-height: 1.55; }
html body .studio-game-card { min-width: 0; }
html body .studio-game-card :where(.button-link, .btn) { white-space: normal; text-align: center; }
html body .studio-game-card img { object-fit: contain; }
html body .portal-section-nav { flex-wrap: wrap; gap: 8px; }
html body .portal-section-nav :where(a, button) { min-height: 44px; align-content: center; }
html body .search-controls :where(input, select, button),
html body .catalogue-controls :where(input, select, button) { min-height: 44px; }
html body .progression-truth-note { line-height: 1.55; }
html body .toadal-companion[data-minimized="true"][data-mobile-docked="true"][data-dock-kind="desktop"],
html body .toadal-companion[data-minimized="true"][data-mobile-docked="true"][data-dock-kind="desktop"] .companion-toggle,
html body .toadal-companion[data-minimized="true"][data-mobile-docked="true"][data-dock-kind="desktop"] .companion-image {
  width: var(--toadal-dock-width, 52px) !important;
  height: var(--toadal-dock-width, 52px) !important;
  min-width: 0;
  min-height: 0;
  max-height: var(--toadal-dock-width, 52px) !important;
  transform: none !important;
  animation: none !important;
}
html body .toadal-companion[data-minimized="true"][data-dock-kind="desktop"] .companion-image { object-fit: contain; }
@media (min-width: 1080px) {
  html body .site-links > a { font-size: .82rem; min-height: 44px; }
  html body:has(.home-hero) #browser-games.studio-layout-grid,
  html body:has(.home-hero) #browser-games.studio-layout { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html body .studio-game-card p { font-size: .93rem; }
  html body .site-links > a { min-height: 44px; }
  html body .search-controls { min-width: 0; }
  html body .catalogue-controls :where(input, select) { max-width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (min-width: 1080px) and (max-width: 1279px) {
  html body:has(.home-hero) #browser-games.studio-layout-grid,
  html body:has(.home-hero) #browser-games.studio-layout { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  html body:has(.home-hero) #browser-games > .studio-game-card { grid-column: span 2; }
  html body:has(.home-hero) #browser-games > .studio-game-card:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 760px) {
  html body:has(.home-hero) #browser-games > .studio-game-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Keep the cast/world shelf beneath the games instead of leaving a blank column beside guest progress. */
@media (min-width: 1080px) {
  html body:has(.home-hero) main > #browser-games-column { grid-area: 2 / 1 / 3 / 10; }
  html body:has(.home-hero) main > #feast-pass { grid-area: 2 / 10 / 4 / -1; }
  html body:has(.home-hero) main > #discovery { grid-area: 3 / 1 / 4 / 10; }
  html body:has(.home-hero) #discovery .section-heading { align-items: start; }
}

/* Discovery uses the existing detail links and never intercepts nested controls. */
.studio-game-card[data-card-linked="true"] { position: relative; isolation: isolate; }
.studio-game-card [data-card-primary-link] { position: static; }
.studio-game-card [data-card-primary-link]::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.studio-game-card[data-card-linked="true"] :is(a, button, input, select, textarea):not([data-card-primary-link]) { position: relative; z-index: 2; }
.studio-game-card [data-card-primary-link]:focus-visible::after { outline: 3px solid var(--button-fill); outline-offset: -4px; }
.studio-game-card[data-card-linked="true"]:hover { border-color: var(--button-fill); }
[data-game-random] { min-height: 44px; white-space: normal; text-align: center; }
[data-game-random]:disabled { opacity: .6; cursor: not-allowed; }
[data-game-random-status] { max-width: 68ch; margin: 8px 0 0; font-size: .88rem; line-height: 1.5; }
[data-game-spotlight] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(16px, 3vw, 30px); padding: clamp(16px, 3vw, 26px); margin-block: 20px; border: 1px solid var(--gold-400, #ffd45b); border-radius: 18px; background: linear-gradient(135deg, #fffaf0, #fff0cf); color: var(--navy-900); }
[data-game-spotlight][hidden] { display: none !important; }
[data-game-spotlight] > * { min-width: 0; }
[data-spotlight-image] { display: block; width: 100%; max-height: 260px; aspect-ratio: 16/9; object-fit: contain; border-radius: 12px; }
[data-spotlight-title] { margin-block: 6px 10px; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.12; }
[data-spotlight-summary] { max-width: 65ch; line-height: 1.55; }
[data-spotlight-reason] { font-size: .86rem; font-weight: 750; }
[data-game-spotlight] .spotlight-actions { display: flex; flex-wrap: wrap; gap: 10px; }
[data-game-spotlight] :is(a, button) { min-height: 44px; }
[data-game-spotlight] [aria-disabled="true"] { opacity: .6; pointer-events: none; cursor: not-allowed; }
[data-game-guide] { margin-block: 24px; padding: clamp(18px, 3vw, 30px); border: 1px solid rgb(166 102 6 / 24%); border-radius: 18px; background: #fffdf6; color: var(--navy-900); }
[data-game-guide][hidden], [data-game-guide] [hidden] { display: none !important; }
[data-game-guide] p { max-width: 78ch; line-height: 1.6; }
[data-game-guide] :is(ul, ol) { max-width: 78ch; padding-inline-start: 24px; line-height: 1.65; }
[data-game-guide] li + li { margin-block-start: 9px; }
[data-game-guide] :is(h2, h3) { margin-block: 20px 10px; line-height: 1.2; }
[data-game-guide] [data-guide-version] { font-size: .86rem; color: #62544b; }
[data-game-guide] [data-guide-section] { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  [data-game-spotlight] { grid-template-columns: minmax(0, 1fr); }
  [data-spotlight-image] { max-height: 220px; }
  [data-game-spotlight] .spotlight-actions > * { flex: 1 1 140px; }
  .catalogue-random-actions { display: flex; flex-direction: column; align-items: stretch; }
}

/* Shared button paint follows the existing Studio theme; local owner fills remain overrides. */
:root {
  --primary: #10165b;
  --accent: #493367;
  --button-fill: var(--primary);
  --button-blend: var(--accent);
  --button-border: #59557c;
  --button-background: linear-gradient(180deg, var(--button-fill), var(--button-blend));
  --button-text: var(--cream-50);
}
:is(.button-link--primary, .btn.primary, .story-button-primary, .reader-controls .reader-control-next, .play-card__body .button-link) {
  color: var(--button-text);
  border-color: var(--button-border);
  background: var(--button-background);
  box-shadow: inset 0 1px rgb(255 255 255 / 24%), 0 3px 0 rgb(16 22 91 / 18%);
}
:is(.button-link--primary, .btn.primary, .story-button-primary, .reader-controls .reader-control-next, .play-card__body .button-link):hover {
  color: var(--button-text);
  border-color: var(--button-blend);
  background: var(--button-fill);
  box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 3px 0 rgb(16 22 91 / 24%);
}
:is(.button-link--primary, .btn.primary, .story-button-primary, .reader-controls .reader-control-next, .play-card__body .button-link):active {
  background: var(--button-fill);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%);
}
:is(.button-link, .btn, .story-button-primary, .reader-controls .reader-control-next):focus-visible {
  outline: 3px solid var(--button-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--button-fill);
}

/* Authored companion feeding: independent of discovery/game rewards. */
.companion-food-tray { margin-top:10px; border-top:1px solid currentColor; padding-top:8px; }
.companion-food-tray[hidden] { display:none !important; }
.companion-food-tray summary { cursor:pointer; font-weight:800; min-height:32px; }
.companion-food-instruction,.companion-food-status { font-size:.75rem; line-height:1.35; margin:6px 0; }
.companion-food-grid { display:grid; grid-template-columns:repeat(4,minmax(44px,1fr)); gap:5px; }
.companion-food { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; min-height:64px; padding:3px; border:1px solid var(--gold-500,#dfaa44); border-radius:10px; background:var(--cream-50,#fffaf0); color:var(--navy-900,#182142); font:inherit; cursor:grab; touch-action:none; }
.companion-food img { width:38px; height:38px; object-fit:contain; pointer-events:none; user-select:none; }
.companion-food span { font-size:.61rem; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.companion-food[aria-pressed='true'] { outline:2px solid var(--button-border,#342856); outline-offset:1px; background:#f0edff; }
.companion-feed-button { width:100%; min-height:44px; margin-top:8px; border:1px solid var(--button-border,#342856); border-radius:999px; background:var(--button-background,#2730b0); color:var(--button-text,#fff); font:inherit; font-weight:750; cursor:pointer; }
.companion-food:focus-visible,.companion-feed-button:focus-visible,.companion-food-tray summary:focus-visible { outline:3px solid var(--gold-400,#ffcf68); outline-offset:2px; }
.companion-food:disabled,.companion-feed-button:disabled { opacity:.55; cursor:default; }
html body .companion-panel:has(.companion-food-tray[open]) { max-height:min(450px,70dvh) !important; overflow-y:auto; }
.toadal-companion[data-food-over='true'] .companion-image { filter:drop-shadow(0 0 7px var(--gold-400,#ffcf68)); }
.toadal-companion[data-food-dragging='true'] .companion-toggle,.toadal-companion[data-feeding-state='eating'] .companion-toggle { cursor:default; }
.toadal-companion[data-feeding-state='eating'] .companion-image { transform:var(--toadal-feeding-transform,none) !important; transform-origin:0 0; transition:none !important; }
.companion-food-ghost { position:fixed; z-index:1000; width:54px; height:54px; object-fit:contain; pointer-events:none; transform:translate(-50%,-50%); user-select:none; filter:drop-shadow(0 3px 4px #0004); }
.character-biography { margin-top:10px; }
.character-biography summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:800; }
.character-biography h4 { margin:14px 0 4px; }
.character-biography p { white-space:normal; }
.character-cms-section { width:100%; margin:0; padding:0; }
@media(prefers-reduced-motion:reduce) { .companion-food-ghost { transition:none; } }
.home-falling-food { position:fixed; inset:0; z-index:24; pointer-events:none; overflow:hidden; }
.home-falling-food img { position:absolute; top:-64px; width:42px; height:42px; object-fit:contain; animation:home-food-fall 8s linear forwards; }
@keyframes home-food-fall { from { transform:translateY(0) rotate(-12deg); opacity:.85; } to { transform:translateY(110vh) rotate(22deg); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .home-falling-food { display:none; } }

/* TOADAL_PUBLIC_20261014_MOBILE_QUICKPLAY_BEGIN */
/* Append to existing native Studio site.css only. No decorative asset replacement. */
.wo002-detail-page .toadal-mobile-early-play { display: none; }
.wo002-detail-page .toadal-detail-play { display: inline-flex; min-height:46px; align-items:center; justify-content:center; margin-bottom:12px; }
@media (max-width: 680px) {
  .wo002-play-page { padding-top: 8px; }
  .wo002-play-page .wo002-play-hero { padding: 14px 16px; gap: 10px; }
  .wo002-play-page .wo002-play-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); line-height: 1; }
  .wo002-play-page .wo002-play-hero__copy > p:not(.section-kicker) { margin: 9px 0 12px; }
  .wo002-play-page .wo002-play-proof { padding: 9px 12px; gap: 3px 10px; }
  .wo002-play-page .wo002-play-proof > strong { font-size: 2.3rem; }
  .wo002-play-page .wo002-game-library { padding-block: 12px 8px; }
  .wo002-play-page .wo002-section-heading { margin-bottom: 10px; }
  .wo002-play-page .toadal-verified-quickstart { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; margin: 0 8px 8px 0; }
  .wo002-detail-page .toadal-mobile-early-play { display: flex; min-height: 46px; justify-content: center; align-items: center; margin-bottom: 12px; }
  .wo002-detail-page .wo002-detail-hero { gap: 12px; padding: 14px; }
  .wo002-detail-page .wo002-detail-copy h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .wo002-detail-page .wo002-detail-actions { margin-top: 12px; }
  .wo002-detail-page .wo002-detail-art img { max-height: 220px; }
}
/* TOADAL_PUBLIC_20261014_MOBILE_QUICKPLAY_END */

/* Froggy RC11 player: allocate the first mobile viewport to the game. */
@media (max-width:600px), (max-width:1000px) and (max-height:500px) {
  body:has(.ffb-website-player) .site-header { position:relative; height:52px; box-shadow:none; }
  body:has(.ffb-website-player) .site-nav { height:50px; min-height:0; padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); flex-wrap:nowrap; gap:10px; }
  body:has(.ffb-website-player) .site-brand { flex:0 0 86px; width:86px; min-width:0; }
  body:has(.ffb-website-player) .site-brand__image { width:86px; height:44px; object-fit:contain; }
  body:has(.ffb-website-player) .site-links { display:flex; flex:1 1 0; width:auto; min-width:0; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:0; gap:0; scrollbar-width:thin; }
  body:has(.ffb-website-player) .site-links a { flex:none; min-height:44px; display:flex; align-items:center; padding:0 9px; white-space:nowrap; }
  body:has(.ffb-website-player) #main-content { display:flex; flex-direction:column; height:calc(100svh - 52px); height:calc(100dvh - 52px); min-height:0; }
  .ffb-player-heading { flex:0 0 48px; width:100%; padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)) !important; flex-wrap:nowrap !important; gap:8px !important; }
  .ffb-player-heading h1 { min-width:0 !important; font-size:17px !important; max-width:none; white-space:nowrap; }
  .ffb-player-heading a { min-height:44px; display:inline-flex; align-items:center; padding:4px 8px; font-size:12px; white-space:nowrap; }
  .studio-rich-text:has(> .ffb-website-player) { flex:1 1 0; min-height:0; width:100%; margin:0; padding:0; }
  .ffb-website-player { height:100% !important; min-height:0; border-radius:0 !important; }
  .ffb-player-footnote { display:none; }
}

/* Reserve the accepted managed-logo box before load; the ready-state geometry is unchanged. */
html body .site-brand.site-brand--managed-image { position:relative; min-width:108px; min-height:54px; }
@media (max-width:760px) { html body .site-brand.site-brand--managed-image { min-width:84px; min-height:44px; } }


/* LILY OWNED FULLSCREEN OVERLAY */
/* The native compact HUD reserves its final 56px for this existing 44px Exit.
   Other games keep their current fullscreen toolbar and native handlers. */
[data-game-id="lily-pad-leap"] [data-player-frame-wrap]:is(:fullscreen, :-webkit-full-screen) {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 0;
}
[data-game-id="lily-pad-leap"] [data-player-frame-wrap]:is(:fullscreen, :-webkit-full-screen) .wo002-player-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
}
[data-game-id="lily-pad-leap"] [data-player-frame-wrap]:is(:fullscreen, :-webkit-full-screen) .player-fullscreen-rail {
  position: absolute;
  inset: max(4px, env(safe-area-inset-top, 0px)) max(4px, env(safe-area-inset-right, 0px)) auto auto;
  z-index: 8;
  display: flex;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  pointer-events: none;
}
[data-game-id="lily-pad-leap"] [data-player-frame-wrap]:is(:fullscreen, :-webkit-full-screen) .player-fullscreen-exit {
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 10px;
  background: rgb(15 26 34 / 96%);
  color: #fffdf6;
  opacity: 1;
  font-size: 0;
  pointer-events: auto;
}
[data-game-id="lily-pad-leap"] [data-player-frame-wrap]:is(:fullscreen, :-webkit-full-screen) .player-fullscreen-exit:focus-visible {
  outline: 3px solid #fde047;
  outline-offset: -4px;
}

/* PRIVATE WEBSITE MARKETING REVIEW 20261026 */
/* Preserve exact approved cover images and their complete lettering. */
html body img.marketing-card-art { object-fit:contain !important; object-position:50% 50% !important; }
html body:has(.home-hero) #browser-games .studio-game-card > img.marketing-card-art { height:auto !important; aspect-ratio:16/9; width:100%; max-height:none; }
html body:has(.home-hero) #browser-games .studio-game-card [data-game-preview-stage] { aspect-ratio:16/9; height:auto; min-height:0; }
html body:has(.home-hero) #browser-games .studio-game-card h3 { font-size:1.05rem; line-height:1.3; overflow-wrap:anywhere; }
html body:has(.home-hero) #browser-games .studio-game-card p { font-size:.92rem; line-height:1.5; }
html body:has(.home-hero) #browser-games .studio-game-card :is(.button-link,.home-game-action,[data-game-preview-toggle]) { min-height:44px; font-size:.88rem; }
.library-spotlight-art { min-width:0; }
.library-spotlight-art img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.library-spotlight-copy { min-width:0; }
.library-spotlight-copy h2 { overflow-wrap:anywhere; line-height:1.2; }
.library-spotlight .spotlight-actions > a { min-height:44px; white-space:normal; }
@media(max-width:760px) {
 html body:has(.home-hero) #browser-games { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; }
 html body:has(.home-hero) #browser-games > .studio-game-card { grid-column:auto !important; min-width:0; padding:12px; }
}
@media(max-width:480px) {
 html body:has(.home-hero) #browser-games { grid-template-columns:minmax(0,1fr) !important; }
 html body:has(.home-hero) #browser-games > .studio-game-card:last-child:nth-child(odd) { grid-column:auto !important; }
}
/* Native controls own explicit game pause flows. Host nodes and handlers stay intact. */
[data-native-pause-presentation="true"] :is([data-player-pause],[data-player-resume]) { display:none !important; }
@media(max-width:680px) {
 [data-game-id] > .wo002-player-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; }
 [data-game-id] .player-toolbar__controls { display:flex; flex-wrap:wrap; flex:1 1 auto; width:auto; min-width:0; gap:8px; }
 [data-game-id] .wo002-player-toolbar :is(button,a) { flex:0 1 auto; width:auto; min-height:44px; min-width:44px; padding:8px 12px; }
 [data-game-id="lily-pad-leap"] .wo002-player-heading { gap:8px; margin-bottom:8px; }
 [data-game-id="lily-pad-leap"] .wo002-player-heading .chip { display:none; }
}
/* Bound only Lily's short-landscape launch geometry; fullscreen and game source stay exact. */
@media(min-width:681px) and (max-height:500px) {
 [data-game-id="lily-pad-leap"] [data-player-frame-wrap]:not(:fullscreen):not(:-webkit-full-screen) { min-height:0; }
 [data-game-id="lily-pad-leap"] [data-player-frame-wrap]:not(:fullscreen):not(:-webkit-full-screen) .wo002-player-frame { height:420px; min-height:0; max-height:420px; }
}
/* END PRIVATE WEBSITE MARKETING REVIEW 20261026 */

/* Exported editorial sections are full rows in Studio page grids. */
main > :is([data-toadal-editorial-home], [data-toadal-game-news]) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Keep the keyboard shortcut out of normal layout and fully visible on focus. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  max-width: calc(100vw - 16px);
  padding: .6rem .9rem;
  color: #241c49;
  background: #fff7df;
  border: 2px solid #e9b657;
  border-radius: 8px;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  left: 8px;
  transform: translateY(0);
}
/* Keep adjacent legal actions distinct without changing their approved copy. */
.legal-template .legal-card > a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  margin-block-start: 6px;
  margin-inline-end: 16px;
}

.legal-template .legal-toc a { min-height: 44px; }

/* Give existing metric text room on narrow phones, including the inline grid. */
@media (max-width: 360px) {
  #feast-pass-full .progression-stat-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Keep the existing brand, helper, language selector and Menu in one clear row
   on narrow discovery pages. The approved image bytes and player shell stay. */
@media (max-width: 360px) {
  body[data-website-coherence="v1"]:not([data-coherence-family="player"]) .site-header .site-nav .site-brand {
    flex: 0 0 84px !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center;
  }
  body[data-website-coherence="v1"]:not([data-coherence-family="player"]) .site-header .site-nav .site-brand__image {
    width: 84px !important;
    height: auto !important;
    max-height: 64px !important;
    object-fit: contain;
  }
}

/* TOADAL Studio theme override: theme.modern */
:root{
  --accent: #493367;
}