:root{
  --black:#000; --near:#0a0a0a;
  --gold:#d4af37; --gold2:#f5c56b; --gold3:#ffd86b; --gold4:#b98b2e;
  --glass:rgba(10,10,10,.55); --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  --glow:0 0 0 1px rgba(255,220,130,.35), 0 0 16px rgba(212,175,55,.35);
  --cardSize:100px; --cardRatio:1.5; --gap:10px; --vh:1vh;
  --nudgeX: 0px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  background:#000;
  color:#f6f2e6;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.hidden,[hidden]{display:none!important}

/* ===== v3.6 Content, Audio & Legal Lock ===== */
.publication-link-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.publication-link-row .btn{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.gallery-cultural-note{
  margin:4px 0 12px;
  color:#cbbf9f;
  font-size:.78rem;
  line-height:1.45;
}
@media (max-width:380px){
  .publication-link-row{grid-template-columns:1fr}
}
@media (orientation:landscape) and (max-height:520px){
  .publication-link-row .btn{min-height:40px}
  .gallery-cultural-note{font-size:.7rem;margin-bottom:8px}
}
a,button,.btn,.card{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}

/* App layout */
#app{
  height:calc(var(--vh)*100);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  position:relative;
  z-index:2;
}

/* Background layers */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  will-change:transform;
  background:
    conic-gradient(from 210deg at 70% 20%,rgba(212,175,55,.055),transparent 25%),
    radial-gradient(1200px 800px at 80% 10%,rgba(245,197,107,.09),transparent 60%),
    radial-gradient(1000px 700px at 20% 80%,rgba(185,139,46,.08),transparent 65%),
    linear-gradient(180deg,#050505,#0b0b0b 30%,#050505 100%);
}
body.menu .bg{
  background:
    conic-gradient(from 210deg at 70% 20%,rgba(212,175,55,.055),transparent 25%),
    radial-gradient(1200px 800px at 80% 10%,rgba(245,197,107,.08),transparent 60%),
    radial-gradient(1000px 700px at 20% 80%,rgba(185,139,46,.07),transparent 65%),
    url('assets/images/ecg_mobilebg.webp') center / cover no-repeat,
    linear-gradient(180deg,#050505,#0b0b0b 30%,#050505 100%);
}
.bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  mix-blend-mode:overlay;
  opacity:.22;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,235,180,.22) 0 .65px,transparent .8px);
  background-size:5px 5px;
  filter:contrast(120%) brightness(110%);
}
/* God rays */
.bg .rays{
  position:absolute;
  inset:-10%;
  background:
    conic-gradient(from 0deg at 50% 40%,
      rgba(255,215,130,.08) 0 6%,
      transparent 7% 18%,
      rgba(255,215,130,.06) 19% 24%,
      transparent 25% 36%,
      rgba(255,215,130,.05) 37% 40%,
      transparent 41% 100%);
  mix-blend-mode:screen;
  opacity:.35;
  animation:spinRays 24s linear infinite;
}
@keyframes spinRays{to{transform:rotate(360deg)}}

/* Hieroglyph drift layer */
.glyph-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.18;
  font-family:system-ui,"Segoe UI Symbol",sans-serif;
}

.glyph{
  position:absolute;
  font-size:clamp(28px,5vw,54px);
  color:#f5c56b;
  text-shadow:
    0 0 8px rgba(0,0,0,.9),
    0 0 16px rgba(255,215,130,.45);
  opacity:.9;
  animation:glyphFloat 26s ease-in-out infinite;
}

.glyph-1{ top:12%; left:18%; }
.glyph-2{ top:72%; left:24%; }
.glyph-3{ top:28%; right:16%; }
.glyph-4{ top:58%; right:22%; }
.glyph-5{ top:40%; left:50%; margin-left:-1.2em; }

.glyph-1{ animation-delay:-4s; }
.glyph-2{ animation-delay:-9s; }
.glyph-3{ animation-delay:-13s; }
.glyph-4{ animation-delay:-18s; }
.glyph-5{ animation-delay:-22s; }

@keyframes glyphFloat{
  0%{
    transform:translate3d(0,10px,0) rotate(0deg);
    opacity:.18;
  }
  50%{
    transform:translate3d(0,-18px,0) rotate(3deg);
    opacity:.45;
  }
  100%{
    transform:translate3d(0,10px,0) rotate(0deg);
    opacity:.18;
  }
}


/* Dust/VFX canvases */
#dust,#vfx{position:fixed;inset:0;pointer-events:none}
#dust{z-index:1}
#vfx{z-index:40}

/* Scenes */
.scene{position:relative;min-width:0;min-height:0;grid-column:1;grid-row:2}
.center-wrap{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;position:relative;z-index:200}
#scene-menu{overflow:auto}
#scene-menu .center-wrap{height:auto;min-height:100%}

/* Menu */
.hero{
  position:relative;
  max-width:920px;
  width:100%;
  padding:22px 20px 26px;
  border-radius:18px;
  will-change:transform,box-shadow;
}

body.menu .hero{
  box-shadow:
    0 0 30px rgba(0,0,0,.9),
    0 0 70px rgba(255,220,140,.22);
  animation:heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow{
  0%,100%{
    box-shadow:
      0 0 24px rgba(0,0,0,.85),
      0 0 50px rgba(255,220,140,.16);
  }
  50%{
    box-shadow:
      0 0 36px rgba(0,0,0,.95),
      0 0 90px rgba(255,230,150,.32);
  }
}


.panel{
  background:var(--glass);
  border:1px solid rgba(255,215,130,.15);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
}
@supports not ((backdrop-filter: blur(8px))){.panel{background:rgba(20,20,20,.85)}}
.logo{
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  font-size:clamp(24px,5.4vw,64px);
  background:linear-gradient(92deg,#b98b2e 0%,#ffd86b 28%,#fff2b5 33%,#d4af37 50%,#f5c56b 72%,#b98b2e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
  margin:4px 0 6px;
  animation:logoPulse 4.5s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(212,175,55,0))}
  50%{filter:drop-shadow(0 0 18px rgba(212,175,55,.45))}
}
.subtitle{text-align:center;color:#e7d7a3;opacity:.9;margin:0 0 14px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg,#161616,#0f0f0f);
  border:1px solid rgba(255,215,130,.18);
  color:#ffe9b8;
  min-height:44px;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* Gentle pulse on main menu buttons */
body.menu #scene-menu .menu-grid .btn{
  position:relative;
  overflow:hidden;
}

body.menu #scene-menu .menu-grid .btn::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 0, rgba(255,220,140,.45), transparent 55%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:menuBtnGlow 4.4s ease-in-out infinite;
}

@keyframes menuBtnGlow{
  0%,100%{ opacity:0; }
  50%{ opacity:.6; }
}


