/* gate/css/gate.css - THE GATE's page: the stage, the loading curtain, the door (the entry page), the book, the card
 * viewer's frame, the toast, the rotate prompt and the boot error.
 *
 * The founder (2026-09-28): "I would like a really cool entry page", and at 13:22: "Make the art cool." The door is
 * the Gate's own painted room (assets/backgrounds/painted/web/room-gate.jpg), slowly breathing, with the eyes in the
 * gap of the gate lit and blinking, corn-light drifting up through the fog, and the title set in the game's engraved
 * serif. The two sides wear their colours: the HERD candy pink and gold, the HORDE toxic green (html[data-band],
 * set by js/gate-splash.js from the account's side). Everything here is plain CSS; the only pictures are the game's
 * own. The card viewer's rules are the main game's (index.html .cv-*), copied because this page does not load that
 * stylesheet. */

:root {
  --ink: #0B0814;
  --night: #0B1410;
  --obsidian: #14121A;
  --panel: #2A2140;
  --parchment: #FBF3E7;
  --lavender: #C9A8F5;
  --muted: #8E7FB0;
  --gold: #F5C242;
  --gold-deep: #B7791F;
  --candy-pink: #FF8FC7;
  --mint-teal: #7FE0D6;
  --toxic-green: #6BE04A;
  --blood: #FF6B6B;
  --accent: var(--candy-pink);
  --accent-2: var(--gold);
  --glow: rgba(107, 224, 74, 0.55);
  --font: 'Trebuchet MS', 'Lucida Grande', Verdana, sans-serif;
  --title-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
html[data-band="horde"] { --accent: var(--toxic-green); --accent-2: #B9F59E; }

html, body { margin: 0; padding: 0; height: 100%; background: var(--ink); color: var(--parchment); font-family: var(--font); overflow: hidden; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); }
#stage canvas { display: block; }

/* ---- the rotate prompt -------------------------------------------------------------------------------------------- */
#rotate-prompt {
  display: none;
  position: fixed; inset: 0; z-index: 80;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center; color: var(--parchment);
  background: radial-gradient(ellipse at 50% 30%, #173A22 0%, #0B1410 60%, #05080A 100%);
}
html[data-rotate="1"] #rotate-prompt { display: flex; }
#rotate-prompt .rp-device {
  width: 46px; height: 84px; border: 3px solid var(--gold); border-radius: 10px;
  box-shadow: inset 0 0 0 2px #14121A, 0 0 24px var(--glow);
  animation: gate-rotate-hint 2.2s ease-in-out infinite;
}
html[data-device="tablet"] #rotate-prompt .rp-device { width: 70px; height: 96px; border-radius: 12px; }
#rotate-prompt .rp-title { margin: 0; font-family: var(--title-font); font-weight: bold; font-size: 24px; letter-spacing: 0.08em; color: var(--gold); }
#rotate-prompt .rp-sub { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.5; color: #CFE8C8; }
@keyframes gate-rotate-hint { 0%, 20% { transform: rotate(0deg); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }

/* ---- the boot error ----------------------------------------------------------------------------------------------- */
#boot-error {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); text-align: center; padding: 24px;
}
#boot-error[hidden] { display: none; }
#boot-error .be-title { margin: 0; font-family: var(--title-font); font-size: 26px; color: var(--gold); }
#boot-error .be-sub { margin: 0; font-size: 14px; color: var(--lavender); max-width: 420px; }

/* =====================================================================================================================
   THE LOADING CURTAIN: the green sky over the gatehouse, two lanterns breathing, corn-light drifting up.
   ===================================================================================================================== */
#load-curtain {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 24px 18vh; text-align: center; color: var(--parchment);
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #1E4A2A 0%, #0F2618 38%, #0B1410 70%, #05080A 100%);
  transition: opacity 0.6s ease;
}
#load-curtain.is-done { opacity: 0; pointer-events: none; }
#load-curtain .lc-sky {
  position: absolute; inset: -20% -10% 40%;
  background: conic-gradient(from 0deg at 50% 60%, rgba(107, 224, 74, 0.0), rgba(107, 224, 74, 0.16), rgba(40, 120, 90, 0.0), rgba(107, 224, 74, 0.12), rgba(107, 224, 74, 0.0));
  filter: blur(30px); animation: gate-swirl 26s linear infinite; opacity: 0.9;
}
@keyframes gate-swirl { to { transform: rotate(360deg); } }
#load-curtain .lc-lantern { position: absolute; bottom: 14vh; width: 22vmin; height: 22vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, 0.55) 0%, rgba(255, 150, 60, 0.18) 38%, rgba(0, 0, 0, 0) 70%); animation: gate-breathe 3.6s ease-in-out infinite; }
#load-curtain .lc-lantern--l { left: 8vw; }
#load-curtain .lc-lantern--r { right: 8vw; animation-delay: -1.8s; }
@keyframes gate-breathe { 0%, 100% { opacity: 0.65; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
.lc-motes span, .gs-motes span {
  position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
  background: #E6FF9A; box-shadow: 0 0 10px 2px rgba(190, 255, 110, 0.75);
  animation: gate-mote 9s linear infinite; opacity: 0;
}
.lc-motes span:nth-child(1), .gs-motes span:nth-child(1) { left: 8%; animation-delay: 0s; }
.lc-motes span:nth-child(2), .gs-motes span:nth-child(2) { left: 19%; animation-delay: -2.1s; animation-duration: 11s; }
.lc-motes span:nth-child(3), .gs-motes span:nth-child(3) { left: 27%; animation-delay: -5.2s; }
.lc-motes span:nth-child(4), .gs-motes span:nth-child(4) { left: 36%; animation-delay: -1.3s; animation-duration: 12s; }
.lc-motes span:nth-child(5), .gs-motes span:nth-child(5) { left: 47%; animation-delay: -7.4s; }
.lc-motes span:nth-child(6), .gs-motes span:nth-child(6) { left: 58%; animation-delay: -3.3s; animation-duration: 10s; }
.lc-motes span:nth-child(7), .gs-motes span:nth-child(7) { left: 66%; animation-delay: -6.1s; }
.lc-motes span:nth-child(8), .gs-motes span:nth-child(8) { left: 75%; animation-delay: -0.6s; animation-duration: 13s; }
.lc-motes span:nth-child(9), .gs-motes span:nth-child(9) { left: 86%; animation-delay: -4.4s; }
.lc-motes span:nth-child(10), .gs-motes span:nth-child(10) { left: 93%; animation-delay: -8.2s; animation-duration: 11s; }
.gs-motes span:nth-child(11) { left: 41%; animation-delay: -9.1s; animation-duration: 14s; }
.gs-motes span:nth-child(12) { left: 53%; animation-delay: -10.5s; animation-duration: 12s; }
@keyframes gate-mote {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  60% { transform: translate(18px, -55vh) scale(1); opacity: 0.7; }
  100% { transform: translate(-12px, -104vh) scale(0.4); opacity: 0; }
}
#load-curtain .lc-crest { width: 92px; height: 92px; filter: drop-shadow(0 0 22px var(--glow)); animation: gate-breathe 3.6s ease-in-out infinite; position: relative; }
#load-curtain .lc-kicker { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--lavender); position: relative; }
#load-curtain .lc-title { margin: 0; font-family: var(--title-font); font-size: clamp(40px, 9vw, 86px); letter-spacing: 0.16em; line-height: 1; position: relative;
  background: linear-gradient(180deg, #FFF3C4 10%, #F5C242 55%, #B7791F 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #1A1026) drop-shadow(0 0 26px rgba(107, 224, 74, 0.35)); }
#load-curtain .lc-sub { margin: 0; font-style: italic; color: #CFE8C8; letter-spacing: 0.06em; position: relative; }
#load-curtain .lc-bar { width: min(420px, 70vw); height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 16px; position: relative; box-shadow: 0 0 0 1px rgba(245, 194, 66, 0.35); }
#load-curtain .lc-bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #2F8F2A, #6BE04A, #F5C242); transition: width 0.3s ease; box-shadow: 0 0 12px var(--glow); }
#load-curtain .lc-pct { font-size: 11px; color: var(--muted); position: relative; min-height: 14px; }
#load-curtain .lc-note { margin: 0; font-size: 13px; color: var(--lavender); position: relative; min-height: 18px; }
#load-curtain .lc-tip { margin: 6px 0 0; max-width: 460px; font-size: 12px; line-height: 1.5; color: var(--gold); position: relative; }
#load-curtain.is-failed .lc-note { color: var(--blood); }
#load-curtain .lc-copyright { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 16px; font-size: 10px; color: rgba(251, 243, 231, 0.45); }
#load-curtain .cr-short { display: none; }
html[data-device="phone"] #load-curtain .cr-full { display: none; }
html[data-device="phone"] #load-curtain .cr-short { display: inline; }

/* =====================================================================================================================
   THE START PAGE: one painting, the title, a line, one action (the founder, 13:39: "not so old school... smoother")
   ===================================================================================================================== */
.gs {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box; background: #05080A;
  animation: gate-in 0.9s ease both;
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}
.gs[hidden] { display: none; }
.gs.is-leaving { opacity: 0; transform: scale(1.04); filter: blur(4px); }
@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }
.gs-art { position: absolute; inset: 0; overflow: hidden; }
.gs-plate {
  position: absolute; inset: -5%;
  background: url("../../assets/backgrounds/painted/web/splash-evil.jpg") center 30% / cover no-repeat;
  animation: gate-drift 40s ease-in-out infinite alternate;
}
@keyframes gate-drift { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, 1.2%); } }
/* the god's green storm, breathing behind the title */
.gs-glow { position: absolute; left: 50%; top: 22%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 224, 74, 0.28) 0%, rgba(107, 224, 74, 0.08) 38%, transparent 66%); mix-blend-mode: screen; animation: gate-pulse 6s ease-in-out infinite; }
@keyframes gate-pulse { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.gs-fog { position: absolute; left: -30%; right: -30%; bottom: -10%; height: 50%; background: radial-gradient(ellipse at 30% 70%, rgba(150, 190, 210, 0.2), transparent 60%), radial-gradient(ellipse at 75% 80%, rgba(120, 170, 150, 0.16), transparent 55%); filter: blur(20px); animation: gate-fog 30s ease-in-out infinite alternate; }
.gs-fog--2 { bottom: 24%; height: 36%; opacity: 0.55; animation-duration: 46s; animation-direction: alternate-reverse; }
@keyframes gate-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.gs-motes { position: absolute; inset: 0; }
.gs-vignette { position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 60% at 50% 46%, rgba(5, 8, 10, 0.1) 0%, rgba(5, 8, 10, 0.55) 70%, rgba(5, 8, 10, 0.92) 100%),
  linear-gradient(180deg, rgba(5, 8, 10, 0.35) 0%, rgba(5, 8, 10, 0) 30%, rgba(5, 8, 10, 0.2) 60%, rgba(5, 8, 10, 0.85) 100%); }
