/* Theme trials (user 10-15: "too like grandis" = white page + orange pill buttons + green online pill + centred copy).
   index.html?t=night | red | sticker. Each breaks those four traits. */

/* ---------- NIGHT: deep indigo sky, gold + fire accents, glowing cluster, left-aligned copy ---------- */
body.t-night { --ink: #f3eefe; --muted: #b9b0dc; --line: #2c2559; --brand: #ff8a3d; --brand-d: #c85a12; --brand-l: #2a2156; background: #120d2e; }
.t-night .top { background: #120d2e; }
.t-night .top.solid { border-color: #2c2559; }
.t-night .logo { color: #ffd166; }
.t-night .hero { position: relative; background: radial-gradient(60% 70% at 25% 55%, #3b2a8a 0%, transparent 70%), radial-gradient(40% 40% at 90% 10%, #2a1f66, transparent 70%); }
.t-night .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 70% 15%, #ffd166 50%, transparent), radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent), radial-gradient(1px 1px at 55% 85%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 92% 35%, #fff 50%, transparent); }
.t-night .cluster::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,160,60,.35), transparent 65%); filter: blur(8px); }
.t-night .cluster img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.t-night .hero-copy { text-align: left; align-items: flex-start; }
.t-night .hero-copy h1 { color: #fff; font-size: 44px; }
.t-night .live { background: none; color: #ffd166; padding: 0; }
.t-night .live .pulse { background: #ffd166; }
.t-night .stack { flex-direction: row; align-items: center; width: auto; }
.t-night .stack .btn { width: auto; }
.t-night .btn { background: linear-gradient(180deg, #ffd166, #ff8a3d); color: #3a1600; box-shadow: 0 5px 0 #b4570e; }
.t-night .btn.ghost { background: none; color: #fff; border: 2px solid #4b3f8f; box-shadow: none; }
.t-night .strip { border-color: #2c2559; }
.t-night .strip .job { color: #b9b0dc; }
.t-night .strip .job:hover { background: #221a4d; color: #fff; }
.t-night .feature h2 { color: #ffd166; }
.t-night .feature .art .blob { background: #231b52 !important; }
.t-night .promo { background: #0b0820; }
.t-night .closing h2 { color: #ffd166; }
.t-night .wave path { fill: #ff8a3d; }

/* ---------- RED: full colour-block fire red hero, giant white type, characters bleed off the bottom ---------- */
body.t-red { --brand: #e8322a; --brand-d: #a5150f; --brand-l: #ffe3dd; }
.t-red .top { background: #e8322a; }
.t-red .logo, .t-red .nav a { color: #fff; }
.t-red .nav a.on, .t-red .nav a:hover { color: #ffd84d; }
.t-red .nav a.btn { background: #1d1d1f; box-shadow: 0 4px 0 #000; }
.t-red .hero { background: #e8322a; color: #fff; padding-bottom: 0; overflow: hidden; }
.t-red .hero .wrap { grid-template-columns: .95fr 1.05fr; align-items: end; }
.t-red .hero-copy { order: -1; text-align: left; align-items: flex-start; padding-bottom: 70px; }
.t-red .hero-copy h1 { color: #fff; font-size: 56px; line-height: 1.15; max-width: 520px; }
.t-red .live { background: rgba(0,0,0,.18); color: #fff; }
.t-red .live .pulse { background: #ffd84d; }
.t-red .stack { flex-direction: row; width: auto; }
.t-red .stack .btn { width: auto; }
.t-red .btn { background: #1d1d1f; box-shadow: 0 5px 0 #000; }
.t-red .btn.ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); box-shadow: none; }
.t-red .cluster { margin-bottom: -40px; }
.t-red .feature h2 { color: #e8322a; }
.t-red .closing h2 { color: #e8322a; }
.t-red .closing .btn { background: #e8322a; box-shadow: 0 5px 0 #a5150f; }
.t-red .wave path { fill: #e8322a; }
.t-red .foot { background: #e8322a; }

/* ---------- STICKER: sunny yellow, thick ink outlines, tilted sticker characters, comic panels ---------- */
body.t-sticker { --ink: #1a1a1a; --muted: #3d3d3d; --line: #1a1a1a; --brand: #ff5c39; --brand-d: #1a1a1a; --brand-l: #fff; background: #ffe14d; }
.t-sticker .top { background: #ffe14d; border-bottom: 3px solid #1a1a1a; }
.t-sticker .logo { color: #1a1a1a; }
.t-sticker .nav a { color: #1a1a1a; }
.t-sticker .hero .wrap { background: #fff; border: 3px solid #1a1a1a; border-radius: 28px; box-shadow: 8px 8px 0 #1a1a1a; padding: 30px; }
.t-sticker .cluster img { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 5px 0 rgba(0,0,0,.85)); }
.t-sticker .cluster img:nth-child(odd) { rotate: -5deg; }
.t-sticker .cluster img:nth-child(even) { rotate: 4deg; }
.t-sticker .hero-copy { text-align: left; align-items: flex-start; }
.t-sticker .hero-copy h1 { font-size: 42px; }
.t-sticker .live { background: #1a1a1a; color: #ffe14d; }
.t-sticker .live .pulse { background: #ffe14d; }
.t-sticker .btn { border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; border-radius: 14px; }
.t-sticker .btn:active { transform: translate(5px, 5px); box-shadow: none; }
.t-sticker .btn.ghost { color: #1a1a1a; border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; }
.t-sticker .strip { border-color: #1a1a1a; border-width: 3px 0; background: #fff; }
.t-sticker .feature .art .blob { background: #fff !important; border: 3px solid #1a1a1a; }
.t-sticker .feature h2 { color: #1a1a1a; }
.t-sticker .promo { border-top: 3px solid #1a1a1a; border-bottom: 3px solid #1a1a1a; }
.t-sticker .closing h2 { color: #1a1a1a; }
.t-sticker .wave path { fill: #1a1a1a; }
.t-sticker .foot { background: #1a1a1a; }

/* night: inner pages (panels, boss tiles, podium, tables, tabs, legal text) */
.t-night .panel, .t-night .boss-tile, .t-night .pod, .t-night .tbl-wrap { background: #1a1440; border-color: #2c2559; box-shadow: 0 4px 0 #0b0820; }
.t-night .boss-tile:hover { border-color: #ff8a3d; box-shadow: 0 4px 0 #c85a12; }
.t-night .boss-tile b, .t-night .pod b { color: #fff; }
.t-night .pod.r1 { border-color: #ffd166; box-shadow: 0 5px 0 #b48a1f; }
.t-night .pod .ava { background: #2a2156; }
.t-night .pod .t, .t-night .page-head h1, .t-night .boss-head h2 { color: #ffd166; }
.t-night th { color: #b9b0dc; }
.t-night th, .t-night td { border-color: #2c2559; }
.t-night tr.flag td { background: rgba(255, 75, 75, .15); }
.t-night .tabs { border-color: #2c2559; }
.t-night .tabs button { color: #b9b0dc; }
.t-night .tabs button:hover { background: #221a4d; }
.t-night .tabs button.on { color: #3a1600; background: linear-gradient(180deg, #ffd166, #ff8a3d); box-shadow: 0 3px 0 #b4570e; }
.t-night .badge { background: #2a2156; color: #b9b0dc; }
.t-night .badge.gm { background: #1d3a5c; color: #8fd3ff; }
.t-night .back, .t-night a { color: #ffd166; }
.t-night .legal p, .t-night .legal li, .t-night .legal h3 { color: #ddd6f5; }
.t-night .empty { color: #b9b0dc; }
.t-night .steps li::before { background: linear-gradient(180deg, #ffd166, #ff8a3d); color: #3a1600; box-shadow: 0 3px 0 #b4570e; }
.t-night .foot { background: #ff8a3d; color: #3a1600; }
.t-night .foot-in a { color: #3a1600; }
.t-night .nav a.btn { color: #3a1600; }

/* job showcase hero (official v270 job-select art) */
.stage { position: relative; margin: 0; min-height: 440px; display: grid; place-items: center; }
.stage img { width: 118%; max-width: 760px; max-height: 520px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); transition: opacity .15s, transform .3s; margin-left: -6%; }
.stage img.swap { opacity: 0; transform: translateY(8px); }
.stage figcaption { position: absolute; left: 4%; bottom: 4%; display: flex; flex-direction: column; font-family: var(--head); }
.stage figcaption b { font-size: 28px; font-weight: 600; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.stage figcaption span { color: #ffd166; font-size: 15px; }
.strip .job { background: none; border: 0; cursor: pointer; font: 500 14px var(--head); }
.strip .job img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 30%; border-radius: 12px; background: #221a4d; }
.strip .job.on { color: #ffd166; background: #221a4d; }
.strip-count { flex: none; font: 600 14px var(--head); color: #ffd166; padding: 0 6px; }
.t-night .hero { min-height: 560px; }
@media (max-width: 820px) { .stage { min-height: 300px; } .stage img { width: 100%; margin: 0; } }

/* about cards (layout requested by the user from a reference screenshot; our text + game item icons) */
.about, .newboss { padding: 80px 0 30px; }
.sec-h { text-align: center; font-size: 34px; color: #fff; letter-spacing: .5px; margin-bottom: 10px; }
.sec-h::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; background: #ffd166; margin: 12px auto 0; }
.sec-sub { text-align: center; color: var(--muted); margin: 0 0 36px; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-card { background: #1a1440; border: 1px solid #2c2559; border-radius: 16px; padding: 28px; transition: transform .2s, border-color .2s; }
.about-card:hover { transform: translateY(-4px); border-color: #4b3f8f; }
.about-card .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #2a2156; margin-bottom: 18px; }
.about-card .ico img { max-width: 30px; max-height: 30px; }
.about-card h3 { font-size: 20px; color: #fff; margin-bottom: 8px; }
.about-card p { color: #c9c0e8; margin: 0; line-height: 1.75; }
.about-card b { color: #ffd166; font-weight: 500; }
.bc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bc { display: block; border-radius: 16px; overflow: hidden; border: 1px solid #2c2559; background: #1a1440; transition: transform .2s, border-color .2s, box-shadow .2s; }
.bc.big { grid-column: span 2; }
.bc img { display: block; width: 100%; aspect-ratio: 778 / 556; object-fit: cover; }
.bc:hover { transform: translateY(-4px); border-color: #ffd166; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } .bc-grid { grid-template-columns: repeat(2, 1fr); } .bc.big { grid-column: span 2; } }

/* new bosses: in-game sprites (user 10-15: like the wiki monster images, smaller than the boss-entry cards) */
.bs-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.bs { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 14px; background: #1a1440; border: 1px solid #2c2559; transition: transform .2s, border-color .2s; }
.bs:hover { transform: translateY(-4px); border-color: #ffd166; text-decoration: none; }
.bs .pic { height: 120px; width: 100%; display: grid; place-items: center; }
.bs img { max-height: 120px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.bs b { font: 500 15px var(--head); color: #fff; text-align: center; }
@media (max-width: 900px) { .bs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .bs-grid { grid-template-columns: repeat(2, 1fr); } }