.btn:hover{box-shadow:var(--glow);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible,
.pwr:focus-visible,
.card:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible{
  outline:3px solid #ffd86b;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(0,0,0,.85),0 0 22px rgba(255,216,107,.75);
}

/* v2.3 progression, integrity, and input surfaces */
.active-title{
  margin:-4px 0 12px;
  color:rgba(255,233,184,.62);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.active-title.unlocked{color:#f5c56b;text-shadow:0 0 14px rgba(212,175,55,.24)}
.settings-section,.title-vault{
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(212,175,55,.22);
  border-radius:14px;
  background:rgba(0,0,0,.22);
}
.settings-section h3,.title-vault h3{margin:2px 0 8px;color:#ffe9b8}
.controller-map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:9px;
  margin:10px 0;
}
.controller-map-grid label{display:grid;gap:5px;color:#ffe9b8;font-size:.78rem}
.controller-map-grid select{width:100%}
.title-loadout{display:flex;gap:8px;flex-wrap:wrap}
.title-chip.equipped{border-color:#ffd86b;box-shadow:0 0 16px rgba(212,175,55,.18)}
.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mode-choice{display:flex!important;flex-direction:column;align-items:flex-start!important;text-align:left;gap:3px}
.mode-choice span{font-size:.7rem;line-height:1.3;color:rgba(255,244,214,.7);font-weight:400}
.chapter-objective{display:block;margin-top:5px;color:#f5c56b;font-size:.68rem;line-height:1.35}
.objective-results{margin-top:5px;color:#f5c56b}
.save-import-summary{padding:12px;border-radius:10px;background:rgba(212,175,55,.09);line-height:1.55}

@media (max-width:640px){
  .btn.small,#btnPause,.pwr{min-width:44px;min-height:44px}
  .mode-grid{grid-template-columns:1fr}
  #modal-modes .box,#modal-settings .box{max-height:88dvh;overflow:auto}
  .controller-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.btn.small{padding:6px 10px;min-height:40px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.journey-primary{
  background:
    radial-gradient(circle at 50% -20%,rgba(255,239,176,.3),transparent 62%),
    linear-gradient(180deg,#3b2a0c,#171006);
  border-color:rgba(255,216,107,.66);
  color:#fff1bd;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 22px rgba(212,175,55,.2),inset 0 1px 0 rgba(255,245,205,.18);
}

/* HUDs */
.hud,.hud-bottom{ position:relative; z-index:200; pointer-events:auto; min-width:0; }
.hud{
  grid-column:1;grid-row:1;
  display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:nowrap;
  padding:
    calc(env(safe-area-inset-top) + 6px)
    max(10px,env(safe-area-inset-right))
    8px
    max(10px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.6));
  border-bottom:1px solid rgba(255,215,130,.12);
}
.hud-bottom{
  grid-column:1;grid-row:3;
  display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:nowrap;
  padding:
    8px
    max(10px,env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 10px)
    max(10px,env(safe-area-inset-left));
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.6));
  border-top:1px solid rgba(255,215,130,.12);
}
.stat{
  display:inline-flex;gap:8px;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:12px;background:linear-gradient(180deg,#161616,#0f0f0f);
  border:1px solid rgba(255,215,130,.18);color:#ffe9b8;min-height:40px;white-space:nowrap;
  transition:filter .2s ease;
}
.stat.ping{animation:statPing .6s ease}
@keyframes statPing{
  0%{filter:drop-shadow(0 0 0 rgba(212,175,55,0))}
  50%{filter:drop-shadow(0 0 12px rgba(212,175,55,.55))}
  100%{filter:none}
}
.stars{display:flex;gap:4px}
.star{width:18px;height:18px;filter:drop-shadow(0 0 4px rgba(240,210,130,.35))}
.star svg{display:block}
.label{opacity:.85;color:#f6e7b0;font-size:.85rem;white-space:nowrap}

/* Power-ups strip */
.stat-pu{max-width:220px;}
.powers{display:flex;gap:4px}
.pwr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:44px;height:44px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,215,130,.3);
  background:radial-gradient(circle at 30% 0%,rgba(255,250,210,.35),rgba(16,16,16,1));
  box-shadow:0 0 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.9);
}
.pwr svg{width:18px;height:18px}
.p-count{
  font-size:.7rem;
  min-width:1.1em;
  text-align:center;
  color:#ffe9b8;
}
.pwr[disabled]{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}
.pwr:not([disabled]):hover,
.pwr:not([disabled]):focus-visible{
  box-shadow:0 0 10px rgba(212,175,55,.6);
  outline:none;
}

@media (max-width:560px){
  .stat{padding:6px 10px;font-size:clamp(12px,3.2vw,14px)}
  .btn.small{padding:5px 8px;min-height:40px}
  .star{width:14px;height:14px}
  .stat-pu .label{display:none}
  .pwr{width:40px;height:40px}
}

/* Board */
/* Board */
.board-viewport{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:10px;
}

/* HUDs own the top/bottom safe areas; preserve lateral notch clearance here. */
@supports (padding: max(0px)){
  .board-viewport{
    padding:
      10px
      max(10px, calc(env(safe-area-inset-right) * 0.7))
      10px
      max(10px, calc(env(safe-area-inset-left) * 0.7));
  }
}

.controller-status{
  position:fixed;
  right:max(10px,env(safe-area-inset-right));
  bottom:max(10px,env(safe-area-inset-bottom));
  z-index:900;
  padding:6px 10px;
  border:1px solid rgba(255,215,130,.25);
  border-radius:999px;
  background:rgba(0,0,0,.76);
  color:#ead8a6;
  font-size:.66rem;
  letter-spacing:.04em;
  pointer-events:none;
}
body.input-gamepad .controller-focus,
body.input-gamepad :focus-visible{
  outline:3px solid #7de0ff!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 5px rgba(0,0,0,.86),0 0 24px rgba(77,203,255,.74)!important;
}
@media (max-width:640px){.controller-status{font-size:.58rem;max-width:80vw;white-space:nowrap}}

.scale-wrap{
  position:absolute;
  left:50%;top:50%;
  transform-origin:center center;
  will-change:transform;
}

#popLayer{
    position:absolute;
    inset:0;
    pointer-events:none;
    display:grid;
    place-items:center;
    z-index:400;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,var(--cardSize));
  gap:var(--gap);
  justify-items:center;
  align-content:flex-start;
  perspective:1200px;
  padding:10px;
  width:max-content;
  margin:0;
  overflow:hidden;
  position:relative;
  z-index:20; /* ensure cards sit above flame border */
}

/* ===== CARD (seamless flip) ===== */
.card{
  appearance:none;-webkit-appearance:none;background:transparent;border:2px solid transparent;border-radius:14px;
  position:relative;overflow:hidden;
  background-image:linear-gradient(#0000,#0000),conic-gradient(from 210deg,rgba(185,139,46,.75),rgba(255,216,107,.9) 35%,rgba(212,175,55,.85) 65%,rgba(185,139,46,.75));
  background-clip:padding-box,border-box;box-shadow:0 0 10px rgba(212,175,55,.08);
  width:var(--cardSize);height:calc(var(--cardSize) * var(--cardRatio));
  perspective:1000px;
  contain:layout paint size style;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  will-change:transform;
}
.card *{ transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.card .inner{
  width:100%;
  height:100%;
  border-radius:12px;

  /* smoother, heavier flip – similar to lore card */
  transition:
    transform .55s cubic-bezier(.23,1.02,.21,1),
    box-shadow .35s ease-out;
  will-change:transform;

  /* start face-down */
  transform:rotateY(180deg) translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* when flipped in gameplay */
.card.flipped .inner{
  /* flip to face-up and give a tiny "pop" toward the player */
  transform:rotateY(0deg) translateZ(3px);
}

.face{
  position:absolute;inset:0;display:block;overflow:hidden;border-radius:12px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  outline:1px solid transparent;
  transform:rotateY(0deg);
}
.front{
  background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(255,235,170,.06),0 4px 12px rgba(0,0,0,.45);
}
.back{
  background:linear-gradient(180deg,#101010,#090909);
  transform:rotateY(180deg);
}
.front .front-img,
.back .back-cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block;
  image-rendering:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transform:translateZ(0);
}
.front::before,
.back::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}

/* sweep flash on normal flip */
.card.flipped .front::before{
  opacity:1;
  animation:sweep 600ms ease-out forwards;
}

/* Horus Sight glow – backs only */
.card.hint .back::before{
  opacity:1;
  animation:none;
  background:
    radial-gradient(ellipse at center,
      rgba(255,245,210,.95),
      rgba(255,170,70,.8),
      transparent 70%);
}
.card.hint .front::before{
  opacity:0;
}
.card.hint{
  box-shadow:
    0 0 22px rgba(255,230,170,.95),
    0 0 60px rgba(255,130,40,.95);
}

/* subtle glow while a card is face-up (but not yet matched) */
.card.flipped:not(.matched){
  box-shadow:
    0 0 18px rgba(255,220,140,.55),
    0 0 42px rgba(255,220,140,.25),
    0 0 64px rgba(255,220,140,.18),
    0 8px 22px rgba(0,0,0,.65);
}


/* matched, error, etc */
/* matched, error, etc */
.card.matched{
  /* permanent “you did it” glow */
  box-shadow:
    0 0 22px rgba(255,220,140,.85),
    0 0 52px rgba(255,180,90,.65),
    0 0 86px rgba(255,220,140,.4),
    0 10px 24px rgba(0,0,0,.85);
  pointer-events:none;         /* you can’t click matched cards */
}

.card.matched .front{
  animation:matchPulse .8s ease-out;
}
.special-sigil{
  position:absolute;
  right:6px;
  top:6px;
  z-index:5;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,231,157,.68);
  background:rgba(4,4,4,.78);
  color:#ffe28d;
  font-size:.8rem;
  box-shadow:0 0 13px rgba(255,199,82,.5);
}
.special-card.flipped:not(.matched){
  border-color:rgba(255,224,137,.76);
}
.card-grid.grid-shifting{
  animation:chamberShift .52s ease both;
}
@keyframes chamberShift{
  0%,100%{filter:none;transform:translateZ(0)}
  38%{filter:blur(2px) brightness(1.45);transform:translate3d(0,-2px,0) scale(.985)}
}

/* keep this – we’ll redefine the keyframes so it doesn’t mess flips */
.card.shake .inner{
  animation:shake .22s;
}

.cb-markers{position:absolute;inset:0;pointer-events:none}
.cb-markers::before,.cb-markers::after{content:"";position:absolute;width:0;height:0;border-style:solid;opacity:.9}
.cb-markers::before{left:5px;top:5px;border-width:0 0 10px 10px;border-color:transparent transparent #d4af37 transparent}
.cb-markers::after{right:5px;bottom:5px;border-width:10px 10px 0 0;border-color:#d4af37 transparent transparent transparent}
.card.void{
  pointer-events:none;
  background:linear-gradient(180deg,#101010,#0b0b0b);
  border:1px solid rgba(255,215,130,.22);
  box-shadow:inset 0 0 0 1px rgba(255,235,170,.06),0 0 14px rgba(212,175,55,.08);
}
.card.void::after{
  content:"";
  position:absolute;inset:10%;
  border-radius:10px;
  background:radial-gradient(200px 140px at 50% -10%,rgba(255,230,160,.10),rgba(0,0,0,0) 60%);
  border:1px dashed rgba(255,215,130,.25);
}

/* combo pop text */
.pop{
  position:absolute;left:50%;top:18%;
  transform:translate(-50%,-50%);
  font-weight:800;letter-spacing:.04em;
  padding:.2rem .6rem;border-radius:12px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,215,130,.25);
  color:#ffe9b8;
  text-shadow:0 0 10px rgba(212,175,55,.35);
  opacity:0;
  animation:popUp .9s ease-out forwards;
}
@keyframes popUp{
  0%{transform:translate(-50%,0) scale(.8);opacity:0}
  20%{opacity:1}
  70%{opacity:1}
  100%{transform:translate(-50%,-40px) scale(1.05);opacity:0}
}

.section{padding:14px}
.section h2{margin:0 0 8px;color:#ffe9b8;font-weight:700;letter-spacing:.04em}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Gallery */
.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}
.gallery-progress{font-size:.8rem;color:#ead8a6}
.gallery-filter{display:flex;align-items:center;gap:8px;color:#ead8a6;font-size:.78rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.gallery-item{
  position:relative;display:flex;flex-direction:column;gap:8px;
  border-radius:12px;border:1px solid rgba(255,215,130,.16);
  background:linear-gradient(180deg,#111,#0a0a0a);
  padding:8px;box-shadow:var(--shadow);overflow:hidden;
}
.gallery-item .thumb{
  position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;
  border-radius:10px;display:grid;place-items:center;
  background:radial-gradient(320px 220px at 50% -10%, rgba(255,235,180,.06), rgba(0,0,0,0) 60%), #0a0a0a;
}
.gallery-item img{
  width:100%;height:100%;object-fit:contain;display:block;
  border-radius:10px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.gallery-item.locked .thumb::after{
  content:"Locked";position:absolute;right:6px;bottom:6px;
  font-size:.75rem;color:#ffdf9b;background:#141414;
  border:1px solid rgba(255,215,130,.18);padding:2px 6px;border-radius:8px;
}
.gallery-cap{font-size:.85rem;line-height:1.3;opacity:.95}
.gallery-cap strong{display:block;margin-bottom:2px;color:#ffe9b8}
.gallery-cap .lore{margin-top:6px}
.gallery-cap .lore summary{cursor:pointer;color:#ffd86b}
.gallery-cap .lore p{margin:.4rem 0 0;color:#e9ddbf;opacity:.95}
.gallery-cap,.lore-text,.lore-scroll{user-select:text;-webkit-user-select:text}



/* Relic Store */
.store-box{
  max-width:520px;
  margin:0 auto;
}

.store-kpi{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:8px 0 12px;
  font-size:.9rem;
}

.store-kpi .label{
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.75;
  font-size:.75rem;
}

#storeShardCount{
  font-size:1.4rem;
  color:var(--gold3);
  text-shadow:0 0 10px rgba(255,215,130,.6);
}

.store-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}

.store-item{
  padding:10px 10px 8px;
  border-radius:14px;
  background:
    radial-gradient(220px 160px at 10% 0%, rgba(255,230,150,.10), transparent 60%),
    radial-gradient(260px 200px at 90% 100%, rgba(255,210,130,.08), transparent 60%),
    #050505;
  box-shadow:
    0 10px 24px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,215,130,.18);
}

.store-item-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  margin-bottom:4px;
}

.store-name{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffe9b8;
  font-size:.85rem;
}

.store-tag{
  font-size:.7rem;
  opacity:.65;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.store-desc{
  font-size:.8rem;
  line-height:1.35;
  opacity:.92;
  margin:2px 0 6px;
}

.store-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.store-footer .btn.small{
  font-size:.75rem;
  padding:4px 10px;
}

.store-stock{
  font-size:.75rem;
  opacity:.8;
}


/* Performance modal table */
.table{width:100%;border-collapse:separate;border-spacing:0 6px}
.table th,.table td{
  padding:8px 10px;text-align:left;
  border:1px solid rgba(255,215,130,.14);
  background:linear-gradient(180deg,#121212,#0d0d0d);
  color:#f6e7c8;
}
.table th{background:linear-gradient(180deg,#1a1a1a,#101010);color:#ffe9b8}
.table .muted{opacity:.9}
.kpi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin:8px 0 10px;
}
.kpi .card{
  padding:10px;border-radius:12px;
  border:1px solid rgba(255,215,130,.18);
  background:linear-gradient(180deg,#151515,#0e0e0e);
}
.kpi .card strong{display:block;color:#ffe9b8;font-size:1.1rem}

/* Modals */
.modal{
  position:fixed;inset:0;
  display:none;
  align-items:center;justify-content:center;
  padding:
    max(10px,env(safe-area-inset-top))
    max(10px,env(safe-area-inset-right))
    max(10px,env(safe-area-inset-bottom))
    max(10px,env(safe-area-inset-left));
  background:rgba(0,0,0,.6);
  z-index:1000;
}
.modal.active{display:flex}
.modal .box{min-width:min(520px,92vw);max-width:92vw;max-height:88dvh;overflow:auto;pointer-events:auto}
#modal-settings.active{z-index:1001}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.setting-select{display:flex;align-items:center;justify-content:space-between;gap:10px;grid-column:1/-1;color:#ffe9b8}
.modal-actions{justify-content:flex-end;margin-top:12px}

/* Journey and guided expedition */
.eyebrow{
  margin:0 0 4px;
  color:var(--gold2);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.88;
}
.gallery-item.new::before{
  content:"New";
  position:absolute;
  z-index:4;
  left:6px;
  top:6px;
  padding:3px 7px;
  border-radius:999px;
  background:#ffd86b;
  color:#171006;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 14px rgba(255,216,107,.66);
}
.gallery-item.mastered{border-color:rgba(102,224,161,.38)}
.mastery-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;font-size:.7rem;color:#ddcfa8}
.mastery-track{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.mastery-fill{display:block;height:100%;background:linear-gradient(90deg,#b98b2e,#ffd86b);border-radius:inherit}

/* Daily Trial */
.daily-box{width:min(620px,92vw);background:radial-gradient(420px 220px at 50% 0,rgba(255,215,130,.15),transparent 70%),rgba(7,7,7,.96)}
.daily-date{color:#ead8a6;font-size:.8rem;letter-spacing:.08em;margin-bottom:12px}
.daily-rule-card{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid rgba(255,215,130,.24);border-radius:14px;background:rgba(0,0,0,.36)}
.daily-rule-card h3{margin:0 0 5px;color:#ffe9b8}
.daily-rule-card p{margin:0;color:#e9ddbf;line-height:1.45;font-size:.86rem}
.daily-glyph{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,216,107,.36);color:var(--gold3);font-size:2.1rem;background:rgba(255,216,107,.06)}
.daily-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.daily-kpi{padding:10px;border:1px solid rgba(255,215,130,.16);border-radius:12px;background:rgba(0,0,0,.3)}
.daily-kpi span{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.daily-kpi strong{display:block;color:#ffe9b8;margin-top:3px}
.store-divider{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 4px;
  padding-top:14px;
  border-top:1px solid rgba(255,215,130,.18);
}
.store-divider h3{margin:0;color:#ffe9b8;font-size:1rem}
#storeLoadout{color:var(--gold3);font-size:.78rem;white-space:nowrap}
.store-passive-help{font-size:.78rem;margin:4px 0 10px}
.passive-store-item.equipped{border-color:rgba(102,224,161,.45);box-shadow:0 0 0 1px rgba(102,224,161,.18),0 12px 24px rgba(0,0,0,.8)}
.relic-actions{align-items:stretch}
.relic-actions .btn{flex:1;white-space:normal}
.relic-equip.equipped{color:#9ff0c7;border-color:rgba(102,224,161,.5)}
.passive-relics{display:flex;gap:4px;justify-content:center;min-height:16px;margin-top:3px}
.passive-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  border:1px solid rgba(255,215,130,.28);
  background:rgba(0,0,0,.46);
  color:#ffe09a;
  font-size:.62rem;
  line-height:1;
}
.muted{color:#e9ddbf;opacity:.78}
.journey-box{
  width:min(880px,94vw);
  max-height:min(88vh,760px);
  overflow:auto;
  background:
    radial-gradient(600px 260px at 50% -10%,rgba(255,215,130,.14),transparent 62%),
    rgba(8,8,8,.94);
}
.journey-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.journey-progress{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid rgba(255,215,130,.24);
  border-radius:12px;
  color:#ffe9b8;
  font-size:.82rem;
  text-align:right;
  background:rgba(0,0,0,.4);
}
.journey-map{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:14px;
  position:relative;
}
.journey-node{
  min-height:186px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding:14px;
  border-radius:15px;
  border:1px solid rgba(255,215,130,.2);
  background:
    radial-gradient(180px 130px at 100% 0,rgba(255,216,107,.12),transparent 70%),
    linear-gradient(180deg,#15130e,#090909);
  color:#f6f2e6;
  box-shadow:0 12px 26px rgba(0,0,0,.38);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.journey-node:not([disabled]):hover{
  transform:translateY(-2px);
  border-color:rgba(255,216,107,.62);
  box-shadow:0 14px 34px rgba(0,0,0,.56),0 0 22px rgba(212,175,55,.16);
}
.journey-node[disabled]{filter:saturate(.35);opacity:.52;cursor:not-allowed}
.journey-node.completed{border-color:rgba(102,224,161,.38)}
.journey-node.current{border-color:rgba(255,216,107,.65);box-shadow:0 0 24px rgba(212,175,55,.15)}
.journey-node .chapter-index{font-size:.68rem;letter-spacing:.18em;color:var(--gold2);text-transform:uppercase}
.journey-node .chapter-glyph{font-size:2rem;line-height:1;margin:10px 0;color:var(--gold3);text-shadow:0 0 16px rgba(255,216,107,.42)}
.journey-node strong{font-size:1rem;color:#ffe9b8;letter-spacing:.04em}
.journey-node .chapter-desc{font-size:.8rem;line-height:1.4;opacity:.78;margin:6px 0 12px}
.journey-node .chapter-status{margin-top:auto;font-size:.74rem;color:#ead8a6}
.journey-node .chapter-stars{color:#ffd86b;letter-spacing:.08em}
.journey-actions{align-items:center;justify-content:space-between}

.tutorial-box{
  width:min(560px,92vw);
  text-align:center;
  padding:22px;
  background:
    radial-gradient(360px 220px at 50% 0,rgba(255,215,130,.16),transparent 68%),
    rgba(7,7,7,.96);
}
.tutorial-glyph{
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  margin:16px auto;
  border:1px solid rgba(255,216,107,.38);
  border-radius:50%;
  color:var(--gold3);
  font-size:2.7rem;
  background:radial-gradient(circle,rgba(255,216,107,.13),transparent 70%);
  box-shadow:0 0 34px rgba(212,175,55,.17);
}
.tutorial-text{min-height:4.4em;margin:10px auto 16px;max-width:44ch;line-height:1.55;color:#eee1bf}
.tutorial-dots{display:flex;justify-content:center;gap:7px;margin:8px 0 18px}
.tutorial-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.tutorial-dot.active{background:var(--gold3);box-shadow:0 0 9px rgba(255,216,107,.72)}
.tutorial-actions{justify-content:flex-end;align-items:center}
#tutorialSkip{margin-right:auto}
.coach-banner{
  position:absolute;
  left:50%;
  top:max(8px,env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:650;
  width:min(520px,calc(100% - 28px));
  padding:10px 14px;
  border:1px solid rgba(255,216,107,.54);
  border-radius:12px;
  background:rgba(4,4,4,.9);
  color:#fff0bd;
  font-size:.84rem;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.7),0 0 20px rgba(212,175,55,.16);
  pointer-events:none;
}


/* ---------- Achievements UI ---------- */

.ach-list{
  list-style:none;
  padding:0;
  margin:4px 0 0;
}

.ach-item{
  padding:6px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ach-item:last-child{
  border-bottom:none;
}

.ach-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}

.ach-header-row strong{
  font-size:.9rem;
}

.ach-status{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.8;
}

.ach-desc{
  font-size:.8rem;
  opacity:.9;
  margin-bottom:4px;
}

/* XP-style progress bar */
.ach-progress{
  position:relative;
  width:100%;
  height:6px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(80,70,40,.5),
    rgba(20,15,5,.6)
  );
  overflow:hidden;
  box-shadow:inset 0 0 4px rgba(0,0,0,.9);
}

.ach-progress-bar{
  position:absolute;
  inset:0;
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    #f5c56b,
    #ffd86b,
    #f0b544
  );
  box-shadow:
    0 0 8px rgba(255,220,140,.8),
    0 0 14px rgba(255,220,140,.5);
}

.ach-progress-label{
  margin-top:2px;
  font-size:.72rem;
  opacity:.9;
}





/* Subtle golden sand aura around the card during flip */
.lore-card::before{
  content:"";
  position:absolute;
  inset:-12px;
  pointer-events:none;
  border-radius:24px;

  /* very small glowing grains, repeated = noise, not tiles */
  background-image:
    radial-gradient(circle, rgba(255,220,130,.45) 0 1px, rgba(255,220,130,0) 1px),
    radial-gradient(circle, rgba(255,200,120,.35) 0 1px, rgba(255,200,120,0) 1px),
    radial-gradient(circle, rgba(255,255,210,.25) 0 1px, rgba(255,255,210,0) 1px);
  background-size: 6px 6px, 8px 8px, 10px 10px;
  background-repeat: repeat;
  background-position: 0 0, 20px 30px, -15px 45px;

  opacity:0;
  mix-blend-mode:screen;
}

/* wake the sand up only while flipped */
.lore-card.flipped::before{
  animation: sandDrift 2.4s ease-out forwards;
}


/* drop-in animation */
.lore-card.reveal{
  transform:scale(1) translateY(0);
}

/* front/back faces: we flip THESE, not the whole card */
.lore-face{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  backface-visibility:hidden;
  transition:
    transform .45s cubic-bezier(.23,1.02,.21,1),
    opacity .35s ease-out;
}

/* FRONT – unlocked card art */
.lore-face.front{
  background:#000;
  transform:rotateY(0deg);
  opacity:1;
}
.lore-face.front img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* BACK – lore text panel (what the card BECOMES) */
.lore-face.back{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,216,130,.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,216,130,.10), transparent 55%),
    #050505;
  display:flex;
  align-items:stretch;
  justify-content:center;
  transform:rotateY(90deg);   /* edge-on and hidden initially */
  opacity:0;
}

/* when flipped: fade/rotate FRONT away, rotate BACK in */
.lore-card.flipped .lore-face.front{
  transform:rotateY(90deg);
  opacity:0;
}
.lore-card.flipped .lore-face.back{
  transform:rotateY(0deg);
  opacity:1;
}

.lore-scroll{
  padding:12px 14px 14px;
  max-height:45vh;
  overflow:auto;
}

/* Lore text styles */
#loreUnlockName{
  font-size:16px;
  font-weight:700;
  color:var(--gold3);
  text-shadow:
    0 0 4px rgba(0,0,0,.9),
    0 0 10px rgba(255,220,130,.8);
  margin-bottom:6px;
}

#loreUnlockText,
.lore-text{
  font-size:13px;
  line-height:1.45;
  color:#f4ebd2;
}

/* Hint under the title */
#modal-lore .lore-hint{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.7;
  text-align:center;
  margin-top:4px;
}

/* Buttons row */
.lore-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}


/* ===== Extra VFX ===== */
#boardVP.shake{animation:camShake 300ms linear}
@keyframes camShake{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(2px,0,0)}
  40%{transform:translate3d(-2px,0,0)}
  60%{transform:translate3d(1.5px,0,0)}
  80%{transform:translate3d(-1.5px,0,0)}
}
.fx-aura{
  position:fixed;pointer-events:none;z-index:60;mix-blend-mode:screen;border-radius:18px;opacity:0;
  animation:auraFlame 900ms ease-out forwards;
  background:
    radial-gradient(40% 60% at 50% 40%, rgba(255,210,120,.28), rgba(255,210,120,.05) 60%, transparent 75%),
    conic-gradient(from 0deg, rgba(255,200,120,.35), rgba(255,160,70,.18), rgba(255,200,120,.35));
  filter:blur(4px) saturate(120%);
}
.fx-aura.a5{filter:blur(5px) saturate(135%)}
.fx-aura.a8{filter:blur(6px) saturate(155%)}
@keyframes auraFlame{
  0%  {opacity:0; transform:scale(.96) rotate(0deg)}
  50% {opacity:1}
  100%{opacity:0; transform:scale(1.06) rotate(14deg)}
}

/* FLAMING BORDER for perfect / Ascension */
.flame-border{
  position:absolute;
  inset:-10px;                /* tight wrap around grid/scaleWrap */
  border-radius:26px;
  pointer-events:none;
  z-index:5;                  /* above background, behind cards */
  border:3px solid transparent;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,240,210,.22), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(255,190,120,.22), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.98)) padding-box;
  mix-blend-mode:screen;
}

/* Inner fire pulse + glow */
.flame-border::before,
.flame-border::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

/* Bright gold/orange rim that breaths */
.flame-border::before{
  border:3px solid rgba(255,190,120,.95);
  box-shadow:
    0 0 18px rgba(255,170,80,.95),
    0 0 48px rgba(255,110,40,.75),
    inset 0 0 14px rgba(0,0,0,1);
  opacity:.95;
  animation:flamePulse 1.35s ease-in-out infinite;
}

/* Noise / streaks / extra heat */
.flame-border::after{
  background:
    repeating-linear-gradient(
      120deg,
      rgba(255,210,140,.65) 0,
      rgba(255,210,140,0) 6px,
      rgba(255,150,60,0) 10px
    ),
    radial-gradient(130% 220% at 50% 120%, rgba(255,120,40,.65), transparent 62%);
  mix-blend-mode:screen;
  opacity:.8;
  animation:flameFlicker 320ms steps(3,end) infinite;
}

/* quick, jittery flame noise instead of full rotation */
@keyframes flamePulse{
  0%,100%{
    box-shadow:
      0 0 20px rgba(255,170,80,.85),
      0 0 60px rgba(255,110,30,.8),
      inset 0 0 10px rgba(0,0,0,1);
  }
  50%{
    box-shadow:
      0 0 34px rgba(255,220,150,1),
      0 0 110px rgba(255,150,60,1),
      inset 0 0 18px rgba(0,0,0,.8);
  }
}

@keyframes flameFlicker{
  0%  {opacity:.7; transform:translate3d(0,0,0);}
  30% {opacity:1;  transform:translate3d(-1px,-1px,0);}
  60% {opacity:.75;transform:translate3d(1px,1px,0);}
  100%{opacity:.9; transform:translate3d(0,0,0);}
}

/* Pop animation when level increases */
.level-ring.level-pop{
  animation: level-pop .55s ease-out;
}

@keyframes level-pop{
  0%   { transform:scale(1);   box-shadow:var(--glow); }
  20%  { transform:scale(1.18); box-shadow:0 0 28px rgba(255,220,130,.9); }
  100% { transform:scale(1);   box-shadow:var(--glow); }
}

/* Extra glow flash on the number */
.level-ring-number.level-glow{
  animation: level-glow .9s ease-out;
}

@keyframes level-glow{
  0%{
    text-shadow:
      0 0 6px rgba(0,0,0,.9),
      0 0 14px var(--gold3),
      0 0 26px rgba(255,235,170,1);
  }
  100%{
    text-shadow:
      0 0 4px rgba(0,0,0,.8),
      0 0 8px var(--gold3),
      0 0 16px rgba(255,220,130,.9);
  }
}


/* ======================================================
   Player Level badge – always visible
====================================================== */
/* AC: Origins style level pill */
/* Level badge now sits inside the top HUD flex row */
#levelBadge{
  margin-left:auto;              /* pushes it to the far right */
  padding:4px 10px;
  border-radius:999px;
  display:flex;
  align-items:center;            /* vertical center with Time/Moves/Combo */
  gap:8px;

  background:linear-gradient(135deg, rgba(0,0,0,.92), rgba(40,28,8,.96));
  border:1px solid rgba(212,175,55,.6);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 10px 26px rgba(0,0,0,.8);
}

#levelBadge .level-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.85;
  color:#f4e3b0;
}


/* Circular level progress ring */
/* AC:O style circular level icon */
.level-ring{
  --lvlFrac: 0; /* 0–1 from JS */

  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* Golden arc + dim remainder */
  background:
    conic-gradient(
      var(--gold3) calc(var(--lvlFrac) * 1turn),
      rgba(120,90,30,.18) 0
    );

  /* NO outer circle, just subtle glow */
  box-shadow:
    0 0 10px rgba(0,0,0,.9),
    0 0 18px rgba(255,220,130,.5);
}

/* Inner dark disc, slightly smaller like AC:O */
.level-ring-inner{
  width:76%;
  height:76%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), rgba(0,0,0,1) 55%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none; /* remove halo */
}

/* Level number – warm golden glow */
.level-ring-number{
  font-size:13px;
  font-weight:600;
  color:#f8e2a0;
  text-shadow:
    0 0 6px rgba(0,0,0,1),
    0 0 10px rgba(255,220,130,1),
    0 0 18px rgba(255,235,170,.9);
}

/* Mobile: hide text label so only the ring + number show */
@media (max-width: 768px){
  #levelBadge .level-label{
    display:none;
  }

  /* tighten spacing since label is removed */
  #levelBadge{
    padding-right:6px;
    gap:4px;
  }
}

/* Extra-small screens: gently shrink the icon */
@media (max-width: 480px){
  .level-ring{
    width:28px;
    height:28px;
  }
  .level-ring-inner{
    width:78%;
    height:78%;
  }
  .level-ring-number{
    font-size:12px;
  }
}



/* ============================================================
   ❌ FAILED variant of PERFECT banner
   - Dark red glow
   - Cracked texture
   - Heavy shadow
   - No gold
============================================================ */

.perfect-banner.fail{
  background:radial-gradient(circle at 50% 40%, rgba(80,0,0,.85), rgba(0,0,0,0) 70%);
  border:1px solid rgba(255,80,80,.9);
  box-shadow:
    0 0 28px rgba(255,40,40,1),
    0 0 90px rgba(120,0,0,1),
    inset 0 0 14px rgba(0,0,0,.85);

  /* color + scale tone-down */
  color:#ffe1e1;
  transform:translate(-50%,-50%) scale(.85);
  animation:
    failPop 1.1s ease-out forwards,
    failGlow 1.4s ease-in-out infinite alternate;
}

/* crack overlay */
.perfect-banner.fail::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.3), transparent 70%);
  opacity:.28;
  pointer-events:none;
}

/* FAILED text gradient */
.perfect-banner.fail span{
  background:linear-gradient(90deg,#ffbaba,#ff7070,#ff3c3c,#ff7070,#ffbaba);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* FAIL animations */
@keyframes failPop{
  0%{opacity:0; transform:translate(-50%,-46%) scale(.7);}
  25%{opacity:1; transform:translate(-50%,-50%) scale(.9);}
  100%{opacity:0; transform:translate(-50%,-62%) scale(1);}
}

@keyframes failGlow{
  0%{
    text-shadow:
      0 0 12px rgba(255,70,70,1),
      0 0 24px rgba(140,0,0,1);
  }
  100%{
    text-shadow:
      0 0 22px rgba(255,110,110,1),
      0 0 48px rgba(180,0,0,1);
  }
}

.perfect-banner span{
  display:inline-block;
  background:linear-gradient(90deg,#fff6c8,#ffe18a,#ffbf4b,#ffe18a,#fff6c8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@keyframes perfectPop{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.7);}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-66%) scale(1.05);}
}
@keyframes perfectGlow{
  0%{text-shadow:0 0 14px rgba(255,210,120,.9),0 0 26px rgba(255,130,40,.85);}
  100%{text-shadow:0 0 24px rgba(255,240,170,1),0 0 60px rgba(255,160,60,1);}
}

@media (prefers-reduced-motion: reduce){
  .card .inner{transition:transform .2s ease}
  .bg::after,.bg .rays{display:none}
}
@media (max-width:560px){ :root{ --nudgeX: 0px; } }

/* --- Safari/iOS flip fallback --- */
html.altflip .card .inner{ transform:none !important; }
html.altflip .card .face{
  transform:none !important;
  backface-visibility:visible; -webkit-backface-visibility:visible;
}
html.altflip .card .back{ opacity:1; }
html.altflip .card .front{ opacity:0; }
html.altflip .card.flipped .back{ opacity:0; }
html.altflip .card.flipped .front{ opacity:1; }
html.altflip .card .front,
html.altflip .card .back{ transition:opacity .26s ease, transform .26s ease; }
html.altflip .card:active .inner{ transform:scale(.98); }
html.altflip .card.flipped .front::before{ opacity:0; animation:none; }

/* Exit scene */
.exit-wrap{display:grid;place-items:center;height:100%;padding:24px}
.exit-card{max-width:720px;text-align:center}
.exit-card h2{margin:0 0 8px;font-size:clamp(22px,4vw,36px);color:#ffe9b8}
.exit-card p{opacity:.9}

/* MOBILE — symmetrical 2-column menu */
@media (max-width: 768px){

  /* Menu panel narrower so grid sits centered & premium looking */
  #scene-menu .hero{
    max-width: 420px;
    width: 92%;
    padding: 16px 14px 20px;
  }

  /* Make grid 2 columns */
  #scene-menu .menu-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columns */
    gap: 10px 12px;                         /* vertical/horizontal spacing */
    justify-items: center;                  /* center each button */
  }

  /* Buttons — smaller + uniform */
  #scene-menu .menu-grid .btn{
    width: 100%;             /* each fills its grid cell */
    padding: 10px 0;         /* nice compact vertical size */
    min-height: 44px;
    font-size: 14px;
    border-radius: 12px;
  }

/* Title + subtitle tightened */
  /* MAIN MENU TITLE — more dramatic, glowing, AC: Origins style */
#scene-menu .logo{
  font-size: clamp(28px, 7vw, 40px);      /* larger, scales nicely */
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin-bottom: 8px;

  background: linear-gradient(180deg, #f9e7b5 0%, #d4af37 40%, #8c6b1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Premium layered glow */
  text-shadow:
    0 0 6px rgba(255,216,130,0.55),
    0 0 12px rgba(255,216,130,0.45),
    0 0 22px rgba(255,216,130,0.35),
    0 0 34px rgba(255,216,130,0.25),
    0 0 48px rgba(255,216,130,0.15);
}

/* Subtitle enhanced to match the stronger title glow */
#scene-menu .subtitle{
  font-size: 15px;
  text-align: center;
  opacity: 0.8;
  margin-bottom: 18px;

  text-shadow:
    0 0 4px rgba(255,216,130,0.4),
    0 0 10px rgba(255,216,130,0.25);
}
}




/* === Lore Unlock Modal === */

#modal-lore{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,220,130,.18), transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(255,220,130,.16), transparent 55%),
    rgba(0,0,0,.90);
}

#modal-lore .lore-modal-box{
  max-width:520px;
  margin:0 auto;
}

#modal-lore .lore-unlock-wrapper{
  display:flex;
  justify-content:center;
  margin:16px 0 8px;
}

/* centers card in the glowing inner frame */
.lore-card-wrap{
  width:min(320px, 80vw);
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

/* the 3D card that flips into the lore box */
.lore-card{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 12px 30px rgba(0,0,0,.9),
    0 0 24px rgba(255,220,130,.4);
  transform-style:preserve-3d;
  transform:scale(.95) translateY(8px) rotateY(0deg);
  transition: transform .9s cubic-bezier(.23,1.02,.21,1);
}


@keyframes magicalFlipFront {
  0%   { transform: rotateY(0deg); opacity: 1;   filter: brightness(1); }
  35%  { transform: rotateY(60deg); opacity: .9; filter: brightness(1.15); }
  50%  { transform: rotateY(90deg); opacity: 0;  filter: brightness(1.25); }
  100% { transform: rotateY(90deg); opacity: 0;  filter: brightness(1); }
}

@keyframes magicalFlipBack {
  0%   { transform: rotateY(90deg); opacity: 0;  filter: brightness(.85); }
  50%  { transform: rotateY(90deg); opacity: 0;  filter: brightness(1.1); }
  65%  { transform: rotateY(60deg); opacity: .8; filter: brightness(1.2); }
  100% { transform: rotateY(0deg);  opacity: 1;  filter: brightness(1); }
}

@keyframes loreGlowPulse{
  0%   { box-shadow: 0 0 22px rgba(255, 202, 100, .55), 0 0 45px rgba(255, 202, 100, .25), 0 0 65px rgba(255, 202, 100, .15), 0 18px 38px rgba(0,0,0,.7); }
  50%  { box-shadow: 0 0 30px rgba(255, 222, 130, .8), 0 0 60px rgba(255, 222, 130, .35), 0 0 90px rgba(255, 222, 130, .22), 0 22px 45px rgba(0,0,0,.75); }
  100% { box-shadow: 0 0 22px rgba(255, 202, 100, .55), 0 0 45px rgba(255, 202, 100, .25), 0 0 65px rgba(255, 202, 100, .15), 0 18px 38px rgba(0,0,0,.7); }
}

/* ===== Ascension difficulty VFX: corruption tiers + sandstorm ===== */
#boardVP{
  position:relative;
  overflow:hidden;
}

#boardVP.asc-tier1{
  filter:saturate(1.05) contrast(1.05);
}

#boardVP.asc-tier2{
  filter:saturate(1.08) contrast(1.08) hue-rotate(-3deg);
}

#boardVP.asc-tier3{
  filter:saturate(1.12) contrast(1.12) hue-rotate(-6deg);
}

#boardVP.asc-boss{
  filter:saturate(1.18) contrast(1.18);
  animation:ascBossDrift 3.5s ease-in-out infinite;
}

/* Subtle sandstorm overlay across higher ascension tiers */
#boardVP.asc-tier2::before,
#boardVP.asc-tier3::before,
#boardVP.asc-boss::before{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background:url("assets/images/sandstorm.webp") center/cover no-repeat;
  opacity:0.16;
  mix-blend-mode:screen;
  animation:ascSandSweep 14s linear infinite;
}

/* When a boss stage also triggers normal camShake, layer both animations */
#boardVP.shake.asc-boss{
  animation:camShake 300ms linear, ascBossDrift 3.5s ease-in-out infinite;
}

@keyframes ascBossDrift{
  0%,100%{ transform:translate3d(0,0,0); }
  20%{ transform:translate3d(0.6px,-0.6px,0); }
  40%{ transform:translate3d(-0.6px,0.8px,0); }
  60%{ transform:translate3d(0.4px,0.4px,0); }
  80%{ transform:translate3d(-0.8px,-0.4px,0); }
}

@keyframes ascSandSweep{
  0%{ transform:translateX(-8%); opacity:0.08; }
  35%{ opacity:0.22; }
  100%{ transform:translateX(8%); opacity:0.08; }
}

/* ===== Mobile HUD layout polish ===== */
@media (max-width:560px){

  /* Make top + bottom HUD a bit tighter horizontally */
  #hudTop,
  #hudBottom{
    padding-left:8px;
    padding-right:8px;
    gap:6px;
  }

  /* Let stats shrink instead of forcing multi-line wrap */
  #hudTop .stat,
  #hudBottom .stat{
    min-width:0;
    flex:0 1 auto;
  }

  /* Labels + values stay on a single line */
  #hudTop .stat .label,
  #hudTop .stat strong,
  #hudBottom .stat .label,
  #hudBottom .stat strong{
    white-space:nowrap;
  }

  /* Slightly tighter padding so HUDs don’t eat vertical space */
  .center-wrap{
    padding:8px;
  }
}

