/*
 * CREST V3 THEME — the landing page in the style of the game's Crest scene
 * ( style V3 "stairway": Resources/CrestV2/background.png, CrestV3 title logo,
 * crimson TAP TO BEGIN plate with a slow running-light border, Cinzel caps,
 * copper hairlines, corner footer with icon + caps label ).
 *
 * Loaded AFTER styles.css; it only overrides. Remove the <link> to go back.
 * The plate's border light needs crest-v3.js ( builds the rim mask from the
 * plate art, the same copper-detection the crest_tap_border shader uses ).
 */
@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');
}

@font-face {
  font-family: EBGaramond;
  src: url('/assets/game/fonts/EBGaramond-SemiBold.ttf');
  font-weight: 600 800;
}

@property --beam-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -40%;
}

@property --beam-w {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 12%;
}

@property --runner-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --ink: #ecdfcb;
  --bone: #decebb;            /* crest UI ink ( 222,206,184 ) */
  --muted: #a99a8b;
  --gold: #e6c38a;
  --copper: #cf9a6a;
  --copper-dim: rgba(207,154,106,.34);
  --crimson: #a3141b;
  --crimson-deep: #3b0709;
  --ember: #ff5a2a;
  --ember-gold: #ffb070;
  --cyan: var(--copper);      /* old accent hooks now resolve to copper */
  --navy: #070508;
  --panel: #120b0d;
  --line: rgba(207,154,106,.24);
  --plate: url('/assets/game/CrestV3/Crest_V3_Button_Plate.png');
}

body {
  background: var(--navy);
  font-family: EBGaramond, Georgia, serif;
  font-size: 17px;
  color: var(--ink);
}

/* ---- Header ------------------------------------------------------------- */

header {
  background: linear-gradient(#070407f2, #0a0507d0);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--copper-dim) 18%, rgba(230,195,138,.55) 50%, var(--copper-dim) 82%, transparent) 1;
}

.brand-name {
  font-family: Cinzel, serif;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--bone);
  text-transform: uppercase;
}

.brand-name small {
  font-family: Cinzel, serif;
  color: var(--copper);
  letter-spacing: .22em;
}

.navlinks a {
  font: 600 12.5px Cinzel, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color .2s, text-shadow .2s;
}

.navlinks a:hover, .navlinks a:focus-visible {
  color: #fff1dc;
  text-shadow: 0 0 10px rgba(255,90,42,.7);
}

.nav-cta {
  position: relative;
  padding: 10px 26px !important;
  border: 0 !important;
  background: var(--plate) center/100% 100% no-repeat !important;
  color: #f6e3c2 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(255,60,25,.35));
}

.menu {
  border-color: var(--copper-dim) !important;
  color: var(--bone) !important;
  background: #0d0709 !important;
  font-family: Cinzel, serif;
}

@media(max-width:850px) {
  .navlinks { background: #0a0507f8; border-color: var(--line); }
}

/* ---- Shared type & buttons -------------------------------------------- */

.kicker {
  color: var(--copper);
  font: 600 12px Cinzel, serif;
  letter-spacing: .32em;
}

.btn {
  border: 1px solid #d8a476;
  background: linear-gradient(180deg, #b11a20, #6a0a0f 70%, #3b0709);
  color: #fbe9cd;
  font: 700 13px Cinzel, serif;
  letter-spacing: .16em;
  box-shadow: 0 0 0 1px #2a0507, 0 0 18px rgba(255,60,25,.28), inset 0 1px 0 rgba(255,214,170,.35), inset 0 0 16px rgba(0,0,0,.45);
}

.btn.alt {
  background: linear-gradient(180deg, #1b1114, #0b0608);
  border-color: rgba(216,164,118,.7);
  color: var(--gold);
}

.btn:hover, .btn:focus { filter: brightness(1.18); }

.section-head h2,
.download h2,
.community h2 {
  font-family: Cinzel, serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff3dc 0%, #e8c48e 46%, #a87048 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 #1a0606) drop-shadow(0 0 14px rgba(200,30,20,.45));
}

.section-head h2 { font-size: clamp(36px,5vw,62px); }
.download h2 { font-size: clamp(36px,5vw,64px); }
.community h2 { font-size: clamp(26px,3.4vw,42px); }

.section-head p, .download p, .community p { color: var(--muted); }

/* hairline "—◇ ◇—" ornament under section titles */
.section-head h2::after,
.download h2::after {
  content: none;
}

.section-head .kicker,
.download .kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.section-head .kicker::before, .section-head .kicker::after,
.download .kicker::before, .download .kicker::after {
  content: "";
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper));
}

.section-head .kicker::after, .download .kicker::after {
  background: linear-gradient(90deg, var(--copper), transparent);
}

/* ---- HERO: crest stairway -------------------------------------------- */

.hero {
  background: #060306 url('/assets/game/CrestV2/background.png') center 42%/cover;
}

.hero:before {
  background:
    radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(6,2,4,calc(.55 * var(--bg-vignette,1))) 78%),
    linear-gradient(90deg, rgba(5,2,4,calc(.78 * var(--bg-sides,1))), rgba(5,2,4,calc(.15 * var(--bg-sides,1))) 26%, transparent 50%, rgba(5,2,4,calc(.15 * var(--bg-sides,1))) 74%, rgba(5,2,4,calc(.78 * var(--bg-sides,1)))),
    linear-gradient(0deg, rgba(7,5,8,min(1, var(--bg-bottom,1))) 0%, rgba(40,4,6,calc(.55 * var(--bg-bottom,1))) 18%, transparent 46%),
    linear-gradient(180deg, rgba(5,2,4,calc(.55 * var(--bg-top,1))), transparent 22%);
}

