/* self-hosted Rajdhani — instant, offline-capable, no font-swap flash (premium apps don't
   wait on a CDN to draw their own type). Weights map: 700 covers the 800 declarations too. */
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/rajdhani-500.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/rajdhani-500.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/rajdhani-600.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/rajdhani-700.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/rajdhani-700.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/rajdhani-700.woff2') format('woff2');}

:root{
  --ac:#3fa9ff; --ac-dim:#1c5f9e; --vi:#a86bff;
  --gd:#ffce4d; --gn:#37e08b; --rd:#ff5d7e;
  --ink:#eaf4ff; --dim:#6b87a6;
  --card:rgba(8,20,38,.78); --line:rgba(63,169,255,.35);
  /* ===== MOTION SYSTEM — one unified language (values mirror what the app already used,
     now named so every surface shares the same feel). --ease-spring: crisp overshoot for
     press/pop; --ease-out: standard decel for bars/screens; --ease-snap: heavy landing for
     cinema. Durations: press < ui < cine. ===== */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.2,.9,.3,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);
  --dur-press:.12s; --dur-ui:.26s; --dur-cine:.5s;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
html,body{background:#02060e;height:100%;overscroll-behavior:none;}
body{
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;color:var(--ink);
  position:fixed;inset:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,#0a1a30 0%,#040d1c 55%,#02060e 100%);
  touch-action:manipulation;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;transition:transform var(--dur-press) var(--ease-spring),filter .15s ease;}
.dt-scroll::-webkit-scrollbar,#chat-msgs::-webkit-scrollbar,.bptrack::-webkit-scrollbar,.vpane::-webkit-scrollbar,.screen::-webkit-scrollbar{width:0;height:0;}
.dt-scroll,#chat-msgs,.vpane{scrollbar-width:none;}
button:active{transform:scale(.94);filter:brightness(1.3);}

/* ---------- global game atmosphere ---------- */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;}
#scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(63,169,255,.03) 3px 4px);}
#vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,3,10,.7) 100%);}

/* ---------- shell ---------- */
#rot{position:fixed;inset:0;overflow:hidden;z-index:2;}
#app{position:absolute;inset:0;}
.screen{
  position:absolute;inset:0;display:none;
  padding:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) calc(92px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.screen.on{display:block;animation:scrIn .38s cubic-bezier(.2,.9,.3,1);}
@keyframes scrIn{
  0%{opacity:0;transform:scale(1.035);filter:brightness(2) blur(4px);}
  60%{filter:brightness(1.15) blur(0);}
  100%{opacity:1;transform:scale(1);filter:brightness(1);}
}
.screen>.inner{max-width:520px;margin:0 auto;}

/* ---------- shared ---------- */
/* THE SYSTEM WINDOW — every panel reads as a holographic frame: glass fill, a glowing
   top edge, and bright cyan corner brackets (the S4 window signature). Brackets are
   painted as background layers so nothing clips the content or kills the outer glow. */
.card{
  --br:#57b7ff;                       /* bracket colour, overridable per accent */
  position:relative;padding:13px 15px;border-radius:3px;margin-top:12px;
  background:
    linear-gradient(var(--br),var(--br)) left 0 top 0/17px 2px no-repeat,
    linear-gradient(var(--br),var(--br)) left 0 top 0/2px 17px no-repeat,
    linear-gradient(var(--br),var(--br)) right 0 top 0/17px 2px no-repeat,
    linear-gradient(var(--br),var(--br)) right 0 top 0/2px 17px no-repeat,
    linear-gradient(var(--br),var(--br)) left 0 bottom 0/17px 2px no-repeat,
    linear-gradient(var(--br),var(--br)) left 0 bottom 0/2px 17px no-repeat,
    linear-gradient(var(--br),var(--br)) right 0 bottom 0/17px 2px no-repeat,
    linear-gradient(var(--br),var(--br)) right 0 bottom 0/2px 17px no-repeat,
    radial-gradient(130% 90% at 12% -10%, rgba(63,169,255,.16), transparent 55%),
    linear-gradient(157deg, rgba(26,54,92,.6) 0%, rgba(11,26,48,.72) 52%, rgba(6,16,33,.85) 100%);
  border:1px solid rgba(63,169,255,.15);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(63,169,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 40px rgba(63,169,255,.05);
  animation:cardbreathe 5s ease-in-out infinite;
}
.card:nth-of-type(2n){animation-delay:1.4s;}
.card:nth-of-type(3n){animation-delay:2.5s;}
/* tactile press — transform only, so it never fights cardbreathe's box-shadow loop */
.card[onclick]{transition:transform var(--dur-press) var(--ease-spring);}
.card[onclick]:active{transform:scale(.988);}
/* breathing via a compositable filter, NOT box-shadow: the old keyframe repainted a 4-layer
   shadow on every card, every frame, forever — the single biggest idle-frame cost in the app.
   brightness/saturate animate on the compositor; the felt "living card" effect is the same. */
@keyframes cardbreathe{50%{filter:brightness(1.05) saturate(1.05);}}
/* glowing top edge line strung between the two upper brackets */
.card::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(87,183,255,.55),transparent);box-shadow:0 0 6px rgba(87,183,255,.4);}
/* accent recolour hooks so gold/violet/green panels keep the System-window language */
.card.gd{--br:#ffd76a;} .card.vi{--br:#c08bff;} .card.gn{--br:#5ff0a6;}

/* ---------- premium juice: make the numbers read like power, headers like a HUD ---------- */
/* section headers get a leading energy tick + faint glow */
.h-sec{position:relative;}
.card>.h-sec:first-child{padding-left:11px;}
.card>.h-sec:first-child::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:11px;background:var(--br,var(--ac));box-shadow:0 0 8px var(--br,var(--ac));border-radius:1px;}
.h-big{text-shadow:0 0 18px rgba(63,169,255,.35);}
/* the stat readout — glowing values, weakest flagged in red */
#statlist .tiny{font-weight:600;}
#statlist .tiny b{font-size:14px;font-weight:800;text-shadow:0 0 12px rgba(63,169,255,.55);letter-spacing:.5px;}
#statlist .statbar{background:rgba(8,20,40,.9);box-shadow:inset 0 0 4px rgba(0,0,0,.6);}
#statlist .statbar i{box-shadow:0 0 8px rgba(63,169,255,.7),inset 0 1px 0 rgba(255,255,255,.4);}
/* richer radar — deeper fill, crisper vertices */
.radar .val{fill:rgba(63,169,255,.28);stroke-width:1.8;filter:drop-shadow(0 0 8px rgba(63,169,255,.8));}
.radar .pt{fill:#eaf4ff;filter:drop-shadow(0 0 4px var(--ac));}
.radar .grid{stroke:rgba(63,169,255,.22);}
/* premium quest checkbox — angular, lit rim, energises when cleared */
.cb{border-radius:4px;border:1.5px solid rgba(87,183,255,.55);
  background:linear-gradient(160deg,rgba(16,34,60,.9),rgba(8,18,36,.9));
  box-shadow:inset 0 0 8px rgba(63,169,255,.15),0 0 6px rgba(63,169,255,.12);}
.task.done .cb{background:linear-gradient(160deg,#4fb0ff,#2b7fd8);border-color:#8fd0ff;
  box-shadow:0 0 14px rgba(63,169,255,.7),inset 0 1px 0 rgba(255,255,255,.5);}
/* the XP reward + currency numbers glow gold — the dopamine hit should feel lit */
.txp{text-shadow:0 0 12px rgba(255,206,77,.55);}
.curr b{text-shadow:0 0 10px currentColor;}

/* ---------- the juice layer: sparks, surges, seals ---------- */
.burst{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ac);z-index:95;pointer-events:none;
  box-shadow:0 0 8px var(--ac);animation:burstfly .65s cubic-bezier(.15,.8,.3,1) forwards;}
@keyframes burstfly{to{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0;}}
.topbar .bar.gain i{animation:xpgain .85s ease;}
@keyframes xpgain{0%{filter:brightness(2.6);box-shadow:0 0 24px var(--ac);}100%{filter:none;}}
.dayseal{position:absolute;inset:0;z-index:96;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  pointer-events:none;background:radial-gradient(ellipse at center,rgba(63,169,255,.18),rgba(1,4,10,.78) 72%);
  animation:sealio 2.15s cubic-bezier(.2,.9,.3,1) forwards;}
.dayseal b{font-size:30px;font-weight:900;letter-spacing:8px;color:var(--ink);
  text-shadow:0 0 30px var(--ac),0 0 70px rgba(63,169,255,.55);
  animation:sealslam .55s cubic-bezier(.1,1.4,.4,1) both;}
.dayseal span{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--gd);text-transform:uppercase;
  text-shadow:0 0 14px rgba(255,206,77,.5);animation:sldIn .5s ease .25s backwards;}
@keyframes sealslam{0%{transform:scale(2.6);opacity:0;filter:blur(6px);}60%{transform:scale(.96);opacity:1;filter:blur(0);}100%{transform:scale(1);}}
@keyframes sealio{0%{opacity:0;}9%{opacity:1;}78%{opacity:1;}100%{opacity:0;}}

/* ---------- THE SYSTEM NOTIFICATION — the genre's iconic window, reusable app-wide ----------
   Glass panel · thin lit frame · bordered "! NOTIFICATION" header · appear/vanish with sound.
   mode 'next' = the green enter-arrow · mode 'choice' = ✓/✗ squares that STAMP the verdict. */
.sysnote-ov{position:absolute;inset:0;z-index:98;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(20,60,120,.20),rgba(1,4,10,.82) 75%);
  animation:snOvIn .3s ease;}
.sysnote-ov.closing{animation:snOvOut .22s ease forwards;}
@keyframes snOvIn{from{opacity:0;}}
@keyframes snOvOut{to{opacity:0;}}
.sysnote{position:relative;width:min(88%,470px);padding:22px 24px 20px;border-radius:4px;
  background:
    radial-gradient(140% 100% at 50% 0%,rgba(40,90,170,.22),transparent 55%),
    linear-gradient(160deg,rgba(10,26,52,.94),rgba(4,10,24,.97));
  border:1px solid rgba(150,210,255,.55);
  box-shadow:0 0 30px rgba(63,169,255,.35),0 0 90px rgba(63,169,255,.15),
    inset 0 0 40px rgba(63,169,255,.08),inset 0 1px 0 rgba(255,255,255,.18);
  animation:snIn .42s cubic-bezier(.16,1.2,.4,1) both;}
.sysnote-ov.closing .sysnote{animation:snOut .22s cubic-bezier(.6,0,.8,.4) forwards;}
@keyframes snIn{0%{transform:scale(1.14);opacity:0;filter:blur(8px) brightness(2.4);}
  55%{opacity:1;filter:blur(0) brightness(1.35);}100%{transform:scale(1);filter:none;}}
@keyframes snOut{0%{opacity:1;}100%{transform:scale(.92);opacity:0;filter:blur(6px) brightness(1.8);}}
/* corner ticks on the frame */
.sysnote::before,.sysnote::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:2px solid rgba(190,230,255,.9);filter:drop-shadow(0 0 6px rgba(63,169,255,.8));}
.sysnote::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.sysnote::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}
.sn-head{display:flex;align-items:center;gap:10px;justify-content:center;
  border:1px solid rgba(170,220,255,.65);border-radius:3px;padding:7px 12px;margin:0 auto 16px;width:max-content;max-width:100%;
  background:rgba(10,28,56,.5);box-shadow:0 0 16px rgba(63,169,255,.25),inset 0 0 12px rgba(63,169,255,.10);}
.sn-bang{width:20px;height:20px;border:1.6px solid #cfe9ff;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#eaf6ff;
  text-shadow:0 0 8px var(--ac);box-shadow:0 0 10px rgba(63,169,255,.5);}
.sn-title{font-size:13px;font-weight:800;letter-spacing:6px;color:#eaf6ff;text-transform:uppercase;
  text-shadow:0 0 14px rgba(120,200,255,.9),0 0 30px rgba(63,169,255,.5);}
.sn-body{text-align:center;font-size:11px;letter-spacing:1.2px;line-height:1.9;color:#dcefff;text-transform:uppercase;
  text-shadow:0 0 10px rgba(63,169,255,.35);}
.sn-big{font-size:19px;font-weight:900;letter-spacing:3.5px;color:#fff;line-height:1.5;
  text-shadow:0 0 18px rgba(120,200,255,.9),0 0 44px rgba(63,169,255,.6);}
