/* Bellona artwork frames the game; general and dark remain simple base modes. */
:root {
  --theme-header: #153d33;
  --theme-header-ink: #f8fbf8;
  --theme-header-border: #5b7c6e;
  --theme-header-hover: #255143;
  --theme-header-accent: #ffac4b;
}
:root[data-theme="dark"] {
  --page: #14191f;
  --paper: #1f2730;
  --ink: #e6eaf0;
  --muted: #afb9c5;
  --border: #3c4856;
  --t-surface: #1f2730;
  --t-soft: #252e38;
  --t-hover: #303c49;
  --t-ink: #e6eaf0;
  --t-muted: #afb9c5;
  --t-border: #3c4856;
  --t-control-border: #6c7b8c;
  --t-strong: #384959;
  --t-on-strong: #f2f5f8;
  --t-on-strong-muted: #d0d9e3;
  --t-accent: #e8af67;
  --t-accent-hover: #f0c082;
  --t-accent-ink: #f0c082;
  --t-accent-soft: #3b3327;
  --t-accent-border: #bd945f;
  --t-button-ink: #2c2214;
  --t-focus: #f0c082;
  --t-edge: #10151b;
  --t-shadow: #00000030;
  --theme-header: #171d24;
  --theme-header-border: #637080;
  --theme-header-hover: #293442;
  --theme-header-accent: #e8af67;
}
:root[data-theme="bellona"] {
  --page: #1b181e;
  --paper: #28232c;
  --ink: #f0e8ed;
  --muted: #beb0be;
  --border: #4c404e;
  --t-surface: #28232c;
  --t-soft: #302831;
  --t-hover: #3e313e;
  --t-ink: #f0e8ed;
  --t-muted: #beb0be;
  --t-border: #4c404e;
  --t-control-border: #8c7484;
  --t-strong: #643b4d;
  --t-on-strong: #fff2f6;
  --t-on-strong-muted: #ead1de;
  --t-accent: #dc8da6;
  --t-accent-hover: #e8a4b9;
  --t-accent-ink: #ecacc1;
  --t-accent-soft: #422c37;
  --t-accent-border: #b67c92;
  --t-button-ink: #2e1922;
  --t-focus: #ecacc1;
  --t-edge: #151116;
  --t-shadow: #00000030;
  --theme-header: #211b22;
  --theme-header-border: #8c6b7e;
  --theme-header-hover: #3e2a37;
  --theme-header-accent: #e2a0b6;
  --theme-art: url('/assets/themes/bellona-portrait.png');
  --theme-scenery: url('/assets/themes/bellona-mist.png');
  --theme-companion: url('/assets/bosses/boss-bellona.png');
}
:root[data-theme]:not([data-theme="light"]) {
  --forest: var(--t-ink);
  --forest-deep: var(--t-ink);
  --orange: var(--t-accent);
  --t-board: var(--t-strong);
  --t-backdrop: #10131fcc;
  --t-success-soft: #e5f1e9;
  --t-success-ink: #28623f;
  --t-success-border: #a0bea9;
  --t-warning-soft: #f7efd9;
  --t-warning-ink: #795b21;
  --t-warning-border: #c4ae7d;
  --t-danger-soft: #f9e7e3;
  --t-danger-ink: #993e2c;
  --t-danger-border: #d2a49a;
}
:root[data-theme][data-color-mode="dark"] {
  color-scheme: dark;
  --t-board: #111319;
  --t-success-soft: #243c32;
  --t-success-ink: #a0dab4;
  --t-success-border: #638c73;
  --t-warning-soft: #403526;
  --t-warning-ink: #ebcf94;
  --t-warning-border: #9e855e;
  --t-danger-soft: #442b2d;
  --t-danger-ink: #f2b0a7;
  --t-danger-border: #b87d78;
}
/* Background and foreground roles differ even when the original green matched. */
:root[data-theme]:not([data-theme="light"]) .primary-button:not(.result-cta) {background:var(--t-accent);color:var(--t-button-ink);border-color:var(--t-accent-border)}
:root[data-theme]:not([data-theme="light"]) .primary-button:not(.result-cta):hover {background:var(--t-accent-hover)}
:root[data-theme]:not([data-theme="light"]) .challenge-heading h2>span {color:var(--t-accent-ink)}
:root[data-theme]:not([data-theme="light"]) :is(.attempts span.used,.party-time-track span,.challenge-progress>span,.mini-time-track:not(.urgent)>span) {background:var(--t-accent-ink)}
:root[data-theme]:not([data-theme="light"]) .se-ta-bar {accent-color:var(--t-accent-ink)}
:root[data-theme]:not([data-theme="light"]) .se-ta-bar::-webkit-progress-value {background:var(--t-accent-ink)}
:root[data-theme]:not([data-theme="light"]) .se-ta-bar::-moz-progress-bar {background:var(--t-accent-ink)}
.party-media-status {color:#183b32}
.party-media-retry {background:var(--paper);color:var(--ink)}
dialog::backdrop,.se-zoom::backdrop {background:var(--t-backdrop,#0d261ecc)}
.site-header {height:auto;min-height:90px;background:var(--theme-header);color:var(--theme-header-ink);border-bottom:3px solid var(--theme-header-accent)}
.header-inner {min-height:87px;height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;row-gap:10px}
.header-actions {flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.brand-accent {color:var(--theme-header-accent)}
.header-actions .quiet-button {color:var(--theme-header-ink);border-color:var(--theme-header-border)}
.header-actions .quiet-button:hover {background:var(--theme-header-hover)}
.theme-picker {display:inline-flex;align-items:center;gap:8px;color:var(--theme-header-ink);font-size:.875rem}
.theme-picker>span {font-weight:600}
.theme-picker select {font:inherit;font-size:.875rem;min-height:44px;max-width:100%;border:1px solid var(--theme-header-border);border-radius:9px;background:var(--theme-header);color:var(--theme-header-ink);padding:8px 9px;cursor:pointer;color-scheme:dark}
.theme-picker select:hover {background:var(--theme-header-hover)}
.theme-picker select:focus-visible,.header-actions button:focus-visible {outline:3px solid var(--theme-header-accent);outline-offset:3px}
/* Original 1743px portrait and 2117px character art; scale the scene, not a thumbnail. */
.theme-landscape,.site-theme-art {display:none}
:root[data-art-theme="true"] .site-side-art {display:none}
:root[data-color-mode="dark"] .site-side-art {opacity:.25}
:root[data-art-theme="true"] .site-theme-art {
  display:block;position:relative;isolation:isolate;height:clamp(260px,36vw,360px);
  margin:0 0 22px;overflow:hidden;border-radius:14px;pointer-events:none
}
.site-theme-art::before {
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--theme-scenery) center/cover no-repeat;
  mask-image:linear-gradient(#000 65%,transparent)
}
.theme-art-picture {
  position:absolute;top:0;bottom:0;left:-12%;width:75%;
  background:var(--theme-art) right center/auto 128% no-repeat;
  opacity:.88;pointer-events:none;user-select:none
}
.theme-art-companion {
  position:absolute;right:-5%;bottom:-8%;width:clamp(480px,76vw,850px);aspect-ratio:2117/1635;
  background:var(--theme-companion) center/contain no-repeat;
  pointer-events:none;user-select:none
}
.theme-art-caption {position:absolute;left:10px;bottom:6px;display:flex;align-items:center}
.theme-art-caption a {
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;
  background:var(--paper);font-size:.875rem;color:var(--t-accent-ink);text-underline-offset:4px;pointer-events:auto
}
.theme-art-caption a:focus-visible {outline:3px solid var(--t-focus);outline-offset:2px}
/* A dedicated art rail on laptops leaves the game controls in the first viewport. */
@media(min-width:1280px) {
  :root[data-theme="bellona"] {
    --bellona-game-width:min(990px,calc(100vw - 460px));
    --bellona-rail-width:calc(100vw - var(--bellona-game-width) - 32px);
    --bellona-sd-width:min(1180px,58vw);
    --bellona-portrait-width:clamp(960px,72vw,1520px)
  }
  :root[data-art-theme="true"] .theme-landscape {
    display:block;position:fixed;inset:90px 0 0;overflow:hidden;z-index:0;
    background:var(--theme-scenery) center/cover no-repeat;
    pointer-events:none;user-select:none
  }
  .theme-landscape::before {
    content:"";position:absolute;top:0;
    width:var(--bellona-portrait-width);aspect-ratio:1743/1132;
    right:calc(var(--bellona-rail-width)/2 - var(--bellona-portrait-width)*.3);
    background:var(--theme-art) center/contain no-repeat;opacity:.5
  }
  .theme-landscape::after {
    content:"";position:absolute;bottom:-18px;
    width:var(--bellona-sd-width);aspect-ratio:2117/1635;
    right:calc(var(--bellona-rail-width)/2 - var(--bellona-sd-width)*.36);
    background:var(--theme-companion) center/contain no-repeat
  }
  :root[data-art-theme="true"] main {
    width:var(--bellona-game-width);margin-left:32px;margin-right:0;
    background:var(--page);box-shadow:0 0 40px 24px var(--page)
  }
  :root[data-art-theme="true"] footer {
    width:var(--bellona-game-width);margin-left:32px;margin-right:0;
    background:var(--page);box-shadow:0 0 32px 16px var(--page)
  }
  :root[data-art-theme="true"] .site-theme-art {
    position:fixed;inset:auto 18px 16px auto;width:auto;height:44px;margin:0;
    overflow:visible;border-radius:0;background:none
  }
  .site-theme-art::before,.site-theme-art .theme-art-picture,.site-theme-art .theme-art-companion {display:none}
  .theme-art-caption {position:static}
}
/* Wide displays use both sides, with the large SD in front of the red atmosphere. */
@media(min-width:1700px) {
  :root[data-theme="bellona"] {--bellona-rail-width:calc((100vw - 990px)/2)}
  :root[data-art-theme="true"] main,:root[data-art-theme="true"] footer {margin-left:auto;margin-right:auto}
  .theme-landscape::before {
    right:auto;left:calc(var(--bellona-rail-width)/2 - var(--bellona-portrait-width)*.7);
    top:4%;opacity:.94
  }
}
@media(max-width:700px) {
  :root[data-art-theme="true"] .site-theme-art {height:260px;border-radius:10px;margin-bottom:18px}
  .theme-art-picture {left:-15%;width:78%;background-size:auto 126%;opacity:.8}
  .theme-art-companion {right:-16%;bottom:-12%;width:clamp(480px,100vw,660px)}
  .theme-art-caption {left:4px;bottom:0}
  .theme-art-caption a {padding:0 7px}
}
@media(max-width:700px) {
  .site-header {min-height:76px}
  .header-inner {min-height:73px}
  .theme-picker select {font-size:1rem}
}
@media(max-width:560px) {
  .header-inner {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:14px;padding-bottom:12px}
  .header-actions {width:100%;justify-content:flex-start;gap:8px}
  .theme-picker {margin-right:auto;gap:6px}
  .header-actions .quiet-button {padding:8px 10px;font-size:.875rem}
  .theme-picker select {max-width:125px}
  .header-actions .question-icon {display:none}
  .header-actions .help-button>span:last-child {display:inline}
}
@media(max-width:360px) {
  .theme-picker>span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .theme-picker select {max-width:105px}
}