/* =====================================================================
   Scenes: the dark-arcade backdrop (grid + paw prints) and the illustrated headers for
   the Wall of Shame, Hall of Fame, Guidelines and Help. Art comes from tools/scenes.js
   (website/img/*.svg). Loaded on index, court, guidelines and help only.
   Motion is transform/opacity inside the SVGs and is switched off for reduced motion.
   ===================================================================== */

/* ---------- Backdrop: a faint grid and paw prints behind the page ---------- */
html:has(body.arcade){
  background-color:var(--ground);
  background-image:url("img/paws-light.svg"),linear-gradient(rgba(18,26,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(18,26,46,.045) 1px,transparent 1px);
  background-size:180px 180px,48px 48px,48px 48px;
}
:root[data-theme="dark"] html:has(body.arcade),html[data-theme="dark"]:has(body.arcade){
  background-image:url("img/paws-dark.svg"),linear-gradient(rgba(255,211,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,211,42,.05) 1px,transparent 1px);
}
body.arcade{background:transparent}

/* The dark panel used for page heroes (Guidelines, Help, Courtroom) */
.arcade-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;margin:0 0 24px;padding:28px 32px;border:3px solid #1C1820;border-radius:24px;color:#fff;box-shadow:0 8px 0 #1C1820;
  background:url("img/paws-dark.svg"),linear-gradient(rgba(255,211,42,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,211,42,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(160deg,#1D1747,#2C2060 70%,#3B2A6B);
  background-size:180px 180px,40px 40px,40px 40px,100% 100%}
.arcade-hero > *{position:relative;min-width:0}
.arcade-hero .art{display:none;width:min(280px,100%);height:auto;justify-self:end}
.arcade-hero.variant-a .art.va,.arcade-hero.variant-b .art.vb,.arcade-hero.variant-c .art.vc{display:block}
/* variant B: a minimalist parchment banner with scroll rods */
.arcade-hero.variant-b{background:radial-gradient(ellipse at 15% 10%,rgba(255,255,255,.6),transparent 55%),linear-gradient(#F6E7BE,#EBD59B);color:#2B1D0E;border-color:#6B4220;box-shadow:0 8px 0 #6B4220;padding-block:40px}
.arcade-hero.variant-b::before,.arcade-hero.variant-b::after{content:"";position:absolute;left:0;right:0;height:14px;background:linear-gradient(#C48A4B,#8A5A2B 60%,#6B4220);border-block:2px solid #1C1820}
.arcade-hero.variant-b::before{top:0}
.arcade-hero.variant-b::after{bottom:0}
.legal .arcade-hero.variant-b h1{color:#5A3410;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.legal .arcade-hero.variant-b .meta{color:#6B4A25}
.arcade-hero.variant-b .charter-kicker{background:#5A3410;color:#FFE9B0}
/* variant C: a modern arcade rulebook, dark grid with cyan and pink neon */
.arcade-hero.variant-c{border-color:#7FD3FF;box-shadow:0 8px 0 #1C1820,0 0 26px rgba(127,211,255,.35);
  background:linear-gradient(rgba(127,211,255,.1) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(127,211,255,.1) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(160deg,#0B1030,#151B4A)}
.legal .arcade-hero.variant-c h1{color:#fff;text-shadow:0 0 18px #7FD3FF,0 3px 0 #FF4DA6}
.arcade-hero.variant-c .charter-kicker{background:#7FD3FF}
.legal .arcade-hero h1{margin:0;color:#FFD32A;font-size:clamp(32px,5vw,46px);line-height:1.1;text-shadow:0 3px 0 #B3172B,0 6px 0 #1C1820,0 0 22px rgba(255,211,42,.45)}
.legal .arcade-hero .meta{color:#D9D4EE;margin:12px 0 0;max-width:46ch;font-size:15px}
.charter-kicker{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:var(--radius-pill);background:#FFD32A;color:#121A2E;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.legal .arcade-hero .charter-kicker{margin:0 0 12px;font-size:11px;line-height:1.5;max-width:none}
@media (max-width:700px){
  .arcade-hero{grid-template-columns:minmax(0,1fr);padding:22px 20px;justify-items:start}
  .arcade-hero .art{justify-self:center;width:min(230px,80%);order:-1}
}

/* ---------- Guidelines: an ancient charter scroll ---------- */
.charter{position:relative;margin:34px 0 0}
.charter::before,.charter::after{content:"";display:block;position:relative;z-index:2;height:30px;margin:0 -14px;border:3px solid #1C1820;border-radius:15px;
  background:linear-gradient(#C48A4B,#8A5A2B 55%,#6B4220);box-shadow:inset 0 3px 0 rgba(255,255,255,.28)}
.charter::before{margin-bottom:-14px}
.charter::after{margin-top:-14px}
.charter-inner{position:relative;padding:44px clamp(22px,5vw,60px);color:#2B1D0E;border-inline:3px solid #8A5A2B;
  background:radial-gradient(ellipse at 15% 8%,rgba(255,255,255,.55),transparent 55%),radial-gradient(ellipse at 90% 95%,rgba(150,100,30,.22),transparent 55%),linear-gradient(#F6E7BE,#EBD59B)}
.charter-inner::before{content:"";position:absolute;inset:14px;border:2px solid rgba(138,90,43,.5);border-radius:6px;pointer-events:none;
  background:radial-gradient(circle,#8A5A2B 0 3px,transparent 4px) top left/ 0 0}
.charter-inner > *{position:relative}
.legal .charter-inner h2{color:#5A3410;border-bottom:2px dotted rgba(138,90,43,.55);padding-bottom:6px}
.legal .charter-inner h2::before{content:"❖ ";color:#B3172B}
.legal .charter-inner p,.legal .charter-inner li{color:#2B1D0E}
.legal .charter-inner .meta,.legal .charter-inner .hint{color:#6B4A25}
.legal .charter-inner a{color:#7A3B0A;text-decoration-color:rgba(122,59,10,.5)}
.legal .charter-inner a:hover{text-decoration-color:currentColor}
.legal .charter-inner .callout{background:#FFD32A;color:#121A2E;border:2px solid #1C1820;box-shadow:0 4px 0 #1C1820}
.legal .charter-inner .callout p{color:#121A2E}
.legal .charter-inner code{background:rgba(138,90,43,.16)}
@media (prefers-reduced-motion:no-preference){
  .charter{animation:unroll 600ms var(--ease-out) both}
  @keyframes unroll{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- Help: the searching chihuahua ---------- */
.help-hero .art{width:min(360px,100%)}
@media (max-width:700px){.help-hero .art{width:min(320px,92%)}}
.legal .help-hero .callout{margin:16px 0 0}

/* ---------- Wall of Shame and Hall of Fame: full-box themes ----------
   Each list has a backdrop layer (.theme) that fills the whole box and carries the variant class:
   .variant-a is the live default, .variant-b and .variant-c are the alternatives (see variants.js,
   or just change the class in index.html). Dark variants also re-colour the box's own tokens
   (--surface, --text ...) through :has() so every row, select and label stays readable. */
.lists{position:relative;isolation:isolate;overflow:hidden}
.theme{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lists:not(.angel) .theme-fame,.lists.angel .theme-shame{display:none}
.theme > i{position:absolute;inset:0;display:block}
.theme .art{display:none;position:absolute;top:8px;right:14px;width:min(620px,56%);height:auto;max-height:300px;user-select:none}
.theme.variant-a .art.va,.theme.variant-b .art.vb,.theme.variant-c .art.vc{display:block}
.lists .naughty-head{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;min-height:290px}
.lists .naughty-head > div:first-child{flex:none;max-width:min(100%,520px);position:relative;z-index:1}
.lists .list-tabs{position:relative;z-index:1}
.lists .naughty-live{color:var(--list-ink)}
.lists:not(.angel) .naughty-live{margin-top:40px;font-weight:700}

/* the sign / banner for each list (shared by all variants) */
.lists:not(.angel) .naughty-title{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:10px 26px 12px;color:#FFE9B0;font-size:clamp(22px,3.4vw,32px);line-height:1.2;text-shadow:0 2px 0 #1C1820,0 0 1px #1C1820;
  background:repeating-linear-gradient(180deg,#B47A3E 0 22px,#8A5A2B 22px 24px);border:3px solid #1C1820;border-radius:10px;box-shadow:0 5px 0 #1C1820;transform-origin:50% -34px;transform:rotate(-1.2deg)}
.lists:not(.angel) .naughty-title::before,.lists:not(.angel) .naughty-title::after{content:"";position:absolute;top:-34px;width:0;height:34px;border-left:4px dotted #8A93A8}
.lists:not(.angel) .naughty-title::before{left:22px}
.lists:not(.angel) .naughty-title::after{right:22px}
.lists:not(.angel) .naughty-title .wl{box-shadow:0 2px 0 #1C1820}
.lists.angel .naughty-title{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 34px 12px;color:#3A2A00;font-size:clamp(22px,3.4vw,32px);line-height:1.2;
  background:linear-gradient(#FFE97A,#F5B800);border:3px solid #1C1820;border-radius:10px;box-shadow:0 5px 0 #1C1820;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.lists.angel .naughty-title::before{content:"";position:absolute;inset:-18px -30px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(255,226,100,.75),transparent 68%);animation:banner-glow 2.8s ease-in-out infinite}
.lists.angel .naughty-title::after{content:"★ ★ ★";position:absolute;left:50%;top:-22px;translate:-50% 0;font-size:16px;letter-spacing:.35em;color:#FFC83A;text-shadow:0 1px 0 #1C1820;animation:star-twinkle 2.4s ease-in-out infinite}
@keyframes banner-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes star-twinkle{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
@keyframes torch{0%,100%{opacity:.7}35%{opacity:1}60%{opacity:.8}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-60px)}}
@keyframes foil{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
@keyframes pulse-frame{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .lists:not(.angel) .naughty-title{animation:sign-swing 4.2s ease-in-out infinite}
  @keyframes sign-swing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
}

/* ===== Wall of Shame variants ===== */
/* A: red clay brick (img/brick-a-*.svg, drawn by tools/bricks.js), washed out so the rows stay readable */
.theme-shame.variant-a .th-bg{background:linear-gradient(180deg,rgba(217,31,53,.1),transparent 45%),linear-gradient(rgba(255,252,248,.66),rgba(255,252,248,.74)),
  url("img/brick-a-light.svg") 0 0/640px 448px}
:root[data-theme="dark"] .theme-shame.variant-a .th-bg{background:linear-gradient(180deg,rgba(255,77,94,.12),transparent 45%),linear-gradient(rgba(14,18,36,.66),rgba(14,18,36,.76)),
  url("img/brick-a-dark.svg") 0 0/640px 448px}
/* B: a dark medieval fortress wall, battlements along the top, two flickering torches */
.lists:not(.angel):has(.theme-shame.variant-b){--surface:#2B2535;--raised:rgba(255,255,255,.07);--hover:rgba(255,255,255,.12);--line:rgba(255,255,255,.16);--control:#9C93B8;--text:#F6F2FF;--muted:#D0C9E6;--faint:#B8B0D4;--strong:#FFD32A;--on-strong:#1C1820;--list-ink:#FF9AA5;--list-tint:rgba(255,77,94,.16);--ring:#6CD4FF;--game-sel:rgba(255,211,42,.14);color:var(--text)}
.theme-shame.variant-b .th-bg{background:linear-gradient(180deg,rgba(8,6,14,.55),rgba(8,6,14,.2) 30%,rgba(8,6,14,.5)),url("img/brick-b.svg") 0 0/640px 448px}
.theme-shame.variant-b .th-fx{inset:0 0 auto 0;height:26px;background:linear-gradient(90deg,#1B1624 0 30px,transparent 30px 60px) 0 0/60px 100% repeat-x,linear-gradient(#1B1624,#1B1624) 0 22px/100% 4px no-repeat}
.theme-shame.variant-b::before,.theme-shame.variant-b::after{content:"";position:absolute;top:70px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.5),transparent 68%);animation:torch 1.8s ease-in-out infinite}
.theme-shame.variant-b::before{left:-30px}
.theme-shame.variant-b::after{right:-30px;animation-delay:-.9s}
.theme-shame.variant-b .art{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
/* C: whitewashed brick with the paint peeling off (img/brick-c-*.svg) */
.theme-shame.variant-c .th-bg{background:linear-gradient(180deg,rgba(217,31,53,.08),transparent 50%),linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.4)),
  url("img/brick-c-light.svg") 0 0/640px 448px}
:root[data-theme="dark"] .theme-shame.variant-c .th-bg{background:linear-gradient(180deg,rgba(255,77,94,.1),transparent 50%),linear-gradient(rgba(14,18,36,.5),rgba(14,18,36,.62)),
  url("img/brick-c-dark.svg") 0 0/640px 448px}

/* ===== Hall of Fame variants ===== */
/* A: a radiant golden aura on deep purple with star particles drifting across the whole box */
.lists.angel:has(.theme-fame.variant-a){--surface:#241B52;--raised:rgba(255,255,255,.08);--hover:rgba(255,255,255,.13);--line:rgba(255,226,120,.22);--control:#A79BE0;--text:#FFF9E6;--muted:#E4DCF7;--faint:#CFC5EE;--strong:#FFD32A;--on-strong:#1C1820;--list-ink:#FFE79A;--list-tint:rgba(255,211,42,.14);--ring:#6CD4FF;--game-sel:rgba(255,211,42,.14);color:var(--text)}
.theme-fame.variant-a .th-bg{background:radial-gradient(ellipse 70% 60% at 78% 8%,rgba(255,226,120,.6),rgba(255,200,40,.18) 45%,transparent 70%),radial-gradient(ellipse 60% 40% at 12% 100%,rgba(255,200,40,.22),transparent 70%),linear-gradient(180deg,#3B2A6B,#1D1747)}
.theme-fame.variant-a .th-fx{background-image:radial-gradient(2px 2px at 12% 22%,#fff,transparent),radial-gradient(2.5px 2.5px at 30% 70%,#FFE97A,transparent),radial-gradient(2px 2px at 48% 35%,#fff,transparent),radial-gradient(3px 3px at 66% 82%,#FFE97A,transparent),radial-gradient(2px 2px at 84% 55%,#fff,transparent),radial-gradient(2.5px 2.5px at 92% 18%,#FFE97A,transparent),radial-gradient(2px 2px at 22% 92%,#fff,transparent),radial-gradient(2px 2px at 74% 40%,#FFE97A,transparent);animation:star-twinkle 3.4s ease-in-out infinite}
.theme-fame.variant-a::after{content:"";position:absolute;inset:-60px 0 0;background-image:radial-gradient(2px 2px at 8% 50%,#FFF3B0,transparent),radial-gradient(2px 2px at 40% 20%,#fff,transparent),radial-gradient(3px 3px at 58% 90%,#FFE97A,transparent),radial-gradient(2px 2px at 78% 10%,#fff,transparent),radial-gradient(2px 2px at 96% 70%,#FFE97A,transparent);background-size:100% 380px;animation:drift 9s linear infinite alternate}
/* B: white marble pillars with gold foil edges and a slow foil shimmer */
.lists.angel:has(.theme-fame.variant-b){--surface:#FBF8F2;--raised:#F1ECE1;--hover:#EBE4D6;--line:#DDD3BE;--control:#8A7A58;--text:#2B2210;--muted:#5A4D2E;--faint:#6B5C38;--strong:#2B2210;--on-strong:#FFF9E6;--list-ink:#7A5A00;--list-tint:#FFF1BF;--ring:#1F6FEB;--game-sel:#FFF3C4;color:var(--text)}
.theme-fame.variant-b .th-bg{background:linear-gradient(115deg,transparent 38%,rgba(150,140,165,.16) 39%,transparent 41%),linear-gradient(72deg,transparent 58%,rgba(150,140,165,.13) 59%,transparent 61%),linear-gradient(160deg,transparent 18%,rgba(150,140,165,.1) 19%,transparent 21%),linear-gradient(180deg,#FFFDF8,#F3EEE3)}
.theme-fame.variant-b .th-fx{background:linear-gradient(90deg,#E4DDCC,#fff 45%,#DDD5C2) left/26px 100% no-repeat,linear-gradient(90deg,#DDD5C2,#fff 55%,#E4DDCC) right/26px 100% no-repeat,linear-gradient(90deg,#B8860B,#FFE97A 50%,#B8860B) 0 0/100% 6px no-repeat,linear-gradient(90deg,#B8860B,#FFE97A 50%,#B8860B) 0 100%/100% 6px no-repeat;
  box-shadow:inset 26px 0 0 -22px #D6A52A,inset -26px 0 0 -22px #D6A52A}
.theme-fame.variant-b::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:foil 7s ease-in-out infinite;opacity:.6}
.lists.angel:has(.theme-fame.variant-b) .naughty-title{color:#3A2A00}
/* C: dark luxury arcade frame, neon gold and pink, scanlines and a glowing champion banner */
.lists.angel:has(.theme-fame.variant-c){--surface:#0F0A24;--raised:rgba(255,255,255,.06);--hover:rgba(255,255,255,.1);--line:rgba(255,211,42,.25);--control:#B49CFF;--text:#FFF9E6;--muted:#E0D8F4;--faint:#C9BFEA;--strong:#FFD32A;--on-strong:#0B0716;--list-ink:#FFD32A;--list-tint:rgba(255,211,42,.13);--ring:#6CD4FF;--game-sel:rgba(255,211,42,.14);color:var(--text)}
.theme-fame.variant-c .th-bg{background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),linear-gradient(rgba(255,211,42,.06) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(255,211,42,.06) 1px,transparent 1px) 0 0/36px 36px,radial-gradient(ellipse 60% 50% at 50% 0,rgba(255,211,42,.22),transparent 70%),#0B0716}
.theme-fame.variant-c .th-fx{inset:10px;border-radius:18px;box-shadow:inset 0 0 0 3px #FFD32A,inset 0 0 26px rgba(255,211,42,.4),0 0 0 3px rgba(255,77,166,.7),0 0 22px rgba(255,77,166,.45);animation:pulse-frame 3s ease-in-out infinite}
.lists.angel:has(.theme-fame.variant-c) .naughty-title{background:linear-gradient(#FFE97A,#F5B800);box-shadow:0 0 0 3px #1C1820,0 0 28px rgba(255,211,42,.8),0 6px 0 3px #1C1820}

@media (max-width:1000px){
  .theme .art{width:min(330px,46%);opacity:.55}
  .lists .naughty-head{min-height:230px}
}
@media (max-width:600px){
  .theme-fame .art{display:none!important}
  .lists .naughty-head{min-height:0}
  .theme-shame .th-bg{background-size:auto,auto,420px 294px!important}
  .lists:not(.angel) .naughty-title{padding:8px 16px 10px}
}
@media (prefers-reduced-motion:reduce){
  .lists.angel .naughty-title::before,.lists.angel .naughty-title::after,.theme *,.theme::before,.theme::after{animation:none!important}
}

/* ---------- Variant picker (local preview only: shown on localhost or with ?variants) ---------- */
.variant-bar{position:fixed;right:12px;bottom:12px;z-index:48;max-width:calc(100vw - 24px);border:2px solid #1C1820;border-radius:14px;background:#FFD32A;color:#121A2E;box-shadow:0 4px 0 #1C1820;font-size:13px}
.variant-bar summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;cursor:pointer;list-style:none;font-weight:800}
.variant-bar summary::-webkit-details-marker{display:none}
.variant-bar[open] summary{border-bottom:2px solid rgba(0,0,0,.18)}
.vb-body{display:grid;gap:8px;padding:10px 12px 12px}
.vb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vb-row > span{font-weight:700}
.vb-btns{display:inline-flex;gap:4px}
.vb-btns button{min-width:36px;min-height:32px;border:2px solid #1C1820;border-radius:8px;background:#fff;color:#121A2E;font-weight:800;font-size:13px}
.vb-btns button[aria-pressed="true"]{background:#121A2E;color:#fff}
@media (pointer:coarse){.vb-btns button{min-height:40px;min-width:44px}}

/* Wall of Shame B: solid rows so the bricks never show through the text, torch glow kept to the corners */
.lists:not(.angel):has(.theme-shame.variant-b) .nl-row{background:#2F2943;border-color:rgba(255,255,255,.08)}
.lists:not(.angel):has(.theme-shame.variant-b) .nl-row.top{background:#4A2433;border-color:rgba(255,120,135,.4)}
.theme-shame.variant-b::before,.theme-shame.variant-b::after{top:16px;opacity:.7}

/* Phones and narrow windows: the small pillory dog sits centred above the sign instead of beside it */
@media (max-width:820px){
  .theme-shame .art{display:none;top:12px;left:50%;right:auto;translate:-50% 0;width:min(260px,72%)}
  .theme-shame.variant-a .art.va,.theme-shame.variant-b .art.vb,.theme-shame.variant-c .art.vc{display:block}
  .lists:not(.angel) .naughty-head{padding-top:100px}
  .lists:not(.angel) .naughty-title{margin-top:30px}
}