/* Reading modes share tokens with the illustration-led site theme. */
:root {
  color-scheme:light;
  --surface-rgb:255,253,248; --action-ink:#fffdf8; --code-ink:#57466c;
  --image-filter:none; --wash-one:#dfeadb88; --wash-two:#e8dff277; --wash-three:#f0dfcd66;
  --danger-surface:#fce9e6; --success-surface:#e5f4ee;
}
:root[data-theme="dark"] { color-scheme:dark;
--canvas:#181e1c; --surface:#232a28; --surface-rgb:35,42,40;
--ink:#e2e8dc; --muted:#afb9ac; --line:#3d493f;
--coral:#a4c7a7; --coral-dark:#b9d7b7; --navy:#cbd9c5;
--mint:#2a382c; --lavender:#302c3a; --gold:#c8ac73;
--success:#a5cfb7; --danger:#eda7a1; --action-ink:#19261c;
--code-ink:#d5c7ea; --image-filter:brightness(.68) saturate(.8);
--wash-one:#30463155; --wash-two:#45395344; --wash-three:#53463033;
--danger-surface:#422d2b; --success-surface:#263e30;
--shadow:0 8px 32px #00000024; }
:root[data-theme="sepia"] { color-scheme:light;
--canvas:#ded0b5; --surface:#eee3cb; --surface-rgb:238,227,203;
--ink:#493b29; --muted:#705e46; --line:#c9b996;
--coral:#6a5636; --coral-dark:#584424; --navy:#594b34;
--mint:#e3d9bd; --lavender:#e8d8bd; --gold:#926d30;
--success:#44644b; --danger:#9b4640; --action-ink:#fff9ec;
--code-ink:#624c36; --image-filter:sepia(.18) brightness(.92);
--wash-one:#baa97933; --wash-two:#d4b69333; --wash-three:#c5ae8e33;
--danger-surface:#e9cebc; --success-surface:#d8ddbc; }
/* Sepia is the layout default, independent of operating system appearance. */
body { background:radial-gradient(ellipse at 6% 12%,var(--wash-one),transparent 32rem),radial-gradient(ellipse at 94% 34%,var(--wash-two),transparent 35rem),radial-gradient(ellipse at 15% 85%,var(--wash-three),transparent 30rem),var(--canvas); }
.site-header { background:rgba(var(--surface-rgb),.97); border-color:var(--line); gap:.75rem; }
.site-header nav { color:var(--muted); margin-left:auto; }
.site-header nav > a[href="/donate"] { color:var(--coral-dark); border-color:var(--line); background:var(--mint); }
.theme-control { display:flex; align-items:center; gap:.5rem; }
.theme-control[hidden] { display:none; }
.theme-control label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.theme-control select { max-width:7rem; min-height:2.75rem; padding:.55rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); color:var(--ink); font-size:.8rem; cursor:pointer; }
.site-header .language-control { display:flex; gap:.1rem; margin-left:0; flex-shrink:0; }
.site-header .language-control a { padding:.55rem .35rem; font-size:.75rem; text-decoration:none; }
.language-control a[aria-current="true"] { background:var(--mint); color:var(--coral-dark); }
.hero { background:linear-gradient(115deg,var(--surface) 35%,var(--mint)); border-color:var(--line); }
.hero::before { border-color:var(--line); }
.hero-art img,.wiki-welcome img,.wiki-category-heading img,.wiki-category-card img,.wiki-prose img { filter:var(--image-filter); }
/* Feather the edges into the canvas while keeping the illustration sharp. */
.hero-art img,.auth-page::before {
  --art-mask:linear-gradient(to right,transparent,#000 9%,#000 88%,transparent),
    linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:var(--art-mask); mask-image:var(--art-mask);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.auth-page { background:none; position:relative; isolation:isolate; }
.auth-page::before {
  content:""; position:absolute; z-index:-1; inset:50% auto auto 0;
  width:min(46%,32rem); aspect-ratio:3 / 2; transform:translateY(-50%);
  border-radius:calc(var(--radius) * 1.4);
  background:url('/static/img/rigel/biblioteca.webp') center/cover no-repeat;
  filter:var(--image-filter); pointer-events:none;
}
.auth-page--login,.auth-page--register { padding-left:40%; }
.auth-page--login .auth-card,.auth-page--register .auth-card { width:min(38rem,100%); }
.auth-page--login::before,.auth-page--register::before { width:min(36%,28rem); }
.section-heading,.wiki-prose header,.wiki-category-card strong { border-color:var(--line); }
.status-card,.metric-card,.wiki-search,.ranking-tabs,.pagination,.wiki-sidebar .panel,.character-sprite { background:var(--mint); border-color:var(--line); }
.metric-card { background:var(--lavender); }
.metric-card strong,.wiki-toc summary,.wiki-section-nav a,.detail-grid strong { color:var(--ink); }
.home-link,.home-link:nth-child(2),.home-link:nth-child(3) { background-image:linear-gradient(0deg,var(--surface) 37%,rgba(var(--surface-rgb),.92) 50%,rgba(var(--surface-rgb),.35) 90%),url('/static/img/rigel/battleground.webp'); }
.home-link:nth-child(2) { background-image:linear-gradient(0deg,var(--surface) 37%,rgba(var(--surface-rgb),.92) 50%,rgba(var(--surface-rgb),.35) 90%),url('/static/img/rigel/aventura.webp'); }
.home-link:nth-child(3) { background-image:linear-gradient(0deg,var(--surface) 37%,rgba(var(--surface-rgb),.92) 50%,rgba(var(--surface-rgb),.35) 90%),url('/static/img/rigel/objetos.webp'); }
.world-panel { border-color:var(--line); background:linear-gradient(90deg,var(--surface) 25%,rgba(var(--surface-rgb),.94) 55%,rgba(var(--surface-rgb),.6)),url('/static/img/rigel/aventura.webp') right center/60% auto no-repeat; }
main[data-art] > .page-heading { border-color:var(--line); background-image:linear-gradient(90deg,var(--surface) 38%,rgba(var(--surface-rgb),.94) 61%,rgba(var(--surface-rgb),.5)),var(--section-art); }
.wiki-welcome,.wiki-category-heading,.wiki-quick-start a,.wiki-section-nav a,.wiki-prose img { border-color:var(--line); }
.wiki-quick-start a { background:var(--lavender); color:var(--code-ink); }
.wiki-section-nav a { background:var(--surface); }
.wiki-section-nav a[aria-current="page"],.ranking-tabs a.active { background:var(--coral); color:var(--action-ink); border-color:var(--coral); }
.wiki-article-card:hover,.ranking-tabs a:hover:not(.active) { background:var(--mint); }
.wiki-prose pre { background:var(--lavender); color:var(--code-ink); border-color:var(--line); }
.wiki-prose :not(pre) > code { background:var(--mint); color:var(--coral-dark); }
.auth-card input,.auth-card select,.admin-search input,.admin-form-panel input,.admin-form-panel select,.admin-form-panel textarea,.admin-log-filter input,.wiki-search input,.theme-control select { background:var(--surface); color:var(--ink); border-color:var(--line); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
.button,.auth-card button,.admin-search button,.admin-form-panel button,.admin-log-filter button,.wiki-search button { color:var(--action-ink); }
.button.secondary,.pagination a { background:var(--surface); color:var(--coral-dark); border-color:var(--line); }
.button.secondary:hover { background:var(--mint); color:var(--coral-dark); }
th { background:var(--mint); color:var(--muted); }
td { color:var(--ink); border-color:var(--line); }
tbody tr:nth-child(even) { background:var(--surface); }
tbody tr:hover { background:var(--mint); }
.detail-grid { background:var(--line); }
.form-message,.availability,.danger-button { background:var(--danger-surface); color:var(--danger); }
.success-message,.availability.online { background:var(--success-surface); color:var(--success); }
.admin-capability { background:var(--danger-surface); border-color:var(--danger); }
.admin-capability.allowed { background:var(--success-surface); border-color:var(--success); }
.richtext-toolbar button { background:var(--mint); color:var(--ink); }
input:focus,select:focus,textarea:focus { box-shadow:0 0 0 3px var(--mint); }
::selection { background:var(--lavender); color:var(--ink); }

/* Seasonal layer: remove data-skin from the layout to retire the default. */
.brand .brand-halloween { display:none; object-fit:contain; }
:root[data-skin="halloween"] .brand .brand-original { display:none; }
:root[data-skin="halloween"] .brand .brand-halloween { display:block; filter:drop-shadow(0 0 .3rem #d88d3538); }
.skin-control[hidden] { display:none; }
.skin-control button { min-height:2.75rem; padding:.55rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); color:var(--ink); font:inherit; font-size:.8rem; white-space:nowrap; cursor:pointer; }
.skin-control button[aria-pressed="true"] { background:var(--coral); border-color:var(--coral); color:var(--action-ink); }
.skin-control button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
:root[data-skin="halloween"] {
  --coral:#845025; --coral-dark:#663b1b; --gold:#9c6026;
  --mint:#e7d7b6; --lavender:#e5d7e4; --code-ink:#62466c;
  --wash-one:#da923033; --wash-two:#9b71ae33;
}
:root[data-theme="dark"][data-skin="halloween"] {
  --coral:#e2ad71; --coral-dark:#f3c392; --gold:#e2ad71;
  --mint:#3a3027; --lavender:#392e43; --code-ink:#e1c7ee;
  --wash-one:#bc742533; --wash-two:#8d57ac33;
}
:root[data-skin="halloween"] .hero-art { background:url('/static/img/rigel/halloween-village.webp') center/cover no-repeat; border-radius:var(--radius); }
:root[data-skin="halloween"] .hero-art img { visibility:hidden; }
:root[data-skin="halloween"] .auth-page::before { background-image:url('/static/img/rigel/halloween-library.webp'); }
:root[data-skin="halloween"] .home-link { background-image:linear-gradient(0deg,var(--surface) 37%,rgba(var(--surface-rgb),.92) 50%,rgba(var(--surface-rgb),.35) 90%),url('/static/img/rigel/halloween-village.webp'); }
:root[data-skin="halloween"] .home-link:nth-child(3) { background-image:linear-gradient(0deg,var(--surface) 37%,rgba(var(--surface-rgb),.92) 50%,rgba(var(--surface-rgb),.35) 90%),url('/static/img/rigel/halloween-library.webp'); }
:root[data-skin="halloween"] .world-panel { background-image:linear-gradient(90deg,var(--surface) 25%,rgba(var(--surface-rgb),.94) 55%,rgba(var(--surface-rgb),.6)),url('/static/img/rigel/halloween-village.webp'); }

/* Decorative cutouts never intercept links and contain no readable content. */
:root[data-skin="halloween"] .hero::after,
:root[data-skin="halloween"] main[data-art] > .page-heading::after,
:root[data-skin="halloween"] .hero-art::after,
:root[data-skin="halloween"] .wiki-welcome::after,
:root[data-skin="halloween"] footer::before {
  content:""; position:absolute; width:6rem; height:6rem; pointer-events:none;
  background-image:url('/static/img/rigel/halloween-cutouts.webp');
  background-size:300% 100%; background-repeat:no-repeat;
  filter:drop-shadow(0 .35rem .3rem #39223a30); z-index:2;
}
:root[data-skin="halloween"] main[data-art] > .page-heading,
:root[data-skin="halloween"] .wiki-welcome,
:root[data-skin="halloween"] footer { position:relative; }
:root[data-skin="halloween"] .hero::after,
:root[data-skin="halloween"] main[data-art] > .page-heading::after {
  top:.6rem; right:1.5rem; left:auto; width:7rem; height:7rem;
  background-position:0 0; opacity:.75; animation:halloween-flutter 7s ease-in-out infinite;
}
:root[data-skin="halloween"] .hero-art::after {
  bottom:-.6rem; right:-.6rem; background-position:100% 0;
  filter:drop-shadow(0 0 .65rem #ee99285c) drop-shadow(0 .3rem .2rem #39223a30);
}
:root[data-skin="halloween"] .wiki-welcome::after {
  top:.35rem; right:.6rem; background-position:50% 0; opacity:.7;
  animation:halloween-float 9s ease-in-out infinite;
}
:root[data-skin="halloween"] footer { padding-right:6rem; min-height:7rem; }
:root[data-skin="halloween"] footer::before {
  right:0; top:.3rem; background-position:50% 0; opacity:.65;
  animation:halloween-float 9s ease-in-out -3s infinite;
}
@keyframes halloween-flutter {
  0%,100% { transform:translateY(0) rotate(-4deg); }
  50% { transform:translateY(.35rem) rotate(4deg); }
}
@keyframes halloween-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(.5rem); }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-skin="halloween"] .hero::after,
  :root[data-skin="halloween"] main[data-art] > .page-heading::after,
  :root[data-skin="halloween"] .wiki-welcome::after,
  :root[data-skin="halloween"] footer::before { animation:none; }
}
@media (max-width:760px) {
  :root[data-skin="halloween"] .hero::after,
  :root[data-skin="halloween"] main[data-art] > .page-heading::after { width:4rem; height:4rem; right:.5rem; top:.3rem; }
  :root[data-skin="halloween"] .hero-art::after,
  :root[data-skin="halloween"] .wiki-welcome::after { width:3.5rem; height:3.5rem; right:0; }
}

@media (max-width:900px) {
  .site-header nav > a,.nav-group > summary { padding:.6rem .45rem; }
}
@media (min-width:761px) and (max-width:1000px) {
  .site-header > nav:not(.language-control) { display:none; }
  .mobile-menu { display:block; position:relative; }
  .mobile-menu > summary { list-style:none; padding:.75rem; cursor:pointer; }
  .site-header .mobile-menu nav { display:grid; position:absolute; right:0; top:calc(100% + .75rem); width:14rem; padding:1rem; gap:.5rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); box-shadow:var(--shadow); }
}
@media (max-width:760px) {
  .site-header { gap:.35rem; padding:.35rem .5rem; flex-wrap:wrap; }
  .brand { flex-basis:100%; justify-content:center; }
  .brand-name { max-width:none; font-size:1.1rem; }
  .brand img { width:60px; height:45px; }
  .site-header nav { margin-left:0; }
  .theme-control { margin-left:0; }
  .mobile-menu { margin-left:auto; }
  .theme-control select { max-width:5rem; padding-inline:.35rem; }
  .mobile-menu > summary { padding:.7rem .5rem; font-size:.8rem; }
  .site-header .mobile-menu nav { gap:.25rem; }
  main[data-art] > .page-heading { background-image:linear-gradient(0deg,var(--surface) 40%,rgba(var(--surface-rgb),.94) 60%,rgba(var(--surface-rgb),.5)),var(--section-art); }
  .world-panel { background-size:100% 100%,cover; }
  .auth-page { background:none; }
  .auth-page--login,.auth-page--register { padding-left:0; }
  .auth-page::before { display:none; }
}