/* ===== Toast notifications (win / lose / info) ===== */
#toast{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:400;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
}

body:not(.menu) #toast{
  bottom:calc(env(safe-area-inset-bottom) + 76px);
}

.toast{
  min-width:0;
  max-width:90vw;
  padding:8px 16px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  color:#fef9e6;
  background:linear-gradient(135deg, rgba(15,15,15,.95), rgba(32,24,8,.96));
  box-shadow:0 6px 18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition:opacity .22s ease-out, transform .22s ease-out;
  border:1px solid rgba(255,220,150,.35);
}

.toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Gold victory flavor */
.toast-win{
  background:radial-gradient(circle at 0 0, rgba(255,240,190,.35), transparent 55%),
             radial-gradient(circle at 100% 100%, rgba(255,205,120,.35), transparent 60%),
             linear-gradient(135deg, rgba(40,27,6,.98), rgba(75,52,10,.98));
  border-color:rgba(255,220,150,.8);
  text-shadow:0 0 8px rgba(255,210,120,.6);
}

/* Deep red failure flavor */
.toast-fail{
  background:radial-gradient(circle at 0 0, rgba(255,140,140,.35), transparent 55%),
             radial-gradient(circle at 100% 100%, rgba(130,0,0,.5), transparent 60%),
             linear-gradient(135deg, rgba(18,4,4,.98), rgba(40,6,6,.98));
  border-color:rgba(255,120,120,.8);
}

/* Neutral info (powerups, hints etc.) */
.toast-info{
  /* keep base styles but slightly softer border */
  border-color:rgba(255,220,150,.45);
}

@media (max-width:560px){
  #toast{
    bottom:10px;
  }
  body:not(.menu) #toast{
    bottom:calc(env(safe-area-inset-bottom) + 72px);
  }
  .toast{
    font-size:.8rem;
    padding:7px 13px;
  }
}

/* ===== Endscreen — victory / failure panel ===== */
#modal-end .box{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:20px 22px 18px;
  background:
    radial-gradient(circle at 0 0, rgba(255,240,190,.25), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,210,130,.22), transparent 60%),
    linear-gradient(135deg, rgba(10,7,3,.98), rgba(26,18,7,.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,220,150,.35);
}

/* Soft glyph in the background */
#modal-end .box::before{
  content:"𓊹";
  position:absolute;
  right:-8px;
  top:-22px;
  font-size:92px;
  opacity:.08;
  pointer-events:none;
}

/* Gold “victory” glow */
#modal-end .box.end-win{
  box-shadow:
    0 18px 40px rgba(0,0,0,.9),
    0 0 25px rgba(255,210,120,.35),
    0 0 0 1px rgba(255,220,150,.8);
}

/* Deep red “failure” tint */
#modal-end .box.end-fail{
  background:
    radial-gradient(circle at 0 0, rgba(255,140,140,.28), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(110,0,0,.4), transparent 60%),
    linear-gradient(135deg, rgba(8,2,2,.98), rgba(22,4,4,.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,.9),
    0 0 18px rgba(255,90,90,.25),
    0 0 0 1px rgba(255,120,120,.85);
}

/* Extra highlight on perfect & clutch */
#modal-end .box.end-perfect::before{
  opacity:.16;
}
#modal-end .box.end-clutch::before{
  opacity:.13;
}

/* Title styling */
#modal-end h2#endTitle{
  margin:0 0 10px;
  font-size:1.4rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fcecc0;
}


/* Endscreen flavor line */
#modal-end .end-flavor{
  margin:4px 0 10px;
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.9;
}

#modal-end .end-flavor.win{
  color:#ffe3a3;
  text-shadow:0 0 8px rgba(255,210,140,.5);
}

#modal-end .end-flavor.fail{
  color:#ffb0b0;
  text-shadow:0 0 6px rgba(255,90,90,.45);
}

/* Endscreen Achievement Feed */
#modal-end .end-achievements{
  margin: 10px 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.12);
}

#modal-end .end-achievements .ach-line{
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(255,215,140,0.08);
  border: 1px solid rgba(255,215,140,0.25);
  border-radius: 8px;
  font-size: .9rem;
  letter-spacing: .02em;
  color: #ffd98a;
  text-shadow: 0 0 6px rgba(255,200,140,.35);
}


/* ===== Failure sandstorm sweep ===== */
#sandstormFail{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:url("assets/images/sandstorm.webp")
             center/cover repeat;
  mix-blend-mode:screen;
  opacity:0;
  z-index:450; /* should be below modal, above game board */
  animation:sandFailSweep 1.8s ease-out forwards;
}

@keyframes sandFailSweep{
  0%{
    opacity:0;
    transform:translateX(-25%);
  }
  20%{
    opacity:0.55;
  }
  60%{
    opacity:0.4;
  }
  100%{
    opacity:0;
    transform:translateX(25%);
  }
}
/* Summary layout */
#endSummary{
  margin:8px 0 14px;
  line-height:1.6;
  font-size:.9rem;
}
#endSummary div{
  margin-bottom:2px;
}
#endSummary strong{
  color:#ffe3a3;
}

/* Bottom buttons */
#modal-end .row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}
#modal-end .row .btn{
  flex:0 0 auto;
}

/* Mobile tweaks */
@media (max-width:560px){
  #modal-end .box{
    padding:16px 14px 14px;
  }
  #modal-end h2#endTitle{
    font-size:1.15rem;
  }
  #endSummary{
    font-size:.8rem;
  }
}

/* ============================
   BOSS BATTLE — VISUAL SYSTEM
   (PART 1 OF 2)
============================ */

.bossLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* --- Boss Intro: Guardian reveal sequence --- */
#bossIntro{
  --boss-color:#e6bd57;
  --boss-bright:#ffe9a4;
  background:#010101;
  overflow:hidden;
  pointer-events:auto;
  animation:bossIntroFadeIn .24s ease both;
  isolation:isolate;
}

.toast-boss{
  max-width:min(76vw,340px);
  padding:6px 12px;
  border-radius:10px;
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.045em;
  line-height:1.2;
  text-transform:none;
  color:#fff2cf;
  background:linear-gradient(180deg,rgba(10,10,10,.94),rgba(3,3,3,.96));
  border-color:rgba(255,216,116,.58);
  box-shadow:0 5px 16px rgba(0,0,0,.72),0 0 12px rgba(212,175,55,.12);
}
body[data-boss="bastet"] .toast-boss{border-color:rgba(193,157,255,.7);color:#eee4ff}
body[data-boss="sobek"] .toast-boss{border-color:rgba(92,225,187,.7);color:#d5fff2}
#bossIntro.is-leaving{animation:bossIntroLeave .28s ease both}
@keyframes bossIntroFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bossIntroLeave{to{opacity:0;transform:scale(1.018)}}

.boss-intro-darken{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.98),rgba(0,0,0,.32) 43%,rgba(0,0,0,.96)),
    radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--boss-color) 18%,transparent),transparent 60%);
}
#bossAura{
  position:absolute;inset:-12%;z-index:1;opacity:.72;
  background:
    conic-gradient(from 180deg at 50% 42%,transparent 0 28%,color-mix(in srgb,var(--boss-color) 18%,transparent) 36%,transparent 44% 70%,color-mix(in srgb,var(--boss-color) 12%,transparent) 78%,transparent 86%),
    radial-gradient(ellipse at 50% 44%,color-mix(in srgb,var(--boss-color) 26%,transparent),transparent 57%);
  filter:blur(22px);
  animation:bossAuraPulse 2.4s ease-in-out infinite alternate both;
}
@keyframes bossAuraPulse{from{opacity:.42;transform:scale(.96) rotate(-2deg)}to{opacity:.78;transform:scale(1.04) rotate(2deg)}}

.boss-intro-stage{
  position:absolute;z-index:2;left:50%;top:3%;width:min(78vw,520px);height:64%;
  transform:translateX(-50%);opacity:0;
  animation:bossPortraitReveal .8s cubic-bezier(.18,.82,.2,1) .18s both;
}
#bossIntroPortrait{
  width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;
  transform:scale(1.24);
  filter:contrast(1.15) saturate(.82) drop-shadow(0 0 24px color-mix(in srgb,var(--boss-color) 58%,transparent));
  -webkit-mask-image:radial-gradient(ellipse 46% 48% at 50% 49%,#000 25%,rgba(0,0,0,.95) 48%,transparent 76%);
  mask-image:radial-gradient(ellipse 46% 48% at 50% 49%,#000 25%,rgba(0,0,0,.95) 48%,transparent 76%);
}
.boss-intro-ring{
  position:absolute;z-index:-1;left:50%;top:48%;width:min(76vw,410px);aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--boss-color) 55%,transparent);border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 48px color-mix(in srgb,var(--boss-color) 20%,transparent),inset 0 0 42px color-mix(in srgb,var(--boss-color) 12%,transparent);
  animation:bossRingTurn 6s linear infinite;
}
.boss-intro-ring::before,.boss-intro-ring::after{content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--boss-color) 25%,transparent)}
.boss-intro-ring::before{inset:8%}.boss-intro-ring::after{inset:18%;border-style:dashed}
@keyframes bossRingTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bossPortraitReveal{from{opacity:0;transform:translateX(-50%) scale(1.12);filter:blur(10px)}to{opacity:1;transform:translateX(-50%) scale(1);filter:blur(0)}}

.boss-intro-sigil{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(7rem,28vw,12rem);
  color:var(--boss-color);opacity:.08;text-shadow:0 0 42px var(--boss-color);mix-blend-mode:screen;
}
.boss-intro-title{
  position:absolute;z-index:4;left:6%;right:6%;top:52%;text-align:center;
  font-family:Georgia,'Times New Roman',serif;color:var(--boss-bright);text-shadow:0 2px 22px #000,0 0 20px color-mix(in srgb,var(--boss-color) 70%,transparent);
}
.boss-intro-line{
  display:block;font-size:clamp(.7rem,2.8vw,.95rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:introLineAppear .45s ease .65s both;
}
.boss-intro-name{
  display:block;margin-top:4px;font-size:clamp(2.8rem,13vw,5.8rem);line-height:.94;letter-spacing:.1em;font-weight:900;
  opacity:0;animation:introNameAppear .58s cubic-bezier(.16,.88,.2,1) .82s both;
}
@keyframes introLineAppear{from{opacity:0;transform:translateY(9px)}to{opacity:.86;transform:none}}
@keyframes introNameAppear{from{opacity:0;transform:translateY(14px) scale(.9);letter-spacing:.2em}to{opacity:1;transform:none}}

.boss-intro-rule-card{
  position:absolute;z-index:5;left:50%;bottom:max(8%,calc(env(safe-area-inset-bottom) + 62px));width:min(86vw,520px);
  transform:translate(-50%,16px);opacity:0;text-align:center;padding:10px 16px 11px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--boss-color) 58%,transparent);
  background:linear-gradient(180deg,rgba(15,15,15,.9),rgba(3,3,3,.94));
  box-shadow:0 10px 35px rgba(0,0,0,.72),0 0 22px color-mix(in srgb,var(--boss-color) 12%,transparent);
  animation:bossRuleReveal .42s ease 1.28s both;
}
.boss-intro-rule-card>span{display:block;color:var(--boss-color);font-size:.62rem;font-weight:800;letter-spacing:.2em}
.boss-intro-rule-card strong{display:block;margin-top:2px;color:#fff3d2;font-family:Georgia,serif;font-size:clamp(.92rem,3.7vw,1.2rem)}
.boss-intro-rule-card p{margin:3px 0 0;color:#d8d1c1;font-size:clamp(.72rem,3vw,.9rem);line-height:1.35}
@keyframes bossRuleReveal{to{opacity:1;transform:translate(-50%,0)}}
.boss-intro-skip{
  position:absolute;z-index:7;left:50%;bottom:max(2%,env(safe-area-inset-bottom));transform:translateX(-50%);
  min-width:190px;min-height:44px;padding:8px 18px;border:1px solid color-mix(in srgb,var(--boss-color) 68%,transparent);border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--boss-color) 22%,#161616),rgba(4,4,4,.96));
  color:#fff0c5;box-shadow:0 8px 24px rgba(0,0,0,.72),0 0 18px color-mix(in srgb,var(--boss-color) 22%,transparent);
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:0;animation:introLineAppear .35s ease 1.72s both;
}
.boss-intro-skip:not(:disabled){pointer-events:auto;animation:introLineAppear .35s ease 1.72s both,bossContinuePulse 1.8s ease-in-out 2.1s infinite}
.boss-intro-skip:disabled{cursor:default}
.boss-intro-skip:focus-visible{outline:1px solid var(--boss-color);outline-offset:2px;border-radius:999px}
@keyframes bossContinuePulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.72),0 0 12px color-mix(in srgb,var(--boss-color) 18%,transparent)}50%{box-shadow:0 8px 24px rgba(0,0,0,.72),0 0 25px color-mix(in srgb,var(--boss-color) 42%,transparent)}}

@media (orientation:landscape) and (max-height:520px){
  .boss-intro-stage{left:26%;top:0;width:50vw;height:100%}
  .boss-intro-stage #bossIntroPortrait{transform:scale(1.08);object-position:center 45%}
  body[data-boss="sobek"] .boss-intro-stage #bossIntroPortrait{transform:scale(1.14)}
  .boss-intro-title{left:48%;right:4%;top:15%;text-align:left}
  .boss-intro-name{font-size:clamp(2.2rem,8vw,4rem)}
  .boss-intro-rule-card{left:72%;bottom:13%;width:44vw;padding:8px 12px}
  .boss-intro-skip{left:72%;bottom:max(4%,env(safe-area-inset-bottom))}
}

/* --- Attack Warning Flash (Red Pulse) --- */
#bossWarning {
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 0, 0.15);
  opacity: 0;
}

#bossWarning.flash {
  animation: bossWarningFlash .3s ease;
}

@keyframes bossWarningFlash {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

/* ========================
   BOSS HEALTH BAR
========================== */

#bossHpBar {
  position: absolute;
  top: max(6px,env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(76%,520px);
  height: 18px;
  background: rgba(0,0,0,0.82);
  border: 1px solid var(--gold3, #ffd86b);
  border-radius: 999px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 40;
  pointer-events: none;
  box-shadow:
    0 0 16px rgba(0,0,0,0.9),
    0 0 12px rgba(255,220,140,0.32);
}
#bossHpBar.boss-hp-enter{animation:bossHpEnter .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes bossHpEnter{from{opacity:0;transform:translate(-50%,-10px) scaleX(.82)}to{opacity:1;transform:translateX(-50%) scaleX(1)}}
#bossHpBar.boss-hp-attack{animation:bossHpAttack .32s ease both}
@keyframes bossHpAttack{0%,100%{filter:none}45%{filter:brightness(1.75);box-shadow:0 0 24px currentColor;transform:translateX(-50%) scaleX(1.035)}}

#bossHpBar .boss-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #ffd86b, #d4af37, #a0751a);
  transition: width .3s ease;
}

#bossHpBar .boss-hp-label {
  position: absolute;
  width: 100%;
  font-size: 0.68rem;
  text-align: center;
  color: #ffe9b8;
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.boss-intent{
  position:absolute;z-index:39;top:max(29px,calc(env(safe-area-inset-top) + 28px));left:50%;transform:translateX(-50%);
  width:min(82%,560px);min-height:27px;display:grid;grid-template-columns:22px minmax(0,1fr) 34px;align-items:center;gap:6px;
  padding:4px 7px;border:1px solid rgba(255,216,107,.3);border-radius:9px;
  background:linear-gradient(180deg,rgba(9,9,9,.91),rgba(2,2,2,.94));
  box-shadow:0 6px 14px rgba(0,0,0,.52);pointer-events:none;
}
.boss-intent-glyph{color:#e6bd57;font-size:.95rem;text-align:center;line-height:1}
.boss-intent-body{display:flex;min-width:0;flex-direction:column;gap:3px}
#bossIntentLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e9dfc6;font-size:.58rem;font-weight:750;letter-spacing:.035em}
.boss-intent-track{height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)}
#bossIntentFill{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#80601d,#efd06e);transition:width .2s linear}
#bossIntentTime{color:#f4d687;font-size:.6rem;text-align:right;white-space:nowrap}
.boss-intent.warning{border-color:rgba(255,213,100,.72);box-shadow:0 6px 14px rgba(0,0,0,.52),0 0 13px rgba(226,183,73,.2)}
.boss-intent.warning #bossIntentLabel{color:#fff1bd}
.boss-intent.countered{border-color:rgba(106,225,169,.62)}
.boss-intent.countered #bossIntentFill{background:linear-gradient(90deg,#277457,#8bf0bd)}

body[data-boss="bastet"] .boss-intent{border-color:rgba(190,155,255,.4)}
body[data-boss="bastet"] .boss-intent-glyph{color:#c7a7ff}
body[data-boss="bastet"] #bossIntentFill{background:linear-gradient(90deg,#5a3b98,#c7a7ff)}
body[data-boss="sobek"] .boss-intent{border-color:rgba(92,225,187,.42)}
body[data-boss="sobek"] .boss-intent-glyph{color:#70e6c1}
body[data-boss="sobek"] #bossIntentFill{background:linear-gradient(90deg,#17634f,#70e6c1)}

.card.boss-ward-flash{animation:bossWardCardPulse .95s cubic-bezier(.2,.8,.2,1) both}
.card.boss-ward-flash .back::before{
  inset:0;opacity:1;z-index:2;
  background:
    repeating-conic-gradient(from 45deg,rgba(255,255,255,.5) 0 7deg,transparent 7deg 22deg),
    radial-gradient(circle,rgba(255,221,119,.52),transparent 68%);
  mix-blend-mode:screen;
}
body[data-boss="bastet"] .card.boss-ward-flash .back::before{background:repeating-conic-gradient(from 45deg,rgba(233,218,255,.58) 0 7deg,transparent 7deg 22deg),radial-gradient(circle,rgba(171,126,255,.58),transparent 68%)}
body[data-boss="sobek"] .card.boss-ward-flash .back::before{background:repeating-radial-gradient(ellipse,rgba(189,255,231,.64) 0 5%,transparent 6% 16%),radial-gradient(circle,rgba(64,211,168,.55),transparent 70%)}
@keyframes bossWardCardPulse{0%,100%{filter:none;transform:scale(1)}28%,72%{filter:brightness(1.7);transform:scale(1.045)}50%{filter:brightness(1.18);transform:scale(.99)}}


/* ============================
   BOSS BATTLE — VISUAL SYSTEM
   (PART 2 OF 2)
============================ */

/* --- Screen Crack Overlays --- */
/* === Boss crack overlay – use real PNG, no tints === */

/* Light hairline cracks */
#bossCracks .crack-1 {
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,0.25) 0, transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(0,0,0,0.22) 0, transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.22) 0, transparent 60%);
}

/* we only use crack-1 */
#bossCracks .crack-2,
#bossCracks .crack-3 {
  display: none;
}

/* we’ll fade these in/out via JS by toggling inline opacity + classes */


/* ============================
   BOSS DEFEAT CINEMATIC
============================ */

#bossDefeat {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boss-defeat-darken {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.2), rgba(0,0,0,0.96) 75%);
}

.boss-defeat-core {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}

.boss-defeat-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255,220,140,0.9);
  box-shadow:
    0 0 34px rgba(255,220,140,0.9),
    0 0 82px rgba(255,130,40,0.8);
  animation: bossDefeatRing 1.4s ease-out forwards;
}

.boss-defeat-flare {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6, #ffd86b, rgba(0,0,0,0));
  box-shadow:
    0 0 50px rgba(255,245,210,0.8),
    0 0 110px rgba(255,200,120,0.9);
  animation: bossDefeatFlare 1.2s ease-out forwards;
}

