/* =============================================================================
   Mana Rain - Session 60 visual overhaul (owner 2026-10-25: "a massive overhaul on the visual appearance of the website ...
   fantasy/mana/rain theme ... interactive rain that falls in the background ... make empty space filled with something";
   "give me at least 3 total redesigns"; dark only).
   Loaded AFTER site.css on every page; site.css keeps the layout rules, this file repaints them.
   One design since owner 2026-10-25 16:58 ("remove the other 2 options"): MOONWELL - midnight blue + azure mana, Cinzel titles,
   a floating glass header, the hero picture in an arched window (html data-look="moonwell", set by theme.js).
   Arcane Tempest + Elderglade (the other two Session 60 designs) were removed - git history has them.
   Part 1 = shared machinery (sky, rain canvas, ornaments, rain menu, motion). Part 2 = the Moonwell colours and shapes.
   CSP note: everything is in this file or drawn by mana.js; no inline styles.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts (self-hosted, SIL OFL - see assets/fonts/*-OFL.txt) */
@font-face { font-family: "Cinzel"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); }

/* =============================================================================
   PART 1 - shared
   ========================================================================== */
html {
  /* defaults = moonwell; each design below overrides */
  --mr-acc: #6fd8ff; --mr-acc-rgb: 111, 216, 255;
  --mr-acc2: #4b7dff; --mr-acc2-rgb: 75, 125, 255;
  --mr-display: "Cinzel", Georgia, serif;
  --mr-title: var(--mr-display);
  --mr-ui: var(--mr-display);
  --mr-panel-bg: rgba(14, 22, 48, .88);
  --mr-btn: linear-gradient(180deg, #8ae6ff, #3f8cff);
  --mr-btn-ink: #04122e;
  --mr-rain-op: .8;
  --mr-muted: #a3b2d6; --mr-faint: #7686ad;
  background: var(--bg);
  scrollbar-color: rgba(var(--mr-acc-rgb), .35) transparent;
}
html body { background: transparent; position: relative; }
::selection { background: rgba(var(--mr-acc-rgb), .35); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--mr-acc-rgb), .45), rgba(var(--mr-acc2-rgb), .35)); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* ------------------------------------------------------------------ the sky, rails and rain (fixed, behind everything) */
.mr-sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; background: var(--mr-sky, var(--bg)); }
.mr-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.mr-aurora { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; animation: mr-drift 46s ease-in-out infinite alternate; }
.mr-aurora.a1 { width: 70vw; height: 46vh; left: -12vw; top: -14vh; background: radial-gradient(closest-side, var(--mr-au1, rgba(60, 120, 255, .22)), transparent); }
.mr-aurora.a2 { width: 60vw; height: 40vh; right: -14vw; top: 8vh; background: radial-gradient(closest-side, var(--mr-au2, rgba(80, 220, 255, .16)), transparent); animation-duration: 58s; animation-direction: alternate-reverse; }
.mr-aurora.a3 { width: 80vw; height: 50vh; left: 10vw; bottom: -18vh; background: radial-gradient(closest-side, var(--mr-au3, rgba(120, 90, 255, .12)), transparent); animation-duration: 70s; }
@keyframes mr-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4vw, 2vh, 0) scale(1.08); } 100% { transform: translate3d(-3vw, -1vh, 0) scale(.96); } }
.mr-moon { position: absolute; display: none; }
.mr-land { position: absolute; left: 0; right: 0; bottom: 0; height: min(32vh, 300px); opacity: .9; }
.mr-land-svg { width: 100%; height: 100%; display: block; }
.mr-mist { position: absolute; left: -10%; right: -10%; bottom: 0; height: 30vh; background: radial-gradient(60% 100% at 30% 100%, var(--mr-mist, rgba(120, 180, 255, .08)), transparent 70%), radial-gradient(50% 90% at 80% 100%, var(--mr-mist, rgba(120, 180, 255, .08)), transparent 70%); animation: mr-mist 40s ease-in-out infinite alternate; }
@keyframes mr-mist { to { transform: translateX(6%); } }
.mr-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 60% at 50% 0%, rgba(210, 180, 255, .16), transparent 70%); }
.mr-flash.on { animation: mr-flash 1.6s ease-out; }
@keyframes mr-flash { 0% { opacity: 0; } 4% { opacity: .9; } 10% { opacity: .2; } 16% { opacity: .65; } 100% { opacity: 0; } }
.mr-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: var(--mr-rain-op); }
html[data-rain="off"] .mr-rain { display: none; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { font-family: var(--mr-display); font-weight: 700; letter-spacing: .01em; }
h1 { letter-spacing: .005em; }
.mr-main { padding-bottom: 72px; overflow-x: clip; }
a { color: var(--mr-link, var(--gold-2)); transition: color .2s; }

/* ------------------------------------------------------------------ surfaces: translucent, lit by the cursor (mana.js sets --mx / --my) */
.panel, dialog, .feature-list, .table-wrap, .don-card, .post-row, .section-row, .cmd-group, .adv, .notice.db-signin {
  background: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--mr-acc-rgb), .085), transparent 62%), var(--mr-panel-bg);
  border-color: var(--line);
}
dialog { background: var(--mr-dialog-bg, #0d1430); }
dialog::backdrop { background: rgba(2, 4, 12, .72); backdrop-filter: blur(4px); }
.panel, .panel * { --muted: var(--mr-muted); --faint: var(--mr-faint); }
.panel { transition: border-color .3s, box-shadow .3s, transform .3s; }
.panel:hover, .don-card:hover { border-color: rgba(var(--mr-acc-rgb), .32); }
.table-wrap { overflow: auto; }
th { background: linear-gradient(rgba(var(--mr-acc-rgb), .07), rgba(var(--mr-acc-rgb), .07)), var(--panel-2); color: var(--mr-th, var(--muted)); font-family: var(--mr-ui); letter-spacing: .04em; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(var(--mr-acc-rgb), .06); }
th, td, table.db-list th, table.db-list td { border-color: var(--line); }
.kv dt { color: var(--muted); }
.kv dd { color: var(--text); }
code, kbd { background: rgba(var(--mr-acc-rgb), .08); border-color: rgba(var(--mr-acc-rgb), .2); }

/* ------------------------------------------------------------------ buttons + fields */
.btn { position: relative; overflow: hidden; transition: border-color .25s, background .25s, color .25s, box-shadow .25s, transform .15s; border-color: rgba(var(--mr-acc-rgb), .28); background: rgba(var(--mr-acc-rgb), .04); }
.btn:hover { border-color: rgba(var(--mr-acc-rgb), .7); background: rgba(var(--mr-acc-rgb), .1); box-shadow: 0 0 22px rgba(var(--mr-acc-rgb), .18); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mr-btn); border-color: transparent; color: var(--mr-btn-ink); box-shadow: 0 8px 28px rgba(var(--mr-acc-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover { background: var(--mr-btn); color: var(--mr-btn-ink); border-color: transparent; box-shadow: 0 10px 36px rgba(var(--mr-acc-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .45); filter: brightness(1.06); }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .6s ease; pointer-events: none; }
.btn-primary:hover::after { left: 130%; }
.btn-ghost { background: transparent; }
.btn-danger, .btn-dark-red { border-color: #7a2c3c; }
.btn[disabled]:hover { box-shadow: none; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
  background: rgba(3, 6, 16, .55); border-color: var(--line); transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(var(--mr-acc-rgb), .8); box-shadow: 0 0 0 3px rgba(var(--mr-acc-rgb), .18), 0 0 24px rgba(var(--mr-acc-rgb), .15); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--mr-acc); outline-offset: 2px; }
.check input, .don-acc input { accent-color: var(--mr-acc); }
.tabs button { font-family: var(--mr-ui); letter-spacing: .03em; transition: color .2s; }
.tabs button[aria-selected="true"] { color: var(--heading); border-color: var(--mr-acc); text-shadow: 0 0 16px rgba(var(--mr-acc-rgb), .6); }
.notice { background: rgba(var(--mr-acc-rgb), .06); border-color: var(--line); border-left-color: var(--mr-acc); }
.loading { display: flex; align-items: center; gap: 12px; }
.loading::before { content: ""; width: 10px; height: 14px; flex: none; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--mr-acc); box-shadow: 0 0 12px rgba(var(--mr-acc-rgb), .8); animation: mr-drip 1.1s ease-in infinite; }
@keyframes mr-drip { 0% { transform: translateY(-8px) scale(.7); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(6px) scale(1); opacity: 1; } 100% { transform: translateY(8px) scaleX(1.8) scaleY(.2); opacity: 0; } }

/* ------------------------------------------------------------------ header */
.site-header { transition: background .3s; }
.brand img.brand-mark { filter: drop-shadow(0 0 10px rgba(var(--mr-acc-rgb), .55)); animation: mr-breathe 5s ease-in-out infinite; }
@keyframes mr-breathe { 50% { filter: drop-shadow(0 0 18px rgba(var(--mr-acc-rgb), .85)); } }
.brand img.brand-word { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }
.nav a { font-family: var(--mr-ui); letter-spacing: .03em; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: rgba(var(--mr-acc-rgb), .08); text-decoration: none; }
.theme-toggle.look-toggle { display: grid; place-items: center; width: 40px; height: 40px; color: var(--mr-acc); border-color: rgba(var(--mr-acc-rgb), .35); background: rgba(var(--mr-acc-rgb), .06); transition: box-shadow .25s, border-color .25s, transform .25s; }
.theme-toggle.look-toggle svg { width: 20px; height: 20px; }
.theme-toggle.look-toggle:hover, .theme-toggle.look-toggle[aria-expanded="true"] { border-color: var(--mr-acc); box-shadow: 0 0 20px rgba(var(--mr-acc-rgb), .4); transform: rotate(-8deg); }
@media (max-width: 1200px) { .theme-toggle.look-toggle { margin-left: auto; } .menu-toggle { margin-left: 8px; order: 3; } }

/* ------------------------------------------------------------------ the rain menu (droplet button, top right) */
.mr-picker { position: fixed; z-index: 200; width: min(300px, calc(100vw - 24px)); padding: 14px; display: grid; gap: 8px; border-radius: 16px;
  background: rgba(8, 10, 22, .94); border: 1px solid rgba(var(--mr-acc-rgb), .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(var(--mr-acc-rgb), .12);
  backdrop-filter: blur(14px); animation: mr-pop .22s cubic-bezier(.2, .8, .2, 1); color: var(--text); font-family: var(--sans); }
@keyframes mr-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.mr-picker-title { font-family: var(--mr-display); font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: #fff; padding: 2px 4px 4px; }
.mr-rain-tg { display: flex; align-items: center; gap: 10px; padding: 4px; font-weight: 600; cursor: pointer; }
.mr-rain-tg input { width: 18px; height: 18px; accent-color: var(--mr-acc); }
.mr-picker > small { color: #8a8fa6; font-size: .78rem; padding: 0 4px; }

/* ------------------------------------------------------------------ page titles: crest on the right + ornament line */
.page-head { position: relative; padding: 60px 0 22px; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: .3em; }
.page-head.mr-has-crest { padding-right: 190px; min-height: 230px; }
.mr-crest { position: absolute; right: 10px; top: 50%; width: 150px; height: 150px; margin-top: -78px; color: var(--mr-acc); pointer-events: none; }
.mr-crest::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--mr-acc-rgb), .2), transparent); }
.mr-crest-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.mr-crest-svg .c-ring { opacity: .5; } .mr-crest-svg .c-ring2 { opacity: .3; stroke-dasharray: 2 5; }
.mr-crest-svg .c-tick { opacity: .7; }
.mr-crest-svg .c-dot { fill: currentColor; stroke: none; }
.mr-crest-svg .c-moon { fill: rgba(var(--mr-acc-rgb), .12); stroke: currentColor; opacity: .9; }
.mr-crest-svg .c-leaf { fill: rgba(var(--mr-acc-rgb), .14); }
.mr-crest-svg .c-leaf2 { fill: rgba(var(--mr-acc2-rgb), .16); stroke: var(--mr-acc2); }
.mr-crest-svg .c-spin, .mr-crest-svg .c-spin2, .mr-crest-svg .c-leaves { transform-origin: 60px 60px; transform-box: view-box; animation: mr-spin 90s linear infinite; }
.mr-crest-svg .c-spin2 { animation-duration: 40s; animation-direction: reverse; }
.mr-crest-svg .c-leaves { animation-duration: 160s; }
@keyframes mr-spin { to { transform: rotate(360deg); } }
.mr-crest-ico { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: #fff; filter: drop-shadow(0 0 10px rgba(var(--mr-acc-rgb), .9)); }
.mr-orn { display: block; width: min(600px, 100%); height: 20px; margin: 22px 0 0; overflow: visible; fill: none; stroke: var(--mr-acc); stroke-width: 1; }
.mr-orn .o-line { opacity: .45; }
.mr-orn .o-gem { fill: rgba(var(--mr-acc-rgb), .3); stroke: var(--mr-acc); filter: drop-shadow(0 0 6px rgba(var(--mr-acc-rgb), .8)); }
.mr-orn .o-fill { fill: var(--mr-acc); stroke: none; opacity: .8; }
.section-title { position: relative; padding-bottom: 16px; }
.mr-orn.mr-orn-sm { position: absolute; left: -48px; bottom: 0; width: 300px; height: 12px; margin: 0; pointer-events: none; }
.page-head .mr-orn-sm { display: none; }
@media (max-width: 760px) { .page-head.mr-has-crest { padding-right: 0; min-height: 0; } .mr-crest { width: 92px; height: 92px; top: 26px; right: 0; margin-top: 0; opacity: .5; } .page-head.mr-has-crest h1 { padding-right: 80px; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: transparent; border-bottom: 0; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--mr-acc-rgb), .55), transparent); }
.hero .container { position: relative; z-index: 1; padding: 104px 0 100px; }
.hero h1 { max-width: 13ch; }
.hero .lead { color: var(--text); opacity: .86; }
.mr-hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mr-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(var(--mr-acc-rgb), .6) 40%, rgba(var(--mr-acc-rgb), 0) 72%); filter: blur(.3px); opacity: .7; animation: mr-float 14s ease-in-out infinite; }
.mr-orb.o1 { width: 10px; height: 10px; left: 8%; top: 24%; }
.mr-orb.o2 { width: 6px; height: 6px; left: 22%; top: 78%; animation-delay: -3s; }
.mr-orb.o3 { width: 14px; height: 14px; left: 46%; top: 16%; animation-delay: -6s; opacity: .45; }
.mr-orb.o4 { width: 8px; height: 8px; left: 52%; top: 70%; animation-delay: -9s; }
.mr-orb.o5 { width: 18px; height: 18px; left: 88%; top: 18%; animation-delay: -2s; opacity: .35; }
.mr-orb.o6 { width: 7px; height: 7px; left: 93%; top: 64%; animation-delay: -7s; }
.mr-orb.o7 { width: 5px; height: 5px; left: 35%; top: 42%; animation-delay: -11s; }
.mr-orb.o8 { width: 9px; height: 9px; left: 70%; top: 88%; animation-delay: -5s; }
.mr-orb.o9 { width: 4px; height: 4px; left: 4%; top: 58%; animation-delay: -12s; }
@keyframes mr-float { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(14px, -22px, 0); } 66% { transform: translate3d(-10px, -8px, 0); } }
.mr-hero-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, transparent, rgba(var(--mr-acc-rgb), .045) 65%, transparent); }
.hero-art { position: relative; }
.hero-art img { position: relative; z-index: 1; }
.mr-hero-ring { position: absolute; z-index: 0; left: 50%; top: 50%; width: 132%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--mr-acc); fill: none; stroke: currentColor; stroke-width: .5; opacity: .32; overflow: visible; pointer-events: none; animation: mr-spin-c 160s linear infinite; }
@keyframes mr-spin-c { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mr-hero-ring .c-moon, .mr-hero-ring .c-leaf, .mr-hero-ring .c-leaf2 { fill: none; }
.mr-hero-ring .c-dot { fill: currentColor; }

/* ------------------------------------------------------------------ home blocks */
.pillars:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .pillars:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }
.pillar { position: relative; overflow: hidden; padding: 30px 30px 32px; min-height: 190px; }
.pillar .feat-ico { width: 52px; height: 52px; border-radius: 16px; color: var(--mr-acc); background: rgba(var(--mr-acc-rgb), .1); border-color: rgba(var(--mr-acc-rgb), .35); box-shadow: 0 0 24px rgba(var(--mr-acc-rgb), .2); }
.pillar .feat-ico svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 1.3rem; }
.pillar p { font-size: 1.02rem; line-height: 1.65; }
.pillar::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(var(--mr-acc-rgb), .18); box-shadow: 0 0 0 18px rgba(var(--mr-acc-rgb), .03), 0 0 0 40px rgba(var(--mr-acc-rgb), .025), inset 0 0 40px rgba(var(--mr-acc-rgb), .08); pointer-events: none; }
.feat-ico { color: var(--mr-acc); background: rgba(var(--mr-acc-rgb), .1); border-color: rgba(var(--mr-acc-rgb), .3); }
.home-info .panel h3, .panel > h3:first-child { display: flex; align-items: center; gap: 10px; }
.panel > h3:first-child::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); background: var(--mr-acc); box-shadow: 0 0 10px rgba(var(--mr-acc-rgb), .9); }
.kv { gap: 8px 18px; }
.home-info .kv dt, #info-rates dt { position: relative; }
.home-info .kv dd, #info-rates dd { font-weight: 600; }
#woe ul, #info-woe ul { list-style: none; padding: 0; display: grid; gap: 10px; }
#woe li, #info-woe li { padding: 10px 12px 10px 14px; border-radius: 10px; background: rgba(var(--mr-acc-rgb), .05); border-left: 2px solid rgba(var(--mr-acc-rgb), .6); }
#woe li b, #info-woe li b { color: var(--heading); font-family: var(--mr-ui); letter-spacing: .03em; }