/* warm crimson breath over the citadel windows ( shader "glow" ) */
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% var(--bg-breath-y,30%), rgba(255,40,20,calc(.16 * var(--bg-breath,1))), transparent 55%);
  mix-blend-mode: screen;
  animation: crest-v3-breathe var(--bg-breath-sec,5.2s) ease-in-out infinite;
}

@keyframes crest-v3-breathe {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

.faction-wash { opacity: .28; }
.faction-crest { opacity: .38; filter: sepia(.4) saturate(.9); }
.faction-flow-canvas { opacity: var(--wings-layer,.35) !important; }

.faction-label {
  font-family: Cinzel, serif !important;
  letter-spacing: .14em;
}

.hero-figure { filter: drop-shadow(0 20px 22px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(120,10,10,.25)); }

.hero-center {
  justify-content: flex-start;
  gap: clamp(8px,1.4vh,18px);
  padding-top: clamp(6px,1.6vh,24px);
}

/* Replace the round crest lockup with the CARDZ title logo. */
.hero-brand-lockup {
  width: clamp(300px,36vw,600px);
  aspect-ratio: 765 / 481;
  /* ?crestDebug2=1 drives these; fallbacks = tuned defaults ( 2026-10-11 ) */
  transform: translate(var(--v3-x,20px), var(--v3-y,-104px)) scale(var(--v3-scale,.94)) !important;
  rotate: var(--v3-rotate,0deg);
}

.hero-brand-lockup .game-logo,
.hero-brand-lockup .crest-lightning-canvas,
.hero-brand-lockup .lucky-banner {
  display: none !important;
}

.hero-brand-lockup h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  animation: none !important;
}

.v3-logo {
  position: absolute;
  inset: 0;
  animation: crest-v3-float var(--v3-float-sec,6.4s) ease-in-out infinite;
  opacity: var(--v3-opacity,1);
}

.v3-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(var(--v3-bright,1)) saturate(var(--v3-sat,1)) drop-shadow(0 10px 18px rgba(0,0,0,var(--v3-shadow,.7)));
}

/* additive red glow pulse ( CREST_V3_LOGO_GLOW ) — OFF by default,
   turn on with "Glow pulse > On" in ?crestDebug2=1 ( adds .v3-glow-on ) */
.v3-logo img.glow { display: none; }
.v3-glow-on .v3-logo img.glow {
  display: block;
  filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(5000%) hue-rotate(var(--v3-glow-hue,352deg)) blur(var(--v3-glow-blur,6px));
  mix-blend-mode: screen;
  opacity: var(--v3-glow-min,.05);
  scale: var(--v3-glow-scale,1);
  animation: crest-v3-logo-glow var(--v3-glow-sec,4.1s) ease-in-out infinite;
}

/* gem flares ( CREST_V3_LOGO_FLARES ) at the logo's two red gems */
.v3-flare {
  position: absolute;
  width: var(--v3-flare-size,9%);
  aspect-ratio: 1;
  filter: opacity(var(--v3-flare-alpha,1));
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,220,.95) 0 6%, rgba(255,70,35,.75) 18%, rgba(255,40,20,.18) 46%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: crest-v3-flare var(--v3-flare-sec,2.52s) ease-in-out infinite;
}