.sn-sub{font-size:9px;letter-spacing:2px;color:var(--dim);margin-top:10px;line-height:1.8;}
.sn-btns{display:flex;gap:14px;justify-content:center;margin-top:18px;}
.sn-btn{width:52px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1.6px solid;cursor:pointer;background:rgba(6,16,32,.6);transition:transform .1s;}
.sn-btn:active{transform:scale(.9);}
.sn-btn svg{width:24px;height:24px;}
.sn-next{border-color:#57e89b;box-shadow:0 0 16px rgba(87,232,155,.45),inset 0 0 10px rgba(87,232,155,.15);color:#7dffb8;}
.sn-ok{border-color:#57e89b;box-shadow:0 0 16px rgba(87,232,155,.4),inset 0 0 10px rgba(87,232,155,.12);color:#7dffb8;font-size:22px;font-weight:900;}
.sn-deny{border-color:#ff5d7e;box-shadow:0 0 16px rgba(255,93,126,.4),inset 0 0 10px rgba(255,93,126,.12);color:#ff8ba3;font-size:22px;font-weight:900;}
/* onboarding acknowledgment — an EMPTY box the hunter checks off; a green tick fills it, then it proceeds */
.sn-box{position:relative;width:46px;height:46px;border-radius:10px;border:1.8px solid rgba(120,170,220,.5);
  background:rgba(6,16,32,.6);cursor:pointer;transition:transform .1s,border-color .2s,box-shadow .2s;
  box-shadow:inset 0 0 10px rgba(63,169,255,.07);}
.sn-box:active{transform:scale(.9);}
.sn-boxtick{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:#7dffb8;opacity:0;transform:scale(.4);
  text-shadow:0 0 16px rgba(87,232,155,.8),0 0 34px rgba(87,232,155,.45);}
.sn-box.ticked{border-color:#57e89b;box-shadow:0 0 18px rgba(87,232,155,.5),inset 0 0 12px rgba(87,232,155,.18);}
.sn-box.ticked .sn-boxtick{animation:snTick .34s cubic-bezier(.1,1.5,.4,1) both;}
@keyframes snTick{0%{opacity:0;transform:scale(.2) rotate(-12deg);}60%{opacity:1;transform:scale(1.15);}100%{opacity:1;transform:scale(1);}}
/* the verdict stamp — a huge ✓ / ✗ slammed over the window, proper game feedback */
.sn-stamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:110px;font-weight:900;animation:snStamp .5s cubic-bezier(.1,1.5,.4,1) both;}
.sn-stamp.ok{color:#57e89b;text-shadow:0 0 40px rgba(87,232,155,.9),0 0 100px rgba(87,232,155,.5);}
.sn-stamp.deny{color:#ff5d7e;text-shadow:0 0 40px rgba(255,93,126,.9),0 0 100px rgba(255,93,126,.5);}
@keyframes snStamp{0%{transform:scale(2.4) rotate(-6deg);opacity:0;}60%{transform:scale(.95);opacity:1;}100%{transform:scale(1);}}

/* ---------- THE CODEX — premium item rows, the System speaking to your face ---------- */
.cdx-intro{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;line-height:1.9;text-align:center;
  margin:2px 6px 12px;}
.cdx-row{--cx:var(--ac);display:flex;gap:12px;align-items:flex-start;text-align:left;
  padding:12px 13px;border-radius:12px;margin-top:9px;
  background:linear-gradient(150deg,rgba(14,30,56,.8),rgba(7,16,33,.9));
  border:1px solid rgba(63,169,255,.14);border-left:3px solid var(--cx);
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  animation:sldIn .4s ease backwards;}
.cdx-row:nth-child(2){animation-delay:.05s;}.cdx-row:nth-child(3){animation-delay:.1s;}
.cdx-row:nth-child(4){animation-delay:.15s;}.cdx-row:nth-child(5){animation-delay:.2s;}
.cdx-row:nth-child(6){animation-delay:.25s;}.cdx-row:nth-child(7){animation-delay:.3s;}
.cdx-row:nth-child(8){animation-delay:.35s;}
.cdx-ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--cx);border:1.5px solid var(--cx);background:radial-gradient(120% 120% at 50% 0%,rgba(255,255,255,.08),rgba(0,0,0,.3));
  box-shadow:0 0 14px color-mix(in srgb, var(--cx) 40%, transparent),inset 0 0 10px rgba(0,0,0,.4);}
.cdx-ico svg{width:22px;height:22px;filter:drop-shadow(0 0 5px var(--cx));}
.cdx-glyph{font-size:19px;font-style:normal;text-shadow:0 0 12px var(--cx);}
.cdx-txt{flex:1;min-width:0;}
.cdx-name{font-size:12px;font-weight:900;letter-spacing:2.5px;color:var(--cx);text-transform:uppercase;
  text-shadow:0 0 12px color-mix(in srgb, var(--cx) 55%, transparent);}
.cdx-voice{font-size:9.5px;line-height:1.75;letter-spacing:.8px;color:#dcecff;margin-top:5px;text-transform:uppercase;}
.cdx-meta{font-size:8px;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase;margin-top:5px;line-height:1.5;}
.cdx-meta b{color:var(--cx);font-size:7px;letter-spacing:2px;border:1px solid color-mix(in srgb, var(--cx) 45%, transparent);
  border-radius:4px;padding:1px 5px;margin-right:6px;}
.h-big{font-size:17px;font-weight:800;letter-spacing:3px;text-transform:uppercase;}
.h-sec{font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--dim);}
.tiny{font-size:8.5px;color:var(--dim);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;}
.bar{height:8px;border-radius:4px;background:rgba(12,28,54,.9);position:relative;overflow:hidden;margin-top:4px;border:1px solid rgba(63,169,255,.2);}
.bar i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:linear-gradient(90deg,var(--ac-dim),var(--ac));box-shadow:0 0 12px rgba(63,169,255,.5);transition:width .7s cubic-bezier(.2,.9,.3,1);}
.bar i::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sweep 2.4s infinite;}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.bar.gold i{background:linear-gradient(90deg,#9a7415,var(--gd));box-shadow:0 0 12px rgba(255,206,77,.5);}
.art{
  position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1.5px dashed rgba(63,169,255,.45);border-radius:12px;background:rgba(10,22,42,.4);
  color:rgba(63,169,255,.7);font-size:8.5px;letter-spacing:2.5px;text-transform:uppercase;text-align:center;padding:6px;
}
.art::before{content:"⬚";font-size:20px;opacity:.8;}
/* The ⬚ glyph is the EMPTY-slot placeholder. `.art` is a flex column, so once real art
   loads the glyph stays as a flex item — it pushed the image ~20px down and its height:100%
   then overflowed the frame (measured: box 19→166, image 39→183). Hide it whenever the slot
   is actually filled. Fixes the pass Tier-10 reward and the gate guardian alike. */
.art:has(img)::before{display:none;}
.art small{color:var(--dim);font-size:6.5px;letter-spacing:1.5px;}
.cta{
  display:inline-block;padding:11px 32px;font-size:11px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:#04101f;
  background:linear-gradient(180deg,#5cc0ff 0%,#2b8fe0 55%,#1c6cb4 100%);border-radius:10px;
  box-shadow:0 5px 0 #0d3a63,0 8px 18px rgba(0,0,0,.45),0 0 26px rgba(63,169,255,.4),inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;overflow:hidden;text-shadow:0 1px 0 rgba(255,255,255,.3);
  transition:transform var(--dur-press) var(--ease-spring),box-shadow var(--dur-press) ease;
}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 #0d3a63,0 2px 6px rgba(0,0,0,.4),0 0 18px rgba(63,169,255,.3),inset 0 1px 0 rgba(255,255,255,.45);}
.cta::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:sweep 2.8s infinite;}
.cta.gold{background:linear-gradient(180deg,#ffe08a 0%,var(--gd) 50%,#b8862a 100%);box-shadow:0 5px 0 #6e5210,0 8px 18px rgba(0,0,0,.45),0 0 26px rgba(255,206,77,.45),inset 0 1px 0 rgba(255,255,255,.5);}
.cta.gold:active{transform:translateY(4px);box-shadow:0 1px 0 #6e5210,0 2px 6px rgba(0,0,0,.4),0 0 16px rgba(255,206,77,.35),inset 0 1px 0 rgba(255,255,255,.5);}
.cta.red{background:linear-gradient(180deg,#ff8ba3 0%,#ff5d7e 50%,#b52c4d 100%);box-shadow:0 5px 0 #6b1830,0 8px 18px rgba(0,0,0,.45),0 0 26px rgba(255,93,126,.45),inset 0 1px 0 rgba(255,255,255,.4);}
.cta.red:active{transform:translateY(4px);box-shadow:0 1px 0 #6b1830,0 2px 6px rgba(0,0,0,.4),0 0 16px rgba(255,93,126,.35),inset 0 1px 0 rgba(255,255,255,.4);}
.cta.violet{background:linear-gradient(180deg,#c99aff 0%,#9a5ff0 50%,#5f2ab0 100%);box-shadow:0 5px 0 #3a1570,0 8px 18px rgba(0,0,0,.45),0 0 30px rgba(168,107,255,.6),inset 0 1px 0 rgba(255,255,255,.45);animation:enterglow 2s ease-in-out infinite;}
.cta.violet:active{transform:translateY(4px);box-shadow:0 1px 0 #3a1570,0 2px 6px rgba(0,0,0,.4),0 0 20px rgba(168,107,255,.5),inset 0 1px 0 rgba(255,255,255,.45);}
.cta.ghost{background:transparent;color:var(--ac);border:1.5px solid var(--line);box-shadow:none;}
.cta.ghost::after{display:none;}
.cta.sm{padding:7px 16px;font-size:8.5px;letter-spacing:3px;border-radius:8px;}
.cta:disabled{opacity:.35;filter:grayscale(.6);animation:none;}
@keyframes enterglow{50%{box-shadow:0 0 44px rgba(168,107,255,.95)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.coin{color:var(--gd);font-weight:800;font-size:13px;text-shadow:0 0 10px rgba(255,206,77,.5);}

/* ---------- top bar / badges ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;overflow:hidden;}
.dbadge{animation:bob 3.8s ease-in-out infinite .6s;}
@keyframes bob{50%{transform:translateY(-3px)}}
.dbadge{width:44px;height:44px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink);font-size:8px;letter-spacing:1px;font-weight:800;text-transform:uppercase;flex-shrink:0;}
.dbadge::before{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:1.5px solid rgba(63,169,255,.7);border-radius:4px;
  box-shadow:0 0 14px rgba(63,169,255,.3);background:rgba(8,20,38,.6);}
.dbadge b{font-size:13px;position:relative;z-index:1;}
.dbadge span{position:relative;z-index:1;color:var(--dim);font-size:6px;}

/* daily-ledger section dividers: Daily Quest / Pass Quest / Program / Protocols */
.dt-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 3px;
  font-size:8.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--ac);}
#tasklist .dt-sec{margin-top:0;}
.dt-sec.gd{color:var(--gd);} .dt-sec.vi{color:var(--vi);} .dt-sec.ac{color:var(--ac);} .dt-sec.rd{color:var(--rd);}
.dt-sec>span:first-child{position:relative;padding-left:10px;}
.dt-sec>span:first-child::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:10px;background:currentColor;box-shadow:0 0 6px currentColor;border-radius:1px;}
.dt-sec .dt-secn{font-size:7.5px;letter-spacing:1.5px;color:var(--dim);font-weight:700;display:flex;align-items:center;}

/* ---------- nav ---------- */
.bnav{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  height:calc(76px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-around;
  padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,transparent,rgba(2,6,14,.95) 42%);
}
.rune{width:52px;height:52px;position:relative;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;
  color:var(--dim);font-size:6.5px;letter-spacing:1px;font-weight:700;}
.rune::before{content:"";position:absolute;inset:8px;transform:rotate(45deg);border:1.5px solid rgba(63,169,255,.28);border-radius:4px;background:rgba(8,20,38,.55);transition:all .2s;}
.rune span{font-size:13px;position:relative;z-index:1;}
.rune i{position:relative;z-index:1;font-style:normal;}
.rune.on{color:var(--ac);}
.rune.on::before{border-color:var(--ac);box-shadow:0 0 18px rgba(63,169,255,.55);background:rgba(15,40,72,.85);}
.rune.on span{animation:runepop .3s ease;}
@keyframes runepop{50%{transform:scale(1.35)}}
.rune.on::after{content:"";position:absolute;inset:8px;transform:rotate(45deg);border:1.5px solid var(--ac);border-radius:4px;
  animation:ringping 2.4s ease-out infinite;pointer-events:none;}
@keyframes ringping{0%{opacity:.7;transform:rotate(45deg) scale(1)}70%,100%{opacity:0;transform:rotate(45deg) scale(1.55)}}

/* game icons */
.gi{position:relative;z-index:1;display:block;filter:drop-shadow(0 0 6px currentColor);}
.gi svg{width:19px;height:19px;display:block;}
.edgebtn .gi svg{width:20px;height:20px;}

.edgebtn{width:44px;height:44px;position:relative;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;
  color:var(--gd);font-size:6.5px;letter-spacing:1px;font-weight:800;}
.edgebtn::before{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:1.5px solid rgba(255,206,77,.7);border-radius:4px;
  background:rgba(20,16,4,.55);box-shadow:0 0 14px rgba(255,206,77,.3);animation:goldpulse 2.8s ease-in-out infinite;}
@keyframes goldpulse{50%{box-shadow:0 0 24px rgba(255,206,77,.55)}}
.edgebtn span{font-size:13px;position:relative;z-index:1;}
.edgebtn i{position:relative;z-index:1;font-style:normal;}

/* ---------- tasks ---------- */
.task{display:flex;align-items:center;gap:10px;padding:7px 0;width:100%;text-align:left;}
.cb{width:20px;height:20px;flex-shrink:0;border-radius:5px;border:1.5px solid rgba(63,169,255,.7);background:rgba(10,24,46,.6);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;position:relative;}
.task.done .cb{background:var(--ac);border-color:var(--ac);box-shadow:0 0 10px rgba(63,169,255,.6);}
.task.done .cb::after{content:"✓";}
.task.justdone .cb::before{content:"";position:absolute;inset:-3px;border-radius:8px;border:2px solid var(--ac);animation:ping .5s ease-out forwards;}
@keyframes ping{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.2);opacity:0}}
/* verify juice — the checkbox lands with weight (spring punch) and the row gives one tier-neutral flash */
.task.justdone .cb{animation:cbPunch .42s var(--ease-spring);}
@keyframes cbPunch{0%{transform:scale(.72);}46%{transform:scale(1.26);}100%{transform:scale(1);}}
.task.justdone{animation:rowFlash .6s var(--ease-out);border-radius:8px;}
@keyframes rowFlash{0%{background:rgba(255,255,255,.09);}100%{background:transparent;}}
.tn{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;}
.task.done .tn{text-decoration:line-through;color:var(--dim);}
.ti{font-size:7.5px;color:var(--dim);letter-spacing:1.5px;margin-top:1px;}
.txp{margin-left:auto;font-size:10px;color:var(--gd);font-weight:800;}
.timer{font-family:'Courier New',monospace;font-size:14px;font-weight:800;letter-spacing:3px;text-align:center;margin-top:6px;}
.timer b{color:var(--ac);}
.timer.red{color:var(--rd);text-shadow:0 0 12px rgba(255,93,126,.6);}
.warn{font-size:8px;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;text-align:center;line-height:1.7;margin-top:5px;}
.warn b{color:var(--rd);font-weight:800;}

/* ---------- radar ---------- */
/* overflow:visible — SVG clips by default, which was amputating the DISC/AGI labels
   ("SC" / "AG") at the viewBox edge. The card's own padding absorbs the overhang. */
.radar{animation:radarIn .6s ease;overflow:visible;}
.radar .val{transform-box:fill-box;transform-origin:center;animation:valpulse 3.4s ease-in-out infinite;}
@keyframes valpulse{50%{transform:scale(1.05);filter:drop-shadow(0 0 11px rgba(63,169,255,.95));}}
@keyframes radarIn{0%{opacity:0;transform:scale(.7) rotate(-8deg)}100%{opacity:1;transform:none}}
.radar text{font-family:'Rajdhani',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:1px;fill:var(--dim);}
.radar .grid{fill:none;stroke:rgba(63,169,255,.18);stroke-width:1;}
.radar .axis{stroke:rgba(63,169,255,.14);stroke-width:1;}
.radar .val{fill:rgba(63,169,255,.22);stroke:var(--ac);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(63,169,255,.6));}
.radar .pt{fill:#bfe4ff;}

/* ---------- items / pass / soldiers ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.item{position:relative;padding:10px 8px;display:flex;flex-direction:column;gap:4px;align-items:center;border-radius:12px;
  background:rgba(10,22,42,.7);border:1px solid rgba(63,169,255,.22);width:100%;}
.item.rare{border-color:rgba(63,169,255,.55);}
.item.leg{border-color:rgba(255,206,77,.6);box-shadow:0 0 14px rgba(255,206,77,.2);}
.item.sys{border-color:rgba(55,224,139,.5);box-shadow:0 0 14px rgba(55,224,139,.14);}
.item.owned{border-color:var(--gn);}
.inm{font-size:9.5px;font-weight:800;letter-spacing:1px;text-align:center;}
.irar{font-size:7px;letter-spacing:1.5px;text-align:center;line-height:1.5;color:var(--dim);}
.irar.s{color:var(--gn);} .irar.l{color:var(--gd);}
.ipr{font-size:10px;color:var(--gd);font-weight:800;}
.sicon{font-size:24px;line-height:1;filter:drop-shadow(0 0 8px rgba(55,224,139,.6));}
.sicon svg{width:27px;height:27px;display:block;}
.item.sys .sicon{color:var(--gn);}
.heldn{position:absolute;top:5px;right:7px;font-size:8.5px;color:var(--gn);font-weight:800;letter-spacing:1px;}

.bpnode{min-width:72px;display:flex;flex-direction:column;gap:3px;align-items:center;padding:7px 4px;border-radius:9px;
  background:rgba(10,22,42,.7);border:1px solid rgba(63,169,255,.25);}
.bpnode.prem{border-color:rgba(255,206,77,.55);}
.bpnode.locked{opacity:.4;}
.bpnode.claimed{border-color:var(--gn);}
.bptier{font-size:7.5px;color:var(--dim);letter-spacing:2px;font-weight:800;}
.bpnode.prem .bptier{color:var(--gd);}
.bpdrop{font-size:7.5px;font-weight:800;letter-spacing:1px;text-align:center;line-height:1.4;}
.bptrack{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;}
.bprow-lbl{font-size:7.5px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;font-weight:800;margin-top:8px;}
.bprow-lbl.gold{color:var(--gd);}

.soldier{position:relative;display:flex;flex-direction:column;gap:4px;align-items:center;padding:9px 7px;border-radius:11px;
  background:rgba(9,20,40,.78);border:1px solid rgba(63,169,255,.3);animation:sldIn .5s ease backwards;}
.soldier:nth-child(2){animation-delay:.06s}.soldier:nth-child(3){animation-delay:.12s}
.soldier:nth-child(4){animation-delay:.18s}.soldier:nth-child(5){animation-delay:.24s}.soldier:nth-child(6){animation-delay:.3s}
@keyframes sldIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.soldier.rare{border-color:rgba(63,169,255,.6);}
.soldier.leg{border-color:rgba(255,206,77,.65);box-shadow:0 0 18px rgba(255,206,77,.24);}
.soldier.leg .art{animation:idlebreath 3s ease-in-out infinite;}
@keyframes idlebreath{50%{box-shadow:0 0 22px rgba(255,206,77,.35);transform:scale(1.015)}}
.soldier.empty{opacity:.38;border-style:dashed;}
.snm{font-size:8.5px;font-weight:800;letter-spacing:1px;text-align:center;}
.ssrc{font-size:6.5px;color:var(--dim);letter-spacing:1px;text-align:center;}
.sldbadge{position:absolute;top:5px;right:6px;font-size:6px;letter-spacing:1px;color:var(--gd);border:1px solid rgba(255,206,77,.55);border-radius:3px;padding:0 3px;z-index:2;}

.lb-row{display:flex;align-items:center;gap:8px;font-size:9.5px;padding:5px 9px;margin-top:4px;border-radius:6px;
  background:rgba(10,24,46,.6);letter-spacing:1px;}
.lb-row b{color:var(--ac);min-width:32px;}
.lb-row.me{background:rgba(255,206,77,.1);color:var(--gd);}
.lb-row.me b{color:var(--gd);}

/* settings */
.setrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(63,169,255,.12);gap:10px;}
.setrow .sn{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
.setrow .sd{font-size:7.5px;color:var(--dim);letter-spacing:1px;margin-top:2px;max-width:220px;line-height:1.6;}
.tog{width:50px;height:27px;border-radius:16px;background:rgba(12,28,54,.9);border:1px solid rgba(63,169,255,.3);position:relative;transition:.2s;flex-shrink:0;}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--dim);transition:.2s;}
.tog.on{background:rgba(63,169,255,.35);border-color:var(--ac);}
.tog.on::after{left:26px;background:var(--ac);box-shadow:0 0 10px var(--ac);}

/* ---------- portal ---------- */
.portalbox{position:relative;width:210px;height:264px;margin:14px auto 6px;}
.p-ring{position:absolute;inset:0;border-radius:50%/58%;border:2px solid var(--vi);filter:drop-shadow(0 0 18px var(--vi));animation:pulse 3s ease-in-out infinite;}
.p-ring.r2{inset:12px;border-color:rgba(63,169,255,.7);animation-delay:.4s;}
.p-ring.r3{inset:24px;border-color:rgba(168,107,255,.5);animation-delay:.8s;}
.p-ring.r4{inset:-10px;border-color:rgba(168,107,255,.22);border-width:1px;animation:spinring 14s linear infinite;border-style:dashed;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.75}}
@keyframes spinring{100%{transform:rotate(360deg)}}
.p-core{position:absolute;inset:32px;border-radius:50%/58%;
  background:radial-gradient(ellipse at 50% 40%,rgba(220,180,255,.95) 0%,rgba(120,60,220,.8) 30%,rgba(20,10,60,.96) 75%);
  box-shadow:inset 0 0 44px rgba(255,255,255,.28),0 0 70px rgba(140,80,255,.6);animation:coreswirl 8s linear infinite;}
@keyframes coreswirl{50%{filter:hue-rotate(-25deg) brightness(1.3)}}
.grank{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:58px;font-weight:900;color:#e7d4ff;
  text-shadow:0 0 30px var(--vi),0 0 80px var(--vi);animation:grfloat 4s ease-in-out infinite;z-index:3;}
@keyframes grfloat{50%{transform:translate(-50%,-58%)}}
.gwarn{font-size:9px;color:var(--rd);letter-spacing:6px;animation:blink 1.4s infinite;text-align:center;}

/* ---------- overlays / fx ---------- */
/* `safe center` keeps overlays centred when they fit, but degrades to flex-start when they
   don't — plain `center` pushes the first child to a NEGATIVE offset that no scroll can reach.
   On a 667×375 landscape phone that made BIND VESSEL (first-run onboarding) clip, and left
   the weekly report with its ✕ Close at -50px and its Share/Save buttons at +425px: an
   overlay with no reachable way out. overflow-y:auto makes the leftover scrollable. */
.overlay{position:absolute;inset:0;z-index:60;background:rgba(1,4,10,.96);display:none;flex-direction:column;align-items:center;justify-content:safe center;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));text-align:center;overflow-y:auto;overscroll-behavior:contain;}
.overlay>*{flex-shrink:0;}
/* The rank-up and graduation ceremonies animate their centrepiece in from ABOVE the overlay
   (.ru-new starts at -93px, .grad-flash at -10px). A scroll container would clip that flourish
   and add a stray scrollbar mid-ceremony — they have short content and never needed scrolling. */
#rankup-ov,#grad-ov{overflow:visible;}
/* cinema/overlay entrance — a spring scale+fade so every full-screen moment lands the same way.
   Fixed full-screen containers, so scale-from-.965 causes no layout shift or scroll. */
.overlay.on{display:flex;animation:ovIn var(--dur-ui) var(--ease-spring);}
@keyframes ovIn{0%{opacity:0;transform:scale(.965);}100%{opacity:1;transform:none;}}
.toast{
  position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%) translateY(-80px);z-index:80;min-width:230px;max-width:88%;
  padding:9px 15px;border-radius:10px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;text-align:center;
  background:linear-gradient(90deg,rgba(6,20,40,.97),rgba(10,26,52,.95));border:1px solid var(--ac);color:var(--ink);
  box-shadow:0 0 24px rgba(63,169,255,.35);transition:transform .3s cubic-bezier(.2,.9,.3,1);pointer-events:none;
}
.toast.on{transform:translateX(-50%) translateY(0);}
.toast b{color:var(--gd);}
.toast::before{content:"⟨ SYSTEM ⟩ ";color:var(--ac);font-size:8px;}
.floatxp{
  position:absolute;z-index:85;pointer-events:none;font-weight:900;font-size:15px;letter-spacing:2px;color:var(--gd);
  text-shadow:0 0 14px rgba(255,206,77,.8);animation:floatup 1.15s var(--ease-out) forwards;
}
/* weightier pop-in (overshoot), a confident hold, then a clean fade on the rise */
@keyframes floatup{0%{opacity:0;transform:translateY(10px) scale(.6)}18%{opacity:1;transform:translateY(-3px) scale(1.22)}33%{transform:translateY(0) scale(1)}68%{opacity:1}100%{opacity:0;transform:translateY(-62px) scale(.98)}}
/* XP float variants — weakness (green) and CRITICAL (gold, bigger, spins in) */
.floatxp.weak{color:var(--gn);text-shadow:0 0 14px rgba(55,224,139,.85);}
.floatxp.crit{color:var(--gd);font-size:20px;letter-spacing:3px;
  text-shadow:0 0 20px rgba(255,206,77,.95),0 0 42px rgba(255,206,77,.5);animation:critpop 1.5s ease-out forwards;}
@keyframes critpop{0%{opacity:0;transform:translateY(8px) scale(.6) rotate(-5deg)}12%{opacity:1;transform:translateY(0) scale(1.4) rotate(3deg)}30%{transform:scale(1.12) rotate(0)}100%{opacity:0;transform:translateY(-72px) scale(1.05)}}

/* momentum chip on the HUD (shows only while a streak is live) */
.momchip{margin-top:4px;font-size:9px;letter-spacing:2px;color:var(--ac);text-shadow:0 0 8px rgba(63,169,255,.5);animation:momGlow 2.6s ease-in-out infinite;}
.momchip i{font-style:normal;letter-spacing:1.5px;opacity:.95;}
@keyframes momGlow{50%{text-shadow:0 0 13px rgba(63,169,255,.85);}}

/* ============ LEVEL-UP SYSTEM WINDOW ============ */
#lvlwin{position:absolute;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 42%,rgba(10,30,60,.72),rgba(1,4,10,.93));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#lvlwin.on{display:flex;animation:lwFade .28s ease;}
@keyframes lwFade{from{opacity:0}to{opacity:1}}
.lw-pane{position:relative;width:min(360px,90vw);border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(11,28,54,.97),rgba(4,12,26,.98));
  box-shadow:inset 0 0 0 1px rgba(63,169,255,.12),0 24px 90px rgba(0,0,0,.72),0 0 70px rgba(63,169,255,.28);
  padding:24px 22px 20px;text-align:center;overflow:hidden;animation:lwPop .52s cubic-bezier(.18,.9,.26,1.12);}
.lw-pane::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(63,169,255,.045) 2px 3px);}
@keyframes lwPop{0%{transform:scale(.82) translateY(10px);opacity:0}55%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
.lw-frame span{position:absolute;width:13px;height:13px;border:2px solid var(--ac);opacity:.85;}
.lw-frame span:nth-child(1){top:8px;left:8px;border-right:0;border-bottom:0;}
.lw-frame span:nth-child(2){top:8px;right:8px;border-left:0;border-bottom:0;}
.lw-frame span:nth-child(3){bottom:8px;left:8px;border-right:0;border-top:0;}
.lw-frame span:nth-child(4){bottom:8px;right:8px;border-left:0;border-top:0;}
.lw-kicker{font-size:10px;letter-spacing:4px;color:var(--ac);opacity:.9;position:relative;}
.lw-title{font-size:15px;font-weight:900;letter-spacing:8px;color:#fff;margin-top:6px;text-shadow:0 0 18px var(--ac);position:relative;}
.lw-nums{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 4px;position:relative;}
.lw-nums b{font-size:26px;font-weight:900;color:var(--dim);}
.lw-nums b.to{font-size:52px;color:#fff;text-shadow:0 0 26px var(--ac),0 0 60px rgba(63,169,255,.6);animation:lwGlow 1.5s ease-in-out infinite alternate;}
.lw-nums i{color:var(--ac);font-style:normal;font-size:22px;}
@keyframes lwGlow{from{text-shadow:0 0 20px var(--ac)}to{text-shadow:0 0 36px var(--ac),0 0 74px rgba(63,169,255,.7)}}
.lw-stats{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:8px 0;position:relative;}
.lw-stat{font-size:12px;letter-spacing:1.5px;color:var(--dim);display:inline-flex;align-items:center;gap:5px;}
.lw-stat b{color:#cfe6ff;font-weight:800;}
.lw-stat b.up{color:var(--gn);}
.lw-stat i{color:var(--ac);font-style:normal;}
.lw-mom{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0;font-size:12px;letter-spacing:1px;position:relative;}
.lw-mom .lw-lab{color:var(--dim);}
.lw-mom .lw-bars{color:var(--ac);letter-spacing:2px;text-shadow:0 0 10px rgba(63,169,255,.6);}
.lw-mom b{color:#fff;}
.lw-xp{height:7px;border-radius:4px;background:rgba(63,169,255,.14);overflow:hidden;margin:12px 4px 5px;position:relative;}
.lw-xp i{display:block;height:100%;background:linear-gradient(90deg,var(--ac-dim),var(--ac));box-shadow:0 0 14px var(--ac);transition:width .8s cubic-bezier(.2,.9,.3,1);}
.lw-xptxt{font-size:10px;letter-spacing:2px;color:var(--dim);position:relative;}
.lw-hook{font-size:10.5px;letter-spacing:2px;color:#bcd6f0;margin-top:12px;line-height:1.7;
  border-top:1px solid rgba(63,169,255,.16);padding-top:12px;position:relative;}
.lw-hook b{color:var(--ac);}
.lw-cta{margin-top:16px;width:100%;position:relative;}
@keyframes floatup{0%{opacity:0;transform:translateY(6px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-56px) scale(1)}}
#lvlup{position:absolute;inset:0;z-index:90;display:none;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(63,169,255,.22),transparent 65%);}
#lvlup.on{display:flex;animation:lvlbg 1.6s ease forwards;}
#lvlup .t{font-size:44px;font-weight:900;letter-spacing:10px;color:#fff;text-shadow:0 0 30px var(--ac),0 0 90px var(--ac);animation:lvltxt 1.6s cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes lvlbg{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes lvltxt{0%{transform:scale(.4);opacity:0}18%{transform:scale(1.12);opacity:1}30%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}

/* vault menu cards (carousel style) */
.vtabs{display:flex;gap:10px;margin-top:10px;}
.vtab{
  flex:1;position:relative;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:8.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);
  border:1px solid rgba(63,169,255,.22);border-radius:12px;
  background:linear-gradient(180deg,rgba(12,28,54,.75),rgba(6,14,30,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.vtab::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:38%;height:3px;border-radius:0 0 4px 4px;
  background:rgba(63,169,255,.3);}
.vring{width:40px;height:40px;border:1.6px dotted rgba(63,169,255,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;animation:vspin 16s linear infinite;}
.vring svg{width:17px;height:17px;animation:vspin 16s linear infinite reverse;}
@keyframes vspin{100%{transform:rotate(360deg)}}
.vtab.on{color:var(--ac);border-color:rgba(63,169,255,.6);
  background:linear-gradient(180deg,rgba(18,44,80,.9),rgba(8,20,42,.92));
  box-shadow:0 0 22px rgba(63,169,255,.35),inset 0 1px 0 rgba(255,255,255,.08);}
.vtab.on::before{background:var(--ac);box-shadow:0 0 10px var(--ac);}
.vtab.on .vring{border-color:var(--ac);box-shadow:0 0 14px rgba(63,169,255,.4);}
.vtab.on::after{content:"";position:absolute;inset:3px;border-radius:9px;pointer-events:none;
  background:
    linear-gradient(var(--ac),var(--ac)) top    left /12px 2px,
    linear-gradient(var(--ac),var(--ac)) top    left /2px 12px,
    linear-gradient(var(--ac),var(--ac)) top    right/12px 2px,
    linear-gradient(var(--ac),var(--ac)) top    right/2px 12px,
    linear-gradient(var(--ac),var(--ac)) bottom left /12px 2px,
    linear-gradient(var(--ac),var(--ac)) bottom left /2px 12px,
    linear-gradient(var(--ac),var(--ac)) bottom right/12px 2px,
    linear-gradient(var(--ac),var(--ac)) bottom right/2px 12px;
  background-repeat:no-repeat;}
.vtab.gold{color:var(--gd);}
.vtab.gold .vring{border-color:rgba(255,206,77,.5);}
.vtab.gold.on{color:var(--gd);border-color:rgba(255,206,77,.6);box-shadow:0 0 22px rgba(255,206,77,.3),inset 0 1px 0 rgba(255,255,255,.08);}
.vtab.gold.on::before{background:var(--gd);box-shadow:0 0 10px var(--gd);}
.vtab.gold.on .vring{border-color:var(--gd);box-shadow:0 0 14px rgba(255,206,77,.4);}
.vtab.gold.on::after{background:
    linear-gradient(var(--gd),var(--gd)) top    left /12px 2px,
    linear-gradient(var(--gd),var(--gd)) top    left /2px 12px,
    linear-gradient(var(--gd),var(--gd)) top    right/12px 2px,
    linear-gradient(var(--gd),var(--gd)) top    right/2px 12px,
    linear-gradient(var(--gd),var(--gd)) bottom left /12px 2px,
    linear-gradient(var(--gd),var(--gd)) bottom left /2px 12px,
    linear-gradient(var(--gd),var(--gd)) bottom right/12px 2px,
    linear-gradient(var(--gd),var(--gd)) bottom right/2px 12px;
  background-repeat:no-repeat;}
.vpane{display:none;}
.vpane.on{display:block;animation:scrIn .3s ease;}

/* scene backgrounds + hero avatar */
#scr-status{background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.9)),url(assets/boot-bg.jpg) center 20%/cover no-repeat;}
#scr-gates{background:linear-gradient(180deg,rgba(2,6,14,.38),rgba(2,6,14,.72)),url(assets/gate-default-bg.jpg) center/cover no-repeat;}
#boot{background:linear-gradient(180deg,rgba(2,6,14,.45),rgba(2,6,14,.86)),url(assets/boot-bg.jpg) center 18%/cover no-repeat;}
.avatarbox{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:0;}
.avahint{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-size:6.5px;letter-spacing:2px;color:var(--dim);
  opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;}
.avatarbox:hover .avahint,.avatarbox:active .avahint{opacity:1;}
.invrow{display:flex;gap:14px;margin-top:6px;}
.invitem{display:flex;align-items:center;gap:5px;color:var(--gn);font-size:10px;font-weight:800;}
.invitem svg{width:16px;height:16px;filter:drop-shadow(0 0 6px currentColor);}
.invitem.zero{opacity:.3;filter:grayscale(.7);}
.statbar{height:3px;border-radius:2px;background:rgba(63,169,255,.12);margin:2px 0 4px;overflow:hidden;}
.statbar i{display:block;height:100%;border-radius:2px;background:var(--ac);box-shadow:0 0 6px var(--ac);transition:width .8s cubic-bezier(.2,.9,.3,1);}
.avatarbox img{max-height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(63,169,255,.4)) drop-shadow(0 14px 22px rgba(0,0,0,.6));
  animation:avafloat 4.8s ease-in-out infinite;}
@keyframes avafloat{50%{transform:translateY(-8px)}}
.avatarbox::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:62%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(63,169,255,.4),transparent 70%);animation:groundglow 4.8s ease-in-out infinite;}
@keyframes groundglow{50%{opacity:.55;transform:translateX(-50%) scale(.9)}}

/* ---------- COSMETICS — owned skins actually paint the avatar now ---------- */
/* SOVEREIGN AURA — a slow golden halo behind the vessel */
.avatarbox.cos-aura::before{content:"";position:absolute;inset:-6% 12% 8%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,206,77,.42),rgba(255,206,77,.12) 45%,transparent 70%);
  filter:blur(2px);animation:cosaura 3.6s ease-in-out infinite;}
@keyframes cosaura{50%{opacity:.6;transform:scale(1.06);}}
.avatarbox.cos-aura img{filter:drop-shadow(0 0 30px rgba(255,206,77,.5)) drop-shadow(0 14px 22px rgba(0,0,0,.6));}
/* BLADE FRAME — an ornate cyan bracket around the portrait */
.avatarbox.cos-blade{outline:1px solid rgba(63,169,255,.35);outline-offset:-2px;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(63,169,255,.25),inset 0 0 26px rgba(63,169,255,.18),0 0 22px rgba(63,169,255,.22);}
.avatarbox.cos-blade::after{background:radial-gradient(ellipse,rgba(63,169,255,.55),transparent 70%);}
/* GATE TRAIL FX — drifting violet motes around the vessel */
.avatarbox.cos-trail img{filter:drop-shadow(0 0 22px rgba(168,107,255,.5)) drop-shadow(0 0 40px rgba(168,107,255,.25)) drop-shadow(0 14px 22px rgba(0,0,0,.6));
  animation:avafloat 4.8s ease-in-out infinite,costrail 5.2s ease-in-out infinite;}
@keyframes costrail{0%,100%{filter:drop-shadow(0 0 22px rgba(168,107,255,.45)) drop-shadow(0 14px 22px rgba(0,0,0,.6));}
  50%{filter:drop-shadow(0 0 34px rgba(168,107,255,.65)) drop-shadow(0 14px 22px rgba(0,0,0,.6));}}

/* =============================================================
   WIDE (effective landscape) — GAME HUD, NO SCROLL
   ============================================================= */
/* real landscape orientation: notch sits on the physical left/right */
body.wide .bnav{
  left:0;top:0;bottom:0;right:auto;height:auto;
  width:calc(74px + env(safe-area-inset-left,0px));
  flex-direction:column;justify-content:center;gap:10px;
  padding:0 0 0 calc(8px + env(safe-area-inset-left,0px));
  background:linear-gradient(90deg,rgba(2,6,14,.95) 40%,transparent);
}
body.wide .screen{
  /* bottom inset matters in REAL landscape: the home indicator claims 21px on notched iPhones */
  padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(92px + env(safe-area-inset-left,0px));
  overflow:hidden;
}
/* Program + Nutrition are portrait vertical stacks with JS-injected bodies — they were the
   only two screens with NO landscape escape, so anything past the fold was simply clipped. */
body.wide #scr-program .inner,body.wide #scr-nutrition .inner{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* force-rotated (phone held portrait): physical TOP inset = app's LEFT edge, physical BOTTOM = app's RIGHT */
body.forceRot .bnav{
  width:calc(74px + env(safe-area-inset-top,0px));
  padding-left:calc(8px + env(safe-area-inset-top,0px));
}
body.forceRot .screen{
  padding-left:calc(92px + env(safe-area-inset-top,0px));
  padding-right:calc(12px + env(safe-area-inset-bottom,0px));
}
body.wide .screen>.inner{max-width:none;height:100%;}
body.wide .card{margin-top:0;}

/* STATUS hud grid */
body.wide #scr-status .inner{display:grid;height:100%;gap:10px;
  grid-template-columns:minmax(150px,19%) minmax(0,1.05fr) minmax(0,1.25fr);
  /* directive row is CAPPED, not auto: with a real multi-clause directive the auto row grew
     and ate the avatar/status/tasks row above it. It gets a floor and a ceiling; the text
     clamps inside it (below) rather than pushing the HUD around. */
  grid-template-rows:auto minmax(0,1fr) minmax(58px,84px);
  grid-template-areas:"top top top" "avatar status tasks" "dir dir dir";}
body.wide #scr-status .topbar{grid-area:top;}
/* the hunter stands FREE — no frame around the avatar (user call: the character outside
   the box reads more alive against the System's windows) */
body.wide #scr-status .g-avatar{grid-area:avatar;height:100%!important;margin:0;}
body.wide #scr-gates .g-guard{height:auto!important;}
body.wide #scr-arena .a-fight .art{height:15vh!important;min-height:76px;}
body.wide #scr-status .g-status{grid-area:status;overflow:hidden;display:flex;flex-direction:column;}
body.wide #scr-status .g-tasks{grid-area:tasks;overflow:hidden;display:flex;flex-direction:column;}
.dt-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;}
/* the countdown must never truncate mid-digit — the title yields (ellipsis), the timer doesn't */
.dt-top>span:last-child{flex-shrink:0;}
.dt-top .timer{margin:0;font-size:11px;white-space:nowrap;}
.dt-top .cta{padding:4px 10px;font-size:7px;}
.dt-top .h-big{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dt-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
body.wide .g-tasks .warn{flex-shrink:0;}
/* portrait: no inner scroll needed */
body:not(.wide) .dt-scroll{overflow:visible;}
body.wide #scr-status .g-dir{grid-area:dir;display:flex;align-items:center;gap:16px;padding:10px 15px;}
body.wide #scr-status .g-dir #directive{flex:1;}
/* the System's directive reads clearly without dominating — a measured step up from the old
   8.5px, not the oversized 12px */
body.wide #scr-status .g-dir .h-sec{font-size:9px;}
body.wide #scr-status #directive{font-size:9.5px!important;line-height:1.55!important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* coins + crystals belong NEXT TO THE SHOP THEY FEED, not marooned mid-bar by
   space-between. Groups the spend path into one cluster on the right. */
body.wide #scr-status .topbar .curr-col.row{margin-left:auto;margin-right:2px;}
body.wide #scr-status .radar-wrap{flex:1;display:flex;align-items:center;gap:10px;min-height:0;}
/* radar carries an inline height:138px that beats the class rule and bleeds over the
   Status/Inventory headings in a short landscape column — force it to fit its wrap */
body.wide #scr-status .radar{height:100%!important;width:auto!important;max-height:118px;aspect-ratio:1;}
body.wide .task{padding:4px 0;}
body.wide #scr-status .timer{margin-top:2px;}

/* ---- landscape one-screen compaction: all 4 quests visible, no panel scroll ---- */
/* the global "bigger home cards" rules wrap the DAILY TASKS title to two lines and eat
   ~58px of header — shrink it to one line so the 4th quest is never hidden */
body.wide .card.g-tasks{padding:11px 14px;}
body.wide .card.g-tasks .h-big{font-size:12px!important;letter-spacing:1.5px;white-space:nowrap;}
body.wide .g-tasks .dt-top{margin-bottom:3px;}
/* compact the header's right cluster so the title never ellipsizes in landscape
   (measured: title needs 130px in a 280px row — every px below is accounted for) */
body.wide .card.g-tasks .h-big{font-size:11px!important;}
body.wide .g-tasks .dt-top>span:last-child{gap:5px!important;}
body.wide .g-tasks .dt-top .cta{padding:3px 6px;font-size:6.5px;letter-spacing:1px;}
body.wide .g-tasks .dt-top .timer{font-size:10px;letter-spacing:.5px;}
body.wide .g-tasks .warn{font-size:7px;letter-spacing:1px;line-height:1.45;margin-top:3px;}
/* tighten quest rows (line-height, not font — keep them readable) so all rows fit one screen */
body.wide #scr-status .task{padding:3px 0;}
body.wide #scr-status .tn{line-height:1.2;}
body.wide #scr-status .ti{line-height:1.2;margin-top:0;}
body.wide .g-status.big{padding:11px 14px;}
body.wide #scr-status .g-status .h-sec{margin-top:0;}
/* the 5-stat list (label + bar per stat) is portrait-tall; its 5px inter-child gap alone
   overflows the short landscape wrap and clips STR/DISC — collapse the gap, tighten bars */
body.wide #scr-status #statlist{gap:0!important;justify-content:center;overflow:hidden;}
body.wide #scr-status #statlist .statbar{margin:2px 0 5px;height:4px;}
body.wide #scr-status #statlist .tiny{font-size:8px;}
/* premium quest console — tighten so timed/vision trials fit a 390px landscape frame */
body.wide #trial-body .q-banner{padding:8px 12px;margin-bottom:8px;}
body.wide #trial-body .q-zone{padding:11px 12px;gap:8px;}
body.wide #trial-body .q-capture{padding:11px 14px;}
body.wide #trial-body .q-lens{font-size:26px;margin-bottom:2px;}
body.wide #trial-body .q-bignum b{font-size:34px;}
body.wide #trial-body .q-src{margin:5px 2px;}
body.wide #trial-body .q-sub{margin:6px 4px 2px;}
body.wide #trial-body .q-write{height:92px;}

/* GATES hud */
body.wide #scr-gates .inner{position:relative;height:100%;}
body.wide #scr-gates .g-top{position:absolute;top:0;left:0;right:0;text-align:center;}
body.wide #scr-gates .portalbox{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(calc(var(--evh,1vh)*28),190px);height:min(calc(var(--evh,1vh)*38),240px);margin:0;}
body.wide #scr-gates .g-guard{position:absolute;left:2%;top:16%;bottom:16%;width:20%;}
/* Intel panel is bottom-anchored, not just top-anchored. It is content-sized, so on a narrow
   landscape phone (667×375) the text wrapped taller and ran ~70px past the fold — and because
   body.wide .screen is overflow:hidden, GUARDIAN HP and the progress bar became unreachable.
   Pinning bottom above the CTA makes it fit any height and scroll internally instead. */
body.wide #scr-gates .g-intel{position:absolute;right:0;top:14%;width:31%;bottom:44px;
  overflow-y:auto;scrollbar-width:none;}
body.wide #scr-gates .g-intel::-webkit-scrollbar{width:0;}
body.wide #scr-gates .g-cta{position:absolute;bottom:2px;left:0;right:0;text-align:center;}
/* THE SPOILS were a horizontal scroller inside a 31% panel: the 3rd/4th reward card sat
   sliced under a hidden scrollbar and the panel needed an inner vertical scroll on top.
   Wrapping them 2-up makes every card whole and the panel fit its own height exactly. */
body.wide #scr-gates .g-intel{width:34%;top:11%;bottom:36px;}
body.wide #scr-gates .g-intel .grw-row{flex-wrap:wrap;overflow-x:visible;gap:5px;}
body.wide #scr-gates .g-intel .grw-c{flex:1 1 calc(50% - 3px);max-width:none;min-width:0;}
body.wide #scr-gates .g-intel .grw-c img{height:32px;}
body.wide #scr-gates .g-intel .grw{margin-top:5px;}
/* the next-gate arrow was pinned right:8px and rendered ON TOP of the intel panel's reward
   cards. In wide mode it belongs beside the portal, clear of the panel. */
body.wide #scr-gates .garr{top:52%;transform:translateY(-50%);}
body.wide #scr-gates #garr-l{left:26%;}
body.wide #scr-gates #garr-r{left:auto!important;right:37%!important;}

/* ARENA hud */
body.wide #scr-arena .inner{position:relative;height:100%;}
body.wide #scr-arena .a-head{position:absolute;top:0;left:0;right:0;text-align:center;}
body.wide #scr-arena .a-left{position:absolute;left:1%;top:13%;width:23%;}
body.wide #scr-arena .a-right{position:absolute;left:31%;top:13%;width:23%;}
body.wide #scr-arena .a-vs{position:absolute;left:27%;top:36%;font-size:34px;}
body.wide #scr-arena .a-rules{position:absolute;left:1%;bottom:0;width:53%;margin:0;}
body.wide #scr-arena .a-lb{position:absolute;right:0;top:10%;width:40%;margin:0;}
body.wide #scr-arena .a-cta{position:absolute;right:0;bottom:6px;width:40%;text-align:center;}
body.wide #scr-arena .a-fight .art{height:15vh;min-height:76px;}

/* CITADEL hud */
body.wide #scr-citadel .inner{display:flex;flex-direction:column;height:100%;gap:8px;}
body.wide #scr-citadel .inner{gap:6px;}
/* 4 across, rows wrap, and the grid scrolls — a fixed single row of 6 silently clipped
   every soldier past the sixth once the roster grew. */
body.wide #soldier-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);
  gap:8px;margin:0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
body.wide #soldier-grid::-webkit-scrollbar{display:none;}
body.wide #soldier-grid .soldier{padding:6px 5px;min-height:0;}
body.wide #soldier-grid .art{height:auto;flex:1;min-height:0;}
body.wide #scr-citadel .c-hall{display:none;}