/* news */
.news-item { position: relative; transition: border-color .3s, transform .3s, box-shadow .3s; }
.news-item:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--mr-acc-rgb), .2); }
.news-item h3 { font-size: 1.28rem; }
.news-item h3 a { transition: color .2s, text-shadow .2s; }
.news-item h3 a:hover { color: #fff; text-decoration: none; text-shadow: 0 0 18px rgba(var(--mr-acc-rgb), .6); }
.news-meta { color: var(--mr-meta, var(--faint)); margin-bottom: 8px; letter-spacing: .02em; }
.news-pin { color: var(--gold-2); }
.news-more { color: var(--mr-acc); }
.home-news-pager .muted { font-family: var(--mr-ui); }
#news-filters .btn-primary { box-shadow: 0 4px 18px rgba(var(--mr-acc-rgb), .3); }

/* download steps */
.mr-steps .feature { text-align: center; padding-top: 34px; }
.mr-steps .feature .icon { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; font-family: var(--mr-display); font-size: 1.9rem; font-weight: 700; color: #fff;
  background: radial-gradient(circle, rgba(var(--mr-acc-rgb), .32), rgba(var(--mr-acc-rgb), .06) 70%); border: 1px solid rgba(var(--mr-acc-rgb), .6);
  box-shadow: 0 0 0 8px rgba(var(--mr-acc-rgb), .06), 0 0 0 9px rgba(var(--mr-acc-rgb), .18), 0 0 40px rgba(var(--mr-acc-rgb), .35); text-shadow: 0 0 14px rgba(var(--mr-acc-rgb), 1); }
.mr-steps .feature h3 { font-size: 1.25rem; }
.mr-steps .feature p { color: var(--muted); }
.mr-steps .feature .mt12 { display: flex; justify-content: center; }

/* auth pages */
.auth-wrap { position: relative; overflow: hidden; padding: 96px 16px 80px; }
.auth-card { position: relative; z-index: 1; padding: 34px 34px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(var(--mr-acc-rgb), .1); }
.mr-auth-mark { display: block; height: 96px; width: auto; margin: -92px auto 8px; filter: drop-shadow(0 0 16px rgba(var(--mr-acc-rgb), .8)); animation: mr-hover 6s ease-in-out infinite; }
@keyframes mr-hover { 50% { transform: translateY(-6px); } }
.mr-auth-ring { position: absolute; left: 50%; top: 50%; width: min(860px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; color: var(--mr-acc); opacity: .28; }
.mr-auth-ring-svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .35; overflow: visible; animation: mr-spin 200s linear infinite; }
.mr-auth-ring-svg .c-moon, .mr-auth-ring-svg .c-leaf, .mr-auth-ring-svg .c-leaf2 { fill: none; }
.mr-auth-ring-svg .c-dot { fill: currentColor; }
.auth-card h1 { font-size: 2.2rem; }

/* footer */
.site-footer { position: relative; background: linear-gradient(180deg, var(--mr-foot, #070a18), #04060e); border-top: 0; padding-top: 30px; }
.mr-footer-land { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: 70px; pointer-events: none; }
.mr-footer-land path { fill: var(--mr-foot, #070a18); }
.mr-footer-land .l1 { opacity: .35; } .mr-footer-land .l2 { opacity: .6; }
.mr-foot-word { height: 64px; width: auto; margin: 0 0 10px -6px; filter: drop-shadow(0 0 14px rgba(var(--mr-acc-rgb), .35)); }
.mr-foot-word + h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-footer h4 { font-family: var(--mr-display); letter-spacing: .06em; color: var(--heading); }
.site-footer ul a { display: inline-block; transition: color .2s, transform .2s; }
.site-footer ul a:hover { transform: translateX(3px); color: #fff; text-decoration: none; }
.site-footer .legal { border-top: 1px solid var(--line); }

/* donate */
.don-num { background: var(--mr-btn); color: var(--mr-btn-ink); box-shadow: 0 0 18px rgba(var(--mr-acc-rgb), .45); font-family: var(--mr-display); }
.don-card { transition: transform .3s, box-shadow .3s, border-color .3s; }
.don-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 30px color-mix(in srgb, var(--ring) 35%, transparent); }
.don-level { font-family: var(--mr-display); }
.don-medal { background: radial-gradient(circle at 50% 38%, #fff, #e6ecf8 70%); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 30px color-mix(in srgb, var(--ring) 45%, transparent); }
.don-acc { background: rgba(var(--mr-acc-rgb), .04); }
.don-acc:has(input:checked) { border-color: var(--mr-acc); box-shadow: 0 0 0 1px var(--mr-acc) inset, 0 0 22px rgba(var(--mr-acc-rgb), .2); }
.don-gold, .don-credits, .don-bonus { color: var(--gold-2); }

/* rules list */
#rules-list { counter-reset: r; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
#rules-list > li { counter-increment: r; position: relative; padding: 4px 0 4px 54px; min-height: 36px; line-height: 1.6; }
#rules-list > li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mr-display); font-weight: 700; color: var(--mr-acc);
  border: 1px solid rgba(var(--mr-acc-rgb), .5); background: rgba(var(--mr-acc-rgb), .08); box-shadow: 0 0 14px rgba(var(--mr-acc-rgb), .2); }

/* account */
.game-account { position: relative; }
.badge { border-color: rgba(var(--mr-acc-rgb), .3); }

/* 404 */
.auth-card.center h1 { font-size: 2.6rem; }

/* admin keeps its working density; only colours change */
.admin-nav button[aria-selected="true"] { background: rgba(var(--mr-acc-rgb), .1); border-color: rgba(var(--mr-acc-rgb), .35); color: #fff; }
.cmd-nav { background: transparent; backdrop-filter: blur(8px); }

/* ------------------------------------------------------------------ reveal on scroll (mana.js adds .mr-rv only to things below the fold) */
.mr-rv { opacity: 0; transform: translateY(22px); }
.mr-rv.mr-in { opacity: 1; transform: none; transition: opacity .8s ease var(--rv-d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .mr-aurora, .mr-mist, .mr-orb, .mr-hero-ring, .mr-auth-ring-svg, .mr-crest-svg *, .brand img.brand-mark, .mr-auth-mark, .site-header::after { animation: none !important; }
  .mr-rv { opacity: 1; transform: none; }
}

/* =============================================================================
   PART 2 - MOONWELL (midnight blue, azure mana, gold)
   ========================================================================== */
html[data-look="moonwell"] {
  --bg: #060a18; --bg-2: #0a1029; --panel: #0f1838; --panel-2: #16224a;
  --line: rgba(120, 170, 255, .16); --line-gold: rgba(242, 196, 107, .35);
  --text: #e6eeff; --heading: #ffffff; --muted: #a3b2d6; --faint: #7a8ab0;
  --gold: #f2c46b; --gold-2: #ffd88a; --gold-soft: rgba(242, 196, 107, .12); --gold-ink: #1d1505;
  --mr-muted: #a3b2d6; --mr-faint: #7a8ab0;
  --mr-acc: #6fd8ff; --mr-acc-rgb: 111, 216, 255; --mr-acc2: #4b7dff; --mr-acc2-rgb: 75, 125, 255;
  --mr-link: #8fe2ff;
  --mr-display: "Cinzel", Georgia, serif; --mr-ui: "Plus Jakarta Sans", var(--sans);
  --mr-sky: radial-gradient(120% 70% at 72% -12%, #1b2d6b 0%, rgba(27, 45, 107, 0) 62%), linear-gradient(180deg, #081133 0%, #060a1a 52%, #04070f 100%);
  --mr-panel-bg: linear-gradient(180deg, rgba(17, 27, 60, .86), rgba(10, 16, 38, .9));
  --mr-dialog-bg: #0c1433;
  --mr-btn: linear-gradient(180deg, #9cecff 0%, #57b8ff 55%, #3f7dff 100%); --mr-btn-ink: #03102c;
  --mr-au1: rgba(60, 110, 255, .24); --mr-au2: rgba(80, 220, 255, .14); --mr-au3: rgba(130, 100, 255, .12);
  --mr-mist: rgba(120, 190, 255, .09);
  --mr-foot: #070b1d;
  --mr-meta: #8aa3d6;
  --mr-rain-op: .78;
}
html[data-look="moonwell"] .mr-moon { display: block; right: 9vw; top: 12vh; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #f4fbff 0%, #cfe6ff 38%, #8fb8ef 70%, #6d95d6 100%);
  box-shadow: 0 0 60px 10px rgba(160, 210, 255, .35), 0 0 200px 60px rgba(90, 150, 255, .18); opacity: .78; }
html[data-look="moonwell"] .mr-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 60%, rgba(80, 110, 170, .35) 0 10%, transparent 11%), radial-gradient(circle at 62% 30%, rgba(80, 110, 170, .28) 0 7%, transparent 8%), radial-gradient(circle at 66% 70%, rgba(80, 110, 170, .22) 0 12%, transparent 13%); }
html[data-look="moonwell"] .mr-land-svg .l1 { fill: #0e1a46; opacity: .55; }
html[data-look="moonwell"] .mr-land-svg .l2 { fill: #0a1336; opacity: .85; }
html[data-look="moonwell"] .mr-land-svg .l3 { fill: #050a1c; }

/* header: a floating glass pill */
html[data-look="moonwell"] .site-header { background: transparent; border-bottom: 0; backdrop-filter: none; padding-top: 12px; }
html[data-look="moonwell"] .site-header .bar { min-height: 78px; padding: 0 18px 0 14px; border-radius: 24px; background: linear-gradient(180deg, rgba(14, 22, 52, .82), rgba(8, 13, 32, .78)); border: 1px solid rgba(120, 180, 255, .2);
  backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 14px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .3); }
html[data-look="moonwell"] .nav a { font-weight: 600; }
html[data-look="moonwell"] .nav a[aria-current="page"] { background: rgba(111, 216, 255, .1); color: #fff; }
html[data-look="moonwell"] .nav a[aria-current="page"]::after { width: 6px; height: 6px; margin-left: -3px; bottom: 3px; border-radius: 50%; background: #9cecff; box-shadow: 0 0 10px 2px rgba(111, 216, 255, .9); }
@media (max-width: 1200px) { html[data-look="moonwell"] .nav a[aria-current="page"]::after { left: 6px; bottom: 50%; margin: 0 0 -3px; } }

/* type */
html[data-look="moonwell"] h1 { font-weight: 700; background: linear-gradient(180deg, #ffffff 15%, #bfeeff 70%, #7fd0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(111, 216, 255, .28)); }
html[data-look="moonwell"] h2 { font-weight: 700; letter-spacing: .03em; }
html[data-look="moonwell"] h3 { font-family: "Plus Jakarta Sans", var(--sans); letter-spacing: -.01em; }
html[data-look="moonwell"] .pillar h3, html[data-look="moonwell"] .mr-steps h3, html[data-look="moonwell"] .auth-card h1 { font-family: var(--mr-display); letter-spacing: .02em; }
html[data-look="moonwell"] .hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: 1.04; }

/* panels: a moonlit rim along the top */
html[data-look="moonwell"] .panel { border-radius: 18px; }
html[data-look="moonwell"] .panel::before { display: block; content: ""; position: absolute; inset: 0 18% auto 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 230, 255, .75), transparent); opacity: .7; }
html[data-look="moonwell"] .news-item { box-shadow: inset 2px 0 0 rgba(111, 216, 255, .55); }
html[data-look="moonwell"] .news-item:hover { box-shadow: inset 2px 0 0 #9cecff, 0 14px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(111, 216, 255, .22); }
html[data-look="moonwell"] .btn { border-radius: 12px; }
html[data-look="moonwell"] .btn-primary { border-radius: 12px; }

/* hero picture: an arched moon window */
html[data-look="moonwell"] .hero-art.scene img { border-radius: 300px 300px 26px 26px; border: 0; box-shadow: 0 0 0 1px rgba(150, 220, 255, .45), 0 0 70px rgba(111, 216, 255, .28), 0 34px 90px rgba(0, 0, 0, .65); }
html[data-look="moonwell"] .hero-art.scene::after { display: block; content: ""; position: absolute; inset: -14px; z-index: 0; border-radius: 314px 314px 36px 36px; box-shadow: none; border: 1px solid rgba(150, 220, 255, .28); background: none; }

html[data-look="moonwell"] .mr-moon { right: 1.6vw; top: 17vh; width: 96px; height: 96px; }
.mr-steps .feature .mt12 { margin-top: 18px; }
@media (max-width: 760px) {
  .hero .container { padding: 56px 0 64px; }
}

/* Session 60 (owner 2026-10-25 16:57: "remove this moon and remove the circles/doodads around this image, but keep the image") */
html[data-look="moonwell"] .mr-moon, html[data-look="moonwell"] .mr-hero-ring { display: none; }
html[data-look="moonwell"] .hero-art.scene::after { display: none; }

/* Session 60 (owner 2026-10-25 17:50: "center the news divider graphic and "NEWS" text above the actual news containers please.
   Increase the size of that NEWS header by 4px") - the home page's News title: centred over the news, 4 px bigger; "All news" stays at the right */
.section-title:has(+ #home-news) { justify-content: center; position: relative; }
.section-title:has(+ #home-news) > div { text-align: center; }
.section-title:has(+ #home-news) h2 { font-size: calc(clamp(1.45rem, 2.6vw, 1.9rem) + 4px); }
.section-title:has(+ #home-news) > a { position: absolute; right: 0; bottom: 18px; }
.section-title:has(+ #home-news) .mr-orn.mr-orn-sm { left: 50%; transform: translateX(-50%); }

/* Session 60 (owner 2026-10-25 18:14: "have this top bar connect to the top of the browser window so that only the bottom left and
   right corners are rounded and the top is fully connected to the top of the browser") */
html[data-look="moonwell"] .site-header { padding-top: 0; }
html[data-look="moonwell"] .site-header .bar { border-radius: 0 0 24px 24px; border-top: 0; }

/* donation level badges (owner 2026-10-27: weather levels on bronze / silver / gold / platinum badges - the picture IS the frame, so
   the old round white medal + coloured ring are switched off here; light.css is generated, hence the higher-specificity selectors) */
html body .don-card .don-medal { width: 140px; height: 140px; margin: 2px auto; border: 0; border-radius: 0; background: none; box-shadow: none; }
html body .don-card .don-medal img { width: 140px; height: 140px; max-width: none; max-height: none; image-rendering: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
html body .don-card.don-c1, html body .don-card.don-c2 { --ring: #b8763f; }
html body .don-card.don-c3, html body .don-card.don-c4 { --ring: #a7adba; }
html body .don-card.don-c5, html body .don-card.don-c6 { --ring: #dca63a; }
html body .don-card.don-c7, html body .don-card.don-c8 { --ring: #a98ae6; }
/* level names: plain bold sans, not spaced-out serif capitals (owner 2026-10-27 00:26 "easier to read font") */
html body .don-card .don-level { font-family: "Plus Jakarta Sans", var(--sans); text-transform: none; letter-spacing: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
/* step 2 = its own panel like step 1 (owner 00:40 "so it looks more grouped"); the cards inside it sit a shade darker than the panel */
.don-levels .don-tiers { margin-top: 6px; }
html body .don-levels .don-card { background: rgba(0, 0, 0, .22); }
/* owner 2026-10-27 00:43: donate buttons "slightly less obnoxious bright blue" - a calmer steel blue, softer glow */
html body .don-card .btn-primary.don-btn { background: linear-gradient(180deg, #5b8fc9, #3f6fa8); color: #fff; box-shadow: 0 4px 14px rgba(30, 60, 110, .35), inset 0 1px 0 rgba(255, 255, 255, .18); }
html body .don-card .btn-primary.don-btn:hover { background: linear-gradient(180deg, #6a9cd4, #4a7bb4); color: #fff; box-shadow: 0 6px 18px rgba(30, 60, 110, .45), inset 0 1px 0 rgba(255, 255, 255, .22); filter: none; }
html body .don-card .btn-primary.don-btn:disabled { filter: saturate(.6) brightness(.85); }
/* owner 2026-10-27 00:43: no glowing dot under the selected menu item (every page; the item keeps its soft highlight) */
html body .nav a[aria-current="page"]::after { display: none; }