.v3-flare.top { left: var(--v3-flare-x,46%); top: var(--v3-flare-top,21.8%); }
.v3-flare.bottom { left: var(--v3-flare-x,46%); top: var(--v3-flare-bottom,79%); animation-delay: -.9s; }

@keyframes crest-v3-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-1px * var(--v3-float,4))); }
}

@keyframes crest-v3-logo-glow {
  0%, 100% { opacity: var(--v3-glow-min,.05); }
  43% { opacity: var(--v3-glow-max,.42); }
}

@keyframes crest-v3-flare {
  0% { transform: scale(1); opacity: .5; }
  7% { transform: scale(calc(1 + .6 * var(--v3-flare-pop,1))); opacity: .95; }
  27% { transform: scale(1); opacity: .5; }
  33% { transform: scale(calc(1 + .35 * var(--v3-flare-pop,1))); opacity: .8; }
  57%, 100% { transform: scale(1); opacity: .5; }
}

.motto {
  font: 600 clamp(16px,1.6vw,24px)/1.25 Cinzel, serif;
  letter-spacing: .06em;
  color: var(--bone);
  margin-top: clamp(-34px,-2.6vw,-12px);
  padding: 6px 28px;
  background: radial-gradient(ellipse at 50% 50%, rgba(6,2,4,.62), transparent 72%);
}

.motto span:first-child {
  color: var(--bone);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9);
}

.motto span:last-child {
  font-size: 1.22em;
  color: transparent;
  background: linear-gradient(180deg, #fff2d8, #e5bd83 55%, #b07a4c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 #160404) drop-shadow(0 0 12px rgba(255,60,25,.55));
}

/* ---- Trailer carousel: copper frames --------------------------------- */

.trailer-shell {
  margin-top: auto;
  height: clamp(140px,19vh,200px);
}

.trailer-card {
  border: 1px solid #c99266;
  background: #0d0709;
  box-shadow: 0 0 0 3px #150709, 0 0 0 4px rgba(207,154,106,.35), 0 14px 34px #000c, 0 0 26px rgba(255,40,20,.18);
}

.trailer-card:after { background: linear-gradient(transparent, #0a0406ee); }

.trailer-label {
  font: 700 clamp(15px,1.7vw,24px)/1 Cinzel, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4dfbd;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,60,25,.6);
}

.play-icon {
  background: radial-gradient(circle at 50% 35%, #c51e22, #5d0a0d);
  color: #ffe8c8;
  border: 1px solid #d8a476;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 18px rgba(255,50,20,.55);
}

.trailer-hint { background: #0b0507d0; color: var(--bone); font-family: Cinzel, serif; }

.trailer-arrow {
  background: transparent;
  color: var(--gold);
  font-family: Cinzel, serif;
  text-shadow: 0 0 10px rgba(255,60,25,.8);
}

.trailer-dot { border-color: var(--copper); }
.trailer-dot.active { background: var(--copper); box-shadow: 0 0 8px var(--ember); }

/* ---- TAP TO BEGIN plate -------------------------------------------- */

.crest-plate-btn {
  position: relative;
  z-index: 6;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(250px,30vw,440px);
  aspect-ratio: 624 / 150;
  margin: 26px 0 clamp(6px,2vh,26px);
  background: var(--plate) center/100% 100% no-repeat;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.crest-plate-btn:active { transform: scale(.95); }
.crest-plate-btn:focus-visible { outline: none; }
.crest-plate-btn:focus-visible .plate-rim-wrap { filter: drop-shadow(0 0 6px #ffd9a0) drop-shadow(0 0 16px rgba(255,140,70,.9)); }

/* breathing crimson light over the plate */
.crest-plate-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(1.8) saturate(1.6) hue-rotate(-8deg);
  mix-blend-mode: screen;
  opacity: 0;
  animation: crest-v3-plate-breathe 4.22s ease-in-out infinite;
  pointer-events: none;
}

@keyframes crest-v3-plate-breathe {
  0%, 100% { opacity: 0; }
  50% { opacity: .22; }
}

/* running light: a copper-rim mask ( crest-v3.js ) over a rotating hot point */
.plate-rim-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,200,140,.85)) drop-shadow(0 0 10px rgba(255,120,60,.55));
}

.plate-rim {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--plate-rim-mask, var(--plate)) center/100% 100% no-repeat;
  mask: var(--plate-rim-mask, var(--plate)) center/100% 100% no-repeat;
  background:
    conic-gradient(from var(--runner-angle) at 50% 50%,
      transparent 0deg, transparent 300deg,
      rgba(255,176,112,.35) 336deg, #ffe6bf 354deg, #fff8ea 358deg, transparent 360deg),
    conic-gradient(from calc(var(--runner-angle) + 180deg) at 50% 50%,
      transparent 0deg, transparent 330deg,
      rgba(255,176,112,.25) 348deg, rgba(255,225,180,.7) 357deg, transparent 360deg),
    rgba(255,190,130,.10);
  mix-blend-mode: screen;
  animation: crest-v3-runner 10s linear infinite, crest-v3-rim-breathe 5s ease-in-out infinite;
}

.no-rim-mask .plate-rim { opacity: .45; }

@keyframes crest-v3-runner {
  to { --runner-angle: 360deg; }
}

@keyframes crest-v3-rim-breathe {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.25); }
}

/* slow warm sheen across the crimson face */
.plate-sheen {
  position: absolute;
  inset: 12% 4%;
  -webkit-mask: var(--plate) center/100% 100% no-repeat;
  mask: var(--plate) center/100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255,150,90,.0) 44%, rgba(255,170,110,.32) 50%, rgba(255,150,90,0) 56%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  mix-blend-mode: screen;
  animation: crest-v3-sheen 11.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes crest-v3-sheen {
  0% { background-position: 120% 0; }
  45%, 100% { background-position: -20% 0; }
}

.plate-label {
  position: relative;
  font: 700 clamp(15px,1.55vw,22px)/1 Cinzel, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff6e4 0%, #f0d29e 42%, #c38d58 70%, #f2d6a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #1a0000);
  animation: crest-v3-text-pulse 4.22s ease-in-out infinite;
}

@keyframes crest-v3-text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---- Sections ------------------------------------------------------- */

.prologue {
  background:
    radial-gradient(ellipse at 50% 0, rgba(140,14,18,.35), transparent 55%),
    linear-gradient(#070508, #0c0709 60%, #070508);
}

.prologue:before {
  background:
    radial-gradient(ellipse at 22% 100%, rgba(207,154,106,.10), transparent 48%),
    radial-gradient(ellipse at 78% 100%, rgba(255,60,25,.12), transparent 48%);
}

.step {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(150,16,20,.16), transparent 40%),
    linear-gradient(145deg, #140c0e, #0b0608);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.6);
}

/* restrained corner filigree */
.step::before, .step::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--copper);
  pointer-events: none;
}

