/* Diamond/Pearl/Platinum: a Sinnoh upper screen and framed DS touch menus.
   Scoped to the product: SoulLink and Play retain their own presentation. */
@font-face {
  font-family: "Sinnoh Pixel";
  /* Pokémon D/P/Pt webfont by Lewis Wright / bouncebag.com; hosted locally. */
  src: url("/fonts/pokemon-dppt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html[data-product="nuzlocke"][data-ui="gen4"] {
  color-scheme: light;
  --pixel: "Sinnoh Pixel", "Courier New", monospace;
  --bg: #d5e0e8;
  --sidebar: #dde4e8;
  --surface: #fcfcf2;
  --surface2: #e5edf0;
  --surface3: #c6d8e1;
  --border: #6c8292;
  --text: #263747;
  --muted: #4b6374;
  --accent: #1a6194;
  --accent-soft: #d2e6f7;
  --danger: #a52e48;
  --grid: #66879e12;
  --g4-edge: #394e61;
  --g4-highlight: #ffffff;
  --g4-chrome-top: #435b75;
  --g4-chrome-bottom: #293d55;
  --g4-button-top: #fdfefb;
  --g4-button-bottom: #c8dbe6;
  --g4-party-top: #f8fbfa;
  --g4-party-bottom: #d2e3f3;
  --g4-red-top: #ffd0b4;
  --g4-red-bottom: #ef9b87;
  --g4-device-red: #b54558;
  --g4-screen-grid: #87aec41c;
  --g4-grave-top: #e4e7f2;
  --g4-grave-bottom: #b6c1d8;
  --g4-grave-ink: #3c4162;
  --g4-grave-muted: #515978;
  --party-top: var(--g4-party-top);
  --party-bottom: var(--g4-party-bottom);
  --party-border: var(--border);
  --shadow: inset 0 0 0 2px var(--g4-highlight), 0 3px 0 var(--g4-edge);

  &[data-theme="dark"] {
    color-scheme: dark;
    --bg: #192638;
    --sidebar: #25384d;
    --surface: #2d4157;
    --surface2: #21344b;
    --surface3: #3b5773;
    --border: #768da8;
    --text: #f0f3f9;
    --muted: #bacbdf;
    --accent: #afd9ff;
    --accent-soft: #365878;
    --danger: #ffabb3;
    --grid: #b6cced08;
    --g4-screen-grid: #9fb4ce0c;
    --g4-device-red: #d27986;
    --g4-edge: #101f34;
    --g4-highlight: #98b3d142;
    --g4-chrome-top: #324e72;
    --g4-chrome-bottom: #182d48;
    --g4-button-top: #3b5878;
    --g4-button-bottom: #263e5b;
    --g4-party-top: #3b5878;
    --g4-party-bottom: #223e5c;
    --g4-grave-top: #343b59;
    --g4-grave-bottom: #1b2b44;
    --g4-grave-ink: #edf0fc;
    --g4-grave-muted: #c4c9e0;
  }

  & body {
    background-color: var(--bg);
    background-image: linear-gradient(45deg, var(--grid) 25%, transparent 25%, transparent 75%, var(--grid) 75%), linear-gradient(45deg, var(--grid) 25%, transparent 25%, transparent 75%, var(--grid) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    color: var(--text);
    font-family: Verdana, "Segoe UI", sans-serif;
    font-size: 14px;
  }
  & :is(h1, h2, h3, .button, .brand, .segmented button) { letter-spacing: 0; }
  & :is(.eyebrow, .workspace-label, .breadcrumb, .preferences, .ds-menu-title, .storage-instructions, .field > span, .dialog-content > p, .empty p, .badge, .count-label) { font-family: var(--pixel); }
  & h1 { font-size: 42px; text-shadow: 2px 2px var(--g4-highlight); }
  & h2 { font-size: 26px; }
  & .sidebar {
    background: repeating-linear-gradient(0deg, #ffffff0b 0 2px, transparent 2px 4px), var(--sidebar);
    border-right: 5px double var(--g4-edge);
    box-shadow: inset -2px 0 var(--g4-highlight), 3px 0 0 #29435c25;
    padding: 23px 14px 16px;
  }
  & .brand { color: var(--text); font-size: 32px; text-shadow: 2px 2px var(--g4-highlight); margin-bottom: 23px; gap: 9px; }
  & .brand small { color: var(--muted); text-shadow: none; font-size: 9px; letter-spacing: .4px; }
  & .brand-icon { border: 3px solid #354659; background: linear-gradient(#d96372 0 43%, #354659 43% 55%, #fffdf1 55%); box-shadow: inset 2px 2px #ffffffa0, 2px 2px #35465955; }
  & .brand-icon::after { border-color: #354659; background: #fffcf0; }
  & :is(.workspace-label, .eyebrow, .breadcrumb, .preferences, .powered) { letter-spacing: .7px; }
  & .workspace-label { font-size: 18px; }
  & .run-picker { background: linear-gradient(var(--g4-button-top), var(--g4-button-bottom)); border: 2px solid var(--g4-edge); border-radius: 5px; box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge); }
  & .ds-menu-title { display: flex; justify-content: space-between; margin: 17px 3px 9px; padding: 6px 10px; border: 1px solid var(--g4-edge); border-left: 5px solid var(--g4-device-red); background: var(--g4-chrome-bottom); color: #f7fafc; font: 18px/1 var(--pixel); letter-spacing: 1px; }
  & .ds-menu-title > span:last-child { font-size: 11px; color: #bacddd; align-self: center; }
  & .run-avatar { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
  & .sidebar nav { gap: 7px; padding: 3px 3px 6px; }
  & .sidebar nav button {
    border: 2px solid var(--border); border-image: none;
    border-radius: 5px; min-height: 43px; padding: 5px 9px;
    background: linear-gradient(var(--g4-button-top) 0 64%, var(--surface2) 64%);
    color: var(--text); text-shadow: none; font-size: 20px; gap: 10px;
    box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge);
  }
  & .sidebar nav button.active,
  & .sidebar nav button:hover:not(:disabled):not(.active) {
    border-image: none; border-color: #a94859; color: #512a32;
    background: linear-gradient(var(--g4-red-top) 0 46%, var(--g4-red-bottom) 46%);
    box-shadow: inset 0 0 0 2px #fff2cd, inset 6px 0 #ba4b60, 0 2px #754757;
  }
  & .sidebar nav button.active::before { right: 7px; border-left-color: #893e56; }
  & .sidebar nav button .nav-count { color: var(--muted); }
  & .sidebar nav button.active .nav-count { color: #653a4b; }
  & .sidebar nav .menu-asset { width: 27px; height: 27px; flex: 0 0 27px; stroke-width: 1; }
  & .sidebar nav button:disabled { opacity: .58; }
  & .topbar {
    background: linear-gradient(var(--g4-chrome-top) 0 50%, var(--g4-chrome-bottom) 50%);
    color: #fff; border-top: 4px solid var(--g4-device-red); border-bottom: 5px double #c2d8ed; box-shadow: 0 2px var(--g4-edge);
  }
  & .topbar :is(.breadcrumb, .breadcrumb strong, .sync-status, .icon-button, .language-compact) { color: #f6fbff; }
  & .topbar .sync-status.disconnected { color: #ffd1d2; }
  & .topbar .button-secondary { background: #18395955; border-color: #c9e0f3; color: #fff; box-shadow: inset 0 0 0 1px #193856; }
  & .topbar .button-secondary:hover { background: #173758; }
  & .page-heading { padding: 17px 21px; border: 3px solid var(--g4-edge); border-left: 8px solid var(--g4-device-red); border-radius: 5px; background: repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px), var(--g4-chrome-bottom); box-shadow: inset 0 0 0 2px #8ca6b855, 0 3px var(--g4-edge); }
  & .page-heading h1 { color: #fcfcf1; text-shadow: 2px 2px #172d40; }
  & .page-heading :is(.eyebrow, .muted) { color: #d0dfe9; }
  & .page-heading .button-secondary { --text: #233b50; --g4-highlight: #fff; --g4-button-top: #fafcf5; --g4-button-bottom: #cbdfea; }
  & .breadcrumb { font-size: 20px; }
  & .eyebrow { font-size: 18px; }
  & .page-heading .eyebrow { color: #d0dfe9; }
  & .button {
    border: 2px solid var(--g4-edge); border-radius: 5px; min-height: 44px;
    box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge);
    font: 21px/1.05 var(--pixel); padding: 9px 16px;
  }
  & .button-default { color: #fffaf0; border-color: #783447; background: linear-gradient(#ca5f6b 0 48%, #aa3c53 48%); box-shadow: inset 0 0 0 2px #efacaa, 0 2px #672e42; text-shadow: 1px 1px #672e42; }
  & .ds-action-key { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid currentColor; border-radius: 50%; font: 18px/1 var(--pixel); }
  & .button-secondary { color: var(--text); background: linear-gradient(var(--g4-button-top) 0 46%, var(--g4-button-bottom) 46%); }
  & .button-danger { color: #592b3a; border-color: #a55e6c; background: linear-gradient(var(--g4-red-top), var(--g4-red-bottom)); box-shadow: inset 0 0 0 2px #ffe5db, 0 2px #754757; }
  & .button-ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--accent); }
  & .button:hover:not(:disabled) { filter: brightness(1.045); }
  & :is(button, a, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  & .topbar button:focus-visible { outline-color: #ffdf85; }
  & :is(.panel, .link-group, .player-summary, .run-tile, .area-overview, .shared-cap-panel, .table-scroll, .profile-item) {
    border: 2px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow);
  }
  & .section-heading { border-bottom: 3px double var(--border); padding-bottom: 11px; }
  & .section-heading h2 { font-size: 28px; }
  & .metric { border: 2px solid var(--border); border-radius: 8px; background: linear-gradient(var(--surface), var(--surface2)); box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge); }
  & .metric > strong { color: var(--accent); }
  & .badge { border-radius: 4px; background: var(--surface2); color: var(--text); }
  & :is(input:not([type=checkbox]):not([type=color]), textarea, select, .search-input, .search-select-trigger) {
    border: 2px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text); box-shadow: inset 1px 2px #152d4514;
  }
  & .search-input input:not([type=checkbox]):not([type=color]), & input.search-select-input:not([type=checkbox]):not([type=color]) { border: 0; box-shadow: none; background: transparent; }
  & :is(.notice, .error-banner) { border: 2px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--g4-highlight); }
  & .notice.warning, & .error-banner { border-color: var(--danger); }
  & .segmented { padding: 4px; border: 2px solid var(--border); border-radius: 9px; background: var(--surface2); }
  & .segmented button { border-radius: 5px; color: var(--muted); }
  & .segmented button.selected { color: #53263a; background: linear-gradient(var(--g4-red-top), var(--g4-red-bottom)); box-shadow: inset 0 0 0 1px #b47784; }
  & .switch { width: 40px; height: 24px; border: 2px solid var(--border); border-radius: 6px; padding: 2px; background: var(--surface3); }
  & .switch-thumb { width: 16px; height: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
  & .switch[data-state=checked] { background: #e89a91; border-color: #92556a; }
  & .switch[data-state=checked] .switch-thumb { background: #fff3d9; }
  & .dialog-overlay { background: #1c304b9c; backdrop-filter: blur(2px); }
  & .dialog-content { border: 4px solid var(--g4-edge); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 3px var(--g4-highlight), 0 0 0 2px var(--border), 0 16px 48px #162f4d70; }
  & .dialog-heading { margin: -4px -4px 20px; padding: 10px 13px; background: var(--g4-chrome-bottom); border-bottom: 4px solid var(--g4-device-red); }
  & .dialog-heading .icon-button { color: #fff; }
  & .dialog-heading h2 { color: #fffef1; font-size: 28px; }
  & .dialog-content :is(.link-dialog-banner, .linked-capture-editor) { border: 2px solid var(--border); border-radius: 9px; background: var(--surface2); box-shadow: inset 0 0 0 2px var(--g4-highlight); }
  & :is(.dialog-content, .storage-console, .notice, .empty) { border: 8px solid transparent; border-image: url('/art/gen4/dialog-frame.svg') 8 / 8px stretch; border-radius: 0; box-shadow: 0 3px var(--g4-edge); }
  & .dialog-content { background: var(--surface); }
  & .dialog-actions { background: var(--surface2); margin: 20px -8px -8px; padding: 16px 12px; }
  & .field > span { font-size: 21px; }
  & .dialog-content > p { font-size: 21px; line-height: 1.35; }
  & .linked-capture-editor legend { color: var(--accent); }
  & .dialog-actions { border-top: 2px solid var(--surface3); padding-top: 16px; }

  /* Diamond/Pearl party screen: six rounded status panels in two columns. */
  & .party-preview { background: var(--surface2); }
  & .party-preview-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 12px; border: 3px solid var(--g4-edge); border-radius: 7px; background: repeating-linear-gradient(-30deg, #e3f3f340 0 12px, #4c879716 12px 24px), #80aabb; box-shadow: inset 0 0 0 2px #cbe2ea; }
  &[data-theme=dark] .party-preview-slots { background: repeating-linear-gradient(-30deg, #d9f4ff0b 0 12px, #072f4a25 12px 24px), #244c67; }
  & .party-preview-slot {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 116px; padding: 12px 12px 12px 22px;
    border: 3px solid #41617a; border-radius: 26px 7px 26px 7px;
    background: linear-gradient(var(--g4-party-top) 0 43%, var(--g4-party-bottom) 43%);
    box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 3px var(--g4-edge);
  }
  & .party-preview-slot > small { left: 9px; top: 8px; font-size: 16px; }
  & .party-preview-slot > span:last-child { font-size: 23px; }
  & .party-preview-slot:first-child { border-color: #b05a45; background: linear-gradient(#fff1a7 0 43%, #e2c980 43%); color: #334353; box-shadow: inset 0 0 0 2px #fffbd3, 0 3px #674746; }
  &[data-theme=dark] .party-preview-slot:first-child { background: linear-gradient(#7a6946 0 43%, #5a513d 43%); color: #fff8db; box-shadow: inset 0 0 0 2px #c1b58080, 0 3px var(--g4-edge); }
  & .sinnoh-party-info { display: flex; flex: 1; flex-direction: column; align-items: stretch; text-align: left; gap: 5px; min-width: 0; }
  & .sinnoh-party-info > strong { font: 22px/1.05 var(--pixel); overflow-wrap: anywhere; }
  & .sinnoh-party-info > small { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 8px; font: 18px/1.1 var(--pixel); }
  & .sinnoh-party-types { display: flex; gap: 4px; flex-wrap: wrap; }
  & .sinnoh-party-types .type { font: 16px/1.3 var(--pixel); padding: 2px 5px; border-radius: 3px; }
  & .party-preview-slot .storage-sprites { flex: 0 0 auto; width: auto; }
  & .party-preview-slot .framed-sprite { width: 60px; }
  & .party-preview-slot .storage-sprites img { width: 60px; height: 60px; }
  & .party-preview-slot .storage-sprites > span { border-bottom: none; }
  & .party-preview-slot:hover:not(:disabled) { border-color: #c2686e; background: linear-gradient(#ffe4c1, #f5c697); color: #453750; }
  & .shared-cap-panel { background: linear-gradient(var(--surface) 0 68%, var(--surface2) 68%); }
  & .shared-cap-value strong { color: var(--accent); }
  & .pokemon-card { border: 3px solid var(--border); border-radius: 16px 8px 16px 8px; background: linear-gradient(var(--g4-party-top), var(--g4-party-bottom)); box-shadow: var(--shadow); }
  & .pokemon-card .card-footer { background: var(--surface2); }
  & .pokemon-card::before { display: none; }
  & .card-owner, & [data-ui-part=pokemon-overview] article > div:first-child strong { color: var(--text); }
  & [data-ui-part=pokemon-overview] article { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--g4-highlight); }

  /* The Pokédex keeps its content, with the red device trim and pale data cards. */
  & .dex-card { border: 2px solid var(--border); border-top: 5px solid var(--g4-device-red); border-radius: 5px; background: linear-gradient(var(--surface) 60%, var(--surface2) 60%); box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge); }
  & .dex-card:hover { border-color: #bd6673; background: var(--accent-soft); }
  & .dex-number { color: var(--muted); }
  & [data-ui-part=pokedex] { border-top: 7px solid var(--g4-device-red); border-radius: 6px; padding-top: 16px; }
  & [data-ui-part=pokedex] :is(section, article) { border-radius: 8px; }
  & :is(.opponent-hero, .opponent-pokemon, .route-trainer-card, .route-scene, .planner-preset, .planner-choice) { border: 2px solid var(--border); border-radius: 9px; box-shadow: inset 0 0 0 1px var(--g4-highlight); }
  & .plan-members small { color: var(--muted); }
  & :is(.plan-slot, .plan-candidate) { border-radius: 10px; }
  & .route-scene { color: #f1f6fe; }
  & .route-scene :is(.eyebrow, .muted) { color: #e2ebfa; }
  & .route-scene.has-map::before { background: linear-gradient(#172b4d55, #172b4d88); }
  & .milestone-list li.current { background: var(--accent-soft); border: 2px solid var(--border); border-radius: 7px; box-shadow: inset 4px 0 #d66d7d; }
  & :is(.progress-track, .stat-bar) { border-radius: 4px; border: 1px solid var(--border); }
  & th { background: var(--surface2); color: var(--text); }
  /* Override user-picked inline name colors so light table cells stay readable. */
  & .table-scroll tbody th { color: var(--text) !important; }
  & :is(th, td) { border-color: var(--surface3); }

  /* PC shell; selected wallpapers and box contents remain user-controlled. */
  & .storage-pc { border: 4px solid var(--g4-edge); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--border), 0 5px 0 #27486640; }
  & .storage-status { background: linear-gradient(var(--g4-chrome-top), var(--g4-chrome-bottom)); border-bottom: 4px double #afcce2; color: #fff; }
  & .storage-status small { color: #e2edfa; }
  & .storage-party { background: repeating-linear-gradient(-30deg, #ffffff12 0 12px, transparent 12px 24px), var(--g4-chrome-bottom); border-right: 4px double var(--border); }
  & .storage-party h2, & .storage-party h2 small { color: #fffdf0; }
  & .storage-slot.team-slot { border-radius: 12px 5px 12px 5px; background: linear-gradient(var(--g4-party-top), var(--g4-party-bottom)); border: 2px solid var(--border); box-shadow: inset 0 0 0 2px var(--g4-highlight); }
  & .storage-box { background: var(--surface2); }
  & .storage-box-title-art { display: none; }
  & .storage-box-heading select { background: linear-gradient(var(--g4-button-top) 0 50%, var(--g4-button-bottom) 50%); border: 2px solid var(--border); border-radius: 9px; text-shadow: none; color: var(--text); box-shadow: inset 0 0 0 2px var(--g4-highlight); }
  & .storage-box-heading select option { background: var(--surface); color: var(--text); }
  & :is(.storage-design-bar, .storage-search-results) { color: var(--muted); }
  & .storage-design-bar .button { color: var(--text); background: var(--surface); border-color: var(--border); }
  & .storage-wallpaper { border: 4px double #57798a; border-radius: 7px; }
  & .storage-wallpaper .storage-slot { border-radius: 7px; }
  & .storage-wallpaper .storage-slot.selected { outline: 3px solid #d75756; outline-offset: -3px; box-shadow: inset 0 0 0 5px #fff3ce; background: #fff4b440; }
  & .storage-slot.team-slot.selected { border-color: #bf7252; background: linear-gradient(#ffecaa 0 44%, #e6c984 44%); color: #35465b; }
  & .storage-console { border: 8px solid transparent; border-image: url('/art/gen4/dialog-frame.svg') 8 / 8px stretch; border-radius: 0; color: var(--text); background: var(--surface); box-shadow: none; }
  & .storage-instructions { font-size: 22px; }
  & .storage-console :is(.storage-instructions, .storage-selection p, .storage-controls small) { color: var(--muted); }
  & .storage-console .button { --text: inherit; color: var(--text); border-color: var(--border); }
  & .storage-console .button-secondary { background: linear-gradient(var(--g4-button-top), var(--g4-button-bottom)); }
  & .box-wallpaper-option { border-radius: 8px; padding: 6px; }

  /* A quiet, lavender remembrance screen with the existing ghost sprites. */
  & [data-ui-part=graveyard] { border: 4px double var(--border); border-radius: 12px; background: linear-gradient(var(--g4-grave-top), var(--g4-grave-bottom)); color: var(--g4-grave-ink); box-shadow: var(--shadow); }
  & [data-ui-part=graveyard] header :is(h2, span) { color: var(--g4-grave-ink); }
  & [data-ui-part=graveyard] header p { color: var(--g4-grave-muted); }
  & [data-ui-part=graveyard] header > div > span { background: var(--surface); border-color: var(--border); border-radius: 5px; }
  & [data-ui-part=graveyard] article { background: var(--surface); border: 2px solid var(--border); border-radius: 9px; box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge); }
  & [data-ui-part=graveyard] article :is(strong, button) { color: var(--text); }
  & [data-ui-part=graveyard] article :is(p, small) { color: var(--muted); }
  & [data-ui-part=grave] { border: 3px double var(--border); border-radius: 28px 28px 6px 6px; background: linear-gradient(var(--surface2), var(--surface)); box-shadow: inset 0 0 0 2px var(--g4-highlight); }
  & [data-ui-part=grave] > span, & [data-ui-part=grave] button > span { color: var(--muted); }
  & [data-ui-part=graveyard] > [role=status] { color: var(--g4-grave-ink); background: color-mix(in srgb, var(--surface) 75%, transparent); border: 2px dashed var(--border); border-radius: 8px; }
  & .storage-pc .storage-cemetery { background: var(--g4-grave-bottom); }
  & .storage-pc .storage-cemetery .storage-design-bar { background: var(--surface); color: var(--text); }

  /* The upper landscape and lower dialogue share a compact DS screen frame. */
  & .welcome-hero { position: relative; isolation: isolate; overflow: hidden; border: 4px solid var(--g4-edge); border-radius: 8px; min-height: 0; padding: 0; margin-bottom: 30px; background: var(--surface); box-shadow: 0 0 0 2px var(--g4-highlight), 0 5px 0 var(--border); }
  & .sinnoh-screen { position: relative; height: clamp(190px, 19vw, 280px); overflow: hidden; border: 3px solid #bdcfd6; border-bottom: 0; background: #72b6d2; }
  & .sinnoh-landscape { position: absolute; inset: 0; background: url('/art/gen4/spear-pillar.webp') center 54% / cover; image-rendering: pixelated; }
  & .sinnoh-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #102d4310 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 2px #203d4650; }
  & .sinnoh-location { position: absolute; top: 15px; left: 15px; display: flex; align-items: center; gap: 8px; min-width: 137px; padding: 5px 16px 5px 9px; border: 2px solid #465e70; border-radius: 3px 3px 13px 3px; background: linear-gradient(#fffff2 0 50%, #e2ecd8 50%); box-shadow: inset 0 0 0 2px #fff, 2px 3px #243d4b70; color: #304457; font: 22px/1 var(--pixel); letter-spacing: 2px; }
  & .sinnoh-location .menu-asset { width: 25px; height: 25px; flex-basis: 25px; }
  & .sinnoh-legend { position: absolute; right: 8%; bottom: 0; width: 240px; height: 100%; z-index: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
  & .hero-sinnoh { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: none; }
  & .sinnoh-starters { position: absolute; display: flex; align-items: end; justify-content: center; gap: 5px; bottom: 9px; left: 7%; z-index: 1; }
  & .sinnoh-starters > span { position: relative; width: 96px; height: 90px; display: grid; place-items: end center; }
  & .sinnoh-starters img { position: relative; width: 80px; height: 80px; image-rendering: pixelated; object-fit: contain; filter: none; }
  & .welcome-dialog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 22px 28px 24px; border-top: 7px double var(--g4-edge); box-shadow: inset 0 0 0 3px var(--g4-highlight); background: repeating-linear-gradient(0deg, #93a6b008 0 1px, transparent 1px 3px), var(--surface); }
  & .welcome-dialog::after { content: ''; position: absolute; right: 12px; bottom: 12px; width: 10px; height: 6px; background: var(--g4-device-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  & .welcome-hero .eyebrow { grid-column: 1; font-size: 18px; color: var(--muted); }
  & .welcome-hero h1 { grid-column: 1; max-width: none; margin: 5px 0 9px; font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: 0; color: var(--text); }
  & .welcome-hero p { grid-column: 1; max-width: 630px; margin: 0; font: 22px/1.3 var(--pixel); color: var(--muted); }
  & .welcome-hero .hero-actions { grid-column: 2; grid-row: 1 / 4; flex-direction: column; justify-content: center; gap: 10px; min-width: 154px; }
  & .welcome-hero .hero-actions .button { justify-content: flex-start; }
  &[data-theme=dark] .sinnoh-landscape { filter: brightness(.53) saturate(.75) hue-rotate(19deg); }
  &[data-theme=dark] .sinnoh-screen { border-color: #67839a; background: #243f61; }
  &[data-theme=dark] .sinnoh-screen::after { background: repeating-linear-gradient(0deg, #0a17381a 0 1px, transparent 1px 3px), linear-gradient(#1724513a, #2c447d12); }
  &[data-theme=dark] .sinnoh-location { background: linear-gradient(#4d6484 0 50%, #354e6c 50%); border-color: #a7b6cd; color: #f5f4e8; box-shadow: inset 0 0 0 2px #687f9c, 2px 3px #111d38a0; }
  &[data-theme=dark] .sinnoh-starters img { filter: brightness(.86); }
  & .run-grid { gap: 18px; }
  & .run-tile { position: relative; min-height: 154px; border: 3px solid var(--border); border-radius: 6px; background: linear-gradient(var(--surface) 0 68%, var(--surface2) 68%); padding: 18px 22px; }
  & .run-tile h3 { font-size: 26px; }
  & .run-tile .eyebrow { font-size: 18px; }
  & .run-tile-icon { display: block; width: 64px; height: 64px; margin-bottom: 12px; }
  & .run-tile-icon img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
  & .run-tile:hover { border-color: var(--g4-device-red); background: var(--surface2); transform: translateY(-2px); }
  & .create-tile { border-style: dashed; background: var(--surface2); font: 24px var(--pixel); }
  & .feature-strip { background: transparent; border: 0; border-top: 3px double var(--border); border-radius: 0; box-shadow: none; padding: 20px 0; margin-top: 26px; font-size: 12px; }
  & footer { border-top: 3px double var(--border); }
  & .obs-overlay .obs-player { background: var(--surface); border: 3px double var(--border); border-radius: 10px; color: var(--text); }
  & .obs-overlay .obs-player header { background: var(--surface2); color: var(--text); }
  & .obs-overlay .obs-player header > strong { color: var(--text); }
  & .obs-overlay .obs-slot { background: var(--surface2); border: 2px solid var(--border); border-radius: 8px; }

  /* The randomizer loads this same file; only its own document gets these rules. */
  &[data-interface=randomizer] {
    & :is(h1, h2, h3, button, .brand) { font-family: var(--pixel); letter-spacing: .2px; font-weight: 400; }
    & > body > header { max-width: none; padding: 20px max(28px, calc((100vw - 1060px) / 2)); border-bottom: 5px double #c2d8ed; background: linear-gradient(var(--g4-chrome-top), var(--g4-chrome-bottom)); color: #fff; }
    & header :is(a, .brand, .mark, .brand > span:last-child) { color: #fff; }
    & .brand { font-size: 27px; margin: 0; text-shadow: none; }
    & main { max-width: 1110px; }
    & :is(h1 em, a, .eyebrow, .mark) { color: var(--accent); }
    & :is(p, label, small, .muted, .hint, .intro p) { color: var(--muted); }
    & :is(section, .card, .preset-section, .rom-card, details, fieldset) { background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--g4-highlight); }
    & :is(input:not([type=checkbox]):not([type=file]), select, textarea) { background: var(--surface2); color: var(--text); border: 2px solid var(--border); border-radius: 7px; }
    & button { color: var(--text); background: linear-gradient(var(--g4-button-top), var(--g4-button-bottom)); border: 2px solid var(--border); border-radius: 7px; box-shadow: inset 0 0 0 2px var(--g4-highlight), 0 2px var(--g4-edge); font-size: 20px; }
    & button.primary, & button[type=submit] { color: #4b3522; background: linear-gradient(#ffe2a7, #f3bf72); border-color: #a37344; }
    & .preset[aria-pressed=true] { color: #53263a; background: linear-gradient(var(--g4-red-top), var(--g4-red-bottom)); border-color: #a55e6c; }
    & .preset[aria-pressed=true] :is(span, small) { color: #653a4b; }
    & :is(.drop, .step-head > span) { color: var(--text); background: var(--surface2); border-color: var(--border); border-radius: 7px; }
    & :is(.drop span, .preset span, .fine, .help-popover dd) { color: var(--muted); }
    & :is(.help-popover, .help-trigger[aria-expanded=true]) { color: var(--text); background: var(--surface); border-color: var(--border); border-radius: 8px; }
    & :is(.help-popover dt, .help-intro span) { color: var(--accent); }
    & :is(legend, summary span) { color: var(--accent); }
    & :is(.summary, #progress, #notice, #error) { background: var(--surface2); color: var(--text); border-color: var(--border); border-radius: 7px; }
    & #error { border-color: var(--danger); }
    & .file-button { color: var(--text); background: linear-gradient(var(--g4-button-top), var(--g4-button-bottom)); border-color: var(--border); border-radius: 7px; box-shadow: inset 0 0 0 2px var(--g4-highlight); }
    & input[type=checkbox] { accent-color: var(--accent); }
    & :is(details, fieldset) { padding: 12px; }
    & pre, & code { color: var(--text); background: var(--surface2); }
    & :is(dialog, [role=dialog], .help-dialog) { color: var(--text); background: var(--surface); border: 3px double var(--border); border-radius: 12px; }
  }

  @media (min-width: 761px) and (max-height: 850px) {
    & .sidebar { padding-top: 15px; }
    & .brand { margin-bottom: 16px; }
    & .sidebar nav { gap: 5px; }
    & .sidebar nav button { min-height: 36px; padding-block: 3px; font-size: 19px; }
    & .sidebar nav .menu-asset { width: 24px; height: 24px; flex-basis: 24px; }
    & .ds-menu-title { margin-top: 10px; margin-bottom: 7px; }
    & .powered { display: none; }
  }
  @media (max-width: 1150px) {
    & .sinnoh-starters > span { width: 70px; }
    & .sinnoh-starters img { width: 64px; height: 64px; }
    & .welcome-dialog { column-gap: 18px; padding: 20px; }
    & .welcome-hero h1 { font-size: 34px; }
    & .welcome-hero .hero-actions { min-width: 136px; }
    & .party-preview-slot { padding-left: 23px; gap: 7px; }
    & .party-preview-slot .storage-sprites img { width: 48px; height: 48px; }
    & .party-preview-slot .framed-sprite { width: 48px; }
    & .party-preview-slot > span:last-child { font-size: 20px; }
  }
  @media (max-width: 760px) {
    & .sidebar { width: min(290px, 86vw); }
    & .main-content { padding: 25px 16px 0; }
    & .topbar { padding-inline: 16px; }
    & .sinnoh-screen { height: 200px; }
    & .sinnoh-landscape { background-size: auto 100%; }
    & .dialog-content { border-radius: 10px; }
  }
  @media (max-width: 540px) {
    & h1 { font-size: 37px; }
    & .welcome-dialog { grid-template-columns: minmax(0, 1fr); padding: 20px 17px 23px; }
    & .welcome-hero h1 { font-size: 32px; line-height: 1.05; }
    & .welcome-hero p { font-size: 22px; }
    & .welcome-hero .hero-actions { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: 18px; gap: 10px; min-width: 0; }
    & .welcome-hero .hero-actions .button { flex: 0 1 auto; font-size: 21px; }
    & .sinnoh-screen { height: 175px; }
    & .sinnoh-legend { right: 0; bottom: 0; width: 170px; height: 170px; }
    & .hero-sinnoh { width: 170px; height: 170px; }
    & .sinnoh-location { top: 10px; left: 10px; padding-block: 3px; font-size: 19px; min-width: 119px; }
    & .sinnoh-starters { left: 3px; bottom: 4px; gap: 0; }
    & .sinnoh-starters > span { width: 44px; height: 58px; }
    & .sinnoh-starters img { width: 64px; height: 64px; }
    & .party-preview-slots { gap: 9px; padding: 9px; }
    & .party-preview-slot { flex-direction: column; gap: 1px; padding: 16px 5px 7px; min-height: 107px; }
    & .sinnoh-party-info { width: 100%; padding: 5px; align-items: center; text-align: center; }
    & .sinnoh-party-info > small { justify-content: center; font-size: 18px; }
    & .sinnoh-party-types { justify-content: center; }
    & .party-preview-slot > span:last-child { font-size: 19px; }
    & .button { padding: 9px 11px; }
    & .feature-strip { gap: 15px; justify-content: flex-start; font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    & *, & *::before, & *::after { animation: none !important; scroll-behavior: auto !important; }
  }
}