/* VAULT hud */
body.wide #scr-vault .inner{display:flex;flex-direction:column;height:100%;}
body.wide #scr-vault .vpane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
body.wide #scr-vault .grid2{grid-template-columns:repeat(4,1fr);}
body.wide #scr-vault .vfoot{margin-top:auto;}

/* PASS hud — the money screen.
   It was the only wide screen still stacking vertically: hero (190px) + road (240px) exceeded a
   375px landscape phone by ~101px, and with overflow:hidden the FREE reward row — the whole
   reason a non-paying player keeps climbing — was unreachable. Same HUD-grid language as
   STATUS/GATES: hero holds the left column, the road gets the full remaining height. */
body.wide #scr-pass .inner{display:grid;height:100%;gap:0 16px;
  grid-template-columns:minmax(300px,38%) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"hero lbl" "hero track" "note track";}
/* the hero spans rows 1-2 and row 2 is 1fr, so its grid area is much taller than the 208px
   card. align-self:start pinned the card — and the Tier 10 soldier being sold on it — to the
   very top of that area with a large dead gap beneath. Centre it in the space it owns. */
body.wide #scr-pass .pass-hero{grid-area:hero;align-self:center;}
/* The Tier 10 soldier is the single most persuasive thing on this screen — sell it, don't
   thumbnail it. (Inline width/height on the button, hence !important.) */
body.wide #scr-pass #pass-soldier{width:122px!important;height:142px!important;}
body.wide #scr-pass .inner>div:nth-child(2){grid-area:lbl;margin-top:0!important;}
/* the road spans both remaining rows so it gets the full column height instead of a thin band */
body.wide #scr-pass .bs-track{grid-area:track;margin-top:0;align-items:center;}
/* doctrine line tucks under the hero — fills the dead left corner and keeps the road clean */
body.wide #scr-pass .inner>.tiny:last-child{grid-area:note;margin-top:10px!important;align-self:end;}

/* SETTINGS */
body.wide #scr-settings .inner{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;
  grid-template-areas:"back back" "a b";}
body.wide #scr-settings .s-back{grid-area:back;}
body.wide #scr-settings .s-a{grid-area:a;margin:0;}
body.wide #scr-settings .s-b{grid-area:b;margin:0;}

#soldier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;}

/* ---------- number pop ---------- */
.pop{display:inline-block;animation:npop .32s cubic-bezier(.34,1.56,.64,1);}
@keyframes npop{40%{transform:scale(1.4);color:#fff;text-shadow:0 0 14px var(--ac);}}

/* ---------- screen wipe ---------- */
#wipe{position:absolute;inset:0;z-index:110;pointer-events:none;overflow:hidden;}
#wipe .p{
  position:absolute;top:-12%;bottom:-12%;left:-14%;right:-14%;
  background:linear-gradient(115deg,#0d2246 0%,#061428 45%,#02060e 100%);
  border-right:3px solid var(--ac);box-shadow:24px 0 60px rgba(63,169,255,.5);
  transform:translateX(-118%) skewX(-8deg);
}
#wipe.in{pointer-events:auto;}
#wipe.in .p{transition:transform .17s cubic-bezier(.55,0,.85,.36);transform:translateX(0) skewX(-8deg);}
#wipe.out .p{transition:transform .24s cubic-bezier(.16,.68,.43,.99);transform:translateX(118%) skewX(-8deg);}

/* ---------- boot ---------- */
#boot{
  position:absolute;inset:0;z-index:120;
  background:radial-gradient(ellipse at 50% 35%,#0a1a30 0%,#040d1c 55%,#02060e 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.bootimg{width:min(82vw,380px);height:auto;object-fit:contain;animation:bootfloat 2.6s ease-in-out infinite;filter:drop-shadow(0 0 34px rgba(63,169,255,.35));}
.bootlogo{width:96px;height:96px;position:relative;display:flex;align-items:center;justify-content:center;animation:bootfloat 2.2s ease-in-out infinite;}
.bootlogo::before{content:"";position:absolute;inset:10px;transform:rotate(45deg);border:4px solid var(--ac);border-radius:14px;
  background:rgba(8,20,38,.7);box-shadow:0 0 44px rgba(63,169,255,.6),inset 0 0 24px rgba(63,169,255,.2);}
.bootlogo b{position:relative;z-index:1;font-size:44px;font-weight:900;color:var(--ink);text-shadow:0 0 22px var(--ac),0 0 60px var(--ac);}
@keyframes bootfloat{50%{transform:translateY(-7px)}}
#boot.done{animation:bootout .5s ease forwards;}
@keyframes bootout{60%{opacity:1;transform:scale(1.03);filter:brightness(1.8);}100%{opacity:0;transform:scale(1.12);visibility:hidden;}}

/* ---------- SYSTEM chat ---------- */
#chat-ov{background:rgba(1,4,10,.97);}
.chat-head{width:100%;max-width:600px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
#chat-msgs{flex:1;width:100%;max-width:600px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px 4px;min-height:0;
  -webkit-overflow-scrolling:touch;}
.cmsg{max-width:84%;padding:9px 13px;border-radius:12px;font-size:11.5px;line-height:1.75;letter-spacing:.6px;text-align:left;
  animation:scrIn .25s ease;white-space:pre-wrap;}
.cmsg.sys{align-self:flex-start;background:rgba(10,24,46,.92);border:1px solid rgba(63,169,255,.4);border-left:3px solid var(--ac);color:#cfeaff;}
.cmsg.me{align-self:flex-end;background:rgba(63,169,255,.15);border:1px solid rgba(63,169,255,.28);color:var(--ink);}
.cmsg.err{align-self:center;color:var(--rd);background:transparent;border:1px dashed rgba(255,93,126,.4);font-size:9px;letter-spacing:2px;}
.ctyping{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;}
.ctyping i{width:5px;height:5px;border-radius:50%;background:var(--ac);animation:tdot 1.1s ease-in-out infinite;}
.ctyping i:nth-child(2){animation-delay:.18s}.ctyping i:nth-child(3){animation-delay:.36s}
@keyframes tdot{40%{transform:translateY(-4px);opacity:1}0%,100%{opacity:.4}}
.chips{display:flex;gap:6px;flex-wrap:wrap;width:100%;max-width:600px;flex-shrink:0;padding:4px 0;}
.chip{font-size:8px;letter-spacing:2px;padding:6px 10px;border:1px solid rgba(63,169,255,.35);border-radius:8px;color:var(--ac);
  background:rgba(8,20,38,.6);text-transform:uppercase;font-weight:800;}
.chat-inrow{display:flex;gap:8px;width:100%;max-width:600px;flex-shrink:0;padding:6px 0 2px;}
#chat-in{flex:1;background:rgba(10,24,46,.85);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  padding:11px 13px;font-family:inherit;font-size:12px;letter-spacing:1px;outline:none;user-select:text;-webkit-user-select:text;}
#chat-in::placeholder{color:var(--dim);letter-spacing:2px;font-size:10px;}
#chat-in:focus{border-color:var(--ac);box-shadow:0 0 14px rgba(63,169,255,.25);}

/* menu diamond (blue) + gate arrows */
.edgebtn.blue{color:var(--ac);}
.edgebtn.blue::before{border-color:rgba(63,169,255,.6);background:rgba(6,16,32,.6);box-shadow:0 0 14px rgba(63,169,255,.3);animation:none;}
.edgebtn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--rd);box-shadow:0 0 8px var(--rd);z-index:2;animation:blink 1.6s infinite;}
.garr{position:absolute;left:8px;top:44%;z-index:6;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(63,169,255,.35);background:rgba(6,16,32,.6);color:var(--ac);font-size:24px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(63,169,255,.2);}
.garr:disabled{opacity:.25;}
body.wide #scr-menu,body.wide #scr-inbox,body.wide #scr-log,body.wide #scr-ladder,body.wide #scr-settings{overflow-y:auto;}
/* center sub-page content in the space beside the rail */
body.wide #scr-menu .inner,body.wide #scr-inbox .inner,body.wide #scr-log .inner,body.wide #scr-ladder .inner,body.wide #scr-settings .inner{max-width:900px;margin:0 auto;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.mbtn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 10px 13px;border-radius:14px;
  background:linear-gradient(180deg,rgba(12,28,54,.8),rgba(6,14,30,.9));border:1px solid rgba(63,169,255,.25);
  color:var(--ac);box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
.mbtn b{font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);}
.mbtn i{font-style:normal;font-size:7px;letter-spacing:2px;color:var(--dim);}
.mbtn .vring{width:46px;height:46px;}
.mbtn .vring svg{width:19px;height:19px;}
.mbtn.gold{color:var(--gd);border-color:rgba(255,206,77,.35);}
.mbtn .dot{position:absolute;top:10px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--rd);box-shadow:0 0 8px var(--rd);animation:blink 1.6s infinite;}
body.wide .mgrid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
body.wide .mgrid .mbtn[style*="grid-column"]{grid-column:1/-1!important;}
body.wide .mbtn{padding:10px 8px 8px;}
body.wide .mbtn .vring{width:38px;height:38px;}
body.wide .mbtn b{font-size:11px;}
body.wide #scr-status .g-tasks{overflow-y:auto;}
.inbx{padding:9px 0;border-bottom:1px solid rgba(63,169,255,.12);}
.inbx:last-child{border-bottom:none;}
.inbx .it{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.inbx .ib{font-size:9.5px;color:#bcd7f2;letter-spacing:.6px;line-height:1.8;margin-top:3px;}
.inbx .if{font-size:7.5px;color:var(--dim);letter-spacing:1.5px;margin-top:4px;}
.logrow{display:flex;gap:8px;font-size:9px;letter-spacing:1px;padding:5px 0;border-bottom:1px solid rgba(63,169,255,.08);color:#bcd7f2;}
.logrow b{color:var(--dim);font-size:8px;min-width:52px;}

/* subtle settings gear */
.gearbtn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(63,169,255,.22);color:var(--dim);
  font-size:13px;display:flex;align-items:center;justify-content:center;opacity:.65;background:rgba(8,20,38,.4);}
/* gold pass-quest rows */
.task.goldx .cb{border-color:rgba(255,206,77,.6);}
.task.goldx.done .cb{background:var(--gd);border-color:var(--gd);box-shadow:0 0 10px rgba(255,206,77,.5);}
.task.goldx .txp{color:var(--gd);}
.task.gatex .cb{border-color:rgba(255,93,126,.6);}
.task.gatex.done .cb{background:var(--rd);border-color:var(--rd);box-shadow:0 0 10px rgba(255,93,126,.5);}
.task.gatex .txp{color:var(--rd);}
#macroline{cursor:pointer;}

/* ---------- quest trials ---------- */
.tr-sub{font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;line-height:1.8;margin-bottom:10px;}
.tr-ex{margin-top:10px;}
.tr-exname{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;}
.tr-exname i{font-style:normal;font-size:9px;color:var(--dim);letter-spacing:1.5px;}
.tr-sets{display:flex;gap:8px;margin-top:6px;}
.setbtn{flex:1;padding:10px 4px;border-radius:10px;border:1.5px solid rgba(63,169,255,.4);background:rgba(10,24,46,.7);
  font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--dim);}
.setbtn.done{border-color:var(--gn);color:var(--gn);background:rgba(55,224,139,.1);box-shadow:0 0 12px rgba(55,224,139,.25);}
.bigcount{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;}
.bigcount b{font-size:44px;font-weight:900;letter-spacing:2px;color:var(--ink);text-shadow:0 0 24px rgba(63,169,255,.6);}
.mealshot{width:100%;max-height:200px;object-fit:contain;border-radius:12px;border:1px solid var(--line);margin-top:10px;}
.tr-note{font-size:9px;letter-spacing:1.5px;color:var(--gd);text-transform:uppercase;line-height:1.8;margin-top:10px;text-align:center;}
.pagesin{width:110px;background:rgba(10,24,46,.85);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  padding:11px 13px;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:1px;outline:none;text-align:center;
  user-select:text;-webkit-user-select:text;}

/* ---------- premium quest console (the trial reads as DESIGNED, never empty) ---------- */
.q-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:12px;
  background:linear-gradient(120deg,rgba(12,28,54,.9),rgba(6,14,30,.85));border:1px solid rgba(63,169,255,.28);
  box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden;}
.q-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 0%,rgba(63,169,255,.14),transparent 60%);pointer-events:none;}
.q-chip{flex-shrink:0;font-size:9px;font-weight:900;letter-spacing:1.5px;padding:5px 9px;border-radius:8px;
  border:1px solid;background:rgba(0,0,0,.25);text-transform:uppercase;}
.q-chip b{font-size:11px;}
.q-name{flex:1;font-size:15px;font-weight:900;letter-spacing:2px;color:var(--ink);text-transform:uppercase;line-height:1.1;
  text-shadow:0 0 18px rgba(63,169,255,.3);}
.q-xp{flex-shrink:0;font-size:20px;font-weight:900;letter-spacing:1px;color:var(--gd);text-shadow:0 0 16px rgba(255,206,77,.5);}
.q-xp span{font-size:9px;letter-spacing:2px;margin-left:2px;opacity:.8;}
.q-src{font-size:8.5px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;line-height:1.7;text-align:center;margin:8px 2px;}
.q-sub{font-size:11px;letter-spacing:1px;color:var(--ink);line-height:1.6;text-align:center;margin:10px 4px 4px;opacity:.92;text-transform:uppercase;font-weight:600;}
.q-zone{border-radius:16px;padding:18px 14px;margin-top:4px;
  background:linear-gradient(180deg,rgba(10,24,46,.6),rgba(6,14,30,.75));border:1px solid rgba(63,169,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 22px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;gap:12px;}
.q-capture{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:20px 16px;border-radius:14px;cursor:pointer;
  background:radial-gradient(120% 120% at 50% 0%,rgba(63,169,255,.16),rgba(10,24,46,.5));
  border:1.5px solid rgba(63,169,255,.45);box-shadow:0 0 26px rgba(63,169,255,.18);
  transition:transform .14s ease,box-shadow .14s,border-color .14s;}
.q-capture:active{transform:scale(.97);box-shadow:0 0 34px rgba(63,169,255,.4);border-color:var(--ac);}
.q-lens{font-size:34px;line-height:1;color:var(--ac);text-shadow:0 0 22px rgba(63,169,255,.7);margin-bottom:4px;}
.q-cap-t{font-size:13px;font-weight:900;letter-spacing:2.5px;color:var(--ink);text-transform:uppercase;}
.q-cap-s{font-size:8px;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
.q-bignum{display:flex;flex-direction:column;align-items:center;}
.q-bignum b{font-size:46px;font-weight:900;letter-spacing:2px;color:var(--ink);text-shadow:0 0 26px rgba(63,169,255,.6);line-height:1;}
.q-write{width:100%;height:120px;background:rgba(6,16,32,.85);border:1px solid rgba(63,169,255,.28);border-radius:12px;
  color:var(--ink);padding:12px 14px;font-family:inherit;font-size:12px;letter-spacing:.5px;line-height:1.6;resize:none;outline:none;
  text-align:left;user-select:text;-webkit-user-select:text;}
.q-write:focus{border-color:var(--ac);box-shadow:0 0 18px rgba(63,169,255,.22);}
.q-write::placeholder{color:var(--dim);letter-spacing:1.5px;font-size:10px;text-transform:uppercase;}
.q-honor{gap:8px;}
.q-hicon{font-size:30px;color:var(--gd);text-shadow:0 0 20px rgba(255,206,77,.5);line-height:1;}

/* ---------- vessel (character) select ---------- */
.vgrid{display:flex;gap:12px;width:100%;max-width:640px;justify-content:center;flex-wrap:wrap;}
.vcard{
  width:170px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(12,28,54,.85),rgba(6,14,30,.92));border:1.5px solid rgba(63,169,255,.28);
  box-shadow:0 6px 16px rgba(0,0,0,.4);transition:transform .15s ease,border-color .15s;
}
.vcard.sel{border-color:var(--ac);box-shadow:0 0 26px rgba(63,169,255,.45);transform:translateY(-4px);}
.vcard img{height:150px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(63,169,255,.35));}
.vcard .vnm{font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;}
.vcard .vds{font-size:7.5px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;}
.formbadge{font-size:7px;letter-spacing:2px;color:var(--ac);border:1px solid rgba(63,169,255,.4);border-radius:4px;padding:1px 6px;margin-top:2px;}

.sld-art{display:flex;align-items:center;justify-content:center;overflow:hidden;}

/* gate guardian art on the gates screen */
.art.has-guard{border:1px solid rgba(168,107,255,.5);padding:0;background:none;overflow:hidden;position:relative;}
.art.has-guard::before{display:none;}
.guard-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:8px;font-weight:800;letter-spacing:2px;color:var(--vi);text-align:center;background:rgba(2,6,14,.35);line-height:1.6;}

/* INSIDE THE GATE page */
#ingate-bg{position:absolute;inset:0;background-color:#070d1c;background-size:cover;background-position:center;animation:ingateZoom 14s ease-in-out infinite alternate;}
@keyframes ingateZoom{100%{transform:scale(1.08)}}
.ingate-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(2,6,14,.35),rgba(2,6,14,.88) 100%);}
.ingate-inner{position:relative;z-index:2;width:100%;max-width:560px;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ingate-obj{margin-top:14px;font-size:11px;line-height:2.1;letter-spacing:1px;color:#e6d4ff;
  background:rgba(4,10,22,.6);border:1px solid rgba(168,107,255,.4);border-radius:12px;padding:12px 16px;max-width:420px;}
.ingate-prog{margin-top:14px;width:100%;}
#ingate-warn{animation:blink 1.6s infinite;}

/* ---------- soldier detail page ---------- */
.sd-wrap{display:flex;width:100%;height:100%;max-width:1000px;}
.sd-media{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(20,40,80,.5),transparent 70%);position:relative;}
.sd-info{width:44%;max-width:420px;padding:26px 24px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,transparent,rgba(4,10,22,.7) 30%);overflow-y:auto;}
.sd-badge{font-size:9px;font-weight:800;letter-spacing:2px;margin-bottom:6px;}
.sd-stats{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.sd-stat{position:relative;}
.sd-stat span{font-size:9px;letter-spacing:2px;color:var(--dim);}
.sd-stat b{position:absolute;right:0;top:0;font-size:12px;color:var(--ink);}
.sd-bar{height:5px;border-radius:3px;background:rgba(63,169,255,.12);margin-top:4px;overflow:hidden;}
.sd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac-dim),var(--ac));box-shadow:0 0 8px var(--ac);}
.sd-story{margin-top:16px;font-size:10.5px;line-height:1.9;letter-spacing:.5px;color:#bcd7f2;}
body:not(.wide) .sd-wrap{flex-direction:column;}
body:not(.wide) .sd-media{height:46%;}
body:not(.wide) .sd-info{width:100%;max-width:none;}

/* universal overlay close */
.ov-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));z-index:10;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(63,169,255,.35);background:rgba(8,20,38,.7);color:var(--ac);font-size:15px;
  display:flex;align-items:center;justify-content:center;}

/* ---------- vessel: character strip + form gallery ---------- */
.vchars{display:flex;gap:10px;width:100%;max-width:560px;justify-content:center;flex-wrap:wrap;}
.vchar{padding:10px 16px;border-radius:12px;border:1.5px solid rgba(63,169,255,.28);background:rgba(10,22,42,.7);min-width:120px;}
.vchar.sel{border-color:var(--ac);box-shadow:0 0 18px rgba(63,169,255,.4);background:rgba(15,40,72,.8);}
.vchar.soon{opacity:.45;}
.vchar-nm{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
.vchar-ds{font-size:7.5px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-top:2px;}
.vforms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:560px;}
.vform{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;border-radius:14px;
  border:1.5px solid rgba(63,169,255,.25);background:linear-gradient(180deg,rgba(12,28,54,.8),rgba(6,14,30,.9));}
.vform.sel{border-color:var(--gd);box-shadow:0 0 22px rgba(255,206,77,.35);}
.vform.locked{opacity:.85;}
.vform-media{position:relative;width:100%;height:180px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:10px;background:rgba(4,10,22,.6);}
.vform-media img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(63,169,255,.3));}
.vform.locked .vform-media img{filter:grayscale(.9) brightness(.4);}
.vlock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:9px;font-weight:800;letter-spacing:2px;color:var(--rd);text-align:center;background:rgba(2,6,14,.4);}
.vform-on{position:absolute;top:6px;right:6px;font-size:8px;font-weight:800;letter-spacing:1px;color:#04101f;background:var(--gd);border-radius:4px;padding:1px 6px;}
.vform-nm{font-size:8.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;text-align:center;}
body.wide .vform-media{height:150px;}
/* CHOOSE YOUR VESSEL is the first screen a new player ever sees, and on a 667×375 landscape
   phone it ran 67px long — pushing BIND VESSEL, the only way forward, off the bottom.
   Compress the form art and chrome so the whole decision fits without a scroll. */
@media(max-height:430px){
  /* !important: the padding and both margin-tops are INLINE styles in index.html, so a plain
     rule loses to them. */
  #vessel-ov{padding:10px 16px!important;}
  #vessel-grid{margin-top:8px!important;}
  #vessel-ov>div:last-child{margin-top:8px!important;}
  body.wide .vform-media{height:118px;}
  .vchar{padding:6px 14px;min-width:104px;}
  .vforms{gap:9px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short /* !important: the padding and both margin-tops are INLINE styles in index.html, body.short so a plain
     rule loses to them. */
  #vessel-ov{padding:10px 16px!important;}
body.short #vessel-grid{margin-top:8px!important;}
body.short #vessel-ov>div:last-child{margin-top:8px!important;}
body.short.wide .vform-media{height:118px;}
body.short .vchar{padding:6px 14px;min-width:104px;}
body.short .vforms{gap:9px;}


/* ---------- rank-up ceremony ---------- */
#rankup-ov{background:rgba(1,3,9,.98);}
.ru-old{font-size:90px;font-weight:900;color:var(--dim);animation:ruShatter 1.1s cubic-bezier(.6,0,.8,.2) forwards;}
@keyframes ruShatter{0%{opacity:1;transform:scale(1);filter:blur(0)}70%{opacity:.9;transform:scale(1.15) rotate(-3deg)}100%{opacity:0;transform:scale(1.9) rotate(6deg);filter:blur(12px)}}
.ru-new{font-size:120px;font-weight:900;color:#fff;text-shadow:0 0 40px var(--ac),0 0 120px var(--ac);
  animation:ruSlam 1s cubic-bezier(.2,1.6,.35,1) .9s backwards;}
@keyframes ruSlam{0%{opacity:0;transform:scale(3.2);filter:brightness(3)}60%{transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.ru-line{animation:scrIn .6s ease 1.7s backwards;}
.ru-ring{position:absolute;left:50%;top:42%;width:10px;height:10px;border-radius:50%;border:2px solid var(--ac);
  animation:ruRing 1.2s ease-out 1s backwards;pointer-events:none;}
@keyframes ruRing{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(60);opacity:0}}

/* ---------- AI vision counter ---------- */
#vision-ov{padding:0;background:#000;}
#vision-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#vision-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
#vision-canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);}
.vis-hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;pointer-events:none;}
.vis-hud>*{pointer-events:auto;}
.vis-count{align-self:center;text-align:center;margin-top:calc(var(--evh,1vh)*4);}
.vis-count b{font-size:74px;font-weight:900;color:#fff;text-shadow:0 0 30px var(--ac),0 0 90px var(--ac);}
.vis-count span{display:block;font-size:10px;letter-spacing:4px;color:var(--ac);text-transform:uppercase;}
.vis-state{align-self:center;font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;background:rgba(2,6,14,.7);
  padding:6px 14px;border-radius:8px;border:1px solid rgba(63,169,255,.3);}
.vis-foot{display:flex;justify-content:center;gap:10px;padding-bottom:8px;}

/* ---------- hunter report ---------- */
#report-canvas{width:100%;max-width:340px;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);}
/* 1080×1350 renders ~425px tall at max-width:340 — taller than a landscape phone on its own,
   before the header and Share/Save row. Shrink it so the whole report fits without scrolling. */
@media(max-height:430px){ #report-canvas{max-width:232px;} }
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short #report-canvas{max-width:232px;}


/* ---------- armory ---------- */
.gradetag{position:absolute;top:5px;left:7px;font-size:7px;font-weight:800;letter-spacing:1px;border:1px solid;border-radius:4px;padding:0 4px;}
.eqbadge{display:inline-flex;align-items:center;gap:3px;border:1px solid;border-radius:6px;padding:2px 6px;background:rgba(2,6,14,.6);}
.eqbadge svg{width:14px;height:14px;}
.eqbadge b{font-size:8px;font-weight:800;letter-spacing:1px;}
.eqrow{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;}
.arm-du{display:flex;gap:5px;justify-content:center;margin-top:3px;}

/* ---------- daily check-in ---------- */
.ci-dot{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--gd);box-shadow:0 0 8px var(--gd);z-index:3;display:none;animation:blink 1.4s infinite;}
.ci-dot.on{display:block;}
.ci-node{position:relative;padding:10px 4px;border-radius:10px;text-align:center;border:1px solid rgba(63,169,255,.25);background:rgba(10,22,42,.7);}
.ci-node .ci-day{font-size:7.5px;letter-spacing:2px;color:var(--dim);font-weight:800;}
.ci-node .ci-rw{font-size:8.5px;letter-spacing:.5px;color:var(--ink);font-weight:800;margin-top:4px;line-height:1.3;}
.ci-node.claimed{opacity:.5;border-color:var(--gn);}
.ci-node.claimed .ci-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--gn);}
.ci-node.next{border-color:var(--gd);box-shadow:0 0 16px rgba(255,206,77,.4);background:rgba(30,24,6,.7);}
.ci-node.next .ci-rw{color:var(--gd);}
.ci-node.big{grid-column:span 4;border-color:rgba(255,206,77,.5);}

/* ---------- system wager ---------- */
.wager-opt{flex:1;padding:12px 4px;border-radius:10px;border:1.5px solid rgba(255,206,77,.4);background:rgba(20,16,4,.5);
  font-size:12px;font-weight:800;letter-spacing:1px;color:var(--gd);}
.wager-opt.sel{border-color:var(--gd);box-shadow:0 0 14px rgba(255,206,77,.35);background:rgba(30,24,6,.7);}

/* force-landscape rotation — corner-pivot fill (exact, no cut) */
body.forceRot{overflow:hidden;}
body.forceRot #rot{
  position:fixed;
  top:0; left:100%; right:auto; bottom:auto;
  width:100vh; height:100vw;
  width:100dvh; height:100dvw;   /* dynamic units track Safari's collapsing chrome — fixes off-center first load */
  transform:rotate(90deg);
  transform-origin:top left;
}
body.forceRot #scan,body.forceRot #vig{display:none;}

/* ---------- The Path: Covenant form + exercise grade badges ---------- */
.ex-grade{display:inline-block;min-width:16px;padding:1px 5px;margin-right:6px;border-radius:5px;
  font-size:9px;font-weight:900;letter-spacing:.5px;vertical-align:middle;
  background:rgba(2,6,14,.6);border:1px solid currentColor;text-shadow:0 0 6px currentColor;}
.ex-grade.g-E{color:#6b87a6;} .ex-grade.g-D{color:#c9d6e6;} .ex-grade.g-C{color:#37e08b;}
.ex-grade.g-B{color:#3fa9ff;} .ex-grade.g-A{color:#a86bff;} .ex-grade.g-S{color:#ffce4d;}
/* THE AWAKENING — class-select cards (Beginner AI / Veteran manual) */
.path-choice{display:flex;gap:12px;margin-top:16px;}
@media (max-width:520px){ body:not(.wide) .path-choice{flex-direction:column;} }
.pc-card{flex:1;min-width:0;padding:20px 16px 16px;border-radius:16px;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,rgba(12,28,52,.9),rgba(6,14,28,.9));border:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden;
  transition:transform .15s cubic-bezier(.2,.9,.3,1),border-color .2s,box-shadow .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);}
.pc-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at 50% 0%,rgba(63,169,255,.18),transparent 65%);}
.pc-card.vet::before{background:radial-gradient(ellipse at 50% 0%,rgba(255,206,77,.18),transparent 65%);}
.pc-card:hover::before,.pc-card:active::before{opacity:1;}
.pc-card:active{transform:scale(.97);}
.pc-card.awk:hover,.pc-card.awk:active{border-color:var(--ac);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 26px rgba(63,169,255,.35);}
.pc-card.vet:hover,.pc-card.vet:active{border-color:var(--gd);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 26px rgba(255,206,77,.35);}
.pc-glyph{font-size:34px;line-height:1;color:var(--ac);filter:drop-shadow(0 0 12px currentColor);position:relative;}
.pc-t{font-size:15px;font-weight:900;letter-spacing:3px;position:relative;}
.pc-d{font-size:8.5px;line-height:1.7;letter-spacing:.6px;color:#bcd7f2;position:relative;min-height:52px;}
.pc-tag{font-size:8px;font-weight:800;letter-spacing:2px;margin-top:2px;position:relative;}

.cov-row{margin-top:12px;}
.cov-label{font-size:9.5px;letter-spacing:1.2px;font-weight:800;color:var(--ac);opacity:.85;margin-bottom:6px;}
.cov-opts{display:flex;gap:7px;}
.cov-opt{flex:1;min-width:0;padding:8px 4px;border-radius:9px;cursor:pointer;text-align:center;
  background:rgba(10,22,40,.55);border:1.5px solid var(--line);color:var(--ink);
  transition:transform .12s cubic-bezier(.2,.9,.3,1),border-color .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:2px;align-items:center;}
.cov-opt b{font-size:12px;font-weight:800;letter-spacing:.5px;}
.cov-opt span{font-size:7.5px;letter-spacing:.6px;opacity:.6;}
.cov-opt:active{transform:scale(.95);}
.cov-opt.on{border-color:var(--ac);background:rgba(15,40,72,.85);
  box-shadow:0 0 16px rgba(63,169,255,.4),inset 0 0 12px rgba(63,169,255,.12);}
.cov-opt.on b{color:var(--ac);text-shadow:0 0 8px rgba(63,169,255,.5);}
.tr-verified{color:var(--gn);font-weight:800;font-size:12px;letter-spacing:.5px;text-shadow:0 0 8px rgba(55,224,139,.5);}

/* ===== GYM SESSION — immersive logger ===== */
#gym-ov{background:rgba(1,4,10,.985);}
.gs-head{width:100%;max-width:620px;flex-shrink:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(8,20,38,.9),rgba(2,6,14,.6));}
.gs-headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.gs-meters{display:flex;gap:8px;flex-shrink:0;}
.gs-meter{text-align:center;border:1px solid var(--line);border-radius:9px;padding:5px 10px;background:rgba(10,24,46,.7);}
.gs-meter b{display:block;font-size:14px;font-weight:900;letter-spacing:1px;color:var(--ink);}
.gs-meter span{font-size:6.5px;letter-spacing:1.5px;color:var(--dim);}
.gs-meter.gold{border-color:rgba(255,206,77,.5);}
.gs-meter.gold b{color:var(--gd);text-shadow:0 0 10px rgba(255,206,77,.5);}
.gs-tools{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.gs-bodywrap{flex:1;width:100%;max-width:620px;overflow-y:auto;min-height:0;padding:10px 16px;}
.gs-ex{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 12px;margin-top:10px;box-shadow:0 4px 14px rgba(0,0,0,.35);}
.gs-exhead{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.gs-exname{font-size:12.5px;font-weight:800;letter-spacing:1.5px;color:var(--ink);}
.gs-best{font-size:7.5px;letter-spacing:1.2px;color:var(--gd);opacity:.9;flex-shrink:0;}
.gs-set{display:flex;align-items:center;gap:8px;margin-top:8px;}
.gs-sn{font-size:8px;letter-spacing:1.5px;color:var(--dim);width:44px;flex-shrink:0;}
.gs-in{width:76px;padding:9px 6px;border-radius:8px;border:1.5px solid rgba(63,169,255,.4);background:rgba(10,24,46,.8);
  color:var(--ink);font:800 13px Rajdhani,sans-serif;letter-spacing:1px;text-align:center;outline:none;}
.gs-in:focus{border-color:var(--ac);box-shadow:0 0 10px rgba(63,169,255,.3);}
.gs-done{margin-left:auto;padding:9px 14px;border-radius:8px;border:none;cursor:pointer;
  font:800 8.5px Rajdhani,sans-serif;letter-spacing:2px;color:#031326;
  background:linear-gradient(180deg,#9fd4ff 0%,var(--ac) 55%,#1c5f9e 100%);
  box-shadow:0 3px 0 #0d3a63,0 0 14px rgba(63,169,255,.35);}
.gs-done:active{transform:translateY(3px);box-shadow:0 0 0 #0d3a63;}
.gs-set.done{opacity:.75;}
.gs-log{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--ink);}
.gs-check{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--gn);text-shadow:0 0 8px rgba(55,224,139,.6);}
.gs-foot{width:100%;max-width:620px;flex-shrink:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line);}
/* rest ring */
.gs-restov{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(1,4,10,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.gs-restov.on{display:flex;animation:scrIn .3s ease;}
.gs-ringwrap{position:relative;width:150px;height:150px;}
.gs-ringwrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.gs-ringbg{fill:none;stroke:rgba(63,169,255,.15);stroke-width:5;}
.gs-ringfg{fill:none;stroke:var(--ac);stroke-width:5;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0;
  filter:drop-shadow(0 0 8px rgba(63,169,255,.7));transition:stroke-dashoffset 1s linear;}
.gs-ringwrap b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:900;letter-spacing:2px;color:var(--ink);text-shadow:0 0 20px rgba(63,169,255,.6);}
/* PR banner */
.gs-prband{position:absolute;top:22%;left:50%;transform:translateX(-50%) scale(.8);z-index:6;pointer-events:none;
  text-align:center;padding:16px 30px;border-radius:14px;opacity:0;
  border:1.5px solid rgba(255,206,77,.7);background:rgba(20,14,2,.92);box-shadow:0 0 50px rgba(255,206,77,.4);}
.gs-prband.on{animation:prpop 2.6s ease forwards;}
@keyframes prpop{0%{opacity:0;transform:translateX(-50%) scale(.7);}12%{opacity:1;transform:translateX(-50%) scale(1.06);}20%{transform:translateX(-50%) scale(1);}80%{opacity:1;}100%{opacity:0;transform:translateX(-50%) scale(.96);}}
.gs-prtitle{font-size:10px;font-weight:800;letter-spacing:4px;color:var(--gd);text-shadow:0 0 14px rgba(255,206,77,.8);}
.gs-prname{font-size:22px;font-weight:900;letter-spacing:3px;color:#fff;margin-top:4px;}
/* ===== VERDICT ===== */
.vd-imgwrap{width:150px;height:190px;border-radius:14px;overflow:hidden;border:1.5px solid rgba(255,206,77,.55);
  box-shadow:0 0 40px rgba(255,206,77,.25),0 0 90px rgba(63,169,255,.15);animation:vdglow 2.4s ease-in-out infinite;}
@keyframes vdglow{0%,100%{box-shadow:0 0 40px rgba(255,206,77,.25);}50%{box-shadow:0 0 70px rgba(255,206,77,.5);}}
.vd-imgwrap img{width:100%;height:100%;object-fit:cover;object-position:top;}
.vd-statbox{width:100%;max-width:340px;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;}
.vd-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(63,169,255,.12);}
.vd-row:last-child{border-bottom:none;}
.vd-row span{font-size:8px;letter-spacing:2px;color:var(--dim);}
.vd-row b{font-size:13px;font-weight:900;letter-spacing:1px;color:var(--ink);}
.vd-row.gold b{color:var(--gd);text-shadow:0 0 10px rgba(255,206,77,.5);}
.vd-row.pr b{color:var(--gn);font-size:9px;letter-spacing:1px;}
/* ===== BLIND REVEAL ===== */
.rv-glyph{position:relative;width:130px;height:130px;margin-top:14px;}
/* ===== PROTOCOLS (violet tasks) + covenant multi ===== */
.task.violx .cb{border-color:rgba(168,107,255,.6);}
.task.violx.done .cb{background:var(--vi);border-color:var(--vi);box-shadow:0 0 10px rgba(168,107,255,.5);}
.cov-opts.wrap{flex-wrap:wrap;}
.cov-opts.wrap .cov-opt{flex:0 1 calc(33.3% - 5px);min-width:96px;}
.cov-opt.sm{padding:7px 4px;}
.cov-opt.sm b{font-size:9.5px;letter-spacing:.8px;}

/* ---------- Hunter dossier button + premium Speak node ---------- */
.hdossier{background:none;border:none;padding:4px 8px 5px 0;text-align:left;cursor:pointer;
  position:relative;border-radius:9px;transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent;}
.hdossier:hover{background:rgba(63,169,255,.06);}
.hdossier:active{transform:scale(.98);}
.hd-hint{display:block;margin-top:4px;font-size:6.5px;letter-spacing:1.6px;color:var(--ac);opacity:.55;font-weight:700;}
.speakbtn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;padding:2px;-webkit-tap-highlight-color:transparent;}
.speak-orb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#e6f4ff;
  background:radial-gradient(circle at 50% 34%, rgba(63,169,255,.6), rgba(9,26,52,.92) 72%);
  border:1.5px solid rgba(63,169,255,.75);transition:transform .12s;
  box-shadow:0 0 16px rgba(63,169,255,.45),inset 0 0 14px rgba(63,169,255,.32),0 4px 10px rgba(0,0,0,.5);
  animation:speakPulse 2.6s ease-in-out infinite;}
.speak-orb svg{width:23px;height:23px;filter:drop-shadow(0 0 4px rgba(63,169,255,.85));}
.speakbtn:active .speak-orb{transform:scale(.9);}
.speak-lbl{font-size:7px;letter-spacing:2.5px;font-weight:800;color:var(--ac);text-shadow:0 0 8px rgba(63,169,255,.5);}
@keyframes speakPulse{
  0%,100%{box-shadow:0 0 13px rgba(63,169,255,.38),inset 0 0 12px rgba(63,169,255,.28),0 4px 10px rgba(0,0,0,.5);}
  50%{box-shadow:0 0 27px rgba(63,169,255,.72),inset 0 0 17px rgba(63,169,255,.46),0 4px 10px rgba(0,0,0,.5);}}
.doss-id{text-align:center;padding:6px 0 9px;border-bottom:1px solid var(--line);}

/* ---------- graduation ceremony (Path advances every 4-week cycle) ---------- */
#grad-ov{flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.grad-aura{position:absolute;width:min(78vw,360px);height:min(78vw,360px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,206,77,.30), rgba(255,206,77,.06) 55%, transparent 70%);
  animation:gradAura 3s ease-in-out infinite;}