.step::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.step::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }

.step-num {
  font: 700 46px/1 Cinzel, serif;
  color: rgba(207,154,106,.30);
}

.step h3 {
  font: 700 22px Cinzel, serif;
  letter-spacing: .05em;
  color: var(--gold);
}

.step p { color: var(--muted); }

.guide-callout {
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(120,12,16,.22), #0b0608 60%);
}

.guide-callout strong { font: 700 24px Cinzel, serif; color: var(--bone); }

.download {
  background: #070508 url('/assets/game/CrestV2/Crest_Begin_Background.png') center/cover;
}

.download:before {
  background: linear-gradient(180deg, #070508 0%, rgba(7,5,8,.82) 30%, rgba(7,5,8,.86) 70%, #070508);
}

.store {
  border: 1px solid rgba(216,164,118,.65);
  border-radius: 3px;
  background: linear-gradient(180deg, #1a0f12, #0a0507);
  box-shadow: inset 0 1px 0 rgba(255,214,170,.18), 0 0 14px rgba(255,40,20,.15);
}

.store strong { font-family: Cinzel, serif; letter-spacing: .04em; }
.store em { color: var(--copper); font-family: Cinzel, serif; }

.facts { border-color: var(--line); background: rgba(10,5,7,.6); }
.fact { border-color: var(--line); }
.fact small { color: var(--copper); font-family: Cinzel, serif; }
.fact b { font: 600 17px EBGaramond, serif; color: var(--bone); }

.community {
  background:
    linear-gradient(90deg, rgba(120,12,16,.22), transparent 45%, rgba(120,12,16,.22)),
    #0a0507;
  border-block: 1px solid var(--line);
}

.social-panel { border-top-color: var(--line); }
.social-panel-label { color: var(--copper); }

.social-link {
  border-color: var(--copper-dim);
  background: linear-gradient(180deg, #170d10, #0a0507);
  color: var(--bone);
}

.social-link:hover, .social-link:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(180deg, #3a0a0d, #170507);
  box-shadow: 0 0 18px rgba(255,60,25,.3);
}

/* ---- Footer: crest corner style ( icon + caps label, hairlines ) ------ */

footer {
  background: #050304;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: Cinzel, serif;
  letter-spacing: .08em;
}

.footer-links { gap: 0; align-items: center; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--bone);
  font: 600 12px Cinzel, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}

.footer-links a + a::before {
  content: "";
  width: 1px;
  height: 22px;
  margin: 0 12px 0 22px;
  background: rgba(204,168,117,.65);
}

.footer-links a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.footer-links a:hover { color: #fff1dc; text-shadow: 0 0 10px rgba(255,90,42,.7); }

.toast {
  background: #120a0c;
  color: var(--bone);
  border: 1px solid var(--copper);
  font-family: Cinzel, serif;
  letter-spacing: .06em;
}

.version-tag {
  position: absolute;
  z-index: 6;
  right: 28px;
  top: 88px;
  font: 600 12px Cinzel, serif;
  letter-spacing: .08em;
  color: var(--bone);
  text-shadow: 0 1px 2px #000;
  opacity: .85;
  pointer-events: none;
}

/* ---- Responsive ----------------------------------------------------- */

@media(max-width:900px) {
  .hero-brand-lockup { width: clamp(260px,58vw,460px); }
}

@media(max-width:560px) {
  .hero-brand-lockup { width: 86vw; }
  .crest-plate-btn { width: 74vw; }
  .footer-links a + a::before { margin: 0 8px 0 14px; }
  .footer-links a { font-size: 10.5px; }
  .version-tag { right: 14px; top: 80px; }
}

@media(prefers-reduced-motion:reduce) {
  .v3-logo, .v3-logo img.glow, .v3-flare, .hero:after,
  .plate-rim, .plate-sheen, .plate-label, .crest-plate-btn::before { animation: none !important; }
}

/* ---- ?crestDebug2=1 : live background layer + panel extras ( crest-v3-debug.js ) ---- */
.hero.v3-bg-live { background-image: none; }
.v3-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--bg-pos-x,50%) var(--bg-pos-y,42%);
  transform-origin: var(--bg-pos-x,50%) var(--bg-pos-y,42%);
  transform: scale(var(--bg-zoom,1));
  filter: brightness(var(--bg-bright,.56)) contrast(var(--bg-contrast,1)) saturate(var(--bg-sat,1)) hue-rotate(var(--bg-hue,0deg)) blur(var(--bg-blur,0px));
}
.crest2-designer-panel h4 {
  margin: 14px 0 4px;
  color: var(--gold);
  font: 700 11px/1.2 Cinzel, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- Light on the logo text ( crest-v3-debug.js builds --v3-rim-mask: the metal of
        CARDZ / THE DUEL, optionally reduced to an outline ). Two layers, both on:
        .v3-rim  = always-on rotating edge light ( outline mask --v3-rim-mask )
        .v3-beam = soft diagonal beam sweeping across, width breathing ( --v3-beam-mask ) ---- */
.v3-rim-wrap {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  opacity: var(--v3-rim-alpha,1);
  filter: drop-shadow(0 0 calc(3px * var(--v3-rim-glow,1)) rgba(255,200,140,.85))
          drop-shadow(0 0 calc(10px * var(--v3-rim-glow,1)) rgba(255,120,60,.55));
}
.v3-rim-ready .v3-rim-wrap { display: block; }
.v3-rim-off .v3-rim-wrap { display: none; }
.v3-rim {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--v3-rim-mask) center/100% 100% no-repeat;
  mask: var(--v3-rim-mask) center/100% 100% no-repeat;
  /* seam fix: each highlight fades in AND out before 360deg, so the 0/360 wrap is dark */
  background:
    conic-gradient(from var(--runner-angle) at var(--v3-rim-cx,50%) var(--v3-rim-cy,57%),
      transparent 0deg, transparent calc(340deg - var(--v3-rim-beam,60deg)),
      rgba(255,176,112,.35) calc(340deg - var(--v3-rim-beam,60deg) * .45), #ffe6bf 334deg, #fff8ea 338deg,
      rgba(255,176,112,.3) 348deg, transparent 356deg, transparent 360deg),
    conic-gradient(from calc(var(--runner-angle) + 180deg) at var(--v3-rim-cx,50%) var(--v3-rim-cy,57%),
      transparent 0deg, transparent calc(340deg - var(--v3-rim-beam,60deg) * .5),
      rgba(255,176,112,.25) calc(340deg - var(--v3-rim-beam,60deg) * .2), rgba(255,225,180,.7) 337deg,
      rgba(255,176,112,.2) 347deg, transparent 355deg, transparent 360deg),
    rgba(255,190,130,var(--v3-rim-base,.06));
  opacity: var(--v3-spin-alpha,1);
  mix-blend-mode: screen;
  animation: crest-v3-runner var(--v3-spin-sec,8s) linear infinite, crest-v3-rim-breathe 5s ease-in-out infinite;
}

.v3-beam {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--v3-beam-mask) center/100% 100% no-repeat;
  mask: var(--v3-beam-mask) center/100% 100% no-repeat;
  mix-blend-mode: screen;
  background:
    linear-gradient(var(--v3-beam-angle,115deg),
      transparent calc(var(--beam-pos) - var(--beam-w)),
      rgba(255,140,80,.22) calc(var(--beam-pos) - var(--beam-w) * .6),
      rgba(255,222,180,.8) calc(var(--beam-pos) - var(--beam-w) * .18),
      #fffaf0 var(--beam-pos),
      rgba(255,222,180,.8) calc(var(--beam-pos) + var(--beam-w) * .18),
      rgba(255,140,80,.22) calc(var(--beam-pos) + var(--beam-w) * .6),
      transparent calc(var(--beam-pos) + var(--beam-w)));
  filter: blur(var(--v3-beam-blur,1.6px)) brightness(var(--v3-beam-core,1.8));
  animation:
    crest-v3-beam-run var(--v3-rim-sec,7s) cubic-bezier(.42,.08,.58,.92) infinite,
    crest-v3-beam-width var(--v3-beam-wsec,5.3s) ease-in-out infinite alternate;
}

