:root {
  --bg: #0e0f15;
  --panel: #1b1e28;
  --panel-2: #262a36;
  --ink: #eef0f6;
  --muted: #98a0b4;
  --accent: #e0654b;     /* warm ICON red/orange */
  --accent-2: #f4b740;   /* gold */
  --accent-3: #5b8def;   /* steel blue */
  --border: #333845;
  --grad:
    radial-gradient(1200px 700px at 70% -10%, rgba(224,101,75,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(91,141,239,.16), transparent 60%),
    linear-gradient(160deg, #0c0d12 0%, #14101a 100%);
  --glow: 0 0 24px rgba(224,101,75,.55), 0 6px 30px rgba(0,0,0,.6);
  --rule: rgba(244,183,64,.22);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; padding: 0; color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
}

/* ===== TITLE SCREEN (anime / JRPG tactics) ===== */
.title-screen {
  position: fixed; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
}
.bg-accents span {
  position: absolute; display: block; height: 140%; width: 14vw;
  transform: skewX(-14deg); opacity: .10; filter: blur(2px);
  /* Promote to its own compositor layer so the blur is rasterized ONCE and the
     infinite drift is a cheap GPU transform — otherwise it re-rasters every frame
     and makes the whole UI feel laggy. */
  will-change: transform;
}
.bg-accents span:nth-child(1) { left: 8%;  background: var(--accent);   animation: drift 14s ease-in-out infinite; }
.bg-accents span:nth-child(2) { left: 30%; background: var(--accent-2); opacity:.07; animation: drift 18s ease-in-out infinite reverse; }
.bg-accents span:nth-child(3) { left: 78%; background: var(--accent-3); animation: drift 16s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: skewX(-14deg) translateY(-2%);} 50% { transform: skewX(-14deg) translateY(3%);} }
/* While an overlay panel is open, pause the drift behind it: its motion is invisible
   under the panel's blur, and a static backdrop lets backdrop-filter cache instead of
   re-blurring the whole viewport every frame. Purely a cost change, no visual change.
   (Falls back to the current behaviour on browsers without :has().) */
body:has(#overlay:not([hidden])) .bg-accents span { animation-play-state: paused; }

.title-inner { position: relative; text-align: center; padding: 2rem; }
.game-title {
  margin: 0; font-weight: 900; font-size: clamp(3rem, 11vw, 7rem); letter-spacing: -.03em;
  line-height: .9; text-shadow: 0 6px 30px rgba(0,0,0,.6);
}
.game-title em {
  font-style: italic; color: var(--accent);
  text-shadow: var(--glow);
}
.title-tag {
  margin: .5rem 0 2.4rem; color: var(--accent-2); font-weight: 700;
  letter-spacing: .55em; font-size: .8rem; text-indent: .55em;
}

.menu { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; max-width: 420px; margin: 0 auto; }
.menu-item {
  position: relative; cursor: pointer; background: none; border: 0; color: var(--muted);
  font: 800 1.4rem/1 system-ui, sans-serif; letter-spacing: .04em; text-align: left;
  padding: .85rem 1.1rem; display: flex; align-items: center; gap: .6rem;
  transition: color .15s, transform .15s;
}
.menu-item::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--accent), rgba(224,101,75,.15));
  transform: skewX(-12deg) scaleX(0); transform-origin: left center;
  transition: transform .18s ease; border-left: 3px solid var(--accent-2);
}
.menu-item .cursor { color: var(--accent-2); opacity: 0; transform: translateX(-12px); transition: .18s; z-index: 1; font-size: .9rem; }
.menu-item .label { z-index: 1; }
.menu-item .tag { z-index: 1; margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  background: var(--accent-3); color: #04101f; padding: .12rem .4rem; border-radius: 4px; }
.menu-item.active { color: #fff; transform: translateX(6px); }
.menu-item.active::before { transform: skewX(-12deg) scaleX(1); }
.menu-item.active .cursor { opacity: 1; transform: translateX(0); }
.menu-hint { margin-top: 2rem; color: var(--muted); font-size: .75rem; letter-spacing: .15em; }

/* ===== OVERLAY PANELS ===== */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(6,7,11,.72); backdrop-filter: blur(3px); }
.panel { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--accent); border-radius: 12px; padding: 1.4rem 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.panel h2 { margin: 0 0 1rem; font-size: 1.4rem; }
.panel .tag { font-size: .6rem; font-weight: 800; letter-spacing: .1em; background: var(--accent-3); color: #04101f; padding: .12rem .4rem; border-radius: 4px; vertical-align: middle; }
.panel-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.panel-actions button { flex: 1; }

/* ===== SHARED FORM / CARD ===== */
h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
label { display: block; margin: .6rem 0; font-size: .82rem; color: var(--muted); }
input, select {
  width: 100%; margin-top: .25rem; padding: .55rem .65rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; font-size: .95rem;
}
#j-code { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; }
button, .button {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  padding: .6rem .95rem; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem;
}
button:hover, .button:hover { filter: brightness(1.08); }
button.secondary, .button.secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); }
.status { min-height: 1.2em; font-size: .85rem; margin: .6rem 0 0; }
.status.err { color: var(--accent); }
.muted { color: var(--muted); }

