/*
 * CREST V3 THEME for game-guide.html — palette, type and backdrops only
 * ( the guide keeps its own layout and per-hero --accent colours ).
 */
@font-face { font-family: Cinzel; src: url('/assets/game/fonts/Cinzel-Variable.ttf'); font-weight: 400 900; }
@font-face { font-family: EBGaramond; src: url('/assets/game/fonts/EBGaramond-Medium.ttf'); }

:root {
  --ink: #ecdfcb;
  --muted: #a99a8b;
  --gold: #e6c38a;
  --teal: #cf9a6a;
  --navy: #070508;
  --panel: #120b0d;
  --line: rgba(207,154,106,.24);
}

body { font-family: EBGaramond, Georgia, serif; font-size: 17px; }

header {
  background: linear-gradient(#070407f2, #0a0507d0) !important;
  border-bottom: 1px solid rgba(207,154,106,.3) !important;
}

header a, header nav { font-family: Cinzel, serif; letter-spacing: .1em; }

h1, h2, h3, .intro h1 span {
  font-family: Cinzel, serif !important;
  letter-spacing: .04em;
}

h1, .battle-guide h2 {
  text-shadow: 0 2px 0 #1a0606, 0 0 16px rgba(200,30,20,.5) !important;
}

.intro {
  background: #070508 url('/assets/game/CrestV2/background.png') center 40%/cover !important;
}

.intro::before, .intro:before {
  background: linear-gradient(90deg, #070508f5, #070508d0 55%, #07050899) !important;
}

.battle-guide {
  background: radial-gradient(circle at 45% 0, rgba(140,14,18,.32), #070508 52%) !important;
}

.marker {
  border-color: #e6c38a !important;
  background: #8e1217 !important;
  box-shadow: 0 0 0 3px #12070a, 0 0 18px rgba(255,60,25,.7) !important;
}

.replace-note { background: #0b0507cf !important; }

footer { background: #050304 !important; border-top: 1px solid rgba(207,154,106,.24) !important; font-family: Cinzel, serif; }

.basic {
  background: linear-gradient(180deg, rgba(150,16,20,.16), transparent 50%), #0e0709e6 !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 24px rgba(0,0,0,.6);
}

.basic b { font-family: Cinzel, serif !important; letter-spacing: .03em; }

.guide { background: radial-gradient(circle at 50% 0, rgba(120,12,16,.32), #070508 46%) !important; }

/* ======================================================================
 * v2.0 ( 2026-10-29 ) — hero viewer, rosters, cards and battle section in
 * the Crest V3 look: near-black + crimson, copper hairlines, Cinzel caps,
 * EB Garamond body. Each hero's in-game Home backdrop sits behind the slide.
 * ====================================================================== */

:root {
  --bone: #decebb;
  --copper: #cf9a6a;
  --copper-dim: rgba(207,154,106,.34);
  --crimson: #a3141b;
  --ember: #ff5a2a;
  --alliance: #58f4e8;            /* Resources/hero_factions.json accents */
  --pact: #f39a49;
}

.navlinks a { font: 600 12.5px Cinzel, serif; letter-spacing: .16em; color: var(--bone); }
.navlinks a:hover { color: #fff1dc; text-shadow: 0 0 10px rgba(255,90,42,.7); }
.brand span { font-family: Cinzel, serif; color: var(--bone); }
.brand small { color: var(--copper) !important; }
.menu { border-color: var(--copper-dim) !important; background: #0d0709 !important; color: var(--bone) !important; font-family: Cinzel, serif; border-radius: 3px !important; }
@media(max-width:660px) { .navlinks { background: #0a0507f8 !important; border-color: var(--line) !important; } }

.basic span { color: var(--muted); }

/* ---- Hero viewer: rosters | slide | rosters --------------------------- */

.guide { padding: 18px 0 0 !important; }
.guide .wrap { width: min(1720px, calc(100% - 32px)); }

.hero-stage {
  display: grid;
  grid-template-columns: 214px minmax(0,1fr) 214px;
  grid-template-areas: "left track right";
  gap: 12px;
  height: calc(100svh - 96px);
  min-height: 600px;
}

.hero-track { grid-area: track; height: 100% !important; }
.side-roster-left { grid-area: left; }
.side-roster-right { grid-area: right; }

.side-roster {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  display: flex !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(150,16,20,.18), transparent 26%), linear-gradient(145deg, #140c0e, #0b0608) !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.6) !important;
}

.side-roster-header,
.side-roster-right .side-roster-header {
  flex-basis: 108px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--copper-dim), transparent) 1 !important;
}

.side-roster-badge { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--alliance) 40%, transparent)) !important; }
.side-roster-right .side-roster-badge { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pact) 45%, transparent)) !important; }

.side-roster h3,
.side-roster-right h3 {
  font: 700 13px Cinzel, serif !important;
  letter-spacing: .14em !important;
  color: var(--bone) !important;
  text-shadow: 0 1px 2px #000, 0 0 12px color-mix(in srgb, var(--alliance) 45%, transparent) !important;
}

.side-roster-right h3 { text-shadow: 0 1px 2px #000, 0 0 12px color-mix(in srgb, var(--pact) 55%, transparent) !important; }

.side-roster-scroll { scrollbar-color: #5a3a2a #0b0608 !important; }

.side-roster button {
  border: 1px solid rgba(207,154,106,.16) !important;
  background: linear-gradient(90deg, #120a0c, #0b0608) !important;
  transition: border-color .2s, background .2s;
}

.side-roster button:hover,
.side-roster button.active {
  border-color: var(--copper) !important;
  background: linear-gradient(90deg, rgba(163,20,27,.42), #140b0d 75%) !important;
  box-shadow: 0 0 14px rgba(255,60,25,.18);
}

.side-roster b {
  font: 700 11.5px Cinzel, serif !important;
  letter-spacing: .03em;
  color: var(--bone) !important;
  text-shadow: none !important;
}

.side-roster button.active b { color: #fff1dc !important; }
.selector-meta { font-family: Cinzel, serif; color: var(--muted) !important; }
.selector-meta i { background: var(--copper-dim) !important; }
.selector-icon { filter: drop-shadow(0 1px 2px #000) !important; }

.portrait-frame {
  background: conic-gradient(from 20deg, #b88654, #f3d9a6 24%, #3a2418 45%, #b88654 70%, #f3d9a6) !important;
  box-shadow: 0 0 0 1px #000, 0 0 8px rgba(0,0,0,.6) !important;
}

.portrait-frame:after { border-color: var(--copper-dim) !important; }

/* ---- Slide ------------------------------------------------------------- */

.hero-track {
  border: 1px solid var(--line) !important;
  background: #070508 !important;
  box-shadow: inset 0 0 0 1px #000;
}

.hero-slide { isolation: isolate; }

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b0608 center 62%/cover no-repeat;
  filter: saturate(.85) brightness(.62);
  transition: opacity .6s;
}

.hero-slide::before {
  z-index: 0 !important;
  background:
    linear-gradient(90deg, rgba(7,5,8,.15) 0%, rgba(7,5,8,.35) 38%, rgba(7,5,8,.88) 58%, rgba(7,5,8,.94) 100%),
    linear-gradient(0deg, rgba(7,5,8,.85), transparent 30%),
    radial-gradient(circle at 24% 60%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 46%) !important;
}

.hero-copy { z-index: 2 !important; }

.pill {
  border: 1px solid var(--copper-dim) !important;
  background: rgba(10,5,7,.7);
  color: var(--bone) !important;
  font: 600 10px Cinzel, serif !important;
  letter-spacing: .14em !important;
}

.hero-copy h3 {
  font: 700 clamp(30px, 2.9vw, 48px)/1.02 Cinzel, serif !important;
  letter-spacing: .03em !important;
  color: transparent !important;
  background: linear-gradient(180deg, #fff6e4 0%, #f0d29e 45%, #c38d58 78%, #f2d6a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 #1a0000) drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 35%, transparent));
  overflow-wrap: break-word;
  text-wrap: balance;
}

.title {
  font: italic 600 18px EBGaramond, Georgia, serif !important;
  color: var(--gold) !important;
  letter-spacing: .02em;
}

.strategy { font-size: 16px !important; line-height: 1.5 !important; color: #e3d6c3 !important; }

.tip {
  border-left: 2px solid var(--copper) !important;
  background: linear-gradient(90deg, rgba(163,20,27,.22), transparent 80%);
  padding: 7px 10px 7px 12px !important;
  font-size: 14.5px !important;
  color: #cbbcaa !important;
}

.tip b { font: 700 12px Cinzel, serif; letter-spacing: .1em; color: var(--gold) !important; }

.cards-label {
  font: 700 13px Cinzel, serif !important;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 6px 0 8px !important;
}

/* signature cards: card art + in-game stat gems */
.signature-card {
  background: #0b0608 !important;
  border: 1px solid #6a4a2c !important;
  box-shadow: inset 0 0 0 1px #000, 0 6px 14px rgba(0,0,0,.55);
  outline: 1px solid rgba(207,154,106,.25);
  outline-offset: 2px;
}

.signature-card:after { background: linear-gradient(transparent, rgba(7,5,8,.94)) !important; }

.card-name {
  font: 700 11.5px Cinzel, serif !important;
  letter-spacing: .02em;
  color: var(--bone);
  bottom: 7px !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signature-card .mana,
.signature-card .stat {
  position: absolute;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font: 700 13px/1 Cinzel, serif;
  color: #fff8ec;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 0 0 2px #0a0606, 0 2px 6px rgba(0,0,0,.7);
}

.signature-card .mana { left: 6px; top: 6px; background: radial-gradient(circle at 35% 30%, #5d8fe8, #20469a 70%); border: 1px solid #a9c8ff; }
.signature-card .stat { bottom: 26px; }
.signature-card .stat[hidden] { display: none !important; }
.signature-card .atk { left: 6px; background: radial-gradient(circle at 35% 30%, #f0a43e, #9c5a10 70%); border: 1px solid #ffd58c; }
.signature-card .hp { right: 6px; background: radial-gradient(circle at 35% 30%, #e0444c, #8a1018 70%); border: 1px solid #ff9a9a; }

/* arrows: crest diamond */
.arrow {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--copper) !important;
  background: radial-gradient(circle at 35% 30%, #5a1014, #2a0709 60%, #0b0405) !important;
  color: #fbe9cd !important;
  text-shadow: 0 0 8px rgba(255,120,60,.9) !important;
  box-shadow: 0 0 0 2px #070508, 0 0 0 3px rgba(207,154,106,.45), 0 0 14px rgba(255,60,25,.35) !important;
}

.arrow:hover, .arrow:focus { box-shadow: 0 0 0 2px #070508, 0 0 0 4px var(--gold), 0 0 24px rgba(255,90,42,.6) !important; }
.arrow:before, .arrow:after { background: var(--gold) !important; box-shadow: 0 0 6px var(--ember) !important; }
.controls {                               /* overlays the slide: same grid area as the track */
  grid-area: track;
  position: relative !important;
  inset: auto !important;
  align-self: center;
  transform: none !important;
  margin: 0 -14px;
}

/* ---- Battle section ---------------------------------------------------- */

.battle-guide { border-top: 1px solid var(--line) !important; }
.battle-intro { color: var(--muted) !important; font-size: 17px; }

.interface-layout { grid-template-columns: minmax(0,1fr) 330px !important; }

.interface-shot {
  margin: 0;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  border: 1px solid #6a4a2c !important;
  background: #070508 !important;
  box-shadow: inset 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.55);
}

.interface-shot > img { opacity: 1 !important; object-fit: cover; }
.interface-shot:after { background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(7,5,8,.45)) !important; }

.marker {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  font: 700 15px Cinzel, serif;
  color: #fbe9cd !important;
  transition: transform .15s, background .15s;
}

.marker:hover, .marker:focus-visible, .marker.active {
  background: var(--gold) !important;
  color: #2a0709 !important;
  transform: scale(1.12);
}

.replace-note {
  font: 600 10px Cinzel, serif !important;
  letter-spacing: .14em !important;
  color: var(--bone) !important;
  text-transform: uppercase;
}

.ui-explainer {
  position: relative;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(150,16,20,.18), transparent 45%), linear-gradient(145deg, #140c0e, #0b0608) !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.6);
}

.ui-explainer::before, .ui-explainer::after,
.first-duel::before, .first-duel::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid var(--copper);
  pointer-events: none;
}

.ui-explainer::before, .first-duel::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.ui-explainer::after, .first-duel::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }

.ui-number {
  border-radius: 50%;
  background: var(--crimson) !important;
  border: 1px solid var(--gold);
  font: 700 16px Cinzel, serif;
  color: #fbe9cd;
}

.ui-explainer h3 { font: 700 22px Cinzel, serif !important; color: var(--gold); letter-spacing: .04em; }
.ui-explainer p { color: #e3d6c3 !important; font-size: 17px; line-height: 1.5; }

.ui-chip {
  border: 1px solid rgba(207,154,106,.2) !important;
  background: linear-gradient(180deg, #170d10, #0a0507) !important;
  color: var(--bone) !important;
  font: 600 11.5px Cinzel, serif;
  letter-spacing: .08em;
  min-height: 44px;
}

.ui-chip b { color: var(--copper) !important; }
.ui-chip:hover, .ui-chip.active { border-color: var(--gold) !important; background: linear-gradient(180deg, #3a0a0d, #170507) !important; color: #fff1dc !important; }

.layout-note { margin: 16px 0 0; color: var(--muted); font-size: 15.5px; }
.layout-note b { color: var(--bone); font-weight: 600; }

.first-duel {
  position: relative;
  border: 1px solid var(--line) !important;
  background: linear-gradient(90deg, rgba(120,12,16,.22), #0b0608 60%) !important;
}

.first-duel h3 { font: 700 26px Cinzel, serif !important; color: var(--gold) !important; letter-spacing: .05em; }
.rules > div { grid-template-columns: repeat(3, 1fr) !important; gap: 22px 28px !important; }
.first-duel b { font: 700 14px Cinzel, serif !important; letter-spacing: .12em; text-transform: uppercase; color: var(--bone) !important; margin-bottom: 6px !important; }
.first-duel span { color: var(--muted) !important; font-size: 16px; line-height: 1.5; }

/* ---- Footer ------------------------------------------------------------ */

footer { color: var(--muted); }
.footer-links a { font: 600 12px Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.footer-links a:hover { color: #fff1dc; text-shadow: 0 0 10px rgba(255,90,42,.7); }

/* ---- Narrower screens: rosters become portrait strips above the slide -- */

@media(max-width: 1200px) {
  .hero-stage {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "left" "right" "track";
    height: auto;
    min-height: 0;
    gap: 8px;
  }

  .hero-track { height: calc(100svh - 96px) !important; min-height: 560px; }
  .controls { margin: 0 4px; }

  .side-roster {
    flex-direction: row !important;
    align-items: center;
    padding: 6px 8px !important;
  }

  .side-roster-header,
  .side-roster-right .side-roster-header {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 0 !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--line) !important;
  }

  .side-roster-badge { width: 38px !important; height: 38px !important; }
  .side-roster h3, .side-roster-right h3 { margin: 0 !important; font-size: 10.5px !important; text-align: left !important; width: 74px; }
  .side-roster-scroll { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; flex: 1 1 auto; }
  .side-roster-scroll::-webkit-scrollbar { display: none; }
  .side-roster-items { flex-direction: row !important; justify-content: flex-start !important; min-height: 0 !important; padding: 2px 8px !important; gap: 6px !important; }
  .side-roster button { flex: 0 0 auto !important; display: flex !important; padding: 4px 10px 4px 4px !important; gap: 8px !important; min-height: 44px; }
  .side-roster .portrait-frame { width: 36px !important; height: 36px !important; }
  .side-roster .selector-meta { display: none !important; }
}

@media(max-width: 900px) {
  .interface-layout { grid-template-columns: 1fr !important; }
  .rules > div { grid-template-columns: 1fr 1fr !important; }
}

@media(max-width: 660px) {
  .side-roster h3, .side-roster-right h3 { display: none; }
  .controls { display: none !important; }      /* the portrait strips + swipe replace the arrows */
  .side-roster b { font-size: 10.5px !important; }
  .hero-track { min-height: 640px; }

  .hero-copy {
    justify-content: flex-start !important;
    overflow-y: auto !important;
    padding: 24px 16px 40px !important;
  }

  .hero-heading, .title, .strategy { margin-left: 0 !important; width: 100% !important; }
  .hero-heading { grid-template-columns: 58px minmax(0,1fr) !important; }
  .hero-heading .portrait-frame { width: 56px !important; height: 56px !important; }
  .hero-copy h3 { font-size: clamp(24px, 7.4vw, 34px) !important; }
  .tip { margin-top: 10px !important; width: 100% !important; background: rgba(10,5,7,.82) !important; }
  .card-grid { width: 100% !important; }
  .signature-card { height: auto !important; aspect-ratio: .8 !important; }
  .card-name { font-size: 9.5px !important; }
  .signature-card .mana, .signature-card .stat { width: 21px; height: 21px; font-size: 11px; }
  .signature-card .stat { bottom: 22px; }
  .hero-slide::before { background: linear-gradient(180deg, rgba(7,5,8,.55), rgba(7,5,8,.9) 45%) !important; }
  .rules > div { grid-template-columns: 1fr !important; }
  .marker { width: 26px !important; height: 26px !important; font-size: 12px; }
  .replace-note { display: none; }
  .interface-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 2026-11-07: nav brand uses the Crest V3 title logo ( wide ) instead of the old white dragon crest */
.brand img.brand-crest {
  width: auto !important;
  height: 54px !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
@media (max-width: 700px) {
  .brand img.brand-crest { height: 42px !important; }
}