@keyframes crest-v3-beam-run {
  from { --beam-pos: -40%; }
  to { --beam-pos: calc(140% + var(--v3-beam-rest,70%)); }
}

@keyframes crest-v3-beam-width {
  from { --beam-w: var(--v3-beam-wmin,6%); }
  to { --beam-w: var(--v3-beam-wmax,24%); }
}

/* ---- Header DOWNLOAD button: same running border as the TAP TO BEGIN plate
        ( spans injected by crest-v3.js, reuses .plate-rim + --plate-rim-mask ) ---- */
.nav-cta .plate-rim-wrap { z-index: 0; }
.nav-cta .plate-rim { animation-duration: 6s, 5s; }
.nav-cta .nav-cta-label { position: relative; z-index: 1; }

/* ---- Live background shader canvas ( scene-fx.js, ?sceneFxDebug=1 ) ---- */
.v3-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-pos-x,50%) var(--bg-pos-y,42%);
  opacity: 0;
  transition: opacity .4s ease-out;
}
.v3-bg-canvas.ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .v3-rim, .v3-beam, .nav-cta .plate-rim { animation: none !important; }
}
.v3-spin-off .v3-rim, .v3-beam-off .v3-beam { display: none;
}

/* ---- HERO CARD FRAME: same light as the crest logo ( 2026-10-13 ) ----------
   The big ( .is-focus ) trailer card frame gets the crest treatment:
     .tf-rim   = always-on rotating edge light running around the frame ring
     .tf-beam  = diagonal beam sweeping across the frame, width breathing
     .tf-sheen = faint copy of the beam over the artwork
     .tf-glint = gem-flare pulses on the four corners
   Spans injected by crest-v3.js. Side cards keep a dim version.
   Tune live in ?crestDebug2=1 > "Hero card frame". ------------------------- */