@keyframes gradAura{0%,100%{transform:scale(.9);opacity:.55;}50%{transform:scale(1.15);opacity:1;}}
.grad-hero{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center;z-index:2;}
.grad-hero img{height:230px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(255,206,77,.55));
  animation:gradRise .9s cubic-bezier(.2,.9,.3,1);}
@keyframes gradRise{0%{transform:translateY(28px) scale(.92);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}}
.grad-flash{position:absolute;inset:-10% 0 0;pointer-events:none;
  background:radial-gradient(circle at 50% 62%, rgba(255,255,255,.95), transparent 52%);
  animation:gradFlash 1s ease-out forwards;}
@keyframes gradFlash{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}
.grad-body{z-index:3;margin-top:12px;max-width:440px;padding:0 18px;}
.grad-cycle{font-size:27px;font-weight:900;letter-spacing:5px;color:var(--gd);
  text-shadow:0 0 20px rgba(255,206,77,.6);margin:2px 0 10px;animation:sldIn .5s ease .15s backwards;}
.grad-ups{margin:6px 0 4px;}
.grad-up{display:flex;align-items:center;gap:9px;justify-content:center;margin:7px 0;
  font-size:11px;letter-spacing:.8px;animation:sldIn .5s ease backwards;}
.gu-dom{color:var(--ac);font-weight:800;min-width:42px;text-align:right;}
.gu-old{color:var(--dim);text-decoration:line-through;opacity:.55;}
.gu-arr{color:var(--gd);font-weight:800;}
.gu-new{color:var(--ink);font-weight:800;text-shadow:0 0 8px rgba(255,206,77,.45);}
.grad-line{font-size:9.5px;letter-spacing:1px;color:#cfeaff;margin:14px 0;line-height:1.7;
  animation:sldIn .5s ease .7s backwards;}

/* ===== TOPBAR CURRENCIES ===== */
.curr-row{display:flex;gap:6px;margin-top:5px;}
.curr{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:7px;
  font-size:9px;font-weight:800;letter-spacing:1px;border:1px solid var(--line);background:rgba(10,24,46,.7);}
.curr.coin{color:var(--gd);border-color:rgba(255,206,77,.4);}
.curr.cry{color:var(--vi);border-color:rgba(168,107,255,.45);}
.curr b{font-size:10.5px;}
/* ===== COMMITMENT HUB ===== */
.cm-card{display:block;width:100%;text-align:left;margin-top:10px;padding:13px 14px;border-radius:13px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s ease;}
.cm-card:active{transform:scale(.985);}
.cm-card.seal{border-color:rgba(255,206,77,.4);}
.cm-card.seal.locked{border-color:rgba(255,206,77,.65);box-shadow:0 0 22px rgba(255,206,77,.12),0 4px 14px rgba(0,0,0,.35);}
.cm-head{display:flex;align-items:center;gap:9px;}
.cm-head b{font-size:12.5px;letter-spacing:3px;color:var(--ink);}
.cm-glyph{font-size:15px;color:var(--ac);width:20px;text-align:center;filter:drop-shadow(0 0 6px rgba(63,169,255,.6));}
.cm-state{margin-left:auto;font-size:7.5px;letter-spacing:2px;color:var(--dim);border:1px solid rgba(107,135,166,.4);border-radius:5px;padding:2px 7px;}
.cm-state.on{color:var(--gn);border-color:rgba(55,224,139,.5);text-shadow:0 0 8px rgba(55,224,139,.5);}
.cm-sub{font-size:8.5px;letter-spacing:1px;line-height:1.8;color:var(--dim);margin-top:6px;}
/* ===== OATH swipe carousel (3D coverflow) ===== */
body.wide #scr-commit .inner{display:flex;flex-direction:column;height:100%;}
#commit-body{display:flex;flex-direction:column;}
body.wide #commit-body{flex:1;min-height:0;}
.oath-stage{position:relative;width:100%;height:clamp(248px, calc(var(--evh,1vh)*56),430px);perspective:1300px;margin-top:6px;}
body.wide .oath-stage{flex:1;height:auto;min-height:0;margin-top:2px;}
.oath-track{position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y;}
.oath-slide{position:absolute;left:50%;top:50%;width:min(342px,78vw);height:min(298px,88%);
  transform:translate(-50%,-50%);transform-origin:center center;will-change:transform,opacity;backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .4s ease,box-shadow .3s ease,border-color .3s ease;
  display:flex;flex-direction:column;gap:7px;padding:15px 15px 13px;border-radius:16px;cursor:pointer;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,26,50,.6),rgba(4,10,22,.8));
  box-shadow:0 12px 34px rgba(0,0,0,.55);}
.oath-track.dragging .oath-slide{transition:none;}
.oath-slide.is-center{border-color:rgba(63,169,255,.55);box-shadow:0 0 40px rgba(63,169,255,.2),0 18px 44px rgba(0,0,0,.65);}
.oath-slide.seal{border-color:rgba(255,206,77,.35);}
.oath-slide.seal.is-center{border-color:rgba(255,206,77,.62);box-shadow:0 0 40px rgba(255,206,77,.18),0 18px 44px rgba(0,0,0,.65);}
.oath-slide .cm-head b{font-size:14px;}
.oath-slide .cm-glyph{font-size:17px;}
.oath-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;overflow:hidden;}
.oath-why{font-size:11.5px;line-height:1.85;letter-spacing:.6px;color:var(--ink);}
.oath-big{font-size:25px;letter-spacing:1px;font-weight:800;color:var(--ink);line-height:1;text-shadow:0 0 18px rgba(63,169,255,.35);}
.oath-meta{font-size:8px;letter-spacing:2px;color:var(--dim);}
.oath-warn{font-size:8px;letter-spacing:2px;color:var(--rd);margin-top:2px;}
.oath-list{display:flex;flex-direction:column;gap:6px;}
.oath-li{font-size:11px;letter-spacing:1.5px;color:var(--ink);}
.oath-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.oath-hint{margin-top:auto;text-align:center;font-size:8px;letter-spacing:2.5px;color:var(--ac);opacity:0;transition:opacity .3s;}
.oath-slide.is-center .oath-hint{opacity:.85;}
.oath-slide.seal.is-center .oath-hint{color:var(--gd);}
.oath-pips{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px;flex-shrink:0;}
.oath-pip{font-size:7px;letter-spacing:1.5px;color:var(--dim);border:1px solid rgba(107,135,166,.25);border-radius:20px;
  padding:4px 8px;background:rgba(255,255,255,.02);cursor:pointer;transition:all .2s;}
.oath-pip.on{color:var(--ink);border-color:rgba(63,169,255,.55);background:rgba(63,169,255,.12);box-shadow:0 0 12px rgba(63,169,255,.25);}
.oath-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:400;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(107,135,166,.3);background:rgba(4,10,22,.72);color:var(--ink);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.oath-nav:hover{border-color:rgba(63,169,255,.6);color:var(--ac);}
.oath-nav.l{left:0;} .oath-nav.r{right:0;}
/* ===== FORGE ===== */
.forge-spin{position:relative;width:110px;height:110px;margin:26px auto 14px;}
.fg-day{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 12px;margin-top:10px;}
/* THE FORGE — swipeable day deck (each training day is a card you swipe through) */
.fg-deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-top:12px;padding:2px 30% 8px 2px;-webkit-overflow-scrolling:touch;}
.fg-deck::-webkit-scrollbar{height:0;}
.fg-deck .fg-day{flex:0 0 80%;max-width:340px;scroll-snap-align:center;margin-top:0;position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.4);}
.fg-daytag{font-size:7px;letter-spacing:2px;font-weight:900;color:var(--ac);opacity:.7;margin-bottom:4px;}
.fg-addday{flex:0 0 46%!important;max-width:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border:1.5px dashed rgba(63,169,255,.45);background:rgba(10,22,42,.4);color:var(--ac);cursor:pointer;min-height:160px;}
.fg-addbig{font-size:30px;line-height:1;}
.fg-addday span:last-child{font-size:9px;letter-spacing:2px;font-weight:800;}
.fg-dayhead{display:flex;align-items:center;gap:8px;}
.fg-dayname{flex:1;background:none;border:none;border-bottom:1px dashed rgba(63,169,255,.35);color:var(--gd);
  font:800 11.5px Rajdhani,sans-serif;letter-spacing:2px;padding:2px 0;outline:none;text-transform:uppercase;}
.fg-ex{display:flex;align-items:center;gap:8px;margin-top:8px;}
.fg-exname{flex:1;min-width:0;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(63,169,255,.35);background:rgba(10,24,46,.7);color:var(--ink);
  font:800 10px Rajdhani,sans-serif;letter-spacing:1.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fg-exname:active{border-color:var(--ac);}
.fg-reps{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.fg-reps b{width:26px;text-align:center;font-size:12px;color:var(--gd);}
.fg-reps button{width:26px;height:26px;border-radius:7px;border:1px solid rgba(63,169,255,.35);background:rgba(10,24,46,.7);
  color:var(--ac);font-size:13px;font-weight:900;cursor:pointer;}
.fg-x{width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,93,126,.4);background:none;color:var(--rd);font-size:9px;cursor:pointer;flex-shrink:0;}
.fg-add{display:block;width:100%;margin-top:8px;padding:8px;border-radius:8px;cursor:pointer;
  border:1px dashed rgba(63,169,255,.4);background:none;color:var(--ac);font:800 8.5px Rajdhani,sans-serif;letter-spacing:2px;}
.seal-glyph{font-size:44px;text-align:center;margin-top:10px;filter:drop-shadow(0 0 20px rgba(255,206,77,.6));}
/* ===== PROTOCOLS PAGE ===== */
.prot-row{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:10px 12px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(168,107,255,.3);background:var(--card);text-align:left;transition:border-color .15s;}
.prot-row.on{border-color:var(--vi);box-shadow:0 0 14px rgba(168,107,255,.2);}
.prot-cb{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(168,107,255,.5);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--vi);}
.prot-row.on .prot-cb{background:var(--vi);color:#0a0418;box-shadow:0 0 10px rgba(168,107,255,.5);}
.prot-nm{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--ink);}
.prot-cust{font-size:6.5px;letter-spacing:1.5px;color:var(--gd);border:1px solid rgba(255,206,77,.5);border-radius:4px;padding:1px 5px;vertical-align:middle;}
.prot-meta{font-size:7.5px;letter-spacing:1.2px;color:var(--dim);margin-top:3px;}
.prot-hint{font-size:7px;letter-spacing:.8px;color:rgba(107,135,166,.75);margin-top:3px;line-height:1.6;}
/* ===== PENALTY WARNING ===== */
#penalty-ov .gwarn{color:#ff5d7e;text-shadow:0 0 18px rgba(255,93,126,.8);}
.pw-hours{text-align:center;margin-top:14px;}
.pw-hours b{display:block;font-size:52px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 0 30px rgba(255,93,126,.8);}
.pw-hours span{font-size:8px;letter-spacing:3px;color:#ffb3c2;}
.pw-left{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--ink);margin-top:6px;text-align:center;line-height:2;max-width:340px;}

/* ===== TRANSFORMATION FX ===== */
.tf-flash{position:absolute;inset:-8%;z-index:6;pointer-events:none;border-radius:16px;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(63,169,255,.5) 45%, transparent 72%);
  animation:tfFlash .85s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes tfFlash{0%{opacity:0;transform:scale(.6);}18%{opacity:1;transform:scale(1.05);}100%{opacity:0;transform:scale(1.35);}}
.avatarbox img.tf-in{animation:tfIn .8s cubic-bezier(.16,1,.3,1);}
@keyframes tfIn{0%{opacity:0;transform:scale(.86) translateY(10px);filter:brightness(3) drop-shadow(0 0 40px rgba(63,169,255,1));}
  55%{opacity:1;filter:brightness(1.6) drop-shadow(0 0 30px rgba(63,169,255,.9));}
  100%{transform:scale(1) translateY(0);filter:brightness(1);}}
/* ===== STATUS ENTRY SWEEP ===== */
.statbar i.sb-in{animation:sbIn .7s cubic-bezier(.2,.9,.3,1) backwards;}
@keyframes sbIn{from{width:0;opacity:.4;}}
.radar.rd-in .val{animation:rdIn .9s cubic-bezier(.16,1,.3,1), valpulse 3.4s ease-in-out .9s infinite;}
@keyframes rdIn{0%{opacity:0;transform:scale(.2);}60%{opacity:1;transform:scale(1.06);}100%{transform:scale(1);}}
/* ===== BRAWL-STYLE PASS ROAD ===== */
.bs-track{display:flex;gap:0;overflow-x:auto;margin-top:8px;padding:4px 2px 8px;scrollbar-width:none;}
.bs-track::-webkit-scrollbar{height:0;}
.bs-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:92px;}
.bs-col.slim{width:34px;justify-content:center;}
.bs-tile{position:relative;width:86px;height:74px;border-radius:11px;cursor:pointer;padding:5px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid rgba(63,169,255,.35);background:rgba(8,20,38,.85);transition:transform .12s;}
.bs-tile:active{transform:scale(.94);}
.bs-tile.prem{border-color:rgba(255,206,77,.45);background:linear-gradient(180deg,rgba(40,30,6,.85),rgba(20,14,2,.9));}
.bs-tile.empty{visibility:hidden;}
.bs-tile.locked{opacity:.45;filter:saturate(.5);}
.bs-tile.claimed{opacity:.55;border-color:rgba(55,224,139,.5);}
.bs-tile.ready{animation:bsReady 1.6s ease-in-out infinite;border-color:var(--gd);}
@keyframes bsReady{0%,100%{box-shadow:0 0 6px rgba(255,206,77,.25);}50%{box-shadow:0 0 20px rgba(255,206,77,.6);}}
.bs-r{font-size:7.5px;font-weight:800;letter-spacing:.8px;color:var(--ink);text-align:center;line-height:1.5;}
.bs-tile.prem .bs-r{color:#ffe6a8;}
.bs-art{width:26px;height:26px;border:1.5px dashed rgba(255,206,77,.55);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gd);}
.bs-claim{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);font-size:6.5px;font-weight:900;letter-spacing:2px;
  color:#1a1302;background:var(--gd);border-radius:5px 5px 0 0;padding:2px 9px;box-shadow:0 0 10px rgba(255,206,77,.6);}
.bs-lock{position:absolute;top:3px;right:5px;font-size:9px;}
.bs-chip{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;color:var(--dim);border:1.5px solid rgba(107,135,166,.4);background:rgba(8,20,38,.9);}
.bs-chip.big{width:26px;height:26px;font-size:9px;}
.bs-chip.past{color:#062012;background:var(--gn);border-color:var(--gn);box-shadow:0 0 8px rgba(55,224,139,.5);}
.bs-chip.next{color:var(--gd);border-color:var(--gd);animation:bsReady 1.6s ease-in-out infinite;}
/* ===== VESSEL EQUIPMENT ===== */
.veqrow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;width:100%;}
.veq{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;cursor:pointer;
  border:1.5px solid;background:rgba(8,20,38,.85);font:800 8px Rajdhani,sans-serif;letter-spacing:1px;}
.veq svg{width:15px;height:15px;}
.veq span{color:var(--ink);}
.veq b{font-size:7px;letter-spacing:1.5px;}
.veq.on{box-shadow:0 0 12px currentColor;background:rgba(15,32,56,.95);}

/* ===== TOPBAR CURRENCY COLUMN (between hunter box and streak) ===== */
.curr-col{display:flex;flex-direction:column;gap:5px;flex-shrink:0;margin:0 2px;}
.curr-col .curr{cursor:pointer;transition:transform .1s;}
.curr-col .curr:active{transform:scale(.92);}
.edgebtn.gold{border-color:rgba(255,206,77,.5);color:var(--gd);}
.edgebtn.gold .gi{color:var(--gd);}

/* ===== COMPACT HOME CARDS (revert — avatar/status/tasks smaller) ===== */
.g-status.big{padding:10px 13px;}
.g-status.big .statbar{height:4px;}
.card.g-tasks{padding:10px 13px;}
.task{padding:6px 0;}
/* ===== PASS PAGE HERO ===== */
.pass-hero{position:relative;overflow:hidden;border:1.5px solid rgba(255,206,77,.5);border-radius:16px;
  padding:14px 16px;background:linear-gradient(160deg,rgba(46,34,6,.92),rgba(10,8,2,.95));
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 34px rgba(255,206,77,.12);}
.pass-hero-glow{position:absolute;top:-60%;right:-20%;width:70%;height:160%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,77,.22),transparent);animation:heroGlow 4s ease-in-out infinite;}
@keyframes heroGlow{0%,100%{opacity:.5;}50%{opacity:1;}}
.rune.gold{color:var(--gd);}
.rune.gold.on{color:var(--gd);filter:drop-shadow(0 0 10px rgba(255,206,77,.7));}

/* ---------- inside-gate face-off: hunter vs guardian ---------- */
.ingate-vs{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;width:100%;}
.vs-side{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;}
.vs-portrait{width:112px;height:138px;border-radius:14px;overflow:hidden;position:relative;border:2px solid;
  background:linear-gradient(180deg,rgba(10,20,36,.6),rgba(2,6,14,.85));box-shadow:0 8px 24px rgba(0,0,0,.5);}
.vs-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.vs-portrait.hero{border-color:var(--ac);box-shadow:0 0 22px rgba(63,169,255,.5),0 8px 24px rgba(0,0,0,.55);}
.vs-portrait.hero img{object-fit:contain;object-position:center bottom;}   /* avatar is transparent — show full figure */
.vs-portrait.foe{border-color:var(--rd);box-shadow:0 0 22px rgba(255,93,126,.5),0 8px 24px rgba(0,0,0,.55);}
.vs-name{font-size:12px;font-weight:800;letter-spacing:1px;}
.vs-role{font-size:6.5px;letter-spacing:2px;color:var(--dim);}
.vs-clash{display:flex;flex-direction:column;align-items:center;flex-shrink:0;color:var(--gd);
  animation:vsPulse 1.7s ease-in-out infinite;}
.vs-clash .vs-x{font-size:20px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,206,77,.7));}
.vs-clash .vs-word{font-size:15px;font-weight:900;letter-spacing:2px;text-shadow:0 0 12px rgba(255,206,77,.6);}
@keyframes vsPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@media(max-height:430px){ .vs-portrait{width:96px;height:118px;} .ingate-vs{margin-top:8px;} }
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .vs-portrait{width:96px;height:118px;}
body.short .ingate-vs{margin-top:8px;}