@keyframes bossDefeatRing {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes bossDefeatFlare {
  0% { transform: scale(0.4); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.boss-defeat-text {
  position: absolute;
  bottom: 18%;
  width: 100%;
  text-align: center;
  color: #ffe9b8;
  text-shadow:
    0 0 24px rgba(255,220,140,0.9),
    0 0 60px rgba(0,0,0,1);
  font-family: var(--font, 'Cinzel', serif);
}

.boss-defeat-line {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: bossDefeatLineIn 0.8s ease forwards 0.3s;
}

.boss-defeat-name {
  display: block;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  margin-top: 8px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffe9b8, #ffd86b, #f5c56b, #ffd86b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: bossDefeatNameIn 1s ease forwards 0.7s;
}

@keyframes bossDefeatLineIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bossDefeatNameIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}


/* ============================
   BOSS REWARD PANEL
============================ */

#bossReward {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.boss-reward-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,230,170,0.16), rgba(0,0,0,0.96) 75%);
  backdrop-filter: blur(3px);
}

.boss-reward-card {
  position: relative;
  max-width: 720px;
  width: 94%;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 0%, rgba(255,230,170,0.12), #050505 55%, #020202 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,215,130,0.6);
  box-shadow:
    0 0 22px rgba(0,0,0,0.95),
    0 0 64px rgba(0,0,0,1),
    0 0 70px rgba(255,220,140,0.35);
  padding: 18px 18px 16px;
  z-index: 1;
}

.boss-reward-card h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  color: #ffe9b8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boss-reward-sub {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #e9ddbf;
  opacity: 0.9;
}

/* Content layout: card preview + stats */
.boss-reward-content {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .boss-reward-content {
    grid-template-columns: 1fr;
  }
}

.boss-reward-cardPreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.boss-reward-cardFrame {
  position: relative;
  width: min(220px, 60vw);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  padding: 3px;
  background:
    linear-gradient(135deg, #ffd86b, #f5c56b, #b98b2e);
  box-shadow:
    0 0 26px rgba(255,220,140,0.85),
    0 14px 28px rgba(0,0,0,0.9);
}

.boss-reward-cardFrame::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(255,240,190,0.3), rgba(0,0,0,0));
  opacity: 0.6;
  pointer-events: none;
}

#bossRewardImg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  background: #050505;
}

.boss-reward-cardName {
  font-size: 0.95rem;
  color: #ffe9b8;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Reward stats on the right */
.boss-reward-stats {
  border-radius: 12px;
  border: 1px solid rgba(255,215,130,0.35);
  background: radial-gradient(circle at 0 0, rgba(255,235,180,0.18), rgba(0,0,0,0.9));
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boss-reward-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.boss-reward-row .label {
  color: #f1e0b8;
  opacity: 0.9;
}

.boss-reward-row .value {
  color: #ffd86b;
  font-weight: 600;
  text-align: right;
}
#bossRewardGrade[data-grade="S"]{color:#fff3bd;text-shadow:0 0 10px rgba(255,216,107,.75)}
#bossRewardGrade[data-grade="A"]{color:#9ff0d1}
#bossRewardGrade[data-grade="B"]{color:#b9d7ff}

.guardian-mastery-track{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.guardian-mastery-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#846020,#ffd86b,#fff0b3);
  transition:width .45s ease;
}
.boss-grade-note{color:#ad9f81;font-size:.68rem;line-height:1.3;text-align:center}

/* Action buttons row */
.boss-reward-actions {
  margin-top: 6px;
  justify-content: flex-end;
  gap: 8px;
}

.boss-reward-actions .btn.small {
  min-width: 110px;
}

@media (max-width:480px){
  .boss-reward-card{width:calc(100% - 20px);padding:14px 14px 12px}
  .boss-reward-content{grid-template-columns:minmax(118px,.82fr) minmax(0,1.18fr);gap:10px;align-items:start}
  .boss-reward-cardFrame{width:min(142px,38vw)}
  .boss-reward-cardName{font-size:.76rem;letter-spacing:.055em}
  .boss-reward-stats{padding:9px 10px;gap:7px}
  .boss-reward-row{font-size:.78rem;gap:6px;align-items:flex-start}
  .boss-reward-row .value{max-width:62%;overflow-wrap:anywhere}
  .boss-reward-actions{justify-content:stretch}
  .boss-reward-actions .btn.small{flex:1 1 0;min-width:0}
}

@media (orientation:landscape) and (max-height:520px){
  .boss-reward-card{padding:10px 14px 9px}
  .boss-reward-card h2{font-size:1.05rem;margin-bottom:3px}
  .boss-reward-sub{font-size:.75rem;line-height:1.3;margin-bottom:6px}
  .boss-reward-content{grid-template-columns:170px minmax(0,1fr);gap:12px;margin-bottom:6px;align-items:start}
  .boss-reward-cardFrame{width:126px}
  .boss-reward-cardName{font-size:.65rem;letter-spacing:.045em}
  .boss-reward-stats{padding:7px 9px;gap:4px}
  .boss-reward-row{font-size:.75rem}
  .boss-grade-note{font-size:.6rem}
  .boss-reward-actions{margin-top:2px}
}


/* Cracked glass overlay */
#bossCracks{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:55;
}

#bossCracks .crack{
  position:absolute;
  left:50%;
  top:50%;
  width:70%;
  max-width:520px;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .35s ease-out, transform .3s ease-out;
  mix-blend-mode:screen;
}

#bossCracks .crack img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 0 20px rgba(255,255,255,.9));
}

@media (max-width:560px){
  .settings-grid{grid-template-columns:1fr}
  .setting-select{grid-column:auto}
  .modal{
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }
  .journey-heading{display:block}
  .journey-progress{text-align:left;margin-top:8px}
  .journey-map{grid-template-columns:1fr 1fr;gap:8px}
  .journey-node{min-height:160px;padding:11px}
  .journey-node .chapter-glyph{font-size:1.65rem;margin:8px 0}
  .journey-node .chapter-desc{font-size:.74rem}
  .tutorial-actions{gap:7px}
  .tutorial-actions .btn{padding-left:10px;padding-right:10px}
  .gallery-toolbar{align-items:flex-start;flex-direction:column}
  .daily-rule-card{grid-template-columns:60px 1fr}
  .daily-glyph{width:54px;height:54px;font-size:1.65rem}
  .daily-kpis{grid-template-columns:1fr}
}

/* Distinct boss identities share the stable encounter layout. */
body[data-boss="anubis"] #bossIntro{--boss-color:#d8af43;--boss-bright:#ffe6a0}
body[data-boss="bastet"] #bossIntro{--boss-color:#a980ff;--boss-bright:#eadfff}
body[data-boss="sobek"] #bossIntro{--boss-color:#45d4aa;--boss-bright:#bfffe9}
body[data-boss="bastet"] #bossAura{
  background:radial-gradient(circle at 50% 42%,rgba(152,105,255,.42),rgba(4,0,12,.12) 62%,transparent 72%);
}
body[data-boss="bastet"] #bossHpBar{border-color:#c6a6ff;box-shadow:0 0 18px rgba(156,113,255,.5)}
body[data-boss="bastet"] #bossHpBar .boss-hp-fill{background:linear-gradient(to right,#dfd0ff,#9b71ee,#4d2b91)}
body[data-boss="bastet"] .boss-intro-title,
body[data-boss="bastet"] .boss-defeat-name{color:#dfd0ff;text-shadow:0 0 22px rgba(168,121,255,.85)}
body[data-boss="bastet"] .boss-intro-ring{border-radius:50%;box-shadow:-22px 0 35px rgba(180,135,255,.34),inset 14px 0 24px rgba(170,120,255,.16)}

body[data-boss="sobek"] #bossAura{
  background:repeating-radial-gradient(ellipse at 50% 62%,rgba(36,190,157,.18) 0 2%,transparent 3% 8%);
}
body[data-boss="sobek"] #bossHpBar{border-color:#65e1bc;box-shadow:0 0 18px rgba(55,208,167,.48)}
body[data-boss="sobek"] #bossHpBar .boss-hp-fill{background:linear-gradient(to right,#a6f5d8,#35b98f,#11604c)}
body[data-boss="sobek"] .boss-intro-title,
body[data-boss="sobek"] .boss-defeat-name{color:#9cf0d3;text-shadow:0 0 22px rgba(62,209,170,.82)}
body[data-boss="sobek"] #bossIntroPortrait{transform:scale(1.3);filter:contrast(1.2) saturate(.9) drop-shadow(0 0 28px rgba(69,212,170,.62))}

@media (max-height:620px){
  .boss-intro-stage{top:-6%;height:69%}
  .boss-intro-title{top:49%}
  .boss-intro-rule-card{bottom:max(9%,calc(env(safe-area-inset-bottom) + 48px))}
}

@media (max-width:390px){
  .journey-map{grid-template-columns:1fr}
  .journey-node{min-height:138px}
}

/* Short mobile landscape: keep the board large and honor both notch edges. */
@media (orientation:landscape) and (max-height:520px){
  :root{--cardRatio:1.32}

  body.menu #scene-menu .center-wrap{
    padding:
      8px
      max(8px,env(safe-area-inset-right))
      8px
      max(8px,env(safe-area-inset-left));
  }
  body.menu #scene-menu .hero{max-width:920px;width:100%;padding:10px 18px 12px}
  body.menu #scene-menu .logo{font-size:clamp(26px,4vw,34px);line-height:1.08;margin:0 0 4px}
  body.menu #scene-menu .subtitle{margin-bottom:7px}
  body.menu #scene-menu .active-title{margin:0 0 7px}
  body.menu #scene-menu .menu-grid{gap:6px 10px}
  body.menu #scene-menu .menu-grid .btn{min-height:44px;padding:8px}

  body:not(.menu) #app{
    grid-template-columns:
      calc(96px + env(safe-area-inset-left))
      minmax(0,1fr)
      calc(148px + env(safe-area-inset-right));
    grid-template-rows:minmax(0,1fr);
  }
  body:not(.menu) #hudTop{
    grid-column:1;grid-row:1;
    flex-direction:column;
    justify-content:center;
    padding:
      max(6px,env(safe-area-inset-top))
      6px
      max(6px,env(safe-area-inset-bottom))
      max(6px,env(safe-area-inset-left));
    border-right:1px solid rgba(255,215,130,.12);
    border-bottom:0;
  }
  body:not(.menu) #hudTop>div{
    width:100%;
    min-width:0;
    flex-direction:column;
    align-items:stretch!important;
  }
  body:not(.menu) #hudTop .btn,
  body:not(.menu) #hudTop .stat{width:100%;min-height:40px;padding:5px 4px}
  body:not(.menu) #hudTop #btnPause{min-height:44px}
  body:not(.menu) #levelBadge{margin-left:0;padding:3px;justify-content:center}
  body:not(.menu) #levelBadge .level-label{display:none}

  body:not(.menu) #scene-game{grid-column:2;grid-row:1}
  body:not(.menu) #scene-game .center-wrap{padding:4px}
  body:not(.menu) #boardVP{padding:4px}

  body:not(.menu) #hudBottom{
    grid-column:3;grid-row:1;
    flex-direction:column;
    justify-content:center;
    padding:
      max(6px,env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      6px;
    border-top:0;
    border-left:1px solid rgba(255,215,130,.12);
  }
  body:not(.menu) #hudBottom .stat{width:100%;min-height:40px;padding:5px 4px}
  body:not(.menu) #hudBottom .stat-pu{max-width:none;flex-direction:column;gap:4px}
  body:not(.menu) #hudBottom .stat-pu>.label{display:none}
  body:not(.menu) #hudBottom .powers{width:100%;gap:2px;justify-content:center}
  body:not(.menu) #hudBottom .pwr{width:44px;height:44px;min-width:44px;min-height:44px}
  body:not(.menu) .controller-status{
    right:calc(156px + env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));
  }

  #modal-tutorial .tutorial-box{width:min(620px,92vw);padding:12px 16px}
  #modal-tutorial .tutorial-glyph{width:64px;height:64px;margin:7px auto;font-size:2rem}
  #modal-tutorial .tutorial-text{min-height:0;margin:6px auto 8px;line-height:1.4}
  #modal-tutorial .tutorial-dots{margin:4px 0 8px}
  #modal-tutorial .tutorial-actions{margin-top:0}
}

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}

html.reduced-motion #dust,
html.reduced-motion .bg .rays,
html.reduced-motion .glyph-layer{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  #dust,.bg .rays,.glyph-layer{display:none!important}
}

/* Keep phone controls at the WCAG touch-target floor after all legacy rules. */
@media (max-width:640px){
  .btn.small,#btnPause,.pwr{min-width:44px;min-height:44px}
  .pwr{width:44px;height:44px}
}

@media (max-width:380px){
  #hudTop>div{width:100%;min-width:0;gap:4px!important}
  #hudTop .stat{flex:1 1 0;flex-direction:column;padding:3px 5px;gap:0;font-size:12px;line-height:1.05}
  #hudTop .stat .label{font-size:9px;line-height:1}
  #hudTop #levelBadge{margin-left:0;padding:3px}
}

