/* The Swoobles forums' look (swoobles.yotatube.com, MyBB): black and blood-red, gradient bars, Palatino titles,
   Trebuchet tables, beige text and copper links. One dark look, as the forums had. */
:root {
  --page: #0a0606;
  --box: #0c0303;          /* inside a box */
  --frame: #1a0202;        /* the box's outer frame */
  --line: #2b0505;         /* table rules, box borders */
  --bar-top: #5a0d18;      /* title bar gradient */
  --bar-bottom: #1f0404;
  --bar-edge: #350303;
  --red-hi: #8e1829;       /* top bar and nav gradient */
  --red-lo: #2f0404;
  --nav-sep: #2d0309;
  --glow: #b40017;
  --text: #9c8e64;         /* the forums' beige */
  --bright: #d4c7c7;
  --white: #f5eeee;
  --copper: #ab672c;       /* forum names */
  --copper-hi: #dc8336;
  --link: #c42222;
  --link-hi: #e23a3a;
  --good: #5fbf55;
  /* 2026-11-09: everything below is a variable too, so a theme (html[data-theme]) can swap it */
  --body-bg: #000 url("theme/bgnew.png") center top repeat-x fixed;
  --banner-bg: #0e0101 url("theme/header_bg_november.jpg") center top no-repeat;
  --nav-bg: #4c0a12 linear-gradient(#8e1829, #2f0404);
  --frame-edge: #000;
  --subbar-bg: #540c0c var(--art-subdots) right 4px top 5px no-repeat;
  --subbar-text: #ded7d7;
  --subbar-line: #631111;
  --btn: linear-gradient(#b01f34, #600814);
  --btn-hover: linear-gradient(#cc2a40, #7a0011);
  --btn-dark: linear-gradient(#3a0a0e, #1a0303);
  --btn-edge: #2f0404;
  --field: #000;
  --field-edge: #4a1a1a;
  --accent: #c41414;
  --bar-fill: linear-gradient(#e0432f, #8e1829);
  --tick-done: radial-gradient(circle, #ff8a8a 0 15%, #c41414 45%, #5a0505 100%);
  --screen: #05070a;
  --overlay: rgba(8, 2, 2, 0.78);
  --flash-bg: rgba(10, 2, 2, 0.82);
  --warm: #f3d9b0;
  --hud-bg: #070101;
  --hud-key: #7d6f50;
  --footer-edge: #1c0202;
  --art-arrow: url("theme/title_bar_left_side_arrow.png");   /* the forum icons; each theme has its own recoloured copy */
  --art-dots: url("theme/title_bar_icon_1.png");
  --art-ball: url("theme/forum_icon_sprite_swoobles.png");
  --art-navfx: url("theme/nav_main_effect.png");
  --art-subdots: url("theme/sub_title_bar_dots.png");
  --bad: #e0605a;
  --serif: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  --table: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  --body: Verdana, Geneva, Tahoma, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
/* the forums' own art (swoobles.yotatube.com images, in theme/) */
body { margin: 0; color: var(--text); font: 13px/1.5 var(--body); min-height: 100vh;
  background: var(--body-bg); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hi); text-decoration: underline; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 2px; }

/* top bar */
.topbar { height: 32px; background: linear-gradient(var(--red-hi), var(--red-lo)); display: flex; justify-content: flex-end; align-items: stretch;
  padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); }
.topbar .who { border-left: 1px solid var(--nav-sep); padding: 0 10px; display: flex; align-items: center; gap: 0; color: var(--white); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.topbar .who b { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar .who a { color: var(--white); }

/* banner */
.banner { height: 142px; position: relative; overflow: hidden; background: var(--banner-bg); }
.banner a.logo { position: absolute; left: 12px; top: 26px; display: block; }
.banner img { display: block; width: 750px; max-width: calc(100vw - 32px); height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.banner .sub { position: absolute; right: 18px; bottom: 14px; font: italic 700 20px var(--serif); color: #fff; text-shadow: 0 0 6px #000, 0 0 3px #000, 0 2px 4px #000; letter-spacing: 0.02em; }
@media (max-width: 640px) { .banner { height: 112px; } .banner a.logo { top: 18px; } .banner .sub { font-size: 14px; bottom: 8px; } }

/* main nav */
nav.main { position: relative; overflow: hidden; background: var(--nav-bg); box-shadow: 0 1px 2px #000; }
nav.main::after { content: ""; position: absolute; z-index: 1; left: 100%; top: 0; width: 1300px; height: 2px; pointer-events: none;
  background: var(--art-navfx) center top repeat-y; animation: navfx 3.5s steps(75) infinite; }
@keyframes navfx { from { left: 100%; } to { left: -3000px; } }
@media (prefers-reduced-motion: reduce), (max-width: 1300px) { nav.main::after { animation: none; display: none; } }
nav.main ul { margin: 0; padding: 0 0 0 max(0px, env(safe-area-inset-left, 0px)); list-style: none; display: flex; overflow-x: auto; scrollbar-width: none; }
nav.main ul::-webkit-scrollbar { display: none; }
nav.main li a { display: block; padding: 0 15px; height: 44px; line-height: 42px; color: var(--white); font-size: 15px; white-space: nowrap;
  border-right: 1px solid var(--nav-sep); border-top: 2px solid transparent; text-decoration: none; }
nav.main li:first-child a { border-left: 1px solid var(--nav-sep); }
nav.main li a:hover { border-top-color: #fff; box-shadow: 0 0 4px var(--glow); color: #fff; text-decoration: none; }
nav.main li a[aria-current="page"] { border-top-color: #f1e4e4; box-shadow: 0 0 4px var(--glow); background: rgba(255, 255, 255, 0.04); }

.wrap { padding: 10px max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); max-width: 1600px; margin: 0 auto; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 4px 5px 10px; font-size: 14px; }
.crumbs .path span { color: var(--bright); }

/* boxes with a title bar, as on the forums */
.box { background: var(--frame); border: 1px solid var(--frame-edge); margin-bottom: 14px; padding: 0 0 6px; }
.title { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; padding: 2px 6px 2px 7px;
  background: linear-gradient(var(--bar-top), var(--bar-bottom)); border: 1px solid var(--bar-edge); color: var(--bright);
  font: 16.5px var(--serif); margin-bottom: 1px; }
.title h2, .title h3 { font: inherit; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title h2, .title h3 { padding-left: 21px; background: var(--art-arrow) left center no-repeat; }
.title .dots { flex: none; align-self: flex-start; width: 21px; height: 21px; margin-top: 1px; background: var(--art-dots) no-repeat; }
.title .tacts { display: flex; gap: 5px; flex: none; }
.title .btn { min-height: 22px; padding: 1px 9px; font-size: 13px; }
.inner { margin: 6px 6px 0; background: var(--box); border: 3px solid var(--line); padding: 10px 12px; }
.inner.flush { padding: 0; }
.sub-bar { padding: 3px 26px 3px 8px; background: var(--subbar-bg); color: var(--subbar-text); font: 700 14px var(--serif); text-shadow: -1px 1px 0 #000; border-bottom: 1px solid var(--subbar-line); }

/* buttons: the forums' "Read Full Article" red */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 10px; min-height: 26px; border-radius: 2px; cursor: pointer;
  background: var(--btn); border: 1px solid var(--btn-edge); color: #fff; font: 13.5px var(--table); white-space: nowrap; }
.btn:hover { background: var(--btn-hover); }
.btn.dark { background: var(--btn-dark); color: var(--bright); }
.btn:disabled { opacity: 0.45; cursor: default; }
input.textbox, select.textbox { background: var(--field); color: var(--copper); padding: 5px 7px; border: 1px solid var(--field-edge); font: 13.5px var(--body); min-width: 0; }

/* forum tables */
table.forum { width: 100%; border-collapse: collapse; font: 14px var(--table); }
table.forum th { color: var(--bright); text-align: center; font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.forum th:first-child, table.forum th.l { text-align: left; }
table.forum td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
table.forum tr:last-child td { border-bottom: 0; }
table.forum td.name { text-align: left; }
table.forum td.last { text-align: right; font-size: 13px; line-height: 1.35; }
table.forum .ico { width: 44px; }
.ball { display: inline-block; width: 30px; height: 30px; vertical-align: middle; background: var(--art-ball) no-repeat 0 0; }
.ball.off { background-position: 0 -30px; }
.ball.lock { background-position: 0 0; }
a.fname { color: var(--copper); font-weight: 700; font-size: 15px; }
a.fname:hover { color: var(--copper-hi); }
.desc { color: var(--text); font-size: 13px; }
.tags { margin-top: 2px; font-size: 12.5px; }
.tags b { color: var(--bright); font-weight: 700; }
.tag { display: inline-block; margin-right: 8px; }
.tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: 1px; }
.num { color: var(--text); font-size: 14px; }
.when { color: var(--text); }
.copper { color: var(--copper); font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { table.forum .hide-s { display: none; } table.forum td, table.forum th { padding: 7px 4px; } }

/* the index: categories, stats */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; padding: 6px 8px 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .ball { transform: scale(0.6); margin: -6px; }
.stats { display: grid; gap: 6px; font-size: 13px; }
.stats b { color: var(--bright); }

/* news-style "what's new" */
.news { display: grid; gap: 10px; }
.news article { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.news article:last-child { border-bottom: 0; padding-bottom: 0; }
.news h4 { margin: 0 0 3px; display: flex; justify-content: space-between; gap: 10px; color: var(--white); font: 600 15px var(--table); }
.news h4 time { color: var(--text); font-weight: 400; font-size: 13px; white-space: nowrap; }
.news p { margin: 0; }

/* the game page */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 14px; align-items: start; }
@media (max-width: 1000px) { .play { grid-template-columns: minmax(0, 1fr); } }
.screen { position: relative; background: var(--screen); border: 1px solid #000; }
canvas { display: block; width: 100%; height: auto; outline: none; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px); }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 16px; background: var(--overlay); }
.overlay h3 { margin: 0; font: 700 clamp(20px, 3.6vw, 32px) var(--serif); color: var(--warm); text-shadow: 0 2px 6px #000; }
.overlay p { margin: 0; max-width: 52ch; color: var(--bright); }
.overlay.win h3 { color: #9be38f; }
.overlay.lose h3 { color: #f08a84; }
.overlay .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.overlay .gain { font: 600 14px var(--table); color: var(--copper-hi); }
.flash { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); max-width: calc(100% - 20px); padding: 4px 12px;
  background: var(--flash-bg); border: 1px solid var(--line); font: 700 14px var(--table); color: var(--warm); text-align: center; pointer-events: none; }
.readout { display: grid; gap: 4px; padding: 8px 2px 0; font: 13.5px var(--table); }
.readout .status { color: var(--bright); overflow-wrap: anywhere; }
.readout .mine { overflow-wrap: anywhere; }
.readout div:empty { display: none; }
.hudpanel { margin-top: 8px; border: 1px solid var(--line); background: var(--hud-bg); }
.hudpanel .sub-bar { font-size: 13px; }
.hudpanel dl { margin: 0; padding: 6px 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font: 13px var(--mono); }
.hudpanel dt { color: var(--hud-key); }
.hudpanel dd { margin: 0; color: var(--bright); white-space: pre-wrap; overflow-wrap: anywhere; }
.chatbox { display: flex; gap: 8px; margin-top: 8px; }
.chatbox input { flex: 1; }

.side .box { margin-bottom: 14px; }
.how { margin: 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; margin: 0; }
.keys dt { display: flex; gap: 3px; flex-wrap: wrap; }
.keys dd { margin: 0; }
kbd { font: 700 11.5px var(--mono); padding: 1px 6px; background: var(--field); border: 1px solid var(--field-edge); border-bottom-width: 2px; color: var(--bright); }
.note { font-size: 12px; margin: 8px 0 0; }

/* careers */
.rankline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 14px var(--table); }
.rankline b { color: var(--white); font-size: 18px; font-family: var(--serif); }
.bar { height: 10px; background: var(--field); border: 1px solid var(--field-edge); margin: 6px 0 8px; }
.bar i { display: block; height: 100%; background: var(--bar-fill); }
.goal { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.goal:last-child { border-bottom: 0; }
.goal .tick { width: 12px; height: 12px; border: 1px solid var(--field-edge); background: var(--field); }
.goal.done .tick { background: var(--tick-done); }
.goal .g { color: var(--bright); }
.goal.done .g { color: var(--copper-hi); }
.goal small { grid-column: 2 / 4; color: var(--text); }
.goal .pc { color: var(--text); font: 12px var(--mono); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.item:last-child { border-bottom: 0; }
.item .n { color: var(--copper); font-weight: 700; }
.item small { color: var(--text); }
.pips { font: 11px var(--mono); color: var(--accent); letter-spacing: 1px; }
.scroll { max-height: 320px; overflow-y: auto; }

/* touch controls */
.pad { display: none; justify-content: space-between; gap: 14px; margin-top: 10px; user-select: none; -webkit-user-select: none; touch-action: none; }
@media (pointer: coarse) { .pad { display: flex; } }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; }
.acts { display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; align-content: center; }
.pad button { background: var(--btn-dark); border: 1px solid var(--field-edge); color: var(--bright); font: 700 13px var(--table); touch-action: none; }
.pad button.on { background: var(--btn); color: #fff; }
.acts button { height: 48px; }

/* the career page */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 14px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 8px; }
.flat { margin: 0; }
.health { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.health li::before { content: "\25CF"; margin-right: 6px; }
.health li.ok::before { color: var(--good); }
.health li.bad::before { color: var(--bad); }
.steam { display: inline-block; line-height: 0; }
.topbar .who .steam img { height: 23px; width: auto; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { accent-color: var(--accent); }
.hudhost { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form .row input { flex: 1; }
.code { font: 700 17px var(--mono); color: var(--copper-hi); letter-spacing: 0.08em; }
.msg { font-size: 12.5px; min-height: 1.4em; }
.msg.ok { color: var(--good); }
.msg.err { color: var(--bad); }
textarea.textbox { width: 100%; min-height: 70px; background: var(--field); color: var(--copper); border: 1px solid var(--field-edge); font: 12px var(--mono); padding: 6px; resize: vertical; }

footer { margin-top: 26px; background: var(--page); border-top: 1px solid var(--footer-edge); padding: 14px max(10px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12.5px; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 6px; }
footer .brand { font: 600 14px var(--serif); color: var(--bright); }

/* ---------- themes (2026-11-09): html[data-theme], picked in the top bar, kept per browser ----------
   The default is the Swoobles forums' red (the forum's own art). Every other theme uses the same art recoloured by
   theme_art.py (the logo, the post balls, the title arrow and corner dots, the sub-bar dots, the nav shimmer). */
html[data-theme]:not([data-theme="swoobles"]) {
  --body-bg: linear-gradient(var(--page-top), var(--page) 420px) no-repeat, var(--page);
  --subbar-bg: var(--subbar) var(--art-subdots) right 4px top 5px no-repeat;
}

/* Dark: plain greys, soft blue links; easy on the eyes */
html[data-theme="dark"] {
  --page: #101216; --page-top: #171a20; --box: #15181d; --frame: #1b1f25; --frame-edge: #0b0d10; --line: #2a2f37;
  --bar-top: #2b3039; --bar-bottom: #1d2127; --bar-edge: #343a44;
  --red-hi: #2a2f37; --red-lo: #15181d; --nav-sep: #0c0e11; --glow: #6d8fd6;
  --nav-bg: linear-gradient(#2a2f37, #16191e);
  --text: #aab2bf; --bright: #e3e7ee; --white: #f3f5f8; --copper: #8fb0ee; --copper-hi: #b6cbf6;
  --link: #7d9fe6; --link-hi: #a9c0f2; --accent: #6d8fd6; --chevron: #9fb3d6;
  --banner-a: #1d2128; --banner-b: #0f1115; --banner-glow: rgba(109, 143, 214, 0.18);
  --subbar: #23272f; --subbar-text: #d7dce4; --subbar-line: #30353f;
  --btn: linear-gradient(#4a6bb2, #2f4a86); --btn-hover: linear-gradient(#5a7cc4, #36549a); --btn-dark: linear-gradient(#2a2f37, #1a1d23); --btn-edge: #0f1115;
  --field: #0c0e11; --field-edge: #343a44; --bar-fill: linear-gradient(#7d9fe6, #4a6bb2);
  --tick-done: radial-gradient(circle, #cfe0ff 0 15%, #6d8fd6 45%, #2f4a86 100%);
  --screen: #07090c; --overlay: rgba(10, 12, 16, 0.8); --flash-bg: rgba(10, 12, 16, 0.85); --warm: #e9dcc0;
  --hud-bg: #0c0e11; --hud-key: #7c8594; --footer-edge: #22262d;
  --banner-bg: #1b1b1b url("theme/header_bg.png") left top repeat-x;   /* the old Swoobles site's plain header */
}

/* MyBB Blue: the classic MyBB blue title bars on black */
html[data-theme="mybb"] {
  --page: #050608; --page-top: #0b1622; --box: #0a0d12; --frame: #0f141b; --frame-edge: #000; --line: #1b2a3a;
  --bar-top: #0a6fb2; --bar-bottom: #034a7a; --bar-edge: #023659;
  --red-hi: #0b5f99; --red-lo: #02253f; --nav-sep: #021b2e; --glow: #2c9be8;
  --nav-bg: linear-gradient(#0b5f99, #02253f);
  --text: #b8c4d2; --bright: #e8f0f8; --white: #f4f8fc; --copper: #5fb2f0; --copper-hi: #8fcaf6;
  --link: #3fa0ea; --link-hi: #79bdf3; --accent: #2c9be8; --chevron: #cfe6f8;
  --banner-a: #0b2236; --banner-b: #04090f; --banner-glow: rgba(44, 155, 232, 0.25);
  --subbar: #0f0f0f; --subbar-text: #e3ebf3; --subbar-line: #263c50;
  --btn: linear-gradient(#0a7cc4, #035487); --btn-hover: linear-gradient(#1b8fd8, #0563a0); --btn-dark: linear-gradient(#18222d, #0b1016); --btn-edge: #01223a;
  --field: #000; --field-edge: #1f3a54; --bar-fill: linear-gradient(#3fa0ea, #0a6fb2);
  --tick-done: radial-gradient(circle, #d6efff 0 15%, #2c9be8 45%, #034a7a 100%);
  --screen: #03060a; --overlay: rgba(2, 8, 14, 0.8); --flash-bg: rgba(2, 8, 14, 0.85); --warm: #dcecf8;
  --hud-bg: #03070b; --hud-key: #6f8aa3; --footer-edge: #0d1b28;
  --banner-bg: #04090f url("theme/header_bg_january.jpg") center top no-repeat;   /* Swoobles' January header */
}

/* Graphite & Gold: charcoal greys with warm gold, like a brass plate on a cell door */
html[data-theme="graphite"] {
  --page: #121212; --page-top: #1b1a18; --box: #181817; --frame: #1f1e1c; --frame-edge: #0a0a0a; --line: #33302a;
  --bar-top: #3a3631; --bar-bottom: #23211e; --bar-edge: #4a443b;
  --red-hi: #38342e; --red-lo: #1a1917; --nav-sep: #0f0e0d; --glow: #d4a63b;
  --nav-bg: linear-gradient(#38342e, #1a1917);
  --text: #bdb4a2; --bright: #ece6da; --white: #f6f2ea; --copper: #d9ad4c; --copper-hi: #ecc66e;
  --link: #d4a63b; --link-hi: #ecc66e; --accent: #d4a63b; --chevron: #e8c879;
  --banner-a: #2a2723; --banner-b: #121212; --banner-glow: rgba(212, 166, 59, 0.2);
  --subbar: #2b2824; --subbar-text: #eee6d4; --subbar-line: #3d3830;
  --btn: linear-gradient(#b8892d, #85611c); --btn-hover: linear-gradient(#c99a3a, #946d22); --btn-dark: linear-gradient(#36322c, #1e1c19); --btn-edge: #1a1917;
  --field: #0e0e0d; --field-edge: #4a443b; --bar-fill: linear-gradient(#ecc66e, #b8892d);
  --tick-done: radial-gradient(circle, #fff1c7 0 15%, #d4a63b 45%, #7a5a1c 100%);
  --screen: #08080a; --overlay: rgba(14, 13, 12, 0.8); --flash-bg: rgba(14, 13, 12, 0.85); --warm: #f1dca8;
  --hud-bg: #0e0e0d; --hud-key: #8f8574; --footer-edge: #26241f;
  --banner-bg: #121212 url("theme/header_bg_december.jpg") center top no-repeat;  /* Swoobles' December header */
}


/* Evergreen: deep pine green with cream text and soft gold */
html[data-theme="evergreen"] {
  --page: #0b120e; --page-top: #12201a; --box: #0f1813; --frame: #142019; --frame-edge: #050806; --line: #23362b;
  --bar-top: #2d5a40; --bar-bottom: #173324; --bar-edge: #1d4430;
  --red-hi: #24513a; --red-lo: #0f2219; --nav-sep: #0a1610; --glow: #7fcf9c;
  --nav-bg: linear-gradient(#24513a, #0f2219);
  --text: #b9c4b3; --bright: #ece8d6; --white: #f6f3e6; --copper: #d6be7a; --copper-hi: #ead597;
  --link: #8fd4a7; --link-hi: #b6e6c6; --accent: #6fbf8c; --chevron: #e3d8b0;
  --subbar: #1a2c22; --subbar-text: #ece8d6; --subbar-line: #2a4235;
  --btn: linear-gradient(#3f8a5e, #25603f); --btn-hover: linear-gradient(#4a9c6b, #2c6f49); --btn-dark: linear-gradient(#22332a, #121c17); --btn-edge: #0a1610;
  --field: #070c09; --field-edge: #2c4537; --bar-fill: linear-gradient(#8fd4a7, #3f8a5e);
  --tick-done: radial-gradient(circle, #e2f7e9 0 15%, #6fbf8c 45%, #25603f 100%);
  --screen: #050806; --overlay: rgba(6, 12, 9, 0.8); --flash-bg: rgba(6, 12, 9, 0.85); --warm: #efe2b5;
  --hud-bg: #070c09; --hud-key: #7f8f80; --footer-edge: #1b2a21;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(127, 207, 156, 0.18), transparent 60%), linear-gradient(#1a3326, #0b120e);
}

/* Royal Purple: dark violet with soft lavender */
html[data-theme="purple"] {
  --page: #0e0b14; --page-top: #18122a; --box: #130f1c; --frame: #191326; --frame-edge: #07050b; --line: #2e2442;
  --bar-top: #4b2f7a; --bar-bottom: #261843; --bar-edge: #3a2560;
  --red-hi: #432a6e; --red-lo: #1a1130; --nav-sep: #120c20; --glow: #b18cf0;
  --nav-bg: linear-gradient(#432a6e, #1a1130);
  --text: #bdb4cf; --bright: #ece6f8; --white: #f6f2fc; --copper: #c4a6f2; --copper-hi: #dac7f8;
  --link: #b18cf0; --link-hi: #cdb4f6; --accent: #a07ee6; --chevron: #e0d2fa;
  --subbar: #241838; --subbar-text: #ece6f8; --subbar-line: #362654;
  --btn: linear-gradient(#7a52c4, #523393); --btn-hover: linear-gradient(#8a62d4, #5e3ca6); --btn-dark: linear-gradient(#2a2140, #161024); --btn-edge: #120c20;
  --field: #08060d; --field-edge: #3a2c56; --bar-fill: linear-gradient(#c4a6f2, #7a52c4);
  --tick-done: radial-gradient(circle, #f1e8ff 0 15%, #a07ee6 45%, #523393 100%);
  --screen: #07050b; --overlay: rgba(10, 7, 16, 0.8); --flash-bg: rgba(10, 7, 16, 0.85); --warm: #efe2c6;
  --hud-bg: #08060d; --hud-key: #8a7fa3; --footer-edge: #221a33;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(177, 140, 240, 0.22), transparent 60%), linear-gradient(#24183e, #0e0b14);
}

/* Plum & Peach: aubergine bars with warm peach (no menu theme pairs these) */
html[data-theme="plum"] {
  --page: #120b10; --page-top: #20121c; --box: #170e15; --frame: #1e121b; --frame-edge: #08050a; --line: #3a2433;
  --bar-top: #5c2a4d; --bar-bottom: #2e1527; --bar-edge: #47203c;
  --red-hi: #522544; --red-lo: #1f0f1a; --nav-sep: #150a12; --glow: #f2a07b;
  --nav-bg: linear-gradient(#522544, #1f0f1a);
  --text: #cdb8c2; --bright: #f6e8ec; --white: #fcf4f6; --copper: #f2a07b; --copper-hi: #f8c0a4;
  --link: #f0a888; --link-hi: #f8c8b2; --accent: #e88d6a; --chevron: #f8cdb8;
  --subbar: #2b1626; --subbar-text: #f6e8ec; --subbar-line: #46263c;
  --btn: linear-gradient(#c66a52, #8e4434); --btn-hover: linear-gradient(#d57a60, #9c4e3c); --btn-dark: linear-gradient(#36202f, #1b0f18); --btn-edge: #150a12;
  --field: #0b0609; --field-edge: #4a2c40; --bar-fill: linear-gradient(#f8c0a4, #c66a52);
  --tick-done: radial-gradient(circle, #fff0e8 0 15%, #e88d6a 45%, #8e4434 100%);
  --screen: #08050a; --overlay: rgba(14, 8, 12, 0.8); --flash-bg: rgba(14, 8, 12, 0.85); --warm: #f8dcc8;
  --hud-bg: #0b0609; --hud-key: #9a8290; --footer-edge: #261420;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(242, 160, 123, 0.22), transparent 60%), linear-gradient(#2e1527, #120b10);
}

/* Lagoon: deep teal with coral */
html[data-theme="lagoon"] {
  --page: #071214; --page-top: #0c1f22; --box: #0b1719; --frame: #0f1d20; --frame-edge: #030809; --line: #1c3a3e;
  --bar-top: #146066; --bar-bottom: #0a3337; --bar-edge: #0f4a50;
  --red-hi: #11585e; --red-lo: #062226; --nav-sep: #04181b; --glow: #ff8a73;
  --nav-bg: linear-gradient(#11585e, #062226);
  --text: #b2c9c8; --bright: #e6f4f2; --white: #f2faf9; --copper: #ff9a80; --copper-hi: #ffbaa6;
  --link: #ff8f78; --link-hi: #ffb4a3; --accent: #ff7d63; --chevron: #bfe9e4;
  --subbar: #0d2a2d; --subbar-text: #e6f4f2; --subbar-line: #1b4246;
  --btn: linear-gradient(#e86a52, #b44c38); --btn-hover: linear-gradient(#f27c63, #c25844); --btn-dark: linear-gradient(#173236, #0a1a1c); --btn-edge: #04181b;
  --field: #030a0b; --field-edge: #1f4a4f; --bar-fill: linear-gradient(#ffb4a3, #e86a52);
  --tick-done: radial-gradient(circle, #fff0ec 0 15%, #ff7d63 45%, #b44c38 100%);
  --screen: #030809; --overlay: rgba(4, 12, 13, 0.8); --flash-bg: rgba(4, 12, 13, 0.85); --warm: #ffdcd0;
  --hud-bg: #030a0b; --hud-key: #7b9897; --footer-edge: #11272a;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(255, 138, 115, 0.2), transparent 60%), linear-gradient(#0f3a3e, #071214);
}

/* Olive Drab: army olive with sand, like a yard uniform */
html[data-theme="olive"] {
  --page: #10110b; --page-top: #1b1d12; --box: #15160e; --frame: #1b1c12; --frame-edge: #070705; --line: #34361f;
  --bar-top: #555a2e; --bar-bottom: #2d3018; --bar-edge: #434725;
  --red-hi: #4d5129; --red-lo: #1d1f11; --nav-sep: #13140b; --glow: #e3cf98;
  --nav-bg: linear-gradient(#4d5129, #1d1f11);
  --text: #c6c1a6; --bright: #efe9d2; --white: #f7f3e4; --copper: #e3cf98; --copper-hi: #f0e2b8;
  --link: #d9c58c; --link-hi: #ecdcae; --accent: #c9b277; --chevron: #ece0b8;
  --subbar: #282a17; --subbar-text: #efe9d2; --subbar-line: #3e4124;
  --btn: linear-gradient(#8a8a45, #5d5f2c); --btn-hover: linear-gradient(#999a50, #686a33); --btn-dark: linear-gradient(#2f311c, #191a0f); --btn-edge: #13140b;
  --field: #090906; --field-edge: #45482a; --bar-fill: linear-gradient(#f0e2b8, #8a8a45);
  --tick-done: radial-gradient(circle, #fbf4dc 0 15%, #c9b277 45%, #5d5f2c 100%);
  --screen: #070705; --overlay: rgba(10, 11, 7, 0.8); --flash-bg: rgba(10, 11, 7, 0.85); --warm: #f2e6c2;
  --hud-bg: #090906; --hud-key: #8e8b72; --footer-edge: #22231a;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(227, 207, 152, 0.18), transparent 60%), linear-gradient(#2d3018, #10110b);
}

/* Parchment: the one light theme, warm muted paper with soft terracotta title bars (no glare, no dark red) */
html[data-theme="parchment"] {
  --page: #d9ccb0; --page-top: #e2d6bc; --box: #e6dbc3; --frame: #d3c5a6; --frame-edge: #b7a57f; --line: #c7b690;
  --bar-top: #bf6b52; --bar-bottom: #a1543f; --bar-edge: #8e4a38;
  --red-hi: #b9654d; --red-lo: #94503d; --nav-sep: #7f4334; --glow: #ffd8a8;
  --nav-bg: linear-gradient(#b9654d, #94503d);
  --text: #4a4032; --bright: #2e271d; --white: #fff4e4; --copper: #a3533c; --copper-hi: #b9654d;
  --link: #a6553e; --link-hi: #bf6b52; --accent: #b9654d; --chevron: #ffe9c9;
  --subbar: #cdbd99; --subbar-text: #3a3125; --subbar-line: #bba980;
  --btn: linear-gradient(#c4715a, #a1543f); --btn-hover: linear-gradient(#cf7d65, #ad5e48); --btn-dark: linear-gradient(#d3c5a6, #c2b28d); --btn-edge: #8e7a56;
  --field: #ece3cf; --field-edge: #b7a57f; --bar-fill: linear-gradient(#cf7d65, #a1543f);
  --tick-done: radial-gradient(circle, #ffe6da 0 15%, #c4715a 45%, #8e4a38 100%);
  --screen: #05070a; --overlay: rgba(20, 14, 8, 0.78); --flash-bg: rgba(20, 14, 8, 0.85); --warm: #f3d9b0;
  --hud-bg: #ece3cf; --hud-key: #7f7058; --footer-edge: #c7b690; --good: #2f7032; --bad: #a8331f;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(191, 107, 82, 0.2), transparent 60%), linear-gradient(#e2d6bc, #cdbd99);
}
html[data-theme="parchment"] .btn.dark, html[data-theme="parchment"] .pad button { color: var(--bright); }
html[data-theme="parchment"] .topbar .who b, html[data-theme="parchment"] .topbar .who a, html[data-theme="parchment"] .themepick,
html[data-theme="parchment"] nav.main li a { color: #fff4e4; }
html[data-theme="parchment"] .banner .sub { color: #7f3f30; text-shadow: 0 1px 0 #efe4cc; }
html[data-theme="parchment"] .title { color: #fff4e4; }
html[data-theme="parchment"] .news h4, html[data-theme="parchment"] .rankline b { color: var(--bright); }
html[data-theme="parchment"] .sub-bar { text-shadow: none; }

/* 1.64 batch (2026-11-09): six more, none a colour pair of the others or of the in-game menu themes */
/* Slate & Rust: blue-grey stone with burnt orange */
html[data-theme="slate"] {
  --page: #121518; --page-top: #1b2025; --box: #161a1e; --frame: #1c2126; --frame-edge: #090b0d; --line: #2c333b;
  --bar-top: #3b4652; --bar-bottom: #232a32; --bar-edge: #313b45;
  --red-hi: #36414c; --red-lo: #1a1f25; --nav-sep: #101418; --glow: #e0773c;
  --nav-bg: linear-gradient(#36414c, #1a1f25);
  --text: #b5bcc4; --bright: #e8ecf0; --white: #f4f6f8; --copper: #e58a52; --copper-hi: #f2a677;
  --link: #e8844a; --link-hi: #f3a575; --accent: #d9703a; --chevron: #f0c2a4;
  --subbar: #232a31; --subbar-text: #e8ecf0; --subbar-line: #333c46;
  --btn: linear-gradient(#c96a35, #96491f); --btn-hover: linear-gradient(#d87a44, #a55427); --btn-dark: linear-gradient(#2c343c, #181d22); --btn-edge: #101418;
  --field: #0b0d10; --field-edge: #36404a; --bar-fill: linear-gradient(#f2a677, #c96a35);
  --tick-done: radial-gradient(circle, #ffe7d8 0 15%, #d9703a 45%, #96491f 100%);
  --screen: #07090b; --overlay: rgba(10, 12, 15, 0.8); --flash-bg: rgba(10, 12, 15, 0.85); --warm: #f6d7bf;
  --hud-bg: #0b0d10; --hud-key: #87919c; --footer-edge: #20262c;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(224, 119, 60, 0.2), transparent 60%), linear-gradient(#26303a, #121518);
}

/* Mocha: dark roast brown with caramel and cream */
html[data-theme="mocha"] {
  --page: #14100d; --page-top: #201914; --box: #191410; --frame: #1f1813; --frame-edge: #0a0806; --line: #3a2e25;
  --bar-top: #5a4231; --bar-bottom: #33251b; --bar-edge: #4a3628;
  --red-hi: #523c2c; --red-lo: #241a13; --nav-sep: #17110c; --glow: #e0a96a;
  --nav-bg: linear-gradient(#523c2c, #241a13);
  --text: #c9b9a8; --bright: #f2e7da; --white: #faf3ea; --copper: #e3ab6c; --copper-hi: #f0c592;
  --link: #e2a866; --link-hi: #f0c592; --accent: #d39654; --chevron: #f2dcc2;
  --subbar: #2c2018; --subbar-text: #f2e7da; --subbar-line: #44342a;
  --btn: linear-gradient(#b67c42, #84552a); --btn-hover: linear-gradient(#c58b4f, #936032); --btn-dark: linear-gradient(#36291f, #1c1510); --btn-edge: #17110c;
  --field: #0d0a08; --field-edge: #4a3a2e; --bar-fill: linear-gradient(#f0c592, #b67c42);
  --tick-done: radial-gradient(circle, #fff1df 0 15%, #d39654 45%, #84552a 100%);
  --screen: #080605; --overlay: rgba(14, 10, 8, 0.8); --flash-bg: rgba(14, 10, 8, 0.85); --warm: #f5dcbd;
  --hud-bg: #0d0a08; --hud-key: #9a8a7a; --footer-edge: #2a2019;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(224, 169, 106, 0.2), transparent 60%), linear-gradient(#33251b, #14100d);
}

/* Indigo & Amber: deep indigo night with warm amber */
html[data-theme="indigo"] {
  --page: #0c0d1a; --page-top: #141631; --box: #10122a; --frame: #141633; --frame-edge: #06070f; --line: #262a52;
  --bar-top: #333a86; --bar-bottom: #1c2052; --bar-edge: #2a3070;
  --red-hi: #2f357c; --red-lo: #151838; --nav-sep: #0d0f24; --glow: #ffb547;
  --nav-bg: linear-gradient(#2f357c, #151838);
  --text: #b6b9d6; --bright: #e9eaf8; --white: #f5f5fc; --copper: #ffb547; --copper-hi: #ffcd7f;
  --link: #ffb24a; --link-hi: #ffcc80; --accent: #f5a32e; --chevron: #ffe0a8;
  --subbar: #1b1e45; --subbar-text: #e9eaf8; --subbar-line: #2c3166;
  --btn: linear-gradient(#e0912a, #a8661a); --btn-hover: linear-gradient(#eda13a, #b87322); --btn-dark: linear-gradient(#262a5a, #141632); --btn-edge: #0d0f24;
  --field: #07081a; --field-edge: #2f3570; --bar-fill: linear-gradient(#ffcd7f, #e0912a);
  --tick-done: radial-gradient(circle, #fff3dc 0 15%, #f5a32e 45%, #a8661a 100%);
  --screen: #05060f; --overlay: rgba(8, 9, 22, 0.8); --flash-bg: rgba(8, 9, 22, 0.85); --warm: #ffe2b0;
  --hud-bg: #07081a; --hud-key: #8a8db3; --footer-edge: #1d2048;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(255, 181, 71, 0.2), transparent 60%), linear-gradient(#1f2358, #0c0d1a);
}

/* Mint: charcoal with fresh mint */
html[data-theme="mint"] {
  --page: #101313; --page-top: #171c1c; --box: #141818; --frame: #191e1e; --frame-edge: #080a0a; --line: #283232;
  --bar-top: #2f3b3a; --bar-bottom: #1c2423; --bar-edge: #2a3534;
  --red-hi: #2c3837; --red-lo: #161c1c; --nav-sep: #0d1111; --glow: #6fe3b8;
  --nav-bg: linear-gradient(#2c3837, #161c1c);
  --text: #b6c4bf; --bright: #e6f2ee; --white: #f2faf7; --copper: #7de8c0; --copper-hi: #a6f2d6;
  --link: #6fe0b6; --link-hi: #a3f0d3; --accent: #4fd3a3; --chevron: #c9f5e4;
  --subbar: #1f2827; --subbar-text: #e6f2ee; --subbar-line: #2f3d3b;
  --btn: linear-gradient(#3fb38a, #2a7f61); --btn-hover: linear-gradient(#4cc298, #318d6c); --btn-dark: linear-gradient(#273130, #151a1a); --btn-edge: #0d1111;
  --field: #090c0c; --field-edge: #314140; --bar-fill: linear-gradient(#a6f2d6, #3fb38a);
  --tick-done: radial-gradient(circle, #e6fff5 0 15%, #4fd3a3 45%, #2a7f61 100%);
  --screen: #060808; --overlay: rgba(9, 12, 12, 0.8); --flash-bg: rgba(9, 12, 12, 0.85); --warm: #d8f5e9;
  --hud-bg: #090c0c; --hud-key: #82938e; --footer-edge: #1d2524;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(111, 227, 184, 0.16), transparent 60%), linear-gradient(#222c2b, #101313);
}

/* Admiral: navy with brass gold */
html[data-theme="admiral"] {
  --page: #080d16; --page-top: #0f1828; --box: #0b1220; --frame: #101a2c; --frame-edge: #04070c; --line: #1d2b44;
  --bar-top: #1c3358; --bar-bottom: #0f1e36; --bar-edge: #182b4c;
  --red-hi: #1b3156; --red-lo: #0b1528; --nav-sep: #060c18; --glow: #d9b25c;
  --nav-bg: linear-gradient(#1b3156, #0b1528);
  --text: #b3bdcc; --bright: #e8edf5; --white: #f5f7fb; --copper: #dcb664; --copper-hi: #ecce8c;
  --link: #d8b05c; --link-hi: #ecce8c; --accent: #c9a14a; --chevron: #f0dcab;
  --subbar: #12213a; --subbar-text: #e8edf5; --subbar-line: #1f3254;
  --btn: linear-gradient(#b8913f, #87692a); --btn-hover: linear-gradient(#c8a04c, #967532); --btn-dark: linear-gradient(#18263f, #0b1322); --btn-edge: #060c18;
  --field: #050a12; --field-edge: #22375a; --bar-fill: linear-gradient(#ecce8c, #b8913f);
  --tick-done: radial-gradient(circle, #fff4d8 0 15%, #c9a14a 45%, #87692a 100%);
  --screen: #04070c; --overlay: rgba(5, 9, 16, 0.8); --flash-bg: rgba(5, 9, 16, 0.85); --warm: #f2e0b4;
  --hud-bg: #050a12; --hud-key: #7f8ba0; --footer-edge: #142038;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(217, 178, 92, 0.18), transparent 60%), linear-gradient(#142644, #080d16);
}

/* Arctic: the second light theme, soft ice-grey with navy bars (muted, no glare) */
html[data-theme="arctic"] {
  --page: #cdd5dd; --page-top: #d8dfe6; --box: #dde3e9; --frame: #c6cfd8; --frame-edge: #a3afbc; --line: #b6c1cc;
  --bar-top: #3d5a7a; --bar-bottom: #2c4560; --bar-edge: #243a52;
  --red-hi: #3a5675; --red-lo: #2a4058; --nav-sep: #20334a; --glow: #bfe0ff;
  --nav-bg: linear-gradient(#3a5675, #2a4058);
  --text: #34404d; --bright: #1d2631; --white: #f1f5f9; --copper: #2f5f8f; --copper-hi: #3d74ab;
  --link: #2e6399; --link-hi: #3d7ab8; --accent: #3a6ea3; --chevron: #dcebfa;
  --subbar: #bcc7d2; --subbar-text: #26313d; --subbar-line: #a9b6c3;
  --btn: linear-gradient(#4a77a5, #335a82); --btn-hover: linear-gradient(#5785b4, #3c668f); --btn-dark: linear-gradient(#c6cfd8, #b3bec9); --btn-edge: #7f8fa0;
  --field: #e6ebf0; --field-edge: #a3afbc; --bar-fill: linear-gradient(#6a98c6, #335a82);
  --tick-done: radial-gradient(circle, #e6f2ff 0 15%, #4a77a5 45%, #243a52 100%);
  --screen: #05070a; --overlay: rgba(10, 16, 24, 0.78); --flash-bg: rgba(10, 16, 24, 0.85); --warm: #dbe9f7;
  --hud-bg: #e6ebf0; --hud-key: #6c7a89; --footer-edge: #b6c1cc; --good: #2b7a3a; --bad: #a8331f;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(74, 119, 165, 0.18), transparent 60%), linear-gradient(#d8dfe6, #bcc7d2);
}
html[data-theme="arctic"] .btn.dark, html[data-theme="arctic"] .pad button { color: var(--bright); }
html[data-theme="arctic"] .topbar .who b, html[data-theme="arctic"] .topbar .who a, html[data-theme="arctic"] .themepick,
html[data-theme="arctic"] nav.main li a { color: #f1f5f9; }
html[data-theme="arctic"] .banner .sub { color: #2c4560; text-shadow: 0 1px 0 #e4eaf0; }
html[data-theme="arctic"] .title { color: #f1f5f9; }
html[data-theme="arctic"] .news h4, html[data-theme="arctic"] .rankline b { color: var(--bright); }
html[data-theme="arctic"] .sub-bar { text-shadow: none; }

/* 2026-11-10 batch: six more (Storm, Sage & Terracotta, Ink & Ivory, Aurora, Sandstone and Lilac, the last two light) */
/* Storm: thundercloud charcoal-blue with lemon lightning */
html[data-theme="storm"] {
  --page: #0f1216; --page-top: #171c23; --box: #13171c; --frame: #181d24; --frame-edge: #080a0d; --line: #29313b;
  --bar-top: #333d4a; --bar-bottom: #1e252e; --bar-edge: #2b3440;
  --red-hi: #2f3945; --red-lo: #171c22; --nav-sep: #0d1014; --glow: #f5e04a;
  --nav-bg: linear-gradient(#2f3945, #171c22);
  --text: #b4bcc6; --bright: #e8edf2; --white: #f4f7fa; --copper: #f2dc4e; --copper-hi: #f8ea86;
  --link: #f0d84a; --link-hi: #f8e98a; --accent: #e8cf2e; --chevron: #fbf1b8;
  --subbar: #20262f; --subbar-text: #e8edf2; --subbar-line: #313a46;
  --btn: linear-gradient(#d4bb24, #9c8814); --btn-hover: linear-gradient(#e2c932, #ab961a); --btn-dark: linear-gradient(#29313b, #161a20); --btn-edge: #0d1014;
  --field: #0a0c0f; --field-edge: #333d4a; --bar-fill: linear-gradient(#f8ea86, #d4bb24);
  --tick-done: radial-gradient(circle, #fffbe0 0 15%, #e8cf2e 45%, #9c8814 100%);
  --screen: #06080a; --overlay: rgba(9, 11, 14, 0.8); --flash-bg: rgba(9, 11, 14, 0.85); --warm: #f7eeb8;
  --hud-bg: #0a0c0f; --hud-key: #86909c; --footer-edge: #1d232b;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(245, 224, 74, 0.14), transparent 60%), linear-gradient(#222a34, #0f1216);
}



/* Sage & Terracotta: muted sage-green bars with warm terracotta */
html[data-theme="sage"] {
  --page: #101310; --page-top: #182019; --box: #141814; --frame: #1a1f1a; --frame-edge: #080a08; --line: #2e372e;
  --bar-top: #4a5b4a; --bar-bottom: #2b362b; --bar-edge: #3b4a3b;
  --red-hi: #455545; --red-lo: #1f281f; --nav-sep: #121812; --glow: #e0865c;
  --nav-bg: linear-gradient(#455545, #1f281f);
  --text: #bcc4b8; --bright: #ecf0e8; --white: #f6f8f3; --copper: #e48d62; --copper-hi: #f0ac8a;
  --link: #e2875c; --link-hi: #f0ac8a; --accent: #d47a50; --chevron: #f4d4c2;
  --subbar: #253025; --subbar-text: #ecf0e8; --subbar-line: #364336;
  --btn: linear-gradient(#c46f48, #924e30); --btn-hover: linear-gradient(#d27e56, #a05a38); --btn-dark: linear-gradient(#2c362c, #171c17); --btn-edge: #121812;
  --field: #0a0c0a; --field-edge: #3b4a3b; --bar-fill: linear-gradient(#f0ac8a, #c46f48);
  --tick-done: radial-gradient(circle, #fff0e6 0 15%, #d47a50 45%, #924e30 100%);
  --screen: #070807; --overlay: rgba(10, 13, 10, 0.8); --flash-bg: rgba(10, 13, 10, 0.85); --warm: #f4dcc8;
  --hud-bg: #0a0c0a; --hud-key: #8c9688; --footer-edge: #1f271f;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(224, 134, 92, 0.16), transparent 60%), linear-gradient(#2b362b, #101310);
}

/* Ink & Ivory: deep ink-black blue with warm ivory, like a fountain pen on old paper */
html[data-theme="ink"] {
  --page: #07090f; --page-top: #0d111c; --box: #0a0d16; --frame: #0e121d; --frame-edge: #030409; --line: #1f2535;
  --bar-top: #22293d; --bar-bottom: #131827; --bar-edge: #1c2234;
  --red-hi: #20263a; --red-lo: #0f1320; --nav-sep: #080a12; --glow: #f2e6c8;
  --nav-bg: linear-gradient(#20263a, #0f1320);
  --text: #b9b6aa; --bright: #f2ecdc; --white: #faf6ea; --copper: #eadcb6; --copper-hi: #f7efd6;
  --link: #e8d8ae; --link-hi: #f7efd6; --accent: #d9c690; --chevron: #f7efd6;
  --subbar: #151a29; --subbar-text: #f2ecdc; --subbar-line: #252c40;
  --btn: linear-gradient(#c9b47c, #96834e); --btn-hover: linear-gradient(#d6c28a, #a48f58); --btn-dark: linear-gradient(#1b2132, #0c0f19); --btn-edge: #080a12;
  --field: #05070c; --field-edge: #262d42; --bar-fill: linear-gradient(#f7efd6, #c9b47c);
  --tick-done: radial-gradient(circle, #fffdf4 0 15%, #d9c690 45%, #96834e 100%);
  --screen: #03040a; --overlay: rgba(5, 7, 12, 0.82); --flash-bg: rgba(5, 7, 12, 0.86); --warm: #f4ead0;
  --hud-bg: #05070c; --hud-key: #8c8a80; --footer-edge: #161b2a;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(242, 230, 200, 0.12), transparent 60%), linear-gradient(#151a2a, #07090f);
}

/* Aurora: a polar night, teal bars with a violet glow */
html[data-theme="aurora"] {
  --page: #070b12; --page-top: #0c1620; --box: #0a111a; --frame: #0d1722; --frame-edge: #03060a; --line: #1a2c3a;
  --bar-top: #145e62; --bar-bottom: #0b3238; --bar-edge: #10494e;
  --red-hi: #12565a; --red-lo: #08242a; --nav-sep: #04161a; --glow: #b98cff;
  --nav-bg: linear-gradient(#12565a, #08242a);
  --text: #b0c4cc; --bright: #e4f1f4; --white: #f1f8fa; --copper: #c3a0ff; --copper-hi: #dac6ff;
  --link: #6ee8d2; --link-hi: #a8f3e6; --accent: #a87cf6; --chevron: #c8f7ee;
  --subbar: #0d272e; --subbar-text: #e4f1f4; --subbar-line: #173c44;
  --btn: linear-gradient(#8d5fe0, #6240a8); --btn-hover: linear-gradient(#9b6fec, #6e4ab6); --btn-dark: linear-gradient(#142a32, #08141a); --btn-edge: #04161a;
  --field: #04080d; --field-edge: #1a4a52; --bar-fill: linear-gradient(#6ee8d2, #8d5fe0);
  --tick-done: radial-gradient(circle, #eaffff 0 15%, #6ee8d2 45%, #6240a8 100%);
  --screen: #03060a; --overlay: rgba(4, 8, 13, 0.8); --flash-bg: rgba(4, 8, 13, 0.85); --warm: #dcd0ff;
  --hud-bg: #04080d; --hud-key: #7c96a0; --footer-edge: #10232c;
  --banner-bg: radial-gradient(100% 120% at 80% -20%, rgba(110, 232, 210, 0.16), transparent 55%), radial-gradient(90% 120% at 20% -30%, rgba(185, 140, 255, 0.16), transparent 55%), linear-gradient(#0c2028, #070b12);
}

/* Sandstone: a light theme, warm sand with deep teal bars (muted, no glare) */
html[data-theme="sandstone"] {
  --page: #d6c9ae; --page-top: #dfd3ba; --box: #e3d8c1; --frame: #cfc1a3; --frame-edge: #a99a78; --line: #c1b08c;
  --bar-top: #2f6b6b; --bar-bottom: #215050; --bar-edge: #1a4242;
  --red-hi: #2c6464; --red-lo: #1f4a4a; --nav-sep: #173c3c; --glow: #bfeee6;
  --nav-bg: linear-gradient(#2c6464, #1f4a4a);
  --text: #423a2c; --bright: #2a241a; --white: #f6f1e6; --copper: #1f6a68; --copper-hi: #2a807d;
  --link: #1d6d6a; --link-hi: #27857f; --accent: #2b7a76; --chevron: #d8f4ef;
  --subbar: #c9ba98; --subbar-text: #332c20; --subbar-line: #b5a37e;
  --btn: linear-gradient(#368582, #25605e); --btn-hover: linear-gradient(#41938f, #2c6c69); --btn-dark: linear-gradient(#cfc1a3, #bdae8c); --btn-edge: #85795c;
  --field: #ebe2cf; --field-edge: #a99a78; --bar-fill: linear-gradient(#56aaa4, #25605e);
  --tick-done: radial-gradient(circle, #e0fffa 0 15%, #368582 45%, #1a4242 100%);
  --screen: #05070a; --overlay: rgba(20, 16, 10, 0.78); --flash-bg: rgba(20, 16, 10, 0.85); --warm: #f0e2c4;
  --hud-bg: #ebe2cf; --hud-key: #7a6f58; --footer-edge: #c1b08c; --good: #2b7a3a; --bad: #a8331f;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(47, 107, 107, 0.16), transparent 60%), linear-gradient(#dfd3ba, #c9ba98);
}

/* Lilac: a light theme, soft lavender-grey with plum bars (muted, no glare) */
html[data-theme="lilac"] {
  --page: #d3cfdb; --page-top: #dcd8e3; --box: #e1dde8; --frame: #cbc6d6; --frame-edge: #a49db6; --line: #bcb5cc;
  --bar-top: #6a4a82; --bar-bottom: #4e3462; --bar-edge: #432c55;
  --red-hi: #654679; --red-lo: #4a3160; --nav-sep: #3c2650; --glow: #e8d4ff;
  --nav-bg: linear-gradient(#654679, #4a3160);
  --text: #3b3446; --bright: #241d2e; --white: #f6f2fa; --copper: #6a3f8c; --copper-hi: #8150a8;
  --link: #6c3f90; --link-hi: #8656ad; --accent: #7a4c9e; --chevron: #f0e2ff;
  --subbar: #c4bdd2; --subbar-text: #2c2536; --subbar-line: #aea6c0;
  --btn: linear-gradient(#7d559a, #5a3a74); --btn-hover: linear-gradient(#8a62a8, #664281); --btn-dark: linear-gradient(#cbc6d6, #b8b1c8); --btn-edge: #7d7590;
  --field: #e9e6ee; --field-edge: #a49db6; --bar-fill: linear-gradient(#a27fc0, #5a3a74);
  --tick-done: radial-gradient(circle, #f6eeff 0 15%, #7d559a 45%, #432c55 100%);
  --screen: #05070a; --overlay: rgba(16, 12, 22, 0.78); --flash-bg: rgba(16, 12, 22, 0.85); --warm: #e9dcf6;
  --hud-bg: #e9e6ee; --hud-key: #756c86; --footer-edge: #bcb5cc; --good: #2b7a3a; --bad: #a8331f;
  --banner-bg: radial-gradient(120% 140% at 85% -10%, rgba(106, 74, 130, 0.16), transparent 60%), linear-gradient(#dcd8e3, #c4bdd2);
}
html[data-theme="sandstone"] .btn.dark, html[data-theme="sandstone"] .pad button { color: var(--bright); }
html[data-theme="sandstone"] .topbar .who b, html[data-theme="sandstone"] .topbar .who a, html[data-theme="sandstone"] .themepick,
html[data-theme="sandstone"] nav.main li a { color: var(--white); }
html[data-theme="sandstone"] .banner .sub { color: #215050; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
html[data-theme="sandstone"] .title { color: var(--white); }
html[data-theme="sandstone"] .news h4, html[data-theme="sandstone"] .rankline b { color: var(--bright); }
html[data-theme="sandstone"] .sub-bar { text-shadow: none; }
html[data-theme="lilac"] .btn.dark, html[data-theme="lilac"] .pad button { color: var(--bright); }
html[data-theme="lilac"] .topbar .who b, html[data-theme="lilac"] .topbar .who a, html[data-theme="lilac"] .themepick,
html[data-theme="lilac"] nav.main li a { color: var(--white); }
html[data-theme="lilac"] .banner .sub { color: #4e3462; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
html[data-theme="lilac"] .title { color: var(--white); }
html[data-theme="lilac"] .news h4, html[data-theme="lilac"] .rankline b { color: var(--bright); }
html[data-theme="lilac"] .sub-bar { text-shadow: none; }

/* each theme's recoloured forum art and logo (theme_art.py writes them) */
html[data-theme="dark"] { --art-arrow: url("theme/dark/title_bar_left_side_arrow.png"); --art-dots: url("theme/dark/title_bar_icon_1.png");
  --art-ball: url("theme/dark/forum_icon_sprite.png"); --art-navfx: url("theme/dark/nav_main_effect.png"); --art-subdots: url("theme/dark/sub_title_bar_dots.png"); }
html[data-theme="dark"] .banner img { content: url("swoobles_logo_dark.png"); }
html[data-theme="mybb"] { --art-arrow: url("theme/mybb/title_bar_left_side_arrow.png"); --art-dots: url("theme/mybb/title_bar_icon_1.png");
  --art-ball: url("theme/mybb/forum_icon_sprite.png"); --art-navfx: url("theme/mybb/nav_main_effect.png"); --art-subdots: url("theme/mybb/sub_title_bar_dots.png"); }
html[data-theme="mybb"] .banner img { content: url("swoobles_logo_mybb.png"); }
html[data-theme="graphite"] { --art-arrow: url("theme/graphite/title_bar_left_side_arrow.png"); --art-dots: url("theme/graphite/title_bar_icon_1.png");
  --art-ball: url("theme/graphite/forum_icon_sprite.png"); --art-navfx: url("theme/graphite/nav_main_effect.png"); --art-subdots: url("theme/graphite/sub_title_bar_dots.png"); }
html[data-theme="graphite"] .banner img { content: url("swoobles_logo_graphite.png"); }
html[data-theme="evergreen"] { --art-arrow: url("theme/evergreen/title_bar_left_side_arrow.png"); --art-dots: url("theme/evergreen/title_bar_icon_1.png");
  --art-ball: url("theme/evergreen/forum_icon_sprite.png"); --art-navfx: url("theme/evergreen/nav_main_effect.png"); --art-subdots: url("theme/evergreen/sub_title_bar_dots.png"); }
html[data-theme="evergreen"] .banner img { content: url("swoobles_logo_evergreen.png"); }
html[data-theme="purple"] { --art-arrow: url("theme/purple/title_bar_left_side_arrow.png"); --art-dots: url("theme/purple/title_bar_icon_1.png");
  --art-ball: url("theme/purple/forum_icon_sprite.png"); --art-navfx: url("theme/purple/nav_main_effect.png"); --art-subdots: url("theme/purple/sub_title_bar_dots.png"); }
html[data-theme="purple"] .banner img { content: url("swoobles_logo_purple.png"); }
html[data-theme="plum"] { --art-arrow: url("theme/plum/title_bar_left_side_arrow.png"); --art-dots: url("theme/plum/title_bar_icon_1.png");
  --art-ball: url("theme/plum/forum_icon_sprite.png"); --art-navfx: url("theme/plum/nav_main_effect.png"); --art-subdots: url("theme/plum/sub_title_bar_dots.png"); }
html[data-theme="plum"] .banner img { content: url("swoobles_logo_plum.png"); }
html[data-theme="lagoon"] { --art-arrow: url("theme/lagoon/title_bar_left_side_arrow.png"); --art-dots: url("theme/lagoon/title_bar_icon_1.png");
  --art-ball: url("theme/lagoon/forum_icon_sprite.png"); --art-navfx: url("theme/lagoon/nav_main_effect.png"); --art-subdots: url("theme/lagoon/sub_title_bar_dots.png"); }
html[data-theme="lagoon"] .banner img { content: url("swoobles_logo_lagoon.png"); }
html[data-theme="olive"] { --art-arrow: url("theme/olive/title_bar_left_side_arrow.png"); --art-dots: url("theme/olive/title_bar_icon_1.png");
  --art-ball: url("theme/olive/forum_icon_sprite.png"); --art-navfx: url("theme/olive/nav_main_effect.png"); --art-subdots: url("theme/olive/sub_title_bar_dots.png"); }
html[data-theme="olive"] .banner img { content: url("swoobles_logo_olive.png"); }
html[data-theme="parchment"] { --art-arrow: url("theme/parchment/title_bar_left_side_arrow.png"); --art-dots: url("theme/parchment/title_bar_icon_1.png");
  --art-ball: url("theme/parchment/forum_icon_sprite.png"); --art-navfx: url("theme/parchment/nav_main_effect.png"); --art-subdots: url("theme/parchment/sub_title_bar_dots.png"); }
html[data-theme="parchment"] .banner img { content: url("swoobles_logo_parchment.png"); }

/* forum posts (game applications), lists and the admin */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
ul.list, ol.list { margin: 4px 0 6px; padding-left: 20px; }
ul.list li, ol.list li { margin: 3px 0; }
ul.checklist { list-style: none; padding-left: 4px; }
ul.checklist li::before { content: "\2714"; color: var(--good); margin-right: 8px; }
code { font: 12px var(--mono); color: var(--copper-hi); }
.post { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; }
.post .who { padding: 10px; background: var(--frame); border-right: 1px solid var(--line); font-size: 12.5px; }
.post .who b { display: block; color: var(--copper); font: 700 14px var(--table); overflow-wrap: anywhere; }
.post .who .role { color: var(--accent); font-weight: 700; }
.post .body { padding: 10px 12px; min-width: 0; }
.post .body h5 { margin: 10px 0 2px; color: var(--bright); font: 700 13px var(--table); }
.post .body h5:first-child { margin-top: 0; }
.post .when { font-size: 11.5px; color: var(--text); opacity: 0.8; margin-bottom: 6px; }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.files a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line); background: var(--box); font-size: 12.5px; }
.files img { display: block; max-width: 220px; max-height: 140px; border: 1px solid var(--line); }
.status { display: inline-block; padding: 0 7px; border-radius: 2px; font: 700 11.5px var(--table); text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid currentColor; }
.status.open { color: var(--copper-hi); } .status.approved { color: var(--good); } .status.denied { color: var(--bad); } .status.withdrawn { color: var(--text); }
.decision { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--frame); }
table.forum input.textbox { width: 90px; }
@media (max-width: 640px) { .post { grid-template-columns: minmax(0, 1fr); } .post .who { border-right: 0; border-bottom: 1px solid var(--line); } }

html[data-theme="slate"] { --art-arrow: url("theme/slate/title_bar_left_side_arrow.png"); --art-dots: url("theme/slate/title_bar_icon_1.png");
  --art-ball: url("theme/slate/forum_icon_sprite.png"); --art-navfx: url("theme/slate/nav_main_effect.png"); --art-subdots: url("theme/slate/sub_title_bar_dots.png"); }
html[data-theme="slate"] .banner img { content: url("swoobles_logo_slate.png"); }
html[data-theme="mocha"] { --art-arrow: url("theme/mocha/title_bar_left_side_arrow.png"); --art-dots: url("theme/mocha/title_bar_icon_1.png");
  --art-ball: url("theme/mocha/forum_icon_sprite.png"); --art-navfx: url("theme/mocha/nav_main_effect.png"); --art-subdots: url("theme/mocha/sub_title_bar_dots.png"); }
html[data-theme="mocha"] .banner img { content: url("swoobles_logo_mocha.png"); }
html[data-theme="indigo"] { --art-arrow: url("theme/indigo/title_bar_left_side_arrow.png"); --art-dots: url("theme/indigo/title_bar_icon_1.png");
  --art-ball: url("theme/indigo/forum_icon_sprite.png"); --art-navfx: url("theme/indigo/nav_main_effect.png"); --art-subdots: url("theme/indigo/sub_title_bar_dots.png"); }
html[data-theme="indigo"] .banner img { content: url("swoobles_logo_indigo.png"); }
html[data-theme="mint"] { --art-arrow: url("theme/mint/title_bar_left_side_arrow.png"); --art-dots: url("theme/mint/title_bar_icon_1.png");
  --art-ball: url("theme/mint/forum_icon_sprite.png"); --art-navfx: url("theme/mint/nav_main_effect.png"); --art-subdots: url("theme/mint/sub_title_bar_dots.png"); }
html[data-theme="mint"] .banner img { content: url("swoobles_logo_mint.png"); }
html[data-theme="admiral"] { --art-arrow: url("theme/admiral/title_bar_left_side_arrow.png"); --art-dots: url("theme/admiral/title_bar_icon_1.png");
  --art-ball: url("theme/admiral/forum_icon_sprite.png"); --art-navfx: url("theme/admiral/nav_main_effect.png"); --art-subdots: url("theme/admiral/sub_title_bar_dots.png"); }
html[data-theme="admiral"] .banner img { content: url("swoobles_logo_admiral.png"); }
html[data-theme="arctic"] { --art-arrow: url("theme/arctic/title_bar_left_side_arrow.png"); --art-dots: url("theme/arctic/title_bar_icon_1.png");
  --art-ball: url("theme/arctic/forum_icon_sprite.png"); --art-navfx: url("theme/arctic/nav_main_effect.png"); --art-subdots: url("theme/arctic/sub_title_bar_dots.png"); }
html[data-theme="arctic"] .banner img { content: url("swoobles_logo_arctic.png"); }

html[data-theme="storm"] { --art-arrow: url("theme/storm/title_bar_left_side_arrow.png"); --art-dots: url("theme/storm/title_bar_icon_1.png");
  --art-ball: url("theme/storm/forum_icon_sprite.png"); --art-navfx: url("theme/storm/nav_main_effect.png"); --art-subdots: url("theme/storm/sub_title_bar_dots.png"); }
html[data-theme="storm"] .banner img { content: url("swoobles_logo_storm.png"); }
html[data-theme="aurora"] { --art-arrow: url("theme/aurora/title_bar_left_side_arrow.png"); --art-dots: url("theme/aurora/title_bar_icon_1.png");
  --art-ball: url("theme/aurora/forum_icon_sprite.png"); --art-navfx: url("theme/aurora/nav_main_effect.png"); --art-subdots: url("theme/aurora/sub_title_bar_dots.png"); }
html[data-theme="aurora"] .banner img { content: url("swoobles_logo_aurora.png"); }
html[data-theme="sandstone"] { --art-arrow: url("theme/sandstone/title_bar_left_side_arrow.png"); --art-dots: url("theme/sandstone/title_bar_icon_1.png");
  --art-ball: url("theme/sandstone/forum_icon_sprite.png"); --art-navfx: url("theme/sandstone/nav_main_effect.png"); --art-subdots: url("theme/sandstone/sub_title_bar_dots.png"); }
html[data-theme="sandstone"] .banner img { content: url("swoobles_logo_sandstone.png"); }
html[data-theme="lilac"] { --art-arrow: url("theme/lilac/title_bar_left_side_arrow.png"); --art-dots: url("theme/lilac/title_bar_icon_1.png");
  --art-ball: url("theme/lilac/forum_icon_sprite.png"); --art-navfx: url("theme/lilac/nav_main_effect.png"); --art-subdots: url("theme/lilac/sub_title_bar_dots.png"); }
html[data-theme="lilac"] .banner img { content: url("swoobles_logo_lilac.png"); }

html[data-theme="sage"] { --art-arrow: url("theme/sage/title_bar_left_side_arrow.png"); --art-dots: url("theme/sage/title_bar_icon_1.png");
  --art-ball: url("theme/sage/forum_icon_sprite.png"); --art-navfx: url("theme/sage/nav_main_effect.png"); --art-subdots: url("theme/sage/sub_title_bar_dots.png"); }
html[data-theme="sage"] .banner img { content: url("swoobles_logo_sage.png"); }
html[data-theme="ink"] { --art-arrow: url("theme/ink/title_bar_left_side_arrow.png"); --art-dots: url("theme/ink/title_bar_icon_1.png");
  --art-ball: url("theme/ink/forum_icon_sprite.png"); --art-navfx: url("theme/ink/nav_main_effect.png"); --art-subdots: url("theme/ink/sub_title_bar_dots.png"); }
html[data-theme="ink"] .banner img { content: url("swoobles_logo_ink.png"); }

.tag.hot { color: var(--warm); font-weight: 700; }
.keepplay { color: var(--bright); font: 12.5px var(--body); margin-left: 4px; }
.overlay .next { margin: 6px 0 2px; color: var(--warm); font-size: 13px; }

/* the profile (the forums' member profile) */
.profile { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.profile .pname { font: 700 26px var(--serif); color: var(--copper-hi); overflow-wrap: anywhere; }
.profile .pstars { font-size: 17px; letter-spacing: 1px; margin: 2px 0; }
.profile .pstars .on { color: var(--copper-hi); } .profile .pstars .off { color: var(--line); }
.profile .ptitle { color: var(--bright); font-size: 13px; margin-bottom: 8px; }
.profile .pfacts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; }
.profile .pfacts dt { font-weight: 700; color: var(--bright); } .profile .pfacts dd { margin: 0; }
.profile .pavatar { flex: none; padding: 4px; background: var(--frame); border: 1px solid var(--line); }
.profile .pavatar img { display: block; width: 96px; height: 96px; }
.profile .pinitial { width: 96px; height: 96px; display: grid; place-items: center; font: 700 44px var(--serif); color: var(--copper-hi); background: var(--box); }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 760px) { .twocol { grid-template-columns: 1fr; } .profile { flex-direction: column-reverse; } }
table.kv td.kvk { width: 34%; white-space: nowrap; }
.status.planned { color: var(--copper-hi); } .status.done { color: var(--good); } .status.declined { color: var(--text); }
.status.confirmed { color: var(--copper-hi); } .status.fixed { color: var(--good); } .status.wontfix, .status.duplicate { color: var(--text); } .status.pub { color: var(--accent); }

/* small screens (2026-11-10 polish): the top bar keeps its links, a game's title bar wraps, form rows wrap */
@media (max-width: 640px) {
  .topbar .hi { display: none; }
  .topbar .who { padding: 0 6px; font-size: 12.5px; }
  .themepick select { max-width: 132px; }
  .play .title { flex-wrap: wrap; row-gap: 4px; }
  .play .title h2 { flex: 1 1 100%; }
  .form .row input.textbox { min-width: 140px; }
}

/* the Account menu (MyBB style): opens under the Account tab */
nav.main .caret { font-size: 11px; opacity: 0.8; margin-left: 2px; }
.navmenu { position: fixed; z-index: 50; min-width: 180px; background: var(--box); border: 1px solid var(--bar-edge); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); padding: 4px 0; }
.navmenu a { display: block; padding: 8px 14px; color: var(--bright); font-size: 14px; white-space: nowrap; }
.navmenu a:hover, .navmenu a:focus-visible { background: linear-gradient(var(--bar-top), var(--bar-bottom)); color: var(--white); text-decoration: none; }
.ucpnav li { margin: 5px 0; }
.news article.dbnews h4 .pin { color: var(--copper-hi); font-size: 12px; margin-right: 6px; }

/* name styles (the forums' name designs): colours by letter, bold, italic, a shadow, an animated effect behind */
.nm { padding: 0 2px; border-radius: 2px; }
.nm.fx-sparkle { background: url("theme/name_fx/sparkle.gif"); }
.nm.fx-flame { background: url("theme/name_fx/flame.gif") 0 0 / auto 100%; }
.nm.fx-rainbow { background: url("theme/name_fx/rainbow.gif") 0 0 / auto 100%; }
.nm.fx-embers { background: url("theme/name_fx/embers.gif"); }
.nm.fx-shimmer { background: url("theme/name_fx/shimmer.gif") 0 0 / auto 100%; }
.nm.fx-snow { background: url("theme/name_fx/snow.gif"); }
/* 2026-11-10: newer effects, drawn in CSS (crisp at any size): shine (a glint across the letters), aurora (a slow
   colour wash behind), neon (glow and flicker), and a pulsing glow in any colour on top of any effect */
.nm { position: relative; display: inline-block; }
/* styled names in the forum's own name font (Verdana, the forum's body font; DejaVu Sans is its look-alike) */
.nm.styled { font-family: Verdana, Geneva, "DejaVu Sans", "Bitstream Vera Sans", Tahoma, sans-serif; }
.nm.fx-shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 0 0 / 260% 100% no-repeat;
  animation: nm-shine 2.8s ease-in-out infinite; }
@keyframes nm-shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
.nm.fx-aurora { background: linear-gradient(100deg, rgba(255, 42, 109, 0.45), rgba(5, 217, 232, 0.4), rgba(123, 47, 247, 0.45), rgba(255, 42, 109, 0.45)) 0 0 / 300% 100%;
  animation: nm-aurora 7s linear infinite; padding: 0 4px; }
@keyframes nm-aurora { to { background-position: 300% 0; } }
.nm.fx-neon { text-shadow: var(--nmsh, 0 0 0 transparent), 0 0 2px #fff, 0 0 6px var(--nmglow), 0 0 14px var(--nmglow); animation: nm-neon 4s linear infinite; }
@keyframes nm-neon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.55; } }
.nm.glow { animation: nm-glow 2.4s ease-in-out infinite alternate; }
.nm.glow.fx-shine::after { animation: nm-shine 2.8s ease-in-out infinite; }
.nm.glow.fx-aurora { animation: nm-aurora 7s linear infinite, nm-glow 2.4s ease-in-out infinite alternate; }
.nm.glow.fx-neon { animation: nm-neon 4s linear infinite, nm-glow 2.4s ease-in-out infinite alternate; }
@keyframes nm-glow { from { text-shadow: var(--nmsh, 0 0 0 transparent), 0 0 2px var(--nmglow); } to { text-shadow: var(--nmsh, 0 0 0 transparent), 0 0 6px var(--nmglow), 0 0 14px var(--nmglow); } }
@media (prefers-reduced-motion: reduce) { .nm, .nm::after { animation: none !important; } }
#adStyleBox input#adStyleGl { width: 34px; height: 22px; padding: 0; border: 1px solid var(--field-edge); background: none; vertical-align: middle; }
.stylepreview { font: 700 18px var(--table); padding: 4px 10px; background: var(--box); border: 1px solid var(--line); }
#adStyleBox input[type="color"] { width: 34px; height: 22px; padding: 0; border: 1px solid var(--field-edge); background: none; vertical-align: middle; }

.themepick { margin-right: auto; display: flex; align-items: center; gap: 6px; padding-left: 4px; color: var(--white); font-size: 12.5px; }
.themepick select { background: rgba(0, 0, 0, 0.35); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.2); font: 12.5px var(--body); padding: 2px 4px; }

/* ---------- the owner's site editor (Admin CP) and what it puts on the page ---------- */
/* a custom logo over every theme's own logo picture */
.banner img.customlogo.customlogo { content: normal; max-height: 120px; width: auto; max-width: 100%; }
.gicon { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }
.gemoji { display: inline-block; width: 30px; text-align: center; font-size: 24px; line-height: 30px; vertical-align: middle; }
img.smilie { height: 1.6em; width: auto; vertical-align: middle; margin: 0 1px; }
.staricon { height: 16px; width: auto; vertical-align: middle; margin-right: 1px; }
.staricon.off { opacity: 0.25; filter: grayscale(1); }
.stars .on { color: var(--copper-hi); } .stars .off { color: var(--line); }
.emojibar { display: flex; flex-wrap: wrap; gap: 2px; margin: 3px 0 6px; }
.emojibar .emo { background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 1px 3px; font-size: 16px; line-height: 1.2; cursor: pointer; color: inherit; }
.emojibar .emo:hover, .emojibar .emo:focus-visible { border-color: var(--line); background: var(--field); }
.emojibar .emo img.smilie { height: 18px; }
#seBox .setabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
#seBox .sepane { border-top: 1px solid var(--line); padding-top: 8px; }
.segallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.sepic { border: 1px solid var(--line); padding: 6px; text-align: center; background: var(--field); }
.sepic img { max-width: 100%; height: 70px; object-fit: contain; display: block; margin: 0 auto 4px; }
.sepic .desc { word-break: break-all; margin-bottom: 4px; }
.segrid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
@media (max-width: 640px) { .segrid { grid-template-columns: minmax(0, 1fr); } }
#seGames input.textbox { width: 100%; min-width: 60px; }
#seGames .se-icon { max-width: 70px; }
#seStarPer, #seStarMax { width: 70px; } #seStarChar { width: 110px; }
textarea.mono { font-family: Consolas, Menlo, monospace; width: 100%; }
/* the owner's pages and news in the simple format */
.fmt h3 { margin: 10px 0 4px; font: 700 17px var(--table); color: var(--white); }
.fmt h4 { margin: 8px 0 3px; font: 700 15px var(--table); color: var(--white); }
.fmt p { margin: 0 0 8px; } .fmt ul { margin: 0 0 8px 20px; padding: 0; }
.fmt hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
img.pageimg { max-width: 100%; height: auto; vertical-align: middle; }
a.filelink { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); background: var(--field); margin: 2px 0; }
.sepic .filetile { display: block; height: 70px; line-height: 70px; font-size: 40px; text-decoration: none; }
#sePageBody { width: 100%; }
.selink .se-lurl { flex: 1; min-width: 160px; }
/* the store */
.sttabs { flex-wrap: wrap; gap: 4px; }
.sttable td.ico { width: 56px; text-align: center; }
.sttable td.stprice { width: 110px; text-align: right; white-space: nowrap; }
.sttable td.stprice .num { font-size: 15px; color: var(--copper-hi); }
.stimg { width: 48px; height: 48px; object-fit: contain; vertical-align: middle; }
.stsw { display: inline-block; width: 40px; height: 18px; border: 1px solid var(--line); border-radius: 3px; vertical-align: middle; }
.stsw.rainbow { background: linear-gradient(90deg, #ff3b3b, #ff9a2e, #f2e15a, #a6ff4d, #6fb7ff, #8847ff, #e04be0); }
.stsym { display: inline-block; font-size: 24px; line-height: 1; vertical-align: middle; }
.sub-bar.stkind { margin-top: 0; }