.tf-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--tf-alpha,1);
  transition: opacity .5s ease-out;
}
.trailer-card:not(.is-focus) .tf-fx { opacity: calc(var(--tf-alpha,1) * var(--tf-side,.22)); }
.tf-off .tf-fx { display: none; }

/* engraved inner copper hairline + corner ticks ( static metal ) */
.tf-fx::before {
  content: "";
  position: absolute;
  inset: var(--tf-inset,7px);
  border: 1px solid rgba(207,154,106,.38);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.55);
}
.tf-fx::after {
  content: "";
  position: absolute;
  inset: calc(var(--tf-inset,7px) - 3px);
  --c: rgba(230,195,138,.85);
  background:
    linear-gradient(var(--c),var(--c)) top left/16px 1px, linear-gradient(var(--c),var(--c)) top left/1px 16px,
    linear-gradient(var(--c),var(--c)) top right/16px 1px, linear-gradient(var(--c),var(--c)) top right/1px 16px,
    linear-gradient(var(--c),var(--c)) bottom left/16px 1px, linear-gradient(var(--c),var(--c)) bottom left/1px 16px,
    linear-gradient(var(--c),var(--c)) bottom right/16px 1px, linear-gradient(var(--c),var(--c)) bottom right/1px 16px;
  background-repeat: no-repeat;
}