/* v2.4 — Living Temple progression surfaces */
.resume-chamber{grid-column:1/-1;border-color:#70d6a7!important;box-shadow:0 0 18px rgba(80,210,155,.18)}
.resume-chamber[hidden]{display:none!important}
.odyssey-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin:0 0 14px;padding:13px 14px;border:1px solid rgba(117,221,183,.34);border-radius:15px;background:linear-gradient(135deg,rgba(8,47,41,.72),rgba(16,13,7,.82));box-shadow:inset 0 0 24px rgba(72,204,155,.07),0 8px 22px rgba(0,0,0,.32)}
.odyssey-copy{min-width:0}.odyssey-copy h2{margin:1px 0 3px;color:#fff0c1;font-size:1.05rem;letter-spacing:.035em}.odyssey-copy p{margin:0;color:#e2eee7;font-size:.84rem;line-height:1.4}.odyssey-copy small{display:block;margin-top:4px;color:#9fd9c3;font-size:.72rem}
.odyssey-actions{display:flex;gap:8px;align-items:stretch}.odyssey-actions .btn{white-space:nowrap;padding:9px 12px}.odyssey-primary{border-color:rgba(107,230,182,.58)!important;box-shadow:0 0 16px rgba(72,204,155,.14)}
.menu-grid .btn{position:relative}
.menu-badge{position:absolute;z-index:2;right:6px;top:5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ffd86b;color:#171006;font-size:.62rem;font-weight:900;line-height:1;box-shadow:0 0 11px rgba(255,216,107,.55)}
.path-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.path-completion{padding:8px 11px;border:1px solid rgba(104,224,171,.28);border-radius:11px;color:#b9f4dc;text-align:right;font-size:.76rem}.path-completion strong{display:block;color:#fff0bd;font-size:1rem}
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:13px 0}.path-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;padding:12px;border:1px solid rgba(255,215,130,.2);border-radius:13px;background:rgba(5,8,13,.72)}.path-glyph{grid-row:1/4;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,215,130,.26);color:#ffd86b;background:rgba(255,216,107,.05);font-size:1.25rem}.path-card h3{margin:0;color:#ffe9b8;font-size:.92rem}.path-card p{margin:0;color:#d8cfba;font-size:.76rem;line-height:1.4}.path-card small{color:#a8d9c6;font-size:.69rem}.path-card .btn{grid-column:1/-1;margin-top:5px;width:100%}
.reward-preview{margin:9px 0 2px;padding:8px 10px;border-left:3px solid rgba(255,216,107,.65);border-radius:7px;background:rgba(255,216,107,.06);color:#f3dfaa;font-size:.78rem;line-height:1.4}
.journey-node .chapter-reward{display:block;color:#9fd9c3;font-size:.7rem;line-height:1.35}
.end-recommended{border-color:rgba(104,224,171,.55)!important;box-shadow:0 0 15px rgba(70,210,155,.14)}
.daily-modifier-card{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:11px 13px;border:1px solid rgba(105,210,180,.32);border-radius:12px;background:rgba(5,45,42,.44)}
.daily-modifier-card strong{color:#9ff3d1;font-size:1rem}
.daily-modifier-card span:last-child{color:#d8eee5;font-size:.86rem;line-height:1.4}
.progression-box{width:min(780px,94vw);max-height:82vh;overflow:auto}
.progression-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.progression-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border:1px solid rgba(255,215,130,.23);border-radius:14px;background:rgba(7,12,22,.72)}
.progression-card.locked{opacity:.58}.progression-card.complete{border-color:rgba(104,224,171,.55);box-shadow:inset 0 0 20px rgba(46,166,119,.09)}
.progression-card h3,.progression-card p{margin:0}.progression-card p{color:#d9cfb7;font-size:.84rem;line-height:1.45;flex:1}.progression-card small{color:#f4d48e;line-height:1.35}
.progression-card-head{display:flex;gap:10px;align-items:center}.progression-card-head h3{color:#ffe9b8}.progression-card-head span{font-size:.78rem;color:#c8b991}.progression-glyph{font-size:2rem!important;color:#f5c56b!important}
.guardian-mastery-line{display:flex;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);font-size:.75rem;color:#d9cfb7}
.guardian-mastery-line strong{color:#ffe5a6}
.contract-progress{height:6px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.09)}.contract-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8f6830,#f0c865)}
.cosmetic-vault{margin:12px 0;padding:12px;border:1px solid rgba(255,215,130,.2);border-radius:13px;background:rgba(0,0,0,.22)}
.cosmetic-vault h3{margin:0 0 4px;color:#ffe9b8}.cosmetic-loadout{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}
.cosmetic-chip{display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px 10px;border:1px solid rgba(255,215,130,.2);border-radius:10px;color:#f6e7c3;background:rgba(19,17,23,.82);cursor:pointer}
.cosmetic-chip span{font-size:.72rem;color:#c9bea6;line-height:1.3}.cosmetic-chip small{color:#d9b75f}.cosmetic-chip.equipped{border-color:#f3ca67;box-shadow:0 0 12px rgba(236,190,75,.18)}.cosmetic-chip:disabled{opacity:.47;cursor:not-allowed}

html[data-cosmetic="obsidian"] .card .back{box-shadow:inset 0 0 0 2px #b6c1d0,0 0 13px rgba(153,172,200,.28);filter:saturate(.7) brightness(.72)}
html[data-cosmetic="solar"] .card .back{box-shadow:inset 0 0 0 2px #ffdf78,0 0 16px rgba(255,194,54,.4);filter:saturate(1.18) brightness(1.08)}
html[data-cosmetic="nile"] .card .back{box-shadow:inset 0 0 0 2px #5ad9d0,0 0 16px rgba(48,205,195,.34);filter:hue-rotate(135deg) saturate(1.15)}
html[data-cosmetic="royal"] .card .back{box-shadow:inset 0 0 0 2px #f6ce6c,0 0 18px rgba(167,89,222,.42);filter:hue-rotate(245deg) saturate(1.18)}
html[data-cosmetic="obsidian"] .active-title.unlocked{color:#dbe7f4}html[data-cosmetic="nile"] .active-title.unlocked{color:#76e4dc}html[data-cosmetic="royal"] .active-title.unlocked{color:#e6b8ff}
html[data-cosmetic]:not([data-cosmetic="classic"]) body.menu .hero::after{content:'𓍷';position:absolute;right:18px;bottom:10px;font-size:3.2rem;color:#f2ca69;opacity:.11;pointer-events:none}
html[data-cosmetic="solar"] body.menu .hero::after{content:'𓇳'}html[data-cosmetic="nile"] body.menu .hero::after{content:'𓈗';color:#62ded5}html[data-cosmetic="obsidian"] body.menu .hero::after{content:'𓂀';color:#d5e2ef}

@media (max-width:700px){.progression-grid{grid-template-columns:1fr}.progression-card{padding:12px}.cosmetic-loadout{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.odyssey-card{grid-template-columns:1fr;padding:11px 12px;gap:9px}.odyssey-actions{display:grid;grid-template-columns:1fr 1fr}.odyssey-actions .btn{white-space:normal}.path-grid{grid-template-columns:1fr}.path-heading{align-items:center}.path-box{max-height:90dvh}}
@media (orientation:landscape) and (max-height:520px){body.menu .odyssey-card{grid-template-columns:minmax(0,1fr) auto;margin-bottom:7px;padding:8px 10px}.odyssey-copy p{font-size:.74rem}.odyssey-copy small{display:none}.odyssey-actions{display:flex}.path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cosmetic-loadout{grid-template-columns:1fr}}

/* Portrait HUD: three stable zones with relics as the visual center. */
@media (orientation:portrait) and (max-width:560px){
  body:not(.menu) #hudBottom{
    display:grid;
    grid-template-columns:68px minmax(0,1fr) 94px;
    align-items:center;
    gap:4px;
    padding:6px 6px calc(env(safe-area-inset-bottom) + 8px);
  }
  body:not(.menu) #hudBottom>.stat{
    width:100%;
    min-width:0;
    min-height:60px;
    margin:0;
    padding:5px 4px;
    border-radius:12px;
  }
  body:not(.menu) #hudBottom>[data-k="score"],
  body:not(.menu) #hudBottom>[data-k="stars"]{
    flex-direction:column;
    gap:2px;
    background:linear-gradient(180deg,rgba(22,22,22,.92),rgba(7,7,7,.96));
  }
  body:not(.menu) #hudBottom>[data-k="score"] .label,
  body:not(.menu) #hudBottom>[data-k="stars"] .label{
    font-size:.62rem;
    line-height:1;
    letter-spacing:.04em;
  }
  body:not(.menu) #hudBottom>[data-k="score"] strong{font-size:1rem;line-height:1}
  body:not(.menu) #hudBottom>[data-k="stars"] .stars{gap:2px;justify-content:center}
  body:not(.menu) #hudBottom>[data-k="stars"] .star{width:13px;height:13px}
  body:not(.menu) #hudBottom .stat-pu{
    max-width:none;
    min-height:60px;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:2px 0;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }
  body:not(.menu) #hudBottom .powers{
    display:grid;
    grid-template-columns:repeat(3,42px);
    justify-content:center;
    gap:5px;
  }
  body:not(.menu) #hudBottom .pwr{width:42px;height:42px;min-width:42px;min-height:42px}
  body:not(.menu) #hudBottom .passive-relics{min-height:0;margin:1px 0 0;gap:3px}
  body:not(.menu) #hudBottom .passive-relics:empty{display:none}
  body:not(.menu) #hudBottom .passive-chip{height:15px;min-width:18px;padding:0 4px;font-size:.56rem}
}

@media (orientation:portrait) and (max-width:370px){
  body:not(.menu) #hudBottom{grid-template-columns:62px minmax(0,1fr) 86px}
  body:not(.menu) #hudBottom .powers{grid-template-columns:repeat(3,38px);gap:3px}
  body:not(.menu) #hudBottom .pwr{width:38px;height:38px;min-width:38px;min-height:38px}
}

@media (orientation:landscape) and (max-height:520px){
  .boss-intro-skip{min-width:170px;min-height:34px;padding:4px 12px;bottom:max(1%,env(safe-area-inset-bottom))}
}

/* ===== v2.9 Chamber Mastery ===== */
.briefing-box{width:min(560px,calc(100vw - 24px));max-height:min(88dvh,720px);overflow:auto;padding:20px}
.briefing-heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center;margin-bottom:13px}
.briefing-heading h2{margin:0;color:#fff0bd;font-size:1.32rem}.briefing-heading p{margin:3px 0 0;line-height:1.4}
.briefing-glyph{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,218,125,.42);border-radius:50%;background:radial-gradient(circle,rgba(255,217,113,.13),rgba(6,8,9,.72));color:#ffd86b;font-size:1.8rem;box-shadow:0 0 19px rgba(255,205,85,.12)}
.briefing-rules{display:grid;gap:7px;margin:10px 0 13px}.briefing-rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;padding:9px 10px;border:1px solid rgba(255,218,130,.17);border-radius:10px;background:rgba(7,9,10,.66);color:#e8dfca;font-size:.82rem;line-height:1.42}.briefing-rule span{color:#72dfb4;font-weight:900}
.briefing-objective{display:flex;justify-content:space-between;gap:14px;padding:10px 11px;border-left:3px solid rgba(255,216,107,.64);border-radius:8px;background:rgba(255,216,107,.055);font-size:.76rem;line-height:1.4}.briefing-objective span{color:#cbbd98;letter-spacing:.1em}.briefing-objective strong{color:#ffe9aa;text-align:right}.briefing-continue{width:100%;margin-top:14px;min-height:46px}
.pause-intel{display:grid;gap:8px;margin:8px 0 14px;padding:11px;border:1px solid rgba(255,216,130,.2);border-radius:12px;background:rgba(3,6,8,.68);font-size:.78rem;line-height:1.42}.pause-intel h3{margin:0;color:#ffe7aa;font-size:.95rem}.pause-intel p{margin:0;color:#ddd3bc}.pause-intel strong{color:#aee9d0}.pause-warning{padding-top:7px;border-top:1px solid rgba(255,255,255,.09);color:#d8c697!important}
.performance-review{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0}.performance-kpi{padding:8px 9px;border:1px solid rgba(255,220,145,.18);border-radius:10px;background:rgba(5,7,9,.58);min-width:0}.performance-kpi span{display:block;color:#bfb59e;font-size:.65rem;text-transform:uppercase;letter-spacing:.07em}.performance-kpi strong{display:block;margin-top:2px;color:#ffe3a3;font-size:.92rem;overflow-wrap:anywhere}.performance-kpi small{display:block;margin-top:2px;color:#8fd8ba;font-size:.64rem}.performance-mastery,.performance-daily{grid-column:1/-1;display:grid;gap:3px;padding:8px 10px;border-radius:9px;background:rgba(255,215,117,.055);font-size:.72rem;line-height:1.4}.performance-mastery span,.performance-daily span{color:#c3b797;text-transform:uppercase;letter-spacing:.07em;font-size:.63rem}.performance-mastery strong,.performance-daily strong{color:#dfebdf;font-weight:650}.performance-daily{background:rgba(86,204,161,.07)}.performance-tip{margin:8px 0 10px;padding:9px 11px;border-left:3px solid #6fd5ad;border-radius:8px;background:rgba(61,198,144,.07);color:#dcebe5;font-size:.78rem;line-height:1.4}.performance-tip:empty,.performance-review:empty{display:none}
.daily-comparison{margin:8px 0;padding:8px 10px;border:1px solid rgba(114,222,180,.2);border-radius:9px;background:rgba(51,169,130,.06);color:#bcebd8;font-size:.74rem;line-height:1.4}.daily-comparison:empty{display:none}
.mastery-next{display:block;margin-top:5px;color:#a9dbc7;font-size:.68rem;line-height:1.35}
[data-k="combo"]{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}[data-k="combo"].combo-warm{border-color:rgba(255,214,101,.42);box-shadow:0 0 12px rgba(255,192,64,.12)}[data-k="combo"].combo-hot{border-color:rgba(255,168,74,.66);box-shadow:0 0 17px rgba(255,138,53,.23)}[data-k="combo"].combo-eternal{border-color:#ffe07a;box-shadow:0 0 21px rgba(255,211,89,.38);transform:translateY(-1px)}
.pop.combo-milestone{font-size:clamp(1.05rem,4.8vw,1.55rem);color:#fff1a7;text-shadow:0 0 12px rgba(255,193,54,.7)}
.boss-rule-status{display:block;color:#a9dbc7;font-size:.53rem;line-height:1.2;white-space:normal}.boss-intent.warning .boss-rule-status{color:#ffd994}
#modal-end .box{max-height:90dvh;overflow-x:hidden;overflow-y:auto}#modal-pause .box{max-height:90dvh;overflow:auto}

@media (max-width:560px){
  .briefing-box{padding:15px 13px}.briefing-glyph{width:48px;height:48px;font-size:1.5rem}.briefing-heading h2{font-size:1.1rem}.briefing-rule{font-size:.76rem}
  .briefing-objective{display:grid;gap:4px}.briefing-objective strong{text-align:left}
  .performance-review{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-kpi:last-child:nth-child(odd){grid-column:1/-1}
  #modal-end .row{flex-wrap:wrap}.pause-intel{font-size:.73rem}
}
@media (max-width:340px){
  body.menu #scene-menu .hero h1{font-size:clamp(1.35rem,8vw,1.72rem)}
  body.menu #scene-menu .hero{padding:12px 10px}
  body.menu #scene-menu .menu-grid{gap:6px}
  body.menu #scene-menu .menu-grid .btn{min-height:42px;padding:7px 5px;font-size:.64rem;letter-spacing:0}
  .odyssey-card{padding:9px 10px}.odyssey-copy h2{font-size:.94rem}.odyssey-copy p{font-size:.75rem}.odyssey-actions .btn{padding:8px 6px;font-size:.72rem}
  .performance-review{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-kpi:last-child:nth-child(odd){grid-column:auto}
  .path-heading{align-items:flex-start}.path-completion{font-size:.66rem;padding:6px 8px}
}
@media (orientation:landscape) and (max-height:520px){
  .briefing-box{max-height:94dvh;padding:10px 14px}.briefing-heading{margin-bottom:7px}.briefing-glyph{width:42px;height:42px;font-size:1.35rem}.briefing-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}.briefing-rule{padding:6px 8px;font-size:.68rem}.briefing-objective{padding:7px 9px}.briefing-continue{min-height:36px;margin-top:7px}
  #modal-pause .box{max-height:94dvh;overflow:auto}.pause-intel{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}.pause-warning{grid-column:1/-1}
  #modal-end .box{max-height:94dvh;overflow:auto}.performance-review{grid-template-columns:repeat(3,minmax(0,1fr));margin:5px 0}.performance-tip{margin:5px 0;padding:6px 9px}
}
@media (prefers-contrast:more){.briefing-rule,.performance-kpi,.pause-intel,.daily-comparison{border-color:currentColor}.performance-tip{background:#08110e}.boss-intent{border-color:#fff}}
.reduced-motion [data-k="combo"]{transition:none!important}.reduced-motion .pop.combo-milestone{animation:none!important}

/* ===== v3.0 Ascension Reforged ===== */
.ascension-run-hud{
  position:absolute;
  z-index:8;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(92%,720px);
  min-height:38px;
  padding:7px 12px;
  display:grid;
  grid-template-columns:auto minmax(56px,auto) minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid rgba(236,198,89,.52);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(9,10,8,.94),rgba(31,25,12,.92),rgba(9,10,8,.94));
  box-shadow:0 8px 24px rgba(0,0,0,.36),inset 0 0 22px rgba(212,175,55,.08);
  color:#f5e7b1;
  pointer-events:none;
}
.ascension-run-hud.hidden{display:none!important}
.ascension-run-hud span{font-size:.68rem;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.ascension-run-hud strong{font-size:.92rem;color:#ffd973;text-align:center}
#ascensionHudBlessings{overflow:hidden;text-overflow:ellipsis;text-align:right;color:#d8cda6}
body[data-boss] .ascension-run-hud{display:none!important}

.ascension-route-box{
  width:min(960px,94vw);
  max-width:960px!important;
  max-height:92dvh;
  overflow:auto;
  padding:clamp(16px,3vw,28px);
}
.ascension-route-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.ascension-route-heading h2{margin:.12em 0 .2em}
.ascension-route-heading p{margin:.25em 0}
.ascension-route-score{
  flex:0 0 auto;
  min-width:116px;
  padding:10px 14px;
  border:1px solid rgba(236,198,89,.4);
  border-radius:14px;
  background:rgba(4,6,5,.58);
  text-align:center;
  color:#cabf9a;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ascension-route-score strong{display:block;margin-top:2px;color:#ffd973;font-size:1.18rem;letter-spacing:0}
.ascension-route-map{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
}
.ascension-route-map::before{
  content:"";
  position:absolute;
  top:18px;
  left:9%;
  right:9%;
  height:2px;
  background:linear-gradient(90deg,rgba(236,198,89,.8),rgba(236,198,89,.18));
}
.ascension-map-node{position:relative;z-index:1;text-align:center;color:#8f896f;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}
.ascension-map-node i{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:0 auto 5px;
  border:1px solid rgba(236,198,89,.28);
  border-radius:50%;
  background:#0b0c09;
  color:#847c61;
  font-style:normal;
  font-weight:800;
}
.ascension-map-node.complete i{background:#5c4816;color:#ffe8a0;border-color:#f1cb62}
.ascension-map-node.current{color:#ffe4a0}
.ascension-map-node.current i{background:#c69d35;color:#090a08;border-color:#fff0b5;box-shadow:0 0 20px rgba(236,198,89,.42)}
.ascension-choice-section{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(236,198,89,.22);
  border-radius:16px;
  background:rgba(2,4,3,.34);
}
.ascension-choice-section.hidden{display:none!important}
.ascension-section-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.ascension-section-heading>span{
  display:grid;
  place-items:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#cba63d;
  color:#090a08;
  font-weight:900;
}
.ascension-section-heading h3{margin:0;color:#f4dfa0;font-size:1rem}
.ascension-section-heading p{margin:2px 0 0;color:#a9a38d;font-size:.75rem}
.ascension-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ascension-choice-card{
  width:100%;
  min-height:118px;
  padding:13px;
  border:1px solid rgba(236,198,89,.28);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(22,24,18,.96),rgba(7,9,7,.96));
  color:#e8dfc3;
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}
.ascension-choice-card:hover,.ascension-choice-card:focus-visible{border-color:#ebc85e;transform:translateY(-1px)}
.ascension-choice-card.selected{border-color:#ffe07b;background:linear-gradient(145deg,rgba(75,59,17,.92),rgba(15,17,11,.98));box-shadow:0 0 0 2px rgba(236,198,89,.15),0 0 24px rgba(236,198,89,.13)}
.ascension-choice-card .choice-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ascension-choice-card h4{margin:0;color:#fff0b7;font-size:.98rem}
.ascension-choice-card .choice-glyph{font-size:1.3rem;color:#ffd973}
.ascension-choice-card p{margin:6px 0;color:#bdb69d;font-size:.75rem;line-height:1.4}
.ascension-choice-card .choice-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ascension-choice-card .choice-stats span{
  padding:4px 7px;
  border:1px solid rgba(236,198,89,.24);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  color:#e4d7ab;
  font-size:.65rem;
}
.ascension-choice-card .risk-bonus{color:#ffdd70!important;border-color:rgba(255,221,112,.52)!important}
.ascension-integrity{margin:12px 2px;color:#9f9a85;font-size:.7rem;text-align:center}
.ascension-route-actions{justify-content:space-between;gap:10px}
.ascension-route-actions .btn{min-width:min(100%,210px)}
.performance-ascension{grid-column:1/-1;padding:10px 12px;border:1px solid rgba(236,198,89,.28);border-radius:12px;background:rgba(40,31,8,.3)}
.performance-ascension span{display:block;color:#cabf9a;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em}
.performance-ascension strong{display:block;margin-top:3px;color:#f5e6b0;font-size:.78rem;line-height:1.45}

@media (max-width:640px){
  .ascension-run-hud{top:6px;width:calc(100% - 16px);min-height:34px;padding:5px 8px;gap:6px;grid-template-columns:auto auto minmax(0,1fr)}
  .ascension-run-hud span{font-size:.56rem;letter-spacing:.04em}
  .ascension-run-hud strong{font-size:.78rem}
  .ascension-route-box{width:96vw;max-height:94dvh;padding:14px 12px}
  .ascension-route-heading{gap:8px}
  .ascension-route-score{min-width:84px;padding:8px;font-size:.58rem}
  .ascension-route-score strong{font-size:.9rem}
  .ascension-route-map{margin:12px 0}
  .ascension-map-node{font-size:.55rem}
  .ascension-map-node i{width:30px;height:30px}
  .ascension-route-map::before{top:15px}
  .ascension-choice-section{padding:10px;margin:9px 0}
  .ascension-choice-grid{grid-template-columns:1fr;gap:8px}
  .ascension-choice-card{min-height:0;padding:10px}
  .ascension-route-actions{display:grid;grid-template-columns:1fr}
  .ascension-route-actions .btn{width:100%;min-width:0}
}
@media (orientation:landscape) and (max-height:520px){
  .ascension-route-box{max-height:95dvh;padding:10px 14px}
  .ascension-route-heading h2{font-size:1.12rem}
  .ascension-route-heading p,.ascension-integrity{font-size:.62rem}
  .ascension-route-map{margin:6px 0 9px}
  .ascension-map-node i{width:27px;height:27px;margin-bottom:2px}
  .ascension-route-map::before{top:13px}
  .ascension-choice-section{padding:7px;margin:6px 0}
  .ascension-section-heading{margin-bottom:6px}.ascension-section-heading>span{width:22px;height:22px;flex-basis:22px}
  .ascension-section-heading h3{font-size:.82rem}.ascension-section-heading p{font-size:.6rem}
  .ascension-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .ascension-choice-card{padding:7px;min-height:0}
  .ascension-choice-card h4{font-size:.78rem}.ascension-choice-card p{font-size:.61rem;margin:3px 0}.ascension-choice-card .choice-stats{margin-top:4px}.ascension-choice-card .choice-stats span{font-size:.55rem;padding:2px 5px}
  .ascension-route-actions{display:flex}.ascension-route-actions .btn{min-height:34px;padding:6px 10px}
}

/* ===== v3.1 Temple Awakening =====
   Deity-authored geometry and atmosphere; never participates in layout/input. */
.temple-fx-layer{
  position:fixed;
  inset:0;
  z-index:1200;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  isolation:isolate;
}

.temple-match-signature{
  position:absolute;
  inset:0;
  color:var(--temple-main);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 9px rgba(var(--temple-rgb),.5));
  animation:templeSignatureFade .82s cubic-bezier(.2,.75,.2,1) both;
}
.temple-match-signature svg{width:100%;height:100%;overflow:visible}
.temple-thread{
  fill:none;
  stroke:var(--temple-main);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:7 8;
  vector-effect:non-scaling-stroke;
  animation:templeThreadDraw .66s ease-out both;
}
.temple-seal{transform-box:fill-box;transform-origin:center;animation:templeSealTurn .72s cubic-bezier(.16,.8,.22,1) both}
.temple-seal-orbit,.temple-seal-diamond{
  fill:rgba(var(--temple-rgb),.055);
  stroke:var(--temple-bright);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.temple-seal-orbit{stroke-dasharray:3 5}
.temple-seal-core{fill:var(--temple-bright);filter:drop-shadow(0 0 8px var(--temple-main))}
.temple-seal-ray{stroke:var(--temple-main);stroke-width:1;stroke-linecap:round}
.temple-match-signature.is-milestone .temple-seal{
  filter:drop-shadow(0 0 14px var(--temple-main));
}
.temple-match-signature.is-milestone .temple-seal-diamond{stroke-width:2}
@keyframes templeSignatureFade{0%{opacity:0}14%,58%{opacity:1}100%{opacity:0}}
@keyframes templeThreadDraw{from{stroke-dashoffset:48;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes templeSealTurn{from{opacity:0;transform:scale(.45) rotate(-30deg)}45%{opacity:1}to{opacity:0;transform:scale(1.18) rotate(18deg)}}

.temple-card-scan{
  position:absolute;
  inset:2px;
  z-index:8;
  border-radius:10px;
  pointer-events:none;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(var(--temple-rgb),.7);
  animation:templeCardEdge .5s ease-out both;
}
.temple-card-scan::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:-3px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--temple-bright),transparent);
  box-shadow:0 0 9px var(--temple-main);
  animation:templeCardScan .46s cubic-bezier(.18,.65,.3,1) both;
}
@keyframes templeCardEdge{0%{opacity:0}22%{opacity:.95}100%{opacity:0}}
@keyframes templeCardScan{from{transform:translateY(0)}to{transform:translateY(calc(var(--cardSize) * var(--cardRatio) - 3px))}}

#boardVP.temple-recoil{animation:templeRecoil .32s cubic-bezier(.3,.02,.7,1)}
#boardVP.temple-guarded{animation:templeGuardField .58s ease-out}
.card.temple-card-recoil{filter:saturate(.55) brightness(.72)}
.card.temple-card-guarded{box-shadow:0 0 0 1px #f6e4a1,0 0 18px rgba(246,228,161,.45)}
@keyframes templeRecoil{
  0%,100%{filter:none}
  35%{filter:saturate(.75) brightness(.82);transform:translateX(-1px)}
  60%{transform:translateX(1px)}
}
@keyframes templeGuardField{
  0%{box-shadow:inset 0 0 0 rgba(246,228,161,0)}
  35%{box-shadow:inset 0 0 34px rgba(246,228,161,.18)}
  100%{box-shadow:inset 0 0 0 rgba(246,228,161,0)}
}

#boardVP[data-combo-tier]{
  transition:box-shadow .35s ease;
  box-shadow:inset 0 0 0 1px rgba(225,187,87,calc(var(--combo-strength) * .22));
}
#boardVP[data-combo-tier="hot"]{box-shadow:inset 0 0 0 1px rgba(237,194,82,.3),inset 0 0 34px rgba(195,126,30,.055)}
#boardVP[data-combo-tier="eternal"]{box-shadow:inset 0 0 0 1px rgba(255,226,138,.43),inset 0 0 42px rgba(216,168,54,.09)}
.pop.combo-milestone{
  top:15%;
  max-width:min(82vw,420px);
  padding:.38rem 1.25rem;
  border-radius:0;
  border-color:rgba(255,224,139,.5);
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
  background:linear-gradient(90deg,rgba(3,4,3,.15),rgba(28,22,9,.9) 18% 82%,rgba(3,4,3,.15));
  font-family:Georgia,serif;
  font-size:clamp(.86rem,3.6vw,1.18rem);
  letter-spacing:.1em;
  text-align:center;
  white-space:nowrap;
}

.temple-relic-fx{position:absolute;inset:0;display:grid;place-items:center;mix-blend-mode:screen}
.temple-relic-field{position:relative;width:min(74vw,620px);height:min(32vh,240px);display:flex;align-items:center;justify-content:center;gap:20px}
.temple-relic-field b{
  display:grid;
  place-items:center;
  width:84px;
  aspect-ratio:1;
  border:1px solid var(--temple-main);
  color:var(--temple-bright);
  font:normal 2.8rem/1 serif;
  clip-path:polygon(50% 0,92% 25%,92% 75%,50% 100%,8% 75%,8% 25%);
  background:rgba(var(--temple-rgb),.08);
  text-shadow:0 0 18px var(--temple-main);
  animation:templeRelicGlyph .82s ease-out both;
}
.temple-relic-field i{display:block;width:34%;height:1px;background:linear-gradient(90deg,transparent,var(--temple-main))}
.temple-relic-field i:last-child{transform:scaleX(-1)}
.temple-relic-hint .temple-relic-field{width:min(88vw,760px)}
.temple-relic-hint .temple-relic-field::after{
  content:"";
  position:absolute;
  inset:35% 3%;
  border:1px solid var(--temple-main);
  border-radius:50% 0;
  transform:rotate(45deg);
  animation:templeEyeOpen .75s ease-out both;
}
.temple-relic-time .temple-relic-field b{border-radius:50%;clip-path:none}
.temple-relic-time .temple-relic-field::before{
  content:"";position:absolute;width:132px;aspect-ratio:1;border:1px dashed var(--temple-main);border-radius:50%;
  animation:templeOrbit .85s cubic-bezier(.2,.7,.2,1) both;
}
.temple-relic-reveal .temple-relic-field{height:min(58vh,460px)}
.temple-relic-reveal .temple-relic-field::before{
  content:"";position:absolute;inset:-60% -35%;
  background:
    linear-gradient(30deg,transparent 49.7%,rgba(var(--temple-rgb),.22) 50%,transparent 50.3%),
    linear-gradient(-30deg,transparent 49.7%,rgba(var(--temple-rgb),.18) 50%,transparent 50.3%),
    repeating-linear-gradient(90deg,transparent 0 13%,rgba(var(--temple-rgb),.12) 13.2%,transparent 13.4% 25%);
  mask-image:radial-gradient(ellipse,#000 18%,transparent 69%);
  animation:templeLattice 1.15s ease-out both;
}
@keyframes templeRelicGlyph{0%{opacity:0;transform:scale(.72)}35%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
@keyframes templeEyeOpen{0%{opacity:0;transform:rotate(45deg) scaleX(.2)}38%{opacity:.8;transform:rotate(45deg) scaleX(1)}100%{opacity:0;transform:rotate(45deg) scaleX(1.15)}}
@keyframes templeOrbit{from{opacity:0;transform:rotate(-80deg) scale(.7)}40%{opacity:.85}to{opacity:0;transform:rotate(65deg) scale(1.08)}}
@keyframes templeLattice{0%{opacity:0;transform:translateY(12%)}35%{opacity:.9}100%{opacity:0;transform:translateY(-12%)}}

.temple-blessing-seal{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:inherit;
  color:var(--temple-bright);
  background:linear-gradient(90deg,rgba(3,4,4,.96),rgba(var(--temple-rgb),.2),rgba(3,4,4,.96));
  animation:templeBlessingBind 1.05s cubic-bezier(.2,.7,.2,1) both;
  pointer-events:none;
}
.ascension-choice-card{position:relative;overflow:hidden}
.temple-blessing-seal i{height:1px;background:linear-gradient(90deg,transparent,var(--temple-main))}
.temple-blessing-seal i:first-child{transform:scaleX(-1)}
.temple-blessing-seal b{font:normal 2rem/1 serif;text-shadow:0 0 13px var(--temple-main)}
.temple-blessing-seal small{position:absolute;left:0;right:0;bottom:12%;font-size:.5rem;letter-spacing:.18em;text-align:center}
@keyframes templeBlessingBind{0%{opacity:0;clip-path:inset(48% 0)}25%,68%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}

.temple-route-transition{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  color:var(--temple-bright);
  background:
    linear-gradient(112deg,transparent 0 31%,rgba(var(--temple-rgb),.08) 31.2% 31.5%,transparent 31.7%),
    linear-gradient(68deg,transparent 0 68%,rgba(var(--temple-rgb),.07) 68.2% 68.5%,transparent 68.7%),
    rgba(2,3,3,.97);
  animation:templeRouteArrival var(--route-duration,.76s) cubic-bezier(.2,.68,.2,1) both;
}
.temple-route-transition::before,.temple-route-transition::after{
  content:"";position:absolute;top:50%;height:1px;width:38vw;max-width:440px;background:linear-gradient(90deg,transparent,var(--temple-main));
}
.temple-route-transition::before{right:calc(50% + 62px)}
.temple-route-transition::after{left:calc(50% + 62px);transform:scaleX(-1)}
.temple-route-glyph{
  display:grid;place-items:center;width:96px;aspect-ratio:1;
  border:1px solid rgba(var(--temple-rgb),.8);
  color:var(--temple-bright);font:normal 3rem/1 serif;
  clip-path:polygon(50% 0,88% 22%,100% 64%,72% 100%,28% 100%,0 64%,12% 22%);
  background:rgba(var(--temple-rgb),.075);
  text-shadow:0 0 20px var(--temple-main);
  animation:templeRouteGlyph .76s ease-out both;
}
.temple-route-name{font-size:clamp(.72rem,2vw,1rem);letter-spacing:.32em;text-transform:uppercase;text-align:center}
.temple-route-line{width:132px;height:1px;background:linear-gradient(90deg,transparent,var(--temple-main),transparent)}
@keyframes templeRouteArrival{0%{opacity:0}18%,76%{opacity:1}100%{opacity:0}}
@keyframes templeRouteGlyph{from{opacity:0;transform:scale(.7) rotate(-9deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.temple-victory-seal{position:absolute;inset:0;display:grid;place-items:center;mix-blend-mode:screen;animation:templeVictoryFade 1.45s ease-out both}
.temple-victory-seal svg{width:min(76vw,520px);height:min(76vh,520px);filter:drop-shadow(0 0 15px rgba(var(--temple-rgb),.42))}
.victory-orbit,.victory-cartouche,.victory-ray{fill:none;stroke:var(--temple-main);vector-effect:non-scaling-stroke}
.victory-orbit{stroke-width:1;stroke-dasharray:4 7;transform-origin:center}
.victory-orbit.outer{animation:templeVictoryOrbit 1.35s cubic-bezier(.17,.7,.2,1) both}
.victory-orbit.inner{stroke:var(--temple-bright);animation:templeVictoryOrbitReverse 1.35s cubic-bezier(.17,.7,.2,1) both}
.victory-cartouche{fill:rgba(var(--temple-rgb),.05);stroke-width:1.5;transform-origin:center;animation:templeVictoryCore 1.2s ease-out both}
.victory-ray{stroke-width:1;stroke-linecap:round;animation:templeVictoryRay .9s .18s ease-out both}
.temple-victory-seal.is-perfect svg{filter:drop-shadow(0 0 23px rgba(var(--temple-rgb),.6))}
@keyframes templeVictoryFade{0%{opacity:0}18%,67%{opacity:1}100%{opacity:0}}
@keyframes templeVictoryOrbit{from{transform:rotate(-35deg) scale(.62)}to{transform:rotate(22deg) scale(1.08)}}
@keyframes templeVictoryOrbitReverse{from{transform:rotate(30deg) scale(.75)}to{transform:rotate(-18deg) scale(1)}}
@keyframes templeVictoryCore{0%{opacity:0;transform:scale(.45)}38%{opacity:1}100%{opacity:.2;transform:scale(1.08)}}
@keyframes templeVictoryRay{from{opacity:0;stroke-dasharray:0 80}to{opacity:1;stroke-dasharray:80 0}}

.temple-failure-dissolve{position:absolute;inset:0;display:flex;justify-content:center;gap:15vw;background:linear-gradient(180deg,transparent,rgba(45,28,8,.12),transparent)}
.temple-failure-dissolve i{width:1px;height:120%;background:linear-gradient(transparent,var(--temple-main),transparent);transform:rotate(12deg);animation:templeDissolve .78s ease-in both}
.temple-failure-dissolve i:nth-child(2){animation-delay:.07s;transform:rotate(-8deg)}.temple-failure-dissolve i:nth-child(3){animation-delay:.13s;transform:rotate(5deg)}
@keyframes templeDissolve{from{opacity:0;translate:0 -12%}35%{opacity:.45}to{opacity:0;translate:0 18%}}

/* Affinity atmosphere replaces the old stock sandstorm overlay. */
#boardVP[data-affinity]::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:3;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:screen;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(var(--affinity-rgb),.11) 0 1deg,transparent 1.4deg 22.5deg),
    radial-gradient(ellipse at 50% 54%,transparent 35%,rgba(var(--affinity-rgb),.13) 68%,transparent 76%);
  mask-image:radial-gradient(ellipse at center,transparent 24%,#000 52%,transparent 83%);
  animation:templeAtmosphere 18s linear infinite;
}
#boardVP[data-affinity="solar"]{--affinity-rgb:232,185,78}
#boardVP[data-affinity="moon"]{--affinity-rgb:174,138,255}
#boardVP[data-affinity="river"]{--affinity-rgb:72,210,170}
#boardVP[data-affinity="judgment"]{--affinity-rgb:212,168,63}
#boardVP[data-affinity="scarab"]{--affinity-rgb:157,180,106}
#boardVP[data-affinity="royal"]{--affinity-rgb:213,173,89}
#boardVP.asc-tier2::before,#boardVP.asc-tier3::before,#boardVP.asc-boss::before{background-image:none}
@keyframes templeAtmosphere{from{transform:rotate(0deg) scale(1.04)}to{transform:rotate(360deg) scale(1.04)}}

#boardVP[data-guardian-affinity]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:calc(var(--guardian-pressure,0) * .34);
  box-shadow:inset 0 0 54px rgba(var(--guardian-rgb),.62),inset 0 0 0 1px rgba(var(--guardian-rgb),.7);
  background:repeating-linear-gradient(118deg,transparent 0 11%,rgba(var(--guardian-rgb),.09) 11.2%,transparent 11.5% 22%);
  mask-image:radial-gradient(ellipse at center,transparent 34%,#000 83%);
  transition:opacity .45s ease;
}
#boardVP[data-guardian-affinity="judgment"]{--guardian-rgb:212,168,63}
#boardVP[data-guardian-affinity="moon"]{--guardian-rgb:174,138,255}
#boardVP[data-guardian-affinity="river"]{--guardian-rgb:72,210,170}

html[data-vfx="low"] #boardVP[data-affinity]::before{display:none}
html[data-vfx="low"] .temple-match-signature .temple-seal-ray,
html[data-vfx="low"] .temple-relic-fx::before{display:none}
html.reduced-motion .temple-fx-layer{display:none!important}
html.reduced-motion #boardVP[data-affinity]::before,
html.reduced-motion #boardVP[data-guardian-affinity]::after{animation:none!important}

@media (max-width:640px){
  .temple-route-glyph{width:76px;font-size:2.35rem}
  .temple-route-name{max-width:82vw;font-size:.67rem;letter-spacing:.22em}
  .temple-relic-field{width:88vw}
  .temple-relic-field b{width:68px;font-size:2.15rem}
  #boardVP[data-affinity]::before{opacity:.15}
  #boardVP[data-guardian-affinity]::after{box-shadow:inset 0 0 34px rgba(var(--guardian-rgb),.52),inset 0 0 0 1px rgba(var(--guardian-rgb),.58)}
}

/* ===== v3.2 Living Temples ===== */
.temple-chamber-environment{
  --environment-rgb:213,173,89;
  --environment-bright:#f3d58c;
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:calc(.48 + var(--chamber-awake,0) * .18);
  transition:opacity .45s ease;
  contain:layout paint style;
}
.temple-chamber-environment::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.68),transparent 18% 82%,rgba(0,0,0,.68)),
    linear-gradient(180deg,rgba(0,0,0,.42),transparent 30% 72%,rgba(0,0,0,.58));
}
.chamber-vault{
  position:absolute;
  inset:5% 3% 1%;
  border:1px solid rgba(var(--environment-rgb),.13);
  border-bottom:0;
  border-radius:48% 48% 4px 4px/25% 25% 4px 4px;
  background:
    repeating-linear-gradient(90deg,transparent 0 11%,rgba(var(--environment-rgb),.035) 11.2%,transparent 11.5% 22%),
    radial-gradient(ellipse at 50% 32%,rgba(var(--environment-rgb),.06),transparent 58%);
  box-shadow:inset 0 0 52px rgba(0,0,0,.62);
}
.chamber-horizon{
  position:absolute;
  left:50%;
  top:18%;
  width:min(28vw,210px);
  aspect-ratio:1;
  translate:-50% 0;
  border:1px solid rgba(var(--environment-rgb),.21);
  border-radius:50%;
  opacity:.58;
}
.chamber-architecture{position:absolute;inset:8% 3% 0}
.chamber-architecture i{
  position:absolute;
  bottom:0;
  width:6%;
  min-width:12px;
  height:74%;
  border:1px solid rgba(var(--environment-rgb),.1);
  border-bottom:0;
  background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(var(--environment-rgb),.04),rgba(0,0,0,.72));
  clip-path:polygon(24% 0,76% 0,88% 6%,82% 100%,18% 100%,12% 6%);
}
.chamber-architecture i:nth-child(1){left:4%}.chamber-architecture i:nth-child(2){left:16%;height:62%}
.chamber-architecture i:nth-child(3){right:16%;height:62%}.chamber-architecture i:nth-child(4){right:4%}
.chamber-current{position:absolute;inset:0;overflow:hidden}
.chamber-current i{
  position:absolute;
  left:-20%;
  width:140%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--environment-rgb),.16),transparent);
  opacity:.46;
  animation:chamberCurrentDrift 12s ease-in-out infinite alternate;
}
.chamber-current i:nth-child(1){top:28%}.chamber-current i:nth-child(2){top:43%;animation-delay:-3s}
.chamber-current i:nth-child(3){top:61%;animation-delay:-6s}.chamber-current i:nth-child(4){top:78%;animation-delay:-9s}
.chamber-sigil{
  position:absolute;
  left:50%;
  top:48%;
  translate:-50% -50%;
  color:rgba(var(--environment-rgb),.1);
  font:normal clamp(5rem,18vw,13rem)/1 serif;
  text-shadow:0 0 36px rgba(var(--environment-rgb),.08);
  transition:color .5s ease,text-shadow .5s ease,transform .5s ease;
}
.temple-chamber-environment.is-reacting .chamber-sigil{
  color:rgba(var(--environment-rgb),calc(.12 + var(--chamber-awake,0) * .11));
  text-shadow:0 0 44px rgba(var(--environment-rgb),.18);
  animation:chamberSigilWake .7s ease-out both;
}
@keyframes chamberCurrentDrift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes chamberSigilWake{0%{transform:scale(.94);opacity:.45}38%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:.7}}

.chamber-royal{--environment-rgb:213,173,89;--environment-bright:#f3d58c}
.chamber-royal .chamber-vault{
  background:
    linear-gradient(90deg,transparent 48%,rgba(213,173,89,.06) 49% 51%,transparent 52%),
    repeating-linear-gradient(90deg,transparent 0 12%,rgba(213,173,89,.035) 12.2%,transparent 12.5% 24%),
    radial-gradient(ellipse at 50% 24%,rgba(213,173,89,.07),transparent 58%);
}
.chamber-royal .chamber-horizon{border-radius:2px;rotate:45deg;width:min(18vw,132px);opacity:.28}

.chamber-solar{--environment-rgb:232,185,78;--environment-bright:#fff1b0}
.chamber-solar .chamber-horizon{
  top:12%;
  border:0;
  background:radial-gradient(circle,#fff2b5 0 2%,#e8b94e 3% 17%,rgba(232,185,78,.18) 34%,transparent 66%);
  box-shadow:0 0 42px rgba(232,185,78,.17);
  animation:solarBreath 7s ease-in-out infinite;
}
.chamber-solar .chamber-current{transform:skewX(-12deg)}
.chamber-solar .chamber-current i{height:12%;width:1px;left:28%;top:-5%;background:linear-gradient(transparent,rgba(255,231,156,.18),transparent)}
.chamber-solar .chamber-current i:nth-child(2){left:43%;top:-2%}.chamber-solar .chamber-current i:nth-child(3){left:58%;top:0}.chamber-solar .chamber-current i:nth-child(4){left:72%;top:-5%}
.chamber-solar[data-event="solar-boon"] .chamber-horizon{animation:solarBoon .7s ease-out both}
@keyframes solarBreath{0%,100%{opacity:.48;transform:scale(.96)}50%{opacity:.68;transform:scale(1.025)}}
@keyframes solarBoon{0%{filter:brightness(1);transform:scale(.88)}38%{filter:brightness(1.75);transform:scale(1.12)}100%{filter:brightness(1);transform:scale(1)}}

.chamber-moon{--environment-rgb:174,138,255;--environment-bright:#eee4ff}
.chamber-moon .chamber-horizon{
  left:28%;
  top:12%;
  width:min(20vw,145px);
  border:0;
  background:transparent;
  box-shadow:inset -24px 9px 0 -7px rgba(216,197,255,.58),0 0 32px rgba(174,138,255,.1);
  rotate:-16deg;
  animation:moonDrift 10s ease-in-out infinite alternate;
}
.chamber-moon .chamber-vault{
  background:
    radial-gradient(circle at 19% 21%,rgba(238,228,255,.15) 0 1px,transparent 1.5px),
    radial-gradient(circle at 73% 16%,rgba(238,228,255,.12) 0 1px,transparent 1.5px),
    radial-gradient(circle at 61% 35%,rgba(174,138,255,.1) 0 1px,transparent 1.5px),
    radial-gradient(ellipse at 50% 38%,rgba(90,59,146,.11),transparent 62%);
}
.chamber-moon .chamber-architecture i{border-radius:50% 50% 0 0/12% 12% 0 0}
.chamber-moon[data-event="echo-shift"] .chamber-architecture{animation:moonEchoShift .68s ease-in-out}
@keyframes moonDrift{from{translate:-50% -2px}to{translate:-50% 7px}}
@keyframes moonEchoShift{0%,100%{transform:translateX(0)}38%{transform:translateX(-1.6%)}70%{transform:translateX(1.2%)}}

.chamber-river{--environment-rgb:72,210,170;--environment-bright:#c8fff0}
.chamber-river .chamber-horizon{
  top:auto;
  bottom:8%;
  width:82%;
  height:24%;
  aspect-ratio:auto;
  border:0;
  background:repeating-radial-gradient(ellipse at 50% 100%,rgba(72,210,170,.12) 0 1px,transparent 2px 14px);
  opacity:.55;
}
.chamber-river .chamber-current i{
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(108,239,203,.2) 24% 76%,transparent);
  animation:riverCurrent 8s linear infinite;
}
.chamber-river .chamber-architecture i{width:2.5%;clip-path:polygon(42% 0,58% 0,72% 100%,28% 100%)}
.chamber-river[data-event="river-shift"] .chamber-current,
.chamber-river[data-event="river-impact"] .chamber-current{animation:riverRise .72s ease-out}
@keyframes riverCurrent{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
@keyframes riverRise{0%{transform:translateY(12%);opacity:.35}45%{transform:translateY(-6%);opacity:1}100%{transform:translateY(0);opacity:.55}}

.chamber-judgment{--environment-rgb:212,168,63;--environment-bright:#ffe7a0}
.chamber-judgment .chamber-vault{
  border-radius:2px;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(255,231,160,.11) 50%,transparent 50.3%),
    repeating-linear-gradient(90deg,transparent 0 16%,rgba(212,168,63,.04) 16.2%,transparent 16.5% 32%);
}
.chamber-judgment .chamber-horizon{width:min(15vw,108px);border-radius:0;rotate:45deg;opacity:.44}
.chamber-judgment .chamber-architecture i{width:4%;clip-path:polygon(50% 0,83% 13%,70% 100%,30% 100%,17% 13%)}
.chamber-judgment[data-event="judgment-impact"] .chamber-vault{animation:judgmentVault .62s ease-out}
@keyframes judgmentVault{0%,100%{filter:none}34%{filter:brightness(1.55);box-shadow:inset 0 0 54px rgba(212,168,63,.16)}}

.chamber-scarab{--environment-rgb:157,180,106;--environment-bright:#e9e0a0}
.chamber-scarab .chamber-horizon{width:min(18vw,132px);border-style:dashed;opacity:.32}
.chamber-scarab .chamber-vault{background:repeating-conic-gradient(from 45deg at 50% 48%,rgba(157,180,106,.045) 0 1deg,transparent 1.4deg 30deg)}
.chamber-scarab[data-event="scarab-boon"] .chamber-sigil{animation:scarabOpen .7s ease-out}
@keyframes scarabOpen{0%{letter-spacing:-.2em;opacity:.3}42%{letter-spacing:.08em;opacity:1}100%{letter-spacing:0;opacity:.68}}

/* Guardian warnings and impacts are cropped to the board and never receive input. */
.temple-guardian-telegraph,.temple-guardian-impact,.temple-guardian-counter{position:absolute;inset:0;pointer-events:none}
.guardian-attack-frame,.guardian-impact-field,.guardian-counter-seal{
  position:absolute;
  left:var(--attack-x);
  top:var(--attack-y);
  width:var(--attack-w);
  height:var(--attack-h);
  overflow:hidden;
  border-radius:12px;
}
.temple-guardian-telegraph .guardian-attack-frame{
  border:1px solid rgba(var(--temple-rgb),.32);
  box-shadow:inset 0 0 30px rgba(var(--temple-rgb),.08);
  animation:guardianWarningFrame var(--guardian-warn-duration,1.8s) ease-in both;
}
.guardian-attack-frame i,.guardian-impact-field i{position:absolute;display:block}
.guardian-attack-frame b,.guardian-impact-field b{position:absolute;display:block}
@keyframes guardianWarningFrame{0%{opacity:0}14%{opacity:.52}72%{opacity:.78}100%{opacity:.96}}

.temple-guardian-telegraph.guardian-bastet .guardian-attack-frame{
  background:radial-gradient(ellipse at 50% 52%,transparent 34%,rgba(90,48,146,.1) 72%,rgba(8,2,16,.3));
}
.temple-guardian-telegraph.guardian-bastet i{
  top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,var(--temple-main),transparent);
  rotate:32deg;transform-origin:center;animation:bastetClawReady var(--guardian-warn-duration,1.8s) ease-in both;
}
.temple-guardian-telegraph.guardian-bastet i:nth-child(1){left:14%}.temple-guardian-telegraph.guardian-bastet i:nth-child(2){left:20%;animation-delay:.07s}
.temple-guardian-telegraph.guardian-bastet i:nth-child(4){right:20%;rotate:-32deg;animation-delay:.07s}.temple-guardian-telegraph.guardian-bastet i:nth-child(5){right:14%;rotate:-32deg}
.temple-guardian-telegraph.guardian-bastet b{
  left:50%;top:50%;width:84px;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  box-shadow:inset -18px 6px 0 -5px rgba(232,220,255,.38);
}
@keyframes bastetClawReady{0%{opacity:0;transform:translateY(-10%)}60%{opacity:.25}100%{opacity:.72;transform:translateY(0)}}

.temple-guardian-telegraph.guardian-sobek .guardian-attack-frame{
  background:linear-gradient(0deg,rgba(11,76,61,.2),transparent 48%);
}
.temple-guardian-telegraph.guardian-sobek i{
  left:-10%;width:120%;height:2px;border-radius:50%;
  background:linear-gradient(90deg,transparent,var(--temple-main),transparent);
  animation:sobekSurgeReady var(--guardian-warn-duration,1.8s) ease-in both;
}
.temple-guardian-telegraph.guardian-sobek i:nth-child(1){bottom:9%}.temple-guardian-telegraph.guardian-sobek i:nth-child(2){bottom:17%;animation-delay:.05s}
.temple-guardian-telegraph.guardian-sobek i:nth-child(4){bottom:25%;animation-delay:.1s}.temple-guardian-telegraph.guardian-sobek i:nth-child(5){bottom:33%;animation-delay:.15s}
.temple-guardian-telegraph.guardian-sobek b{
  left:50%;bottom:6%;width:42px;height:52px;translate:-50% 0;
  border-left:1px solid rgba(200,255,240,.45);border-right:1px solid rgba(200,255,240,.45);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
@keyframes sobekSurgeReady{0%{opacity:0;transform:translateY(25px)}68%{opacity:.3}100%{opacity:.78;transform:translateY(0)}}

.temple-guardian-telegraph.guardian-anubis .guardian-attack-frame{
  background:linear-gradient(90deg,rgba(63,42,10,.16),transparent 24% 76%,rgba(63,42,10,.16));
}
.temple-guardian-telegraph.guardian-anubis b{
  left:50%;top:18%;bottom:16%;width:1px;background:linear-gradient(transparent,var(--temple-bright),transparent);
  box-shadow:0 0 12px rgba(var(--temple-rgb),.45);
}
.temple-guardian-telegraph.guardian-anubis i:nth-child(1),.temple-guardian-telegraph.guardian-anubis i:nth-child(4){
  top:48%;width:25%;height:1px;background:linear-gradient(90deg,transparent,var(--temple-main));
}
.temple-guardian-telegraph.guardian-anubis i:nth-child(1){left:25%}.temple-guardian-telegraph.guardian-anubis i:nth-child(4){right:25%;transform:scaleX(-1)}
.temple-guardian-telegraph.guardian-anubis i:nth-child(2),.temple-guardian-telegraph.guardian-anubis i:nth-child(5){
  top:49%;width:15%;height:7%;border:1px solid rgba(var(--temple-rgb),.42);border-top:0;border-radius:0 0 50% 50%;
}
.temple-guardian-telegraph.guardian-anubis i:nth-child(2){left:22%}.temple-guardian-telegraph.guardian-anubis i:nth-child(5){right:22%}

.temple-guardian-impact .guardian-impact-field{animation:guardianImpactFade .72s cubic-bezier(.18,.72,.2,1) both}
.temple-guardian-impact.guardian-bastet .guardian-impact-field{background:linear-gradient(115deg,transparent 34%,rgba(154,105,236,.18) 35% 37%,transparent 38% 45%,rgba(154,105,236,.12) 46% 48%,transparent 49%)}
.temple-guardian-impact.guardian-bastet i{top:-15%;height:130%;width:2px;background:linear-gradient(transparent,var(--temple-bright),transparent);rotate:28deg}
.temple-guardian-impact.guardian-bastet i:nth-child(1){left:32%}.temple-guardian-impact.guardian-bastet i:nth-child(2){left:39%;animation-delay:.04s}
.temple-guardian-impact.guardian-bastet i:nth-child(4){right:39%}.temple-guardian-impact.guardian-bastet i:nth-child(5){right:32%;animation-delay:.04s}
.temple-guardian-impact.guardian-sobek .guardian-impact-field{background:linear-gradient(0deg,rgba(26,151,121,.25),rgba(26,151,121,.06) 47%,transparent 62%)}
.temple-guardian-impact.guardian-sobek i{left:-10%;width:120%;height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--temple-bright),transparent);animation:sobekImpactWave .65s ease-out both}
.temple-guardian-impact.guardian-sobek i:nth-child(1){bottom:9%}.temple-guardian-impact.guardian-sobek i:nth-child(2){bottom:19%;animation-delay:.04s}.temple-guardian-impact.guardian-sobek i:nth-child(4){bottom:29%;animation-delay:.08s}.temple-guardian-impact.guardian-sobek i:nth-child(5){bottom:39%;animation-delay:.12s}
.temple-guardian-impact.guardian-anubis .guardian-impact-field{background:linear-gradient(90deg,transparent 48.7%,rgba(255,224,130,.2) 49.7% 50.3%,transparent 51.3%),radial-gradient(ellipse,rgba(212,168,63,.12),transparent 58%)}
.temple-guardian-impact.guardian-anubis b{left:50%;top:8%;bottom:8%;width:1px;background:var(--temple-bright);box-shadow:0 0 18px var(--temple-main)}
@keyframes guardianImpactFade{0%{opacity:0;filter:brightness(1)}22%{opacity:1;filter:brightness(1.35)}100%{opacity:0;filter:brightness(1)}}
@keyframes sobekImpactWave{from{opacity:0;transform:translateY(38px) scaleX(.7)}42%{opacity:.9}to{opacity:0;transform:translateY(-12px) scaleX(1)}}

.guardian-counter-seal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:var(--temple-bright);
  background:radial-gradient(circle at center,rgba(var(--temple-rgb),.12),transparent 24%);
  animation:guardianCounterFade .68s ease-out both;
}
.guardian-counter-seal i{width:min(20vw,150px);height:1px;background:linear-gradient(90deg,transparent,var(--temple-main))}
.guardian-counter-seal i:last-child{transform:scaleX(-1)}
.guardian-counter-seal b{
  display:grid;place-items:center;width:58px;aspect-ratio:1;border:1px solid var(--temple-main);
  border-radius:50%;font:normal 1.9rem/1 serif;text-shadow:0 0 12px var(--temple-main);
}
@keyframes guardianCounterFade{0%{opacity:0;transform:scale(.84)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}

html[data-vfx="low"] .temple-chamber-environment{opacity:.36}
html[data-vfx="low"] .chamber-current,
html[data-vfx="low"] .chamber-sigil{display:none}
html[data-vfx="low"] .temple-guardian-impact{display:none}
html[data-vfx="low"] .temple-guardian-telegraph .guardian-attack-frame i{display:none}
html.reduced-motion .temple-chamber-environment,
html.reduced-motion .temple-chamber-environment *{animation:none!important;transition:none!important}

@media (max-width:640px){
  .temple-chamber-environment{opacity:calc(.38 + var(--chamber-awake,0) * .12)}
  .chamber-vault{inset:3% 1% 0}
  .chamber-architecture{inset:7% 0 0}
  .chamber-architecture i:nth-child(2),.chamber-architecture i:nth-child(3){display:none}
  .chamber-sigil{font-size:clamp(4.5rem,27vw,8rem)}
  .chamber-horizon{width:min(38vw,150px)}
  .guardian-attack-frame,.guardian-impact-field,.guardian-counter-seal{border-radius:8px}
  .temple-guardian-telegraph.guardian-bastet b{width:58px}
  .guardian-counter-seal b{width:48px;font-size:1.55rem}
}

@media (prefers-contrast:more){
  .temple-chamber-environment{opacity:.28}
  .temple-chamber-environment::before{background:rgba(0,0,0,.32)}
}

/* ===== v3.2.1 Guardian Presentation ===== */
@keyframes bossContinueReveal{
  from{opacity:0;transform:translate(-50%,9px)}
  to{opacity:1;transform:translate(-50%,0)}
}
#bossIntro .boss-intro-skip{
  left:50%;
  right:auto;
  width:min(86vw,520px);
  transform:translateX(-50%);
  text-align:center;
  animation:bossContinueReveal .35s ease 1.72s both;
}
#bossIntro .boss-intro-skip:not(:disabled){
  animation:bossContinueReveal .35s ease 1.72s both,bossContinuePulse 1.8s ease-in-out 2.1s infinite;
}

#bossReward{
  --reward-color:#d4a83f;
  --reward-bright:#ffe7a0;
  --reward-rgb:212,168,63;
}
#bossReward[data-deity="bastet"]{--reward-color:#ae8aff;--reward-bright:#eee4ff;--reward-rgb:174,138,255}
#bossReward[data-deity="sobek"]{--reward-color:#48d2aa;--reward-bright:#c8fff0;--reward-rgb:72,210,170}
#bossReward[data-deity="anubis"]{--reward-color:#d4a83f;--reward-bright:#ffe7a0;--reward-rgb:212,168,63}
#bossReward .boss-reward-backdrop{
  background:
    radial-gradient(ellipse at 50% 20%,rgba(var(--reward-rgb),.17),transparent 48%),
    rgba(0,0,0,.94);
}
#bossReward .boss-reward-card{
  width:min(760px,calc(100% - 24px));
  padding:18px;
  border-color:rgba(var(--reward-rgb),.58);
  background:
    linear-gradient(135deg,rgba(var(--reward-rgb),.065),transparent 38%),
    radial-gradient(circle at 50% 0%,rgba(var(--reward-rgb),.11),#050505 55%,#020202 100%);
  box-shadow:0 18px 55px rgba(0,0,0,.86),0 0 54px rgba(var(--reward-rgb),.18);
}
.boss-reward-heading{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin-bottom:13px;
}
.boss-reward-emblem{
  display:grid;
  place-items:center;
  align-content:center;
  width:58px;
  aspect-ratio:1;
  border:1px solid rgba(var(--reward-rgb),.55);
  clip-path:polygon(50% 0,91% 24%,91% 76%,50% 100%,9% 76%,9% 24%);
  background:rgba(var(--reward-rgb),.075);
  color:var(--reward-bright);
}
.boss-reward-emblem #bossRewardGlyph{font:normal 1.65rem/1 serif;text-shadow:0 0 13px var(--reward-color)}
.boss-reward-kicker{
  display:block;
  margin:0 0 2px;
  color:var(--reward-color);
  font-size:.57rem;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}
#bossReward .boss-reward-heading-copy{min-width:0}
#bossReward .boss-reward-card h2{
  margin:0 0 4px;
  color:var(--reward-bright);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.35rem,4.2vw,1.85rem);
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(var(--reward-rgb),.28);
}
#bossReward .boss-reward-sub{
  max-width:62ch;
  margin:0;
  color:#ddd7c9;
  font-size:.84rem;
  line-height:1.42;
}
#bossReward .boss-reward-content{
  grid-template-columns:minmax(190px,.82fr) minmax(0,1.18fr);
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}
#bossReward .boss-reward-cardFrame{
  width:min(196px,48vw);
  border-radius:16px;
  background:linear-gradient(135deg,var(--reward-bright),var(--reward-color),rgba(var(--reward-rgb),.42));
  box-shadow:0 0 23px rgba(var(--reward-rgb),.42),0 14px 28px rgba(0,0,0,.78);
}
#bossReward .boss-reward-cardName{
  color:var(--reward-bright);
  font-size:.82rem;
  line-height:1.3;
}
#bossReward .boss-reward-stats{
  gap:0;
  padding:8px 12px;
  border-color:rgba(var(--reward-rgb),.35);
  background:linear-gradient(145deg,rgba(var(--reward-rgb),.085),rgba(0,0,0,.84) 46%);
}
#bossReward .boss-reward-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:35px;
  border-bottom:1px solid rgba(var(--reward-rgb),.11);
  font-size:.84rem;
}
#bossReward .boss-reward-row:nth-of-type(4){border-bottom:0}
#bossReward .boss-reward-row .label{color:#cfc7b5}
#bossReward .boss-reward-row .value{max-width:none;color:var(--reward-bright);overflow-wrap:normal}
#bossReward .guardian-mastery-track{margin:7px 0 5px}
#bossReward .guardian-mastery-track span{background:linear-gradient(90deg,rgba(var(--reward-rgb),.55),var(--reward-color),var(--reward-bright))}
#bossReward .boss-grade-note{color:#9f9786;font-size:.63rem}
.boss-reward-discoveries{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:8px;
  margin:0 0 12px;
}
.boss-reward-discovery{
  min-width:0;
  padding:9px 11px;
  border-left:2px solid rgba(var(--reward-rgb),.58);
  border-radius:8px;
  background:rgba(var(--reward-rgb),.055);
}
.boss-reward-discovery .label{
  display:block;
  color:#a9a18f;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.boss-reward-discovery strong{
  display:block;
  margin-top:2px;
  color:var(--reward-bright);
  font-size:.77rem;
  line-height:1.32;
  overflow-wrap:anywhere;
}
#bossReward .boss-reward-actions{margin-top:0;justify-content:stretch}
#bossReward .boss-reward-actions .btn.small{
  flex:1 1 0;
  min-width:0;
  min-height:46px;
  border-color:rgba(var(--reward-rgb),.28);
}
#bossReward .boss-reward-actions .btn.small:focus-visible{outline-color:var(--reward-color)}
#bossReward[data-reward-state="first"] .boss-reward-card{
  box-shadow:0 18px 55px rgba(0,0,0,.86),0 0 68px rgba(var(--reward-rgb),.25);
}

@media (max-width:480px){
  #bossReward .boss-reward-card{width:calc(100% - 20px);padding:14px 13px 12px}
  .boss-reward-heading{grid-template-columns:48px minmax(0,1fr);gap:9px;margin-bottom:9px}
  .boss-reward-emblem{width:48px}
  .boss-reward-emblem #bossRewardGlyph{font-size:1.4rem}
  .boss-reward-kicker{font-size:.48rem;letter-spacing:.14em}
  #bossReward .boss-reward-card h2{font-size:1.22rem;letter-spacing:.06em}
  #bossReward .boss-reward-sub{font-size:.73rem;line-height:1.34}
  #bossReward .boss-reward-content{grid-template-columns:minmax(118px,.74fr) minmax(0,1.26fr);gap:9px;margin-bottom:9px}
  #bossReward .boss-reward-cardFrame{width:min(132px,35vw)}
  #bossReward .boss-reward-cardName{font-size:.65rem;letter-spacing:.045em}
  #bossReward .boss-reward-stats{padding:5px 8px}
  #bossReward .boss-reward-row{min-height:30px;gap:6px;font-size:.71rem}
  #bossReward .boss-grade-note{font-size:.54rem}
  .boss-reward-discoveries{gap:6px;margin-bottom:9px}
  .boss-reward-discovery{padding:7px 8px}
  .boss-reward-discovery strong{font-size:.68rem}
}

@media (max-width:360px){
  #bossReward .boss-reward-content{grid-template-columns:1fr}
  #bossReward .boss-reward-cardFrame{width:118px}
  #bossReward .boss-reward-cardPreview{display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:center}
  #bossReward .boss-reward-cardName{text-align:left}
  .boss-reward-discoveries{grid-template-columns:1fr}
}

@media (orientation:landscape) and (max-height:520px){
  #bossIntro .boss-intro-skip{
    left:50%;
    width:min(38vw,330px);
    bottom:max(1%,env(safe-area-inset-bottom));
  }
  #bossReward .boss-reward-card{width:min(760px,calc(100% - 32px));padding:9px 13px 8px}
  .boss-reward-heading{grid-template-columns:42px minmax(0,1fr);gap:8px;margin-bottom:5px}
  .boss-reward-emblem{width:42px}
  .boss-reward-emblem #bossRewardGlyph{font-size:1.25rem}
  .boss-reward-kicker{font-size:.47rem}
  #bossReward .boss-reward-card h2{font-size:1rem;margin-bottom:1px}
  #bossReward .boss-reward-sub{font-size:.64rem;line-height:1.25}
  #bossReward .boss-reward-content{grid-template-columns:150px minmax(0,1fr);gap:10px;margin-bottom:5px}
  #bossReward .boss-reward-cardPreview{display:grid;grid-template-columns:84px minmax(0,1fr);gap:7px}
  #bossReward .boss-reward-cardFrame{width:84px}
  #bossReward .boss-reward-cardName{text-align:left;font-size:.58rem}
  #bossReward .boss-reward-stats{padding:4px 8px}
  #bossReward .boss-reward-row{min-height:22px;font-size:.66rem}
  #bossReward .guardian-mastery-track{margin:3px 0}
  #bossReward .boss-grade-note{font-size:.5rem}
  .boss-reward-discoveries{margin-bottom:5px}
  .boss-reward-discovery{padding:4px 7px}
  .boss-reward-discovery strong{font-size:.61rem}
  #bossReward .boss-reward-actions .btn.small{min-height:34px;padding:5px 9px}
}

/* ===== v3.3 Guardian Battle Orchestration ===== */
body[data-boss="anubis"]{--guardian-color:#d8af43;--guardian-bright:#ffe7a0;--guardian-rgb:216,175,67}
body[data-boss="bastet"]{--guardian-color:#ad87ff;--guardian-bright:#eee3ff;--guardian-rgb:173,135,255}
body[data-boss="sobek"]{--guardian-color:#48d2aa;--guardian-bright:#c8fff0;--guardian-rgb:72,210,170}

#bossHpBar{
  width:min(88%,620px);
  height:30px;
  border-color:rgba(var(--guardian-rgb,216,175,67),.66);
  border-radius:8px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(17,17,15,.95),rgba(2,3,3,.96)),
    repeating-linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.025) 10% 10.5%);
  box-shadow:0 7px 22px rgba(0,0,0,.76),0 0 18px rgba(var(--guardian-rgb,216,175,67),.22);
}
#bossHpBar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 33%,rgba(var(--guardian-rgb,216,175,67),.24) 33% 33.5%,transparent 33.5% 66%,rgba(var(--guardian-rgb,216,175,67),.24) 66% 66.5%,transparent 66.5%),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 38%);
}
#bossHpBar .boss-hp-fill{
  position:absolute;
  inset:0 auto 0 0;
  height:auto;
  border-radius:0;
  opacity:.48;
  background:linear-gradient(90deg,rgba(var(--guardian-rgb,216,175,67),.18),var(--guardian-color,#d8af43),var(--guardian-bright,#ffe7a0));
  box-shadow:0 0 18px rgba(var(--guardian-rgb,216,175,67),.42);
  transition:width .36s cubic-bezier(.2,.8,.2,1),filter .25s ease;
}
#bossHpBar .boss-hp-meta{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 78px;
  align-items:center;
  gap:5px;
  padding:0 9px;
}
#bossHpBar .boss-phase-badge,
#bossHpBar .boss-pairs-left{
  color:var(--guardian-bright,#ffe7a0);
  font-size:.53rem;
  font-weight:850;
  letter-spacing:.11em;
  white-space:nowrap;
  text-shadow:0 1px 5px #000;
}
#bossHpBar .boss-pairs-left{text-align:right}
#bossHpBar .boss-hp-label{
  position:static;
  width:auto;
  color:#fff7df;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.21em;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 7px #000,0 0 11px rgba(var(--guardian-rgb,216,175,67),.55);
}
#bossHpBar[data-phase="2"]{box-shadow:0 7px 22px rgba(0,0,0,.76),0 0 22px rgba(var(--guardian-rgb,216,175,67),.29)}
#bossHpBar[data-phase="3"]{
  border-color:rgba(var(--guardian-rgb,216,175,67),.88);
  box-shadow:0 7px 22px rgba(0,0,0,.8),0 0 28px rgba(var(--guardian-rgb,216,175,67),.38);
}
#bossHpBar[data-phase="3"] .boss-phase-badge{color:#fff}

.boss-intent{
  top:max(43px,calc(env(safe-area-inset-top) + 41px));
  width:min(90%,600px);
  min-height:38px;
  grid-template-columns:25px minmax(0,1fr) 40px;
  gap:8px;
  padding:5px 9px;
  border-color:rgba(var(--guardian-rgb,216,175,67),.34);
  background:
    linear-gradient(100deg,rgba(var(--guardian-rgb,216,175,67),.075),transparent 30%),
    linear-gradient(180deg,rgba(10,10,9,.95),rgba(2,3,3,.96));
  box-shadow:0 8px 19px rgba(0,0,0,.62);
}
.boss-intent-glyph{
  color:var(--guardian-color,#e6bd57);
  font-size:1.08rem;
  text-shadow:0 0 10px rgba(var(--guardian-rgb,216,175,67),.5);
}
#bossIntentLabel{color:#f0e9dc;font-size:.63rem;letter-spacing:.055em}
.boss-rule-status{color:#b8c9c2;font-size:.51rem;line-height:1.15}
.boss-intent-track{height:4px;background:rgba(255,255,255,.075)}
#bossIntentFill{
  background:linear-gradient(90deg,rgba(var(--guardian-rgb,216,175,67),.32),var(--guardian-color,#d8af43),var(--guardian-bright,#ffe7a0));
  box-shadow:0 0 8px rgba(var(--guardian-rgb,216,175,67),.4);
}
#bossIntentTime{color:var(--guardian-bright,#f4d687);font-size:.64rem}
.boss-intent.warning,
.boss-intent[data-state="warning"]{
  border-color:rgba(var(--guardian-rgb,216,175,67),.86);
  box-shadow:0 8px 19px rgba(0,0,0,.62),0 0 18px rgba(var(--guardian-rgb,216,175,67),.3);
}
.boss-intent[data-state="countered"]{border-color:rgba(116,235,178,.78);box-shadow:0 8px 19px rgba(0,0,0,.62),0 0 17px rgba(79,218,151,.22)}
.boss-intent[data-state="impact"]{border-color:rgba(255,159,111,.72)}

.boss-battle-cue{
  position:absolute;
  z-index:420;
  top:max(92px,calc(env(safe-area-inset-top) + 90px));
  left:50%;
  width:min(76%,470px);
  min-height:51px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  align-content:center;
  gap:1px;
  padding:7px 30px 8px;
  overflow:hidden;
  pointer-events:none;
  text-align:center;
  border:1px solid rgba(var(--guardian-rgb,216,175,67),.4);
  border-left-color:transparent;
  border-right-color:transparent;
  background:
    linear-gradient(90deg,transparent,rgba(3,4,4,.96) 14% 86%,transparent),
    radial-gradient(ellipse at center,rgba(var(--guardian-rgb,216,175,67),.11),transparent 70%);
  box-shadow:0 12px 24px rgba(0,0,0,.42);
}
.boss-battle-cue::before,
.boss-battle-cue::after{
  content:"";
  position:absolute;
  top:50%;
  width:22%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--guardian-color,#d8af43));
  opacity:.72;
}
.boss-battle-cue::before{left:0}
.boss-battle-cue::after{right:0;transform:scaleX(-1)}
#bossCueKicker{
  color:var(--guardian-color,#d8af43);
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.22em;
  line-height:1.15;
}
#bossCueTitle{
  color:#fff5d9;
  font-family:Georgia,'Times New Roman',serif;
  font-size:.88rem;
  letter-spacing:.105em;
  line-height:1.15;
  text-shadow:0 0 13px rgba(var(--guardian-rgb,216,175,67),.35);
}
#bossCueDetail{color:#cfc8ba;font-size:.57rem;line-height:1.2}
.boss-battle-cue.is-active{animation:guardianCueReveal .34s ease-out both,guardianCueHold 1.35s ease-in-out .34s both}
.boss-battle-cue[data-kind="warning"]{border-color:rgba(var(--guardian-rgb,216,175,67),.72);background:linear-gradient(90deg,transparent,rgba(var(--guardian-rgb,216,175,67),.12) 18% 82%,transparent),rgba(2,3,3,.82)}
.boss-battle-cue[data-kind="countered"]{--guardian-color:#66dea7;--guardian-bright:#d8ffec;--guardian-rgb:102,222,167}
.boss-battle-cue[data-kind="impact"]{--guardian-color:#ef9a68;--guardian-bright:#ffe2cf;--guardian-rgb:239,154,104}
@keyframes guardianCueReveal{from{opacity:0;transform:translate(-50%,-6px) scaleX(.92)}to{opacity:1;transform:translate(-50%,0) scaleX(1)}}
@keyframes guardianCueRevealSide{from{opacity:0;transform:translateY(-5px) scaleX(.92)}to{opacity:1;transform:none}}
@keyframes guardianCueHold{0%,72%{filter:brightness(1)}100%{filter:brightness(.82)}}

.board-viewport[data-guardian-state="warning"] #bossHpBar .boss-hp-fill{filter:brightness(1.3)}
.board-viewport[data-guardian-state="warning"] .boss-intent-glyph{animation:guardianIntentBeat .72s ease-in-out infinite}
.board-viewport[data-guardian-state="countered"] #bossHpBar{border-color:rgba(105,231,170,.72)}
.board-viewport[data-guardian-state="impact"] #bossHpBar{filter:brightness(1.22)}
@keyframes guardianIntentBeat{0%,100%{opacity:.65;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}

.guardian-phase-shift .temple-chamber-environment{animation:guardianChamberShift .9s cubic-bezier(.2,.75,.2,1) both}
@keyframes guardianChamberShift{0%,100%{filter:none}42%{filter:brightness(1.22) saturate(1.16)}}
#boardVP[data-guardian-phase="2"] .temple-chamber-environment{opacity:calc(.46 + var(--chamber-awake,0) * .16)}
#boardVP[data-guardian-phase="3"] .temple-chamber-environment{opacity:calc(.52 + var(--chamber-awake,0) * .18)}

.card.boss-ward-flash{
  z-index:23;
  box-shadow:0 0 0 1px rgba(var(--guardian-rgb,216,175,67),.72),0 0 22px rgba(var(--guardian-rgb,216,175,67),.42);
}

#bossDefeat .boss-defeat-darken{
  background:radial-gradient(circle at 50% 34%,rgba(var(--guardian-rgb,216,175,67),.13),rgba(0,0,0,.96) 72%);
}
#bossDefeat .boss-defeat-ring{
  border-color:rgba(var(--guardian-rgb,216,175,67),.92);
  box-shadow:0 0 34px rgba(var(--guardian-rgb,216,175,67),.75),0 0 82px rgba(var(--guardian-rgb,216,175,67),.38);
}
#bossDefeat .boss-defeat-flare{
  background:radial-gradient(circle,#fff,var(--guardian-bright,#ffe7a0),rgba(var(--guardian-rgb,216,175,67),0));
  box-shadow:0 0 52px rgba(var(--guardian-rgb,216,175,67),.72),0 0 110px rgba(var(--guardian-rgb,216,175,67),.45);
}
#bossDefeat .boss-defeat-text{color:var(--guardian-bright,#ffe9b8);text-shadow:0 0 24px rgba(var(--guardian-rgb,216,175,67),.72),0 0 60px #000}

@media (max-width:480px){
  #hudTop>div{width:100%;min-width:0;gap:4px!important}
  #hudTop .stat{flex:1 1 0;min-width:0;padding-inline:6px}
  #hudTop #levelBadge{flex:0 0 auto;margin-left:0;padding:3px}
  #bossHpBar{width:calc(100% - 24px);height:28px;top:max(5px,env(safe-area-inset-top))}
  #bossHpBar .boss-hp-meta{grid-template-columns:66px minmax(0,1fr) 66px;padding:0 7px}
  #bossHpBar .boss-phase-badge,#bossHpBar .boss-pairs-left{font-size:.47rem;letter-spacing:.085em}
  #bossHpBar .boss-hp-label{font-size:.61rem;letter-spacing:.17em}
  .boss-intent{top:max(39px,calc(env(safe-area-inset-top) + 37px));width:calc(100% - 16px);min-height:37px;padding:4px 7px}
  #bossIntentLabel{font-size:.59rem}
  .boss-rule-status{font-size:.47rem}
  .boss-battle-cue{top:max(84px,calc(env(safe-area-inset-top) + 82px));width:calc(100% - 36px);min-height:48px;padding:6px 23px 7px}
  #bossCueTitle{font-size:.78rem}
  #bossCueDetail{font-size:.53rem}
}

@media (orientation:landscape) and (max-height:520px){
  #bossHpBar{top:3px;width:min(62%,560px);height:24px}
  #bossHpBar .boss-hp-meta{grid-template-columns:70px minmax(0,1fr) 70px;padding:0 7px}
  #bossHpBar .boss-phase-badge,#bossHpBar .boss-pairs-left{font-size:.44rem}
  #bossHpBar .boss-hp-label{font-size:.55rem}
  .boss-intent{top:31px;width:min(70%,610px);min-height:31px;padding:3px 7px;grid-template-columns:20px minmax(0,1fr) 36px}
  .boss-intent-glyph{font-size:.91rem}
  #bossIntentLabel{font-size:.53rem}
  .boss-rule-status{font-size:.42rem}
  #bossIntentTime{font-size:.54rem}
  .boss-battle-cue{
    top:76px;
    left:10px;
    width:min(16%,100px);
    min-height:0;
    transform:none;
    place-items:start;
    align-content:center;
    padding:7px 7px 8px;
    text-align:left;
    border-left-color:rgba(var(--guardian-rgb,216,175,67),.62);
    background:linear-gradient(90deg,rgba(3,4,4,.96),rgba(3,4,4,.82) 82%,transparent);
  }
  .boss-battle-cue::before,.boss-battle-cue::after{display:none}
  .boss-battle-cue.is-active{animation:guardianCueRevealSide .34s ease-out both,guardianCueHold 1.35s ease-in-out .34s both}
  #bossCueKicker{font-size:.38rem;letter-spacing:.14em}
  #bossCueTitle{font-size:.56rem;letter-spacing:.065em}
  #bossCueDetail{font-size:.43rem}
}

html[data-vfx="low"] .boss-battle-cue::before,
html[data-vfx="low"] .boss-battle-cue::after{display:none}
html[data-vfx="low"] .guardian-phase-shift .temple-chamber-environment{animation:none}
html.reduced-motion #bossHpBar,
html.reduced-motion #bossHpBar .boss-hp-fill,
html.reduced-motion .boss-intent,
html.reduced-motion .boss-intent *,
html.reduced-motion .boss-battle-cue,
html.reduced-motion .guardian-phase-shift .temple-chamber-environment{animation:none!important;transition:none!important}
@media (prefers-contrast:more){
  #bossHpBar,.boss-intent,.boss-battle-cue{background:#020303;border-color:var(--guardian-bright,#ffe7a0)}
  #bossCueDetail,.boss-rule-status{color:#fff}
}

/* ===== v3.4 Journey Map Reforged ===== */
.journey-box{
  width:min(1040px,96vw);
  height:min(820px,calc(100dvh - 28px));
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:20px;
  border-color:rgba(242,201,100,.3);
  background:
    linear-gradient(125deg,rgba(217,174,69,.075),transparent 28%),
    radial-gradient(700px 330px at 70% -8%,rgba(246,204,107,.13),transparent 65%),
    linear-gradient(180deg,rgba(10,10,9,.98),rgba(4,5,5,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.82),0 0 54px rgba(210,166,55,.1);
}
.journey-heading{
  flex:0 0 auto;
  align-items:center;
  padding:0 2px 14px;
  border-bottom:1px solid rgba(255,215,130,.12);
}
.journey-heading .eyebrow{margin-bottom:3px}
.journey-heading h2{
  margin:0;
  color:#fff0c3;
  font:700 clamp(1.45rem,3vw,2rem)/1.05 Georgia,'Times New Roman',serif;
  letter-spacing:.035em;
}
.journey-progress{
  min-width:244px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  text-align:center;
  border-color:rgba(242,201,100,.28);
  border-radius:11px;
  background:rgba(3,4,4,.68);
}
.journey-progress>div{
  display:grid;
  gap:1px;
  padding:7px 9px;
  border-right:1px solid rgba(255,215,130,.11);
}
.journey-progress>div:last-child{border-right:0}
.journey-progress strong{color:#ffe09a;font-size:.84rem;line-height:1.05}
.journey-progress span{
  color:#a9a18e;
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.journey-overview{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr);
  gap:14px;
  padding:14px 0 12px;
}
.journey-route-panel{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,215,130,.13);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(213,171,66,.045),transparent 30%),
    rgba(0,0,0,.25);
}
.journey-route-heading{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  padding:11px 13px 9px;
  border-bottom:1px solid rgba(255,215,130,.1);
}
.journey-route-heading span{
  color:#f7d986;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.journey-route-heading small{color:#9f9888;font-size:.63rem}
.journey-map{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
  padding:10px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(231,188,80,.45) transparent;
}
.journey-node{
  --route-rgb:216,175,67;
  position:relative;
  flex:0 0 auto;
  min-height:64px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 14px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  overflow:visible;
  text-align:left;
  border:1px solid transparent;
  border-radius:12px;
  background:rgba(15,15,13,.62);
  color:#efe9db;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.journey-node[data-affinity="solar"]{--route-rgb:241,190,67}
.journey-node[data-affinity="echo"]{--route-rgb:173,135,255}
.journey-node[data-affinity="river"],
.journey-node[data-affinity="sobek"]{--route-rgb:72,210,170}
.journey-node[data-affinity="bastet"]{--route-rgb:173,135,255}
.journey-node[data-affinity="anubis"]{--route-rgb:232,190,83}
.journey-node:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:0;
  left:32px;
  top:54px;
  width:1px;
  height:20px;
  background:linear-gradient(rgba(var(--route-rgb),.62),rgba(255,215,130,.08));
}
.journey-node:hover,
.journey-node:not([disabled]):hover{
  transform:none;
  border-color:rgba(var(--route-rgb),.34);
  background:rgba(var(--route-rgb),.07);
  box-shadow:none;
}
.journey-node:focus-visible{
  outline:2px solid rgba(var(--route-rgb),.9);
  outline-offset:1px;
}
.journey-node.selected{
  border-color:rgba(var(--route-rgb),.68);
  background:
    linear-gradient(90deg,rgba(var(--route-rgb),.15),rgba(var(--route-rgb),.035)),
    rgba(17,16,13,.92);
  box-shadow:inset 3px 0 0 rgba(var(--route-rgb),.82),0 7px 20px rgba(0,0,0,.34);
}
.journey-node.completed{border-color:rgba(104,222,168,.16)}
.journey-node.completed.selected{border-color:rgba(104,222,168,.52);box-shadow:inset 3px 0 0 rgba(104,222,168,.8),0 7px 20px rgba(0,0,0,.34)}
.journey-node.frontier .journey-node-marker{animation:journeyFrontierPulse 2.4s ease-in-out infinite}
.journey-node.locked{
  filter:none;
  opacity:.56;
  cursor:pointer;
  background:rgba(7,8,8,.52);
}
.journey-node.locked:hover{opacity:.76}
.journey-node-marker{
  position:relative;
  z-index:1;
  width:42px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--route-rgb),.5);
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 32%,rgba(var(--route-rgb),.17),transparent 58%),
    #080908;
  color:rgb(var(--route-rgb));
  font:normal 1.22rem/1 serif;
  box-shadow:0 0 15px rgba(var(--route-rgb),.12);
}
.journey-node.completed .journey-node-marker{
  border-color:rgba(104,222,168,.58);
  color:#a5f1ce;
}
.journey-node.guardian-gate .journey-node-marker{
  border-radius:8px;
  transform:rotate(45deg) scale(.8);
}
.journey-node.guardian-gate .journey-node-marker>span{transform:rotate(-45deg) scale(1.25)}
.journey-node-copy{min-width:0;display:grid;gap:2px}
.journey-node .chapter-index{
  color:rgba(var(--route-rgb),.92);
  font-size:.5rem;
  font-weight:850;
  letter-spacing:.16em;
}
.journey-node-copy strong{
  overflow:hidden;
  color:#f7e9c5;
  font-size:.82rem;
  font-weight:750;
  line-height:1.16;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.journey-node .chapter-status{
  margin:0;
  color:#a9a18f;
  font-size:.58rem;
  line-height:1.15;
}
.journey-node .chapter-stars{color:#ffd86b;letter-spacing:.1em}
.journey-node-chevron{color:rgba(var(--route-rgb),.55);font-size:1.2rem}
@keyframes journeyFrontierPulse{
  0%,100%{box-shadow:0 0 11px rgba(var(--route-rgb),.12)}
  50%{box-shadow:0 0 22px rgba(var(--route-rgb),.32)}
}

.journey-briefing{
  --chapter-rgb:216,175,67;
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:18px;
  overflow-x:hidden;
  overflow-y:auto;
  isolation:isolate;
  border:1px solid rgba(var(--chapter-rgb),.34);
  border-radius:16px;
  background:
    linear-gradient(140deg,rgba(var(--chapter-rgb),.105),transparent 38%),
    linear-gradient(180deg,rgba(13,13,12,.96),rgba(4,5,5,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 38px rgba(0,0,0,.38);
}
.journey-briefing[data-affinity="solar"]{--chapter-rgb:241,190,67}
.journey-briefing[data-affinity="echo"],
.journey-briefing[data-affinity="bastet"]{--chapter-rgb:173,135,255}
.journey-briefing[data-affinity="river"],
.journey-briefing[data-affinity="sobek"]{--chapter-rgb:72,210,170}
.journey-briefing[data-affinity="anubis"]{--chapter-rgb:232,190,83}
.journey-briefing-aura{
  position:absolute;
  z-index:-1;
  top:-105px;
  right:-85px;
  width:300px;
  aspect-ratio:1;
  border:1px solid rgba(var(--chapter-rgb),.12);
  border-radius:50%;
  box-shadow:0 0 80px rgba(var(--chapter-rgb),.1),inset 0 0 55px rgba(var(--chapter-rgb),.04);
}
.journey-briefing-aura::before,
.journey-briefing-aura::after{
  content:"";
  position:absolute;
  inset:13%;
  border:1px solid rgba(var(--chapter-rgb),.1);
  border-radius:50%;
}
.journey-briefing-aura::after{inset:28%}
.journey-chapter-heading{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:13px;
  align-items:center;
  margin-bottom:10px;
}
.journey-chapter-glyph{
  width:58px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--chapter-rgb),.48);
  border-radius:12px;
  background:rgba(var(--chapter-rgb),.075);
  color:rgb(var(--chapter-rgb));
  font:normal 1.8rem/1 serif;
  text-shadow:0 0 18px rgba(var(--chapter-rgb),.45);
}
.journey-chapter-heading .eyebrow{
  margin:0 0 2px;
  color:rgb(var(--chapter-rgb));
  font-size:.55rem;
  line-height:1.25;
}
.journey-chapter-heading h3{
  margin:0;
  color:#fff0c7;
  font:700 clamp(1.35rem,3vw,1.8rem)/1.08 Georgia,'Times New Roman',serif;
  letter-spacing:.025em;
}
.journey-chapter-stars{
  margin-top:2px;
  color:#ffd86b;
  font-size:.7rem;
  letter-spacing:.14em;
}
.journey-chapter-desc{
  max-width:62ch;
  margin:0 0 11px;
  color:#d8d1c1;
  font-size:.83rem;
  line-height:1.45;
}
.journey-chapter-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:10px;
  overflow:hidden;
  border:1px solid rgba(var(--chapter-rgb),.16);
  border-radius:10px;
  background:rgba(0,0,0,.22);
}
.journey-chapter-stats>div{
  display:grid;
  gap:2px;
  padding:8px 9px;
  border-right:1px solid rgba(var(--chapter-rgb),.12);
}
.journey-chapter-stats>div:last-child{border-right:0}
.journey-chapter-stats span{
  color:#969081;
  font-size:.5rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.journey-chapter-stats strong{color:#f5e6bd;font-size:.74rem}
.journey-chapter-stats small{
  color:#9fd9c3;
  font-size:.48rem;
  line-height:1.15;
}
.journey-law{
  display:grid;
  gap:3px;
  margin-bottom:9px;
  padding:9px 11px;
  border-left:2px solid rgba(var(--chapter-rgb),.68);
  border-radius:0 9px 9px 0;
  background:rgba(var(--chapter-rgb),.06);
}
.journey-law-kicker,
.journey-target>span{
  color:rgb(var(--chapter-rgb));
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.16em;
}
.journey-law strong{color:#eee4ce;font-size:.76rem;line-height:1.35}
.journey-target{
  display:grid;
  gap:3px;
  margin-bottom:9px;
  padding:0 2px;
}
.journey-target p{margin:0;color:#ded5c1;font-size:.72rem;line-height:1.38}
.journey-target small{
  display:block;
  margin-top:3px;
  color:#9edbc1;
  font-size:.65rem;
}
.journey-chapter-reward{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-top:auto;
  padding:8px 10px;
  border:1px solid rgba(var(--chapter-rgb),.2);
  border-radius:9px;
  background:rgba(0,0,0,.24);
}
.journey-chapter-reward span{
  color:#aaa28f;
  font-size:.58rem;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.journey-chapter-reward strong{color:#ffe198;font-size:.72rem;text-align:right}
.journey-chapter-reward.claimed strong{color:#9fd9c3}
.journey-continue{
  width:100%;
  min-height:48px;
  margin-top:10px;
  border-color:rgba(var(--chapter-rgb),.58);
  background:
    linear-gradient(90deg,rgba(var(--chapter-rgb),.16),rgba(var(--chapter-rgb),.055)),
    linear-gradient(180deg,#171510,#090a09);
  color:#fff0c7;
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.34),0 0 18px rgba(var(--chapter-rgb),.08);
}
.journey-continue:hover:not(:disabled){
  border-color:rgba(var(--chapter-rgb),.9);
  box-shadow:0 9px 26px rgba(0,0,0,.4),0 0 24px rgba(var(--chapter-rgb),.18);
}
.journey-continue:disabled{opacity:.42;cursor:not-allowed}
.journey-lock-reason{
  min-height:1em;
  margin:5px 0 0;
  color:#c6a984;
  font-size:.62rem;
  text-align:center;
}
.journey-actions{
  flex:0 0 auto;
  min-height:44px;
  margin-top:0;
  padding-top:11px;
  border-top:1px solid rgba(255,215,130,.11);
}
.journey-secondary-actions{display:flex;gap:8px}
.journey-actions .btn.small{min-height:40px}

@media (max-width:640px){
  #modal-journey{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .journey-box{
    width:100%;
    height:calc(100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding:13px;
    border-radius:16px;
  }
  .journey-heading{display:flex;padding-bottom:10px}
  .journey-heading .eyebrow{font-size:.5rem}
  .journey-heading h2{font-size:1.18rem}
  .journey-progress{min-width:166px}
  .journey-progress>div{padding:6px 5px}
  .journey-progress strong{font-size:.7rem}
  .journey-progress span{font-size:.42rem;letter-spacing:.09em}
  .journey-overview{
    grid-template-columns:1fr;
    grid-template-rows:116px minmax(0,1fr);
    gap:9px;
    padding:9px 0;
  }
  .journey-route-panel{border-radius:12px}
  .journey-route-heading{display:none}
  .journey-map{
    display:flex;
    flex-direction:row;
    gap:7px;
    padding:8px;
    scroll-snap-type:x proximity;
  }
  .journey-node{
    flex:0 0 112px;
    min-height:98px;
    grid-template-columns:1fr;
    grid-template-rows:39px minmax(0,1fr);
    gap:4px;
    justify-items:center;
    padding:7px 6px 6px;
    text-align:center;
    scroll-snap-align:center;
  }
  .journey-node:not(:last-child)::after{
    left:auto;
    top:27px;
    right:-9px;
    width:10px;
    height:1px;
  }
  .journey-node-marker{width:37px;font-size:1.02rem}
  .journey-node-copy{width:100%;justify-items:center;gap:1px}
  .journey-node .chapter-index{font-size:.42rem}
  .journey-node-copy strong{max-width:100%;font-size:.67rem}
  .journey-node .chapter-status{font-size:.5rem}
  .journey-node-chevron{display:none}
  .journey-node.selected{box-shadow:inset 0 -3px 0 rgba(var(--route-rgb),.82)}
  .journey-node.completed.selected{box-shadow:inset 0 -3px 0 rgba(104,222,168,.8)}
  .journey-briefing{padding:12px;border-radius:12px}
  .journey-briefing-aura{width:230px}
  .journey-chapter-heading{grid-template-columns:46px minmax(0,1fr);gap:9px;margin-bottom:7px}
  .journey-chapter-glyph{width:46px;border-radius:10px;font-size:1.45rem}
  .journey-chapter-heading .eyebrow{font-size:.46rem}
  .journey-chapter-heading h3{font-size:1.25rem}
  .journey-chapter-stars{font-size:.61rem}
  .journey-chapter-desc{margin-bottom:8px;font-size:.72rem;line-height:1.35}
  .journey-chapter-stats{margin-bottom:7px}
  .journey-chapter-stats>div{padding:6px 7px}
  .journey-chapter-stats span{font-size:.43rem}
  .journey-chapter-stats strong{font-size:.66rem}
  .journey-law{margin-bottom:7px;padding:7px 9px}
  .journey-law strong{font-size:.67rem}
  .journey-target{margin-bottom:7px}
  .journey-target p{font-size:.65rem}
  .journey-target small{font-size:.58rem}
  .journey-chapter-reward{padding:7px 8px}
  .journey-chapter-reward span{font-size:.5rem}
  .journey-chapter-reward strong{font-size:.64rem}
  .journey-continue{min-height:44px;margin-top:8px;font-size:.67rem}
  .journey-lock-reason{font-size:.57rem}
  .journey-actions{padding-top:8px;gap:7px}
  .journey-secondary-actions{gap:6px}
  .journey-actions .btn.small{min-height:40px;padding:7px 9px;font-size:.7rem}
}

@media (max-width:390px){
  .journey-heading{gap:7px}
  .journey-heading h2{font-size:1.03rem}
  .journey-heading .eyebrow{font-size:.43rem}
  .journey-progress{min-width:148px}
  .journey-progress>div{padding-inline:3px}
  .journey-overview{grid-template-rows:110px minmax(0,1fr)}
  .journey-node{flex-basis:103px;min-height:92px}
  .journey-actions{align-items:stretch}
  .journey-secondary-actions{flex:1}
  .journey-actions .btn.small{padding-inline:7px;font-size:.64rem}
}

@media (orientation:landscape) and (max-height:520px){
  #modal-journey{padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left))}
  .journey-box{width:100%;height:calc(100dvh - 12px);padding:8px 11px;border-radius:12px}
  .journey-heading{display:flex;padding-bottom:6px}
  .journey-heading .eyebrow{font-size:.4rem}
  .journey-heading h2{font-size:1rem}
  .journey-progress{min-width:206px}
  .journey-progress>div{padding:4px 6px}
  .journey-progress strong{font-size:.65rem}
  .journey-progress span{font-size:.38rem}
  .journey-overview{
    grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
    grid-template-rows:minmax(0,1fr);
    gap:8px;
    padding:7px 0 6px;
  }
  .journey-route-heading{display:none}
  .journey-map{flex-direction:column;gap:3px;padding:6px;scroll-snap-type:y proximity}
  .journey-node{
    flex:0 0 auto;
    min-height:42px;
    grid-template-columns:31px minmax(0,1fr) 10px;
    grid-template-rows:1fr;
    gap:7px;
    justify-items:stretch;
    padding:4px 7px;
    text-align:left;
  }
  .journey-node:not(:last-child)::after{left:21px;right:auto;top:34px;width:1px;height:12px}
  .journey-node-marker{width:29px;font-size:.84rem}
  .journey-node-copy{justify-items:start}
  .journey-node .chapter-index{font-size:.37rem}
  .journey-node-copy strong{font-size:.59rem}
  .journey-node .chapter-status{display:none}
  .journey-node-chevron{display:block;font-size:.9rem}
  .journey-node.selected{box-shadow:inset 3px 0 0 rgba(var(--route-rgb),.82)}
  .journey-briefing{padding:8px 10px}
  .journey-briefing-aura{width:180px}
  .journey-chapter-heading{grid-template-columns:37px minmax(0,1fr);gap:8px;margin-bottom:4px}
  .journey-chapter-glyph{width:37px;font-size:1.15rem}
  .journey-chapter-heading .eyebrow{font-size:.36rem}
  .journey-chapter-heading h3{font-size:1rem}
  .journey-chapter-stars{font-size:.49rem}
  .journey-chapter-desc{margin-bottom:5px;font-size:.57rem;line-height:1.26}
  .journey-chapter-stats{margin-bottom:4px}
  .journey-chapter-stats>div{padding:4px 6px}
  .journey-chapter-stats span{font-size:.34rem}
  .journey-chapter-stats strong{font-size:.53rem}
  .journey-law{margin-bottom:4px;padding:4px 7px}
  .journey-law-kicker,.journey-target>span{font-size:.34rem}
  .journey-law strong{font-size:.52rem;line-height:1.23}
  .journey-target{margin-bottom:4px;gap:1px}
  .journey-target p{font-size:.49rem;line-height:1.25}
  .journey-target small{display:none}
  .journey-chapter-reward{padding:4px 7px}
  .journey-chapter-reward span{font-size:.37rem}
  .journey-chapter-reward strong{font-size:.5rem}
  .journey-continue{min-height:32px;margin-top:5px;padding:4px 8px;font-size:.52rem}
  .journey-lock-reason{min-height:0;margin-top:2px;font-size:.43rem}
  .journey-actions{min-height:34px;padding-top:5px}
  .journey-actions .btn.small{min-height:32px;padding:4px 8px;font-size:.56rem}
}

html[data-vfx="low"] .journey-briefing-aura::before,
html[data-vfx="low"] .journey-briefing-aura::after{display:none}
html.reduced-motion .journey-node,
html.reduced-motion .journey-node-marker{animation:none!important;transition:none!important}
@media (prefers-contrast:more){
  .journey-box,.journey-route-panel,.journey-briefing,.journey-node{background:#030303}
  .journey-node{border-color:#8d816b}
  .journey-node.selected{border-color:#ffe09a}
  .journey-chapter-desc,.journey-law strong,.journey-target p{color:#fff}
}