/* ---------- gate boss-fight FX: the guardian takes the blow ---------- */
@keyframes gateHit{0%{filter:brightness(2.3) saturate(.2);}28%{filter:brightness(.45) saturate(1.5) hue-rotate(-12deg);}100%{filter:none;}}
.gate-hit{animation:gateHit .5s ease-out;}
@keyframes gateShake{0%,100%{transform:translateX(0);}18%{transform:translateX(-8px);}38%{transform:translateX(7px);}58%{transform:translateX(-5px);}78%{transform:translateX(3px);}}
.gate-shake{animation:gateShake .45s ease-in-out;}
.dmgfloat{position:absolute;top:4%;left:50%;transform:translateX(-50%);font-weight:900;font-size:27px;letter-spacing:1px;
  color:#ff4d6d;text-shadow:0 2px 12px rgba(255,77,109,.8);pointer-events:none;z-index:6;animation:dmgUp 1.1s ease-out forwards;}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,12px) scale(.55);}22%{opacity:1;transform:translate(-50%,-8px) scale(1.18);}100%{opacity:0;transform:translate(-50%,-50px) scale(1);}}

/* ---------- RED GATE — the rift bleeds ---------- */
#scr-gates.redgate{background:linear-gradient(180deg,rgba(34,3,10,.5),rgba(20,2,6,.84)),url(assets/gates-bg.jpg) center/cover no-repeat;}
#scr-gates.redgate .portalbox .p-ring{border-color:rgba(255,77,109,.6)!important;box-shadow:0 0 24px rgba(255,60,96,.35)!important;}
#scr-gates.redgate .p-core{background:radial-gradient(circle,rgba(255,77,109,.55),rgba(120,10,30,.12))!important;}
#scr-gates.redgate .grank{color:var(--rd)!important;text-shadow:0 0 16px rgba(255,77,109,.7);}
#gate-timer{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:2px;font-size:13px;}

/* ===== CURRENCIES SIDE-BY-SIDE + tighter diamonds ===== */
.curr-col.row{flex-direction:row;gap:3px;align-items:center;flex:none;}
.curr-col.row .curr{padding:4px 8px;}
.curr-col.row .curr b{font-size:10px;}
/* radar: original look restored (founder call) */
.radar .rsweep{display:none;}
/* ===== PREMIUM STAT BARS ===== */
.g-status.big .statbar{height:9px;border-radius:6px;margin:4px 0 8px;background:rgba(63,169,255,.1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
.g-status.big .statbar i{border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,#1c5f9e 0%,var(--ac) 60%,#9fd4ff 100%);
  box-shadow:0 0 10px rgba(63,169,255,.55),inset 0 1px 0 rgba(255,255,255,.35);}
.g-status.big .statbar i::after{content:"";position:absolute;inset:0;width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sweep 3.2s ease-in-out infinite;}
.g-status.big #statlist .tiny b{font-size:13px;}
.g-status.big #statlist .tiny{font-size:9px;}
/* ===== TITLES + PORTRAITS ===== */
.title-chip{padding:4px 9px;border-radius:7px;border:1px solid rgba(255,206,77,.4);background:rgba(20,16,4,.5);
  color:var(--gd);font:800 7.5px Rajdhani,sans-serif;letter-spacing:1.5px;cursor:pointer;}
.title-chip.on{background:var(--gd);color:#1a1302;box-shadow:0 0 10px rgba(255,206,77,.5);}
.pfp-opt{width:30px;height:30px;border-radius:50%;border:1.5px solid;background:rgba(8,20,38,.85);
  font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.pfp-opt.on{box-shadow:0 0 12px currentColor;}
.pfp-opt.lk{opacity:.45;}
/* ===== HUNTER CARD ===== */
.hc-card{border:1.5px solid rgba(63,169,255,.45);border-radius:14px;background:linear-gradient(165deg,rgba(10,26,48,.95),rgba(2,6,14,.98));
  padding:13px 14px;margin-top:8px;box-shadow:0 8px 26px rgba(0,0,0,.5);}
.hc-top{display:flex;align-items:center;gap:11px;}
.hc-rank{font-size:30px;font-weight:900;flex-shrink:0;text-shadow:0 0 16px currentColor;}
.hc-mid{display:flex;gap:12px;margin-top:12px;align-items:stretch;}
.hc-art{width:96px;height:120px;object-fit:cover;object-position:top;border-radius:10px;flex-shrink:0;}
/* ===== PROGRAM PAGE — day pager ===== */
.pg-pager{display:flex;gap:10px;overflow-x:auto;margin-top:12px;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;}
.pg-pager::-webkit-scrollbar{height:0;}
.pg-day{flex:0 0 78%;max-width:300px;scroll-snap-align:center;border:1.5px solid var(--line);border-radius:14px;
  background:var(--card);padding:13px 14px;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.pg-day.today{border-color:var(--gd);box-shadow:0 0 20px rgba(255,206,77,.15),0 6px 18px rgba(0,0,0,.4);}
.pg-dayhead{display:flex;justify-content:space-between;align-items:center;}
.pg-dayname{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--gd);}
.pg-today{font-size:6.5px;letter-spacing:2px;color:#062012;background:var(--gn);border-radius:5px;padding:2px 7px;font-weight:900;}
.pg-exs{margin-top:8px;}
.pg-ex{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(63,169,255,.12);}
.pg-ex:last-child{border-bottom:none;}
.pg-exn{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--ink);}
.pg-exr{font-size:11px;font-weight:900;color:var(--ac);}

/* ===== THE GATE DECK — swipeable program (each day a gate you tap to enter) ===== */
.pg-deck{display:flex;gap:12px;overflow-x:auto;margin-top:14px;padding:6px 40% 10px 2px;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pg-deck::-webkit-scrollbar{height:0;}
.pgc{flex:0 0 76%;max-width:320px;scroll-snap-align:center;cursor:pointer;position:relative;overflow:hidden;
  border:1.5px solid var(--line);border-radius:18px;padding:16px 16px 14px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,22,42,.9),rgba(5,12,26,.92));
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .15s cubic-bezier(.2,.9,.3,1),border-color .2s,box-shadow .2s;min-height:210px;}
.pgc:active{transform:scale(.97);}
.pgc::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(63,169,255,.16),transparent 62%);}
.pgc.is-today{border-color:var(--gd);box-shadow:0 0 26px rgba(255,206,77,.28),0 10px 26px rgba(0,0,0,.5);}
.pgc.is-today::before{opacity:1;background:radial-gradient(ellipse at 50% -10%,rgba(255,206,77,.2),transparent 62%);}
.pgc.is-done{border-color:rgba(55,224,139,.6);opacity:.92;}
.pgc.is-done::before{opacity:1;background:radial-gradient(ellipse at 50% -10%,rgba(55,224,139,.18),transparent 62%);}
.pgc-top{display:flex;justify-content:space-between;align-items:center;position:relative;}
.pgc-rib{font-size:7px;letter-spacing:2px;font-weight:900;border-radius:6px;padding:3px 8px;}
.pgc-rib.now{color:#1a1400;background:var(--gd);}
.pgc-rib.done{color:#04140b;background:var(--gn);}
.pgc-rib.up{color:var(--dim);border:1px solid var(--line);}
.pgc-prc{font-size:8px;font-weight:900;letter-spacing:1px;color:var(--gd);}
.pgc-name{font-size:15px;font-weight:900;letter-spacing:2px;margin-top:10px;position:relative;}
.pgc-sub{font-size:7.5px;letter-spacing:1.5px;color:var(--dim);margin-top:3px;position:relative;}
.pgc-exs{margin-top:10px;flex:1;position:relative;}
.pgc-ex{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(63,169,255,.1);}
.pgc-ex:last-child{border-bottom:none;}
.pgc-exn{font-size:9.5px;font-weight:800;letter-spacing:1px;color:var(--ink);}
.pgc-exr{font-size:10.5px;font-weight:900;color:var(--ac);}
.pgc-pr{color:var(--gd);font-size:9px;}
.pgc-cta{margin-top:12px;text-align:center;font-size:9px;font-weight:900;letter-spacing:2px;
  padding:9px;border-radius:10px;position:relative;
  background:linear-gradient(180deg,#5cc0ff,#1c6cb4);color:#04101f;box-shadow:0 4px 0 #0d3a63;}
.pgc.is-today .pgc-cta{background:linear-gradient(180deg,#ffd76a,#d99a1e);box-shadow:0 4px 0 #7a5410;}
.pgc.is-done .pgc-cta{background:none;color:var(--gn);box-shadow:none;border:1px solid rgba(55,224,139,.4);}
.pgc-pips{display:flex;gap:6px;justify-content:center;margin-top:10px;}
.pgc-pip{width:6px;height:6px;border-radius:50%;background:rgba(63,169,255,.25);transition:all .2s;}
.pgc-pip.on{background:var(--gd);box-shadow:0 0 8px var(--gd);transform:scale(1.3);}
body.wide .pgc{flex-basis:40%;min-height:180px;}
/* ===== VESSEL SHOWCASE ===== */
.vshow{display:flex;gap:16px;width:100%;align-items:stretch;}
.vshow-art{flex:0 0 46%;max-width:230px;border-radius:14px;overflow:hidden;border:1.5px solid rgba(63,169,255,.4);
  background:radial-gradient(circle at 50% 30%,rgba(63,169,255,.14),transparent);box-shadow:0 0 26px rgba(63,169,255,.15);}
.vshow-art img{width:100%;height:100%;object-fit:contain;object-position:center;}
.vshow-info{flex:1;min-width:0;text-align:left;}
@media (max-width:520px){ body:not(.wide) .vshow{flex-direction:column;align-items:center;} body:not(.wide) .vshow-art{flex:none;width:52%;height:205px;} body:not(.wide) .vshow-info{width:100%;text-align:center;} body:not(.wide) .vshow-info .h-sec,body:not(.wide) .vshow-info .tiny{justify-content:center;text-align:center;} }
.hdossier .tiny{white-space:nowrap;letter-spacing:2px;}

/* ===== IMAGE PORTRAIT OPTIONS ===== */
.pfp-opt.img{position:relative;overflow:hidden;border-color:rgba(63,169,255,.5);padding:0;}
.pfp-opt.img img{width:100%;height:100%;object-fit:cover;object-position:top;}
.pfp-opt.img.on{border-color:var(--gd);box-shadow:0 0 12px rgba(255,206,77,.55);}
.pfp-opt.img.lk img{filter:grayscale(1) brightness(.4);}
.pfp-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;}
/* ===== ZELDA-STYLE EQUIPMENT SLOTS ===== */
.eq-slots{display:flex;gap:10px;margin-top:8px;}
.eq-slot{position:relative;width:66px;height:66px;border-radius:12px;cursor:pointer;flex-shrink:0;
  border:1.5px dashed rgba(63,169,255,.45);background:rgba(8,20,38,.85);
  display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.eq-slot:active{transform:scale(.93);}
.eq-slot.worn{border-style:solid;background:radial-gradient(circle at 50% 38%,rgba(63,169,255,.1),rgba(4,10,20,.95));}
.eq-ic{width:30px;height:30px;display:block;filter:drop-shadow(0 0 8px currentColor);}
.eq-ic svg{width:100%;height:100%;}
.eq-plus{font-size:22px;color:rgba(63,169,255,.7);font-weight:300;}
.eq-g{position:absolute;top:3px;right:4px;font-size:7px;font-weight:900;border:1px solid;border-radius:4px;padding:0 4px;background:rgba(2,6,14,.8);}
.eq-lbl{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:6.5px;letter-spacing:1.5px;color:var(--dim);font-weight:800;white-space:nowrap;}
.eq-picker{margin-top:22px;display:flex;flex-direction:column;gap:6px;}
.eq-pick{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;cursor:pointer;
  border:1.5px solid;background:rgba(8,20,38,.85);font:800 8.5px Rajdhani,sans-serif;letter-spacing:1px;color:var(--ink);text-align:left;}
.eq-pick svg{width:16px;height:16px;}
.eq-pick span:nth-child(2){flex:1;}
.eq-pick.on{background:rgba(15,32,56,.95);}
/* ===== SHOWCASE: compact — zero scroll in landscape ===== */
.vshow{align-items:center;}
.vshow-art{flex:0 0 38%;max-width:190px;}
.vshow-art img{max-height:228px;}
body.wide .vshow-art{max-height:225px;}
body.wide .vshow-art img{max-height:225px;}

/* ===== EMPTY EQUIPMENT — System panel ===== */
.eq-empty{margin-top:8px;border:1.5px solid rgba(63,169,255,.35);border-radius:12px;
  background:linear-gradient(160deg,rgba(10,26,48,.9),rgba(2,6,14,.95));padding:14px 14px;text-align:center;
  box-shadow:inset 0 0 20px rgba(63,169,255,.06);}
.eq-empty-msg{font-size:9px;line-height:1.9;letter-spacing:1px;color:#9fc4e8;margin-bottom:12px;}

/* ===== TOPBAR PORTRAIT FIT — hunter box + currencies + 5 diamonds ===== */
.hdossier{width:92px;max-width:92px;overflow:hidden;box-sizing:border-box;flex:none;}
.hn{display:inline-block;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
body:not(.wide) .topbar .edgebtn,
body:not(.wide) .topbar .dbadge{width:40px;min-width:40px;max-width:40px;height:40px;flex:none;box-sizing:border-box;overflow:hidden;}
body:not(.wide) .topbar .edgebtn::before{inset:6px;}
body:not(.wide) .topbar .edgebtn i,
body:not(.wide) .topbar .dbadge span:not(.ci-dot){font-size:6px;}
body:not(.wide) .topbar .edgebtn .gi{font-size:14px;}
body:not(.wide) .topbar > div:last-child{gap:2px;}
body:not(.wide) .hdossier .tiny{letter-spacing:1px;}
body:not(.wide) .hdossier .bar{width:80px;}
body:not(.wide) .curr-col.row{gap:2px;}
body:not(.wide) .curr-col.row .curr{width:40px;min-width:40px;max-width:40px;padding:3px 2px;font-size:7px;justify-content:center;gap:2px;overflow:hidden;box-sizing:border-box;}
body:not(.wide) .curr-col.row .curr b{font-size:8.5px;}
body:not(.wide) .curr-col.row .curr b{font-size:8.5px;}

.hnrow{display:flex;align-items:center;gap:5px;}
/* rank = identity anchor: same footprint, more visual weight so the eye lands here first */
.rankbadge{flex-shrink:0;color:#dcefff;font-size:11px;font-weight:900;border:1px solid rgba(63,169,255,.7);
  border-radius:5px;padding:0 5px;line-height:1.5;background:rgba(63,169,255,.16);
  text-shadow:0 0 10px rgba(63,169,255,.65);box-shadow:0 0 12px rgba(63,169,255,.22),inset 0 0 8px rgba(63,169,255,.12);}

/* ===== HOMEPAGE — hero cards compact, directive gets its presence back (revert request) ===== */
.g-dir{padding:12px 15px !important;margin-top:8px;}
.g-dir .h-sec{font-size:9px;}
#directive{font-size:10.5px !important;line-height:1.65 !important;max-height:none;}
.card.g-status.big{padding:11px 13px;}
.card.g-status.big .h-sec{font-size:10px;}
.card.g-tasks{padding:11px 13px;}
.card.g-tasks .h-big{font-size:15px;}
.avatarbox.g-avatar{height:244px !important;}

/* ===== THE FUEL — Nutrition page ===== */
.nut-hero{position:relative;width:170px;height:170px;margin:18px auto 4px;}
.nut-ring{width:100%;height:100%;transform:rotate(-90deg);}
.nut-ring-bg{fill:none;stroke:rgba(63,169,255,.12);stroke-width:9;}
.nut-ring-fg{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1);filter:drop-shadow(0 0 6px currentColor);}
.nut-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.nut-pg{font-size:38px;font-weight:900;letter-spacing:1px;text-shadow:0 0 20px rgba(63,169,255,.4);line-height:1;}
.nut-pg small{font-size:15px;opacity:.7;}
.nut-pt{font-size:8px;letter-spacing:2px;color:var(--dim);margin-top:4px;}
.nut-pp{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--gd);margin-top:3px;}
.nut-macros{display:flex;gap:9px;margin-top:12px;}
.nut-macro{flex:1;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:11px 6px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.nut-mv{font-size:19px;font-weight:900;letter-spacing:.5px;}
.nut-mv small{font-size:9px;opacity:.6;font-weight:700;}
.nut-ml{font-size:7px;letter-spacing:2px;color:var(--dim);margin-top:3px;}

/* ===== PREMIUM DAILY QUESTS ===== */
.dt-count-badge{font-size:8px;letter-spacing:2px;color:var(--dim);flex-shrink:0;margin-left:auto;margin-right:8px;}
.dt-count-badge b{font-size:12px;color:var(--ac);font-weight:900;}
.dt-progbar{height:7px;border-radius:5px;background:rgba(63,169,255,.1);margin:9px 0 2px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);flex-shrink:0;}
.dt-progbar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#1c5f9e,var(--ac) 55%,#9fd4ff);
  box-shadow:0 0 10px rgba(63,169,255,.6);transition:width .6s cubic-bezier(.2,.9,.3,1);}
.qt-sechead{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 2px;
  font-size:8px;font-weight:800;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase;}
.qt-sechead.vi span{color:var(--vi);}
.qt-sechead.gd span{color:var(--gd);}
.qtask{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;margin-top:8px;border-radius:13px;text-align:left;
  border:1px solid var(--line);border-left:3px solid rgba(63,169,255,.6);
  background:linear-gradient(150deg,rgba(12,26,48,.85),rgba(6,14,28,.92));
  box-shadow:0 3px 12px rgba(0,0,0,.35);transition:transform .12s ease,border-color .2s,box-shadow .2s;}
.qtask:active{transform:scale(.985);}
.qtask.protocol{border-left-color:rgba(168,107,255,.6);}
.qtask.pass{border-left-color:rgba(255,206,77,.6);}
.qtask.done{opacity:.6;box-shadow:none;}
.qtask.done .qt-name{text-decoration:line-through;color:var(--dim);}
.qtask.ghost{background:rgba(8,20,38,.45);border-style:dashed;box-shadow:none;}
.qt-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid currentColor;background:rgba(2,6,14,.5);
  box-shadow:0 0 14px -3px currentColor,inset 0 0 12px -7px currentColor;}
.qt-ic svg{width:22px;height:22px;}
.qtask.done .qt-ic{filter:grayscale(.6);opacity:.7;}
.qt-mid{flex:1;min-width:0;}
.qt-name{font-size:12.5px;font-weight:800;letter-spacing:1px;color:var(--ink);text-transform:uppercase;}
.qt-sub{font-size:8px;letter-spacing:1px;color:var(--dim);margin-top:3px;line-height:1.4;}
.qtask.done .qt-sub{color:var(--gn);}
.qt-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;min-width:34px;}
.qt-xp{font-size:13px;font-weight:900;color:var(--gd);letter-spacing:.3px;text-shadow:0 0 8px rgba(255,206,77,.35);}
.qt-xp.done{color:var(--dim);text-shadow:none;}
.qt-go{font-size:17px;color:var(--ac);font-weight:900;line-height:.8;opacity:.85;}
.qt-check{font-size:14px;color:var(--gn);font-weight:900;line-height:.8;text-shadow:0 0 8px rgba(55,224,139,.6);}
.qt-badge{font-size:15px;font-weight:900;line-height:1;}

/* ================= THE ARENA — Shadow / Ladder / Duel lanes ================= */
.a-inner{display:flex;flex-direction:column;gap:10px;}
.a-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.lane-switch{display:inline-flex;gap:3px;background:rgba(10,16,26,.7);border:1px solid var(--line);border-radius:10px;padding:3px;}
.lane-tab{font-weight:800;font-size:8.5px;letter-spacing:2px;color:var(--dim);background:transparent;border:0;padding:7px 11px;border-radius:8px;cursor:pointer;transition:.18s;}
.lane-tab.on{color:var(--ink);background:linear-gradient(180deg,rgba(0,229,255,.22),rgba(0,229,255,.06));box-shadow:inset 0 0 0 1px rgba(0,229,255,.4),0 0 14px rgba(0,229,255,.22);}
.a-lane{display:none;}
.a-lane.on{display:block;animation:alaneIn .28s ease;}
@keyframes alaneIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
/* VS face-off */
.vs-face{display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:4px;}
.vs-hunter,.vs-shadow{flex:1;max-width:150px;cursor:pointer;display:flex;flex-direction:column;text-align:center;}
.vs-art{height:112px;border-radius:12px;border:1.5px solid rgba(0,229,255,.4);background:radial-gradient(circle at 50% 28%,rgba(0,229,255,.12),rgba(6,12,22,.65));display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;position:relative;}
.vs-art.shadow{border-color:rgba(255,93,126,.45);background:radial-gradient(circle at 50% 28%,rgba(255,93,126,.1),rgba(10,4,10,.88));}
.sh-badge{position:absolute;top:6px;right:6px;font-weight:900;font-size:11px;border:1.5px solid;border-radius:6px;padding:2px 6px;background:rgba(0,0,0,.55);}
.vs-nm{font-size:11px;font-weight:800;letter-spacing:1.5px;margin-top:6px;color:var(--ink);}
.vs-rk{font-size:8px;font-weight:700;letter-spacing:2px;margin-top:2px;}
.vs-clash{align-self:center;font-size:24px;font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 18px rgba(255,93,126,.8);}
.rival-taunt{margin-top:10px;padding:9px 12px;border-left:2px solid var(--rd);background:rgba(255,93,126,.06);border-radius:0 8px 8px 0;font-size:10.5px;font-style:italic;line-height:1.5;color:#e7d3da;}
.rival-taunt span{display:block;text-align:right;font-style:normal;font-size:8px;letter-spacing:1.5px;color:var(--dim);margin-top:4px;}
/* race bars */
.race{margin-top:10px;}
.race-row{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:1px;margin-top:5px;}
.race-row>span{min-width:60px;}
.race-row>b{min-width:30px;text-align:right;}
.race-bar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;}
.race-bar i{display:block;height:100%;border-radius:5px;transition:width .5s ease;}
.race-bar i.you{background:linear-gradient(90deg,#00e5ff,#37e08b);}
/* ladder */
.lad-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lad-list{margin-top:6px;}
.lb-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px;}
.lb-rk{font-weight:900;min-width:20px;}
.lb-tag{font-size:7px;letter-spacing:1.5px;padding:2px 5px;border-radius:4px;font-weight:800;}
.lb-tag.sh{color:#9fb2c9;background:rgba(120,140,170,.14);}
.lb-tag.hn{color:var(--ac);background:rgba(0,229,255,.1);}
.lb-row.shadow{opacity:.72;}

/* ===== ARENA · THE GAUNTLET — six shadows, E→S, as a visible climb =====
   The whole ladder is on screen so the player can see what they have taken and
   what is still standing. Beaten nodes read as spent; the current one breathes;
   locked ones stay nameless (???) so there is something left to find out. */
.gauntlet{margin-top:14px;padding:11px 12px 12px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(10,18,32,.75),rgba(6,10,18,.5));}
.gt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.gt-head span{font:800 10px Rajdhani,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gd);}
.gt-head b{font-size:8px;letter-spacing:2px;color:var(--dim);}
.gt-rail{display:flex;align-items:flex-start;justify-content:space-between;gap:0;margin-top:10px;}
.gt-node{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:56px;text-align:center;}
.gt-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:900 12px Rajdhani,sans-serif;border:1.5px solid;transition:.2s;}
.gt-nm{font-size:6.5px;letter-spacing:1px;font-weight:800;color:var(--dim);line-height:1.3;word-break:break-word;}
.gt-link{flex:1;height:1.5px;margin-top:14px;background:linear-gradient(90deg,rgba(120,140,170,.35),rgba(120,140,170,.12));}
/* beaten — spent, quiet, unmistakably done */
.gt-node.beaten .gt-dot{color:#062012;background:var(--gn);border-color:var(--gn);box-shadow:0 0 10px rgba(55,224,139,.45);}
.gt-node.beaten .gt-nm{color:var(--gn);}
/* current — the one in front of you, alive */
.gt-node.cur .gt-dot{color:var(--gc);border-color:var(--gc);background:rgba(0,0,0,.45);
  animation:gtPulse 1.7s ease-in-out infinite;}
.gt-node.cur .gt-nm{color:var(--ink);}
@keyframes gtPulse{0%,100%{box-shadow:0 0 6px color-mix(in srgb,var(--gc) 35%,transparent);}
  50%{box-shadow:0 0 20px color-mix(in srgb,var(--gc) 75%,transparent);}}
/* locked — present, nameless, waiting */
.gt-node.locked{opacity:.42;}
.gt-node.locked .gt-dot{color:var(--dim);border-color:rgba(120,140,170,.4);background:rgba(8,14,24,.6);}

/* stakes named BEFORE the fight */
.stake-line{margin-top:7px;font:800 8px Rajdhani,sans-serif;letter-spacing:2px;color:var(--dim);}
.stake-line b{color:var(--gd);}

/* ===== ARENA · THE SUMMONS — the referral engine =====
   referShare() already paid ◉400/hunter and granted RECRUITER at 3, but it lived on a
   Menu button nobody opened. Here it leads the lane where the competitive urge actually is. */
.summon{position:relative;overflow:hidden;padding:14px 15px;border:1.5px solid rgba(255,206,77,.5);border-radius:16px;
  background:linear-gradient(160deg,rgba(46,34,6,.92),rgba(10,8,2,.95));
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 34px rgba(255,206,77,.12);text-align:center;}
.sm-glow{position:absolute;top:-60%;right:-20%;width:70%;height:170%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,77,.2),transparent);animation:heroGlow 4s ease-in-out infinite;}
.sm-head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;text-align:left;}
.sm-ttl{font:900 17px Rajdhani,sans-serif;letter-spacing:3px;color:var(--gd);text-transform:uppercase;}
.sm-sub{font-size:7.5px;letter-spacing:2px;color:var(--dim);margin-top:2px;}
.sm-pay{flex-shrink:0;text-align:right;font:900 17px Rajdhani,sans-serif;color:var(--gd);line-height:1;}
.sm-pay small{display:block;font-size:6.5px;letter-spacing:1.5px;color:var(--dim);font-weight:800;margin-top:3px;}
.sm-bar{position:relative;z-index:2;height:5px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:11px;}
.sm-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffce4d,#ff9a3d);transition:width .5s ease;}
.sm-meta{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;font-size:7.5px;letter-spacing:1.5px;color:var(--dim);font-weight:800;}
.sm-meta b{color:var(--gd);font-size:10px;}
.sm-next{color:var(--ac);}
.summon .cta{position:relative;z-index:2;margin-top:11px;}
.sm-foot{position:relative;z-index:2;margin-top:8px;font-size:7px;letter-spacing:1.5px;color:var(--dim);line-height:1.6;}

/* ===== RANK CREST — the climb, made visible =====
   The letter alone changed 6 times in 3.7 years. The division and the bar beneath it
   move on a human timescale, so the ladder reads as a climb in progress. */
.rank-crest{display:flex;align-items:center;gap:11px;margin-top:8px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(10,18,32,.8),rgba(6,10,18,.55));}
.rc-badge{flex-shrink:0;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font:900 21px Rajdhani,sans-serif;color:var(--rc);border:2px solid var(--rc);background:rgba(0,0,0,.45);
  box-shadow:0 0 16px color-mix(in srgb,var(--rc) 42%,transparent),inset 0 0 12px color-mix(in srgb,var(--rc) 14%,transparent);}
.rc-body{flex:1;min-width:0;}
.rc-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font:800 8px Rajdhani,sans-serif;letter-spacing:2px;color:var(--dim);}
.rc-top b{font-size:12px;letter-spacing:2.5px;}
.rc-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px;}
.rc-bar i{display:block;height:100%;border-radius:4px;transition:width .6s cubic-bezier(.2,.9,.3,1);}
.rc-foot{margin-top:5px;font-size:7px;letter-spacing:1.5px;color:var(--dim);font-weight:800;}
.rc-foot b{color:var(--gd);}

/* ===== LADDER STAKES — position · payout · clock =====
   Finishing #1 paid nothing before, so nobody fought for it. This puts the prize and
   the deadline on screen permanently: what you'd win if the season ended right now. */
.lad-stakes{display:flex;align-items:stretch;gap:10px;margin-top:8px;padding:9px 11px;border-radius:12px;
  border:1px solid rgba(255,206,77,.35);background:linear-gradient(180deg,rgba(40,30,6,.5),rgba(12,10,4,.42));}
.ls-pos,.ls-clock{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;}
.ls-pos b{font:900 20px Rajdhani,sans-serif;color:var(--gd);line-height:1;}
.ls-clock b{font:900 17px Rajdhani,sans-serif;color:var(--rd);line-height:1;}
.ls-pos span,.ls-clock span{font-size:6.5px;letter-spacing:1.5px;color:var(--dim);font-weight:800;margin-top:3px;}
.ls-mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);padding:0 11px;}
.ls-band{font:900 11px Rajdhani,sans-serif;letter-spacing:2.5px;color:var(--ink);}
.ls-band i{display:block;font-style:normal;font-size:6.5px;letter-spacing:1.5px;color:var(--dim);margin-top:2px;font-weight:800;}
.ls-pay{margin-top:4px;font:800 9px Rajdhani,sans-serif;letter-spacing:1.5px;color:var(--gd);}

/* ===== DUEL · THE FACE-OFF =====
   Two hunters, not two bars. Avatar, rank, worn gear and the champion at their side —
   the things a player actually wants to show off, none of which appeared in a duel before. */
.ds-face{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin-top:10px;}
.ds{flex:1;min-width:0;max-width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ds-art{position:relative;width:100%;height:76px;border-radius:11px;overflow:hidden;
  border:1.5px solid var(--dc);background:radial-gradient(circle at 50% 26%,rgba(255,255,255,.07),rgba(6,12,22,.85));
  display:flex;align-items:flex-end;justify-content:center;}
.ds-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 9px rgba(0,229,255,.35));}
.ds.foe .ds-art img{filter:brightness(0) drop-shadow(0 0 10px var(--dc));opacity:.9;}
.ds-unknown{font:900 26px Rajdhani,sans-serif;color:var(--dim);opacity:.5;align-self:center;}
.ds-rank{position:absolute;top:4px;right:4px;font:900 10px Rajdhani,sans-serif;border:1.5px solid;border-radius:5px;
  padding:1px 5px;background:rgba(0,0,0,.6);}