/* ring mask helper: outer box minus content box = a frame of --ring px */
.tf-ring {
  position: absolute;
  inset: 0;
  padding: var(--ring,3px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tf-ring.inner { inset: var(--tf-inset,7px); --ring: 1px; }

.tf-rim-wrap {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 calc(3px * var(--tf-glow,1)) rgba(255,200,140,.85))
          drop-shadow(0 0 calc(9px * var(--tf-glow,1)) rgba(255,120,60,.6));
}

.tf-rim {
  --ring: var(--tf-rim-w,3px);
  background:
    conic-gradient(from var(--runner-angle) at 50% 50%,
      transparent 0deg, transparent calc(340deg - var(--tf-beam-deg,70deg)),
      rgba(255,176,112,.35) calc(340deg - var(--tf-beam-deg,70deg) * .45), #ffe6bf 334deg, #fff8ea 338deg,
      rgba(255,176,112,.3) 348deg, transparent 356deg, transparent 360deg),
    conic-gradient(from calc(var(--runner-angle) + 180deg) at 50% 50%,
      transparent 0deg, transparent calc(340deg - var(--tf-beam-deg,70deg) * .5),
      rgba(255,176,112,.25) calc(340deg - var(--tf-beam-deg,70deg) * .2), rgba(255,225,180,.7) 337deg,
      rgba(255,176,112,.2) 347deg, transparent 355deg, transparent 360deg),
    rgba(255,190,130,var(--tf-base,.08));
  opacity: var(--tf-spin-alpha,1);
  mix-blend-mode: screen;
  animation: crest-v3-runner var(--tf-spin-sec,9s) linear infinite, crest-v3-rim-breathe 5s ease-in-out infinite;
}
.tf-rim.inner { opacity: calc(var(--tf-spin-alpha,1) * .75); animation-delay: -4.5s, -2.5s; }

.tf-beam, .tf-sheen {
  mix-blend-mode: screen;
  background:
    linear-gradient(var(--tf-beam-angle,115deg),
      transparent calc(var(--beam-pos) - var(--beam-w)),
      rgba(255,140,80,.22) calc(var(--beam-pos) - var(--beam-w) * .6),
      rgba(255,222,180,.8) calc(var(--beam-pos) - var(--beam-w) * .18),
      #fffaf0 var(--beam-pos),
      rgba(255,222,180,.8) calc(var(--beam-pos) + var(--beam-w) * .18),
      rgba(255,140,80,.22) calc(var(--beam-pos) + var(--beam-w) * .6),
      transparent calc(var(--beam-pos) + var(--beam-w)));
  animation:
    tf-beam-run var(--tf-beam-sec,7.5s) cubic-bezier(.42,.08,.58,.92) infinite,
    crest-v3-beam-width var(--v3-beam-wsec,5.3s) ease-in-out infinite alternate;
}
.tf-beam { --ring: calc(var(--tf-rim-w,3px) + 2px); filter: blur(1.2px) brightness(1.8); opacity: var(--tf-beam-alpha,1); }
.tf-sheen { position: absolute; inset: 0; filter: blur(6px); opacity: var(--tf-sheen,.16); }

@keyframes tf-beam-run {
  from { --beam-pos: -40%; }
  to { --beam-pos: calc(140% + var(--tf-beam-rest,80%)); }
}

.tf-glint {
  position: absolute;
  width: var(--tf-glint-size,26px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,220,.95) 0 6%, rgba(255,90,45,.7) 20%, rgba(255,40,20,.16) 46%, transparent 70%);
  mix-blend-mode: screen;
  opacity: var(--tf-glint,1);
  animation: crest-v3-flare var(--tf-glint-sec,3.2s) ease-in-out infinite;
}
.tf-glint.tl { left: var(--tf-inset,7px); top: var(--tf-inset,7px); }
.tf-glint.tr { left: calc(100% - var(--tf-inset,7px)); top: var(--tf-inset,7px); animation-delay: -.8s; }
.tf-glint.br { left: calc(100% - var(--tf-inset,7px)); top: calc(100% - var(--tf-inset,7px)); animation-delay: -1.6s; }
.tf-glint.bl { left: var(--tf-inset,7px); top: calc(100% - var(--tf-inset,7px)); animation-delay: -2.4s; }

