:root{
  color-scheme:dark;
  --bg:#070914;--panel:#101726;--panel2:#151e32;--line:#2c3857;
  --text:#f7f8ff;--muted:#95a2bd;--cyan:#55ebff;--blue:#4f9cff;--violet:#ae78ff;
  --pink:#ff64b8;--gold:#ffd25f;--green:#70efb0;--red:#ff6d84;--orange:#ff9c55;
  --shadow:0 24px 70px rgba(0,0,0,.5);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.48 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:
radial-gradient(circle at 17% -8%,rgba(79,242,255,.16),transparent 30%),radial-gradient(circle at 88% 0,rgba(255,100,184,.12),transparent 30%),linear-gradient(180deg,#090d19,#070914 56%,#05070e)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(#000,transparent 90%)}
button,input,select{font:inherit;color:inherit;min-width:0}.wrap{width:min(1400px,100%);margin:auto;padding:20px 18px 64px;overflow-x:clip}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.17em;font-size:.78rem}.mark{width:27px;height:27px;border:1px solid rgba(85,235,255,.65);transform:rotate(45deg);position:relative;background:linear-gradient(135deg,rgba(85,235,255,.18),rgba(174,120,255,.15))}.mark:after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,100,184,.65)}
.pill{padding:7px 10px;border:1px solid rgba(112,239,176,.35);border-radius:999px;background:rgba(112,239,176,.055);color:#baf8d9;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.hero{position:relative;overflow:hidden;padding:21px 23px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(120deg,rgba(85,235,255,.07),rgba(174,120,255,.065) 48%,rgba(255,100,184,.055)),rgba(13,18,32,.92);box-shadow:var(--shadow)}
.hero:after{content:"";position:absolute;right:-90px;top:-90px;width:430px;height:220px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));filter:blur(90px);opacity:.1}.eyebrow{color:var(--cyan);font-size:.67rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}.hero h1{margin:5px 0 6px;font-size:clamp(2rem,4.7vw,3.65rem);letter-spacing:-.055em;line-height:1}.hero p{margin:0;max-width:980px;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tag{padding:5px 8px;border-radius:999px;border:1px solid #35415f;background:#0a0f1c;color:#b9c4d8;font-size:.65rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.tag.official{color:#aef6d3;border-color:rgba(112,239,176,.35);background:rgba(112,239,176,.05)}.tag.player{color:#d6c8ff;border-color:rgba(174,120,255,.4);background:rgba(174,120,255,.055)}.tag.provisional{color:#ffe0a0;border-color:rgba(255,210,95,.4);background:rgba(255,210,95,.055)}
.notice{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,210,95,.31);border-radius:12px;background:rgba(255,210,95,.045);color:#e9dcba;font-size:.78rem}
.plan{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#11182a,#0d1321);box-shadow:var(--shadow);min-width:0}.planGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;align-items:end}.field{display:flex;flex-direction:column;gap:5px;min-width:0}.field label{color:var(--muted);font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.field input,.field select{width:100%;padding:10px 11px;border:1px solid #303c5b;border-radius:10px;background:#090e1a;outline:none}.field input:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,235,255,.08)}.planBtn{height:41px;border:1px solid rgba(85,235,255,.44);border-radius:10px;background:linear-gradient(135deg,rgba(85,235,255,.18),rgba(174,120,255,.16));font-weight:900;cursor:pointer}.planBtn:hover{transform:translateY(-1px)}
.mainGrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.67fr);gap:14px;margin-top:14px;align-items:start;min-width:0}
  /* The lab wrapper is narrower than the standalone tool was, which shrank
     tiles until their labels clipped. Widen the board column and let the
     page use more of the viewport while the Board view is active. */
  @media(min-width:1180px){.mainGrid{grid-template-columns:minmax(0,2.15fr) minmax(300px,.62fr)}}
  body[data-view="board"] .wrap{width:min(1580px,100%)}.card{min-width:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#121a2d,#0d1321);box-shadow:var(--shadow)}.boardCard{padding:14px;min-width:0}.boardTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 10px}.boardTitle b{display:block;font-size:1rem}.boardTitle span{display:block;color:var(--muted);font-size:.73rem;margin-top:2px}.modeBadge{padding:7px 10px;border:1px solid rgba(85,235,255,.35);border-radius:999px;color:#a9f8fc;background:rgba(85,235,255,.05);font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.modeBadge.modified{color:#ffe3a1;border-color:rgba(255,210,95,.48);background:rgba(255,210,95,.08);box-shadow:0 0 25px rgba(255,210,95,.13)}
.guaranteeStrip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.guarantee{padding:9px 11px;border:1px solid #2e3a58;border-radius:12px;background:#0a101c}.guarantee .gTop{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#cad3e5;font-size:.68rem;font-weight:850}.guarantee .gTop b{font-size:.9rem;color:var(--text)}.gBar{height:7px;margin-top:7px;border:1px solid #2e3a58;border-radius:999px;background:#060a12;overflow:hidden}.gFill{height:100%;width:0;transition:.35s;background:linear-gradient(90deg,var(--violet),var(--pink))}.guarantee.s .gFill{background:linear-gradient(90deg,var(--orange),var(--gold))}
.boardViewport{width:100%;max-width:100%;overflow:hidden;border-radius:18px}.board{position:relative;width:100%;min-width:0;aspect-ratio:16/10;border:1px solid #2c3756;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(85,235,255,.075),transparent 24%),radial-gradient(circle at 48% 55%,rgba(255,100,184,.05),transparent 30%),linear-gradient(135deg,#0b1221,#10172a 52%,#090e1a)}
.board:before{content:"";position:absolute;inset:0;opacity:.24;background:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:6% 10%;pointer-events:none}/* The modified-board ambience used to be a rotating rectangle, whose corners
   swept visibly across the board. Replaced with a centred bloom that breathes:
   no geometry, no edges, nothing to track with the eye. */
.board.modified:after{
  content:"";position:absolute;left:50%;top:50%;
  width:130%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,210,95,.13),rgba(255,140,80,.06) 38%,transparent 66%),
    radial-gradient(circle at 50% 62%,rgba(255,100,184,.09),transparent 58%);
  animation:modBreathe 7s ease-in-out infinite;
}
@keyframes modBreathe{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.97)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}
}@keyframes scan{to{transform:rotate(360deg)}}
.routeSvg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.mainRoute{fill:none;stroke:rgba(85,235,255,.18);stroke-width:.8;stroke-dasharray:1.2 1.2}.branchRoute{fill:none;stroke:rgba(255,210,95,.8);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(255,210,95,.55));opacity:0;stroke-dasharray:140;stroke-dashoffset:140;transition:opacity .2s}.branchRoute.active{opacity:1;animation:bridgeDraw .72s ease forwards}@keyframes bridgeDraw{to{stroke-dashoffset:0}}
.tileLayer{position:absolute;inset:0;z-index:2}.tile{position:absolute;width:4.2%;height:7.4%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border:1px solid #33405f;border-radius:7px;background:linear-gradient(180deg,rgba(22,32,55,.97),rgba(12,18,32,.98));overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s,opacity .2s}.tile:before{content:"";position:absolute;inset:-80%;opacity:.24;background:radial-gradient(circle,rgba(85,235,255,.2),transparent 35%)}.tile .tileInner{position:relative;z-index:2;text-align:center;padding:2px;width:100%}.tile .ico{display:block;font-size:clamp(.7rem,1.2vw,1rem);line-height:1;font-weight:900}.tile small{display:block;margin-top:2px;color:#8290aa;font-size:.48rem;font-weight:850;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile .idx{position:absolute;left:3px;top:2px;font-size:.42rem;font-weight:950;opacity:.66}.tile.rankB{border-color:rgba(79,156,255,.45)}.tile.rankB .ico{color:#6db6ff}.tile.rankA{border-color:rgba(174,120,255,.55);background:linear-gradient(180deg,rgba(37,24,62,.96),rgba(16,15,34,.98))}.tile.rankA .ico{color:#c28dff}.tile.rankS{border-color:rgba(255,210,95,.76);background:linear-gradient(180deg,rgba(78,46,15,.98),rgba(27,18,20,.98));box-shadow:0 0 18px rgba(255,210,95,.09)}.tile.rankS .ico{color:#ffd86f;text-shadow:0 0 16px rgba(255,210,95,.35)}.tile.special{border-color:rgba(255,100,184,.65);background:linear-gradient(180deg,rgba(61,25,58,.98),rgba(19,14,30,.98))}.tile.bridgeGate{border-color:rgba(255,210,95,.7);box-shadow:0 0 18px rgba(255,210,95,.12)}.tile.active{transform:translate(-50%,-50%) scale(1.16);border-color:var(--cyan);box-shadow:0 0 0 2px rgba(85,235,255,.15),0 0 27px rgba(85,235,255,.32);z-index:6}.tile.landed{transform:translate(-50%,-50%) scale(1.13);box-shadow:0 0 0 2px rgba(255,100,184,.17),0 0 34px rgba(255,100,184,.28);z-index:7}.tile.branch{opacity:0;pointer-events:none}.tile.branch.visible{opacity:1;pointer-events:auto;animation:branchPop .45s cubic-bezier(.2,.9,.25,1) both}.tile.branch.visible:nth-of-type(2n){animation-delay:.04s}@keyframes branchPop{from{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tile.boardUpgrade{animation:tileFlip .58s cubic-bezier(.22,.9,.28,1)}@keyframes tileFlip{0%{transform:translate(-50%,-50%) rotateY(0)}48%{transform:translate(-50%,-50%) rotateY(85deg) scale(.94)}100%{transform:translate(-50%,-50%) rotateY(0)}}
.cityCore{position:absolute;left:50%;top:50%;width:min(42%,360px);height:auto;max-height:78%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;border:1px solid rgba(65,82,122,.64);border-radius:16px;background:linear-gradient(145deg,rgba(7,12,24,.94),rgba(14,19,36,.92));overflow:hidden}.coreKicker,.coreTitle,.coreSub,.dieWrap,.rollButtons{z-index:3}
.coreKicker{position:relative;color:var(--cyan);font-size:.6rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.coreTitle{position:relative;margin:5px 0 3px;font-size:clamp(1.2rem,2.6vw,2.15rem);font-weight:900;letter-spacing:-.04em;text-align:center}.coreSub{position:relative;color:var(--muted);font-size:.7rem;line-height:1.42;text-align:center;max-width:430px}
.rollButtons .btn{flex:0 0 auto}
.cityCore{overflow:visible}.dieWrap{position:relative;display:flex;align-items:center;justify-content:center;margin:9px 0 7px;min-height:70px}.die{width:59px;height:59px;border:1px solid rgba(255,255,255,.28);border-radius:15px;background:linear-gradient(145deg,#f7f8ff,#cbd5eb);box-shadow:0 12px 28px rgba(0,0,0,.38),inset 0 0 0 2px rgba(255,255,255,.44);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;gap:4px}.die.tumble{animation:tumble .66s cubic-bezier(.3,.9,.3,1)}@keyframes tumble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(95deg) scale(.88)}60%{transform:rotate(235deg) scale(1.07)}100%{transform:rotate(360deg) scale(1)}}.pipDot{width:7px;height:7px;border-radius:50%;margin:auto;background:#13223f;opacity:0}.pipDot.on{opacity:1}.rollButtons{position:relative;display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.btn{border:1px solid #35415e;border-radius:10px;background:#0c1322;padding:9px 12px;font-weight:850;cursor:pointer;transition:.16s}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:#536487}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{border-color:rgba(85,235,255,.42);background:linear-gradient(135deg,rgba(85,235,255,.15),rgba(174,120,255,.12))}.btn.gold{border-color:rgba(255,210,95,.42);background:rgba(255,210,95,.075);color:#ffe3a0}.btn small{display:block;margin-top:2px;color:#8997b1;font-size:.54rem;font-weight:800}.token{position:absolute;z-index:9;width:28px;height:28px;border:3px solid #fff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 11%,var(--pink) 13% 45%,#733cff 47% 100%);box-shadow:0 0 0 3px rgba(255,100,184,.2),0 0 24px rgba(255,100,184,.75);transform:translate(-50%,-50%);transition:left .11s linear,top .11s linear}.skipBtn{display:none}.skipBtn.on{display:block}.batchBadge{display:none;padding:8px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(6,9,17,.88);font-size:.72rem;font-weight:950;letter-spacing:.08em}.batchBadge.on{display:block}
.bridgeAlert{position:absolute;left:50%;top:13%;z-index:10;transform:translate(-50%,-12px);opacity:0;pointer-events:none;padding:9px 13px;border:1px solid rgba(255,210,95,.55);border-radius:999px;background:rgba(22,14,15,.94);color:#ffe2a0;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35)}.bridgeAlert.on{animation:alertIn 1.5s ease both}@keyframes alertIn{15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
.rewardBurst{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;opacity:0;background:radial-gradient(circle at center,rgba(7,9,20,.12),rgba(7,9,20,.72))}.rewardBurst.on{animation:burstWrap .72s ease both}@keyframes burstWrap{0%{opacity:0}18%,72%{opacity:1}100%{opacity:0}}.rewardBox{min-width:260px;max-width:78%;padding:20px;text-align:center;border:1px solid rgba(85,235,255,.55);border-radius:17px;background:rgba(8,13,26,.96);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.7);animation:rewardPop .72s cubic-bezier(.2,.9,.3,1) both}.rewardBox.s{border-color:rgba(255,210,95,.8);box-shadow:0 0 55px rgba(255,210,95,.22),0 30px 80px rgba(0,0,0,.65)}.rewardBox.a{border-color:rgba(174,120,255,.78)}.rewardBox.special{border-color:rgba(255,100,184,.78)}@keyframes rewardPop{18%{transform:scale(.7)}46%{transform:scale(1.08)}70%,100%{transform:scale(1)}}.rewardIcon{font-size:2.7rem;font-weight:950}.rewardLabel{margin-top:5px;color:var(--muted);font-size:.64rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.rewardName{margin-top:3px;font-size:1.2rem;font-weight:950}
.side{padding:16px;position:sticky;top:10px}.side h2{margin:0 0 10px;font-size:1rem}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{padding:10px;border:1px solid #2c3857;border-radius:12px;background:#0a101c}.metric b{display:block;font-size:1.12rem}.metric span{display:block;margin-top:2px;color:var(--muted);font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.pityMeter{margin-top:10px;padding:11px;border:1px solid #2c3857;border-radius:12px;background:#0a101c}.meterHead{display:flex;justify-content:space-between;gap:10px;color:#bfc9dc;font-size:.68rem}.meterHead b{color:#fff;font-size:.9rem}.bar{height:8px;margin-top:8px;border:1px solid #2c3857;border-radius:999px;background:#060a12;overflow:hidden}.barFill{height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--pink));transition:.35s}.ticks{display:flex;justify-content:space-between;margin-top:5px;color:#6f7d98;font-size:.55rem}.sectionLabel{color:#7f8ca5;font-size:.61rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.history{margin-top:8px;max-height:360px;overflow:auto;border-top:1px solid #26324c}.hist{display:grid;grid-template-columns:42px 54px 1fr 30px;gap:7px;align-items:center;padding:8px 1px;border-bottom:1px solid #202a40;font-size:.68rem}.hist .rollNo,.hist .dieNo{color:#8190aa}.hist .result{font-weight:750}.hist .rarity{text-align:center;font-weight:950}.hist.s .rarity{color:var(--gold)}.hist.a .rarity{color:var(--violet)}.hist.special .rarity{color:var(--pink)}.empty{padding:15px 0;color:#7e8ba3;font-size:.73rem}.strategy{margin-top:10px;padding:11px;border:1px solid rgba(85,235,255,.23);border-radius:12px;background:rgba(85,235,255,.035)}.strategy b{display:block;margin-bottom:3px;color:#a9f8fc}.strategy p{margin:0;color:#aeb9cc;font-size:.73rem}
.bottomGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.fold{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#11182a,#0d1321);overflow:hidden}.fold summary{padding:14px 15px;cursor:pointer;color:#dce4f4;font-weight:850}.foldBody{padding:0 15px 15px;color:#aeb9cc;font-size:.78rem}.foldBody p{margin:8px 0}.modelGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.sourceList{margin:10px 0 0;padding-left:18px}.sourceList li{margin:6px 0}.sourceList a{color:#8cefff}.disclaimer{margin-top:17px;color:#7f8ba2;font-size:.68rem;text-align:center}.disclaimer strong{color:#b8c2d3}
.simOutcomeNote{margin:0 0 11px;padding:9px 11px;border:1px solid rgba(255,210,95,.28);border-radius:11px;background:rgba(255,210,95,.055);color:#c7bfd0;font-size:.68rem;line-height:1.48}.simOutcomeNote b{color:#ffe39c}.simOutcomeNote.compact{margin:8px 0 2px}
.resultsOverlay{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:18px;background:rgba(3,5,11,.88);backdrop-filter:blur(10px)}.resultsOverlay.on{display:grid}.resultsPanel{width:min(1160px,100%);max-height:92vh;overflow:auto;border:1px solid #394765;border-radius:22px;background:linear-gradient(160deg,#0d1526,#0b0e18);box-shadow:0 40px 120px rgba(0,0,0,.7);padding:17px}.resultsHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.resultsHead h2{margin:0;font-size:1.2rem}.resultsHead p{margin:3px 0 0;color:#8e9ab2;font-size:.7rem}.resultTallies{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0}.resultBonuses{display:none;margin:0 0 11px;padding:9px 11px;border:1px solid rgba(174,120,255,.34);border-radius:11px;background:rgba(174,120,255,.055);color:#d8c8ff;font-size:.7rem;font-weight:800}.resultBonuses.on{display:block}.tally{padding:6px 9px;border-radius:999px;border:1px solid #36425e;font-size:.65rem;font-weight:900}.tally.b{color:#76baff}.tally.a{color:#c794ff}.tally.s{color:#ffe08c}.tally.special{color:#ff9bd1}.resultCards{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.resultCard{position:relative;min-height:210px;padding:10px;border:1px solid #3b4867;border-radius:13px;background:linear-gradient(160deg,#14213a,#0a0f1d);overflow:hidden;animation:cardFly .52s cubic-bezier(.2,.85,.28,1) both;animation-delay:calc(var(--i)*55ms);transform:rotate(var(--tilt))}.resultCard.a{border-color:#7750a8;background:linear-gradient(160deg,#281b42,#0d0d1c)}.resultCard.s{border-color:#c58b31;background:linear-gradient(160deg,#3f2a14,#130f15);box-shadow:0 0 24px rgba(255,210,95,.09)}.resultCard.special{border-color:#a64b87;background:linear-gradient(160deg,#391b35,#130f1b)}@keyframes cardFly{from{opacity:0;transform:translateY(22px) rotate(var(--tilt)) scale(.94)}to{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}.cardArt{height:116px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 57%);font-size:2.3rem;font-weight:950}.cardRank{font-size:2rem;font-weight:1000;line-height:1;color:#62b7ff}.resultCard.a .cardRank{color:#c174ff}.resultCard.s .cardRank{color:#ffd360}.resultCard.special .cardRank{color:#ff76bd}.cardName{margin-top:3px;color:#cbd4e5;font-size:.67rem;font-weight:800}.newFlag{position:absolute;right:7px;top:7px;padding:3px 6px;border-radius:999px;background:#ffd25f;color:#26180a;font-size:.48rem;font-weight:1000}.closeHint{text-align:center;margin-top:12px;color:#70809b;font-size:.65rem}.toast{position:fixed;left:50%;bottom:25px;z-index:120;transform:translate(-50%,16px);opacity:0;padding:9px 13px;border:1px solid rgba(85,235,255,.4);border-radius:999px;background:#0a1120;color:#dffcff;font-size:.7rem;font-weight:850;box-shadow:0 18px 50px rgba(0,0,0,.55);pointer-events:none}.toast.on{animation:toastIn 1.8s ease both}@keyframes toastIn{15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@media(max-width:1180px){.planGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.planBtn{grid-column:span 2}.mainGrid{grid-template-columns:minmax(0,1fr)}.side{position:static}.bottomGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.wrap{padding:13px 9px 42px}.hero{padding:17px}.planGrid{grid-template-columns:1fr 1fr}.planBtn{grid-column:1/-1}.boardCard{padding:8px}.guaranteeStrip{grid-template-columns:1fr}.resultCards{grid-template-columns:repeat(2,1fr)}.resultCard{min-height:175px}.modelGrid{grid-template-columns:1fr 1fr}.pill{display:none}.boardViewport{border:1px solid #252f48;overflow:hidden}.board{min-width:0}.side{margin-top:0}}



.batchStrip{display:none;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:9px 11px;border:1px solid #2e3a58;border-radius:12px;background:#0a101c}
.batchStrip.on{display:flex}
.batchStrip .batchBadge{display:block;position:static;padding:0;border:0;background:none;
  font-size:.72rem;font-weight:950;letter-spacing:.06em;color:#dff4ff;white-space:nowrap}
.batchProgress{flex:1;height:6px;border:1px solid #2e3a58;border-radius:999px;background:#060a12;overflow:hidden}
.batchProgress>span{display:block;height:100%;width:0;transition:width .18s linear;
  background:linear-gradient(90deg,var(--cyan),var(--violet))}

.metric.live{padding:8px 10px;position:relative}
.metric.live:before{content:"EDIT";position:absolute;right:9px;top:8px;
  color:var(--cyan);font-size:.5rem;font-weight:900;letter-spacing:.12em;opacity:.65}
.metric.live input{width:100%;padding:6px 8px;border:1px solid #35435f;border-radius:8px;
  background:#060b15;outline:none;cursor:text;
  font-size:1.06rem;font-weight:900;font-family:inherit;color:var(--text);
  -moz-appearance:textfield;transition:border-color .18s,box-shadow .18s}
.metric.live input:hover{border-color:#4c5f83}
.metric.live input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(85,235,255,.18)}
.metric.live span{margin-top:5px}
.metric.live input::-webkit-outer-spin-button,
.metric.live input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.metric.live input:focus{color:var(--cyan)}
.metric.live{transition:border-color .18s}
.metric.live:focus-within{border-color:rgba(85,235,255,.5)}
.metric.live.drain b,.metric.live.drain input{animation:drainFlash .4s ease}
@keyframes drainFlash{0%{color:#ff9c55}100%{color:var(--text)}}

.costBox{margin-top:8px;padding:9px 11px;border:1px solid #2c3857;border-radius:12px;background:#0a101c}
.costRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0}
.costRow span{color:var(--muted);font-size:.63rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.costRow b{font-size:.82rem;font-weight:900;color:#dbe4f6;white-space:nowrap}
.costRow.total{margin-top:4px;padding-top:7px;border-top:1px solid #202a40}
.costRow.total b{color:var(--cyan)}
.costRow.short b{color:var(--red)}
.resourceRow{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.infBtn{border-color:rgba(174,120,255,.42);background:rgba(174,120,255,.08);color:#d9c8ff;
  font-size:.72rem;padding:8px 11px}
.infBtn.on{border-color:rgba(112,239,176,.6);background:rgba(112,239,176,.12);color:#b6f5d6}
.resourceHint{flex:1;min-width:150px;color:#7f8ca5;font-size:.63rem;line-height:1.35}
.metrics.unlimited .metric.live{opacity:.42}


/* ============================================================
   ROTATING NEON BORDER
   A conic gradient masked to the panel's edge, plus a brighter
   comet running the perimeter on a faster cycle.
   ============================================================ */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --ang2{syntax:'<angle>';initial-value:0deg;inherits:false}

.cityCore{border:0 !important;isolation:isolate}

/* the ring itself */
.cityCore:before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang),
    #55ebff 0deg,#4f9cff 55deg,#ae78ff 110deg,#ff64b8 170deg,
    #ff9c55 225deg,#ffd25f 275deg,#70efb0 320deg,#55ebff 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.85;
  animation:spinRing 7s linear infinite;
}

/* the travelling shine */
.cityCore:after{
  content:"";position:absolute;inset:-1px;border-radius:17px;padding:3px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang2),
    transparent 0deg,transparent 300deg,
    rgba(255,255,255,.35) 330deg,rgba(255,255,255,.98) 350deg,
    rgba(255,255,255,.35) 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:blur(.6px) drop-shadow(0 0 7px rgba(180,240,255,.85));
  animation:spinShine 3.4s linear infinite;
}

@keyframes spinRing{to{--ang:360deg}}
@keyframes spinShine{to{--ang2:360deg}}

/* Browsers without @property still get a static neon edge rather than nothing. */
@supports not (background:conic-gradient(from var(--ang),red,blue)){
  .cityCore:before{background:linear-gradient(120deg,#55ebff,#ae78ff,#ff64b8,#ffd25f,#70efb0);animation:none}
  .cityCore:after{display:none}
}

/* Keep the panel glowing softly in the board's colour language. */
.cityCore{box-shadow:0 0 34px rgba(85,235,255,.09),0 24px 60px rgba(0,0,0,.5)}

/* ============================================================
   S-CLASS TAKEOVER
   B-class results no longer interrupt at all. A gets a brief
   card. S takes over the board the way the client does.
   ============================================================ */
.sTakeover{position:absolute;inset:0;overflow:hidden;z-index:30;display:grid;place-items:center;pointer-events:none;
  opacity:0;background:radial-gradient(circle at center,rgba(70,44,8,.72),rgba(3,4,10,.97) 68%)}
.sTakeover.on{animation:sWrap 2.3s ease both}
@keyframes sWrap{0%{opacity:0}9%,80%{opacity:1}100%{opacity:0}}

.sRays{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    transparent 0 2deg,rgba(255,222,140,.85) 2deg 5deg,transparent 5deg 9deg,
    rgba(255,200,90,.4) 9deg 11deg,transparent 11deg 18deg);
  mask-image:radial-gradient(circle,rgba(0,0,0,.95) 8%,rgba(0,0,0,.55) 34%,transparent 64%);opacity:0}

/* Central bloom so the card sits in light rather than on a flat scrim. */
.sBloom{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,180,.55),rgba(255,196,80,.22) 34%,transparent 68%)}
.sTakeover.on .sBloom{animation:bloom 2.3s cubic-bezier(.16,.8,.3,1) both}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  24%{transform:translate(-50%,-50%) scale(.96)}
  80%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.sTakeover.on .sRays{animation:rays 2.3s cubic-bezier(.15,.7,.3,1) both}
@keyframes rays{0%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scale(.5)}
  16%{opacity:.85}70%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scale(1.12)}}

.sShock{position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(255,225,150,.9);transform:translate(-50%,-50%) scale(0);opacity:0}
.sTakeover.on .sShock{animation:shock .95s cubic-bezier(.15,.75,.25,1) both}
.sTakeover.on .sShock.d2{animation-delay:.13s}
.sTakeover.on .sShock.d3{animation-delay:.26s}
@keyframes shock{0%{opacity:.95;transform:translate(-50%,-50%) scale(.1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.4)}}

.cityCore{transition:opacity .3s ease,filter .3s ease}
.board.sTaken .cityCore{opacity:.08;filter:blur(3px)}
.sCard{position:relative;z-index:3;padding:24px 34px;text-align:center;
  border:1px solid rgba(255,210,95,.7);border-radius:20px;
  background:linear-gradient(165deg,rgba(60,40,12,.96),rgba(14,12,20,.97));
  box-shadow:0 0 70px rgba(255,210,95,.3),0 30px 90px rgba(0,0,0,.7)}
.sTakeover.on .sCard{animation:sCardIn 2.3s cubic-bezier(.2,.9,.28,1) both}
@keyframes sCardIn{0%{opacity:0;transform:scale(.62) translateY(14px)}
  12%{opacity:1;transform:scale(1.1)}
  22%{transform:scale(1)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}}

.sRank{font-size:4.4rem;font-weight:1000;line-height:.9;letter-spacing:-.06em;
  background:linear-gradient(180deg,#fff6d6,#ffd25f 55%,#e0993a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,210,95,.45))}
.sKicker{margin-top:2px;color:#ffe3a0;font-size:.62rem;font-weight:900;letter-spacing:.24em;text-transform:uppercase}
.sName{margin-top:8px;font-size:1.5rem;font-weight:950;letter-spacing:-.02em}
.sSource{margin-top:5px;color:#b6a687;font-size:.68rem;font-weight:700}

.sSpark{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9b4;
  box-shadow:0 0 10px rgba(255,210,95,.9);opacity:0}
.sTakeover.on .sSpark{animation:spark 1.5s ease-out both;animation-delay:calc(var(--s,0)*45ms)}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* A-class keeps a short, quieter beat. */
.rewardBurst.on{animation:burstWrap .78s ease both}

/* ============================================================
   3D DIE
   A flat square rotating in 2D reads as a spinning card. A real
   cube that tumbles and settles on a face reads as a dice roll.
   ============================================================ */
.dieStage{perspective:620px;width:66px;height:66px;display:grid;place-items:center}

.die3d{position:relative;width:52px;height:52px;transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.24,.72,.26,1);
  transform:rotateX(0deg) rotateY(0deg)}

.dFace{position:absolute;inset:0;display:grid;gap:4px;padding:8px;
  border-radius:11px;
  background:linear-gradient(150deg,#fbfcff,#c9d4ea);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -6px 12px rgba(90,110,150,.28);
  backface-visibility:hidden}

.dFace i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#3d5170,#11203c 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}

/* pip layouts */
.dFace.f1{grid-template-areas:". . ." ". a ." ". . ."}
.dFace.f1 i:nth-child(1){grid-area:a}
.dFace.f2{grid-template-areas:"a . ." ". . ." ". . b"}
.dFace.f2 i:nth-child(1){grid-area:a}.dFace.f2 i:nth-child(2){grid-area:b}
.dFace.f3{grid-template-areas:"a . ." ". b ." ". . c"}
.dFace.f3 i:nth-child(1){grid-area:a}.dFace.f3 i:nth-child(2){grid-area:b}.dFace.f3 i:nth-child(3){grid-area:c}
.dFace.f4,.dFace.f6{grid-template-columns:repeat(2,1fr)}
.dFace.f4{grid-template-rows:repeat(2,1fr);place-items:center;gap:10px}
.dFace.f6{grid-template-rows:repeat(3,1fr);place-items:center;gap:5px}
.dFace.f5{grid-template-areas:"a . b" ". c ." "d . e";place-items:center}
.dFace.f5 i:nth-child(1){grid-area:a}.dFace.f5 i:nth-child(2){grid-area:b}
.dFace.f5 i:nth-child(3){grid-area:c}.dFace.f5 i:nth-child(4){grid-area:d}
.dFace.f5 i:nth-child(5){grid-area:e}

.dFace.f1{transform:translateZ(26px)}
.dFace.f6{transform:rotateY(180deg) translateZ(26px)}
.dFace.f2{transform:rotateY(90deg) translateZ(26px)}
.dFace.f5{transform:rotateY(-90deg) translateZ(26px)}
.dFace.f3{transform:rotateX(90deg) translateZ(26px)}
.dFace.f4{transform:rotateX(-90deg) translateZ(26px)}

.dieStage.shake{animation:dieShake .5s ease-out}
@keyframes dieShake{0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}45%{transform:translate(3px,-2px)}
  70%{transform:translate(-2px,-1px)}}

/* ============================================================
   MOTION PASS v5
   Token hops rather than sliding, chests open, the bridge
   assembles tile by tile, and board modification sweeps the ring.
   ============================================================ */

/* Keep the full board inside its card. All route/tile geometry is percentage-based,
   so the simulator can scale down without creating a horizontal scrollbar. */
.board{min-width:0;max-width:100%}

/* --- token: transform-driven so hops can be composited --- */
.token{left:0;top:0;transition:none;will-change:transform}

.trailDot{position:absolute;z-index:8;width:9px;height:9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,100,184,.85),rgba(115,60,255,.25) 60%,transparent 72%);
  transform:translate(-50%,-50%);animation:trailFade .5s ease forwards}
@keyframes trailFade{from{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-50%) scale(.35)}}

/* --- landing states, coloured by what you actually hit --- */
.tile.landed{transform:translate(-50%,-50%) scale(1.13);z-index:7}
.tile.landed.landB{box-shadow:0 0 0 2px rgba(79,156,255,.2),0 0 30px rgba(79,156,255,.3)}
.tile.landed.landA{box-shadow:0 0 0 2px rgba(174,120,255,.24),0 0 34px rgba(174,120,255,.4)}
.tile.landed.landS{box-shadow:0 0 0 2px rgba(255,210,95,.34),0 0 46px rgba(255,210,95,.6)}
.tile.landed.landSpecial{box-shadow:0 0 0 2px rgba(255,100,184,.28),0 0 38px rgba(255,100,184,.45)}

/* Chests visibly open instead of only logging text. */
.tile.opening .ico{animation:chestPop .5s cubic-bezier(.2,.9,.25,1)}
@keyframes chestPop{0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.42) rotate(-9deg)}
  55%{transform:scale(.9) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}}

.tile.jackpot:after{content:"";position:absolute;inset:-4px;border-radius:9px;pointer-events:none;
  border:2px solid rgba(255,210,95,.9);opacity:0;animation:jackpotRing .8s ease-out}
@keyframes jackpotRing{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}

/* --- bridge assembles one plank at a time from the gate outward --- */
.tile.branch.visible{animation:branchPop .42s cubic-bezier(.2,.9,.25,1) both;
  animation-delay:calc(var(--i,0)*62ms)}
.tile.branch.visible:nth-of-type(2n){animation-delay:calc(var(--i,0)*62ms)}
@keyframes branchPop{from{opacity:0;transform:translate(-50%,-50%) scale(.34) rotate(-14deg)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(3deg)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}

.branchRoute.active{animation:bridgeDraw .82s cubic-bezier(.3,.85,.3,1) forwards}

/* --- board modification sweeps around the ring in index order --- */
.tile.boardUpgrade{animation:tileFlip .62s cubic-bezier(.22,.9,.28,1) both;
  animation-delay:calc(var(--k,0)*70ms)}
@keyframes tileFlip{0%{transform:translate(-50%,-50%) rotateY(0) scale(1)}
  46%{transform:translate(-50%,-50%) rotateY(88deg) scale(.86)}
  72%{transform:translate(-50%,-50%) rotateY(0) scale(1.16)}
  100%{transform:translate(-50%,-50%) rotateY(0) scale(1)}}

.board.sweeping:before{animation:ringSweep 1.1s ease-out}
@keyframes ringSweep{0%{opacity:.24}35%{opacity:.75}100%{opacity:.24}}

/* --- die: settle rather than spin at constant speed --- */

@keyframes tumble{0%{transform:rotate(0) scale(1)}
  22%{transform:rotate(128deg) scale(.84)}
  55%{transform:rotate(268deg) scale(1.1)}
  78%{transform:rotate(352deg) scale(.96)}
  100%{transform:rotate(360deg) scale(1)}}

.dieWrap.flash:after{content:"";position:absolute;inset:-18px;border-radius:50%;pointer-events:none;
  opacity:0;background:radial-gradient(circle,var(--flash,rgba(85,235,255,.5)),transparent 66%);
  animation:dieFlash .6s ease-out}
@keyframes dieFlash{0%{opacity:.75;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* --- tile labels: short codes instead of truncated words --- */
.tile small{font-size:.44rem;letter-spacing:.06em;color:#8f9cb6}
.tile.rankS small{color:#e2c489}
.tile.rankA small{color:#b79ae0}

/* --- history: newest row slides in --- */
.hist.fresh{animation:histIn .34s cubic-bezier(.2,.85,.28,1) both}
@keyframes histIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:translateX(0)}}

/* --- speed control --- */
.speedRow{display:flex;gap:5px}
.speedBtn{padding:6px 9px;border:1px solid #35415e;border-radius:8px;background:rgba(8,13,24,.9);
  color:#9fb0cc;font-size:.6rem;font-weight:900;letter-spacing:.06em;cursor:pointer;transition:.16s}
.speedBtn:hover{border-color:#536487;color:#dff4ff}
.speedBtn.on{border-color:rgba(85,235,255,.55);background:rgba(85,235,255,.12);color:#a9f8fc}


/* Grid children were sizing to the board's min-width and pushing the page wide. */
.mainGrid>*{min-width:0}
@media(max-width:1180px){.mainGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .cityCore{width:min(48%,360px);padding:11px}
  .coreSub{font-size:.64rem}
  .rollButtons .btn{padding:8px 10px}
}
@media(max-width:720px){.bottomGrid{grid-template-columns:minmax(0,1fr)}.boardTop{flex-wrap:wrap}.cityCore{width:min(54%,330px)}}

/* Mobile board fit: phones need more vertical room for the center dice controls.
   Desktop/tablet geometry above 520px is intentionally untouched. */
@media(max-width:520px){
  .board{aspect-ratio:1.24 / 1}
  .cityCore{
    width:min(58%,248px);
    max-height:calc(100% - 24px);
    padding:9px 9px 10px;
    top:50%;
  }
  .coreTitle{font-size:clamp(.98rem,5vw,1.35rem);line-height:1.06;margin:3px 0 2px}
  .coreSub{font-size:.58rem;line-height:1.25;max-width:205px}
  .dieWrap{margin:6px 0 5px;min-height:56px}
  .dieStage{width:56px;height:56px}
  .die3d{width:46px;height:46px}
  .dFace{padding:7px}
  .dFace i{width:7px;height:7px}
  .dFace.f1{transform:translateZ(23px)}
  .dFace.f6{transform:rotateY(180deg) translateZ(23px)}
  .dFace.f2{transform:rotateY(90deg) translateZ(23px)}
  .dFace.f5{transform:rotateY(-90deg) translateZ(23px)}
  .dFace.f3{transform:rotateX(90deg) translateZ(23px)}
  .dFace.f4{transform:rotateX(-90deg) translateZ(23px)}
  .rollButtons{gap:5px;max-width:100%}
  .rollButtons .btn{padding:7px 8px;font-size:.84rem}
  .rollButtons .btn small{font-size:.48rem;line-height:1.2}
  .batchBadge{padding:6px 8px;font-size:.62rem}
}

@media(max-width:400px){
  .board{aspect-ratio:1.18 / 1}
  .cityCore{width:min(60%,236px);padding:8px}
  .coreSub{max-width:190px}
  .rollButtons .btn{padding:6px 7px;font-size:.8rem}
}

/* V9.10 phone polish.
   These overrides only apply to phone widths, so desktop/tablet remain unchanged. */
@media(max-width:520px){
  /* Pull the full center console inward so the kicker and Reset button remain
     clearly inside the board frame rather than grazing its top/bottom edge. */
  .cityCore{
    transform:translate(-50%,-50%) scale(.92);
    transform-origin:center;
  }

  .coreKicker{
    font-size:.52rem;
    line-height:1.1;
    letter-spacing:.12em;
  }

  .rollButtons{
    gap:4px;
  }

  .rollButtons .btn{
    padding:6px 8px;
  }

  /* The player marker was visually larger than the surrounding board tiles. */
  .token{
    width:22px;
    height:22px;
    border-width:2px;
    box-shadow:
      0 0 0 2px rgba(255,100,184,.18),
      0 0 17px rgba(255,100,184,.68);
  }

  /* Free up horizontal room in the sticky site bar so Back to Tools does not
     dominate or wrap as aggressively on narrow iPhones. */
  .eu-topbar{
    gap:7px;
    padding-left:8px;
    padding-right:8px;
  }

  .eu-back{
    flex:0 0 auto;
    gap:5px;
    padding:6px 8px 6px 7px;
    font-size:.72rem;
    line-height:1.15;
    white-space:nowrap;
  }

  .eu-back svg{
    width:15px;
    height:15px;
    flex:0 0 auto;
  }

  .eu-brand{
    font-size:.7rem;
    letter-spacing:.13em;
    gap:4px;
  }

  .eu-yt{
    padding:6px 9px;
    font-size:.72rem;
    gap:5px;
  }
}

@media(max-width:400px){
  .cityCore{
    transform:translate(-50%,-50%) scale(.89);
  }

  .token{
    width:20px;
    height:20px;
  }

  .eu-topbar{
    gap:5px;
    padding-left:6px;
    padding-right:6px;
  }

  .eu-back{
    padding:5px 7px 5px 6px;
    font-size:.68rem;
  }

  .eu-brand{
    font-size:.65rem;
    letter-spacing:.11em;
  }

  .eu-yt{
    padding:5px 7px;
    font-size:.68rem;
  }
}

/* Keep the center controls from growing taller on the pre-roll message.
   The post-roll panel naturally settles at about this height, so reserving
   that space up front prevents the first state from spilling outside the board. */
@media(min-width:540px){
  .cityCore{
    height:clamp(285px,43vw,310px);
    max-height:none;
    overflow:hidden;
  }
}


/* ============================================================
   EUTOPIA PITY SIGNAL TIMELINE
   A sawtooth timeline that visualizes how character pity actually
   behaves: climb with each pull, hit the S, reset to zero, repeat.
   The trace is animated along its true SVG path length.
   ============================================================ */
.luckCard{
  grid-column:1 / -1;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 0,rgba(85,235,255,.07),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(255,100,184,.06),transparent 26%),
    linear-gradient(180deg,#111a2d,#0b1220)
}
.luckCard:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(#000,transparent 92%)
}

.luckHead{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px
}
.luckSignalTag{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;
  color:#9ff7ff;font-size:.52rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase
}
.luckSignalTag:before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 13px rgba(85,235,255,.85);
  animation:luckPulse 1.8s ease-in-out infinite
}
@keyframes luckPulse{50%{opacity:.35;box-shadow:0 0 4px rgba(85,235,255,.25)}}

.luckTools{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-left:auto}
.luckLegend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.lk{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);background:rgba(0,0,0,.25);
  color:var(--muted);font-size:.53rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase
}
.lk:before{content:"";width:7px;height:7px;border-radius:50%}
.lk.lucky:before{background:#6ee7a0}
.lk.normal:before{background:var(--cyan)}
.lk.deep:before{background:var(--gold)}
.lk.pity:before{background:var(--red)}

.luckReplay{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 10px;border:1px solid rgba(85,235,255,.24);border-radius:9px;
  background:rgba(85,235,255,.045);color:#9fc2d4;font-size:.58rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s background,.18s color
}
.luckReplay:hover{
  transform:translateY(-1px);border-color:rgba(85,235,255,.55);
  background:rgba(85,235,255,.1);color:#ddfbff
}
.luckReplay:active{transform:translateY(0) scale(.97)}

.luckChartWrap{
  position:relative;z-index:2;margin-top:12px;overflow:hidden;
  border:1px solid rgba(67,84,122,.72);border-radius:16px;
  background:
    linear-gradient(180deg,rgba(8,14,27,.96),rgba(6,10,19,.94)),
    radial-gradient(circle at 50% 100%,rgba(85,235,255,.05),transparent 45%)
}
.luckChartWrap:before{
  content:"";position:absolute;z-index:0;left:-20%;top:0;width:18%;height:100%;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(85,235,255,.07),transparent);
  transform:skewX(-16deg)
}
.luckChartWrap.animating:before{animation:luckScan 2.35s ease-out both}
@keyframes luckScan{
  0%{opacity:0;left:-20%}
  18%{opacity:1}
  82%{opacity:.65}
  100%{opacity:0;left:108%}
}

.luckSvg{position:relative;z-index:1;width:100%;height:auto;display:block;overflow:visible}
.luckSvg.hidden{display:none}
.luckEmpty{
  display:none;flex-direction:column;align-items:center;gap:5px;padding:46px 16px;text-align:center
}
.luckEmpty.on{display:flex}
.luckEmpty b{color:#cfdaf0;font-size:.86rem}
.luckEmpty span{color:var(--muted);font-size:.68rem}

/* plot atmosphere */
.lcZone{opacity:0;pointer-events:none}
.luckSvg.play .lcZone{animation:lcZoneIn .7s ease .05s forwards}
@keyframes lcZoneIn{to{opacity:1}}

.lcGrid{stroke:rgba(255,255,255,.05);stroke-width:1}
.lcAxisText{fill:#667592;font-size:10px;font-weight:800;letter-spacing:.06em}
.lcAxisTitle{fill:#5f718e;font-size:9px;font-weight:900;letter-spacing:.13em}
.lcZero{stroke:rgba(85,235,255,.34);stroke-width:1.45}
.lcZeroChip{pointer-events:none}
.lcZeroChip rect{fill:#07111f;stroke:rgba(85,235,255,.52);stroke-width:1;filter:drop-shadow(0 0 7px rgba(85,235,255,.16))}
.lcZeroChip text{fill:#89edf6;font-size:8.35px;font-weight:950;letter-spacing:.085em;pointer-events:none}
.lcAdaptiveNote{fill:#61728e;font-size:8.2px;font-weight:850;letter-spacing:.09em;paint-order:stroke;stroke:rgba(4,10,20,.96);stroke-width:3px}
.lcTimeAxis{stroke:rgba(111,133,170,.38);stroke-width:1}
.lcTimeTick{stroke:rgba(111,133,170,.5);stroke-width:1}
.lcTimeText{fill:#7e8da8;font-size:9.2px;font-weight:850;letter-spacing:.045em}
.lcTimeYear{fill:#5f718f;font-size:8px;font-weight:900;letter-spacing:.1em}
.lcAxisTitle{fill:#637491;font-size:8.7px;font-weight:900;letter-spacing:.13em}

.lcThresh{stroke-width:1.4;stroke-dasharray:5 5;opacity:0}
.lcThresh.mod{stroke:var(--gold)}
.lcThresh.hard{stroke:var(--red)}
.lcThreshText{font-size:9px;font-weight:900;letter-spacing:.09em;opacity:0}
.lcThreshText.mod{fill:var(--gold)}
.lcThreshText.hard{fill:var(--red)}
.luckSvg.play .lcThresh,.luckSvg.play .lcThreshText{animation:lcFade .5s ease .12s forwards}

.lcAvg{stroke:var(--violet);stroke-width:1.25;stroke-dasharray:2 6;opacity:0}
.lcAvgText{fill:#bd9fff;font-size:9px;font-weight:900;letter-spacing:.08em;opacity:0}
.luckSvg.play .lcAvg,.luckSvg.play .lcAvgText{animation:lcFade .55s ease var(--avgDelay,2050ms) forwards}
@keyframes lcFade{to{opacity:.86}}

.lcRampFill{pointer-events:none;opacity:0}
.luckSvg.play .lcRampFill{animation:lcArea 1s ease-out .55s forwards}
@keyframes lcArea{to{opacity:.84}}

.lcRamp{
  fill:none;stroke:url(#lcStroke);stroke-width:2.7;stroke-linejoin:round;stroke-linecap:round;
  pointer-events:none;filter:drop-shadow(0 0 7px rgba(85,235,255,.34))
}

/* bright tracer physically follows the line while it draws */
.lcTracer{opacity:0;pointer-events:none;filter:drop-shadow(0 0 9px rgba(255,255,255,.9))}
.lcTracerCore{fill:#fff}
.lcTracerHalo{fill:rgba(85,235,255,.18);stroke:rgba(85,235,255,.7);stroke-width:1.5}

/* S events arrive exactly when the line reaches their peak */
.lcHit{fill:transparent;cursor:pointer}
.lcRing{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.luckSvg.play .lcRing{animation:lcRing .86s ease-out both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes lcRing{
  0%{opacity:.95;transform:scale(.35)}
  100%{opacity:0;transform:scale(3)}
}
.lcPoint{
  opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none;
  transition:filter .18s ease
}
.luckSvg.play .lcPoint{
  animation:lcDrop .54s cubic-bezier(.15,.9,.26,1) both;
  animation-delay:calc(var(--d,0) * 1ms)
}
@keyframes lcDrop{
  0%{opacity:0;transform:translateY(-14px) scale(.25)}
  58%{opacity:1;transform:translateY(2px) scale(1.28)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.lcPoint.manual{fill:#09101d!important;stroke-dasharray:2.2 1.8}

.lcReset{
  opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none
}
.luckSvg.play .lcReset{
  animation:lcReset .42s cubic-bezier(.2,.85,.3,1) both;
  animation-delay:calc((var(--d,0) + 110) * 1ms)
}
@keyframes lcReset{
  0%{opacity:0;transform:scale(.2) rotate(0)}
  65%{opacity:1;transform:scale(1.35) rotate(45deg)}
  100%{opacity:.88;transform:scale(1) rotate(45deg)}
}

.lcLabel{
  opacity:0;font-size:11px;font-weight:950;letter-spacing:.02em;
  text-anchor:middle;pointer-events:none
}
.luckSvg.play .lcLabel{
  animation:lcFadeUp .42s ease both;
  animation-delay:calc((var(--d,0) + 155) * 1ms)
}
@keyframes lcFadeUp{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:.96;transform:translateY(0)}
}
.lcName{
  opacity:0;fill:#8fa0ba;font-size:8.35px;font-weight:850;letter-spacing:.03em;
  text-anchor:middle;pointer-events:none
}
.lcLabel,.lcName,.lcNowText,.lcAvgText,.lcThreshText,.lcTimeText,.lcTimeYear{
  paint-order:stroke;stroke:rgba(4,10,20,.96);stroke-width:3.6px;stroke-linejoin:round
}
.luckSvg.play .lcName{
  animation:lcFadeUp .42s ease both;
  animation-delay:calc((var(--d,0) + 225) * 1ms)
}

.lcHit:hover + .lcRing + .lcPoint,
.lcHit:focus-visible + .lcRing + .lcPoint{
  filter:drop-shadow(0 0 14px currentColor)
}

/* live run continues after the last completed S */
.lcNow{
  fill:none;stroke:var(--cyan);stroke-width:2.25;stroke-dasharray:4 5;
  stroke-linecap:round;pointer-events:none;opacity:0
}
.luckSvg.play .lcNow{animation:lcFade .45s ease var(--nowDelay,1950ms) forwards}
.lcNowDot{
  opacity:0;pointer-events:auto;cursor:pointer;transform-box:fill-box;transform-origin:center
}
.luckSvg.play .lcNowDot{
  animation:lcDrop .55s cubic-bezier(.2,.9,.28,1) var(--nowDelay,1950ms) both
}
.lcNowPulse{
  transform-box:fill-box;transform-origin:center;opacity:0;pointer-events:none
}
.luckSvg.play .lcNowPulse{
  animation:nowPulse 2.35s ease-out var(--nowDelay,1950ms) infinite
}
@keyframes nowPulse{
  0%{opacity:.72;transform:scale(.55)}
  100%{opacity:0;transform:scale(2.75)}
}
.lcNowText{
  opacity:0;fill:var(--cyan);font-size:9px;font-weight:950;letter-spacing:.09em;
  text-anchor:middle;pointer-events:none
}
.luckSvg.play .lcNowText{
  animation:lcFadeUp .45s ease calc(var(--nowDelay,1950ms) + 170ms) both
}

/* tooltip */
.luckTip{
  position:absolute;z-index:8;pointer-events:none;padding:8px 10px;border-radius:10px;
  border:1px solid #354360;background:rgba(5,10,20,.98);
  box-shadow:0 14px 34px rgba(0,0,0,.68);
  opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.94);
  transform-origin:50% 100%;
  transition:opacity .16s,transform .16s
}
.luckTip.on{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1)}
/* High-pity points sit close to the chart ceiling. Flip their tooltip below the
   point instead of letting the date card climb outside the timeline frame. */
.luckTip.below{transform:translate(-50%,12px) scale(.94);transform-origin:50% 0}
.luckTip.below.on{transform:translate(-50%,12px) scale(1)}
.luckTip b{display:block;color:#eaf3ff;font-size:.74rem}
.luckTip span{display:block;margin-top:2px;color:var(--muted);font-size:.6rem}
.luckTip em{font-style:normal;font-weight:900}

/* current-run action card */
.lcNowCard{
  position:absolute;z-index:9;width:190px;padding:10px 11px;border-radius:12px;
  border:1px solid rgba(85,235,255,.42);background:rgba(5,11,22,.98);
  box-shadow:0 15px 38px rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transform:translate(-50%,-118%) scale(.94);transition:opacity .16s,transform .16s
}
.lcNowCard.on{opacity:1;pointer-events:auto;transform:translate(-50%,-124%) scale(1)}
.lcNowCard b{display:block;color:#eafaff;font-size:.76rem}
.lcNowCard span{display:block;margin-top:2px;color:#8fa0ba;font-size:.58rem}
.lcNowCard button{
  margin-top:8px;width:100%;padding:7px 8px;border-radius:8px;
  border:1px solid rgba(85,235,255,.4);background:rgba(85,235,255,.09);
  color:#d2faff;font-size:.58rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer
}
.lcNowCard button:hover{background:rgba(85,235,255,.16)}

.lcWarn{
  margin-top:9px;padding:8px 10px;border:1px solid rgba(255,109,132,.4);border-radius:10px;
  background:rgba(255,109,132,.07);color:#ffc3ce;font-size:.63rem;line-height:1.45
}
.lcWarn b{color:#ff97a8}
.lcTimelineNote{margin-top:8px;color:#71829e;font-size:.58rem;line-height:1.45}
.lcTimelineNote b{color:#9db0cc}

.luckSummary{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:12px
}
.luckSummary div{
  padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.22)
}
.luckSummary b{display:block;font-size:1.02rem;font-weight:900;color:#e9f2ff}
.luckSummary span{
  display:block;margin-top:2px;color:var(--muted);font-size:.55rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase
}
.luckSummary .good b{color:#6ee7a0}
.luckSummary .warn b{color:var(--gold)}
.luckSummary .live b{color:var(--cyan)}

@media(max-width:720px){
  .luckHead{gap:9px}
  .luckTools{width:100%;flex-direction:row;align-items:center;justify-content:space-between;margin-left:0}
  .luckLegend{justify-content:flex-start;gap:4px}
  .lk{font-size:.47rem;padding:2px 5px}
  /* Hiding names on phones removed the one thing that identifies each peak.
     Rotating them keeps every label readable in the same width. */
  .lcName{font-size:11px;letter-spacing:0}
  .luckSummary{grid-template-columns:repeat(3,1fr)}
  .luckSummary div{padding:8px}
  .luckChartWrap{border-radius:13px}
}
@media(max-width:430px){
  .luckLegend .lk:nth-child(2){display:none}
  .luckReplay{padding:5px 8px;font-size:.53rem}
  .luckSummary{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .luckSignalTag:before{animation:none}
  .luckSvg.play .lcZone,.luckSvg.play .lcThresh,.luckSvg.play .lcThreshText,
  .luckSvg.play .lcAvg,.luckSvg.play .lcAvgText,.luckSvg.play .lcRampFill,
  .luckSvg.play .lcPoint,.luckSvg.play .lcReset,.luckSvg.play .lcLabel,
  .luckSvg.play .lcName,.luckSvg.play .lcNow,.luckSvg.play .lcNowDot,
  .luckSvg.play .lcNowText{animation:none;opacity:.92}
  .luckSvg.play .lcRing,.luckSvg.play .lcNowPulse,.lcTracer{display:none}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

  /* ---- shared EUTOPIA Tools top bar ---- */
  .eu-topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:52px;padding:0 clamp(13px,3vw,22px);
    border-bottom:1px solid rgba(168,120,255,.18);
    background:rgba(10,4,22,.88);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    font-family:"Inter","Segoe UI",system-ui,sans-serif;
  }
  .eu-topbar a{text-decoration:none;}
  .eu-back{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 13px 7px 10px;
    border:1px solid rgba(168,120,255,.18);
    border-radius:9px;background:rgba(255,255,255,.025);
    color:#E8DFF5;font-size:.85rem;font-weight:650;
    transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s;
  }
  .eu-back:hover{
    color:#F6F1FF;background:rgba(255,91,225,.08);
    border-color:rgba(255,91,225,.34);
    box-shadow:0 0 16px rgba(157,92,255,.12);
    transform:translateY(-1px);
  }
  .eu-back svg{transition:transform .25s var(--ease);}
  .eu-back:hover svg{transform:translateX(-3px);}
  .eu-brand{
    display:flex;align-items:baseline;gap:6px;
    font-family:"Archivo","Segoe UI",system-ui,sans-serif;
    font-weight:800;font-size:.78rem;letter-spacing:.16em;
  }
  .eu-brand span{color:#F6F1FF;}
  .eu-brand em{
    font-style:normal;
    background:linear-gradient(100deg,#FF5BE1,#9D5CFF 45%,#4CA8FF 78%,#45E5F0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .eu-yt{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 13px;border-radius:9px;
    border:1px solid rgba(255,120,235,.34);
    background:linear-gradient(180deg,rgba(255,91,225,.16),rgba(157,92,255,.09));
    color:#F6F1FF;font-size:.8rem;font-weight:600;
    transition:box-shadow .25s,border-color .25s,transform .25s var(--ease);
  }
  .eu-yt:hover{transform:translateY(-1px);border-color:#FF5BE1;box-shadow:0 0 20px rgba(255,91,225,.34);}

  .wrap{
    width:min(1050px,100%);
    margin:0 auto;
    padding:34px 18px 72px;
  }

/* ============================================================
   NTE TOOL: BOARD / TRACKER / INSIGHTS
   ============================================================ */
.labTabs{
  position:sticky;top:62px;z-index:48;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
  margin:14px 0;padding:6px;border:1px solid var(--line);border-radius:15px;
  background:rgba(8,12,23,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 38px rgba(0,0,0,.26)
}
.labTabs:before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(85,235,255,.4),rgba(174,120,255,.4),rgba(255,100,184,.35),transparent);
}

/* One indicator slides between the tabs, so the active section is obvious at
   a glance and the movement shows which direction you travelled. */
.labGlider{
  position:absolute;top:6px;left:6px;height:calc(100% - 12px);
  width:calc((100% - 12px - 14px) / 3);
  border-radius:11px;pointer-events:none;z-index:0;
  border:1px solid rgba(85,235,255,.42);
  background:linear-gradient(135deg,rgba(85,235,255,.15),rgba(174,120,255,.13) 55%,rgba(255,100,184,.1));
  box-shadow:0 0 22px rgba(85,235,255,.14),inset 0 1px rgba(255,255,255,.08);
  transition:transform .34s cubic-bezier(.22,.9,.28,1);
}
.labGlider:after{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#55ebff,#ae78ff,#ff64b8,transparent);
  box-shadow:0 0 10px rgba(85,235,255,.7);
}

.labTab{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:7px 12px;
  border:1px solid transparent;border-radius:11px;background:transparent;
  color:#8fa0bd;font-weight:900;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:color .2s,transform .2s cubic-bezier(.22,.9,.28,1)
}
.labTab .labText{display:block;text-align:left;line-height:1.15}
.labIcon{width:19px;height:19px;flex:0 0 auto;opacity:.6;transition:opacity .2s,transform .28s cubic-bezier(.22,.9,.28,1)}
.labTab:hover{color:#dce7f8}
.labTab:hover .labIcon{opacity:.9}
.labTab:hover:not(.active){transform:translateY(-1px)}
.labTab.active{color:#f2ffff}
.labTab.active .labIcon{opacity:1;transform:scale(1.08)}
.labTab.active small{color:#a9c6e6}

/* A live figure on each tab gives the reader a reason to look at it. */
.labBadge{
  min-width:20px;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(85,235,255,.28);background:rgba(85,235,255,.08);
  color:#a9f0ff;font-size:.56rem;font-weight:900;letter-spacing:.04em;
  opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s cubic-bezier(.22,.9,.28,1)
}
.labBadge.on{opacity:1;transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .luckSvg.play .lcThresh,.luckSvg.play .lcThreshText,.luckSvg.play .lcAvg,
  .luckSvg.play .lcAvgText,.luckSvg.play .lcArea,.luckSvg.play .lcPoint,
  .luckSvg.play .lcLabel,.luckSvg.play .lcName{animation:none;opacity:.9}
  .luckSvg.play .lcRing{display:none}
}

@media(prefers-reduced-motion:reduce){.labGlider{transition:none}}
.labTab small{display:block;margin-top:2px;color:#73839f;font-size:.52rem;letter-spacing:.03em;text-transform:none}
.labTab.active small{color:#96b8ca}
.labView{display:none}
.labView.active{display:block}
.labView[hidden]{display:none!important}

.viewIntro{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:13px 0 10px;padding:2px 2px 0
}
.viewIntro h2{margin:0;font-size:1.12rem;letter-spacing:-.02em}
.viewIntro p{margin:3px 0 0;color:var(--muted);font-size:.75rem;max-width:780px}
.localBadge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(112,239,176,.34);
  border-radius:999px;background:rgba(112,239,176,.055);color:#baf8d9;
  font-size:.65rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase
}
.localBadge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(112,239,176,.7)}

.trackerGrid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(290px,.58fr);gap:14px;align-items:start}
.trackerCard{padding:15px}
.trackerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.trackerHead h3{margin:0;font-size:1rem}
.trackerHead p{margin:3px 0 0;color:var(--muted);font-size:.72rem}
.poolTabs{display:flex;gap:6px;flex-wrap:wrap}
.poolTab{
  border:1px solid #33415f;border-radius:999px;background:#0a101c;color:#93a2bd;
  padding:7px 10px;font-size:.63rem;font-weight:900;cursor:pointer
}
.poolTab.on{color:#dffcff;border-color:rgba(85,235,255,.48);background:rgba(85,235,255,.08)}
.poolTab[data-pool="Arc_MiracleBox"].on{color:#e1d2ff;border-color:rgba(174,120,255,.48);background:rgba(174,120,255,.08)}
.poolTab[data-pool="Lottery_Permanent"].on{color:#ffe4a1;border-color:rgba(255,210,95,.48);background:rgba(255,210,95,.075)}

.currentPanel{
  margin-top:12px;padding:14px;border:1px solid #31405f;border-radius:15px;
  background:radial-gradient(circle at 92% 8%,rgba(85,235,255,.08),transparent 28%),#0a101c
}
.currentTop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.currentTitle b{display:block;font-size:1.04rem}
.currentTitle span{display:block;margin-top:2px;color:var(--muted);font-size:.67rem}
.pityHero{display:flex;align-items:baseline;gap:5px}
.pityHero b{font:900 clamp(2rem,5vw,3.1rem)/.95 Archivo,Inter,sans-serif;letter-spacing:-.06em}
.pityHero span{color:#7887a3;font-size:.82rem;font-weight:850}
.thresholdTrack{
  position:relative;height:12px;margin-top:13px;border:1px solid #2e3a58;border-radius:999px;
  background:#050911;overflow:visible
}
.thresholdFill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));transition:.25s}
.thresholdMark{position:absolute;top:-5px;width:2px;height:20px;background:#ffd25f;box-shadow:0 0 8px rgba(255,210,95,.5)}
.thresholdMark span{position:absolute;top:21px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#9b8e6b;font-size:.5rem;font-weight:850}
.currentStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:27px}
.statMini{padding:10px;border:1px solid #26334f;border-radius:11px;background:rgba(6,11,21,.68)}
.statMini b{display:block;font-size:1rem}
.statMini span{display:block;margin-top:2px;color:#7f8ca5;font-size:.57rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.boardTransfer{
  margin-top:10px;width:100%;padding:11px 13px;border:1px solid rgba(85,235,255,.48);border-radius:11px;
  background:linear-gradient(135deg,rgba(85,235,255,.16),rgba(174,120,255,.13));
  color:#e9ffff;font-weight:900;cursor:pointer
}
.boardTransfer:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(85,235,255,.12)}


.manualBox{margin-top:10px;padding:13px;border:1px solid #2c3857;border-radius:15px;background:#0a101c}
.manualRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px}
.manualBox label{display:block;margin-bottom:4px;color:#7f8ca5;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.manualBox select,.manualBox input{
  width:100%;padding:9px 10px;border:1px solid #31405f;border-radius:9px;background:#070c16;outline:none
}
.manualActions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:9px}
.miniAction{
  border:1px solid #33415e;border-radius:9px;background:#0c1322;padding:8px 6px;
  color:#c9d3e5;font-size:.62rem;font-weight:900;cursor:pointer
}
.miniAction:hover{border-color:#566887}.miniAction.s{color:#ffe39c;border-color:rgba(255,210,95,.4)}
.miniAction.a{color:#d5b7ff;border-color:rgba(174,120,255,.4)}
.miniAction.undo{color:#ffafbb}
.manualHint{margin:7px 0 0;color:#71809a;font-size:.58rem;line-height:1.4}

.dataTools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.dataBtn{
  border:1px solid #33415e;border-radius:9px;background:#0b1220;padding:9px 8px;color:#9eacc4;
  font-size:.61rem;font-weight:850;cursor:pointer;text-align:center
}
.dataBtn:hover{color:#e3edfb;border-color:#52627f}.dataBtn.danger{color:#ff9cab;border-color:rgba(255,109,132,.28)}
.dataBtn input{display:none}

.historyCard{margin-top:14px;padding:15px}
.historyTools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.historyTools input,.historyTools select{
  padding:9px 10px;border:1px solid #303c5b;border-radius:9px;background:#090e1a;outline:none
}
.historyTools input{flex:1;min-width:190px}.historyTools select{min-width:145px}
.historyWrap{overflow:auto;border:1px solid #26324c;border-radius:12px}
.pullTable{width:100%;min-width:720px;border-collapse:collapse;font-size:.67rem}
.pullTable th{
  position:sticky;top:0;z-index:1;padding:9px 10px;text-align:left;background:#0c1322;color:#75849e;
  font-size:.55rem;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid #2a3651
}
.pullTable td{padding:9px 10px;border-bottom:1px solid #1f2940;color:#b9c4d7;vertical-align:middle}
.pullTable tr:last-child td{border-bottom:0}.pullTable tr.sRow td{background:rgba(255,210,95,.025)}
.rankChip{display:inline-grid;place-items:center;min-width:25px;height:22px;padding:0 6px;border-radius:7px;border:1px solid #3a4764;font-weight:950}
.rankChip.S{color:#ffe08d;border-color:rgba(255,210,95,.45);background:rgba(255,210,95,.06)}
.rankChip.A{color:#d1afff;border-color:rgba(174,120,255,.45);background:rgba(174,120,255,.06)}
.rankChip.B{color:#83c1ff;border-color:rgba(79,156,255,.42);background:rgba(79,156,255,.055)}
.bonusChip{color:#c8d1e1;font-size:.58rem}
.removePull{border:0;background:none;color:#687792;cursor:pointer;font-size:.6rem}.removePull:hover{color:#ff9cab}
.tableFoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;color:#77859e;font-size:.6rem}
.historyPager{
  display:grid;grid-template-columns:minmax(92px,1fr) auto minmax(92px,1fr);
  align-items:center;gap:8px;margin-top:10px
}
.historyPager[hidden]{display:none}
.historyPageBtn{
  min-height:36px;padding:8px 11px;border:1px solid #33415e;border-radius:10px;
  background:#0b1220;color:#c8d4e8;font-size:.66rem;font-weight:900;
  cursor:pointer;transition:border-color .18s,background .18s,color .18s,transform .18s
}
.historyPageBtn:first-child{justify-self:start}
.historyPageBtn:last-child{justify-self:end}
.historyPageBtn:hover:not(:disabled){
  transform:translateY(-1px);border-color:rgba(85,235,255,.48);
  background:rgba(85,235,255,.07);color:#eaffff
}
.historyPageBtn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.historyPageRead{
  min-width:112px;text-align:center;color:#9aabc5;font-size:.63rem;
  font-weight:850;letter-spacing:.035em;white-space:nowrap
}
@media(max-width:520px){
  .historyPager{grid-template-columns:1fr auto 1fr;gap:6px}
  .historyPageBtn{min-width:0;min-height:34px;padding:7px 9px;font-size:.61rem}
  .historyPageRead{min-width:92px;font-size:.58rem}
}


.insightGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.insightCard{padding:15px}
.insightCard h3{margin:0;font-size:.92rem}.insightCard>p{margin:4px 0 0;color:#7f8ca5;font-size:.66rem}
.bigStatGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}
.bigStat{padding:12px;border:1px solid #2b3855;border-radius:12px;background:#0a101c}
.bigStat b{display:block;font-size:1.18rem}.bigStat span{display:block;color:#7d8ba4;font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.distList,.dayBars,.sTimeline{display:grid;gap:8px;margin-top:12px}
.distRow{display:grid;grid-template-columns:62px minmax(0,1fr) 30px;gap:9px;align-items:center;font-size:.63rem}
.distRow span:first-child{color:#98a6bc;font-weight:850}.distBar{height:8px;border-radius:999px;background:#070b13;overflow:hidden;border:1px solid #26324a}
.distBar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.distRow.mod .distBar i{background:linear-gradient(90deg,var(--orange),var(--gold))}
.dayRow{display:grid;grid-template-columns:78px minmax(0,1fr) 28px;gap:8px;align-items:center;font-size:.6rem;color:#8896ae}
.dayBar{height:7px;border-radius:999px;background:#070b13;border:1px solid #26324a;overflow:hidden}.dayBar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--pink))}
.sHit{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid #2a3651;border-radius:10px;background:#0a101c}
.sHit .sOrb{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#3b2608;background:linear-gradient(145deg,#fff0b3,#ffd25f);font-weight:1000}
.sHit b{display:block;font-size:.72rem}.sHit span{display:block;margin-top:2px;color:#7f8ca5;font-size:.58rem}.sHitPity{color:#ffe29a;font-weight:950;font-size:.72rem}
.emptyState{padding:26px 12px;text-align:center;color:#73819a;font-size:.7rem;border:1px dashed #2a3650;border-radius:12px;margin-top:11px}
.qualityNote{margin-top:11px;padding:10px 11px;border:1px solid rgba(255,210,95,.24);border-radius:11px;background:rgba(255,210,95,.04);color:#aa9f85;font-size:.62rem;line-height:1.45}
.qualityNote b{color:#ffe2a0}

.batchEditor{position:fixed;inset:0;z-index:130;display:none;place-items:center;padding:18px;background:rgba(3,5,11,.9);backdrop-filter:blur(10px)}
.batchEditor.on{display:grid}
.batchEditorPanel{width:min(720px,100%);max-height:90vh;overflow:auto;padding:16px;border:1px solid #3a4867;border-radius:18px;background:#0d1424;box-shadow:0 35px 100px rgba(0,0,0,.7)}
.batchEditorHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.batchEditorHead h3{margin:0}.batchEditorHead p{margin:3px 0 0;color:#7f8ca5;font-size:.65rem}
.batchRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
.batchRow{display:grid;grid-template-columns:28px 74px minmax(0,1fr);gap:7px;align-items:center;padding:7px;border:1px solid #283550;border-radius:10px;background:#090f1b}
.batchRow b{color:#71819c;font-size:.6rem}.batchRow select,.batchRow input{width:100%;padding:7px 8px;border:1px solid #31405d;border-radius:8px;background:#060b14;font-size:.64rem;outline:none}
.batchEditorActions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}

@media(max-width:900px){
  .trackerGrid,.insightGrid{grid-template-columns:1fr}
  .currentStats{grid-template-columns:1fr 1fr}
  .manualActions{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .labTabs{top:57px;gap:4px;padding:5px}
  .labTab{font-size:.58rem;min-height:50px;gap:4px;padding:6px 4px;flex-direction:column;justify-content:center}
  .labTab small{display:none}
  .labIcon{width:17px;height:17px}
  .labGlider{width:calc((100% - 10px - 8px) / 3);top:5px;left:5px;height:calc(100% - 10px)}
  .labBadge{position:absolute;top:2px;right:4px;padding:1px 5px;font-size:.48rem;min-width:0}
  .currentStats,.bigStatGrid{grid-template-columns:1fr 1fr}
  .manualRow{grid-template-columns:1fr}
  .manualActions{grid-template-columns:1fr 1fr}
  .batchRows{grid-template-columns:1fr}
  .trackerCard,.historyCard,.insightCard{padding:11px}
}


/* ============================================================
   V9 TRACKER REVAMP
   Simple first: exact current pity -> +1 / +10 -> simulator.
   ============================================================ */
.trackerGrid.v9{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)}
.seedCard{
  margin-top:12px;padding:16px;border:1px solid rgba(85,235,255,.3);border-radius:15px;
  background:radial-gradient(circle at 90% 0,rgba(85,235,255,.08),transparent 32%),#0a101c
}
.seedCard[hidden]{display:none!important}
.seedKicker{color:var(--cyan);font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.seedCard h3{margin:4px 0 4px;font-size:1.02rem}
.seedCard>p{margin:0;color:#8d9bb3;font-size:.68rem;line-height:1.5;max-width:720px}
.seedGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.seedField label{display:block;margin-bottom:4px;color:#8b99b2;font-size:.59rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.seedInputWrap{display:flex;align-items:center;border:1px solid #34425f;border-radius:10px;background:#060b15;overflow:hidden}
.seedInputWrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,235,255,.08)}
.seedInputWrap input{width:100%;padding:11px;border:0;background:transparent;outline:none;font-size:1.04rem;font-weight:900}
.seedInputWrap span{padding:0 11px;color:#74839e;font-size:.7rem;font-weight:850;white-space:nowrap}
.seedActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.seedPrimary{
  border:1px solid rgba(85,235,255,.48);border-radius:10px;padding:10px 14px;
  background:linear-gradient(135deg,rgba(85,235,255,.17),rgba(174,120,255,.14));
  color:#e9ffff;font-weight:900;cursor:pointer
}
.seedSecondary{
  border:1px solid #34415d;border-radius:10px;padding:10px 12px;background:#0b1220;
  color:#9eacc4;font-weight:850;cursor:pointer
}
.seedNote{margin-top:9px;color:#72809a;font-size:.59rem;line-height:1.45}
.seedNote b{color:#baf8d9}

.trkLive[hidden]{display:none!important}
.liveStatusLine{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.statePill{
  padding:5px 8px;border:1px solid #34415d;border-radius:999px;background:#080e19;
  color:#91a0b8;font-size:.58rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase
}
.statePill.modified{color:#ffe1a0;border-color:rgba(255,210,95,.4);background:rgba(255,210,95,.06)}
.statePill.ready{color:#baf8d9;border-color:rgba(112,239,176,.34);background:rgba(112,239,176,.05)}
.trackActions{display:grid;grid-template-columns:1.25fr 1.25fr .8fr;gap:7px;margin-top:11px}
.trackAction{
  min-height:43px;border:1px solid #35415e;border-radius:10px;background:#0c1322;
  color:#cdd7e8;font-weight:900;cursor:pointer;transition:.16s
}
.trackAction:hover:not(:disabled){transform:translateY(-1px);border-color:#566887}
.trackAction.primary{border-color:rgba(85,235,255,.44);background:linear-gradient(135deg,rgba(85,235,255,.14),rgba(174,120,255,.11));color:#e8ffff}
.trackAction.undo{color:#ffafbb}
.trackAction:disabled{opacity:.42;cursor:not-allowed}
.trackHint{margin:7px 1px 0;color:#72809a;font-size:.59rem;line-height:1.45}

.trackerOptions,.dataOptions{
  margin-top:10px;border:1px solid #2c3857;border-radius:12px;background:#080e19;overflow:hidden
}
.trackerOptions summary,.dataOptions summary{
  list-style:none;padding:10px 12px;cursor:pointer;color:#aebbd0;font-size:.65rem;font-weight:850
}
.trackerOptions summary::-webkit-details-marker,.dataOptions summary::-webkit-details-marker{display:none}
.trackerOptions summary:after,.dataOptions summary:after{content:"+";float:right;color:#6f809c;font-size:.85rem}
.trackerOptions[open] summary:after,.dataOptions[open] summary:after{content:"-"}
.optionsBody{padding:0 11px 11px;border-top:1px solid #202a40}
.optionsBody p{margin:9px 0 8px;color:#78869f;font-size:.59rem;line-height:1.45}
.rareGrid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}
.rareGrid input{
  width:100%;padding:9px 10px;border:1px solid #31405f;border-radius:9px;background:#060b15;outline:none
}
.rareBtn{
  border:1px solid #35415e;border-radius:9px;background:#0c1322;padding:8px 10px;
  color:#c9d3e5;font-size:.61rem;font-weight:900;cursor:pointer
}
.rareBtn.a{color:#d5b7ff;border-color:rgba(174,120,255,.4)}
.rareBtn.sother{border-color:rgba(255,210,95,.34);color:#f0dca6;background:rgba(255,210,95,.05)}
.rareBtn small{display:block;margin-top:2px;font-size:.5rem;font-weight:800;letter-spacing:.04em;opacity:.75;text-transform:none}
.rareBtn.s{color:#ffe39c;border-color:rgba(255,210,95,.4)}

.guideCard{padding:14px}
.guideCard h3{margin:0;font-size:.9rem}
.guideSteps{display:grid;gap:8px;margin-top:10px}
.guideStep{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:start}
.guideNo{
  display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(85,235,255,.3);
  border-radius:8px;background:rgba(85,235,255,.05);color:#9cefff;font-size:.62rem;font-weight:950
}
.guideStep b{display:block;font-size:.66rem}.guideStep span{display:block;margin-top:2px;color:#7d8ba4;font-size:.59rem;line-height:1.4}
.partnerNote{
  margin-top:11px;padding:10px;border:1px solid rgba(174,120,255,.25);border-radius:11px;
  background:rgba(174,120,255,.04);color:#9f93b8;font-size:.59rem;line-height:1.45
}
.partnerNote b{color:#d9c8ff}

.trackerHistoryFold{margin-top:14px;padding:0;overflow:hidden}
.trackerHistoryFold>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 15px;cursor:pointer;font-weight:900;color:#dbe5f5
}
.trackerHistoryFold>summary::-webkit-details-marker{display:none}
.trackerHistoryFold>summary:after{content:"View";color:#79dff3;font-size:.6rem;font-weight:900}
.trackerHistoryFold[open]>summary:after{content:"Hide"}
.trackerHistoryInner{padding:0 15px 15px;border-top:1px solid #26324c}
.historyTools.v9{margin-top:11px}
.pullTable.v9{min-width:620px}

.insightCard.wide{grid-column:1/-1}
.pastSForm{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;margin-top:11px}
.pastSForm input{
  width:100%;padding:9px 10px;border:1px solid #31405f;border-radius:9px;background:#070c16;outline:none
}
.pastSList{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.pastSChip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,210,95,.28);
  border-radius:999px;background:rgba(255,210,95,.045);color:#dac795;font-size:.6rem
}
.pastSChip button{border:0;background:none;color:#8f8061;cursor:pointer;padding:0}
.pastSChip button:hover{color:#ff9cab}

.dataTools.v9{grid-template-columns:1fr 1fr}
.dataTools.v9 .wideAction{grid-column:1/-1}
.dataHint{margin:8px 0 0;color:#6f7e97;font-size:.57rem;line-height:1.42}

@media(max-width:900px){
  .trackerGrid.v9{grid-template-columns:1fr}
}
@media(max-width:620px){
  .seedGrid{grid-template-columns:1fr}
  .trackActions{grid-template-columns:1fr 1fr}
  .trackAction.undo{grid-column:1/-1}
  .rareGrid{grid-template-columns:1fr 1fr}
  .rareGrid input{grid-column:1/-1}
  .pastSForm{grid-template-columns:1fr 100px}
  .pastSForm button{grid-column:1/-1}
}


/* ============================================================
   V9.3 ACCURACY + RESULT HIERARCHY
   ============================================================ */
.rareGrid.v93{grid-template-columns:140px minmax(0,1fr) auto}
.rareGrid.v93 select,.rareGrid.v93 input{
  width:100%;padding:9px 10px;border:1px solid #31405f;border-radius:9px;background:#060b15;outline:none
}
.rareBtn.log{color:#d8e5f7}
.requiredHint{margin-top:6px;color:#7e8ca5;font-size:.55rem}
.requiredHint b{color:#ffd39a}
.typeChip{display:inline-block;margin-top:3px;padding:2px 5px;border:1px solid #31405a;border-radius:999px;color:#8796ae;font-size:.5rem;font-weight:850}
.typeChip.featured{color:#ffe0a0;border-color:rgba(255,210,95,.35);background:rgba(255,210,95,.045)}
.typeChip.sitem{color:#d5c6ff;border-color:rgba(174,120,255,.34);background:rgba(174,120,255,.045)}
.typeChip.bonus{color:#baf8d9;border-color:rgba(112,239,176,.3);background:rgba(112,239,176,.04)}
.batchRow.v93{grid-template-columns:38px 150px minmax(0,1fr)}
.batchRow.v93 select,.batchRow.v93 input{min-width:0}
.batchRow.v93 input:disabled{opacity:.35}
.resultCard.other{border-color:#44506b;background:linear-gradient(160deg,#172033,#0a0f1a)}
.resultCard.other .cardRank{color:#8f9cb1}
.tally.other{color:#aeb8c9}

/* V9.4 result hierarchy: preserve unknown rarity while restoring clear visual categories. */
.resultCard.unknown{
  border-color:#46536d;
  background:
    radial-gradient(circle at 50% 24%,rgba(158,174,201,.07),transparent 38%),
    linear-gradient(160deg,#172033,#0a0f1a)
}
.resultCard.unknown .cardRank{color:#9eabc0;font-size:1.55rem}
.resultCard.reward{
  border-color:rgba(79,156,255,.50);
  background:
    radial-gradient(circle at 50% 24%,rgba(79,156,255,.09),transparent 38%),
    linear-gradient(160deg,#14213a,#0a0f1d)
}
.cardMeta{
  display:inline-flex;margin-top:7px;padding:3px 6px;border:1px solid rgba(255,255,255,.11);
  border-radius:999px;color:#7f8da5;background:rgba(4,7,13,.34);
  font-size:.48rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
/* Source badges are secondary. Rank color is always B blue, A purple, S gold. */
.cardMeta.heroSource{color:#e2c98a;border-color:rgba(255,210,95,.24)}
.cardMeta.apprenticeSource{color:#c9abed;border-color:rgba(174,120,255,.24)}
.tally.b{color:#76baff}
.tally.hero{color:#c3ccda;border-color:#46536d;background:rgba(158,174,201,.035)}
.tile.rankOther{border-color:#35415c;background:linear-gradient(180deg,rgba(21,29,48,.96),rgba(11,16,29,.98))}
.tile.rankOther .ico{color:#9aa7bb}
.hist.other .rarity{color:#8f9bad}
.tile.landed.landOther{box-shadow:0 0 0 2px rgba(143,155,173,.17),0 0 28px rgba(143,155,173,.2)}
@media(max-width:620px){
  .rareGrid.v93{grid-template-columns:1fr}
  .batchRow.v93{grid-template-columns:32px 128px minmax(0,1fr)}
}


/* ============================================================
   V9.9 SHARE SNAPSHOTS
   Read-only URL snapshots, copyable summaries and branded cards.
   ============================================================ */
.shareCard{
  position:relative;overflow:hidden;border-color:rgba(174,120,255,.34);
  background:radial-gradient(circle at 94% 0,rgba(255,100,184,.09),transparent 34%),linear-gradient(180deg,#121a2d,#0d1321)
}
.shareCard:after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:220px;border-radius:50%;background:rgba(85,235,255,.07);filter:blur(55px);pointer-events:none}
.shareHead,.sharedSnapshotHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}
.shareHead h3,.sharedSnapshotHead h3{margin:2px 0 0!important;font-size:1rem!important}
.shareHead p,.sharedSnapshotHead p{margin:4px 0 0;color:#8795ad;font-size:.66rem;max-width:760px}
.shareKicker{display:block;color:#ff83c8;font-size:.58rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
/* The preview is the card itself, drawn to canvas at full 1200x630 and scaled
   down by CSS, so what is on screen is byte-for-byte what gets shared. */
.shareFrame{margin:14px 0 0;position:relative;z-index:1}
.shareFrame canvas{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:16px;border:1px solid #26314c;background:#05070e;box-shadow:0 18px 46px rgba(0,0,0,.46)}
.shareFrame figcaption{margin-top:8px;color:#6c7a94;font-size:.6rem;font-weight:700;letter-spacing:.04em}
.shareActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.shareActions.compact{margin-top:10px}
.shareBtn{min-height:39px;padding:9px 13px;border:1px solid #34425f;border-radius:10px;background:#0a111f;color:#d6deed;font-size:.64rem;font-weight:900;cursor:pointer;transition:.16s ease}
.shareBtn:hover{transform:translateY(-1px);border-color:#607292;background:#101a2b}
.shareBtn.primary{border-color:rgba(85,235,255,.42);background:linear-gradient(135deg,rgba(85,235,255,.15),rgba(174,120,255,.15));color:#e8fdff}
.shareBtn.image{border-color:rgba(255,100,184,.38);background:rgba(255,100,184,.07);color:#ffd4eb}
.shareBtn.ghost{background:transparent;color:#8c9ab2}
.shareBtn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.sharePrivacy{margin-top:10px;color:#687891;font-size:.57rem;line-height:1.45;position:relative;z-index:1}
.sharePrivacy b{color:#9cacbf}
.sharedSnapshotCard{border-color:rgba(85,235,255,.38);background:radial-gradient(circle at 0 0,rgba(85,235,255,.09),transparent 34%),radial-gradient(circle at 100% 0,rgba(255,100,184,.08),transparent 34%),linear-gradient(180deg,#11192c,#0c1322)}
.sharedSnapshotCard[hidden]{display:none!important}
.sharedStatGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:13px}
.sharedStatGrid>div{padding:11px;border:1px solid #2d3a57;border-radius:11px;background:#090f1b}
.sharedStatGrid b{display:block;font-size:1rem}.sharedStatGrid span{display:block;margin-top:2px;color:#74839c;font-size:.53rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.sharedBoardLine{margin-top:10px;padding:10px 11px;border:1px solid rgba(255,210,95,.23);border-radius:10px;background:rgba(255,210,95,.035);color:#aa9e82;font-size:.62rem}
.sharedBoardLine b{color:#ffe0a0}
@media(max-width:900px){.sharedStatGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
  .shareHead,.sharedSnapshotHead{align-items:center}.sharedSnapshotHead{align-items:flex-start;flex-direction:column}
  .shareActions{display:grid;grid-template-columns:1fr 1fr}.shareBtn{width:100%}.shareBtn.image{grid-column:1/-1}
  .shareActions.compact{display:block}.sharedStatGrid{grid-template-columns:1fr 1fr}
  .sharedBoardLine{line-height:1.6}
  .cmpHead,.cmpRow{grid-template-columns:minmax(0,1fr) 68px 68px}
}

/* ---- shared snapshot: staleness, comparison, and the manual-copy fallback ---- */
.sharedStale{margin-top:12px;padding:9px 11px;border:1px solid rgba(255,156,85,.34);border-radius:10px;background:rgba(255,156,85,.06);color:#f0c8a4;font-size:.62rem;line-height:1.5}
.sharedStale[hidden]{display:none!important}
.sharedCompare{margin-top:10px;border:1px solid #2b3757;border-radius:12px;background:#080d18;overflow:hidden;font-size:.62rem}
.sharedCompare[hidden]{display:none!important}
.cmpHead,.cmpRow{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:8px;align-items:center;padding:8px 12px}
.cmpHead{color:#66748e;font-size:.53rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid #202b45;background:#0b1120}
.cmpHead span:not(:first-child),.cmpRow b{text-align:right}
.cmpRow{border-top:1px solid #171f33;color:#8b99b1}
.cmpRow:first-of-type{border-top:0}
.cmpRow b{color:#dfe7f5;font-size:.72rem;font-variant-numeric:tabular-nums}
.cmpRow b.mine{color:#8ef2ff}
.sharedCompare>b{display:block;padding:10px 12px;color:#cbd5e8}

.copyFallback{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:18px;background:rgba(3,5,11,.86);backdrop-filter:blur(8px)}
.copyFallback[hidden]{display:none!important}
.copyFallbackPanel{width:min(560px,100%);padding:18px;border:1px solid #394765;border-radius:18px;background:linear-gradient(160deg,#0d1526,#0b0e18);box-shadow:0 40px 120px rgba(0,0,0,.7)}
.copyFallbackPanel h3{margin:0;font-size:.95rem}
.copyFallbackPanel p{margin:6px 0 10px;color:#8795ad;font-size:.66rem}
.copyFallbackPanel textarea{width:100%;padding:10px;border:1px solid #303c5b;border-radius:10px;background:#060a12;color:#dbe4f3;font:500 .68rem/1.5 "JetBrains Mono",ui-monospace,monospace;resize:vertical}
.copyFallbackPanel textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,235,255,.08)}
.copyFallbackPanel .shareBtn{margin-top:10px;width:100%}

/* Keyboard focus was invisible on the share row. */
.shareBtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.shareBtn{transition:none}.shareBtn:hover{transform:none}}


/* ============================================================
   MANUAL-ONLY NTE TRACKER
   ============================================================ */
.manualOnlyGrid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)}
.manualHistoryCard{min-width:0}
.manualEntryBox{margin-top:12px;padding:14px;border:1px solid rgba(85,235,255,.24);border-radius:14px;background:#080e19}
.manualSForm{grid-template-columns:minmax(180px,1fr) 130px 165px auto}
.manualSForm select,.manualSForm input{
  width:100%;padding:10px;border:1px solid #31405f;border-radius:9px;background:#070c16;color:#dbe5f5;outline:none
}
.manualSForm select:focus,.manualSForm input:focus:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,235,255,.08)}
.manualHistoryHead{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:13px;border-top:1px solid #27324a}
.manualHistoryHead>div{display:flex;align-items:baseline;gap:8px}
.manualHistoryHead b{font-size:.75rem}.manualHistoryHead span{color:#73829b;font-size:.58rem;font-weight:800}
.manualSList{display:grid;gap:7px;margin-top:9px}
.manualSList .pastSChip{width:100%;justify-content:space-between;border-radius:11px;padding:9px 11px}
.manualSList .pastSChip .manualEntryMeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.manualSList .pastSChip .manualEntryDate{color:#7d8ba4}
.currentPityCard{padding:14px}
.currentPityCard .seedCard{margin-top:12px}
.manualCurrentActions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:11px}
.manualCurrentActions .dataBtn{min-height:42px}
.manualGuideCard{margin-top:10px}
.insightGrid .bigStatGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.manualOnlyGrid{grid-template-columns:1fr}}
@media(max-width:720px){
  .manualSForm{grid-template-columns:1fr 1fr}
  .manualSForm select{grid-column:1/-1}
  .manualSForm button{grid-column:1/-1}
  .manualCurrentActions{grid-template-columns:1fr}
}
@media(max-width:470px){.manualSForm{grid-template-columns:1fr}.manualSForm>*{grid-column:1!important}}


/* Page + slot NTE history tracker */
.historySetupBox{padding:16px;border:1px solid rgba(91,232,255,.17);border-radius:16px;background:linear-gradient(180deg,rgba(11,24,38,.72),rgba(8,15,27,.54));margin-bottom:20px}
.historySetupGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.historySetupGrid .seedField{min-width:0}
.historySetupGrid .seedField>input,.historySetupGrid .seedField>select{width:100%;min-height:44px;border-radius:10px;border:1px solid rgba(141,174,205,.28);background:#0a1422;color:#eaf7ff;padding:0 12px;font:inherit}
.historySetupSave{min-height:44px;white-space:nowrap}
.historySetupSummary{margin-top:11px;color:#8fa4ba;font-size:.72rem;line-height:1.45}
.historySetupSummary b{color:#e9f7ff}
.sEntryHead{margin-top:3px}
.pageSlotSForm{grid-template-columns:minmax(145px,1.35fr) minmax(95px,.65fr) minmax(145px,.85fr) minmax(140px,.9fr) auto!important}
.pageSlotSForm input,.pageSlotSForm select{min-width:0}
.singleSeedGrid{grid-template-columns:minmax(0,1fr)!important}
.pageGuideCard{overflow:hidden}
.historyGuideImage{margin:10px 0 12px;border-radius:13px;overflow:hidden;border:1px solid rgba(127,231,255,.16);background:#07111c}
.historyGuideImage img{display:block;width:100%;height:auto}
.guideExample{padding:11px 12px;margin:0 0 12px;border-radius:11px;background:rgba(79,219,255,.07);border:1px solid rgba(79,219,255,.14);font-size:.69rem;line-height:1.45;color:#9eb1c6}
.guideExample b,.guideExample strong{color:#edfaff}
.compactGuideSteps .guideStep{padding-top:9px;padding-bottom:9px}
.manualEntryMeta>span:not(.manualEntryDate){color:#9eb1c6}
@media(max-width:1050px){.historySetupGrid{grid-template-columns:1fr 1fr}.historySetupSave{grid-column:1/-1}.pageSlotSForm{grid-template-columns:1fr 1fr!important}.pageSlotSForm .seedPrimary{grid-column:1/-1}}
@media(max-width:620px){.historySetupGrid{grid-template-columns:1fr}.historySetupSave{grid-column:auto}.pageSlotSForm{grid-template-columns:1fr!important}.pageSlotSForm .seedPrimary{grid-column:auto}.historyGuideImage{border-radius:10px}}

.guideZoomHint{margin:-6px 0 10px;text-align:center;color:#6f8299;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

/* ============================================================
   NTE PAGE + SLOT VISUAL GUIDE / ROLLING HISTORY UPDATE
   ============================================================ */
.visualHistoryGuide{margin-bottom:18px;overflow:visible}
.visualGuideHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.visualGuideHead h3,.historyDialogHead h3{margin:3px 0 0;font-size:1rem}
.visualGuideHead p{margin:7px 0 0;max-width:760px;color:#8fa4ba;font-size:.72rem;line-height:1.55}
.guideEyebrow,.returnKicker{display:block;color:var(--cyan);font-size:.56rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.guideEnlargeBtn{flex:0 0 auto;min-height:38px;padding:0 13px;border:1px solid rgba(91,232,255,.3);border-radius:10px;background:rgba(65,218,255,.08);color:#dffaff;font:800 .66rem/1 inherit;cursor:pointer}
.guideEnlargeBtn:hover{border-color:rgba(91,232,255,.58);background:rgba(65,218,255,.13)}
.historyGuideLayout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(275px,.72fr);gap:16px;align-items:start}
.annotatedHistoryShot{display:block;width:100%;padding:0;border:0;border-radius:15px;background:#050a12;overflow:hidden;cursor:zoom-in;text-align:left;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.historyShotCanvas{position:relative;display:block;width:100%;line-height:0;background:#090d14}
.historyShotCanvas img{display:block;width:100%;height:auto}
.historyOpenCue{display:block;padding:9px 11px;background:#09121e;color:#8298ae;text-align:center;font-size:.58rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.shotPin{position:absolute;display:grid;place-items:center;width:clamp(22px,2.2vw,31px);height:clamp(22px,2.2vw,31px);border:2px solid rgba(255,255,255,.92);border-radius:999px;background:#06111f;color:#fff;font-size:clamp(.65rem,1vw,.82rem);font-weight:950;line-height:1;box-shadow:0 0 0 4px rgba(77,229,255,.22),0 5px 14px rgba(0,0,0,.45);transform:translate(-50%,-50%);z-index:2}
.shotPin:after{content:"";position:absolute;inset:-8px;border:1px solid rgba(79,231,255,.45);border-radius:999px}
.pinPage{left:60.4%;top:93.1%}
.pinSRow{left:28.4%;top:53.7%}
.pinSlots{left:3.8%;top:67.2%}
.pinDate{left:92.2%;top:53.7%}
.pinWindow{left:86.8%;top:32.4%}
.historyGuideLegend{display:grid;gap:9px}
.guideCallout{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 11px;border:1px solid rgba(126,158,190,.15);border-radius:11px;background:#08111d}
.guideCallout>span,.historyDialogLegend>div>span{display:grid;place-items:center;width:27px;height:27px;border-radius:999px;background:rgba(79,226,255,.11);border:1px solid rgba(79,226,255,.28);color:#e8fbff;font-size:.65rem;font-weight:950}
.guideCallout b{display:block;color:#edf8ff;font-size:.68rem;line-height:1.25}
.guideCallout p{margin:4px 0 0;color:#8296aa;font-size:.62rem;line-height:1.48}
.guideCallout strong{color:#dff9ff}
.guideCallout.warn{border-color:rgba(255,199,94,.2);background:rgba(255,178,54,.045)}
.guideCallout.warn>span{border-color:rgba(255,199,94,.34);background:rgba(255,178,54,.1);color:#fff1cb}
.guideQuickExample{margin-top:12px;padding:10px 12px;border:1px solid rgba(79,226,255,.14);border-radius:11px;background:rgba(79,226,255,.055);color:#8fa4ba;font-size:.67rem;line-height:1.45}
.guideQuickExample b{color:#eefaff}

.historyGuideDialog{width:min(1420px,96vw);max-width:none;max-height:94dvh;padding:0;border:1px solid rgba(103,224,255,.24);border-radius:18px;background:#07101b;color:#eaf7ff;box-shadow:0 30px 100px rgba(0,0,0,.72);overflow:hidden}
.historyGuideDialog::backdrop{background:rgba(1,4,9,.82);backdrop-filter:blur(6px)}
.historyDialogHead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border-bottom:1px solid rgba(123,157,189,.16);background:#091522}
.historyDialogClose{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(142,174,205,.25);border-radius:10px;background:#111d2a;color:#eaf7ff;font-size:1.45rem;line-height:1;cursor:pointer}
.historyDialogBody{max-height:calc(94dvh - 66px);overflow:auto;padding:14px}
.historyDialogImageWrap{border-radius:14px;overflow:hidden;border:1px solid rgba(127,231,255,.17);background:#050a10}
.dialogShotCanvas{max-width:1510px;margin:0 auto}
.historyDialogLegend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:12px}
.historyDialogLegend>div{display:grid;grid-template-columns:27px minmax(0,1fr);gap:8px;align-items:start;padding:9px;border:1px solid rgba(126,158,190,.14);border-radius:10px;background:#08111d}
.historyDialogLegend p{margin:2px 0 0;color:#8da1b5;font-size:.6rem;line-height:1.4}
.historyDialogLegend b{color:#edf9ff}

.historyReturnBox{margin:0 0 20px;padding:14px;border:1px solid rgba(255,199,94,.19);border-radius:15px;background:linear-gradient(180deg,rgba(38,29,12,.28),rgba(12,17,26,.65))}
.historyReturnHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.historyReturnHead>div>b{display:block;margin-top:3px;color:#edf8ff;font-size:.76rem}
.historyReturnBox>p{margin:9px 0 11px;color:#8fa2b6;font-size:.66rem;line-height:1.5}
.historyReturnBox>p strong{color:#fff0c4}.historyReturnBox>p em{color:#dce8f3;font-style:normal;font-weight:800}
.returnFlowSteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}
.returnFlowStep{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid rgba(255,216,132,.13);border-radius:11px;background:rgba(8,15,24,.62)}
.returnFlowStep.anchorStep{border-color:rgba(79,226,255,.22);background:rgba(44,152,176,.07)}
.returnStepNum{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,208,111,.32);background:rgba(255,185,51,.09);color:#ffe7ac;font-size:.66rem;font-weight:950}
.returnFlowStep b{display:block;color:#edf8ff;font-size:.66rem;line-height:1.35}
.returnFlowStep b strong{color:#83eaff}
.returnFlowStep p{margin:4px 0 0;color:#8297ac;font-size:.58rem;line-height:1.48}
.returnFlowStep em{color:#dce8f3;font-style:normal;font-weight:800}
.returnAnchorPrompt{margin:12px 0 9px;padding:9px 10px;border:1px solid rgba(79,226,255,.13);border-radius:10px;background:rgba(79,226,255,.045);color:#8fa5bb;font-size:.64rem;line-height:1.45}
.returnAnchorPrompt strong{color:#fff0c4}
.historyAnchorGrid{display:grid;grid-template-columns:minmax(110px,.6fr) minmax(150px,.8fr) auto;gap:9px}
.historyAnchorGrid input,.historyAnchorGrid select{width:100%;min-width:0;min-height:42px;padding:0 11px;border:1px solid rgba(141,174,205,.28);border-radius:10px;background:#0a1422;color:#eaf7ff;font:inherit}
.historyAnchorUpdate{min-height:42px;white-space:nowrap}
.historyAnchorSummary{margin-top:9px;color:#71869c;font-size:.59rem;line-height:1.45}
.historySetupBox.isLocked .historySetupGrid{opacity:.58}
.historySetupBox.isLocked .historySetupGrid input,.historySetupBox.isLocked .historySetupGrid select,.historySetupBox.isLocked .historySetupGrid button{pointer-events:none}

@media(max-width:980px){
  .historyGuideLayout{grid-template-columns:1fr}
  .returnFlowSteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .historyGuideLegend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guideCallout.warn{grid-column:1/-1}
  .historyDialogLegend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .historyDialogLegend>div:last-child{grid-column:1/-1}
}
@media(max-width:680px){
  .visualHistoryGuide{padding:12px}
  .visualGuideHead{align-items:stretch;flex-direction:column;gap:10px}
  .visualGuideHead p{font-size:.68rem}
  .guideEnlargeBtn{width:100%;min-height:42px}
  .historyGuideLayout{gap:11px}
  .historyGuideLegend{grid-template-columns:1fr;gap:7px}
  .guideCallout.warn{grid-column:auto}
  .guideCallout{padding:9px}
  .guideCallout p{font-size:.61rem}
  .shotPin{width:22px;height:22px;font-size:.62rem;border-width:1.5px;box-shadow:0 0 0 3px rgba(77,229,255,.2),0 4px 10px rgba(0,0,0,.45)}
  .shotPin:after{inset:-6px}
  .historyOpenCue{padding:8px;font-size:.54rem}
  .historyGuideDialog{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .historyDialogBody{max-height:calc(100dvh - 64px);padding:9px}
  .historyDialogLegend{grid-template-columns:1fr;gap:7px}
  .historyDialogLegend>div:last-child{grid-column:auto}
  .returnFlowSteps{grid-template-columns:1fr;gap:7px}
  .returnFlowStep{padding:9px;grid-template-columns:26px minmax(0,1fr)}
  .returnStepNum{width:26px;height:26px}
  .returnFlowStep b{font-size:.68rem}
  .returnFlowStep p{font-size:.61rem}
  .returnAnchorPrompt{font-size:.62rem}
  .historyAnchorGrid{grid-template-columns:1fr}
  .historyAnchorUpdate{width:100%}
  .historyReturnHead{align-items:flex-start;flex-direction:column}
}
.slotMark{position:absolute;left:5.8%;display:grid;place-items:center;width:clamp(17px,1.55vw,23px);height:clamp(17px,1.55vw,23px);border-radius:6px;background:rgba(5,16,28,.92);border:1px solid rgba(255,255,255,.86);color:#fff;font-size:clamp(.5rem,.72vw,.62rem);font-weight:950;line-height:1;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.38);z-index:2}
.slotMark1{top:53.7%}.slotMark2{top:60.4%}.slotMark3{top:67.2%}.slotMark4{top:74%}.slotMark5{top:80.8%}
@media(max-width:680px){.slotMark{left:5.2%;width:16px;height:16px;border-radius:5px;font-size:.48rem}}


.trackerDoneBox{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:14px;border:1px solid rgba(79,226,255,.18);border-radius:14px;background:linear-gradient(180deg,rgba(18,28,45,.95),rgba(10,18,31,.95))}
.trackerDoneBox h3{margin:4px 0 0;font-size:.86rem;color:#eef9ff}
.trackerDoneBox p{margin:6px 0 0;color:#8ea2b6;font-size:.64rem;line-height:1.5}
.trackerDoneBtn{min-width:170px;white-space:nowrap}
.stepFocus{animation:stepGlow 1.2s ease}
@keyframes stepGlow{0%{box-shadow:0 0 0 0 rgba(79,226,255,.0)}35%{box-shadow:0 0 0 4px rgba(79,226,255,.12),0 0 0 10px rgba(79,226,255,.05)}100%{box-shadow:0 0 0 0 rgba(79,226,255,0)}}
@media(max-width:680px){.trackerDoneBox{flex-direction:column;align-items:stretch}.trackerDoneBtn{width:100%;min-width:0}}


.trackerWizardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding:0 2px}
.trackerWizardTop h3{margin:4px 0 0;color:#eef8ff;font-size:.95rem}
.trackerWizardTop p{margin:6px 0 0;color:#8da2b8;font-size:.65rem;line-height:1.5;max-width:560px}
.wizardPills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.wizardPill{min-height:36px;padding:0 12px;border:1px solid rgba(118,151,187,.22);border-radius:999px;background:#0a1322;color:#93a7bc;font:800 .62rem/1 inherit;letter-spacing:.02em;cursor:pointer}
.wizardPill.isActive{border-color:rgba(91,232,255,.4);background:rgba(79,226,255,.11);color:#eefcff;box-shadow:0 0 0 3px rgba(79,226,255,.06)}
.wizardPill[disabled]{opacity:.45;cursor:not-allowed}
.wizardPanel{animation:wizardCardIn .48s cubic-bezier(.2,.8,.2,1);transform-origin:center center}
.wizardPanel[hidden]{display:none !important}
@keyframes wizardCardIn{0%{opacity:0;transform:perspective(1200px) rotateY(10deg) translateY(10px) scale(.985)}100%{opacity:1;transform:perspective(1200px) rotateY(0deg) translateY(0) scale(1)}}
.wizardSetupActions,.wizardBackRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ghostBtn{min-height:42px;padding:0 14px;border:1px solid rgba(128,159,193,.24);border-radius:12px;background:#0a1422;color:#e6f6ff;font:800 .68rem/1 inherit;cursor:pointer}
.ghostBtn:hover{border-color:rgba(128,159,193,.38);background:#0d1a2b}
.addBackRow{justify-content:space-between}
@media(max-width:760px){.trackerWizardTop{flex-direction:column}.wizardPills{justify-content:flex-start}.wizardSetupActions,.wizardBackRow,.addBackRow{flex-direction:column}.wizardPill,.ghostBtn{width:100%}}

/* v7 guided tracker: one decision/card at a time */
body[data-view="tracker"] .manualOnlyGrid{grid-template-columns:minmax(0,1fr)}
body[data-view="tracker"] .manualOnlyGrid>aside{display:none}
.wizardTrackerCard{max-width:1180px;margin:0 auto;padding:18px;overflow:hidden}
.compactWizardTop{margin-bottom:10px}
.wizardStepBadge{flex:0 0 auto;display:grid;place-items:center;min-width:72px;min-height:34px;padding:0 11px;border:1px solid rgba(91,232,255,.3);border-radius:999px;background:rgba(79,226,255,.07);color:#c9f8ff;font-size:.61rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
.wizardProgress{height:5px;margin:0 0 16px;border:1px solid rgba(124,158,193,.15);border-radius:999px;background:#08101c;overflow:hidden}
.wizardProgress>i{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));transition:width .35s ease}
.wizardChoicePanel{padding:4px 0 2px}
.flowChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flowChoiceCard{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:12px;align-items:center;min-height:112px;padding:16px;border:1px solid rgba(126,158,190,.2);border-radius:16px;background:linear-gradient(180deg,#0d1727,#09111e);color:#edf8ff;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.flowChoiceCard:hover{transform:translateY(-2px);border-color:rgba(91,232,255,.42);background:linear-gradient(180deg,#102036,#0a1423)}
.flowChoiceCard.primaryChoice{border-color:rgba(79,226,255,.28);background:linear-gradient(180deg,rgba(44,161,190,.12),#09111e)}
.flowChoiceCard:disabled{opacity:.42;cursor:not-allowed;transform:none}
.flowChoiceIcon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(91,232,255,.3);border-radius:13px;background:rgba(79,226,255,.08);color:#dffcff;font-size:1.3rem;font-weight:900}
.flowChoiceCard b{display:block;font-size:.82rem}.flowChoiceCard small{display:block;margin-top:5px;color:#899eb3;font-size:.64rem;line-height:1.45}.flowChoiceArrow{color:#7ddff0;font-size:1.1rem;font-weight:900}
.flowChoiceNote{margin-top:10px;color:#71869d;font-size:.6rem;text-align:center}
.wizardPanel{animation:wizardFlipIn .42s cubic-bezier(.2,.82,.24,1);transform-origin:50% 48%}
.wizardPanel[hidden]{display:none!important}
@keyframes wizardFlipIn{0%{opacity:0;transform:perspective(1100px) rotateY(10deg) translateY(8px) scale(.985)}100%{opacity:1;transform:perspective(1100px) rotateY(0) translateY(0) scale(1)}}
.wizardStepLayout{display:grid;grid-template-columns:minmax(310px,.9fr) minmax(0,1.1fr);gap:18px;align-items:center}
.wizardContextShot{display:block;width:100%;padding:0;border:1px solid rgba(115,218,242,.18);border-radius:16px;background:#050a11;overflow:hidden;text-align:left;cursor:zoom-in;box-shadow:0 16px 38px rgba(0,0,0,.24)}
.wizardContextShot .historyShotCanvas{overflow:hidden}
.wizardContextShot img{display:block;width:100%;height:auto}
.wizardShotCaption{display:block;padding:10px 12px;background:#08121e;color:#8298ad;font-size:.62rem;line-height:1.45}.wizardShotCaption b{color:#e8f9ff}
.wizardStepContent{min-width:0}.wizardMiniStep{display:inline-block;margin-bottom:7px;color:var(--cyan);font-size:.58rem;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.wizardStepContent h3{margin:0;color:#f0f8ff;font-size:1.05rem;letter-spacing:-.02em}.wizardStepContent>p{margin:7px 0 14px;color:#8ea2b7;font-size:.7rem;line-height:1.55}.wizardStepContent>p strong{color:#eaf8ff}
.wizardBigField label{font-size:.62rem}.wizardBigField input,.wizardBigField select{min-height:50px;font-size:.92rem}
.wizardNavRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.wizardNavRow .seedPrimary{min-width:150px;min-height:44px}.wizardNavRow .ghostBtn{min-height:44px}
.wizardManualEntry{margin-top:2px}.addStepLayout{align-items:start}.wizardAnchorGrid{grid-template-columns:1fr 1fr}.wizardAnchorGrid input,.wizardAnchorGrid select{min-height:48px}
.wizardStepContent .historySetupSummary,.wizardStepContent .historyAnchorSummary{margin-top:10px}
.wizardStepContent .trackerDoneBox{margin-top:14px}
/* Contextual annotation visibility. Each step shows only what matters. */
.pageCountShot .pinPage{left:59.5%;top:92.3%}.rowCountShot .slotMark{left:5.2%}.returnShot .pinPage{left:59.5%;top:92.3%}.returnShot .pinSRow{left:28%;top:53.7%}.addSShot .pinSRow{left:28%;top:53.7%}.addSShot .pinDate{left:92%;top:53.7%}.addSShot .slotMark1{left:5.2%;top:53.7%}
@media(max-width:820px){
  .wizardTrackerCard{padding:13px}.trackerWizardTop{flex-direction:column;gap:9px}.wizardStepBadge{align-self:flex-start}
  .flowChoiceGrid{grid-template-columns:1fr}.flowChoiceCard{min-height:96px;padding:13px}
  .wizardStepLayout{grid-template-columns:1fr;gap:13px}.wizardContextShot{max-width:none}.wizardNavRow{flex-direction:column-reverse;align-items:stretch}.wizardNavRow button{width:100%}
  .wizardAnchorGrid{grid-template-columns:1fr}.pageSlotSForm{grid-template-columns:1fr!important}.trackerDoneBox{flex-direction:column;align-items:stretch}.trackerDoneBtn{width:100%}
}


/* v8: keep the guided S-entry form inside its card at desktop widths.
   The wizard's right column is narrower than the full tracker card, so the
   old five-column row could overflow before the viewport breakpoint fired. */
.wizardManualEntry .pageSlotSForm{
  grid-template-columns:minmax(0,1.15fr) minmax(72px,.55fr) minmax(0,1fr)!important;
  gap:8px;
  width:100%;
  max-width:100%;
}
.wizardManualEntry .pageSlotSForm>select,
.wizardManualEntry .pageSlotSForm>input,
.wizardManualEntry .pageSlotSForm>button{
  width:100%;
  max-width:100%;
  min-width:0;
}
.wizardManualEntry .pageSlotSForm #pastSDate{grid-column:1/3}
.wizardManualEntry .pageSlotSForm #pastSAdd{grid-column:3;white-space:normal}

/* Prevent native date/select controls from forcing the grid wider than the
   wizard content column. */
.wizardManualEntry input[type="date"]{-webkit-appearance:none;appearance:none}
.wizardStepContent,.manualEntryBox,.pastSForm{max-width:100%;overflow:visible}

@media(max-width:980px){
  .wizardManualEntry .pageSlotSForm{grid-template-columns:1fr 1fr!important}
  .wizardManualEntry .pageSlotSForm #pastSDate{grid-column:1}
  .wizardManualEntry .pageSlotSForm #pastSAdd{grid-column:2}
}
@media(max-width:620px){
  .wizardManualEntry .pageSlotSForm{grid-template-columns:1fr!important}
  .wizardManualEntry .pageSlotSForm #pastSDate,
  .wizardManualEntry .pageSlotSForm #pastSAdd{grid-column:auto}
}

/* ==========================================================================
   v9 · simplified two-step guided tracker
   Replaces the pin-dot overlays (which sat on top of the table text) with
   outlined callout regions plus labels placed in the image's own margins.
   ========================================================================== */

/* --- kill the old overlay dots so they cannot cover row content --- */
.shotPin,.slotMark{display:none!important}

.historyShotCanvas{position:relative;display:block}

/* Outlined region highlight. Sits over the screenshot but never hides text. */
.shotBox{position:absolute;border:2px solid #4fe7ff;border-radius:8px;
  box-shadow:0 0 0 3px rgba(79,231,255,.16),0 0 18px rgba(79,231,255,.3);
  pointer-events:none;z-index:2;animation:shotPulse 2.6s ease-in-out infinite}
.shotBox.warm{border-color:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.16),0 0 18px rgba(255,209,102,.28)}
.shotBox.rose{border-color:#ff8bd0;box-shadow:0 0 0 3px rgba(255,139,208,.16),0 0 18px rgba(255,139,208,.26)}
@keyframes shotPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.shotBox{animation:none;opacity:.9}}

/* Small lettered tag anchored to a box, offset into the margin. */
.shotTag{position:absolute;display:grid;place-items:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:6px;background:#4fe7ff;color:#031018;
  font-size:.6rem;font-weight:950;line-height:1;z-index:3;pointer-events:none;
  box-shadow:0 3px 10px rgba(0,0,0,.5)}
.shotTag.warm{background:#ffd166}
.shotTag.rose{background:#ff8bd0;color:#2a0418}

/* Region coordinates, measured against the cropped Board Details capture. */
.boxRow1{left:7.2%;top:50.4%;width:87.2%;height:6.6%}
.tagRow1{left:2.2%;top:51.2%}
.boxPager{left:46.8%;top:90.8%;width:6.6%;height:4.4%}
.tagPager{left:39.2%;top:90.9%}
.boxDate{left:69.8%;top:50.4%;width:24.4%;height:6.6%}
.tagDate{left:95.6%;top:51.2%}
.boxLastRow{left:7.2%;top:79.2%;width:87.2%;height:6.6%}
.tagLastRow{left:2.2%;top:80%}

@media(max-width:680px){
  .shotTag{min-width:16px;height:16px;padding:0 4px;font-size:.5rem;border-radius:5px}
  .shotBox{border-width:1.5px;border-radius:6px}
}

/* --- step card shell --------------------------------------------------- */
.wizardStepLayout{grid-template-columns:minmax(280px,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.wizardStepContent h3{margin:6px 0 4px;font-size:1.12rem;letter-spacing:-.01em}
.wizardStepContent>p{margin:0 0 16px;color:#93a8bd;font-size:.75rem;line-height:1.55}
.wizardMiniStep{display:inline-block;padding:3px 9px;border-radius:999px;
  background:rgba(79,231,255,.1);border:1px solid rgba(79,231,255,.26);
  color:#7fe6ff;font-size:.56rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* --- one labelled question per block ----------------------------------- */
.qBlock{display:block;margin:0 0 14px}
.qLabel{display:block;color:#e8f6ff;font-size:.78rem;font-weight:800;letter-spacing:-.01em}
.qHelp{display:block;margin:3px 0 8px;color:#8397ac;font-size:.66rem;line-height:1.5}
.qHelp b{color:#a9dcef}
.qBlock input,.qBlock select{width:100%;min-height:48px;padding:0 13px;
  border:1px solid rgba(126,158,190,.26);border-radius:11px;background:#0a1421;
  color:#eaf6ff;font-size:.9rem;font-weight:700}
.qBlock input:focus,.qBlock select:focus{outline:none;border-color:#4fe7ff;
  box-shadow:0 0 0 3px rgba(79,231,255,.16)}
.qRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qRow .qBlock{margin-bottom:14px}

/* --- S-Class entry: 2 tidy rows, nothing spills outside the card -------- */
.entryGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px}
.entryGrid .span2{grid-column:1/-1}
.entryGrid .qBlock{margin:0}
.entryActionCell{display:flex}
.entryAddBtn{width:100%;min-height:48px}

/* --- returning-player home --------------------------------------------- */
.homeSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.homeStat{padding:13px 12px;border:1px solid rgba(126,158,190,.18);border-radius:13px;
  background:linear-gradient(180deg,#0d1727,#09111e);text-align:center}
.homeStat b{display:block;color:#eaf9ff;font-size:1.5rem;font-weight:900;line-height:1.1}
.homeStat span{display:block;margin-top:3px;color:#8397ac;font-size:.58rem;
  letter-spacing:.07em;text-transform:uppercase}
.homeLead{margin:0 0 14px;color:#93a8bd;font-size:.72rem;line-height:1.55}
.homeActions{display:grid;gap:9px}
.homeActions button{width:100%;min-height:48px}
.homeActions button:disabled{opacity:.42;cursor:not-allowed}

/* --- done box + unknown-cycle chip -------------------------------------- */
.trackerDoneBox{margin-top:16px}
.sHitPity.unknownPity{color:#8397ac;font-weight:700;font-size:.62rem;opacity:.85}

@media(max-width:900px){
  .wizardStepLayout{grid-template-columns:1fr;gap:16px}
  .homeSummary{grid-template-columns:1fr;gap:8px}
  .homeStat{display:flex;align-items:baseline;justify-content:space-between;text-align:left}
  .homeStat b{font-size:1.25rem}
}
@media(max-width:560px){
  .entryGrid{grid-template-columns:1fr}
  .qRow{grid-template-columns:1fr}
}

/* --- data sanity warning + home meta line ------------------------------- */
.homeMeta{margin:0 0 10px;color:#8397ac;font-size:.65rem;letter-spacing:.01em}
.gapWarn{margin:0 0 13px;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(255,196,84,.34);background:rgba(255,196,84,.07);
  color:#ffd79a;font-size:.68rem;line-height:1.55}
.gapWarn b{color:#ffc454}

/* ===== Sparse screenshot OCR ===== */
.ocrQuickStart,.ocrScanBox,.manualSpecialBox,.specialSummary,.anchorScanRow{border:1px solid rgba(79,226,255,.18);background:rgba(8,18,31,.72);border-radius:14px}
.ocrQuickStart{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;margin:12px 0 8px}
.ocrQuickStart>div{min-width:0}.ocrQuickStart b{display:block;margin-top:3px;color:#eefaff;font-size:.76rem}.ocrQuickStart p{margin:4px 0 0;color:#879bb0;font-size:.61rem;line-height:1.45}
.ocrMiniStatus{margin:0 0 12px;color:#71869c;font-size:.58rem;line-height:1.45}
.anchorScanRow{display:flex;align-items:center;gap:10px;padding:10px 11px;margin:11px 0}.anchorScanRow span{color:#7f94aa;font-size:.59rem;line-height:1.4}
.ocrScanBox{padding:14px;margin:10px 0 14px;background:linear-gradient(180deg,rgba(8,24,38,.9),rgba(7,16,28,.92))}
.ocrScanHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ocrScanHead h4{margin:4px 0 0;color:#effaff;font-size:.86rem}.ocrScanHead p{margin:6px 0 0;color:#879bb0;font-size:.63rem;line-height:1.5;max-width:650px}.ocrScanHead b{color:#dffaff}
.ocrActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.ocrActions .seedPrimary,.ocrActions .ghostBtn{min-height:42px}
.ocrProgress{position:relative;height:42px;margin-top:12px;border:1px solid rgba(115,149,184,.2);border-radius:11px;background:#07111e;overflow:hidden}.ocrProgress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(62,216,255,.15),rgba(229,65,184,.17));transition:width .25s ease}.ocrProgress span{position:relative;z-index:1;display:grid;place-items:center;height:100%;padding:0 10px;color:#cfefff;font-size:.61rem;font-weight:800}
.ocrScanStatus{margin-top:10px;color:#778da3;font-size:.59rem;line-height:1.45}.ocrScanStatus.good{color:#8fe3c5}.ocrScanStatus.warn{color:#ffd999}.ocrScanStatus.bad{color:#ffaaaa}
.ocrReview{margin-top:13px;border-top:1px solid rgba(114,148,182,.15);padding-top:12px}.ocrReviewHead{display:flex;align-items:center;justify-content:space-between;color:#edf9ff;font-size:.69rem}.ocrReviewHead span{color:#75dff5;font-size:.61rem;font-weight:900}
.ocrReviewList{display:grid;gap:8px;margin:9px 0}.ocrReviewRow{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(72px,.35fr) minmax(72px,.35fr) minmax(125px,.75fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid rgba(126,158,190,.14);border-radius:11px;background:#08111d}.ocrReviewRow select,.ocrReviewRow input{width:100%;min-width:0;min-height:38px;padding:0 9px;border:1px solid rgba(137,169,201,.25);border-radius:9px;background:#091522;color:#ecf8ff;font:inherit}.ocrDetectedType{display:flex;align-items:center;gap:7px;min-width:0}.ocrTypeDot{width:9px;height:9px;border-radius:999px;background:#ffd24e;box-shadow:0 0 0 3px rgba(255,210,78,.09)}.ocrDetectedType.special .ocrTypeDot{background:#dc42c6;box-shadow:0 0 0 3px rgba(220,66,198,.09)}.ocrDetectedType b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eaf8ff;font-size:.63rem}.ocrDetectedType span{display:block;color:#70849a;font-size:.53rem}.ocrRemove{width:34px;height:34px;border:1px solid rgba(255,120,120,.18);border-radius:9px;background:rgba(128,32,45,.1);color:#ffb5b5;cursor:pointer}
.ocrValidation{margin:8px 0 10px;padding:9px 10px;border-radius:10px;background:rgba(79,226,255,.045);border:1px solid rgba(79,226,255,.12);color:#8ea4b9;font-size:.59rem;line-height:1.45}.ocrValidation.good{border-color:rgba(88,231,166,.2);background:rgba(64,193,137,.06);color:#9be6c4}.ocrValidation.warn{border-color:rgba(255,199,94,.2);background:rgba(255,178,54,.05);color:#efd9a9}.ocrValidation.bad{border-color:rgba(255,107,122,.2);background:rgba(255,70,94,.055);color:#ffc0c7}
.manualFallback{margin-top:12px;border:1px solid rgba(117,149,183,.14);border-radius:12px;background:rgba(5,13,23,.5);overflow:hidden}.manualFallback summary{padding:11px 12px;color:#a4b7c9;font-size:.62rem;font-weight:850;cursor:pointer;user-select:none}.manualFallback[open] summary{border-bottom:1px solid rgba(117,149,183,.12)}.manualFallback .manualEntryBox{margin:10px}
.manualSpecialBox{margin:10px;padding:11px}.manualSpecialBox>b{display:block;color:#edf9ff;font-size:.66rem}.manualSpecialBox>span{display:block;margin-top:3px;color:#788da3;font-size:.55rem}.manualSpecialGrid{display:grid;grid-template-columns:1.1fr .65fr .85fr auto;gap:8px;margin-top:9px}.manualSpecialGrid select,.manualSpecialGrid input{min-width:0;min-height:40px;padding:0 9px;border:1px solid rgba(137,169,201,.25);border-radius:9px;background:#091522;color:#ecf8ff;font:inherit}
.specialSummary{margin:10px 0 0;padding:10px 11px;color:#8ea3b8;font-size:.59rem;line-height:1.45}.specialSummary:empty{display:none}.specialSummary b{color:#eefaff}.specialSummary.good{border-color:rgba(88,231,166,.2);background:rgba(64,193,137,.05);color:#9be6c4}.specialSummary.warn{border-color:rgba(255,199,94,.2);background:rgba(255,178,54,.04);color:#efd9a9}
.dataActionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.backupStatus{padding:9px 10px;border:1px solid rgba(121,153,187,.14);border-radius:10px;background:#08111d;color:#8297ac;font-size:.58rem;line-height:1.4}
@media(max-width:760px){.ocrQuickStart,.ocrScanHead,.anchorScanRow{flex-direction:column;align-items:stretch}.ocrQuickStart .seedPrimary,.anchorScanRow .ghostBtn{width:100%}.ocrReviewRow{grid-template-columns:1fr 1fr}.ocrReviewRow .ocrDetectedType{grid-column:1/-1}.ocrReviewRow .ocrRemove{justify-self:end}.manualSpecialGrid{grid-template-columns:1fr 1fr}.manualSpecialGrid .ghostBtn{grid-column:1/-1}.dataActionGrid{grid-template-columns:1fr}.ocrActions>*{width:100%}}
@media(max-width:480px){.ocrReviewRow{grid-template-columns:1fr}.ocrReviewRow .ocrDetectedType,.ocrReviewRow .ocrRemove{grid-column:auto}.ocrReviewRow .ocrRemove{justify-self:stretch;width:100%}.manualSpecialGrid{grid-template-columns:1fr}}

/* OCR review controls stay inside the review card at every width. */
.ocrSFields{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.72fr);gap:7px;min-width:0}
.ocrSpecialLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8398ad;font-size:.57rem}
.anchorScanRow .good,.ocrMiniStatus.good{color:#91e5c7}.anchorScanRow .bad,.ocrMiniStatus.bad{color:#ffb2bb}
.dataBtn:disabled,.seedPrimary:disabled,.ghostBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.ocrSFields{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ocrSFields{grid-template-columns:1fr}}

/* Keep local backup controls reachable in the simplified tracker layout while
   hiding the old side-by-side current-pity card. */
body[data-view="tracker"] .manualOnlyGrid>aside{display:block;width:100%;max-width:1180px;margin:0 auto}
body[data-view="tracker"] .manualOnlyGrid>aside>.currentPityCard{display:none}
body[data-view="tracker"] .manualOnlyGrid>aside>.dataOptions{margin-top:12px}

.giftCalibrationState{display:flex;align-items:flex-start;gap:10px;margin:10px 0 12px;padding:10px 11px;border:1px solid rgba(255,199,94,.2);border-radius:11px;background:rgba(255,178,54,.05)}
.giftCalibrationState .calDot{flex:0 0 auto;width:10px;height:10px;margin-top:4px;border-radius:999px;background:#ffcc67;box-shadow:0 0 0 4px rgba(255,204,103,.08)}
.giftCalibrationState b{display:block;color:#fff0c7;font-size:.65rem}.giftCalibrationState p{margin:4px 0 0;color:#8ea2b6;font-size:.58rem;line-height:1.45}
.giftCalibrationState.good{border-color:rgba(88,231,166,.23);background:rgba(64,193,137,.06)}
.giftCalibrationState.good .calDot{background:#79efb9;box-shadow:0 0 0 4px rgba(121,239,185,.08)}
.giftCalibrationState.good b{color:#cffff0}
.returnCalibrationBox{margin-top:12px}
#returnAnchorFields[hidden]{display:none!important}

.finalPageConfirm{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:14px;border:1px solid rgba(255,196,92,.28);border-radius:14px;background:rgba(255,181,56,.055)}
.finalPageConfirm>b,.finalPageConfirm div>b{display:block;color:#fff0c3;font-size:.78rem;margin-top:4px}
.finalPageConfirm p{margin:5px 0 0;color:#9baabe;font-size:.64rem;line-height:1.5;max-width:620px}
.finalPageConfirmActions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.finalPageConfirmActions select{min-width:108px;min-height:42px}
@media(max-width:680px){.finalPageConfirm{flex-direction:column;align-items:stretch}.finalPageConfirmActions{display:grid;grid-template-columns:1fr 1fr}.finalPageConfirmActions .seedPrimary{width:100%}}

/* ==========================================================================
   v23 · "mega step" guided flow
   One instruction per screen, stated at a size you cannot miss. The previous
   layout put the Page 1 scan, the calibration state, the total-pages field and
   the last-page-rows field on one screen, which is what made setup feel like
   a form rather than a set of instructions.
   ========================================================================== */
.megaPanel{padding:0}
.megaStep{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 22px 26px;max-width:620px;margin:0 auto}

.megaKicker{display:inline-block;padding:4px 12px;border-radius:999px;
  background:rgba(79,231,255,.1);border:1px solid rgba(79,231,255,.28);
  color:#7fe6ff;font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}

.megaTitle{margin:16px 0 10px;font-size:clamp(1.7rem,5.4vw,2.6rem);line-height:1.08;
  font-weight:900;letter-spacing:-.025em;color:#f2fbff;text-wrap:balance}
.megaLead{margin:0 0 22px;max-width:46ch;color:#9db3c8;
  font-size:clamp(.82rem,2.1vw,.95rem);line-height:1.6}
.megaLead b{color:#dceefb}
.goldWord{color:#ffc93c!important}

.megaActionRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.megaBtn{min-height:60px;padding:0 34px;border:0;border-radius:15px;cursor:pointer;
  background:linear-gradient(135deg,#26d7f5,#8b5cf6 55%,#ff4fa3);color:#04121c;
  font-size:1.02rem;font-weight:900;letter-spacing:-.01em;
  box-shadow:0 12px 34px rgba(60,180,255,.28);transition:transform .16s,box-shadow .16s}
.megaBtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(60,180,255,.36)}
.megaBtn:active{transform:translateY(0)}
.megaBtn[hidden]{display:none}

.megaHint{margin-top:13px;color:#7f93a8;font-size:.7rem;line-height:1.5}
.megaHint.good{color:#5ee6a8}
.megaHint.warn{color:#ffc454}
.megaHint.bad{color:#ff7b93}

.megaShot{margin-top:24px;width:100%;max-width:470px;padding:0;border:0;background:none;
  cursor:zoom-in;display:block}
.megaShot .historyShotCanvas{display:block;border-radius:13px;overflow:hidden;
  border:1px solid rgba(126,158,190,.22);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.megaShot img{display:block;width:100%}
.megaShotCaption{display:block;margin-top:9px;color:#8397ac;font-size:.66rem;line-height:1.5}
.megaShotCaption b{color:#a9dcef}

.megaAdvanced{margin-top:22px;width:100%;text-align:left;
  border:1px solid rgba(126,158,190,.18);border-radius:13px;background:rgba(10,20,33,.55)}
.megaAdvanced>summary{padding:13px 15px;cursor:pointer;color:#8fa6bb;
  font-size:.72rem;font-weight:800;list-style:none}
.megaAdvanced>summary::-webkit-details-marker{display:none}
.megaAdvanced>summary::before{content:"+ ";color:#4fe7ff;font-weight:900}
.megaAdvanced[open]>summary::before{content:"– "}
.megaAdvanced>.qBlock{padding:0 15px 14px}

.megaNav{margin-top:20px;display:flex;gap:10px;justify-content:center;width:100%}
.megaNav .ghostBtn{min-height:42px;font-size:.72rem}

.megaSubStepNav{margin-top:20px;width:100%;display:flex;justify-content:center}
.megaSubStepNav .seedPrimary{min-height:50px;padding:0 26px}
.megaSubStepNav[hidden]{display:none}

/* Detected-rows review sits below the fold as supporting detail, not as the
   thing the user has to parse before acting. */
.megaBody{width:100%;text-align:left;margin-top:6px}
.megaBody .ocrScanBox{border:0;background:none;padding:0}
.megaBody .ocrScanBox:empty{display:none}

/* Success pulse when a step completes, so advancing feels like progress
   rather than the page silently changing under you. */
@keyframes megaAdvance{
  0%{opacity:0;transform:translateY(14px) scale(.985)}
  60%{opacity:1;transform:translateY(-3px) scale(1.004)}
  100%{opacity:1;transform:none}
}
.megaStep.advance{animation:megaAdvance .42s cubic-bezier(.22,.9,.3,1)}
@keyframes megaFlash{0%{box-shadow:0 0 0 0 rgba(94,230,168,.55)}100%{box-shadow:0 0 0 22px rgba(94,230,168,0)}}
.megaBtn.done{background:linear-gradient(135deg,#37d99a,#26d7f5);animation:megaFlash .7s ease-out}
@media(prefers-reduced-motion:reduce){
  .megaStep.advance,.megaBtn.done{animation:none}
}

@media(max-width:560px){
  .megaStep{padding:24px 15px 20px}
  .megaBtn{width:100%;min-height:56px;padding:0 18px}
  .megaTitle{font-size:clamp(1.5rem,7.5vw,2rem)}
}

/* --- Slumberland reference shot ----------------------------------------
   Step 3 asks for a row type the user has probably never had a reason to
   notice. Describing it ("appears in the left column instead of a dice
   icon") is weaker than showing it, so the example swaps to a real page
   containing both a Slumberland row and a Points Gift row.
   Coordinates measured against slumberland-guide.png (1100x559).          */
.slumberShot{position:relative}
.boxSlumberRow{left:6.8%;top:60.7%;width:87.6%;height:5.9%}
.tagSlumberRow{left:1.4%;top:61.4%}
.boxGiftRow{left:6.8%;top:76.6%;width:87.6%;height:5.9%}
.tagGiftRow{left:1.4%;top:77.3%}
.megaShot .historyShotCanvas[hidden]{display:none}
.manualGiftBlock{padding:0 15px 14px;border-top:1px solid rgba(126,158,190,.14);margin-top:2px;padding-top:13px}
.manualGiftBlock>.qLabel{margin-bottom:2px}

/* --- Done screen -------------------------------------------------------
   Scanning ends with no acknowledgement, so people re-scan pages they have
   already done. This is the receipt: the numbers plus the sentence that says
   the bonus rows were excluded, which is the part users doubt most.        */
.doneMega{padding-top:34px}
.doneMark{width:78px;height:78px;margin-bottom:6px}
.doneMark svg{width:100%;height:100%;overflow:visible}
.doneRing{fill:none;stroke:#37d99a;stroke-width:2.4;
  stroke-dasharray:145;stroke-dashoffset:145;animation:doneRing .55s ease-out forwards}
.doneTick{fill:none;stroke:#5ee6a8;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:doneTick .38s .42s ease-out forwards}
@keyframes doneRing{to{stroke-dashoffset:0}}
@keyframes doneTick{to{stroke-dashoffset:0}}
.megaKicker.good{background:rgba(55,217,154,.12);border-color:rgba(55,217,154,.32);color:#5ee6a8}

.doneStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin:8px 0 4px}
.doneStat{padding:15px 10px;border:1px solid rgba(126,158,190,.18);border-radius:14px;
  background:linear-gradient(180deg,#0d1727,#09111e)}
.doneStat b{display:block;color:#eaf9ff;font-size:1.55rem;font-weight:900;line-height:1.08}
.doneStat span{display:block;margin-top:4px;color:#8397ac;font-size:.55rem;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.3}

.doneMath{margin:16px 0 4px;padding:12px 14px;width:100%;text-align:left;
  border:1px solid rgba(55,217,154,.24);border-radius:12px;background:rgba(55,217,154,.06);
  color:#a8e8cb;font-size:.68rem;line-height:1.6}
.doneMath b{color:#5ee6a8}
.doneMath.warn{border-color:rgba(255,196,84,.3);background:rgba(255,196,84,.07);color:#ffd79a}
.doneMath.warn b{color:#ffc454}

@media(prefers-reduced-motion:reduce){.doneRing,.doneTick{animation:none;stroke-dashoffset:0}}
@media(max-width:560px){
  .doneStats{grid-template-columns:1fr 1fr}
  .doneStat b{font-size:1.3rem}
}
.megaKicker.warnKick{background:rgba(255,196,84,.12);border-color:rgba(255,196,84,.32);color:#ffc454}
.doneMark.needsCheck .doneRing{stroke:#ffc454}
.doneMark.needsCheck .doneTick{stroke:#ffd79a}
.trackerDoneBtn.finishWarn{background:linear-gradient(135deg,#c9922c,#a35d2e);color:#160c02}

/* --- Pending review rows ------------------------------------------------
   When a scan finishes, adding the rows is the only sensible next action.
   Give it a visible cue and let it pulse gently so it reads as the step,
   not as one option among four. */
.pendingRowsCue{margin:12px 0 10px;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(79,231,255,.28);background:rgba(79,231,255,.07);
  color:#a9e6ff;font-size:.7rem;line-height:1.55}
.pendingRowsCue b{color:#7fe6ff}
.pendingRowsCue[hidden]{display:none}

.pulseAction{position:relative;min-height:52px;font-size:.88rem}
@keyframes cueGlow{
  0%,100%{box-shadow:0 8px 24px rgba(60,180,255,.20)}
  50%{box-shadow:0 8px 30px rgba(60,180,255,.42)}
}
.pulseAction{animation:cueGlow 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pulseAction{animation:none}}

/* --- Live balance indicator --------------------------------------------
   Answers "have I uploaded everything?" without asking. The cadence only
   balances when every bonus row is present, so this flips to green on its
   own and that is the user's finish signal.                               */
.balanceState{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  margin-top:18px;padding:13px 15px;border-radius:13px;font-size:.71rem;line-height:1.6}
.balanceState[hidden]{display:none}
.balanceState .balDot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px}
.balanceState.pending{border:1px solid rgba(255,196,84,.3);background:rgba(255,196,84,.07);color:#ffd79a}
.balanceState.pending .balDot{background:#ffc454;box-shadow:0 0 0 0 rgba(255,196,84,.6);animation:balPulse 1.9s ease-out infinite}
.balanceState.pending b{color:#ffc454}
.balanceState.ok{border:1px solid rgba(55,217,154,.28);background:rgba(55,217,154,.07);color:#a8e8cb}
.balanceState.ok .balDot{background:#37d99a}
.balanceState.ok b{color:#5ee6a8}
@keyframes balPulse{0%{box-shadow:0 0 0 0 rgba(255,196,84,.55)}100%{box-shadow:0 0 0 9px rgba(255,196,84,0)}}
@media(prefers-reduced-motion:reduce){.balanceState.pending .balDot{animation:none}}

/* v31: Slumberland completeness requires explicit confirmation. */
.slumberConfirmWrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px;padding:12px;border:1px solid rgba(103,219,229,.28);border-radius:12px;background:rgba(7,24,34,.55)}
.slumberConfirmWrap[hidden]{display:none!important}.slumberConfirmWrap span{font-size:.78rem;color:#93a6b9;line-height:1.4;flex:1;min-width:180px}
@media(max-width:640px){.slumberConfirmWrap{align-items:stretch}.slumberConfirmWrap .seedPrimary{width:100%}}
.finalSolveHint{margin:0 0 11px;padding:10px 12px;border-radius:10px;font-size:.68rem;line-height:1.55;
  border:1px solid rgba(126,158,190,.22);background:rgba(126,158,190,.07);color:#9db3c8}
.finalSolveHint b{color:#dceefb}
.finalSolveHint.ok{border-color:rgba(55,217,154,.3);background:rgba(55,217,154,.07);color:#a8e8cb}
.finalSolveHint.ok b{color:#5ee6a8}
.finalSolveHint.warn{border-color:rgba(255,196,84,.3);background:rgba(255,196,84,.07);color:#ffd79a}
.finalSolveHint.warn b{color:#ffc454}
.finalSolveHint[hidden]{display:none}

/* Portable tracker backups. Kept separate from OCR/layout logic. */
.portableBackupBlock{margin:12px 0 10px;padding:11px;border:1px solid rgba(121,153,187,.14);border-radius:12px;background:rgba(8,17,29,.58)}
.portableBackupHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.portableBackupHead b{color:#d9e6f4;font-size:.68rem}
.portableBackupHead span,.portableBackupNote{color:#7f94a9;font-size:.56rem;line-height:1.45}
.portableBackupGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.portableBackupNote{margin:8px 1px 0}
@media(max-width:760px){.portableBackupHead{display:block}.portableBackupHead span{display:block;margin-top:4px}.portableBackupGrid{grid-template-columns:1fr}}