.gs-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 900px; animation: gate-rise 1.1s cubic-bezier(.2, .8, .2, 1) 0.15s both; }
@keyframes gate-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gs-kicker { margin: 0; font-size: 12px; letter-spacing: 0.6em; padding-left: 0.6em; text-transform: uppercase; color: rgba(216, 245, 204, 0.8); text-shadow: 0 1px 3px #000; }
.gs-title { margin: 6px 0 0; font-family: var(--title-font); font-weight: bold; font-size: clamp(64px, 13vw, 168px); line-height: 0.9; letter-spacing: 0.14em; padding-left: 0.14em;
  background: linear-gradient(180deg, #FFF8DC 6%, #F5C242 48%, #8E5A12 96%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(20, 10, 30, 0.9)) drop-shadow(0 0 38px rgba(107, 224, 74, 0.35)); }
.gs-sub { margin: 18px 0 0; max-width: 32em; font-family: var(--title-font); font-style: italic; font-size: clamp(17px, 2.1vw, 25px); line-height: 1.35; color: #E3FAD8;
  text-shadow: 0 0 22px rgba(107, 224, 74, 0.6), 0 2px 3px #000; animation: gate-flicker 8s infinite; }
@keyframes gate-flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: 0.5; } 92% { opacity: 1; } 95% { opacity: 0.72; } }
.gs-enter { position: relative; margin-top: 34px; padding: 15px 64px; border-radius: 999px; cursor: pointer; overflow: hidden;
  font-family: var(--title-font); font-weight: bold; font-size: 22px; letter-spacing: 0.34em; text-transform: uppercase; color: #F6FFE9;
  background: rgba(10, 30, 16, 0.42); border: 1px solid rgba(190, 255, 150, 0.7); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 28px rgba(107, 224, 74, 0.35), inset 0 0 24px rgba(107, 224, 74, 0.18);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease; }
.gs-enter span { position: relative; padding-left: 0.34em; }
.gs-enter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(220, 255, 200, 0.35) 45%, transparent 60%); background-size: 260% 100%; animation: gate-sheen 4.2s ease-in-out infinite; }
.gs-enter:hover, .gs-enter:focus-visible { transform: translateY(-2px) scale(1.03); background: rgba(40, 110, 50, 0.5); outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 44px rgba(107, 224, 74, 0.6), inset 0 0 30px rgba(107, 224, 74, 0.3); }
@keyframes gate-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.gs-band { margin: 18px 0 0; min-height: 16px; font-size: 12px; letter-spacing: 0.1em; color: color-mix(in srgb, var(--accent) 80%, #fff 20%); text-shadow: 0 1px 3px #000; }
.gs-copy { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-size: 10px; color: rgba(251, 243, 231, 0.4); }
@media (max-height: 520px) {
  .gs-title { font-size: 64px; }
  .gs-sub { margin-top: 10px; font-size: 16px; }
  .gs-enter { margin-top: 18px; padding: 11px 44px; font-size: 18px; }
  .gs-band { margin-top: 10px; }
}

/* =====================================================================================================================
   THE CORNER: the account and the side, small, over the start page and the gatehouse
   ===================================================================================================================== */
.gc { position: fixed; z-index: 45; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.gc.is-on { opacity: 1; transform: none; }
.gc.is-on > * { pointer-events: auto; }
html[data-loading] .gc { opacity: 0; }
.gc-home, .gc-chip, .gc-sound, .gc-side { display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; border-radius: 999px; color: var(--parchment); text-decoration: none; cursor: pointer;
  background: rgba(8, 10, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); transition: border-color 0.2s, background 0.2s; font-size: 12px; }
.gc-home { padding: 0 14px 0 10px; letter-spacing: 0.06em; }
.gc-home svg { width: 16px; height: 16px; }
.gc-acct { margin-left: auto; display: flex; }
.gc-chip { padding: 0 14px 0 10px; }
.gc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.gc-chip--guest .gc-dot { background: var(--mint-teal); box-shadow: 0 0 10px var(--mint-teal); }
.gc-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.gc-name { font-weight: bold; font-size: 12px; }
.gc-band { font-size: 9px; letter-spacing: 0.16em; color: var(--accent); }
.gc-chip--guest .gc-band { color: var(--mint-teal); }
.gc-sound { width: 36px; justify-content: center; padding: 0; }
.gc-sound svg { width: 18px; height: 18px; }
.gc-sound .gc-x { display: none; }
.gc-sound.is-muted .gc-x { display: inline; }
.gc-sound.is-muted .gc-wave { display: none; }
/* PICK A SIDE, again (the founder, 2026-09-28): the half-light, half-dark disc opens the shared screen (js/side-picker.js) */
.gc-side { padding: 0 12px 0 8px; font-size: 11px; font-weight: bold; letter-spacing: 0.14em; text-transform: uppercase; }
.gc-side svg { width: 18px; height: 18px; flex: none; }
.gc-side-band { color: var(--accent); }
.gc-home:hover, .gc-chip:hover, .gc-sound:hover, .gc-side:hover, .gc-home:focus-visible, .gc-chip:focus-visible, .gc-sound:focus-visible, .gc-side:focus-visible { border-color: var(--accent); background: rgba(20, 24, 30, 0.75); outline: none; }
@media (max-width: 560px) { .gc-home span, .gc-side-band { display: none; } .gc-side { padding: 0; width: 36px; justify-content: center; } }
html[data-picking] .gc { opacity: 0; pointer-events: none; }

/* ---- the shared dialog frame and buttons -------------------------------------------------------------------------- */
.gate-dialog { opacity: 0; transition: opacity 0.22s ease; }
.gate-dialog.is-open { opacity: 1; }
.gate-dialog > div { transform: translateY(10px) scale(0.985); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.gate-dialog.is-open > div { transform: none; }
.gate-x { position: absolute; right: 10px; top: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(245, 194, 66, 0.6); background: rgba(11, 8, 20, 0.8); color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; }
.gate-x:hover, .gate-x:focus-visible { background: var(--gold); color: #14121A; outline: none; }
.gate-btn { padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: bold; cursor: pointer; color: #1A1026; border: 1px solid #FFF3C4; background: linear-gradient(180deg, #FFE08A, #F5C242 55%, #C98F22); }
.gate-btn:hover, .gate-btn:focus-visible { filter: brightness(1.08); outline: none; }
.gate-btn:disabled { opacity: 0.45; cursor: default; }
.gate-btn--ghost { color: var(--parchment); background: rgba(11, 8, 20, 0.6); border-color: rgba(201, 168, 245, 0.5); font-weight: normal; }

/* ---- THE PANEL: the Ledger and the Strongbox ---------------------------------------------------------------------- */
.gp { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 10, 0.78); backdrop-filter: blur(4px); }
.gp[hidden] { display: none; }
.gp-box { position: relative; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 22px 24px 20px; border-radius: 14px;
  background: linear-gradient(160deg, #1B1530, #0F0B18); border: 1px solid rgba(245, 194, 66, 0.55); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.gp-kicker { margin: 0; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender); }
.gp-title { margin: 4px 0 12px; font-family: var(--title-font); font-size: 28px; letter-spacing: 0.12em; color: var(--gold); }
.gp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gp-stat { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.gp-stat-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.gp-stat-value { margin-top: 2px; font-family: var(--title-font); font-weight: bold; font-size: 20px; color: var(--parchment); }
.gp-stat[data-tone="gold"] .gp-stat-value { color: var(--gold); }
.gp-stat[data-tone="mint"] .gp-stat-value { color: var(--mint-teal); }
.gp-stat[data-tone="hot"] .gp-stat-value { color: var(--blood); }
.gp-stat[data-tone="warm"] .gp-stat-value { color: var(--gold); }
.gp-rage { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(107, 224, 74, 0.07); border: 1px solid rgba(107, 224, 74, 0.35); }
.gp-rage-face { width: 64px; height: 64px; flex: none; }
.gp-rage-text { flex: 1 1 auto; }
.gp-rage-label { margin: 0; font-family: var(--title-font); font-weight: bold; letter-spacing: 0.08em; color: var(--toxic-green); }
.gp-rage[data-tone="warm"] .gp-rage-label { color: var(--gold); }
.gp-rage[data-tone="hot"] .gp-rage-label { color: var(--blood); }
.gp-bar { height: 8px; margin: 6px 0; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.gp-bar-fill { height: 100%; background: linear-gradient(90deg, #2F8F2A, #6BE04A, #F5C242, #FF6B6B); }
.gp-head { margin: 16px 0 6px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.gp-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--lavender); }
.gp-note--mint { color: var(--mint-teal); }
.gp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.gp-sigil { width: 26px; height: 26px; }
.gp-god { flex: 1 1 auto; font-size: 13px; }
.gp-rec { font-size: 11px; color: var(--muted); }
.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* =====================================================================================================================
   THE BOOK: THE STORY and HOW TO PLAY
   ===================================================================================================================== */
.gb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: rgba(5, 8, 10, 0.82); backdrop-filter: blur(4px); }
.gb[hidden] { display: none; }
.gb-box { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: min(1080px, 100%); max-height: calc(100vh - 32px); border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #1B1530, #0F0B18); border: 1px solid rgba(245, 194, 66, 0.55); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(107, 224, 74, 0.12); }
.gb-art { position: relative; min-height: 320px; background: #0B0814; overflow: hidden; }
.gb-art[hidden] { display: none; }
.gb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.5s ease, transform 6s ease; }
.gb-art.is-in img { opacity: 1; transform: scale(1); }
.gb-art--card { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #1E4A2A, #0B0814 70%); }
.gb-art--card img { position: relative; inset: auto; width: auto; height: auto; max-width: 70%; max-height: 86%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(245, 194, 66, 0.6); }
.gb-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 70%, rgba(15, 11, 24, 0.9)); }
.gb-text { display: flex; flex-direction: column; padding: 26px 28px 18px; min-height: 0; overflow: auto; scroll-padding-bottom: 72px; }
.gb-kicker { margin: 0; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender); }
.gb-title { margin: 4px 0 0; font-family: var(--title-font); font-size: 30px; letter-spacing: 0.12em; color: var(--gold); text-shadow: 0 2px 0 #1A1026; }
.gb-standfirst { margin: 8px 0 0; font-style: italic; font-size: 13px; line-height: 1.5; color: #D8F5CC; }
.gb-from { margin: 14px 0 0; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.gb-heading { margin: 14px 0 0; font-family: var(--title-font); font-size: 22px; color: var(--parchment); }
.gb-from:not([hidden]) + .gb-heading { margin-top: 4px; }
.gb-body { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #EDE3F7; flex: 1 1 auto; }
.gb-signoff { margin: 12px 0 0; font-family: var(--title-font); font-style: italic; color: var(--gold); }
.gb-replay { align-self: flex-start; width: auto; margin: 2px 0 10px; padding: 6px 12px; font-size: 12px; color: #7FE0D6; border-color: rgba(127, 224, 214, 0.6); }
.gb-replay[hidden] { display: none; }
/* the page turner stays at the foot of the text column while a long page scrolls (2026-10-05: on a phone held sideways
   the Next button used to sit below the screen) */
.gb-nav { position: sticky; bottom: -18px; display: flex; align-items: center; gap: 10px; margin: 16px -28px -18px; padding: 12px 28px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #120E1D; }
.gb-dots { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; justify-content: center; }
.gb-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid rgba(245, 194, 66, 0.6); background: transparent; cursor: pointer; }
.gb-dot.is-on { background: var(--gold); box-shadow: 0 0 8px rgba(245, 194, 66, 0.8); }
.gb-count { font-size: 11px; color: var(--muted); min-width: 40px; text-align: center; }
@media (max-width: 760px), (max-height: 520px) {
  .gb-box { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .gb-art { min-height: 0; }
  .gb-text { padding: 16px 16px 12px; }
  .gb-nav { bottom: -12px; margin: 12px -16px -12px; padding: 10px 16px 10px; }
  .gb-title { font-size: 20px; }
  .gb-heading { font-size: 17px; margin-top: 8px; }
  .gb-body { font-size: 13px; line-height: 1.5; }
  .gb-standfirst { display: none; }
}
/* A CARD, LABELLED (gate-splash.js labelledCard; How to Play's "Reading a card", 2026-10-05): the side's own card, a
   numbered pin in the margin beside each part with a line across to it, the part framed in gold while it is lit, and
   the six short lines in the text column. Every position is a share of the 1050 x 1050 frame (card-view.js units). */
.gb-art--diagram { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #1E4A2A, #0B0814 70%); }
.gb-art--diagram img, .gb-art--diagram::after { display: none; }
.gb-diagram { position: relative; width: 300px; height: 300px; opacity: 0; transition: opacity 0.4s ease; }
.gb-art.is-in .gb-diagram { opacity: 1; }
.gb-diagram-card { position: absolute; left: 14.286%; top: 0; width: 71.429%; height: 100%; border-radius: 4.8% / 3.4%; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6); }
.gb-lead { position: absolute; height: 2px; margin-top: -1px; background: rgba(245, 194, 66, 0.55); pointer-events: none; }
.gb-lead.is-on { background: var(--gold); box-shadow: 0 0 6px rgba(245, 194, 66, 0.9); }
.gb-ring { position: absolute; box-sizing: border-box; border: 3px solid var(--gold); border-radius: 10px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(20, 18, 26, 0.7), 0 0 16px rgba(245, 194, 66, 0.9); transition: opacity 0.2s ease; }
.gb-ring--round { border-radius: 50%; }
.gb-ring.is-on { opacity: 1; }
.gb-pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); cursor: pointer;
  background: #1A1026; color: var(--gold); font-family: var(--title-font); font-size: 15px; font-weight: bold; line-height: 26px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.gb-pin.is-on { background: var(--gold); color: #1A1026; }
.gb-body.gb-body--short { flex: 0 0 auto; }
.gb-parts { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.gb-parts[hidden], .gb-tip[hidden] { display: none; }
.gb-part { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 10px; cursor: pointer; text-align: left; color: inherit;
  font-size: 13px; border: 1px solid rgba(245, 194, 66, 0.2); background: rgba(255, 255, 255, 0.03); }
.gb-part:hover, .gb-part.is-on { border-color: var(--gold); background: rgba(245, 194, 66, 0.1); }
.gb-part-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); font-family: var(--title-font); font-size: 13px; font-weight: bold;
  line-height: 20px; text-align: center; }
.gb-part.is-on .gb-part-n { background: var(--gold); color: #1A1026; }
.gb-part-words { display: block; min-width: 0; padding-top: 2px; font-size: 13px; line-height: 1.4; color: #EDE3F7; }
.gb-part-label { font-size: 14px; font-weight: bold; color: var(--parchment); margin-right: 6px; }
.gb-tip { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--lavender); }

/* ---- the toast ---------------------------------------------------------------------------------------------------- */
.gate-toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; transform: translate(-50%, 12px); opacity: 0;
  font-size: 13px; line-height: 1.45; color: var(--parchment); background: rgba(20, 18, 26, 0.95); border: 1px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); transition: opacity 0.25s, transform 0.25s; }
.gate-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.gate-toast[hidden] { display: none; }

/* =====================================================================================================================
   THE CARD VIEWER (js/card-view.js), the main game's own rules (index.html .cv-*) and buttons (.ud-btn)
   ===================================================================================================================== */
.cv-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(8, 5, 14, 0.82); display: grid; place-items: center; padding: 12px; }
.cv-box { display: grid; grid-template-columns: auto 260px; gap: 22px; align-items: center; max-width: 96vw; }
.cv-stage { perspective: 1600px; width: min(46vh, 330px); aspect-ratio: 5 / 7; cursor: grab; touch-action: none; user-select: none; }
.cv-stage:active { cursor: grabbing; }
.cv-stage--plain, .cv-stage--plain:active { cursor: default; }
.cv-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.65)); }
.cv-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4.8%; object-fit: contain; }
/* the back is a mirror image, so it reads the right way round once the card has turned (the main game's note) */
.cv-back { transform: scaleX(-1); }
.cv-head { color: var(--parchment); }
.cv-kind { margin: 0; font-size: 10px; letter-spacing: 0.18em; color: var(--gold); }
.cv-title { margin: 4px 0 0; font-size: 22px; font-family: var(--title-font); }
.cv-line { margin: 6px 0 0; font-size: 13px; color: var(--lavender); }
.cv-bar { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
/* On a phone (the founder, 2026-10-04: the full card "pushes Turn over and Close off the bottom of the screen") the
   buttons sit beside the card under its words, not in a row below the card, and the card is no taller than the
   screen. The main game's twin rules in index.html have the same layout since the founder's "Fix it" the same day. */
html[data-device="phone"] .cv-box { grid-template-columns: auto 160px; grid-template-rows: auto auto; gap: 8px 12px; }
html[data-device="phone"] .cv-stage { grid-row: 1 / span 2; width: min(240px, calc((100vh - 24px) * 5 / 7)); width: min(240px, calc((100dvh - 24px) * 5 / 7)); }
html[data-device="phone"] .cv-head { align-self: end; }
html[data-device="phone"] .cv-bar { align-self: start; }
html[data-device="phone"] .cv-title { font-size: 16px; }
.cv-bar .ud-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: pointer; color: #1A1026; border: 1px solid #FFF3C4; background: linear-gradient(180deg, #FFE08A, #F5C242 55%, #C98F22); }
.cv-bar .ud-btn--ghost { color: var(--parchment); background: rgba(11, 8, 20, 0.7); border-color: rgba(201, 168, 245, 0.5); font-weight: normal; }
.cv-bar .ud-btn:hover, .cv-bar .ud-btn:focus-visible { filter: brightness(1.1); outline: none; }
/* THE FACTS (js/card-view.js open(card, { facts: true }); the founder, 2026-10-04: "I want it readable for folks (like
   me with progressive lenses and poor sight)"): big icons and numbers in a column left of the card, the rules as page
   text beside it, bigger words and thumb-sized buttons. Only the Gate's viewer asks for it. */
.cv-box--facts { grid-template-columns: 250px auto minmax(0, 360px); grid-template-rows: auto auto; gap: 14px 26px; align-items: center; }
.cv-box--facts .cv-facts { grid-column: 1; grid-row: 1 / span 2; }
.cv-box--facts .cv-stage { grid-column: 2; grid-row: 1 / span 2; width: min(58vh, 380px); }
.cv-box--facts .cv-head { grid-column: 3; align-self: end; max-height: 62vh; overflow-y: auto; }
.cv-box--facts .cv-bar { grid-column: 3; align-self: start; }
.cv-facts { display: flex; flex-direction: column; gap: 10px; }
.cv-fact { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(42, 33, 64, 0.95), rgba(20, 18, 26, 0.95));
  border: 1px solid rgba(245, 194, 66, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.45); }
.cv-fact-icon { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.cv-fact-num { min-width: 1.1em; font-family: var(--title-font); font-weight: bold; font-size: 38px; line-height: 1; color: var(--parchment); text-shadow: 0 2px 0 #1A1026, 0 0 14px rgba(0, 0, 0, 0.6); }
.cv-fact--cost .cv-fact-num, .cv-fact--yield .cv-fact-num { color: var(--gold); }
.cv-fact--attack .cv-fact-num { color: #FF8F8F; }
.cv-fact--health .cv-fact-num { color: var(--mint-teal); }
.cv-fact--yield .cv-fact-num { font-size: 28px; }
.cv-fact-words { display: flex; flex-direction: column; min-width: 0; }
.cv-fact-label { font-size: 18px; font-weight: bold; color: var(--parchment); }
.cv-fact-sub { font-size: 14px; color: var(--lavender); }
.cv-box--facts .cv-kind { font-size: 14px; }
.cv-box--facts .cv-title { font-size: 32px; }
.cv-box--facts .cv-line { font-size: 15px; }
.cv-rules { margin: 12px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 17px; line-height: 1.5; color: #F3EAFB; }
.cv-rules li::marker { color: var(--gold); }
.cv-flavour { margin: 12px 0 0; font-style: italic; font-size: 16px; line-height: 1.5; color: #CDBFE6; }
.cv-box--facts .cv-bar .ud-btn { min-height: 44px; padding: 10px 18px; font-size: 16px; border-radius: 10px; }
html[data-device="phone"] .cv-box--facts { grid-template-columns: 168px auto minmax(0, 1fr); gap: 8px 12px; width: 100%; }
html[data-device="phone"] .cv-box--facts .cv-stage { width: min(200px, calc((100vh - 24px) * 5 / 7)); width: min(200px, calc((100dvh - 24px) * 5 / 7)); }
html[data-device="phone"] .cv-box--facts .cv-head { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); align-self: start; }
html[data-device="phone"] .cv-box--facts .cv-bar { align-self: end; }
html[data-device="phone"] .cv-facts { gap: 6px; }
html[data-device="phone"] .cv-fact { gap: 8px; padding: 6px 8px 6px 6px; border-radius: 10px; }
html[data-device="phone"] .cv-fact-icon { width: 38px; height: 38px; }
html[data-device="phone"] .cv-fact-num { font-size: 28px; }
html[data-device="phone"] .cv-fact--yield .cv-fact-num { font-size: 20px; }
html[data-device="phone"] .cv-fact-label { font-size: 15px; }
html[data-device="phone"] .cv-fact-sub { font-size: 12px; }
html[data-device="phone"] .cv-box--facts .cv-kind { font-size: 12px; }
html[data-device="phone"] .cv-box--facts .cv-title { font-size: 22px; }
html[data-device="phone"] .cv-box--facts .cv-line { font-size: 13px; }
html[data-device="phone"] .cv-rules { font-size: 15px; gap: 5px; margin-top: 6px; }
html[data-device="phone"] .cv-flavour { font-size: 14px; margin-top: 6px; }
html[data-device="phone"] .cv-box--facts .cv-bar .ud-btn { font-size: 15px; padding: 10px 14px; }

/* ---- a player who asked for less motion gets the still painting ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gs, .gs-hero, .gs-plate, .gs-glow, .gs-fog, .gs-motes span, .lc-motes span, .gs-sub, .gs-enter::before, .lc-sky, .lc-lantern, .lc-crest { animation: none !important; }
  .gs, .gc, .gate-dialog, .gate-dialog > div, .gate-toast, .gb-art img, .gb-diagram, .gb-ring { transition: none !important; }
}

/* =====================================================================================================================
   THE STANDING (js/gate-standing.js, 2026-09-28): the CHALLENGES tab and sidebar, the badges, the leaderboard. The
   founder: "a challenges sidebar and a leaderboard like the other games specific to this game and apart from it. Give
   it some badges as well that folks can earn." The main game's drawer (js/drawers.js .ud-drawer*) in the Gate's night.
   ===================================================================================================================== */
.gsd-tab { position: fixed; left: 0; top: 34%; z-index: 44; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed; padding: 14px 7px; margin-left: env(safe-area-inset-left);
  border: 1px solid rgba(245, 194, 66, 0.6); border-left: none; border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, #1F3A26, #0F1E14); color: var(--gold);
  font-family: inherit; font-size: 11px; font-weight: bold; letter-spacing: 0.22em; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); transition: background 0.12s ease, color 0.12s ease; }
html[data-band="horde"] .gsd-tab { background: linear-gradient(180deg, #3A1F3A, #1B0F1E); }
.gsd-tab:hover, .gsd-tab:focus-visible { background: linear-gradient(180deg, #2C5236, #16301F); outline: none; }
.gsd-tab.is-open { color: var(--mint-teal); border-color: rgba(127, 224, 214, 0.6); }
.gsd-tab[hidden] { display: none; }
.gsd-tab.has-claim, html[data-band="horde"] .gsd-tab.has-claim { color: #14121A; background: linear-gradient(180deg, #FFE08A, var(--gold)); border-color: rgba(255, 224, 138, 0.9); animation: gsd-claim-pulse 1.4s ease-in-out infinite; }
.gsd-tab.has-claim::after { content: attr(data-claim); position: absolute; top: -8px; left: 50%; transform: translateX(-50%); writing-mode: horizontal-tb; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--candy-pink); color: #14121A; font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0; }
@keyframes gsd-claim-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 rgba(245, 194, 66, 0); } 50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 18px rgba(245, 194, 66, 0.8); } }
html[data-rotate="1"] .gsd-tab, html[data-rotate="1"] .gsd, html[data-picking] .gsd-tab { display: none; }

.gsd { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 400px; max-width: 92vw; box-sizing: border-box;
  display: flex; flex-direction: column; padding-left: env(safe-area-inset-left);
  background: linear-gradient(180deg, #16301F 0%, #0F1E14 55%, #0B1410 100%);
  border: 1px solid rgba(245, 194, 66, 0.4); border-left: none; border-radius: 0 14px 14px 0; box-shadow: 0 0 60px rgba(0, 0, 0, 0.75);
  transform: translateX(-105%); transition: transform 0.22s ease; color: var(--parchment); }
.gsd[data-band="horde"] { background: linear-gradient(180deg, #2E1830 0%, #1B0F1E 55%, #110A14 100%); }
.gsd.is-open { transform: none; }
.gsd[hidden] { display: none; }
.gsd-head { position: relative; padding: 14px 56px 10px 18px; border-bottom: 1px solid rgba(245, 194, 66, 0.25); }
.gsd-kicker { margin: 0; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender); }
.gsd-title { margin: 2px 0 0; font-family: var(--title-font); font-size: 24px; letter-spacing: 0.14em; color: var(--gold); }
.gsd-close { top: 12px; }
.gsd-body { flex: 1; overflow-y: auto; padding: 10px 14px 22px; -webkit-overflow-scrolling: touch; }
.gsd-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 224, 214, 0.08); border: 1px solid rgba(127, 224, 214, 0.45); font-size: 12px; line-height: 1.4; color: #CFEFEA; }
.gsd-practice strong { color: var(--mint-teal); letter-spacing: 0.2em; font-size: 11px; }
.gsd-practice span { flex: 1 1 200px; }
.gsd-record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
.gsd-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 194, 66, 0.2); }
.gsd-stat-value { font-family: var(--title-font); font-weight: bold; font-size: 20px; color: var(--gold); line-height: 1.1; }
.gsd-stat-label { margin-top: 2px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.gsd-sec { margin-top: 14px; }
.gsd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(245, 194, 66, 0.25); }
.gsd-sec-head h3 { margin: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.gsd-sec-head span { font-size: 11px; color: var(--muted); text-align: right; }
.gsd-ch { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; padding: 9px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(201, 168, 245, 0.18); }
.gsd-ch.is-done { border-color: rgba(107, 224, 74, 0.5); }
.gsd-ch.is-claimable { border-color: rgba(245, 194, 66, 0.85); box-shadow: 0 0 16px rgba(245, 194, 66, 0.25); }
.gsd-ch.is-practice { opacity: 0.85; }
.gsd-ch-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3E6B45, #16301F); border: 2px solid rgba(107, 224, 74, 0.6); color: #B9F59E; }
.gsd-ch-mark--weekly { background: radial-gradient(circle at 35% 30%, #6B5A2E, #2E2410); border-color: rgba(245, 194, 66, 0.7); color: #FFE08A; }
.gsd-ch-mark svg { width: 22px; height: 22px; }
.gsd-ch-words { min-width: 0; }
.gsd-ch-title { display: block; font-size: 13px; color: var(--parchment); }
.gsd-ch-line { display: block; margin-top: 1px; font-size: 11px; line-height: 1.35; color: var(--lavender); }
.gsd-bar { height: 6px; margin: 6px 0 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.gsd-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2F8F2A, #6BE04A, #F5C242); transition: width 0.4s ease; }
.gsd-ch-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gsd-ch-count { font-size: 11px; font-weight: bold; letter-spacing: 0.06em; color: var(--muted); }
.gsd-ch.is-done .gsd-ch-count { color: var(--toxic-green); }
.gsd-chip { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: bold; color: #1A1026; background: linear-gradient(180deg, #FFB8DD, var(--candy-pink)); white-space: nowrap; }
.gsd-chip--essence { background: linear-gradient(180deg, #C9F7B0, var(--toxic-green)); }
.gsd-claim { padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: bold; letter-spacing: 0.1em; cursor: pointer; color: #1A1026; border: 1px solid #FFF3C4; background: linear-gradient(180deg, #FFE08A, #F5C242 55%, #C98F22); }
.gsd-claim:hover, .gsd-claim:focus-visible { filter: brightness(1.08); outline: none; }
.gsd-claim:disabled { opacity: 0.55; cursor: default; }
.gsd-claim--ghost { color: var(--parchment); background: rgba(11, 8, 20, 0.6); border-color: rgba(127, 224, 214, 0.6); letter-spacing: 0.04em; }
.gsd-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--lavender); }
.gsd-note--hot { color: var(--blood); }
.gsd-foot { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.gsd-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gsd-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; font-family: inherit; }
.gsd-badge:hover, .gsd-badge:focus-visible { border-color: rgba(245, 194, 66, 0.5); outline: none; }
.gsd-badge.is-earned { color: var(--parchment); }
.gsd-badge-name { font-size: 9px; line-height: 1.2; text-align: center; letter-spacing: 0.04em; }
.gsd-board-btn { display: block; width: 100%; margin-top: 16px; padding: 12px; border-radius: 12px; cursor: pointer; font-family: var(--title-font); font-weight: bold; font-size: 15px; letter-spacing: 0.2em;
  color: var(--gold); background: linear-gradient(180deg, rgba(245, 194, 66, 0.16), rgba(245, 194, 66, 0.05)); border: 1px solid rgba(245, 194, 66, 0.7); }
.gsd-board-btn:hover, .gsd-board-btn:focus-visible { background: rgba(245, 194, 66, 0.25); outline: none; }

/* a medal: a disc in its metal, the badge's mark on it; a locked one is dark with a small lock */
.gsd-medal { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.25);
  background: radial-gradient(circle at 35% 30%, #3A3448, #16121E); border: 2px solid rgba(142, 127, 176, 0.35); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.5); }
.gsd-medal svg { width: 24px; height: 24px; }
.gsd-medal--big { width: 64px; height: 64px; }
.gsd-medal--big svg { width: 32px; height: 32px; }
.gsd-medal.is-earned { color: #2A1A08; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 14px rgba(245, 194, 66, 0.35); }
.gsd-medal--bronze.is-earned { background: radial-gradient(circle at 35% 30%, #F2B27A, #9A5A2A); border-color: #FFD2A8; }
.gsd-medal--silver.is-earned { background: radial-gradient(circle at 35% 30%, #F4F6FA, #8C97A8); border-color: #FFFFFF; }
.gsd-medal--gold.is-earned { background: radial-gradient(circle at 35% 30%, #FFE9A8, #C98F22); border-color: #FFF3C4; }
.gsd-medal--mythic.is-earned { background: radial-gradient(circle at 35% 30%, #D8B8FF, #6B3FB0); border-color: #F0E0FF; color: #FFF6D8; box-shadow: 0 0 18px rgba(201, 168, 245, 0.7); }
.gsd-lock { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 12px; border-radius: 3px; background: #4A4060; border: 1px solid #8E7FB0; }
.gsd-lock::before { content: ''; position: absolute; left: 3px; top: -6px; width: 6px; height: 6px; border: 2px solid #8E7FB0; border-bottom: none; border-radius: 5px 5px 0 0; }

/* the cheer: a finished challenge or a new badge, top centre, for four seconds */
.gsd-cheer { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 46px); left: 50%; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 18px 10px 12px; border-radius: 14px; cursor: pointer; transform: translate(-50%, -12px); opacity: 0; transition: opacity 0.3s, transform 0.3s;
  color: var(--parchment); background: rgba(14, 12, 20, 0.95); border: 1px solid var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 194, 66, 0.25); }
.gsd-cheer.is-on { opacity: 1; transform: translate(-50%, 0); }
.gsd-cheer > svg { width: 30px; height: 30px; color: var(--toxic-green); }
.gsd-cheer-words { display: flex; flex-direction: column; }
.gsd-cheer-sub { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.gsd-cheer strong { font-family: var(--title-font); font-size: 18px; }

/* THE LEADERBOARD panel */
.glb-tabs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.glb-group { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(245, 194, 66, 0.3); }
.glb-tab { padding: 6px 12px; border: none; border-radius: 999px; background: none; color: var(--lavender); font-size: 12px; cursor: pointer; }
.glb-tab.is-on { color: #1A1026; font-weight: bold; background: linear-gradient(180deg, #FFE08A, #F5C242); }
.glb-season { margin: 0 0 8px; font-family: var(--title-font); font-size: 16px; color: var(--parchment); }
.glb-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.glb-table th { padding: 2px 8px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: normal; }
.glb-table td { padding: 7px 8px; background: rgba(255, 255, 255, 0.04); }
.glb-table td:first-child { border-radius: 8px 0 0 8px; }
.glb-table td:last-child { border-radius: 0 8px 8px 0; }
.glb-rank { width: 28px; font-family: var(--title-font); font-weight: bold; color: var(--lavender); }
.glb-rank-1 .glb-rank { color: #FFD76A; } .glb-rank-2 .glb-rank { color: #E6ECF5; } .glb-rank-3 .glb-rank { color: #F2B27A; }
.glb-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glb-side { font-size: 11px; font-weight: bold; letter-spacing: 0.08em; }
.glb-side--herd { color: var(--candy-pink); }
.glb-side--horde { color: var(--toxic-green); }
.glb-num { text-align: right; font-variant-numeric: tabular-nums; }
.glb-dim { color: var(--muted); }
.glb-table tr.is-me td { background: rgba(245, 194, 66, 0.16); }
.glb-me { margin: 8px 0 0; font-weight: bold; color: var(--gold); }

/* THE BADGES panel */
.gbd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gbd-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(142, 127, 176, 0.25); }
.gbd-cell.is-earned { background: rgba(245, 194, 66, 0.07); border-color: rgba(245, 194, 66, 0.5); }
.gbd-cell.is-focus { box-shadow: 0 0 0 2px var(--gold); }
.gbd-title { margin-top: 4px; font-family: var(--title-font); font-size: 14px; color: var(--parchment); }
.gbd-cell:not(.is-earned) .gbd-title { color: var(--lavender); }
.gbd-line { font-size: 11px; line-height: 1.35; color: var(--muted); }
.gbd-when { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.gbd-cell:not(.is-earned) .gbd-when { color: var(--muted); }

@media (max-height: 520px) {
  .gsd { width: 360px; }
  .gsd-head { padding: 8px 52px 6px 14px; }
  .gsd-title { font-size: 20px; }
  .gsd-tab { top: 38%; padding: 10px 5px; font-size: 10px; }
  .gsd-badges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gsd-medal { width: 38px; height: 38px; }
  .gsd-medal svg { width: 20px; height: 20px; }
  .gsd-badge-name { display: none; }
  .gbd-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .gsd-cheer { top: calc(max(8px, env(safe-area-inset-top)) + 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .gsd, .gsd-cheer, .gsd-bar-fill { transition: none !important; }
  .gsd-tab.has-claim { animation: none !important; }
}

/* =====================================================================================================================
   THE PHONE'S PAGE TEXT (the founder, 2026-10-04: "text is super tiny still in areas on the Phone... smarter ways of
   displaying text when a phone is detected", and "buttons are so freaking tiny"). On a phone (html[data-device="phone"],
   gate-main.js) nothing on the page is under 12 px and every button is 44 px tall (a thumb). Desktop is untouched.
   ===================================================================================================================== */
/* THE ATTACK WINDOW on a phone (gate-table.js drawReactSheet): page text down the right, the table left in view */
.gate-react { position: fixed; z-index: 55; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
  width: min(360px, 44vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 10px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(42, 25, 54, 0.97), rgba(15, 11, 24, 0.97)); border: 2px solid var(--candy-pink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 143, 199, 0.25);
  color: var(--parchment); display: flex; flex-direction: column; gap: 8px; }
.gate-react-title { margin: 0; font-family: var(--title-font); font-size: 19px; line-height: 1.25; color: var(--candy-pink); }
.gate-react-how { margin: 0; font-size: 15px; line-height: 1.4; color: #E6D8FF; }
.gate-react-fly { margin: 0; font-size: 15px; line-height: 1.4; color: var(--mint-teal); }
.gate-react-opt { display: flex; flex-direction: column; gap: 2px; min-height: 52px; padding: 9px 12px; border-radius: 10px; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(251, 243, 231, 0.7); background: var(--opt-fill, #2A2140); color: #14121A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.gate-react-opt--let { color: var(--parchment); border-color: rgba(201, 168, 245, 0.6); }
.gate-react-head { font-size: 16px; font-weight: bold; line-height: 1.25; }
.gate-react-body { font-size: 14px; line-height: 1.35; opacity: 0.92; }
.gate-react-opt:active { filter: brightness(1.15); }
.gate-react > * { flex-shrink: 0; }   /* a long list scrolls; a button never squeezes its words out */
/* THE LOG on a phone (gate-table.js openLogSheet) */
.gp-log li { font-size: 15px; line-height: 1.4; color: #EDE3F7; }

html[data-device="phone"] .gp-box { padding: 16px 16px 14px; max-height: calc(100dvh - 16px); }
html[data-device="phone"] .gp { padding: 8px; }
html[data-device="phone"] .gp-kicker, html[data-device="phone"] .gb-kicker, html[data-device="phone"] .gsd-kicker { font-size: 12px; letter-spacing: 0.2em; }
html[data-device="phone"] .gp-title { font-size: 24px; margin-bottom: 8px; }
html[data-device="phone"] .gp-stat-label, html[data-device="phone"] .gsd-stat-label { font-size: 12px; letter-spacing: 0.1em; }
html[data-device="phone"] .gp-head { font-size: 13px; letter-spacing: 0.16em; }
html[data-device="phone"] .gp-note { font-size: 15px; }
html[data-device="phone"] .gp-god { font-size: 15px; }
html[data-device="phone"] .gp-rec { font-size: 13px; }
html[data-device="phone"] .gate-x { width: 44px; height: 44px; font-size: 26px; }
html[data-device="phone"] .gate-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
html[data-device="phone"] .gb-from { font-size: 12px; }
html[data-device="phone"] .gb-count { font-size: 13px; }
html[data-device="phone"] .gb-body { font-size: 15px; }
html[data-device="phone"] .gb-dot { width: 14px; height: 14px; }
html[data-device="phone"] .gb-part-label { font-size: 15px; }
html[data-device="phone"] .gb-part-words, html[data-device="phone"] .gb-tip { font-size: 14px; }
html[data-device="phone"] .gb-part-n { width: 28px; height: 28px; line-height: 24px; font-size: 14px; }
html[data-device="phone"] .gb-pin { width: 32px; height: 32px; margin: -16px 0 0 -16px; line-height: 28px; font-size: 16px; }
html[data-device="phone"] .gc-band { font-size: 12px; letter-spacing: 0.08em; }
html[data-device="phone"] .gc-side { font-size: 13px; }
html[data-device="phone"] .gsd-tab { font-size: 12px; }
html[data-device="phone"] .gsd-practice strong, html[data-device="phone"] .gsd-ch-line, html[data-device="phone"] .gsd-ch-count, html[data-device="phone"] .gsd-foot,
html[data-device="phone"] .gsd-sec-head span, html[data-device="phone"] .glb-side, html[data-device="phone"] .gbd-line { font-size: 13px; }
html[data-device="phone"] .gsd-chip, html[data-device="phone"] .gsd-badge-name, html[data-device="phone"] .gbd-when, html[data-device="phone"] .gsd-cheer-sub, html[data-device="phone"] .glb-table th { font-size: 12px; }
html[data-device="phone"] .gsd-claim, html[data-device="phone"] .glb-tab { min-height: 44px; font-size: 14px; }
html[data-device="phone"] .gs-copy, html[data-device="phone"] .lc-copyright, html[data-device="phone"] .lc-pct, html[data-device="phone"] .lc-kicker { font-size: 12px; }
html[data-device="phone"] .cv-kind { font-size: 12px; }
html[data-device="phone"] .cv-bar .ud-btn { min-height: 44px; font-size: 15px; padding: 10px 14px; }
html[data-device="phone"] .gate-toast { font-size: 15px; }

/* =====================================================================================================================
   THE DECKBUILDER (gate-deck.js, 2026-10-04; the founder: "a screen that is devoted to just the active deck and the
   card count is below the card ... 'my library' ... a balance meter ... multiple saved decks ... art full cover of the
   highest ranking card"). Page text over the painted room: Active deck, My library, Saved decks; the balance on the
   right; pull, pack and merge in the dock. Every button is a thumb on a phone; the lists scroll.
   ===================================================================================================================== */
.gdb { position: fixed; inset: 0; z-index: 41; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px;
  box-sizing: border-box; padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right), calc((100vw - 1480px) / 2)) 0 max(20px, env(safe-area-inset-left), calc((100vw - 1480px) / 2));
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(58, 31, 82, 0.55), rgba(11, 8, 20, 0) 70%), linear-gradient(180deg, rgba(11, 8, 20, 0.72), rgba(11, 8, 20, 0.9));
  color: var(--parchment); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
.gdb button { font-family: inherit; }
.gdb-ico { width: 1.25em; height: 1.25em; flex: none; }

/* buttons */
.gdb-btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; min-height: 40px; padding: 7px 14px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid rgba(201, 168, 245, 0.5); background: linear-gradient(180deg, rgba(58, 47, 88, 0.95), rgba(36, 28, 56, 0.95)); color: var(--parchment);
  font-size: 14px; font-weight: bold; line-height: 1.15; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.12s, filter 0.12s, box-shadow 0.12s; }
.gdb-btn small { flex-basis: 100%; font-size: 12px; font-weight: normal; color: var(--lavender); }
.gdb-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.gdb-btn:active:not(:disabled) { transform: translateY(1px); }
.gdb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gdb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gdb-btn--gold { background: linear-gradient(180deg, #FFD866, #E0A92E); border-color: #FFE7A0; color: #1A1026; }
.gdb-btn--gold small, .gdb-btn--pink small { color: #3A2440; }
.gdb-btn--pink { background: linear-gradient(180deg, #FFA8D6, #F06AAE); border-color: #FFD0E8; color: #1A1026; }
.gdb-btn--danger { border-color: rgba(255, 107, 107, 0.7); color: #FFB3B3; }
.gdb-btn--big { min-height: 54px; font-size: 17px; }

/* the top: back, the name, the sides, the book */
.gdb-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gdb-back { border-radius: 999px; padding-left: 10px; }
.gdb-titles { flex: 1; min-width: 0; }
.gdb-title { margin: 0; font-family: var(--title-font); font-size: 30px; letter-spacing: 3px; line-height: 1.1;
  background: linear-gradient(180deg, #FFF1C2, #F5C242 55%, #B7791F); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.gdb-purse { margin: 2px 0 0; font-size: 13px; color: var(--lavender); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdb-sides { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(11, 8, 20, 0.6); border: 1px solid rgba(201, 168, 245, 0.25); }
.gdb-side { min-width: 130px; background: transparent; border-color: transparent; box-shadow: none; }
.gdb-side--unicorn.is-on { background: linear-gradient(180deg, #FFA8D6, #F06AAE); color: #1A1026; }
.gdb-side--shadow.is-on { background: linear-gradient(180deg, #A6F08C, #5CC63B); color: #10200A; }
.gdb-help { width: 44px; height: 44px; padding: 0; border-radius: 50%; border-color: var(--gold); color: var(--gold); }

/* the tabs */
.gdb-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; border-bottom: 1px solid rgba(201, 168, 245, 0.22); padding-bottom: 8px; }
.gdb-tab { flex-wrap: nowrap; min-height: 44px; padding: 8px 18px; font-size: 16px; background: rgba(36, 28, 56, 0.75); }
.gdb-tab small { flex-basis: auto; min-width: 26px; padding: 2px 7px; border-radius: 999px; background: rgba(11, 8, 20, 0.7); color: var(--lavender); font-weight: bold; text-align: center; }
.gdb-tab.is-on { background: linear-gradient(180deg, rgba(245, 194, 66, 0.28), rgba(245, 194, 66, 0.08)); border-color: var(--gold); color: #FFF1C2; box-shadow: 0 0 18px rgba(245, 194, 66, 0.25), inset 0 -3px 0 var(--gold); }
.gdb-tab.is-on small { background: var(--gold); color: #1A1026; }
.gdb-note { margin: 0 0 0 auto; padding-left: 12px; font-size: 14px; font-weight: bold; color: var(--gold); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the middle: the view scrolls, the balance beside it */
.gdb-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; min-height: 0; }
.gdb-view, .gdb-aside { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 168, 245, 0.45) transparent; padding: 2px 6px 18px 2px; }
.gdb-view::-webkit-scrollbar, .gdb-aside::-webkit-scrollbar { width: 8px; }
.gdb-view::-webkit-scrollbar-thumb, .gdb-aside::-webkit-scrollbar-thumb { background: rgba(201, 168, 245, 0.4); border-radius: 4px; }
.gdb-viewhead h2 { margin: 2px 0 2px; font-family: var(--title-font); font-size: 22px; color: #FFF1C2; letter-spacing: 1px; }
.gdb-viewhead p { margin: 0 0 12px; font-size: 14px; color: var(--lavender); }
.gdb-empty { margin: 24px 0; font-size: 16px; color: var(--muted); text-align: center; }
.gdb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.gdb-chip { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 999px; }
.gdb-chip.is-on { background: linear-gradient(180deg, #FFD866, #E0A92E); color: #1A1026; border-color: #FFE7A0; }
.gdb-chip--common { color: #CFC4E8; } .gdb-chip--uncommon { color: #7FE0D6; } .gdb-chip--rare { color: #8DB8FF; } .gdb-chip--epic { color: #D49BFF; } .gdb-chip--legendary { color: #FFC857; }
.gdb-chips--rarity { margin-bottom: 14px; }

/* the cards */
.gdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 18px 14px; }
.gdb-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gdb-card { --rim: #A99AC7; position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--rim); background: radial-gradient(ellipse at 50% 30%, #3A2F58, #14121A); color: var(--parchment); text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6) inset; transition: transform 0.16s, box-shadow 0.16s, filter 0.16s; }
.gdb-card--shadow { background: radial-gradient(ellipse at 50% 30%, #23402A, #0B1410); }
.gdb-card--uncommon { --rim: #7FE0D6; } .gdb-card--rare { --rim: #6FA8FF; } .gdb-card--epic { --rim: #C77DFF; }
.gdb-card--legendary { --rim: #FFC857; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 200, 87, 0.45); }
.gdb-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gdb-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 8, 20, 0.55) 0%, rgba(11, 8, 20, 0) 26%, rgba(11, 8, 20, 0) 48%, rgba(11, 8, 20, 0.88) 78%, rgba(11, 8, 20, 0.95) 100%); }
.gdb-card::after { content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: 0; transform: translateX(-60%) rotate(18deg);
  background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 216, 102, 0.22) 52%, transparent 65%); transition: opacity 0.2s; }
.gdb-card:hover, .gdb-card:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 18px color-mix(in srgb, var(--rim) 55%, transparent); outline: none; }
.gdb-card:hover::after { opacity: 1; animation: gdb-sheen 0.9s ease-out; }
@keyframes gdb-sheen { from { transform: translateX(-60%) rotate(18deg); } to { transform: translateX(60%) rotate(18deg); } }
.gdb-card.is-dim { filter: grayscale(0.7) brightness(0.6); }
.gdb-card.is-picked { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 22px rgba(245, 194, 66, 0.7); }
.gdb-card > span, .gdb-card > img.gdb-role { position: absolute; z-index: 3; }
.gdb-cost { top: 6px; left: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #14121A; border: 2px solid #FFD866;
  font-family: var(--title-font); font-size: 17px; font-weight: bold; color: #FFF1C2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.gdb-role { top: 3px; right: 3px; width: 36px; height: 36px; }
.gdb-general { top: 38px; left: 9px; color: #FFB347; filter: drop-shadow(0 1px 2px #000); }
.gdb-name { left: 6px; right: 6px; bottom: 34px; font-family: var(--title-font); font-size: 15px; font-weight: bold; line-height: 1.12; text-shadow: 0 1px 3px #000, 0 0 8px #000;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gdb-stats { left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; }
.gdb-stats b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-family: var(--title-font); font-size: 15px; color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); }
.gdb-atk { background: #C0392B; } .gdb-hp { background: #1F7A6E; }
.gdb-kind { left: 0; right: 0; bottom: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--lavender); text-shadow: 0 1px 2px #000; }
.gdb-count { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.gdb-step { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 16px; }
.gdb-n { min-width: 40px; text-align: center; font-family: var(--title-font); font-size: 20px; color: var(--gold); text-shadow: 0 1px 3px #000; }
.gdb-own { font-size: 13px; color: var(--lavender); }
.gdb-mint { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--mint-teal); }

/* the balance */
.gdb-panel { border-radius: 16px; padding: 14px 16px 16px; background: linear-gradient(170deg, rgba(48, 34, 72, 0.92), rgba(18, 13, 30, 0.94)); border: 1px solid rgba(201, 168, 245, 0.32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.gdb-panel h3 { margin: 0 0 8px; font-family: var(--title-font); font-size: 20px; color: #FFF1C2; letter-spacing: 1px; }
.gdb-meters { display: grid; gap: 12px; }
.gdb-meter-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 5px; }
.gdb-meter-ends span { display: inline-flex; align-items: center; gap: 5px; }
.gdb-meter-ends em { font-style: normal; color: var(--parchment); opacity: 0.85; }
.gdb-meter--attack { color: #FF8A8A; } .gdb-meter--defense { color: var(--mint-teal); } .gdb-meter--physical { color: #FFC857; } .gdb-meter--magic { color: #D49BFF; }
.gdb-meter-bar { position: relative; height: 12px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.gdb-meter-bar--attack { background: linear-gradient(90deg, #2AA596, #7FE0D6); }
.gdb-meter-bar--physical { background: linear-gradient(90deg, #8E4BD6, #D49BFF); }
.gdb-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-right: 2px solid #FFF1C2; transition: width 0.35s ease; }
.gdb-meter-bar--attack i { background: linear-gradient(90deg, #E04848, #FF8A8A); }
.gdb-meter-bar--physical i { background: linear-gradient(90deg, #D9962A, #FFC857); }
.gdb-meter-bar--none { opacity: 0.35; }
.gdb-meter--mini .gdb-meter-ends { font-size: 12px; margin-bottom: 3px; }
.gdb-meter--mini .gdb-meter-bar { height: 7px; }
.gdb-facts { list-style: none; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(201, 168, 245, 0.2); display: grid; gap: 6px; font-size: 14px; }
.gdb-facts li { display: flex; justify-content: space-between; gap: 8px; }
.gdb-facts li span { color: var(--lavender); }
.gdb-facts li.is-bad b { color: var(--blood); }
.gdb-problems { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--candy-pink); line-height: 1.35; }
.gdb-legal { margin: 10px 0 0; font-size: 15px; font-weight: bold; color: var(--mint-teal); }
.gdb-save { display: grid; gap: 8px; margin-top: 14px; }
.gdb-next { margin: 12px 2px 0; font-size: 13px; font-weight: bold; line-height: 1.4; color: var(--gold); }
.gdb-next--horde { color: var(--toxic-green); }
.gdb-fallen { margin: 10px 2px 0; font-size: 12px; color: var(--blood); }

/* the saved decks */
.gdb-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.gdb-deck { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: linear-gradient(170deg, rgba(48, 34, 72, 0.95), rgba(18, 13, 30, 0.96));
  border: 1px solid rgba(201, 168, 245, 0.35); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.gdb-deck.is-loaded { border-color: var(--gold); box-shadow: 0 0 22px rgba(245, 194, 66, 0.35), 0 10px 26px rgba(0, 0, 0, 0.5); }
.gdb-deck > .gdb-meters { padding: 12px 14px 4px; }
.gdb-cover { --rim: #A99AC7; position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 30%, #3A2F58, #14121A); border-bottom: 2px solid var(--rim); }
.gdb-cover--uncommon { --rim: #7FE0D6; } .gdb-cover--rare { --rim: #6FA8FF; } .gdb-cover--epic { --rim: #C77DFF; } .gdb-cover--legendary { --rim: #FFC857; }
.gdb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.gdb-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 8, 20, 0) 40%, rgba(11, 8, 20, 0.92) 100%); }
.gdb-cover-cap { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; }
.gdb-cover-cap h3 { margin: 0; font-family: var(--title-font); font-size: 22px; color: #FFF1C2; text-shadow: 0 2px 6px #000; overflow-wrap: anywhere; }
.gdb-cover-cap p { margin: 2px 0 0; font-size: 13px; color: var(--lavender); text-shadow: 0 1px 3px #000; }
.gdb-deck-acts { display: flex; gap: 8px; padding: 10px 14px 14px; }
.gdb-deck-acts .gdb-btn { flex: 1; padding-inline: 8px; }
.gdb-deck--new { justify-content: center; gap: 8px; padding: 18px; min-height: 200px; border: 2px dashed rgba(245, 194, 66, 0.55); background: rgba(36, 28, 56, 0.6); }
.gdb-deck--new > b { font-family: var(--title-font); font-size: 20px; color: #FFF1C2; }
.gdb-deck--new > p { margin: 0; font-size: 14px; color: var(--lavender); }
.gdb-name-form { display: grid; gap: 10px; }
.gdb-name-form label { display: grid; gap: 6px; font-size: 14px; color: var(--lavender); }
.gdb-name-form input { font: inherit; font-size: 16px; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(245, 194, 66, 0.6); background: rgba(11, 8, 20, 0.85); color: var(--parchment); }
.gdb-name-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.gdb-cover-cap .gdb-name-form label { color: #FFF1C2; }

/* the dock */
.gdb-dock { display: flex; justify-content: center; gap: 12px; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(201, 168, 245, 0.22); }
.gdb-dock-btn { min-width: 190px; min-height: 52px; font-size: 16px; border-left-width: 4px; }
.gdb-dock-btn--gold { border-left-color: var(--gold); } .gdb-dock-btn--pink { border-left-color: var(--candy-pink); } .gdb-dock-btn--teal { border-left-color: var(--mint-teal); }

/* a narrower computer window: the balance goes under the cards */
@media (max-width: 980px) { html:not([data-device="phone"]) .gdb-main { grid-template-columns: minmax(0, 1fr) 280px; } }

/* THE PHONE: one short screen held sideways, so the top is one row, the balance is a narrow column, and every
   button is a thumb (44 px); words stay at 12 px or more */
html[data-device="phone"] .gdb { gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
html[data-device="phone"] .gdb-top { gap: 8px; }
html[data-device="phone"] .gdb-title { font-size: 17px; letter-spacing: 1px; }
html[data-device="phone"] .gdb-purse { font-size: 12px; }
html[data-device="phone"] .gdb-back .gdb-btn-word { display: none; }
html[data-device="phone"] .gdb-back, html[data-device="phone"] .gdb-help { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
html[data-device="phone"] .gdb-side { min-width: 0; min-height: 44px; padding: 6px 10px; font-size: 13px; }
html[data-device="phone"] .gdb-tabs { gap: 6px; padding-bottom: 6px; }
html[data-device="phone"] .gdb-tab { min-height: 44px; padding: 6px 12px; font-size: 14px; }
html[data-device="phone"] .gdb-note { font-size: 13px; }
html[data-device="phone"] .gdb-main { grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; }
html[data-device="phone"] .gdb-viewhead h2 { font-size: 17px; }
html[data-device="phone"] .gdb-viewhead p { font-size: 12px; margin-bottom: 8px; }
html[data-device="phone"] .gdb-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 12px 8px; }
html[data-device="phone"] .gdb-chip { min-height: 44px; padding: 6px 12px; font-size: 13px; }
html[data-device="phone"] .gdb-cost { width: 24px; height: 24px; font-size: 14px; top: 4px; left: 4px; }
html[data-device="phone"] .gdb-role { width: 28px; height: 28px; }
html[data-device="phone"] .gdb-general { top: 30px; left: 7px; }
html[data-device="phone"] .gdb-name { font-size: 12px; bottom: 27px; left: 4px; right: 4px; }
html[data-device="phone"] .gdb-stats { left: 4px; right: 4px; bottom: 4px; }
html[data-device="phone"] .gdb-stats b { width: 21px; height: 21px; font-size: 12px; }
html[data-device="phone"] .gdb-kind { font-size: 12px; letter-spacing: 0; bottom: 6px; }
html[data-device="phone"] .gdb-step { width: 44px; min-height: 44px; }
html[data-device="phone"] .gdb-n { font-size: 17px; min-width: 30px; }
html[data-device="phone"] .gdb-own { font-size: 12px; }
html[data-device="phone"] .gdb-panel { padding: 10px 12px 12px; border-radius: 12px; }
html[data-device="phone"] .gdb-panel h3 { font-size: 16px; margin-bottom: 4px; }
html[data-device="phone"] .gdb-meter-ends { font-size: 12px; }
html[data-device="phone"] .gdb-meter-bar { height: 10px; }
html[data-device="phone"] .gdb-facts, html[data-device="phone"] .gdb-problems, html[data-device="phone"] .gdb-next, html[data-device="phone"] .gdb-fallen { font-size: 12px; }
html[data-device="phone"] .gdb-btn { min-height: 44px; font-size: 13px; }
html[data-device="phone"] .gdb-btn--big { min-height: 48px; font-size: 15px; }
html[data-device="phone"] .gdb-btn small { font-size: 12px; }
html[data-device="phone"] .gdb-decks { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
html[data-device="phone"] .gdb-cover-cap h3 { font-size: 17px; }
html[data-device="phone"] .gdb-cover-cap p { font-size: 12px; }
html[data-device="phone"] .gdb-deck--new { min-height: 110px; padding: 12px; }
html[data-device="phone"] .gdb-dock { gap: 8px; padding: 6px 0 max(6px, env(safe-area-inset-bottom)); }
html[data-device="phone"] .gdb-dock-btn { flex: 1; min-width: 0; min-height: 48px; font-size: 14px; flex-wrap: nowrap; }
html[data-device="phone"] .gdb-dock-btn small { flex-basis: auto; }
@media (prefers-reduced-motion: reduce) { .gdb-card, .gdb-btn, .gdb-meter-bar i { transition: none; } .gdb-card:hover::after { animation: none; } }
/* the phone's top row holds the tabs (gate-deck.js buildPage); the purse sits under the balance */
.gdb.gdb--phone { grid-template-rows: auto minmax(0, 1fr) auto; }
.gdb--phone .gdb-top .gdb-tabs { flex: 1; border-bottom: 0; padding-bottom: 0; min-width: 0; }
.gdb--phone .gdb-tab small { min-width: 22px; padding: 1px 6px; }
.gdb--phone .gdb-aside .gdb-purse { margin-top: 10px; white-space: normal; }
.gdb--phone .gdb-view > .gdb-note { margin: 0 0 6px; padding: 0; white-space: normal; }
.gdb--phone .gdb-viewhead p { display: none; }
.gdb--phone .gdb-viewhead h2 { margin-bottom: 6px; }
.gdb--phone .gdb-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
html[data-device="phone"] .gdb--phone .gdb-step { width: 34px; border-radius: 10px; flex: 0 0 auto; }
.gdb--phone .gdb-count { gap: 3px; }
.gdb--phone .gdb-count:has(.gdb-n) { flex-wrap: nowrap; }
.gdb--phone .gdb-n { min-width: 26px; font-size: 18px; }
.gdb--phone .gdb-own { flex-basis: 100%; text-align: center; }
.gdb--phone .gdb-chips--one { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; scrollbar-width: none; }
.gdb--phone .gdb-chips--one::-webkit-scrollbar { display: none; }
.gdb--phone .gdb-chips--one .gdb-chip { flex: 0 0 auto; }
.gdb--phone .gdb-chips--one .gdb-chip--common { margin-left: 12px; }
.gdb--phone .gdb-cover { aspect-ratio: 16 / 9; }
.gdb--phone .gdb-deck--new { align-self: start; }
html[data-device="phone"] .gdb--phone .gdb-own + .gdb-step { width: 52px; }
.gdb--phone .gdb-dock-btn { min-height: 44px; padding-block: 4px; }