.ds-nm{margin-top:5px;font:800 10px Rajdhani,sans-serif;letter-spacing:1.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.ds-gear{margin-top:4px;display:flex;gap:3px;justify-content:center;flex-wrap:wrap;transform:scale(.82);}
.ds-vs{align-self:center;font:900 17px Rajdhani,sans-serif;font-style:italic;color:#fff;
  text-shadow:0 0 16px rgba(255,93,126,.75);flex-shrink:0;}
/* the champion chip — the army, finally on screen */
.ds-champ{margin-top:6px;width:100%;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;cursor:pointer;
  border:1px solid var(--cc,rgba(120,140,170,.35));background:rgba(0,0,0,.35);text-align:left;}
.ds-champ img{width:20px;height:20px;border-radius:4px;object-fit:cover;object-position:top center;flex-shrink:0;}
.ds-champ span{flex:1;min-width:0;font:800 7px Rajdhani,sans-serif;letter-spacing:1px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-champ i{font-style:normal;font:800 7px Rajdhani,sans-serif;color:var(--cc,var(--dim));flex-shrink:0;}
.ds-champ.empty{justify-content:center;text-align:center;border-style:dashed;}
.ds-champ.empty span{flex:none;color:var(--dim);}
.ds-champ:active{transform:scale(.97);}

/* champion picker */
.champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
.champ-pick{position:relative;padding:7px 6px 8px;border-radius:11px;cursor:pointer;text-align:center;
  border:1.5px solid rgba(120,140,170,.3);background:rgba(8,16,28,.8);transition:.15s;}
.champ-pick.on{border-color:var(--cc);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 40%,transparent);}
.cp-art{height:52px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.cp-art img{max-width:100%;max-height:100%;object-fit:contain;}
.cp-nm{margin-top:4px;font:800 7.5px Rajdhani,sans-serif;letter-spacing:1px;color:var(--ink);line-height:1.3;}
.cp-st{font:800 7px Rajdhani,sans-serif;letter-spacing:1px;color:var(--cc);margin-top:2px;}
.cp-on{position:absolute;top:4px;right:4px;font:900 6px Rajdhani,sans-serif;letter-spacing:1px;color:#04101f;
  background:var(--cc);border-radius:4px;padding:1px 4px;}

/* ===== DUEL · LIVE RACE =====
   An active 1v1 had no race view at all — the AI shadow lane had progress bars and the
   real duel, against a real person, had a sentence. This is the hero state now. */
.duel-live{padding:12px 13px 13px;border-radius:14px;border:1.5px solid rgba(0,229,255,.4);
  background:linear-gradient(180deg,rgba(6,26,40,.85),rgba(4,10,20,.7));
  box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 30px rgba(0,229,255,.1);}
.duel-live.urgent{border-color:rgba(255,93,126,.55);box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 34px rgba(255,93,126,.18);}
.dl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.dl-head span{font:800 11px Rajdhani,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--ac);}
.dl-head b{font:900 13px Rajdhani,sans-serif;letter-spacing:1.5px;color:var(--ink);}
.dl-head b.hot{color:var(--rd);animation:pulse 1.5s ease-in-out infinite;}
.dl-race{margin-top:10px;}
.dl-row{display:flex;align-items:center;gap:9px;margin-top:6px;font:800 9px Rajdhani,sans-serif;letter-spacing:1px;}
.dl-nm{min-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dl-nm.you{color:var(--ac);}
.dl-nm.foe{color:#ffb3c2;}
.dl-row>b{min-width:34px;text-align:right;color:var(--ink);}
.dl-bar{flex:1;height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.dl-bar i{display:block;height:100%;border-radius:6px;transition:width .5s cubic-bezier(.2,.9,.3,1);}
.dl-bar i.you{background:linear-gradient(90deg,#00e5ff,#37e08b);}
.dl-bar i.foe{background:linear-gradient(90deg,#ff5d7e,#ff9a3d);}
/* The actual tasks, ticked live. "2 TASKS BETWEEN YOU AND THE WIN" never said WHICH two —
   you had to leave the duel to find out. Each chip jumps straight to the work. */

.dt.done span{text-decoration:line-through;opacity:.75;}
.dl-state{margin-top:9px;font:800 8.5px Rajdhani,sans-serif;letter-spacing:1.5px;color:var(--ac);text-align:center;}
.dl-state.bad{color:var(--rd);}

/* ===== DUEL · INCOMING CHALLENGE =====
   Someone naming you is the single highest-intent moment in the Arena. It used to be a
   line of text under a referral card, below the fold. */
.duel-call{position:relative;overflow:hidden;padding:14px 15px;border-radius:16px;text-align:center;
  border:1.5px solid rgba(255,93,126,.5);background:linear-gradient(160deg,rgba(46,8,20,.92),rgba(12,4,8,.95));
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 34px rgba(255,93,126,.14);}
.dc-glow{position:absolute;top:-60%;left:-20%;width:70%;height:170%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,93,126,.22),transparent);animation:heroGlow 3.4s ease-in-out infinite;}
.dc-kicker{position:relative;z-index:2;font:800 8px Rajdhani,sans-serif;letter-spacing:3px;color:var(--rd);}
.dc-name{position:relative;z-index:2;font:900 22px Rajdhani,sans-serif;letter-spacing:4px;color:var(--ink);margin-top:5px;
  text-shadow:0 0 20px rgba(255,93,126,.5);}
.dc-sub{position:relative;z-index:2;font-size:7.5px;letter-spacing:2px;color:var(--dim);margin-top:3px;font-weight:800;}
.dc-terms{position:relative;z-index:2;margin-top:11px;padding:9px 11px;border-radius:10px;text-align:left;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.3);}
.dc-tasks{font-size:8.5px;line-height:1.9;letter-spacing:1.5px;color:var(--ink);margin-top:3px;font-weight:800;}
.duel-call .cta{position:relative;z-index:2;margin-top:12px;}

/* Each Arena lane runs on a different clock — say so on the tab itself. */
.lt-when{display:block;font-style:normal;font-size:6px;letter-spacing:1.5px;opacity:.65;margin-top:2px;font-weight:800;}

/* ===== WALL OF HONOR — the one place the climb accumulates =====
   A season prize that vanishes when the board zeroes is not a prize. */
.honor{margin-top:10px;padding:10px 12px 11px;border-radius:12px;border:1px solid rgba(255,206,77,.3);
  background:linear-gradient(180deg,rgba(30,23,6,.55),rgba(10,9,4,.4));}
.hn-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.hn-head span{font:800 10px Rajdhani,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gd);}
.hn-head b{font-size:7px;letter-spacing:1.5px;color:var(--dim);}
.hn-empty{margin-top:7px;font-size:7.5px;letter-spacing:1.5px;line-height:1.9;color:var(--dim);font-weight:800;text-align:center;}
.hn-row{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 8px;border-radius:7px;
  background:rgba(255,255,255,.04);font-size:9px;font-weight:800;letter-spacing:1px;}
.hn-row.champ{background:rgba(255,206,77,.1);box-shadow:inset 0 0 0 1px rgba(255,206,77,.28);}
.hn-m{min-width:20px;color:var(--gd);font-size:12px;}
.hn-nm{color:var(--ink);}
.hn-sn{margin-left:auto;font-size:7px;letter-spacing:1.5px;color:var(--dim);}

/* ===== RIVALS — saved opponents, one tap to a rematch ===== */
.rivals{margin-top:12px;padding:10px 12px 11px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,18,32,.7),rgba(6,10,18,.45));}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.rv-head span{font:800 10px Rajdhani,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--ac);}
.rv-head b{font-size:7px;letter-spacing:1.5px;color:var(--dim);}
.rv-empty{margin-top:7px;font-size:7.5px;letter-spacing:1.5px;line-height:1.9;color:var(--dim);font-weight:800;text-align:center;}
.rv-row{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 8px;border-radius:7px;
  background:rgba(255,255,255,.04);font-size:9.5px;font-weight:800;letter-spacing:1px;}
.rv-row>b{min-width:20px;font-size:11px;}
.rv-nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rv-go{margin-left:auto;flex-shrink:0;font:800 7.5px Rajdhani,sans-serif;letter-spacing:1.5px;cursor:pointer;
  color:var(--rd);background:rgba(255,93,126,.1);border:1px solid rgba(255,93,126,.45);border-radius:6px;padding:4px 8px;}
.rv-go:active{transform:scale(.94);}

/* tappable ladder rows */
.lb-row[role="button"]{cursor:pointer;transition:background .15s;}
.lb-row[role="button"]:active{background:rgba(0,229,255,.12);}

/* ladder: always name the next rung */
.lad-chase{display:flex;align-items:center;gap:8px;margin-top:7px;padding:7px 10px;border-radius:9px;
  border:1px solid rgba(0,229,255,.28);background:rgba(0,229,255,.06);
  font:800 8px Rajdhani,sans-serif;letter-spacing:2px;}
.lad-chase span{color:var(--dim);}
.lad-chase b{font-size:10px;letter-spacing:1.5px;}
.lad-chase i{margin-left:auto;font-style:normal;color:var(--ac);}
.lad-chase.top{border-color:rgba(255,206,77,.4);background:rgba(255,206,77,.07);}
.lad-chase.top span{color:var(--gd);}

/* Landscape is only ~390px tall, and the Gauntlet is the payoff — it has to sit ABOVE
   the fold, not behind a scroll. Tighten the face-off so the whole climb is visible. */
body.wide #scr-arena .vs-art{height:78px;}
body.wide #scr-arena .vs-nm{margin-top:4px;font-size:10px;}
body.wide #scr-arena .rival-taunt{margin-top:7px;padding:7px 11px;font-size:10px;}
body.wide #scr-arena .gauntlet{margin-top:9px;padding:9px 11px 10px;}
body.wide #scr-arena .gt-dot{width:26px;height:26px;font-size:11px;}
body.wide #scr-arena .gt-link{margin-top:12px;}
body.wide #scr-arena .gt-rail{margin-top:8px;}

/* Shortest landscape phones (iPhone SE ≈ 375pt): shave the face-off further so the
   Gauntlet — the reason to come back — still clears the fold without a scroll. */
@media(max-height:400px){
  body.wide #scr-arena .vs-art{height:64px;}
  body.wide #scr-arena .vs-nm{font-size:9.5px;margin-top:3px;}
  body.wide #scr-arena .rival-taunt{margin-top:6px;padding:6px 10px;font-size:9.5px;}
  body.wide #scr-arena .gauntlet{margin-top:7px;padding:8px 10px 9px;}
  body.wide #scr-arena .gt-dot{width:24px;height:24px;font-size:10px;}
  body.wide #scr-arena .gt-link{margin-top:11px;}
  body.wide #scr-arena .summon{padding:11px 13px;}
  body.wide #scr-arena .sm-ttl{font-size:15px;}
}

/* landscape: fill height, lane scrolls internally only if it ever overflows */
body.wide #scr-arena .a-inner{height:100%;}
body.wide #scr-arena .a-lanes{flex:1;min-height:0;}
body.wide #scr-arena .a-lane.on{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
body.wide #scr-arena .a-lane.on::-webkit-scrollbar{display:none;}

/* ---- Arena v2: duel hero, gauntlet, tappable ladder ---- */
.vs-face.compact .vs-art{height:88px;}
.vs-art.foe{border-color:rgba(255,93,126,.45);background:radial-gradient(circle at 50% 30%,rgba(255,93,126,.1),rgba(10,4,10,.85));color:#ff8ba3;font-size:26px;font-weight:900;}
.vs-art.foe.empty{border-style:dashed;color:var(--dim);font-size:30px;flex-direction:column;}
.vs-art.foe.empty small{font-size:6.5px;letter-spacing:1.5px;margin-top:4px;color:var(--dim);}
/* duel hero — the invite/growth loop */
.duel-hero{text-align:center;}
.dh-title{font-size:15px;font-weight:900;letter-spacing:2px;margin-top:12px;color:var(--ink);}
.dh-sub{font-size:10px;line-height:1.7;letter-spacing:.5px;color:#bcd7f2;margin:8px auto 12px;max-width:440px;}
.dh-sub b{color:var(--gd);}
.dh-rewards{font-size:9px;font-weight:800;letter-spacing:1.5px;margin-top:12px;}
.dh-pending{margin-top:12px;font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--gd);line-height:1.6;}
/* shadow gauntlet — the System's generated duel tasks */
.dt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
.dtask-list{margin-top:6px;display:flex;flex-direction:column;gap:6px;}
.dtask{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(10,16,26,.55);border:1px solid var(--line);border-radius:10px;padding:8px 11px;cursor:pointer;transition:.15s;}
.dtask:active{transform:scale(.99);}
.dtask.done{opacity:.6;}
.dt-box{width:20px;height:20px;flex-shrink:0;border:2px solid var(--ac);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#02060e;}
.dt-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.dt-body b{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--ink);}
.dtask.done .dt-body b{text-decoration:line-through;}
.dt-body i{font-size:8.5px;letter-spacing:1px;color:var(--dim);font-style:normal;margin-top:2px;}
.dt-stat{font-size:8px;font-weight:800;letter-spacing:1.5px;flex-shrink:0;}
/* tappable ladder rows → hunter profile */
.lb-row.tap{cursor:pointer;}
.lb-row.tap:active{transform:scale(.99);}
.lb-xp{margin-left:auto;font-weight:800;}
.lb-chev{color:var(--dim);font-weight:900;font-size:14px;margin-left:8px;flex-shrink:0;}
.lb-row.me .lb-chev{color:var(--gd);}

/* ===== PREMIUM TIMER CHIP (replaces ⏱ emoji) ===== */
.dt-timerchip{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin:0;
  border:1px solid rgba(63,169,255,.3);border-radius:8px;padding:3px 8px 3px 7px;
  background:linear-gradient(180deg,rgba(12,28,50,.7),rgba(6,16,30,.6));
  box-shadow:inset 0 0 10px rgba(63,169,255,.07),0 1px 3px rgba(0,0,0,.3);}
.dt-timerchip .tc-ic{width:12px;height:12px;color:var(--ac);opacity:.85;flex-shrink:0;
  filter:drop-shadow(0 0 3px rgba(63,169,255,.5));}
.dt-timerchip b{font-family:'Courier New',ui-monospace,monospace;font-size:11px;font-weight:800;
  letter-spacing:1.5px;color:var(--ac);font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(63,169,255,.3);}

/* ===== PARTY RAID HUD (co-op, 3–5) — the gate card IS the in-raid view ===== */
.raid-ring{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:4px 0 2px;}
.raid-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:58px;padding:8px 6px 7px;border-radius:11px;
  background:rgba(10,22,44,.62);border:1px solid rgba(63,169,255,.16);}
.raid-node.me{border-color:rgba(255,206,77,.45);box-shadow:inset 0 0 12px rgba(255,206,77,.09);}
.raid-node .rn-orb{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#7f9bc0;background:radial-gradient(circle at 40% 35%,rgba(63,169,255,.18),rgba(6,16,30,.9));
  border:1.5px solid rgba(63,169,255,.28);}
.raid-node.struck .rn-orb{color:#0a1420;background:radial-gradient(circle at 40% 35%,#4dffa0,#1f8f5a);
  border-color:#37e08b;box-shadow:0 0 12px rgba(55,224,139,.55);}
.raid-node.cover .rn-orb{color:var(--gd);border-color:var(--gd);box-shadow:0 0 12px rgba(255,206,77,.45);}
.raid-node.ghost{opacity:.55;}
.raid-node.ghost .rn-orb{color:#54627a;border-color:rgba(84,98,122,.5);border-style:dashed;background:rgba(6,16,30,.7);}
.raid-node.me .rn-orb{color:var(--gd);}
.raid-node .rn-name{font-size:7.5px;font-weight:800;letter-spacing:.6px;color:#cfe0f5;max-width:56px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;}
.raid-node .rn-ct{font-size:8px;font-weight:800;letter-spacing:.5px;color:var(--ac);}
.raid-node.ghost .rn-ct{color:#54627a;}
.rn-summon{margin-top:2px;font-size:7.5px;font-weight:900;letter-spacing:.5px;color:var(--gd);
  background:rgba(255,206,77,.1);border:1px solid rgba(255,206,77,.4);border-radius:7px;padding:2px 6px;cursor:pointer;}
.rn-summon:active{transform:scale(.94);}
.raid-sync{display:flex;justify-content:space-between;align-items:center;margin:11px 0 2px;
  font-size:8.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim);}
.raid-sync span:first-child{color:var(--ac);}
.raid-sync span:last-child{color:var(--gd);}
.raid-focus{margin-top:9px;font-size:9px;line-height:1.6;letter-spacing:1px;color:#bcd7f2;text-align:center;
  padding:8px 10px;border-radius:9px;background:rgba(10,22,44,.5);border:1px solid rgba(63,169,255,.14);}
.raid-focus.done{color:var(--gn);border-color:rgba(55,224,139,.3);background:rgba(12,40,28,.4);}

/* ---- UNLOCK REVEAL — silhouette flares to full colour ---- */
#sldreveal{background:radial-gradient(circle at 50% 42%, rgba(30,16,54,.97), rgba(4,4,10,.99));}
.sr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;max-width:440px;padding:20px;text-align:center;}
.sr-kicker{font-size:10px;letter-spacing:5px;color:var(--gd);opacity:0;animation:srKick .5s ease .1s forwards;}
.sr-art{position:relative;width:66%;max-width:300px;height:calc(var(--evh,1vh)*46);display:flex;align-items:center;justify-content:center;}
.sr-art img{max-width:100%;max-height:100%;object-fit:contain;animation:srReveal 1.55s cubic-bezier(.2,.8,.2,1) forwards;}
.sr-flash{position:absolute;inset:-10% -10%;background:radial-gradient(circle at 50% 46%, #fff, rgba(168,107,255,.4) 45%, transparent 66%);opacity:0;pointer-events:none;animation:srFlash 1.55s ease forwards;}
.sr-cap{opacity:0;transform:translateY(10px);animation:srCap .6s ease 1.2s forwards;}
.sr-grade{display:inline-block;font-size:10px;letter-spacing:2px;border:1px solid;border-radius:4px;padding:2px 10px;margin-bottom:9px;}
.sr-name{font-size:25px;font-weight:800;letter-spacing:2px;line-height:1.05;}
.sr-src{font-size:10px;color:var(--dim);letter-spacing:1px;margin-top:5px;}
.sr-tag{font-size:9px;color:#bcd7f2;letter-spacing:1px;margin-top:11px;}
.sr-cta{margin-top:14px;}
/* CLAIM + Share sit together: the extraction cinema is the app's proudest moment and its best
   free advertising — a soldier is a receipt for real work, so make showing it one tap. */
.sr-acts{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.sr-acts .sr-cta{margin-top:0;}
/* `.cta.share` was already used by the rift card but never defined — it rendered as a plain CTA. */
.cta.share{background:rgba(8,20,38,.9);border-color:rgba(63,169,255,.55);color:var(--ac);}
@keyframes srKick{to{opacity:.9;}}
@keyframes srReveal{0%{filter:brightness(0) grayscale(1);transform:scale(.82);opacity:.35;}44%{filter:brightness(0) grayscale(1);transform:scale(.87);opacity:.6;}58%{filter:brightness(3.6) grayscale(.15);transform:scale(1.05);opacity:1;}100%{filter:brightness(1) grayscale(0);transform:scale(1);opacity:1;}}
@keyframes srFlash{0%,44%{opacity:0;}58%{opacity:.9;}100%{opacity:0;}}
@keyframes srCap{to{opacity:1;transform:none;}}

/* ---- HUD theme switcher chips ---- */
.hud-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,26,.55);font-size:10px;letter-spacing:1px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;}
.hud-chip.on{background:rgba(22,28,48,.85);}
.hud-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* ---- cosmetics applied to the vessel avatar (Monarch Aura · Blade Frame) ---- */
.grad-hero.cos-aura img{animation:cosAura 3.2s ease-in-out infinite;}
@keyframes cosAura{0%,100%{filter:drop-shadow(0 0 14px rgba(255,206,77,.55));}50%{filter:drop-shadow(0 0 32px rgba(255,206,77,.95));}}
.grad-hero.cos-blade img{border:2px solid rgba(63,169,255,.55);border-radius:12px;box-shadow:0 0 16px rgba(63,169,255,.4);}

/* ---- pass reward preview (tap a tile) ---- */
.rp-visual{display:flex;align-items:center;justify-content:center;gap:14px;min-height:130px;}
.rp-dot{width:36px;height:36px;border-radius:50%;display:inline-block;}
.rp-em{font-size:66px;line-height:1;}
.rp-img{max-height:150px;max-width:100%;object-fit:contain;}
.bs-swatch{width:14px;height:14px;border-radius:50%;margin:0 auto 5px;}
/* ---------- THE SHOP FRONT — Featured tab: daily cache, hero slot, offer cards ---------- */
.cachecard{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1.5px solid rgba(87,232,155,.45);background:linear-gradient(135deg,rgba(8,32,22,.9),rgba(6,16,32,.9));transition:transform .12s;}
.cachecard:active{transform:scale(.98);}
.cachecard.ready{animation:bsReady 1.6s ease-in-out infinite;}
.cachecard.claimed{opacity:.6;border-color:rgba(87,232,155,.25);}
.cache-ico{width:40px;height:40px;border-radius:10px;border:1.5px dashed rgba(87,232,155,.6);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#7dffb8;text-shadow:0 0 12px rgba(87,232,155,.7);flex-shrink:0;}
.cachecard.claimed .cache-ico{border-style:solid;background:rgba(87,232,155,.12);}
.cache-t{font-size:11px;font-weight:900;letter-spacing:2.5px;color:#7dffb8;}
.cache-s{font-size:8px;letter-spacing:1.2px;color:var(--dim);margin-top:3px;}
.cache-cta{font-size:9px;font-weight:900;letter-spacing:2px;color:#04140a;background:#57e89b;border-radius:8px;padding:7px 12px;
  box-shadow:0 0 14px rgba(87,232,155,.5);flex-shrink:0;}
.cachecard.claimed .cache-cta{background:none;color:var(--dim);box-shadow:none;border:1px solid rgba(120,170,220,.3);}
.feat-hero{display:flex;gap:14px;align-items:center;margin-top:10px;padding:13px 14px;border-radius:12px;cursor:pointer;
  border:1.5px solid rgba(255,206,77,.5);background:linear-gradient(135deg,rgba(40,30,6,.88),rgba(10,14,26,.92));
  box-shadow:0 0 24px rgba(255,206,77,.15),inset 0 1px 0 rgba(255,255,255,.06);}
.fh-tag{font-size:7.5px;letter-spacing:2px;color:var(--gd);font-weight:800;}
.fh-name{font-size:14px;font-weight:900;letter-spacing:2px;color:#fff;margin-top:4px;text-shadow:0 0 14px rgba(255,206,77,.5);}
.fh-line{font-size:8px;letter-spacing:1.2px;color:#e8d9b0;margin-top:4px;line-height:1.7;}
.fh-price{display:inline-block;margin-top:8px;font-size:11px;font-weight:900;letter-spacing:1.5px;color:var(--vi);
  border:1px solid rgba(168,107,255,.5);border-radius:8px;padding:4px 10px;background:rgba(30,16,50,.5);}
.featrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
.shopcard{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;cursor:pointer;text-align:center;
  border:1.5px solid rgba(63,169,255,.35);background:rgba(8,20,38,.85);transition:transform .12s;}
.shopcard:active{transform:scale(.96);}
.shopcard .art{width:100%;}
.shopcard.hot{border-color:var(--gd);animation:bsReady 1.6s ease-in-out infinite;}
.sc-name{font-size:9px;font-weight:900;letter-spacing:1.5px;color:var(--ink);}
.sc-tag{font-size:7px;letter-spacing:1.2px;color:var(--dim);line-height:1.6;}
.sc-price{font-size:10px;font-weight:900;letter-spacing:1.5px;color:var(--ac);margin-top:auto;}
.sc-price.gold{color:var(--gd);}
/* bigger pass tiles — each reward reads as an item; claimed wears the green stamp */
.bs-col{width:112px;}
.bs-col.slim{width:34px;}
.bs-tile{width:104px;height:92px;}
.bs-art{width:40px;height:40px;}
.bs-tile.claimed::after{content:"✓";position:absolute;top:4px;right:7px;font-size:14px;font-weight:900;color:#57e89b;
  text-shadow:0 0 10px rgba(87,232,155,.8);}
/* quest protocol — numbered steps so no timer quest is ever a bare countdown */
.q-guide{margin-top:10px;text-align:left;border:1px solid rgba(63,169,255,.25);border-radius:10px;padding:10px 12px;background:rgba(8,20,38,.5);}
.q-guide-t{font-size:8px;letter-spacing:2.5px;color:var(--ac);font-weight:800;margin-bottom:2px;}
.q-step{display:flex;gap:9px;align-items:baseline;margin-top:6px;}
.q-step b{font-size:8px;color:var(--ac);border:1px solid rgba(63,169,255,.4);border-radius:5px;padding:1px 5px;flex-shrink:0;}
.q-step span{font-size:8.5px;letter-spacing:1.2px;line-height:1.6;color:#bcd7f2;}

/* ---------- THE WATCHER — guardian-less gates (Vault Breach / Ascension / Twin) ----------
   These gates have no boss, so the frame becomes an eye instead of an empty "art pending" box.
   All motion is slow and shallow: it should feel observed, not animated. */
.art.watcher{border:1px solid rgba(255,255,255,.10);background:
  radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.05), rgba(2,6,14,.55) 70%);
  gap:8px;overflow:hidden;}
.art.watcher::before{content:none;}                  /* kill the ⬚ placeholder glyph */
.wch{width:auto;height:74%;max-height:104px;display:block;overflow:visible;}
.wch circle,.wch path{fill:none;stroke:var(--wc);vector-effect:non-scaling-stroke;}
.wch-scan{stroke-width:1;opacity:.30;stroke-dasharray:5 12;transform-origin:60px 60px;
  animation:wchScan 14s linear infinite;}
.wch-halo{stroke-width:.75;opacity:.18;transform-origin:60px 60px;animation:wchHalo 4.5s ease-in-out infinite;}
.wch-lid{stroke-width:1.5;opacity:.85;filter:drop-shadow(0 0 7px var(--wc));}
.wch-iris{stroke-width:1.25;opacity:.65;transform-origin:60px 60px;animation:wchHalo 4.5s ease-in-out infinite .4s;}
.wch-pupil{fill:var(--wc);stroke:none;opacity:.95;transform-origin:60px 60px;
  filter:drop-shadow(0 0 9px var(--wc));animation:wchPupil 6s ease-in-out infinite;}
.wch-lbl{color:var(--wc)!important;opacity:.7;letter-spacing:2.5px;font-size:6.5px;}
@keyframes wchScan{to{transform:rotate(360deg)}}
@keyframes wchHalo{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.06);opacity:.34}}
/* the pupil narrows — the tell that something is actually looking at you */
@keyframes wchPupil{0%,100%{transform:scale(1);opacity:.95}44%{transform:scale(.62);opacity:1}62%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .wch-scan,.wch-halo,.wch-iris,.wch-pupil{animation:none;}
}

/* ---------- THE SPOILS — a gate's reward shown as objects, not a sentence ---------- */
.grw{margin-top:7px;}
.grw-head{font-size:6.5px;letter-spacing:2.5px;color:var(--dim);margin-bottom:4px;}
.grw-row{display:flex;gap:6px;align-items:stretch;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.grw-row::-webkit-scrollbar{display:none;}
.grw-row.claimed{filter:grayscale(.85) brightness(.7);}          /* already taken */
.grw-c{flex:0 0 auto;min-width:52px;max-width:82px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:1px;padding:5px 6px;border-radius:9px;text-align:center;
  border:1px solid rgba(63,169,255,.22);background:linear-gradient(160deg,rgba(12,26,48,.85),rgba(4,10,22,.85));}
.grw-c b{font-size:7px;letter-spacing:.6px;line-height:1.25;color:#dbe9fb;font-weight:800;}
.grw-c small{font-size:5.5px;letter-spacing:1.6px;color:var(--dim);}
.grw-c img{width:100%;height:38px;object-fit:contain;margin-bottom:2px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));}
.grw-ic{font-size:17px;line-height:1;margin-bottom:3px;display:block;}
.grw-ic svg{width:19px;height:19px;display:block;margin:0 auto;}
/* the soldier IS the trophy — gold frame, it should out-shout the currency chips */
.grw-sold{border-color:rgba(255,206,77,.5);box-shadow:0 0 14px rgba(255,206,77,.12) inset;min-width:64px;}
.grw-sold b{color:var(--gd);}
.grw-item .grw-ic{color:var(--ac);}
.grw-title{border-color:rgba(255,206,77,.42);} .grw-title .grw-ic,.grw-title b{color:var(--gd);}
.grw-cos{border-color:rgba(168,107,255,.42);} .grw-cos .grw-ic,.grw-cos b{color:var(--vi);}
.grw-xp b{color:var(--ac);} .grw-coin b{color:var(--gd);}

/* ---------- RARITY ON THE SPOILS — the grade drives the chip, not a fixed colour ----------
   --gc is set inline per chip from GRADES, so a B-grade drop and an S4 drop cannot look alike. */
.grw-c{position:relative;}
.grw-grade{position:absolute;top:3px;right:3px;z-index:2;
  min-width:13px;padding:1px 3px;border-radius:4px;
  font-size:5.5px;font-weight:900;letter-spacing:.5px;line-height:1.5;text-align:center;
  color:#040a14;background:var(--gc,#6b87a6);
  box-shadow:0 0 8px -1px var(--gc,#6b87a6);}
/* grade-tinted frame + inner glow — overrides the old fixed gold/cyan borders */
.grw-sold[style*="--gc"],.grw-item[style*="--gc"]{
  border-color:var(--gc);
  box-shadow:0 0 15px -6px var(--gc), 0 0 22px -10px var(--gc) inset;}
.grw-sold[style*="--gc"] b{color:var(--gc);}
.grw-item[style*="--gc"] .grw-ic{color:var(--gc);}

/* real item art sits inside the same boxes the SVG icons used */
.it-art{width:100%;height:100%;object-fit:contain;display:block;}
.grw-ic .it-art{width:22px;height:22px;margin:0 auto;}

/* ================= GATE ENTRY CINEMA — the moment you step through =================
   Was: black void, a cropped 150px square portrait, and the objective sentence rendered
   inside .tiny (a space-between flex row) which tore "THE GUARDIAN / AURELIA / BARS YOUR
   PATH" into three columns. Rebuilt as a proper title sequence. */
#cinema-ov{padding:0;overflow:hidden;}
#cinema-bg{position:absolute;inset:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;z-index:0;}
#cinema-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 38%, rgba(2,6,14,.30), rgba(2,6,14,.88) 62%, #02060e 100%);}
.cin-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;width:100%;padding:14px 18px;text-align:center;gap:0;}
.cin-warn{font-size:8.5px;letter-spacing:5px;margin:0;}
.cin-gname{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:4px;color:var(--dim);
  text-transform:uppercase;}

/* portal + guardian share one stage: she stands IN the gate, not in a box below it */
.cin-stage{position:relative;display:flex;align-items:center;justify-content:center;
  margin-top:6px;width:min(300px,74vw);}
.cin-portal{width:min(190px,46vw);height:min(238px,58vw);margin:0;}
.cin-portal .grank{font-size:clamp(30px,9vw,46px);}
.cin-guard{position:absolute;bottom:-6%;left:50%;transform:translateX(-50%);
  width:min(150px,38vw);height:min(196px,50vw);pointer-events:none;}
.cin-guard img{width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.85));
  /* no hard frame — she dissolves into the gate light instead of sitting in a cropped square */
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  animation:cinRise .7s cubic-bezier(.2,.9,.25,1) both;}
@keyframes cinRise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.cin-boss{margin-top:10px;font-size:clamp(15px,4.6vw,20px);font-weight:900;letter-spacing:3px;
  color:#fff;text-shadow:0 0 16px rgba(255,93,126,.8),0 0 44px rgba(255,93,126,.35);line-height:1.2;}
.cin-role{margin-top:3px;font-size:7.5px;letter-spacing:4px;color:var(--rd);opacity:.9;}
.cin-obj{margin-top:11px;max-width:440px;font-size:9px;letter-spacing:1.4px;line-height:1.95;
  color:#bcd7f2;}
/* strike pips — read the fight at a glance */
.cin-pips{display:flex;gap:7px;justify-content:center;margin-top:11px;}
.cin-pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(168,107,255,.55);
  background:rgba(168,107,255,.10);}
.cin-pips i.hit{background:var(--vi);border-color:var(--vi);box-shadow:0 0 11px var(--vi);}
.cin-timer{margin-top:9px;font-size:8.5px;letter-spacing:2px;color:var(--rd);font-weight:800;}
.cin-cta{margin-top:16px;min-width:min(300px,74vw);}
@media (max-height:430px){                    /* landscape phones — keep it on one screen */
  .cin-stage{margin-top:2px;} .cin-portal{width:min(150px,34vw);height:min(188px,42vw);}
  .cin-guard{width:min(118px,28vw);height:min(152px,36vw);}
  .cin-obj{margin-top:7px;} .cin-cta{margin-top:10px;} .cin-gname{margin-top:2px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short /* landscape phones — keep it on one screen */
  .cin-stage{margin-top:2px;}
body.short .cin-portal{width:min(150px,34vw);height:min(188px,42vw);}
body.short .cin-guard{width:min(118px,28vw);height:min(152px,36vw);}
body.short .cin-obj{margin-top:7px;}
body.short .cin-cta{margin-top:10px;}
body.short .cin-gname{margin-top:2px;}


/* --- cinema fixes: the rank was landing on the guardian's face, and the role line collided
       with the boss name. Rank becomes a badge above the portal; she owns the gate mouth. --- */
.cin-portal .grank{top:-7%;left:50%;transform:translate(-50%,0);
  font-size:clamp(15px,3.6vw,20px);letter-spacing:2px;line-height:1;
  padding:3px 11px;border-radius:999px;
  color:#e7d4ff;background:rgba(10,4,26,.82);border:1.5px solid var(--vi);
  text-shadow:0 0 12px var(--vi);box-shadow:0 0 18px -4px var(--vi);animation:none;}
/* she fills the gate mouth instead of hiding inside it */
.cin-guard{width:min(206px,52vw);height:min(238px, calc(var(--evw,1vw)*60));bottom:-14%;z-index:3;}
.cin-guard img{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
               mask-image:linear-gradient(180deg,#000 78%,transparent 100%);}
.cin-stage{margin-top:10px;margin-bottom:16px;}
.cin-boss{margin-top:4px;}
.cin-role{margin-top:6px;letter-spacing:5px;}
.cin-obj{margin-top:9px;}
@media (max-height:430px){
  .cin-guard{width:min(160px,38vw);height:min(186px,44vw);bottom:-12%;}
  .cin-stage{margin-top:8px;margin-bottom:12px;}
  .cin-role{margin-top:4px;} .cin-obj{margin-top:6px;} .cin-pips{margin-top:7px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .cin-guard{width:min(160px,38vw);height:min(186px,44vw);bottom:-12%;}
body.short .cin-stage{margin-top:8px;margin-bottom:12px;}
body.short .cin-role{margin-top:4px;}
body.short .cin-obj{margin-top:6px;}
body.short .cin-pips{margin-top:7px;}


/* ============ INSIDE THE GATE — the face-off ============
   Was: title clipped off the top edge, portraits in hard black boxes with barely-legible
   role labels, and the whole column overflowing on landscape phones. Rebuilt to fit and breathe. */
.ingate-inner{padding:12px 18px;justify-content:center;height:100%;overflow-y:auto;
  scrollbar-width:none;}
.ingate-inner::-webkit-scrollbar{display:none;}
#ingate-warn{font-size:8px;letter-spacing:4.5px;}
.ingate-title{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:5px;}
.ingate-title .h-big{font-size:clamp(15px,3.6vw,21px);letter-spacing:2.5px;line-height:1.15;}
.ingate-rank{flex:0 0 auto;min-width:24px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:1px;color:#e7d4ff;
  background:rgba(10,4,26,.8);border:1.5px solid var(--vi);box-shadow:0 0 14px -3px var(--vi);}

/* portraits: no hard box — each fighter stands in their own light */
.ingate-vs{margin-top:10px;}
.vs-portrait{border:none!important;background:none!important;border-radius:0!important;
  position:relative;display:flex;align-items:flex-end;justify-content:center;}
.vs-portrait::before{content:"";position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:86%;height:58%;border-radius:50%;filter:blur(15px);z-index:0;}
.vs-portrait.hero::before{background:radial-gradient(ellipse,rgba(63,169,255,.5),transparent 70%);}
.vs-portrait.foe::before{background:radial-gradient(ellipse,rgba(255,93,126,.5),transparent 70%);}
.vs-portrait img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  object-position:bottom;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 82%,transparent 100%);}
.vs-portrait.hero img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(63,169,255,.35));}
.vs-portrait.foe img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(255,93,126,.35));}
.vs-name{margin-top:5px;font-size:clamp(10px,2.4vw,13px);font-weight:900;letter-spacing:2px;
  text-shadow:0 0 14px currentColor;}
.vs-role{font-size:6.5px;letter-spacing:3px;color:#8fa9c4;opacity:.95;margin-top:2px;}  /* was near-invisible */
.vs-clash .vs-word{font-size:clamp(13px,3.2vw,17px);font-weight:900;letter-spacing:2px;}

.ingate-obj{margin-top:12px;font-size:9.5px;line-height:1.95;padding:11px 15px;}
.ingate-prog{margin-top:11px;}
@media (max-height:430px){                        /* landscape phones: keep it on one screen */
  .ingate-inner{padding:8px 16px;}
  #ingate-warn{font-size:7px;letter-spacing:3.5px;}
  .ingate-vs{margin-top:5px;}
  .ingate-obj{margin-top:8px;font-size:8.5px;line-height:1.75;padding:8px 13px;}
  .ingate-prog{margin-top:7px;}
  .ingate-inner > div:last-child{margin-top:9px!important;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short /* landscape phones: keep it on one screen */
  .ingate-inner{padding:8px 16px;}
body.short #ingate-warn{font-size:7px;letter-spacing:3.5px;}
body.short .ingate-vs{margin-top:5px;}
body.short .ingate-obj{margin-top:8px;font-size:8.5px;line-height:1.75;padding:8px 13px;}
body.short .ingate-prog{margin-top:7px;}
body.short .ingate-inner > div:last-child{margin-top:9px!important;}


/* landscape phones are only ~390px tall — the face-off has to earn every pixel */
@media (max-height:430px){
  .ingate-inner{padding:6px 16px;gap:0;}
  .ingate-title{margin-top:3px;}
  .ingate-vs{margin-top:4px;gap:10px;}
  .vs-portrait{width:82px;height:96px;}
  .vs-name{margin-top:3px;font-size:9.5px;letter-spacing:1.4px;}
  .vs-role{font-size:5.5px;letter-spacing:2px;margin-top:1px;}
  .vs-clash .vs-x{font-size:15px;}
  .ingate-obj{margin-top:7px;font-size:8px;line-height:1.7;padding:7px 12px;max-width:400px;}
  .ingate-prog{margin-top:6px;}
  .ingate-inner > div:last-child{margin-top:8px!important;}
  .ingate-inner .cta{padding:9px 26px;font-size:10px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .ingate-inner{padding:6px 16px;gap:0;}
body.short .ingate-title{margin-top:3px;}
body.short .ingate-vs{margin-top:4px;gap:10px;}
body.short .vs-portrait{width:82px;height:96px;}
body.short .vs-name{margin-top:3px;font-size:9.5px;letter-spacing:1.4px;}
body.short .vs-role{font-size:5.5px;letter-spacing:2px;margin-top:1px;}
body.short .vs-clash .vs-x{font-size:15px;}
body.short .ingate-obj{margin-top:7px;font-size:8px;line-height:1.7;padding:7px 12px;max-width:400px;}
body.short .ingate-prog{margin-top:6px;}
body.short .ingate-inner > div:last-child{margin-top:8px!important;}
body.short .ingate-inner .cta{padding:9px 26px;font-size:10px;}


/* The Trial's world is a bright golden dusk, which was washing out the fighters' names.
   A soft dark column behind the content keeps text legible on ANY gate art, however bright. */
.ingate-scrim{background:
  linear-gradient(180deg,rgba(2,6,14,.72),rgba(2,6,14,.30) 30%,rgba(2,6,14,.30) 62%,rgba(2,6,14,.86)),
  radial-gradient(ellipse 46% 108% at 50% 50%,rgba(2,6,14,.66),transparent 74%),
  radial-gradient(ellipse at 50% 40%,rgba(2,6,14,.30),rgba(2,6,14,.88) 100%);}
.vs-name{text-shadow:0 0 14px currentColor,0 2px 10px rgba(0,0,0,.95);}
.vs-role{color:#c3d6ea;opacity:1;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.ingate-title .h-big{text-shadow:0 2px 14px rgba(0,0,0,.9);}

/* ================= THE PASS STOREFRONT =================
   Was five ▸ bullets of small caps — a spec sheet, not a shop. Now: the prize you're buying is
   the hero, the price carries its own anchor, and the CTA states affordability instead of
   refusing you after the tap. */
.ps{display:flex;flex-direction:column;gap:11px;}
.ps-urg{padding:7px 12px;border-radius:9px;text-align:center;font-size:8.5px;font-weight:800;
  letter-spacing:2.5px;color:#ffd9e2;background:linear-gradient(90deg,rgba(255,45,94,.22),rgba(255,45,94,.10));
  border:1px solid rgba(255,93,126,.55);animation:psPulse 2.1s ease-in-out infinite;}
@keyframes psPulse{0%,100%{box-shadow:0 0 0 rgba(255,93,126,0)}50%{box-shadow:0 0 20px -4px rgba(255,93,126,.6)}}

.ps-hero{display:flex;gap:13px;align-items:stretch;padding:12px;border-radius:14px;
  border:1px solid rgba(255,206,77,.42);
  background:linear-gradient(135deg,rgba(38,29,6,.72),rgba(6,12,24,.86));}
.ps-art{position:relative;flex:0 0 96px;height:132px;display:flex;align-items:flex-end;justify-content:center;}
.ps-art::before{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:92%;height:62%;border-radius:50%;filter:blur(15px);
  background:radial-gradient(ellipse,rgba(255,206,77,.55),transparent 70%);}
.ps-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.8));}
.ps-tag{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2;
  font-size:5.5px;letter-spacing:1.6px;color:#0a0600;background:var(--gd);
  padding:2px 7px;border-radius:999px;font-weight:900;}
.ps-buy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.ps-name{font-size:9px;letter-spacing:3px;color:var(--dim);font-weight:800;}
.ps-price{display:flex;align-items:baseline;gap:9px;}
.ps-price s{font-size:11px;color:#7d8ea3;}
.ps-price b{font-size:clamp(23px,6.5vw,31px);color:var(--gd);font-weight:900;letter-spacing:1px;
  text-shadow:0 0 22px rgba(255,206,77,.65);}
.ps-hold{font-size:7.5px;letter-spacing:1.8px;}
.ps-hold.ok{color:var(--gn);} .ps-hold.short{color:var(--rd);}
.ps-cta{margin-top:7px;width:100%;}
.ps-fine{margin-top:5px;font-size:6.5px;letter-spacing:1.2px;color:var(--dim);line-height:1.6;}

/* perks as objects, two-up — scannable instead of a paragraph */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ps-perk{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:11px;
  border:1px solid rgba(63,169,255,.20);background:rgba(6,14,28,.66);}
.ps-perk .ps-i{font-size:15px;line-height:1;}
.ps-perk b{font-size:8.5px;letter-spacing:1.4px;color:#dbe9fb;}
.ps-perk small{font-size:6.5px;letter-spacing:1.1px;color:var(--dim);line-height:1.55;}

.ps-doc{text-align:center;font-size:6.5px;letter-spacing:2px;line-height:1.9;color:var(--dim);}
/* narrow = EFFECTIVE width ≤430 (JS-set) — the raw media query matched the PHYSICAL portrait
   width even when the app rendered rotated at 844px wide, collapsing the paywall grid to one
   thin column across a wide frame. body.narrow is the rotation-aware truth. */
body.narrow .ps-grid{grid-template-columns:1fr;}
/* 360px-wide phones: the portrait topbar was ~16px over budget and clipped the MENU button */
body.narrow:not(.wide) .hdossier{width:86px;max-width:86px;}
body.narrow:not(.wide) .topbar .curr{min-width:36px;max-width:36px;font-size:8px;}
body.narrow:not(.wide) .topbar .edgebtn,body.narrow:not(.wide) .topbar .dbadge{width:38px;min-width:38px;height:38px;}

/* the shortfall screen — a door, not a refusal */
.short-wrap{text-align:center;}
.short-need{margin:4px 0 10px;}
.short-need b{display:block;font-size:34px;font-weight:900;color:var(--gd);
  text-shadow:0 0 26px rgba(255,206,77,.6);line-height:1;}
.short-need small{display:block;margin-top:4px;font-size:7px;letter-spacing:3px;color:var(--dim);}
.short-line{font-size:10px;letter-spacing:1.4px;line-height:1.9;color:#dbe9fb;}
.short-sub{margin-top:9px;font-size:7.5px;letter-spacing:1.2px;line-height:1.85;color:var(--dim);}
/* the tag has a 96px column to live in — keep it inside it */
.ps-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:6px;padding:2px 8px;}
/* the second door — present but quieter than the cash CTA, and it lights up when affordable */
.ps-alt{margin-top:7px;width:100%;padding:8px 10px;border-radius:9px;cursor:pointer;
  font-size:7.5px;font-weight:800;letter-spacing:1.6px;text-align:center;
  color:var(--dim);background:transparent;border:1px dashed rgba(99,120,148,.5);}
.ps-alt.can{color:var(--gd);border-color:rgba(255,206,77,.6);border-style:solid;
  background:rgba(255,206,77,.07);box-shadow:0 0 14px -6px var(--gd);}
.ps-alt:active{transform:scale(.99);}

/* ================= THE SEAL — the moment the program becomes law =================
   Was a 🔒 emoji (a stock glyph in a game of custom SVG) above a paragraph of body text.
   Now the TERM is the hero, LAW is a statement, and the exits are a readable ledger. */
.seal-stage{position:relative;display:flex;align-items:center;justify-content:center;
  height:clamp(112px, calc(var(--evh,1vh)*26),150px);margin-top:2px;}
.seal-mark{position:absolute;height:100%;width:auto;overflow:visible;}
.seal-mark [class^="sm-"]{fill:none;stroke:var(--gd);vector-effect:non-scaling-stroke;}
.sm-orbit{stroke-width:1;opacity:.30;stroke-dasharray:4 11;transform-origin:60px 60px;
  animation:sealOrbit 22s linear infinite;}
.sm-hex{stroke-width:1.2;opacity:.42;}
.sm-shackle{stroke-width:2.4;stroke-linecap:round;}
.sm-body{stroke-width:2.2;fill:rgba(255,206,77,.07);}
.sm-key{stroke-width:2;stroke-linecap:round;}
@keyframes sealOrbit{to{transform:rotate(360deg)}}
.seal-term{position:relative;z-index:1;text-align:center;line-height:1;}
.seal-term b{display:block;font-size:clamp(34px,10vw,50px);font-weight:900;color:var(--gd);
  text-shadow:0 0 30px rgba(255,206,77,.75),0 0 70px rgba(255,206,77,.3);}
.seal-term small{display:block;margin-top:3px;font-size:8px;letter-spacing:6px;color:#e8d9b0;}
.seal-law{margin-top:9px;text-align:center;font-size:clamp(11px,3vw,14px);font-weight:900;
  letter-spacing:3px;color:#e8d9b0;}
.seal-law b{color:var(--rd);text-shadow:0 0 16px rgba(255,93,126,.75);}
.seal-sub{margin-top:6px;text-align:center;font-size:7.5px;letter-spacing:1.6px;line-height:1.9;color:var(--dim);}
.seal-doors{margin-top:11px;border:1px solid rgba(255,206,77,.26);border-radius:12px;
  background:linear-gradient(160deg,rgba(30,23,5,.55),rgba(4,10,22,.75));padding:9px 11px;}
.sd-head{font-size:6.5px;letter-spacing:3px;color:var(--dim);margin-bottom:6px;}
.sd-row{display:grid;grid-template-columns:16px 1fr auto;grid-template-rows:auto auto;
  column-gap:8px;align-items:center;padding:6px 0;border-top:1px solid rgba(99,120,148,.14);}
.sd-row:first-of-type{border-top:none;}
.sd-i{grid-row:1/3;font-size:14px;line-height:1;text-align:center;}
.sd-row b{font-size:8.5px;letter-spacing:1.6px;color:#dbe9fb;}
.sd-row small{grid-column:2;font-size:6.5px;letter-spacing:1.1px;color:var(--dim);line-height:1.5;}
.sd-c{grid-row:1/3;grid-column:3;font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:1.2px;
  color:var(--gd);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,206,77,.35);white-space:nowrap;}
.sd-c.free{color:var(--gn);border-color:rgba(55,224,139,.45);}
.seal-note{margin-top:10px;text-align:center;font-size:7px;letter-spacing:2px;color:var(--dim);line-height:1.8;}

/* ================= THE QUEST LOADER — show the working ================= */
.forge-spin{position:relative;}
.fs-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;height:26%;
  border-radius:50%;background:radial-gradient(circle,var(--vi),transparent 70%);
  animation:fsCore 1.5s ease-in-out infinite;}
@keyframes fsCore{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.85)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.fg-load{text-align:center;margin-top:12px;}
.fg-load-t{font-size:9px;font-weight:900;letter-spacing:4px;color:var(--ac);}
.fg-load-list{display:inline-flex;flex-direction:column;gap:4px;margin-top:9px;text-align:left;}
.fgl{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:2px;color:#bcd7f2;
  opacity:0;animation:fglIn .5s ease forwards;}
.fgl i{width:6px;height:6px;border-radius:50%;background:var(--gn);
  box-shadow:0 0 9px var(--gn);flex:0 0 auto;}
@keyframes fglIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.fg-load-s{margin-top:11px;font-size:7px;letter-spacing:2.5px;color:var(--dim);
  animation:fsBreath 2.4s ease-in-out infinite;}
@keyframes fsBreath{0%,100%{opacity:.55}50%{opacity:1}}

/* ================= THE PROPHECY ================= */
.proph{display:flex;flex-direction:column;}
.pr-title{text-align:center;font-size:clamp(15px,4vw,19px);font-weight:900;letter-spacing:4px;color:#fff;
  text-shadow:0 0 20px rgba(255,206,77,.45);}
.pr-sub{text-align:center;margin-top:5px;font-size:7px;letter-spacing:2px;line-height:1.9;color:var(--dim);}
.pr-sub b{color:#bcd7f2;}
.pr-svg{width:100%;max-width:430px;display:block;margin:11px auto 0;height:auto;}
.pr-out{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px;}
.pr-o{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:11px;
  border:1px solid rgba(63,169,255,.22);background:rgba(6,14,28,.66);text-align:center;}
.pr-dot{width:7px;height:7px;border-radius:50%;margin-bottom:2px;}
.pr-o small{font-size:6px;letter-spacing:2px;color:var(--dim);}
.pr-o b{font-size:clamp(12px,3.4vw,16px);font-weight:900;color:#dbe9fb;letter-spacing:.5px;line-height:1.1;}
.pr-o i{font-style:normal;font-size:5.5px;letter-spacing:1.4px;color:var(--dim);line-height:1.5;}
.pr-oath{margin-top:10px;text-align:center;font-size:6.5px;letter-spacing:2px;line-height:2;color:var(--dim);}
.pr-oath span{color:var(--gd);font-size:8px;letter-spacing:1.4px;}

/* The outcome cards ARE the sell — "LEVEL 1 → 12 · RANK D" is what makes someone swear the oath.
   On a 390px-tall landscape phone the graph was pushing them below the fold. Shrink the chart,
   never the payoff. */
@media (max-height:430px){
  .pr-title{font-size:14px;letter-spacing:3px;}
  .pr-sub{margin-top:3px;font-size:6px;line-height:1.7;}
  .pr-svg{max-width:300px;margin-top:5px;}
  .pr-out{margin-top:7px;gap:6px;}
  .pr-o{padding:6px 5px;}
  .pr-oath{margin-top:6px;font-size:6px;line-height:1.8;}
  /* seal, same treatment */
  .seal-stage{height:clamp(84px, calc(var(--evh,1vh)*20),104px);}
  .seal-law{margin-top:6px;font-size:11px;letter-spacing:2px;}
  .seal-sub{margin-top:4px;font-size:6.5px;line-height:1.7;}
  .seal-doors{margin-top:7px;padding:7px 9px;}
  .sd-row{padding:4px 0;}
  .seal-note{margin-top:6px;font-size:6px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .pr-title{font-size:14px;letter-spacing:3px;}
body.short .pr-sub{margin-top:3px;font-size:6px;line-height:1.7;}
body.short .pr-svg{max-width:300px;margin-top:5px;}
body.short .pr-out{margin-top:7px;gap:6px;}
body.short .pr-o{padding:6px 5px;}
body.short .pr-oath{margin-top:6px;font-size:6px;line-height:1.8;}
body.short /* seal, body.short same treatment */
  .seal-stage{height:clamp(84px, calc(var(--evh,1vh)*20),104px);}
body.short .seal-law{margin-top:6px;font-size:11px;letter-spacing:2px;}
body.short .seal-sub{margin-top:4px;font-size:6.5px;line-height:1.7;}
body.short .seal-doors{margin-top:7px;padding:7px 9px;}
body.short .sd-row{padding:4px 0;}
body.short .seal-note{margin-top:6px;font-size:6px;}

/* the TERM is the content of the seal — the lock reduced to a shackle above and a notch below,
   so nothing competes with the number the hunter is actually swearing to */
.sm-shackle{stroke-width:2.6;stroke-linecap:round;opacity:.85;}
.sm-notch{stroke-width:2;stroke-linecap:round;opacity:.55;}
.seal-term b{text-shadow:0 0 34px rgba(255,206,77,.85),0 0 80px rgba(255,206,77,.35);}

/* ---------- IN-GATE QUEST PANEL — the strike lives in the room ---------- */
.ingate-obj{background:none!important;border:none!important;padding:0!important;max-width:440px;width:100%;}
.igq{width:100%;display:flex;flex-direction:column;gap:5px;}
.igq-head{font-size:6.5px;letter-spacing:3px;color:var(--dim);text-align:center;margin-bottom:1px;}
.igq-row{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:9px;width:100%;
  padding:8px 11px;border-radius:10px;text-align:left;cursor:pointer;
  border:1px solid rgba(63,169,255,.22);background:rgba(6,14,28,.72);}
.igq-row b{font-size:8.5px;letter-spacing:1.5px;color:#dbe9fb;font-weight:800;}
.igq-row em{display:block;font-style:normal;font-size:5.5px;letter-spacing:2px;color:var(--rd);margin-top:2px;}
.igq-row i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:1px;color:var(--gd);}
.igq-tick{width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(99,120,148,.6);}
.igq-row:active{transform:scale(.99);}
/* the quest that actually hits the guardian */
.igq-row.strike{border-color:rgba(255,93,126,.5);background:linear-gradient(90deg,rgba(40,8,18,.7),rgba(6,14,28,.72));}
.igq-row.strike .igq-tick{border-color:rgba(255,93,126,.75);}
.igq-row.done{opacity:.55;}
.igq-row.done .igq-tick{background:var(--gn);border-color:var(--gn);box-shadow:0 0 10px var(--gn);}
.igq-row.done b{text-decoration:line-through;text-decoration-color:rgba(139,163,189,.6);}
.igq-row.done i{color:var(--gn);}
.igq-row:disabled{cursor:default;}
@media (max-height:430px){
  .igq{gap:4px;} .igq-row{padding:6px 10px;} .igq-row b{font-size:8px;}
  .igq-head{font-size:6px;letter-spacing:2.5px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .igq{gap:4px;}
body.short .igq-row{padding:6px 10px;}
body.short .igq-row b{font-size:8px;}
body.short .igq-head{font-size:6px;letter-spacing:2.5px;}


/* With the quest panel inside the gate there is a lot more to fit. On a 390px landscape phone the
   face-off yields space to the thing you actually came to do. */
@media (max-height:430px){
  .ingate-inner{padding:5px 16px;}
  #ingate-warn{display:none;}                     /* the title already says where you are */
  .ingate-title{margin-top:0;}
  .ingate-title .h-big{font-size:13px;letter-spacing:2px;}
  .ingate-rank{font-size:9.5px;padding:1px 6px;}
  .ingate-vs{margin-top:3px;gap:8px;}
  .vs-portrait{width:56px;height:66px;}
  .vs-name{margin-top:2px;font-size:8px;letter-spacing:1.1px;}
  .vs-role{display:none;}
  .vs-clash .vs-x{font-size:12px;}
  .vs-clash .vs-word{font-size:11px;}
  .ingate-prog{margin-top:5px;}
  .ingate-prog .bar{max-width:230px!important;}
  .ingate-obj{margin-top:6px;}
  .igq-row{padding:5px 9px;}
  .igq-row b{font-size:7.5px;}
  .igq-row em{font-size:5px;}
  .ingate-inner > div:last-child{margin-top:7px!important;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .ingate-inner{padding:5px 16px;}
body.short #ingate-warn{display:none;}
body.short /* the title already says where you are */
  .ingate-title{margin-top:0;}
body.short .ingate-title .h-big{font-size:13px;letter-spacing:2px;}
body.short .ingate-rank{font-size:9.5px;padding:1px 6px;}
body.short .ingate-vs{margin-top:3px;gap:8px;}
body.short .vs-portrait{width:56px;height:66px;}
body.short .vs-name{margin-top:2px;font-size:8px;letter-spacing:1.1px;}
body.short .vs-role{display:none;}
body.short .vs-clash .vs-x{font-size:12px;}
body.short .vs-clash .vs-word{font-size:11px;}
body.short .ingate-prog{margin-top:5px;}
body.short .ingate-prog .bar{max-width:230px!important;}
body.short .ingate-obj{margin-top:6px;}
body.short .igq-row{padding:5px 9px;}
body.short .igq-row b{font-size:7.5px;}
body.short .igq-row em{font-size:5px;}
body.short .ingate-inner > div:last-child{margin-top:7px!important;}

.igq-txt{min-width:0;}                 /* one grid child for name + tag, so the XP chip holds its column */
.igq-txt b{display:block;}

/* ================= THE OATH BOARD =================
   Replaces a 3D carousel that showed one vow at a time. This page exists to answer one question —
   what have I sworn, what is still open — and a carousel is the one shape that can't. */
.oath-sum{text-align:center;font-size:8px;letter-spacing:4px;color:var(--dim);margin-bottom:9px;}
.oath-sum b{font-size:15px;color:var(--gd);letter-spacing:1px;
  text-shadow:0 0 16px rgba(255,206,77,.55);}
.oath-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px;}
.ocard{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:13px;text-align:left;
  cursor:pointer;border:1px solid rgba(99,120,148,.30);
  background:linear-gradient(160deg,rgba(10,20,38,.72),rgba(4,10,22,.85));}
.ocard.on{border-color:rgba(63,169,255,.5);box-shadow:0 0 18px -8px var(--ac);}
.ocard.on.green{border-color:rgba(55,224,139,.5);box-shadow:0 0 18px -8px var(--gn);}
.ocard:active{transform:scale(.99);}
.oc-top{display:flex;align-items:center;gap:7px;}
.oc-glyph{font-style:normal;font-size:13px;line-height:1;color:var(--dim);}
.ocard.on .oc-glyph{color:var(--ac);} .ocard.on.green .oc-glyph{color:var(--gn);}
.oc-top b{flex:1;font-size:8.5px;letter-spacing:2.5px;color:#dbe9fb;}
.oc-state{font-style:normal;font-size:6px;letter-spacing:1.4px;padding:2px 7px;border-radius:999px;
  color:var(--dim);border:1px solid rgba(99,120,148,.4);white-space:nowrap;}
.oc-state.on{color:var(--gn);border-color:rgba(55,224,139,.5);background:rgba(55,224,139,.08);}
.oc-val{margin-top:4px;font-size:clamp(12px,3.2vw,17px);font-weight:900;color:#fff;line-height:1.25;
  letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ocard:not(.on) .oc-val{font-size:9px;font-weight:700;color:var(--dim);letter-spacing:1.4px;}
.oc-val small{font-size:9px;font-weight:600;letter-spacing:1.4px;color:var(--dim);}
.oc-meta{font-size:6px;letter-spacing:1.3px;color:var(--dim);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oc-warn{color:var(--rd);}
.oc-cta{margin-top:5px;font-size:6px;letter-spacing:2.2px;color:var(--ac);}

/* the seal binds the four vows — it sits under them, full width */
.oseal{display:flex;align-items:center;justify-content:space-between;gap:11px;width:100%;
  margin-top:9px;padding:11px 13px;border-radius:13px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,206,77,.30);
  background:linear-gradient(135deg,rgba(30,23,5,.6),rgba(4,10,22,.85));}
.oseal.locked{cursor:default;border-color:rgba(255,206,77,.55);
  box-shadow:0 0 22px -9px var(--gd);}
.os-l{display:flex;align-items:center;gap:10px;min-width:0;}
.os-glyph{font-size:19px;line-height:1;color:var(--gd);flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(255,206,77,.6));}
.os-l b{display:block;font-size:9.5px;letter-spacing:2.5px;color:var(--gd);}
.os-l small{display:block;margin-top:2px;font-size:6px;letter-spacing:1.4px;color:var(--dim);line-height:1.6;}
.os-r{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.os-go{font-size:8px;letter-spacing:2px;color:var(--gd);white-space:nowrap;}
@media (max-height:430px){
  .oath-sum{margin-bottom:6px;font-size:7px;} .oath-sum b{font-size:13px;}
  .oath-grid{gap:6px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .ocard{padding:8px 10px;gap:2px;} .oc-val{font-size:13px;} .oc-cta{margin-top:3px;}
  .oseal{margin-top:6px;padding:8px 11px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .oath-sum{margin-bottom:6px;font-size:7px;}
body.short .oath-sum b{font-size:13px;}
body.short .oath-grid{gap:6px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
body.short .ocard{padding:8px 10px;gap:2px;}
body.short .oc-val{font-size:13px;}
body.short .oc-cta{margin-top:3px;}
body.short .oseal{margin-top:6px;padding:8px 11px;}


/* ================= QUICK-ACTION DOCK =================
   Removes NAVIGATION friction only. Verification friction — the camera, the timer, the proof —
   is untouched, because that is the product. Sits opposite the nav rail so it never fights it. */
.actwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:opacity .2s ease,transform .2s ease;}
.actwrap.off{opacity:0;pointer-events:none;transform:scale(.9);}
/* set apart from the runes above: these are PLACES, this is a COMMAND */
.actwrap::before{content:"";width:26px;height:1px;margin-bottom:3px;
  background:linear-gradient(90deg,transparent,rgba(99,120,148,.45),transparent);}
.qd{width:46px;height:46px;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;cursor:pointer;
  border:1px solid rgba(63,169,255,.32);
  background:linear-gradient(160deg,rgba(10,22,42,.9),rgba(3,8,18,.92));
  box-shadow:0 5px 16px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.qd:active{transform:scale(.94);}
.qd-i{display:flex;color:var(--ac);}
.qd-i svg{width:17px;height:17px;}
.qd i{font-style:normal;font-size:4.8px;letter-spacing:1.3px;color:var(--dim);}
/* colour by intent, not by position */
.qd.c-ac .qd-i{color:var(--ac);} .qd.c-ac{border-color:rgba(63,169,255,.4);}
.qd.c-vi .qd-i{color:var(--vi);} .qd.c-vi{border-color:rgba(168,107,255,.44);}
.qd.c-gd .qd-i{color:var(--gd);} .qd.c-gd{border-color:rgba(255,206,77,.42);}
.qd.c-gn .qd-i{color:var(--gn);} .qd.c-gn{border-color:rgba(55,224,139,.42);}

/* THE PRIMARY — bigger, lit, and it breathes so the eye finds it without being shouted at */
.qd-main{width:58px;height:58px;border-radius:17px;border-width:1.5px;}
.qd-main .qd-i svg{width:22px;height:22px;}
.qd-main i{font-size:5.4px;letter-spacing:1.6px;color:#cfe2f7;}
.qd-main.c-ac{box-shadow:0 0 22px -6px var(--ac),0 5px 16px rgba(0,0,0,.5);}
.qd-main.c-vi{box-shadow:0 0 22px -6px var(--vi),0 5px 16px rgba(0,0,0,.5);}
.qd-main.c-gd{box-shadow:0 0 22px -6px var(--gd),0 5px 16px rgba(0,0,0,.5);}
.qd-main.c-gn{box-shadow:0 0 22px -6px var(--gn),0 5px 16px rgba(0,0,0,.5);}
.qd-main:not(.is-done){animation:qdBreath 3.4s ease-in-out infinite;}
.qd-main.is-done{opacity:.62;}
@keyframes qdBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* the other three — collapsed by default, revealed by the handle.
   NOTE the state selectors are .actwrap.open — the element is <div class="actwrap" id="qdock">,
   and the old `.qdock.open` class selectors matched NOTHING (id, not class), so the open state
   never styled and the portrait tray rules were orphaned. */
.qd-more{display:flex;flex-direction:column;gap:7px;overflow:hidden;
  max-height:0;opacity:0;transform:translateY(8px);
  transition:max-height .26s ease,opacity .2s ease,transform .26s ease;}
.actwrap.open .qd-more{max-height:240px;opacity:1;transform:none;margin-bottom:1px;}
.qd-handle{width:58px;height:20px;border-radius:9px;cursor:pointer;
  font-size:12px;line-height:1;letter-spacing:2px;color:var(--dim);
  border:1px solid rgba(99,120,148,.28);background:rgba(4,10,22,.8);
  display:flex;align-items:center;justify-content:center;}
.actwrap.open .qd-handle{color:var(--ac);border-color:rgba(63,169,255,.4);}
@media (max-height:430px){
  .actwrap{gap:5px;}
  .qd{width:36px;height:36px;border-radius:11px;}
  .qd-i svg{width:13px;height:13px;} .qd i{font-size:4.2px;}
  .qd-main{width:48px;height:48px;border-radius:14px;}
  .qd-main .qd-i svg{width:18px;height:18px;} .qd-main i{font-size:4.8px;}
  .qd-handle{width:48px;height:17px;font-size:11px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .actwrap{gap:5px;}
body.short .qd{width:36px;height:36px;border-radius:11px;}
body.short .qd-i svg{width:13px;height:13px;}
body.short .qd i{font-size:4.2px;}
body.short .qd-main{width:48px;height:48px;border-radius:14px;}
body.short .qd-main .qd-i svg{width:18px;height:18px;}
body.short .qd-main i{font-size:4.8px;}
body.short .qd-handle{width:48px;height:17px;font-size:11px;}

/* the ration wall — the Pass pitch at the moment of intent */
.qd-wall{text-align:center;}
.qd-wall-n b{display:block;font-size:38px;font-weight:900;color:var(--ac);line-height:1;
  text-shadow:0 0 26px rgba(63,169,255,.6);}
.qd-wall-n small{display:block;margin-top:4px;font-size:6.5px;letter-spacing:3px;color:var(--dim);}
.qd-wall-l{margin-top:11px;font-size:10px;letter-spacing:1.3px;line-height:1.95;color:#dbe9fb;}
.qd-wall-s{margin-top:8px;font-size:7px;letter-spacing:2px;color:var(--dim);}

/* Persistent UI must own its column, not float over the content. In landscape the nav is a left
   rail and the screens run to the right edge, so the dock was sitting on top of the quest card.
   Reserve the gutter whenever it's showing, and release it the moment it hides. */
/* (the reserved gutter is gone — the act node lives in the rail's existing column) */

/* ---- THE ACT NODE in the rail ----
   Filled, not an outline diamond — a command reads differently from a destination. The expanded
   set floats OVER the content rather than pushing it, because it is transient. */
body.wide .bnav{justify-content:center;gap:9px;}
.actwrap .qd-main{width:52px;height:52px;border-radius:15px;}
.actwrap .qd-main .qd-i svg{width:20px;height:20px;}
.actwrap .qd-main i{font-size:5px;letter-spacing:1.3px;}
.actwrap .qd-handle{width:34px;height:15px;font-size:10px;border-radius:7px;}
/* transient tray — absolutely positioned so it never reflows the rail or the page.
   PORTRAIT: anchored ABOVE the dock (the unscoped left-of-rail rule used to fire here too,
   opening the tray past the right edge of a 390px screen — SCAN/TRAIN/LOG/HABIT unreachable).
   LANDSCAPE (body.wide): to the right of the rail, as designed. */
.actwrap{position:relative;}
.actwrap .qd-more{position:absolute;right:0;bottom:calc(100% + 10px);left:auto;transform:translateY(6px);
  flex-direction:column;gap:6px;max-height:none;z-index:70;
  padding:7px;border-radius:14px;
  border:1px solid rgba(63,169,255,.22);background:rgba(3,8,18,.94);
  box-shadow:0 8px 26px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
body.wide .actwrap .qd-more{left:calc(100% + 8px);right:auto;bottom:0;transform:translateX(-6px);}
.actwrap.open .qd-more{opacity:1;pointer-events:auto;transform:none;}
.actwrap .qd-more .qd{width:40px;height:40px;border-radius:11px;}
.actwrap .qd-more .qd .qd-i svg{width:15px;height:15px;}
.actwrap .qd-more .qd i{font-size:4.3px;}
@media (max-height:430px){
  body.wide .bnav{gap:6px;}
  .actwrap .qd-main{width:44px;height:44px;border-radius:13px;}
  .actwrap .qd-main .qd-i svg{width:17px;height:17px;} .actwrap .qd-main i{font-size:4.5px;}
  .actwrap .qd-handle{width:30px;height:13px;font-size:9px;}
  .actwrap::before{margin-bottom:1px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short.wide .bnav{gap:6px;}
body.short .actwrap .qd-main{width:44px;height:44px;border-radius:13px;}
body.short .actwrap .qd-main .qd-i svg{width:17px;height:17px;}
body.short .actwrap .qd-main i{font-size:4.5px;}
body.short .actwrap .qd-handle{width:30px;height:13px;font-size:9px;}
body.short .actwrap::before{margin-bottom:1px;}



/* ---- restored with their markup: the merge dropped these cinematics' styles too ---- */
#flame-ov .gwarn{color:#ff5d3e;text-shadow:0 0 18px rgba(255,83,62,.85);}
.flame-ember{font-size:60px;line-height:1;filter:drop-shadow(0 0 22px rgba(255,90,40,.8));animation:flameFlick 1.1s ease-in-out infinite;}
@keyframes flameFlick{0%,100%{transform:scale(1) translateY(0);opacity:1;}50%{transform:scale(1.13) translateY(-4px);opacity:.8;}}
/* ===== REDEMPTION RIFT ===== */
#rift-ov .gwarn{color:#a86bff;text-shadow:0 0 18px rgba(168,107,255,.85);}
#rift-ov .pw-hours b{text-shadow:0 0 30px rgba(168,107,255,.8);}
#rift-ov .pw-hours span{color:#d5c8ff;}
/* ===== PREMIUM GATE INTEL ===== */
.g-guard-cap{text-align:center;font-size:10px;font-weight:800;letter-spacing:2px;color:var(--rd);
  margin-top:7px;text-shadow:0 0 12px rgba(255,93,126,.45);}
.gate-sealed .g-guard-cap{color:var(--vi);}
.gg-plate .g-guard-cap{margin:0 0 5px;}
/* the day clock — an SVG stopwatch, matching every other icon in the app (was a ⏱ emoji,
   the only one left in a UI built entirely on custom SVG, and it rendered differently per OS) */
.timer{display:inline-flex;align-items:center;gap:5px;}
.timer .t-ico{width:12px;height:12px;flex:0 0 auto;opacity:.9;}

/* ---- the duel, quietly ---- */
/* The task list was four bordered pills fighting the race bars for attention. It is now one
   whispered line: the BAR carries the progress, the line only names what is left. */
.dl-tasks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px;
  margin-top:9px;cursor:pointer;padding:0 4px;}
.dl-tasks .dt{font:600 8px/1.7 Rajdhani,sans-serif;letter-spacing:1.4px;color:rgba(150,180,215,.5);
  white-space:nowrap;transition:color .2s;}
.dl-tasks .dt.done{color:rgba(87,232,155,.62);text-decoration:line-through;
  text-decoration-color:rgba(87,232,155,.35);}
.dl-tasks .dt-sep{font-style:normal;font-size:7px;color:rgba(120,150,190,.22);}
.dl-tasks:active .dt{color:var(--ink);}
/* the bar becomes the checklist: one segment per task */
.dl-bar.seg{display:flex;gap:3px;background:none;border:none;padding:0;}
.dl-bar.seg u{flex:1;height:100%;border-radius:2px;text-decoration:none;
  background:rgba(120,150,190,.13);box-shadow:inset 0 0 0 1px rgba(120,150,190,.16);
  transition:background .45s cubic-bezier(.2,.9,.2,1),box-shadow .45s;}
.dl-bar.seg u.on{background:linear-gradient(90deg,#3ad6ff,#7dffb8);
  box-shadow:0 0 10px rgba(58,214,255,.5),inset 0 0 0 1px rgba(125,255,184,.5);}

/* ---- THE RECORD ---- */
/* Respect and grief are not effects — they are memory. This is the memory. */
.h2h{text-align:center;padding:9px 12px 10px;margin-bottom:11px;border-radius:10px;
  background:linear-gradient(180deg,rgba(10,18,32,.9),rgba(6,12,22,.75));
  border:1px solid rgba(120,150,190,.16);}
.h2h.up{border-color:rgba(255,206,77,.3);box-shadow:0 0 22px rgba(255,206,77,.09) inset;}
.h2h.down{border-color:rgba(255,93,126,.34);box-shadow:0 0 22px rgba(255,93,126,.11) inset;}
.h2h.first{border-style:dashed;border-color:rgba(58,214,255,.28);}
.h2h-rec{display:flex;align-items:baseline;justify-content:center;gap:7px;}
.h2h-rec b{font:900 26px/1 Rajdhani,sans-serif;letter-spacing:1px;}
.h2h-rec b.w{color:var(--gd);text-shadow:0 0 16px rgba(255,206,77,.5);}
.h2h-rec b.l{color:var(--rd);text-shadow:0 0 16px rgba(255,93,126,.45);}
.h2h-rec span{font:700 15px Rajdhani,sans-serif;color:rgba(150,180,215,.4);}
.h2h-lbl{font:600 7.5px/1 Rajdhani,sans-serif;letter-spacing:1.6px;color:rgba(150,180,215,.5);
  margin-left:6px;font-style:normal;}
.h2h-line{font:700 9px/1.7 Rajdhani,sans-serif;letter-spacing:1.5px;margin-top:5px;color:#bcd7f2;}
.h2h.down .h2h-line{color:#ffb3c4;}
.h2h.up .h2h-line{color:var(--gd);}
.h2h.first .h2h-v{font:800 11px/1.5 Rajdhani,sans-serif;letter-spacing:2.4px;color:var(--cy);
  display:block;text-shadow:0 0 14px rgba(58,214,255,.45);}
.h2h.first i{font:600 8px/1.7 Rajdhani,sans-serif;letter-spacing:1.4px;color:rgba(150,180,215,.62);
  font-style:normal;display:block;margin-top:4px;}
@media(max-height:430px){
  .h2h{padding:6px 10px 7px;margin-bottom:8px;}
  .h2h-rec b{font-size:20px;}
  .dl-tasks{margin-top:7px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .h2h{padding:6px 10px 7px;margin-bottom:8px;}
body.short .h2h-rec b{font-size:20px;}
body.short .dl-tasks{margin-top:7px;}


/* ---- THE ABILITY, studied in the Citadel ---- */
/* power/durability/mana sat decorative for the app's whole life. The ability is the reason
   to read them — and the reason to prefer one soldier over a bigger number. */
.sd-ab{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;margin-top:11px;
  border-radius:10px;position:relative;
  background:linear-gradient(180deg,rgba(10,18,32,.92),rgba(6,12,22,.78));
  border:1px solid rgba(120,150,190,.2);}
.sd-ab.self{border-color:rgba(58,214,255,.34);box-shadow:0 0 22px rgba(58,214,255,.08) inset;}
.sd-ab.foe{border-color:rgba(255,93,126,.38);box-shadow:0 0 22px rgba(255,93,126,.1) inset;}
.sd-ab.sealed{border-style:dashed;opacity:.72;}
.sd-ab .ab-i{font-size:19px;line-height:1.1;flex-shrink:0;width:24px;text-align:center;}
.sd-ab.self .ab-i{color:var(--cy);text-shadow:0 0 14px rgba(58,214,255,.6);}
.sd-ab.foe .ab-i{color:var(--rd);text-shadow:0 0 14px rgba(255,93,126,.6);}
.sd-ab div{flex:1;min-width:0;text-align:left;}
.sd-ab b{display:block;font:800 11px/1.4 Rajdhani,sans-serif;letter-spacing:2.2px;color:var(--ink);}
.sd-ab.self b{color:var(--cy);} .sd-ab.foe b{color:#ffb3c4;}
.sd-ab i{display:block;font:600 8.5px/1.75 Rajdhani,sans-serif;letter-spacing:1.1px;
  color:rgba(188,215,242,.82);font-style:normal;margin-top:3px;}
.ab-k{position:absolute;top:-7px;right:9px;font:800 6.5px/1 Rajdhani,sans-serif;letter-spacing:1.6px;
  padding:3px 7px;border-radius:20px;font-style:normal;background:#060c16;}
.sd-ab.self .ab-k{color:var(--cy);border:1px solid rgba(58,214,255,.4);}
.sd-ab.foe .ab-k{color:var(--rd);border:1px solid rgba(255,93,126,.45);}
@media(max-height:430px){ .sd-ab{padding:7px 9px;margin-top:8px;} .sd-ab .ab-i{font-size:16px;} }
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .sd-ab{padding:7px 9px;margin-top:8px;}
body.short .sd-ab .ab-i{font-size:16px;}


/* ---- the stat triad ---- */
/* Was three full-width label+number+bar rows for three numbers. Now one row you read at a
   glance, which also gives the duel ability below it room to matter. */
.sd-triad{display:flex;gap:7px;margin-top:9px;}
.sd-tri{flex:1;min-width:0;text-align:center;padding:7px 4px 6px;border-radius:9px;
  background:rgba(10,18,32,.6);border:1px solid rgba(120,150,190,.14);}
.sd-tri>span{display:block;font:700 6.5px/1 Rajdhani,sans-serif;letter-spacing:1.8px;
  color:rgba(150,180,215,.55);}
.sd-tri>b{display:block;font:900 17px/1.15 Rajdhani,sans-serif;letter-spacing:.5px;
  color:var(--ink);margin-top:2px;}
.sd-tri .sd-bar{margin-top:5px;height:2px;border-radius:2px;background:rgba(120,150,190,.16);
  overflow:hidden;}
.sd-tri .sd-bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#3ad6ff,#7dffb8);box-shadow:0 0 7px rgba(58,214,255,.55);}
@media(max-height:430px){
  .sd-triad{gap:5px;margin-top:7px;}
  .sd-tri{padding:5px 3px 4px;} .sd-tri>b{font-size:14px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .sd-triad{gap:5px;margin-top:7px;}
body.short .sd-tri{padding:5px 3px 4px;}
body.short .sd-tri>b{font-size:14px;}


/* ---- DUEL TERMS ---- */
.tm-sec{font:800 7.5px/1 Rajdhani,sans-serif;letter-spacing:2.2px;color:var(--dim);
  margin:12px 0 6px;display:flex;justify-content:space-between;align-items:center;}
.tm-sec span{color:var(--gd);letter-spacing:1.4px;}
.tm-opts{display:flex;flex-direction:column;gap:6px;}
.tm-opts.two,.tm-opts.three{flex-direction:row;}
.tm-opts.two .tm-opt,.tm-opts.three .tm-opt{flex:1;min-width:0;}
.tm-opts.three .tm-opt{text-align:center;}
.tm-opts.three .tm-opt i{font-size:7px;}
.tm-opt{text-align:left;padding:9px 11px;border-radius:10px;cursor:pointer;
  background:rgba(10,18,32,.7);border:1px solid rgba(120,150,190,.18);transition:border-color .18s,background .18s;}
.tm-opt b{display:block;font:800 10.5px/1.3 Rajdhani,sans-serif;letter-spacing:2px;color:var(--ink);}
.tm-opt i{display:block;font:600 8px/1.65 Rajdhani,sans-serif;letter-spacing:1.1px;
  color:rgba(150,180,215,.7);font-style:normal;margin-top:3px;}
.tm-opt.on{border-color:var(--cy);background:rgba(58,214,255,.09);
  box-shadow:0 0 20px rgba(58,214,255,.14) inset;}
.tm-opt.on b{color:var(--cy);}
.tm-chips{display:flex;gap:6px;flex-wrap:wrap;}
.tm-chip{flex:1;min-width:64px;padding:8px 6px;border-radius:9px;cursor:pointer;
  font:800 9px/1 Rajdhani,sans-serif;letter-spacing:1.4px;color:rgba(188,215,242,.85);
  background:rgba(10,18,32,.7);border:1px solid rgba(120,150,190,.18);}
.tm-chip.on{border-color:var(--gd);color:var(--gd);background:rgba(255,206,77,.1);
  box-shadow:0 0 18px rgba(255,206,77,.14) inset;}
.tm-chip.poor{opacity:.32;cursor:not-allowed;}
@media(max-height:430px){
  .tm-sec{margin:8px 0 5px;} .tm-opt{padding:6px 9px;} .tm-opt i{font-size:7.5px;}
  .tm-chip{padding:6px 5px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .tm-sec{margin:8px 0 5px;}
body.short .tm-opt{padding:6px 9px;}
body.short .tm-opt i{font-size:7.5px;}
body.short .tm-chip{padding:6px 5px;}


/* ---- the road, legible ---- */
/* Thirty tiers of identical dots told you nothing. The glyph carries the KIND, the colour
   reinforces it, and the label states the amount — readable without opening the tile. */
.bs-ico{width:26px;height:26px;margin:0 auto 4px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:400 13px/1 Rajdhani,sans-serif;
  background:rgba(6,12,22,.8);border:1px solid;
  filter:drop-shadow(0 0 7px currentColor);}
.bs-tile.locked .bs-ico{filter:none;opacity:.4;}
.bs-tile.claimed .bs-ico{opacity:.5;}
/* rewards still waiting on artwork say so, rather than pretending with a placeholder image */
.bs-art{margin-top:3px;font:700 6px/1 Rajdhani,sans-serif;letter-spacing:1.3px;
  color:rgba(255,206,77,.62);border:1px dashed rgba(255,206,77,.34);
  border-radius:20px;padding:2px 5px;display:inline-block;}
@media(max-height:430px){ .bs-ico{width:21px;height:21px;font-size:11px;margin-bottom:3px;} }
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .bs-ico{width:21px;height:21px;font-size:11px;margin-bottom:3px;}


/* ---- the champion's ability, inside the duel ---- */





.dl-ab.self 
.dl-ab.foe  


.dl-ab.self  .dl-ab.foe 



.dl-bound{flex-basis:100%;font:700 6.5px/1.6 Rajdhani,sans-serif;letter-spacing:1.4px;
  color:rgba(188,215,242,.6);text-align:center;padding-top:4px;
  border-top:1px solid rgba(120,150,190,.12);}
@media(max-height:430px){   }

/* ---- the duel, at landscape height ----
   The lane grew a record, a face-off, an ability strip and a task line, pushing the
   'Go Clear Your Tasks' CTA 92px past the fold. .a-lane scrolls, so it was reachable —
   but reachable-after-scrolling is not the same as seen. This shrinks the furniture,
   never the CTA, so the button that sends you to do the work lands without a scroll. */
@media(max-height:430px){
  .duel-live .h2h{padding:3px 10px 4px;margin-bottom:5px;}
  .duel-live .h2h-rec b{font-size:15px;}
  .duel-live .h2h-rec span{font-size:11px;}
  .duel-live .h2h-rec .h2h-lbl{display:none;}
  .duel-live .h2h-line{font-size:8px;margin-top:2px;}
  .ds-face{gap:9px;margin:4px 0;}
  .ds-art{width:52px;height:52px;}
  .ds-rank{font-size:7px;padding:0 3px;}
  .ds-gear{font-size:6.5px;margin-top:2px;}
  .ds-nm{font-size:9px;margin-top:3px;}
  .ds-champ{padding:3px 6px;margin-top:4px;}
  .ds-champ img{width:16px;height:16px;}
  .ds-champ span{font-size:7px;} .ds-champ i{font-size:6.5px;}
  
                   /* the name carries it; the blurb lives in the Citadel */
  
  .dl-bound{font-size:6px;padding-top:3px;}
  .dl-tasks{margin-top:5px;}
  .dl-state{margin-top:5px;font-size:8.5px;}
  .dl-head{margin-bottom:4px;}
  .duel-live{padding-top:7px;padding-bottom:7px;}
  .duel-live > div[style*="margin-top:10px"]{margin-top:6px!important;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .duel-live .h2h{padding:3px 10px 4px;margin-bottom:5px;}
body.short .duel-live .h2h-rec b{font-size:15px;}
body.short .duel-live .h2h-rec span{font-size:11px;}
body.short .duel-live .h2h-rec .h2h-lbl{display:none;}
body.short .duel-live .h2h-line{font-size:8px;margin-top:2px;}
body.short .ds-face{gap:9px;margin:4px 0;}
body.short .ds-art{width:52px;height:52px;}
body.short .ds-rank{font-size:7px;padding:0 3px;}
body.short .ds-gear{font-size:6.5px;margin-top:2px;}
body.short .ds-nm{font-size:9px;margin-top:3px;}
body.short .ds-champ{padding:3px 6px;margin-top:4px;}
body.short .ds-champ img{width:16px;height:16px;}
body.short .ds-champ span{font-size:7px;}
body.short .ds-champ i{font-size:6.5px;}
body.short /* the name carries it; the blurb lives in the Citadel */
  
  .dl-bound{font-size:6px;padding-top:3px;}
body.short .dl-tasks{margin-top:5px;}
body.short .dl-state{margin-top:5px;font-size:8.5px;}
body.short .dl-head{margin-bottom:4px;}
body.short .duel-live{padding-top:7px;padding-bottom:7px;}
body.short .duel-live > div[style*="margin-top:10px"]{margin-top:6px!important;}



/* A belt-and-braces cap: #scr-gates pins its CTA with position:absolute;bottom:2px, so the
   button's position is only as correct as the screen's height. Constraining the screen to
   the viewport it is meant to fill exactly means the pinned CTA can never be pushed past
   the fold by content growth above it. (The CTA measures fine today — mid-`scrIn` frames
   report a taller screen than the settled layout, so measure after the animation.) */
/* #scr-gates renders 745px tall inside a 720px viewport, so its absolutely-positioned
   'Enter Gate' CTA clipped by 7px — and body.wide .screen is overflow:hidden, which turns
   clipped into UNREACHABLE. max-height did not hold (the screen is position:absolute and
   the height comes from content), so this uses the pattern .a-lane already uses elsewhere
   in the app: let it scroll. Scrollable is the guarantee; the fold is only a preference. */
body.wide #scr-gates{overflow-y:auto;-webkit-overflow-scrolling:touch;}
body.wide #scr-gates::-webkit-scrollbar{width:0;height:0;}

/* ---- THE CHAMPION'S POWER, in the duel ---- */
/* Leads with the portrait and the owner line so the ability can never be mistaken for
   something the rival is doing to you. --ac2 carries the champion's grade colour. */
.dl-ab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px;padding:8px 10px;
  border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(12,20,36,.94),rgba(6,12,22,.8));
  border:1px solid color-mix(in srgb, var(--ac2) 34%, transparent);
  box-shadow:0 0 26px color-mix(in srgb, var(--ac2) 9%, transparent) inset;}
.dl-ab::before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:var(--ac2);
  box-shadow:0 0 12px var(--ac2);}
.dl-ab-face{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;
  cursor:pointer;background:none;border:none;padding:0;}
.dl-ab-art{width:34px;height:34px;flex-shrink:0;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ac2) 26%, transparent), rgba(6,12,22,.9));
  border:1px solid color-mix(in srgb, var(--ac2) 45%, transparent);}
.dl-ab-art img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.dl-ab-art em{font-size:16px;font-style:normal;color:var(--ac2);
  text-shadow:0 0 12px var(--ac2);}
.dl-ab-t{min-width:0;flex:1;}
.dl-ab-own{display:block;font:700 6.5px/1 Rajdhani,sans-serif;letter-spacing:1.7px;
  color:rgba(150,180,215,.62);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dl-ab-t b{display:block;font:800 11px/1.3 Rajdhani,sans-serif;letter-spacing:2px;
  color:var(--ac2);text-shadow:0 0 14px color-mix(in srgb, var(--ac2) 55%, transparent);margin-top:2px;}
.dl-ab-t i{display:block;font:600 7.5px/1.5 Rajdhani,sans-serif;letter-spacing:1.1px;
  color:rgba(188,215,242,.86);font-style:normal;margin-top:2px;}
/* the cast button reads as a weapon, not a link */
.dl-cast{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 13px;border-radius:10px;cursor:pointer;border:none;
  font:900 10px/1 Rajdhani,sans-serif;letter-spacing:2px;color:#180a04;
  background:linear-gradient(180deg,#ffc36b,#ff6a2e);
  box-shadow:0 0 20px rgba(255,120,50,.55), 0 2px 0 rgba(0,0,0,.3);}
.dl-cast em{font:800 6px/1 Rajdhani,sans-serif;letter-spacing:1.3px;font-style:normal;opacity:.72;}
.dl-cast:active{transform:translateY(1px);}
.dl-cast.spent{background:rgba(120,150,190,.14);color:rgba(150,180,215,.5);
  box-shadow:none;cursor:not-allowed;}
.dl-passive{flex-shrink:0;font:800 7px/1 Rajdhani,sans-serif;letter-spacing:1.8px;
  color:var(--ac2);border:1px solid color-mix(in srgb, var(--ac2) 40%, transparent);
  border-radius:20px;padding:5px 9px;background:rgba(6,12,22,.7);}
@media(max-height:430px){
  .dl-ab{margin-top:6px;padding:5px 9px;gap:7px;}
  .dl-ab-art{width:27px;height:27px;border-radius:7px;}
  .dl-ab-t b{font-size:9.5px;}
  .dl-ab-t i{font-size:7px;}          /* the plain effect ALWAYS shows — hiding it caused the confusion */
  .dl-cast{padding:5px 10px;font-size:9px;}
}
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .dl-ab{margin-top:6px;padding:5px 9px;gap:7px;}
body.short .dl-ab-art{width:27px;height:27px;border-radius:7px;}
body.short .dl-ab-t b{font-size:9.5px;}
body.short .dl-ab-t i{font-size:7px;}
body.short /* the plain effect ALWAYS shows — hiding it caused the confusion */
  .dl-cast{padding:5px 10px;font-size:9px;}


/* ---- two doors on a cosmetic: earned or bought ---- */
/* The coin door reads as the default; the crystal door is the shortcut. Both are legitimate —
   the doctrine sells appearance, and appearance is all either door buys. */
.cos-doors{display:flex;gap:4px;margin-top:5px;}
.cos-door{flex:1;min-width:0;padding:5px 4px;border-radius:7px;cursor:pointer;
  font:800 8px/1 Rajdhani,sans-serif;letter-spacing:1px;white-space:nowrap;
  background:rgba(10,18,32,.75);}
.cos-door.coin{color:var(--gd);border:1px solid rgba(255,206,77,.4);}
.cos-door.cry{color:#c9a6ff;border:1px solid rgba(168,107,255,.45);}
.cos-door:active{transform:translateY(1px);}
@media(max-height:430px){ .cos-door{padding:4px 3px;font-size:7px;} }
/* body.short mirror — forceRot renders rotated, so height media queries never fire there */
body.short .cos-door{padding:4px 3px;font-size:7px;}



/* ═══════════ AUDIT PASS — classes the JS was already using with no CSS behind them ═══════════ */
/* the gate CTA attention pulse (first-run rail points at Enter Gate) */
.pulse{animation:ctaPulse 1.15s ease-in-out infinite;}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,107,255,.55);}50%{box-shadow:0 0 0 12px rgba(168,107,255,0);}}
/* CRITICAL EXECUTION float — gold, heavier, rises harder than a normal XP float */
.floatxp.crit{color:var(--gd);font-size:15px;text-shadow:0 0 18px rgba(255,206,77,.9);letter-spacing:2px;}
/* soft-disabled CTA — still tappable so the tap can explain WHAT is missing (covenant gate) */
.cta.soft-off{opacity:.45;filter:saturate(.4);}
/* cyan variant referenced by the Eye intro + train buttons */
.cta.cyan{border-color:rgba(63,169,255,.65);color:#bfe3ff;box-shadow:0 0 18px -6px var(--ac);}
/* in-gate protocol block (today's real session rendered inside the gate) */
.ig-prot-head{margin-top:10px;font-size:8px;letter-spacing:3px;color:var(--ac);font-weight:800;}
.ig-prot-phase{font-size:7px;letter-spacing:2px;color:var(--dim);margin-top:2px;}
.ig-prot-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;max-width:420px;margin-left:auto;margin-right:auto;}
.ig-prot-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(63,169,255,.22);border-radius:9px;background:rgba(6,14,28,.72);text-align:left;}
.ig-dot{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac);flex-shrink:0;}
.ig-prot-item.done .ig-dot{background:var(--gn);box-shadow:0 0 8px var(--gn);}
.ig-prot-item.done{opacity:.55;}
.ig-prot-name{font-size:10px;font-weight:800;letter-spacing:1.5px;}
.ig-prot-detail{margin-left:auto;font-size:8px;letter-spacing:1px;color:var(--dim);white-space:nowrap;}
/* reward chips (gate intel + kill cinema) */
.rchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;margin:2px 3px;border:1px solid rgba(255,206,77,.4);border-radius:8px;background:rgba(20,16,4,.6);font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--gd);}
.rchip .ri{display:inline-flex;}
.rchip .ri svg{width:12px;height:12px;}
.rchip.gl{border-color:rgba(63,169,255,.4);color:var(--ac);background:rgba(4,14,28,.6);}
.rchip.xp{border-color:rgba(87,232,155,.4);color:#7dffb8;background:rgba(4,20,12,.6);}
/* gate requirement rows */
.gi-reqrow{display:flex;align-items:center;gap:7px;font-size:8.5px;letter-spacing:1.4px;color:#bcd7f2;margin-top:4px;}
.gi-b{color:var(--gd);font-weight:800;}
/* the living System note (violet card on Status) + its unread dot */
.sn-line{font-size:9px;letter-spacing:.6px;line-height:1.8;color:#d5c8ff;}
.sn-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vi);box-shadow:0 0 8px var(--vi);margin-right:5px;animation:pulse 1.6s ease-in-out infinite;}
/* vault tab labels must never wrap into a second line on 360px phones */
.vtab{white-space:nowrap;}
/* top-anchored overlays: inline styles set their padding, so the safe-area correction
   must win — the gym/chat/forge/trial headers were rendering under the status bar */
#trial-ov,#chat-ov,#forge-ov{padding-top:calc(14px + env(safe-area-inset-top,0px)) !important;}
#vessel-ov{padding-top:calc(18px + env(safe-area-inset-top,0px)) !important;}