/* ===== LOBBY / GAME ===== */
#lobby { padding: 1.25rem; max-width: 1100px; margin: 0 auto; }
.card-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.2rem; flex: 1 1 280px; margin-bottom: 1rem; }
.lobby-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lobby-head h2 { margin: 0; }
.game-id { font-size: .78rem; color: var(--muted); }
.game-id strong { color: var(--accent-2); letter-spacing: .08em; }
.conn { margin-left: auto; font-size: .75rem; color: var(--muted); }
.turn-banner { font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.turn-banner.combat { background: var(--accent); color: #fff; }
.hint { color: var(--muted); font-size: .8rem; }
.controls { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.roster, .log { list-style: none; margin: .5rem 0 0; padding: 0; }
.roster li, .log li { padding: .4rem .55rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.roster .gm { color: var(--accent-3); font-size: .72rem; margin-left: .4rem; }
.log { max-height: 220px; overflow: auto; font-family: ui-monospace, monospace; font-size: .82rem; }

.board { display: grid; gap: 1px; width: 100%; max-width: 560px; margin-top: .8rem;
  background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cell { background: var(--panel-2); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 0; }
.cell:hover { background: #2f3442; }
.cell.selected { outline: 2px solid var(--accent-3); outline-offset: -2px; }
.cell.active { box-shadow: inset 0 0 0 2px var(--accent); }
.token { width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; }

/* Accounts / misc */
.user-bar { color: var(--muted); font-size: .82rem; margin-bottom: 1.2rem; }
.user-bar strong { color: var(--accent-2); }
.linkbtn { background: none; border: 0; color: var(--accent-3); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.sub { color: var(--muted); margin: .2rem 0 0; }
textarea { width: 100%; margin-top: .25rem; padding: .55rem .65rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; font: inherit; }

/* Draft restore banner (builder) */
.draft-banner { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--accent-2); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .85rem; }
.draft-banner strong { color: var(--accent-2); }
.draft-banner .draft-actions { display: flex; gap: .4rem; }
.draft-banner button { padding: .35rem .7rem; font-size: .8rem; }

/* Auth screen */
.auth-card { width: min(380px, 92vw); margin: 1.4rem auto 0; text-align: left; }
.auth-card h2 { font-size: 1.3rem; margin-bottom: .8rem; }
#li-go, #rg-go, #fg-go { width: 100%; margin-top: .6rem; }
.auth-links { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.auth-links a { color: var(--accent-3); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.small { font-size: .8rem; }
.recovery-code {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 1.15rem; letter-spacing: .12em;
  background: var(--panel-2); border: 1px solid var(--accent-2); border-radius: 8px;
  padding: .75rem .6rem; text-align: center; margin: .5rem 0 .9rem; color: var(--accent-2); word-break: break-all;
}
#view-recovery .secondary, #view-recovery #recovery-continue { flex: 1; }

/* Title-screen interaction feel on auth + panel controls */
#auth-screen button, #overlay button { transition: filter .12s ease, transform .12s ease; }
#auth-screen button:hover, #overlay button:hover { transform: translateY(-1px); }
.auth-links a { transition: color .12s ease; }
.auth-links a:hover { color: var(--accent-2); }

/* Character builder: job lore/gameplay panel */
.job-info { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent-2);
  border-radius: 8px; padding: .8rem .9rem; margin: .1rem 0 .9rem; }
.job-class { color: var(--accent-2); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.job-role { color: var(--muted); font-size: .82rem; margin: .3rem 0 .2rem; }
.job-h { color: var(--accent-3); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: .6rem; }
.job-lore { font-style: italic; margin: .15rem 0 0; font-size: .9rem; }
.job-gp { margin: .15rem 0 0; font-size: .9rem; }

.job-meta { color: var(--muted); font-size: .78rem; margin: .2rem 0 .5rem; }

/* ===== Character builder: job-select wizard ===== */
.cc-head { padding: 0 1.25rem .2rem; }
.cc-head h2 { margin-bottom: .25rem; }
.cc-head .small { margin: 0; }
.cc { display: flex; gap: 1rem; padding: 0 1.25rem 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.cc-left, .cc-mid, .cc-right, .cc-build { transition: flex-basis .42s ease, opacity .3s ease, margin .42s ease, transform .42s ease; }
.cc-left  { flex: 0 1 636px; min-width: 0; }
.cc-mid   { flex: 2 1 240px; min-width: 0; }
.cc-right { flex: 2 1 300px; min-width: 0; }
.cc-build { flex: 0 1 0px; min-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateX(40px); }
.cc-build .card { margin: 0; }
/* Morph: choosing -> building (cards collapse, panes slide left, build pane opens) */
.cc.building .cc-left { flex-basis: 0; opacity: 0; overflow: hidden; pointer-events: none; margin-right: -1rem; }
.cc.building .cc-build { flex: 2 1 360px; opacity: 1; pointer-events: auto; overflow: visible; transform: translateX(0); }
.cc-left h2, .cc-mid h2, .cc-right h2 { margin-bottom: .4rem; }
.job-group-h { color: var(--accent-2); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin: .9rem 0 .35rem; }
.job-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: .6rem; }
.job-card { width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .6rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--ink);
  transition: transform .1s ease, border-color .1s ease; }
.job-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.job-card.selected { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.job-card .sym { font-size: 2.8rem; line-height: 1; }
.job-card .nm { font-weight: 700; font-size: .9rem; text-align: center; }
.job-card .cls { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.job-class .sym { font-size: 1.1rem; margin-right: .15rem; }
.cc-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.chosen-badge { display: flex; align-items: center; gap: .6rem; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin: .2rem 0 .6rem; }
.chosen-badge .sym { font-size: 1.4rem; }

/* ===== Job info panel (right side, broken-out + colored) ===== */
.cc-right .job-pane .job-info { background: none; border: 0; padding: 0; margin: 0; }
.cc-right .job-pane { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 12px; padding: 1.1rem 1.2rem; }
.ji-empty { padding: 1.5rem 0; text-align: center; }
.ji-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.ji-sym { font-size: 2.4rem; line-height: 1; }
.ji-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; color: var(--accent); line-height: 1.05; }
.ji-epithet { font-style: italic; color: var(--muted); font-size: .9rem; }
.ji-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.chip { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px; border: 1px solid transparent; }
.chip-class { background: rgba(91,141,239,.16); color: var(--accent-3); border-color: rgba(91,141,239,.4); }
.chip.cx-low { background: rgba(107,208,139,.15); color: #6bd08b; border-color: rgba(107,208,139,.4); }
.chip.cx-med { background: rgba(244,183,64,.15); color: var(--accent-2); border-color: rgba(244,183,64,.4); }
.chip.cx-high { background: rgba(224,101,75,.16); color: var(--accent); border-color: rgba(224,101,75,.45); }
.ji-tagline { color: var(--ink); font-weight: 600; margin: 0 0 .8rem; }
.ji-row { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; align-items: start;
  border-left: 3px solid var(--border); padding: .4rem 0 .4rem .7rem; margin: .35rem 0; border-radius: 0; }
.ji-str { border-left-color: #6bd08b; }
.ji-wk { border-left-color: var(--accent); }
.ji-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding-top: .12rem; }
.ji-str .ji-label { color: #6bd08b; }
.ji-wk .ji-label { color: var(--accent); }
.ji-text { font-size: .9rem; }
.ji-sec { margin-top: .9rem; }
.ji-h { color: var(--accent-2); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); padding-bottom: .25rem; margin-bottom: .4rem; }
.ji-sec p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* Builder header with back button */
.cc-header { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem .25rem; }
.back-btn { flex: 0 0 auto; padding: .45rem .85rem; }
.cc-headtext .sub { margin: .15rem 0 0; }

/* ===== THEMES (skins) ===== */
html[data-theme="teyvat"] {
  --bg: #0c1622; --panel: #13212f; --panel-2: #1c2e3e; --ink: #eaf3f6; --muted: #90a8b6;
  --accent: #e6c178; --accent-2: #69d2c6; --accent-3: #b48cff; --border: #294056;
  --grad:
    radial-gradient(1200px 700px at 70% -10%, rgba(105,210,198,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(180,140,255,.16), transparent 60%),
    linear-gradient(160deg, #0a1018 0%, #10202c 100%);
  --glow: 0 0 26px rgba(230,193,120,.5), 0 6px 30px rgba(0,0,0,.6);
  --rule: rgba(230,193,120,.26);
}
html[data-theme="hyrule"] {
  --bg: #0e140e; --panel: #172017; --panel-2: #1f2c20; --ink: #f1f3e6; --muted: #9aae97;
  --accent: #dba63f; --accent-2: #8ed86a; --accent-3: #56c2e6; --border: #2c3b2d;
  --grad:
    radial-gradient(1200px 700px at 70% -10%, rgba(219,166,63,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(86,194,230,.14), transparent 60%),
    linear-gradient(160deg, #0b110b 0%, #121a12 100%);
  --glow: 0 0 26px rgba(219,166,63,.5), 0 6px 30px rgba(0,0,0,.6);
  --rule: rgba(219,166,63,.26);
}

/* Theme switcher (fixed, on every page) */
.theme-switch { position: fixed; left: 66px; bottom: 14px; z-index: 50; }
.theme-toggle { padding: .45rem .8rem; font-size: .85rem; }
.theme-menu { position: absolute; left: 0; bottom: 100%; margin-bottom: .4rem; display: flex; flex-direction: column; gap: .25rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .4rem; box-shadow: 0 12px 30px rgba(0,0,0,.5); min-width: 150px; }
.theme-opt { background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); text-align: left;
  padding: .5rem .6rem; border-radius: 7px; font-weight: 600; font-size: .85rem; }
.theme-opt.active { border-color: var(--accent-2); color: var(--accent-2); }

/* ===== TOME & QUESTBOARD ORNAMENTATION (layers over any theme) ===== */
:root { --font-display: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", serif; }

/* Serif display type for headings, menu entries, job names — reads like a tome */
.game-title, h2, .panel h2, .ji-title, .job-group-h, .ji-h,
.menu-item .label, .title-tag, .chosen-badge strong, #edit-title {
  font-family: var(--font-display);
}
.menu-item .label { letter-spacing: .02em; }

/* Faint library vignette behind every page */
body { background-image: radial-gradient(1100px 760px at 50% -12%, rgba(255,255,255,.03), transparent 70%); background-attachment: fixed; }

/* Parchment/leather surfaces with a gilt inner page-rule */
.panel, .card, .auth-card, .cc-right .job-pane, .job-card {
  position: relative;
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.03), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px);
}
.panel::before, .card::before, .auth-card::before, .cc-right .job-pane::before, .job-card::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid var(--rule); border-radius: 8px; pointer-events: none;
}

/* Job cards as pinned quest notices: slight tilt + a wax pin, straighten on hover */
.job-card { box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.job-card:nth-child(3n)   { transform: rotate(-.7deg); }
.job-card:nth-child(3n+1) { transform: rotate(.6deg); }
.job-card:nth-child(3n+2) { transform: rotate(-.25deg); }
.job-card:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 9px 20px rgba(0,0,0,.45); }
.job-card.selected { transform: rotate(0); }
.job-card::after {
  content: ''; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel), 0 1px 3px rgba(0,0,0,.6);
}

/* Filigree mark on section headers */
.ji-h::before, .job-group-h::before { content: "\2756  "; color: var(--accent-2); opacity: .85; }

/* Trait cards (class Traits section in the builder info panel) */
.trait-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .55rem; margin-top: .15rem; }
.trait-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: 8px;
  padding: .5rem .6rem; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.trait-card .trait-name {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: .82rem;
  letter-spacing: .03em; color: var(--accent-2); margin-bottom: .2rem;
}
.trait-card .trait-text { font-size: .8rem; line-height: 1.4; color: var(--ink); }

/* Job portrait pane (right column of the builder) */
.job-art {
  background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--accent-2); border-radius: 12px;
  padding: .6rem; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.job-art .art-empty { color: #4b5563; }
.job-art .job-portrait {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 8px; display: block;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.job-art .art-empty {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--muted); font-size: .85rem; text-align: center; padding: 2rem 1rem;
}
.job-art .art-empty .art-sym { font-size: 2.6rem; color: var(--accent-2); opacity: .7; }

/* ===== Build pane: level + ability picker ===== */
.ability-head { display: flex; align-items: center; justify-content: space-between; margin: .7rem 0 .15rem; }
.ability-count {
  font-size: .76rem; font-weight: 800; color: var(--accent-2);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .1rem .55rem; white-space: nowrap;
}
.ability-count.over { color: #fff; background: var(--accent); border-color: var(--accent); }
.ability-count.bump { animation: count-bump .3s ease; }
@keyframes count-bump { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 100% { transform: scale(1); } }

.ability-list { display: flex; flex-direction: column; gap: .4rem; max-height: 44vh; overflow: auto; padding-right: .25rem; margin-bottom: .7rem; }
.ability {
  display: flex; gap: .55rem; align-items: flex-start; text-align: left; width: 100%; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid transparent;
  border-radius: 8px; padding: .5rem .6rem; color: var(--ink);
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.ability:hover { border-color: var(--accent); }
.ability:active { transform: translateY(1px); }
.ability.on { border-left-color: var(--accent-2); background: rgba(244,183,64,.10); }
.ab-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; border-radius: 4px; border: 2px solid var(--muted); position: relative; }
.ability.on .ab-check { border-color: var(--accent-2); background: var(--accent-2); }
.ability.on .ab-check::after { content: "\2713"; position: absolute; inset: -3px 0 0 0; text-align: center; font-size: .82rem; font-weight: 900; color: #04101f; }
.ab-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ab-name { font-family: var(--font-display, inherit); font-weight: 800; font-size: .86rem; letter-spacing: .02em; color: var(--accent-2); }
.ab-cost { font-size: .68rem; color: var(--accent-3); text-transform: uppercase; letter-spacing: .05em; }
.ab-text { font-size: .78rem; line-height: 1.35; color: var(--ink); }

/* Build pane: top row with the "pick another job" back button */
.build-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.build-top .back-btn { flex: 0 0 auto; font-size: .82rem; padding: .35rem .7rem; }
.build-card .chosen-badge { margin-top: 0; }

/* In build mode the info pane's "Choose Job" button is redundant — hide it. */
.cc.building .cc-right .cc-actions { display: none; }

/* ===== Ability cards: MTG-like (type line, flavor, labeled clauses) ===== */
.ab-typeline { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 .4rem; }
.ab-chip {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: .05rem .45rem; color: var(--accent-3); white-space: nowrap;
}
.ab-flavor { font-style: italic; color: var(--muted); font-size: .76rem; line-height: 1.35; margin-bottom: .4rem; }
.ab-rules { display: flex; flex-direction: column; gap: .25rem; }
.ab-clause { font-size: .78rem; line-height: 1.4; }
.ab-key {
  display: inline-block; font-family: var(--font-display, inherit); font-weight: 800;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); background: rgba(224,101,75,.13);
  border-radius: 4px; padding: .03rem .35rem; margin-right: .4rem; vertical-align: .04em;
}
.ab-cl-text { color: var(--ink); }

/* Limit break: distinct, non-selectable card */
.ability.limit {
  flex-direction: column; align-items: stretch; cursor: default;
  border: 1px solid var(--accent); border-left-width: 3px;
  background: linear-gradient(180deg, rgba(224,101,75,.12), rgba(224,101,75,.02));
}
.ability.limit:hover { transform: none; }
.ability.limit .ab-name { color: var(--accent); }
.ab-badge {
  align-self: flex-start; font-family: var(--font-display, inherit); font-weight: 900;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: #04101f; background: var(--accent); padding: .12rem .5rem; border-radius: 4px; margin-bottom: .4rem;
}
.ab-note { font-size: .68rem; color: var(--muted); margin-top: .45rem; font-style: italic; }

/* Bulleted sub-clauses inside an ability/limit-break card */
.ab-clause.ab-bullet { position: relative; padding-left: .95rem; }
.ab-clause.ab-bullet::before { content: "\25B8"; position: absolute; left: .15rem; color: var(--accent-2); }

/* Ability list split into "loadout" (chosen + limit break) and "available" */
.ab-section { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
.ab-sec-h {
  font-family: var(--font-display, inherit); font-weight: 800; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
  margin: .1rem 0 .15rem; border-bottom: 1px solid var(--rule); padding-bottom: .25rem;
}

/* Ultimate / sub-ability inside a clause: name on its own line above the text */
.ab-clause.ab-ult { display: flex; flex-direction: column; gap: .15rem; margin-top: .15rem; }
.ab-ult-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ab-subname { font-family: var(--font-display, inherit); font-weight: 800; font-size: .82rem; letter-spacing: .03em; color: var(--accent-2); }

/* Inline ICON keywords inside rules text */
.ab-cl-text .kw { color: var(--accent-2); font-weight: 700; }

/* Floating music toggle */
#music-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 50;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  color: #04101f; background: var(--accent-2);
  border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
  padding: 0;
}
#music-toggle:hover { transform: translateY(-2px); }
#music-toggle.off { background: var(--panel-2); color: var(--muted); }

/* Start splash (first gesture: unlocks audio, then enters the app) */
.splash {
  position: fixed; inset: 0; z-index: 200; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; text-align: center; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 32%, var(--panel), #0b0d13 70%);
  transition: opacity .5s ease;
}
.splash.gone { opacity: 0; pointer-events: none; }
.splash .game-title { font-size: clamp(3rem, 13vw, 7rem); margin: 0; }
.splash .title-tag { margin: .2rem 0 1.6rem; }
.splash-prompt { color: var(--muted); letter-spacing: .22em; text-transform: uppercase; font-size: .85rem; animation: splash-pulse 1.6s ease-in-out infinite; }
@keyframes splash-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Ability picker: two cards per row (narrower + taller = easier to read) */
.ab-section { display: flex; flex-direction: column; gap: .4rem; }
.ab-sec-body { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: stretch; }
.ab-sec-body .ability { min-height: 120px; }
.ab-sec-body .ability.limit { grid-column: 1 / -1; min-height: 0; }

/* Glossary keywords: highlighted + hover tooltip (everywhere they appear) */
.kw { color: var(--accent-2); font-weight: 700; cursor: help; border-bottom: 1px dotted rgba(244,183,64,.45); }
.kw:hover { border-bottom-color: var(--accent-2); }
#kw-tip {
  position: fixed; z-index: 300; max-width: 280px; pointer-events: none;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-top: 3px solid var(--accent-2); border-radius: 8px;
  padding: .55rem .7rem; box-shadow: 0 12px 34px rgba(0,0,0,.55);
  font-size: .8rem; line-height: 1.45;
}
#kw-tip .kw-tip-h { font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: .03em; color: var(--accent-2); margin-bottom: .2rem; }
#kw-tip .kw-tip-b { color: var(--ink); }

/* Class mechanic gambit note */
.ji-gambit { margin: .4rem 0 0; font-style: italic; }

/* Choose Job button pinned to the top-right of the info pane */
.cc-right .job-pane { position: relative; }
.cc-right .job-pane .cc-actions { position: absolute; top: 1rem; right: 1.1rem; margin: 0; z-index: 2; }
.cc-right .job-pane .ji-head { padding-right: 7.5rem; }

/* Saved-character cards in the Character Library */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: .6rem; }
.char-card { aspect-ratio: auto; height: auto; min-height: 160px; padding: .55rem .5rem .65rem; gap: .25rem; }
.char-card .char-name { font-family: var(--font-display, inherit); font-weight: 800; font-size: .92rem; line-height: 1.12; color: var(--accent-2); text-align: center; }
.char-card .sym { font-size: 2.2rem; }
.card-avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-2); }
.avatar-field { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 .7rem; }
.avatar-drop { position: relative; width: 78px; height: 78px; flex: 0 0 auto; border-radius: 50%; border: 2px dashed var(--border); background: var(--panel-2); cursor: pointer; padding: 0; overflow: visible; display: grid; place-items: center; transition: border-color .15s, box-shadow .15s; }
.avatar-drop:hover, .avatar-drop:focus-visible { border-color: var(--accent-2); outline: none; }
.avatar-drop.drag { border-style: solid; border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(244,183,64,.25); }
.avatar-drop.has-img { border-style: solid; border-color: var(--accent-2); }
.avatar-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-sil { width: 56%; height: 56%; fill: var(--muted); opacity: .7; }
.avatar-cam { position: absolute; right: 0; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-2); color: #04101f; font-weight: 900; font-size: 1.05rem; line-height: 20px; text-align: center; border: 2px solid var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.avatar-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.avatar-title { font-weight: 700; font-size: .9rem; }
.avatar-state { line-height: 1.3; }
.avatar-state.ok { color: var(--accent-2); }
.avatar-state.err { color: var(--accent); }
.avatar-meta .linkbtn { align-self: flex-start; }

/* ===== Training mode ===== */
.tr-layout { display: flex; gap: 1rem; padding: 0 1.25rem 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.tr-stage { position: relative; flex: 3 1 0; min-width: 320px; }
#tr-canvas { width: 100%; height: 72vh; min-height: 420px; background: radial-gradient(120% 120% at 50% 30%, var(--panel-2), #0c0e14 75%); border: 1px solid var(--border); border-top: 3px solid var(--accent-2); border-radius: 12px; display: block; cursor: pointer; }
.tr-side { flex: 1 1 320px; min-width: 280px; max-width: 420px; display: flex; flex-direction: column; gap: 1rem; }
.tr-side .card { margin: 0; }
.tr-dummy-h { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.tr-hpbar { height: 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.tr-hpbar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s ease; }
.tr-abils { display: flex; flex-direction: column; gap: .4rem; max-height: 38vh; overflow: auto; margin-bottom: .6rem; }
.tr-abil { text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 8px; padding: .45rem .6rem; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: .15rem; }
.tr-abil:hover { border-color: var(--accent); }
.tr-abil.armed { border-left-color: var(--accent); background: rgba(224,101,75,.12); }
.tr-float { position: absolute; transform: translate(-50%, 0); font-weight: 900; font-size: 1.5rem; pointer-events: none; animation: tr-rise 1.9s cubic-bezier(.2,.7,.2,1) forwards; text-shadow: 0 0 4px rgba(0,0,0,.9), 0 2px 5px rgba(0,0,0,.8); z-index: 5; }
.tr-float.dmg { color: var(--accent); -webkit-text-stroke: 2.5px #fff; paint-order: stroke fill; text-shadow: 0 0 3px #fff, 0 2px 5px rgba(0,0,0,.65); }
.tr-float.note { color: var(--accent-2); font-size: 1.2rem; }
/* Pop in fast with a slight overshoot, HOLD at full opacity, then drift up + fade.
   Long hold (to ~72%) so the number / MISS is easy to read before it leaves. */
@keyframes tr-rise {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  12%  { opacity: 1; transform: translate(-50%, -2px) scale(1.18); }
  24%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -22px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(.96); }
}

/* Class statistics block in the job info panel */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.stat { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .55rem; font-size: .8rem; }
.stat-k { color: var(--muted); }
.stat-v { color: var(--accent-2); font-weight: 700; white-space: nowrap; }

/* Training side panel notes */
.tr-note { margin: .4rem 0 .6rem; }
.tr-controls { margin-top: 0; }

/* Training: selected action detail */
.tr-detail { margin-top: .6rem; border-top: 1px solid var(--rule); padding-top: .5rem; }
.tr-detail .ab-name { display: block; margin-bottom: .15rem; }

/* Training: MISS float text */
.tr-float.miss { color: #eef0f6; font-size: 1.7rem; letter-spacing: .05em; }

/* Training: turn HUD + critical float */
.tr-hud { font-size: .85rem; margin: .35rem 0 .5rem; color: var(--ink); }
.tr-dots { color: var(--accent-2); letter-spacing: .12em; }
.tr-float.crit { color: var(--accent-2); font-size: 1.9rem; font-weight: 900; letter-spacing: .03em; text-shadow: 0 0 5px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.85); }

/* Training: character vitals block */
.tr-vitals { margin: .4rem 0 .55rem; }

/* Training: disabled action buttons (e.g. attack already used) */
.tr-abil:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; filter: grayscale(.6); }
.tr-abil:disabled:hover { border-color: var(--border); }
.tr-abil.used { opacity: .5; border-left-color: transparent; background: var(--panel-2); }
.tr-abil.used .ab-name { text-decoration: line-through; text-decoration-color: var(--accent); }
.ab-used { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #04101f; background: var(--accent); border-radius: 999px; padding: .04rem .35rem; margin-left: .35rem; vertical-align: middle; text-decoration: none; }

/* Training: avatar in the panel badge + in-card ability expansion */
.tr-badge-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-2); flex: 0 0 auto; }
.tr-abil .ab-expand { display: block; width: 100%; margin-top: .45rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.tr-abil .ab-flavor { display: block; font-style: italic; color: var(--muted); font-size: .78rem; margin-bottom: .3rem; }
.tr-abil .ab-rules { display: block; }
.tr-abil .ab-clause { display: block; margin: .15rem 0; font-size: .8rem; }
.tr-abil .ab-key { color: var(--accent-2); font-weight: 700; margin-right: .35rem; }
.tr-abil .ab-bc { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.tr-abil .ab-bc.boon { color: var(--accent-2); }
.tr-abil .ab-bc.curse { color: var(--accent); }

.tr-abil .ab-subname { display: inline-block; color: var(--accent-2); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .74rem; margin: 0 .35rem .15rem 0; }
.tr-abil .ab-key { color: var(--accent-2); font-weight: 700; margin-right: .35rem; }
.tr-abil .kw { cursor: help; }

/* Training: statuses, vigor heal float, Heroic toggle, combo token, rush hint */
.tr-float.heal { color: #4fd18b; font-size: 1.5rem; }
.tr-status { display: flex; flex-wrap: wrap; gap: .25rem; margin: .15rem 0 .4rem; }
.tr-stat-badge { font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #04101f; background: var(--accent); border-radius: 999px; padding: .08rem .45rem; cursor: help; }
.tr-toggles { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.tr-toggles button { font-size: .72rem; padding: .18rem .5rem; }
.tr-toggles button.on { background: var(--accent-2); border-color: var(--accent-2); color: #04101f; font-weight: 800; }
.tr-combo { font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--accent-2); }
.tr-rush-hint { font-size: .78rem; color: var(--accent-3); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.tr-rush-hint button { font-size: .72rem; padding: .18rem .5rem; }

/* Builder: ability chapter badge + level-locked abilities */
.ab-ch { display: inline-block; margin-left: .45rem; font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; border-radius: 999px; padding: .06rem .4rem; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.ab-ch.ch2 { color: var(--accent-2); border-color: var(--accent-2); }
.ab-ch.ch3 { color: var(--accent); border-color: var(--accent); }
.ability.locked { opacity: .45; filter: grayscale(.5); cursor: not-allowed; }
.ability.locked .ab-check { visibility: hidden; }
.ability.locked::after { content: '🔒'; position: absolute; top: .5rem; right: .6rem; font-size: .9rem; opacity: .8; }
.ability.locked { position: relative; }

/* Respect reduced-motion: stop the always-running decorative animations (also
   a free perf win on low-power devices/GPUs). */
@media (prefers-reduced-motion: reduce) {
  .bg-accents span { animation: none; }
  .splash-prompt { animation: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ===== Title screen: idyllic SVG landscape background ===== */
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #0e131c url("/tacticonBG.png") center center / cover no-repeat; }
.scene-svg { display: none; }   /* using the tacticonBG.png image for now instead of the procedural SVG */
/* soft scrim so the title + menu stay legible over the bright sky (keeps the scene bright in the middle) */
.scene::after { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(125% 95% at 50% 38%, rgba(8,14,24,0) 40%, rgba(8,14,24,.45) 100%),
    linear-gradient(to bottom, rgba(8,14,24,.20), rgba(8,14,24,0) 28%, rgba(8,14,24,0) 60%, rgba(10,16,26,.34)); }
#title-screen .title-inner { z-index: 1; }
#title-screen .menu-item { color: #e9f1ff; text-shadow: 0 2px 7px rgba(2,12,26,.65); }
#title-screen .menu-item:hover, #title-screen .menu-item.active { color: #fff; }
#title-screen .menu-hint, #title-screen .user-bar { color: #cfe0f5; text-shadow: 0 1px 5px rgba(2,12,26,.65); }
/* gentle, compositor-friendly motion (reduced-motion handled by the * rule above) */
.sc-cloud { will-change: transform; }
.sc-cloud-a { animation: sc-cloud-a 90s ease-in-out infinite; }
.sc-cloud-b { animation: sc-cloud-b 120s ease-in-out infinite; }
.sc-cloud-c { animation: sc-cloud-c 72s ease-in-out infinite; }
@keyframes sc-cloud-a { 0%,100% { transform: translateX(-26px); } 50% { transform: translateX(48px); } }
@keyframes sc-cloud-b { 0%,100% { transform: translateX(36px); } 50% { transform: translateX(-30px); } }
@keyframes sc-cloud-c { 0%,100% { transform: translateX(-18px); } 50% { transform: translateX(42px); } }
.sc-grass { transform-box: fill-box; transform-origin: 50% 100%; will-change: transform; animation: sc-sway 5.5s ease-in-out infinite; }
@keyframes sc-sway { 0%,100% { transform: skewX(-2deg); } 50% { transform: skewX(3.5deg); } }
.sc-sparkle { will-change: opacity; }
.sc-s1 { animation: sc-twinkle 3.2s ease-in-out infinite; }
.sc-s2 { animation: sc-twinkle 4.1s ease-in-out .6s infinite; }
.sc-s3 { animation: sc-twinkle 2.7s ease-in-out 1.1s infinite; }
.sc-s4 { animation: sc-twinkle 3.6s ease-in-out .3s infinite; }
@keyframes sc-twinkle { 0%,100% { opacity: .15; } 50% { opacity: .85; } }

/* ===== Training: teleport / swap burst FX (spawned over the canvas) ===== */
.tr-burst { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; width: 0; height: 0; }
.tr-burst::before, .tr-burst::after { content: ''; position: absolute; left: 0; top: 0; border-radius: 50%; }
.tr-burst-teleport::before { width: 64px; height: 64px; background: radial-gradient(circle, rgba(185,212,255,.92), rgba(120,150,255,.35) 45%, transparent 70%); animation: tb-flash .45s ease-out forwards; }
.tr-burst-teleport::after  { width: 22px; height: 22px; border: 3px solid rgba(165,200,255,.85); animation: tb-ring .5s ease-out forwards; }
@keyframes tb-flash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
@keyframes tb-ring  { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.7); } }
.tr-burst-swap::before { width: 56px; height: 56px; background: radial-gradient(circle, rgba(205,185,235,.72), rgba(120,110,150,.3) 50%, transparent 72%); animation: tb-puff .55s ease-out forwards; }
.tr-burst-swap::after  { width: 40px; height: 40px; background: radial-gradient(circle, rgba(232,222,247,.62), transparent 70%); animation: tb-puff .55s ease-out .06s forwards; }
@keyframes tb-puff { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55) translateY(-8px); } }