/* Trial of Six Gates: the night version of the archives, storm violet and lightning gold */
body.trials{background:radial-gradient(1200px 700px at 15% 10%,rgba(124,92,214,.35),transparent 60%),radial-gradient(1000px 700px at 85% 55%,rgba(214,92,170,.22),transparent 60%),linear-gradient(180deg,#140f2b 0%,#1c1540 40%,#241a4a 70%,#140f2b 100%);color:#d9cfee}
.trials h1,.trials h2,.trials h3{color:#fff6e0}
.trials .eyebrow{font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#f3d08a;margin-bottom:6px}
.trials footer{background:transparent;border-color:rgba(243,208,138,.2)}
.trials footer .legal,.trials footer a{color:#bfb2da}

.tr-hero{position:relative;overflow:hidden;background:#0d0a1f}
.tr-hero>img{display:block;width:100%;height:min(88vh,820px);object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.tr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,15,43,.35) 0%,rgba(20,15,43,0) 35%,rgba(20,15,43,.75) 82%,#140f2b 100%)}
.tr-hero .back{position:absolute;z-index:3;top:16px;left:18px;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(20,15,43,.55);padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tr-hero .back.right{left:auto;right:18px}
.tr-title{position:absolute;z-index:2;left:0;right:0;bottom:7%;text-align:center;padding:0 16px}
.tr-title .kicker{font-weight:700;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:#f3d08a}
.tr-title h1{font-size:clamp(2.3rem,7.5vw,5.2rem);line-height:1.03;margin-top:8px;color:#fff6e0;text-shadow:0 0 6px rgba(255,246,224,.95),0 0 18px rgba(243,208,138,.9),0 0 38px rgba(243,208,138,.75),0 0 70px rgba(240,169,207,.6)}
.tr-title .kicker,.tr-title .tag{text-shadow:0 0 6px rgba(20,15,43,.95),0 0 16px rgba(20,15,43,.8)}
.tr-title .tag{margin-top:10px;font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-size:1.35rem;color:#efe4fa}

.gauge{position:sticky;top:0;z-index:30;display:flex;justify-content:center;gap:4px;padding:10px 12px 12px;background:rgba(20,15,43,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,208,138,.25)}
.gauge a{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:2px 6px;text-decoration:none;color:rgba(239,228,250,.45);transition:color .4s}
.gauge b{font-family:'Cinzel',serif;font-size:1rem}
.gauge span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gauge a.on{color:#f3d08a;text-shadow:0 0 12px rgba(243,208,138,.7)}
.gauge .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#c9a6ec,#f0a9cf,#f3d08a);box-shadow:0 0 12px rgba(243,208,138,.9);transition:width .8s ease}

.gauntlet{position:relative;max-width:1180px;margin:0 auto;padding:40px 20px 60px}
.bolt{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.bolt .seg{fill:none;stroke:rgba(201,166,236,.22);stroke-width:3;stroke-linejoin:round;stroke-dasharray:6 10;transition:stroke .8s,stroke-width .8s}
.bolt .seg.lit{stroke:#f3d08a;stroke-width:4;stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(243,208,138,.95)) drop-shadow(0 0 18px rgba(240,169,207,.6))}

.plate{position:relative;z-index:1;padding:22px 24px;border-radius:18px;background:linear-gradient(160deg,rgba(38,29,78,.88),rgba(28,21,64,.92));border:1px solid rgba(243,208,138,.35);box-shadow:0 0 0 1px rgba(255,246,224,.05) inset,0 20px 50px rgba(0,0,0,.45)}
.plate h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px}
.plate p+p{margin-top:10px}

.opening,.through{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center;margin-bottom:70px}
.opening>img,.through>img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.through{margin:90px 0 50px}
.through.ledger{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.through.ledger>img{order:2}

.gate{position:relative;z-index:1;display:grid;grid-template-columns:96px minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:center;margin:0 0 90px;opacity:.55;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.gate.reached{opacity:1;transform:none}
.gate.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 96px}
.gate.flip .medal{grid-column:3;grid-row:1}
.gate.flip .shot{grid-column:2;grid-row:1}
.gate.flip .plate{grid-column:1;grid-row:1}
.medal{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e6,#f3d08a 55%,#b9822f);border:4px solid #2a1f57;box-shadow:0 0 0 2px #f3d08a,0 0 30px rgba(243,208,138,.55)}
.medal span{font-family:'Cinzel',serif;font-weight:700;font-size:1.7rem;color:#2a1f57}
.gate.reached .medal{animation:flare 1.2s ease 1}
@keyframes flare{0%{box-shadow:0 0 0 2px #f3d08a,0 0 0 rgba(243,208,138,0)}40%{box-shadow:0 0 0 6px #fff6e0,0 0 70px rgba(243,208,138,1)}100%{box-shadow:0 0 0 2px #f3d08a,0 0 30px rgba(243,208,138,.55)}}
.shot{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(243,208,138,.35),0 24px 60px rgba(0,0,0,.55)}
.shot img{display:block;width:100%;height:auto;transition:transform 6s ease}
.gate.reached .shot img:first-child{transform:scale(1.06)}
.shot .second{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.shot:hover .second{opacity:1}
.tests{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.tests span{font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#bfb2da;margin-right:4px}
.tests b{padding:3px 11px;border-radius:999px;font-size:.8rem;color:#2a1f57;background:linear-gradient(90deg,#f3d08a,#f0c2dc)}
.heat{display:flex;gap:5px;margin-top:12px}
.heat i{flex:1;height:7px;border-radius:4px;background:rgba(239,228,250,.12)}
.heat i.on{background:linear-gradient(90deg,#c9a6ec,#f0a9cf,#f3d08a);box-shadow:0 0 8px rgba(243,208,138,.6)}
.final .heat i.on{background:linear-gradient(90deg,#f0a9cf,#ffd27a,#fff6e0)}
.note{margin-top:14px;padding:10px 14px;border-left:3px solid #f3d08a;border-radius:0 10px 10px 0;background:rgba(243,208,138,.08);font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-size:1.08rem;color:#efe4fa}
.note b{font-family:'Nunito',sans-serif;font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#f3d08a;margin-right:4px}
.final .shot{box-shadow:0 0 0 2px rgba(243,208,138,.6),0 0 60px rgba(240,169,207,.35),0 24px 60px rgba(0,0,0,.6)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.links .play{display:inline-block;text-decoration:none;font-weight:700;padding:10px 20px;border-radius:999px;color:#fff;background:linear-gradient(90deg,#b9a3d9,#e3a6c9)}
.links .play.ghost{background:transparent;border:1px solid rgba(243,208,138,.6);color:#f3d08a}

@media (prefers-reduced-motion:reduce){.gate{opacity:1;transform:none;transition:none}.shot img{transition:none}.gate.reached .medal{animation:none}}
@media (max-width:860px){
  .gate,.gate.flip{grid-template-columns:58px minmax(0,1fr);gap:12px 14px;margin-bottom:60px}
  .gate .medal,.gate.flip .medal{grid-column:1;grid-row:1}
  .gate .shot,.gate.flip .shot{grid-column:2;grid-row:1}
  .gate .plate,.gate.flip .plate{grid-column:1/3;grid-row:2}
  .medal{width:54px;height:54px;border-width:3px}.medal span{font-size:1.05rem}
  .opening,.through,.through.ledger{grid-template-columns:minmax(0,1fr)}
  .through.ledger>img{order:0}
  .gauge a{min-width:0;flex:1}
  .gauge span{font-size:.54rem;letter-spacing:.06em}
  .tr-hero .back{top:auto;bottom:10px;font-size:.66rem;padding:5px 10px}
  .tr-title{bottom:16%}
}
.tr-hero>video{display:block;width:100%;height:min(88vh,820px);object-fit:cover;background:#0d0a1f}

/* the ledger entry: one box, the picture inside on the left, the words on the right */
.through.ledger{display:block}
.ledgerbox{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center;padding:18px}
.ledgerbox>img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover;object-position:30% 50%;border-radius:12px;box-shadow:0 0 0 1px rgba(243,208,138,.35)}
.ledgerbox .lb-words{padding:6px 10px 6px 0}

/* the seal of the six gates */
.seal{position:relative;z-index:1;text-align:center;margin:30px auto 10px;max-width:420px}
.seal svg{display:block;width:min(360px,80vw);height:auto;margin:0 auto;overflow:visible}
.seal text{font-family:'Cinzel',serif;font-weight:700;font-size:19px;fill:#2a1f57}
.seal .ring{stroke-dasharray:1400;stroke-dashoffset:1400;filter:drop-shadow(0 0 5px rgba(243,208,138,.9)) drop-shadow(0 0 14px rgba(240,169,207,.55));transition:stroke-dashoffset 2.6s ease .3s}
.seal .m{opacity:.35;transition:opacity .6s ease}
.seal .core,.seal .star{opacity:.25;transform-origin:200px 200px;transition:opacity 1s ease 2.6s,transform 1s ease 2.6s;transform:scale(.7)}
.seal.lit .ring{stroke-dashoffset:0}
.seal.lit .m{opacity:1}
.seal.lit .m1{transition-delay:.3s}.seal.lit .m2{transition-delay:.7s}.seal.lit .m3{transition-delay:1.1s}.seal.lit .m4{transition-delay:1.5s}.seal.lit .m5{transition-delay:1.9s}.seal.lit .m6{transition-delay:2.3s}
.seal.lit .core,.seal.lit .star{opacity:1;transform:none}
.seal.lit .star{filter:drop-shadow(0 0 8px #fff6e0) drop-shadow(0 0 20px rgba(243,208,138,.9))}
.seal-line{margin-top:14px;font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-size:1.3rem;color:#efe4fa}
@media (max-width:860px){.ledgerbox{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}.ledgerbox>img{min-height:0;height:auto}.ledgerbox .lb-words{padding:0 4px 6px}}
@media (prefers-reduced-motion:reduce){.seal .ring,.seal .m,.seal .core,.seal .star{transition:none}}