/* outer ember breath on the big card ( box-shadow sits outside overflow:hidden ) */
.trailer-card.is-focus {
  animation: tf-card-breathe var(--tf-breath-sec,5s) ease-in-out infinite;
}
@keyframes tf-card-breathe {
  0%, 100% { box-shadow: 0 0 0 3px #150709, 0 0 0 4px rgba(207,154,106,.35), 0 14px 34px #000c, 0 0 22px rgba(255,40,20,calc(.14 * var(--tf-breath,1))); }
  50% { box-shadow: 0 0 0 3px #150709, 0 0 0 4px rgba(230,180,128,.6), 0 14px 34px #000c, 0 0 38px rgba(255,60,25,calc(.38 * var(--tf-breath,1))); }
}

.tf-spin-off .tf-rim, .tf-beam-off .tf-beam, .tf-beam-off .tf-sheen, .tf-glint-off .tf-glint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tf-rim, .tf-beam, .tf-sheen, .tf-glint, .trailer-card.is-focus { animation: none !important; }
  .tf-beam, .tf-sheen { display: none; }
}

/* ---- Game modes ( v1.6, 2026-10-29 ): the Home scene mode buttons ------ */

.modes {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0, rgba(140,14,18,.28), transparent 55%),
    linear-gradient(#070508, #0b0608 50%, #070508);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}

.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(150,16,20,.14), transparent 40%),
    linear-gradient(145deg, #140c0e, #0b0608);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.6);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.mode-card:hover {
  border-color: var(--copper-dim);
  box-shadow: inset 0 0 0 1px #000, 0 0 26px rgba(255,60,25,.14);
  transform: translateY(-2px);
}

.mode-card::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--copper);
  border-left: 0;
  border-top: 0;
  pointer-events: none;
}

.mode-banner {
  position: relative;
  margin: 14px 14px 0;
  aspect-ratio: 720 / 210;
}

.mode-banner img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
}

/* in-game style label on the scenery side of the button */
.mode-label {
  position: absolute;
  left: 30%;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font: 700 clamp(18px, 2.3vw, 30px)/1 Cinzel, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff6e4 0%, #f0d29e 42%, #c38d58 72%, #f2d6a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #1a0000) drop-shadow(0 0 10px rgba(0,0,0,.9));
}

.mode-body { padding: 20px 26px 28px; }

.mode-body h3 {
  margin: 0 0 8px;
  font: 700 22px Cinzel, serif;
  letter-spacing: .05em;
  color: var(--gold);
}

.mode-body p { margin: 0 0 14px; color: #d8cab6; font-size: 17px; line-height: 1.55; }

.mode-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mode-tags li {
  padding: 5px 11px;
  border: 1px solid var(--copper-dim);
  background: rgba(10,5,7,.7);
  color: var(--bone);
  font: 600 11px Cinzel, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rank-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rank-row img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }

@media(max-width: 860px) {
  .mode-grid { grid-template-columns: 1fr; }
}

@media(max-width: 560px) {
  .mode-body { padding: 16px 18px 24px; }
  .mode-banner { margin: 10px 10px 0; }
  .rank-row img { width: 38px; height: 38px; }
}

/* The toast slides up from below the viewport; keep it fully hidden until shown
   ( on tall / full-page captures the off-screen offset was not enough ). */
.toast { opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility 0s .25s; }
.toast.show { opacity: 1; visibility: visible; transition: transform .25s, opacity .25s; }

/* five facts in one row ( Languages added ) */
.facts { max-width: 980px; grid-template-columns: repeat(5, 1fr); }
@media(max-width: 860px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { border-bottom: 1px solid var(--line); }
}
@media(max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
}

/* 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; }
}