:root{--gold:#d9a848;--gold2:#fff0b6;--bg:#020403;--ratio:704/1000}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;background:#020403;color:#f7dfaa;font-family:Georgia,'Times New Roman',serif;user-select:none}.bg{position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,rgba(23,41,39,.75),transparent 42%),radial-gradient(circle at 18% 40%,rgba(226,151,48,.18),transparent 26%),radial-gradient(circle at 88% 55%,rgba(97,54,172,.2),transparent 28%),linear-gradient(180deg,#020403,#05100d 52%,#020302);z-index:-2}.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,213,120,.55) 0 1px,transparent 2px);background-size:120px 90px;opacity:.12}.app{height:100%;padding:12px;display:flex;flex-direction:column;gap:8px}.topbar{height:130px;display:grid;grid-template-columns:190px 1fr 90px;align-items:start;z-index:2}.logo{justify-self:center;width:min(52vw,760px);max-height:122px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(224,165,64,.55))}.btn{font-family:inherit;text-transform:uppercase;letter-spacing:.08em;color:#ffe8ad;background:linear-gradient(180deg,rgba(23,15,7,.94),rgba(4,4,4,.96));border:1px solid rgba(222,166,65,.78);box-shadow:inset 0 0 0 1px rgba(255,236,170,.1),0 0 18px rgba(214,152,52,.14);padding:12px 24px;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.14)}.btn.small{padding:10px 18px}.btn.open{margin-top:-6px}.btn.view{background:linear-gradient(180deg,#502178,#210a36);min-width:205px}.btn.keep{background:linear-gradient(180deg,#721d16,#310806);min-width:205px}.board{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:30% 34% 36%;grid-template-rows:1fr 122px 92px;padding:12px 36px 18px;border:1px solid rgba(217,158,60,.78);box-shadow:inset 0 0 0 1px rgba(255,230,160,.1),inset 0 0 80px rgba(0,0,0,.72);overflow:hidden}.board:before{content:"";position:absolute;inset:5px;border:1px solid rgba(222,166,65,.25);pointer-events:none}.corner{position:absolute;width:46px;height:46px;border-color:rgba(222,166,65,.8);z-index:3}.tl{top:8px;left:8px;border-top:2px solid;border-left:2px solid}.tr{top:8px;right:8px;border-top:2px solid;border-right:2px solid}.bl{bottom:8px;left:8px;border-bottom:2px solid;border-left:2px solid}.br{bottom:8px;right:8px;border-bottom:2px solid;border-right:2px solid}.packPanel,.stackPanel,.revealPanel{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}.packPanel{flex-direction:column;gap:12px}.packGlow{position:absolute;width:min(90%,430px);aspect-ratio:1;border:1px solid rgba(226,166,57,.35);border-radius:50%;box-shadow:0 0 50px rgba(226,166,57,.28),inset 0 0 38px rgba(226,166,57,.1);animation:spin 24s linear infinite;transition:opacity .65s ease, transform .65s ease}.packZone{position:relative;width:min(74%,360px);aspect-ratio:1024/1536;display:grid;place-items:center;filter:drop-shadow(0 28px 36px rgba(0,0,0,.72));transform-style:preserve-3d;transition:opacity .75s ease,transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease}.booster{width:100%;height:100%;object-fit:contain;animation:float 3.4s ease-in-out infinite;will-change:transform}.packZone:after{content:"";position:absolute;inset:4%;background:linear-gradient(108deg,transparent 35%,rgba(255,255,255,.38),transparent 56%);mix-blend-mode:screen;animation:shine 4.5s ease-in-out infinite;pointer-events:none}.cutTrack{position:absolute;top:5%;left:8%;right:8%;height:18px;border:1px solid rgba(239,180,73,.45);background:rgba(0,0,0,.35);border-radius:999px;overflow:hidden;z-index:5}.cutTrack span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff78b4,#fff2b5,#8d52ff);box-shadow:0 0 18px #fff2b5}.tear{position:absolute;top:6.2%;left:7%;right:7%;height:5px;background:linear-gradient(90deg,transparent,#fff,#e8ad4e,transparent);opacity:0;transform:scaleX(0);transform-origin:left;z-index:6}.tear.open{animation:tear .42s ease forwards}.sparks{position:absolute;inset:0;pointer-events:none;z-index:8}.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff5ca;box-shadow:0 0 13px #fff;animation:spark .7s ease-out forwards}.packZone.shake .booster{animation:shake .58s cubic-bezier(.3,1.5,.4,1) 3}.packZone.opened{opacity:.78;transform:scale(.96) translateY(18px)}
.packPanel.spent .packZone{opacity:0;transform:scale(.72) translateY(82px) rotateX(14deg);filter:blur(2px) drop-shadow(0 18px 20px rgba(0,0,0,.35));pointer-events:none}
.packPanel.spent .packGlow{opacity:.12;transform:scale(.64)}
.packPanel.spent .open,.packPanel.spent .packInfo{opacity:0;pointer-events:none;transform:translateY(10px);transition:.45s ease}.packZone.opened .cutTrack{display:none}.packInfo{width:min(78%,310px);padding:15px 20px;background:rgba(4,4,4,.62);border:1px solid rgba(222,166,65,.62);box-shadow:inset 0 0 0 1px rgba(255,231,160,.08)}.packInfo h3{text-align:center;margin:0 0 10px;text-transform:uppercase;color:#f1c36d}.packInfo strong{display:block;color:#ffe6ae;font-size:19px;margin-bottom:8px}.packInfo p{margin:0;line-height:1.35;color:#e4cc94}.stackPanel{flex-direction:column}.cardStack{width:min(57%,320px);aspect-ratio:var(--ratio);position:relative;perspective:1100px;transform:rotate(-3deg);filter:drop-shadow(0 32px 34px rgba(0,0,0,.72));cursor:pointer}.stackCard{position:absolute;inset:0;border-radius:3.2%/2.3%;overflow:hidden;border:1px solid rgba(230,173,75,.82);background:#050505;box-shadow:0 0 0 1px rgba(255,230,160,.12),0 0 22px rgba(232,170,70,.16);transform:translate(var(--x),var(--y)) rotate(var(--r));}
.cardStack.dealing .stackCard{opacity:0;animation:dealToStack .72s cubic-bezier(.14,1.18,.24,1) forwards;animation-delay:var(--delay,0ms)}.stackCard img{width:100%;height:100%;object-fit:cover;display:block}.stackCard.top{animation:pulse 1.8s ease-in-out infinite}.stackHint{margin-top:22px;text-align:center;text-transform:uppercase;letter-spacing:.06em;color:#f0c56e;text-shadow:0 0 12px rgba(226,166,65,.5);min-height:48px}.revealPanel{flex-direction:column;gap:16px}.revealSlot{width:min(62%,420px);aspect-ratio:var(--ratio);perspective:1200px;opacity:0;transform:translateY(14px) scale(.96);transition:.25s ease}.revealSlot.show{opacity:1;transform:translateY(0) scale(1)}.flipCard{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,1.05,.24,1);filter:drop-shadow(0 30px 34px rgba(0,0,0,.72));transform:rotateY(180deg)}.flipCard.showFront{transform:rotateY(0deg)}.face{position:absolute;inset:0;border-radius:3.2%/2.3%;overflow:hidden;background:#030303;border:1px solid rgba(230,173,75,.82);backface-visibility:hidden;-webkit-backface-visibility:hidden}.face img{width:100%;height:100%;object-fit:contain;background:#030303;display:block}.front{transform:translateZ(1px)}.back{transform:rotateY(180deg) translateZ(1px)}.flipCard:after{content:"";position:absolute;inset:0;border-radius:3.2%/2.3%;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.32),transparent 58%);mix-blend-mode:screen;opacity:0;pointer-events:none}.flipCard.glint:after{animation:quickShine .85s ease-out}.actions{display:flex;gap:16px;opacity:0;pointer-events:none;transition:.2s ease}.actions.show{opacity:1;pointer-events:auto}.collected{grid-column:1/4;grid-row:2;z-index:2;display:flex;align-items:center;justify-content:center;gap:20px}.mini{width:76px;aspect-ratio:var(--ratio);border-radius:5px;overflow:hidden;border:1px solid rgba(230,173,75,.7);box-shadow:0 0 14px rgba(226,166,65,.22);animation:miniIn .28s ease}.mini img{width:100%;height:100%;object-fit:cover;display:block}.rarityBar{grid-column:1/4;grid-row:3;z-index:2;align-self:end;justify-self:center;width:min(1000px,80%);display:flex;justify-content:space-around;gap:10px;padding:13px 18px;margin-bottom:4px;background:rgba(4,4,4,.5);border:1px solid rgba(222,166,65,.45);text-transform:uppercase;color:#e8c276;font-size:14px}.rarityBar span{display:flex;align-items:center;gap:7px;white-space:nowrap}.rarityBar b{font-size:18px;color:#f7c66d}.dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 11px currentColor}.common{background:#cfcfcf;color:#ddd}.holo{background:#168fff;color:#168fff}.reverse{background:#62c354;color:#62c354}.full{background:#8e35ff;color:#8e35ff}.alt{background:#f5b53c;color:#f5b53c}.celestial{background:#f05ccd;color:#f05ccd}.viewer{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(9px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:99}.viewer.open{display:flex}.viewerStage{width:min(58vh,86vw);aspect-ratio:var(--ratio);perspective:1500px;cursor:grab}.viewerStage:active{cursor:grabbing}.viewerCard{position:relative;width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(0 34px 42px rgba(0,0,0,.86));will-change:transform}.viewerFace{position:absolute;inset:0;border-radius:3.2%/2.3%;overflow:hidden;background:#030303;border:1px solid rgba(230,173,75,.82);backface-visibility:hidden;-webkit-backface-visibility:hidden}.viewerFace img{width:100%;height:100%;object-fit:contain;background:#030303;display:block}.viewerFront{transform:translateZ(1.2px)}.viewerBack{transform:rotateY(180deg) translateZ(1.2px)}.viewerControls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.viewerClose{position:absolute;top:22px;right:28px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(230,173,75,.8);background:#080706;color:#ffe3a0;font-size:30px;cursor:pointer}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shine{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}@keyframes tear{to{opacity:1;transform:scaleX(1)}}@keyframes spark{to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-14px,8px) rotate(-6deg)}32%{transform:translate(16px,-8px) rotate(6deg)}50%{transform:translate(-13px,-7px) rotate(-5deg)}70%{transform:translate(14px,7px) rotate(5deg)}}@keyframes pulse{50%{box-shadow:0 0 0 1px rgba(255,230,160,.16),0 0 34px rgba(232,170,70,.42)}}@keyframes quickShine{0%{opacity:0;transform:translateX(-90%)}25%{opacity:1}100%{opacity:0;transform:translateX(90%)}}@keyframes miniIn{from{opacity:0;transform:translateY(-18px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dealToStack{0%{opacity:0;transform:translate(-245px,-34px) rotate(-14deg) scale(.58)}52%{opacity:1;transform:translate(calc(var(--x) * .38),calc(var(--y) * .38 - 16px)) rotate(calc(var(--r) * .3)) scale(1.045)}100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}@media(max-width:1000px){body{overflow:auto}.topbar{grid-template-columns:1fr;height:auto}.logo{width:min(88vw,620px);grid-row:2}.board{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;gap:18px;min-height:1200px;padding:18px}.packPanel,.stackPanel,.revealPanel,.collected,.rarityBar{grid-column:1;grid-row:auto}.rarityBar{flex-wrap:wrap;width:100%}.revealSlot{width:min(78vw,380px)}}


/* v11 FIX: echte zweiseitige 3D-Karte in der Großansicht */
.viewerStage{
  perspective:1800px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
}
.viewerCard{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
  will-change:transform !important;
}
.viewerFace{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  overflow:hidden !important;
}
.viewerFace img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  transform:none !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.viewerFace.viewerFront{
  transform:rotateY(0deg) translateZ(2px) !important;
}
.viewerFace.viewerBack{
  transform:rotateY(180deg) translateZ(2px) !important;
}

/* v14 — clean cinematic UI + stable 3D inspector
   Analyse: Die vorherigen v10-v13 hatten mehrere übereinanderliegende Inspector-Overrides
   plus filter/backdrop/visibility-Logik auf 3D-Eltern. CSS kann dadurch preserve-3d flattenen.
   Hier bleibt der Inspector wie v9: zwei echte Flächen, kein Spiegel-Trick, keine Side-Class-Logik. */
.bg{
  background-image:
    radial-gradient(circle at 50% 38%, rgba(255,190,74,.18), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.62)),
    url('assets/ui/cinematic-background.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  filter:saturate(1.05) contrast(1.06);
}
.bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.58) 82%, rgba(0,0,0,.88) 100%);pointer-events:none;}
.bg:after{opacity:.18 !important;mix-blend-mode:screen;}
.board{background:rgba(0,0,0,.16);backdrop-filter:blur(1.2px);}
.packPanel .packGlow{
  width:min(104%,500px);
  background:conic-gradient(from 0deg, transparent, rgba(255,203,92,.72), transparent 22%, rgba(142,92,255,.42), transparent 42%, rgba(255,203,92,.7), transparent 68%, rgba(255,108,203,.36), transparent 100%);
  mask:radial-gradient(circle, transparent 0 58%, #000 59% 61%, transparent 62% 68%, #000 69% 70%, transparent 71%);
  -webkit-mask:radial-gradient(circle, transparent 0 58%, #000 59% 61%, transparent 62% 68%, #000 69% 70%, transparent 71%);
  border:0;box-shadow:0 0 70px rgba(230,170,65,.45),0 0 120px rgba(100,62,255,.18);opacity:.92;
}
.packPanel:before{content:"";position:absolute;width:min(112%,540px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(255,222,133,.26), transparent 43%);filter:blur(10px);animation:portalBreathe 4.8s ease-in-out infinite;pointer-events:none;}
@keyframes portalBreathe{50%{opacity:.52;transform:scale(1.045)}}

/* Stable inspector: no filter on 3D parents, no side visibility classes, no mirrored screenshot. */
.viewer{background:rgba(0,0,0,.86) !important;backdrop-filter:none !important;perspective:none !important;}
.viewerStage{
  width:min(58vh,86vw) !important;
  aspect-ratio:var(--ratio) !important;
  perspective:1600px !important;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
  overflow:visible !important;
  touch-action:none !important;
  cursor:grab !important;
  filter:none !important;
}
.viewerStage:active{cursor:grabbing !important;}
.viewerStage:before{
  content:"";position:absolute;inset:0;border-radius:3.2%/2.3%;
  box-shadow:0 34px 44px rgba(0,0,0,.88),0 0 42px rgba(218,165,70,.12);
  transform:translateZ(-16px);pointer-events:none;
}
.viewerCard{
  position:relative !important;width:100% !important;height:100% !important;
  transform-style:preserve-3d !important;-webkit-transform-style:preserve-3d !important;
  will-change:transform !important;transition:none !important;animation:none !important;
}
.viewerFace{
  position:absolute !important;inset:0 !important;display:block !important;
  opacity:1 !important;visibility:visible !important;
  border-radius:3.2%/2.3% !important;overflow:hidden !important;background:#030303 !important;
  border:1px solid rgba(230,173,75,.82) !important;
  backface-visibility:hidden !important;-webkit-backface-visibility:hidden !important;
  transform-style:preserve-3d !important;-webkit-transform-style:preserve-3d !important;
}
.viewerFace img{width:100% !important;height:100% !important;object-fit:contain !important;display:block !important;background:#030303 !important;transform:none !important;pointer-events:none !important;}
.viewerFace.viewerFront{transform:rotateY(0deg) translateZ(1px) !important;}
.viewerFace.viewerBack{transform:rotateY(180deg) translateZ(1px) !important;}
.viewerCard.side-front .viewerFront,.viewerCard.side-front .viewerBack,.viewerCard.side-back .viewerFront,.viewerCard.side-back .viewerBack,.viewerCard.side-edge .viewerFront,.viewerCard.side-edge .viewerBack{opacity:1 !important;visibility:visible !important;}
.imgFallback{display:grid;place-items:center;width:100%;height:100%;padding:18px;text-align:center;color:#ffe3a0;background:#090704;border:1px solid rgba(230,173,75,.82);font-size:15px;line-height:1.35;}

/* v15 definitive inspector fix: manual side rendering avoids browser backface bugs. */
.viewerFace{
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  transform:none !important;
}
.viewerFace.viewerFront,
.viewerFace.viewerBack{
  transform:none !important;
}
.viewerCard.show-front .viewerFront{display:block !important; opacity:1 !important; visibility:visible !important;}
.viewerCard.show-front .viewerBack{display:none !important; opacity:0 !important; visibility:hidden !important;}
.viewerCard.show-back .viewerFront{display:none !important; opacity:0 !important; visibility:hidden !important;}
.viewerCard.show-back .viewerBack{display:block !important; opacity:1 !important; visibility:visible !important;}
.viewerCard.show-back .viewerBack img{transform:scaleX(-1) !important;}
.viewerCard.show-front .viewerFront img{transform:none !important;}

/* v16 AAA polish layer — keeps v15 3D inspector mechanics intact */
body::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,205,115,.12), transparent 22%), radial-gradient(circle at 50% 42%, rgba(124,80,255,.10), transparent 34%);mix-blend-mode:screen;transition:background-position .15s linear;}
.app{position:relative;z-index:1;}
.board{box-shadow:inset 0 0 0 1px rgba(228,171,70,.25), inset 0 0 80px rgba(0,0,0,.45), 0 28px 90px rgba(0,0,0,.62);}
.board::before{content:"";position:absolute;inset:14px;border:1px solid rgba(218,164,72,.18);border-radius:20px;pointer-events:none;box-shadow:inset 0 0 22px rgba(255,209,116,.06);}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, transparent, rgba(255,227,170,.045), transparent);transform:translateX(-120%);animation:slowSweep 9s ease-in-out infinite;}
@keyframes slowSweep{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.logo{filter:drop-shadow(0 2px 2px rgba(0,0,0,.75)) drop-shadow(0 0 20px rgba(226,168,65,.26));}
.packPanel{position:relative;}
.packPanel::after{content:"";position:absolute;left:50%;top:42%;width:min(118%,540px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:repeating-conic-gradient(from 0deg, rgba(255,205,92,.0) 0 7deg, rgba(255,207,100,.32) 8deg 8.8deg, rgba(255,205,92,.0) 10deg 22deg), radial-gradient(circle, transparent 0 49%, rgba(255,200,89,.28) 50% 50.5%, transparent 52% 59%, rgba(255,200,89,.20) 60% 60.5%, transparent 62%);filter:drop-shadow(0 0 24px rgba(236,180,76,.42));animation:portalSpin 28s linear infinite;z-index:0;}
@keyframes portalSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.packZone{z-index:2;filter:drop-shadow(0 24px 26px rgba(0,0,0,.68));}
.booster{animation:floatPack 4.4s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(242,184,78,.22)) drop-shadow(0 26px 24px rgba(0,0,0,.65));}
.packZone:hover .booster{filter:drop-shadow(0 0 34px rgba(255,203,95,.45)) drop-shadow(0 30px 28px rgba(0,0,0,.72));}
@keyframes floatPack{0%,100%{translate:0 0}50%{translate:0 -10px}}
.packInfo{box-shadow:0 0 22px rgba(0,0,0,.52), inset 0 0 30px rgba(255,203,94,.035);}
.cardStack{filter:drop-shadow(0 16px 26px rgba(0,0,0,.66));}
.stackCard.top{animation:stackPulse 2.3s ease-in-out infinite;}
@keyframes stackPulse{50%{box-shadow:0 0 0 1px rgba(255,225,160,.25),0 0 34px rgba(226,167,65,.35)}}
.revealSlot.show{animation:revealBreathe 2.6s ease-in-out infinite;}
@keyframes revealBreathe{50%{filter:drop-shadow(0 0 28px rgba(240,180,76,.25))}}
.flipCard .face.front::after,.viewerFace.viewerFront::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 56%);mix-blend-mode:screen;opacity:.28;transform:translateX(-80%);animation:cardGleam 5s ease-in-out infinite;}
@keyframes cardGleam{0%,60%{transform:translateX(-90%);opacity:0}72%{opacity:.35}100%{transform:translateX(90%);opacity:0}}
.collected{padding-top:8px;}
.mini{transition:transform .18s ease, box-shadow .18s ease;cursor:pointer;}
.mini:hover{transform:translateY(-8px) scale(1.07);box-shadow:0 0 22px rgba(238,181,79,.44),0 16px 26px rgba(0,0,0,.45);}
.viewer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(255,205,99,.14), transparent 31%),radial-gradient(circle at 50% 45%, transparent 0 24%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.84) 100%);pointer-events:none;}
.viewerCard{transform-origin:center center !important;}
.viewerFace{box-shadow:0 0 0 1px rgba(255,225,150,.3),0 0 28px rgba(225,166,60,.13);}
.viewerControls{position:relative;z-index:2;}
.viewerClose{z-index:3;}
.particleLayer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.floatParticle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,212,124,.9);box-shadow:0 0 10px rgba(255,203,104,.9);animation:particleRise var(--dur,7s) linear forwards;opacity:.8;}
@keyframes particleRise{from{transform:translate3d(0,30px,0) scale(.7);opacity:0}12%{opacity:.85}to{transform:translate3d(var(--dx,20px),-120px,0) scale(.15);opacity:0}}
.completion{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80;background:rgba(0,0,0,.64);}
.completion.show{display:flex;}
.completionCard{width:min(520px,88vw);padding:34px 32px;text-align:center;background:linear-gradient(180deg, rgba(17,12,5,.94), rgba(5,4,3,.94));border:1px solid rgba(232,176,78,.65);box-shadow:0 0 55px rgba(226,164,60,.25),0 26px 90px rgba(0,0,0,.8);color:#f6d28b;}
.completionCard h2{margin:0 0 12px;font-family:Georgia,serif;font-size:34px;color:#ffe3a0;font-weight:500;text-transform:uppercase;letter-spacing:.08em;}
.completionCard p{margin:0 0 24px;color:#d8b66d;}
.completionActions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}


/* v17: requested cleanup + vertical 3D inspector fix support. */
.packGlow,
.packPanel::after,
.packZone::after{
  display:none !important;
  animation:none !important;
  content:none !important;
}
.viewerCard.show-back .viewerBack img{
  transform:var(--backFix, scale(-1,1)) !important;
}


/* v19: cleaner end state + clickable collected cards */
.collected{min-height:112px;display:flex;align-items:center;justify-content:center;gap:14px;}
.collected .mini{border:0;background:transparent;padding:0;appearance:none;-webkit-appearance:none;}
.collected .mini img{display:block;width:100%;height:100%;object-fit:cover;border-radius:7px;}
.collected.complete .mini{animation:collectionSettle .7s cubic-bezier(.18,.9,.22,1.2) both;}
.collected.complete .mini:nth-child(2){animation-delay:.04s}.collected.complete .mini:nth-child(3){animation-delay:.08s}.collected.complete .mini:nth-child(4){animation-delay:.12s}.collected.complete .mini:nth-child(5){animation-delay:.16s}
@keyframes collectionSettle{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-12px) scale(1.08);box-shadow:0 0 28px rgba(238,181,79,.55),0 18px 30px rgba(0,0,0,.52)}100%{transform:translateY(0) scale(1)}}
.stackHint{min-height:22px;}
.stackHint:empty{display:none;}


/* v20 conservative polish: new booster art + smoother opening flow. 3D inspector untouched. */
.bg{
  background-image:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.08), rgba(0,0,0,.78) 78%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72)),
    url('assets/ui/cinematic-background.webp') !important;
  background-size:cover, cover, cover !important;
  background-position:center center !important;
  filter:saturate(1.06) contrast(1.04);
}
.bg:after{opacity:.06 !important;}
.board{background:rgba(0,0,0,.16);border-radius:18px;}
.packZone{width:min(82%,410px);animation:packBodyFloat 6.2s ease-in-out infinite;}
.booster{animation:boosterIdle 6.2s ease-in-out infinite !important;}
.packZone:hover{filter:drop-shadow(0 0 18px rgba(240,178,74,.20)) drop-shadow(0 34px 34px rgba(0,0,0,.78));}
@keyframes packBodyFloat{
  0%,100%{transform:translateY(0) rotateZ(-.25deg)}
  50%{transform:translateY(-7px) rotateZ(.25deg)}
}
@keyframes boosterIdle{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.006)}
}
.packZone.opened{animation:none;opacity:.82;transform:scale(.96) translateY(14px) rotateX(5deg);}
.packPanel.spent .packZone{opacity:.16;transform:scale(.66) translateY(90px) rotateX(18deg);filter:blur(3px) drop-shadow(0 12px 20px rgba(0,0,0,.28));}
.cardStack{opacity:0;transform:translateY(16px) rotate(-3deg) scale(.96);transition:opacity .42s ease, transform .72s cubic-bezier(.16,1,.3,1);}
.cardStack.ready{opacity:1;transform:translateY(0) rotate(-3deg) scale(1);}
.cardStack.dealing{opacity:1;}
.stackCard{transition:transform .22s ease, box-shadow .22s ease;}
.cardStack:not(.dealing):hover .stackCard.top{transform:translate(var(--x), calc(var(--y) - 7px)) rotate(var(--r));box-shadow:0 0 0 1px rgba(255,230,160,.22),0 0 36px rgba(232,170,70,.32);}
.revealSlot.show{transition:.42s cubic-bezier(.16,1,.3,1);}
.collected .mini{transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, filter .22s ease;}
.collected .mini:hover{transform:translateY(-10px) scale(1.075);filter:brightness(1.08);}
.mini.just-kept{animation:keptLanding .62s cubic-bezier(.16,1,.3,1) both;}
@keyframes keptLanding{
  0%{transform:translateY(-34px) rotate(-4deg) scale(1.12);opacity:0}
  55%{transform:translateY(5px) rotate(1deg) scale(.98);opacity:1}
  100%{transform:translateY(0) rotate(0) scale(1);opacity:1}
}


/* v21 final UI polish: no instruction/debug text, purely visual guidance. */
.stackHint{display:none !important;}
.open.btn{opacity:.72;transform:translateY(-2px);}
.open.btn:hover{opacity:1;}
.cardStack.ready::before{content:"";position:absolute;inset:-10px;border-radius:8px;background:radial-gradient(circle, rgba(235,177,75,.22), transparent 62%);filter:blur(10px);opacity:.72;animation:readyAura 2.6s ease-in-out infinite;z-index:-1;pointer-events:none;}
@keyframes readyAura{50%{opacity:1;transform:scale(1.035)}}
.packPanel.spent .packZone{opacity:.24 !important;transform:scale(.70) translateY(86px) rotateX(16deg) !important;filter:blur(1.2px) drop-shadow(0 12px 24px rgba(0,0,0,.35)) !important;}
.packPanel.spent .packZone::before{content:"";position:absolute;inset:18% 8% auto 8%;height:26%;background:radial-gradient(ellipse at center, rgba(255,213,119,.28), transparent 68%);filter:blur(13px);pointer-events:none;}
.revealSlot.show{animation:revealBreathe 2.8s ease-in-out infinite, revealRise .48s cubic-bezier(.16,1,.3,1) both;}
@keyframes revealRise{from{transform:translateY(20px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.newPackBtn{width:auto;align-self:center;margin-left:18px;padding:10px 18px;font-size:13px;opacity:0;animation:newPackIn .5s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes newPackIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:.9;transform:translateY(0) scale(1)}}
.collected.complete{filter:drop-shadow(0 0 18px rgba(235,177,75,.25));}

/* v22: start composition polish — center booster before opening, keep post-opening flow unchanged */
.board{position:relative;}
.packPanel:not(.spent){
  grid-column:1 / 4;
  grid-row:1 / 2;
  justify-self:center;
  align-self:center;
  width:min(34vw,440px);
  min-width:310px;
  height:auto;
  transform:translateY(-10px);
  z-index:8;
}
.packPanel:not(.spent) .packZone{
  width:100%;
  max-width:440px;
  opacity:1;
  transform:none;
  filter:drop-shadow(0 0 28px rgba(238,178,73,.22)) drop-shadow(0 34px 38px rgba(0,0,0,.76));
}
.packPanel:not(.spent) .booster{
  width:100%;
  height:100%;
}
.packPanel:not(.spent) .open.btn{
  margin-top:10px;
  opacity:.9;
}
.packPanel:not(.spent) .packInfo{
  display:none;
}
.packPanel:not(.spent) ~ .stackPanel,
.packPanel:not(.spent) ~ .revealPanel,
.packPanel:not(.spent) ~ .collected{
  opacity:0;
  pointer-events:none;
}
.packPanel:not(.spent) ~ .rarityBar{
  opacity:.22;
  transition:opacity .45s ease;
}
.packPanel.spent{
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.packPanel.spent .packZone{
  opacity:.20 !important;
  transform:scale(.64) translateY(72px) rotateX(12deg) !important;
  filter:blur(1.1px) drop-shadow(0 10px 22px rgba(0,0,0,.32)) !important;
}
.packPanel.spent .booster{
  filter:saturate(.9) brightness(.78);
}
@media(max-width:1000px){
  .packPanel:not(.spent){grid-column:1;grid-row:auto;width:min(78vw,420px);min-width:0;}
  .packPanel:not(.spent) ~ .rarityBar{opacity:.35;}
}

/* v23 rarity reveal cinematics: no inspector changes. */
.specialOverlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;overflow:hidden;background:rgba(0,0,0,0)}
.specialOverlay.show{opacity:1;visibility:visible;background:rgba(0,0,0,.72)}
.specialOverlay.celestial.show{background:radial-gradient(circle at 50% 48%, rgba(255,207,107,.18), rgba(0,0,0,.82) 58%, rgba(0,0,0,.92))}
.specialOverlay.origin.show,.specialOverlay.eternal.show{background:radial-gradient(circle at 50% 48%, rgba(255,231,157,.25), rgba(24,12,2,.88) 50%, rgba(0,0,0,.96))}
.specialVignette{position:absolute;inset:-12%;background:radial-gradient(circle at 50% 45%, transparent 0 22%, rgba(0,0,0,.74) 68%, #000 100%);opacity:.95}
.specialSigil{position:absolute;width:min(54vmin,560px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(226,172,74,.5);box-shadow:0 0 60px rgba(226,172,74,.22), inset 0 0 44px rgba(226,172,74,.08);background:repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(226,172,74,.28) 10deg 10.5deg, transparent 12deg 24deg), radial-gradient(circle, transparent 0 52%, rgba(226,172,74,.2) 53%, transparent 55%);transform:scale(.7) rotate(-10deg);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity .5s ease;filter:drop-shadow(0 0 28px rgba(226,172,74,.28))}
.specialOverlay.show .specialSigil{transform:scale(1) rotate(0deg);opacity:1;animation:sigilSpin 8s linear infinite}
@keyframes sigilSpin{to{rotate:360deg}}
.specialText{position:relative;text-align:center;text-transform:uppercase;letter-spacing:.15em;text-shadow:0 4px 28px rgba(0,0,0,.92),0 0 28px rgba(226,172,74,.55);transform:translateY(16px) scale(.92);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .42s ease;color:#ffe6a4;padding:0 22px}
.specialOverlay.show .specialText{transform:translateY(0) scale(1);opacity:1}
.specialKicker{font-size:clamp(12px,1.2vw,18px);color:#d8af62;margin-bottom:12px;letter-spacing:.24em}
.specialTitle{font-family:Georgia,serif;font-size:clamp(42px,7vw,112px);line-height:.96;font-weight:500;color:#ffe7a5;background:linear-gradient(180deg,#fff6ca 0%,#e8b758 45%,#9f651e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(238,178,73,.34))}
.specialSubtitle{font-size:clamp(12px,1.4vw,18px);color:#e1c27d;margin-top:16px;letter-spacing:.12em;text-transform:none}
.specialOverlay.hideText .specialText{opacity:0;transform:translateY(-8px) scale(1.04)}
.specialOverlay.hideText .specialSigil{opacity:0;transform:scale(1.18) rotate(15deg)}
.specialBurst{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.specialParticle{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#ffd877;box-shadow:0 0 12px #ffd877,0 0 28px rgba(255,216,119,.65);transform:translate(-50%,-50%);animation:specialParticle var(--dur,.95s) cubic-bezier(.12,.72,.22,1) forwards;opacity:0}
@keyframes specialParticle{0%{opacity:0;translate:0 0;scale:.4}12%{opacity:1}100%{opacity:0;translate:var(--tx) var(--ty);scale:.05}}
.specialOverlay.celestial .specialTitle{background:linear-gradient(90deg,#fff7c9,#ffd676,#fffbdf,#db9f32);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,214,118,.55))}
.specialOverlay.origin .specialTitle{background:linear-gradient(90deg,#fff8d7,#ffcf62,#ffffff,#ba7b22);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 34px rgba(255,208,94,.68))}
.specialOverlay.eternal .specialTitle{background:linear-gradient(90deg,#fff8d7,#f3c45d,#fff,#f3c45d,#8c5518);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 38px rgba(255,217,122,.78))}
.board.cinematicHold{filter:brightness(.62) saturate(.85);transition:filter .3s ease}
.revealSlot.special-pending{opacity:0;transform:translateY(20px) scale(.96)}

/* v24 polish: lower centered booster and calmer premium composition */
.packPanel:not(.spent){
  transform:translateY(52px);
  width:min(35vw,455px);
}
.packPanel:not(.spent) .packZone{
  filter:drop-shadow(0 0 34px rgba(238,178,73,.24)) drop-shadow(0 38px 42px rgba(0,0,0,.78));
}
.packPanel:not(.spent) .open.btn{
  margin-top:14px;
  transform:translateY(4px);
}
.packPanel:not(.spent) .packGlow{
  transform:translateY(8px) scale(1.04);
}
.packPanel.spent .packZone{
  opacity:.18 !important;
  transform:scale(.60) translateY(104px) rotateX(12deg) !important;
}

/* v24 special reveal: longer, heavier, more cinematic without touching inspector logic */
.specialOverlay.show{transition:opacity .42s ease, visibility .42s ease;background:rgba(0,0,0,.80)}
.specialOverlay.special.show{background:radial-gradient(circle at 50% 49%, rgba(161,91,255,.16), rgba(0,0,0,.84) 54%, rgba(0,0,0,.96) 100%)}
.specialOverlay.show::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 50%, rgba(255,217,126,.16), transparent 28%),linear-gradient(90deg, transparent 0 36%, rgba(255,220,128,.05) 48%, transparent 60%);opacity:0;animation:cinemaBreath 2.4s ease-in-out infinite;pointer-events:none;}
.specialOverlay.origin.show::before,.specialOverlay.eternal.show::before{background:radial-gradient(circle at 50% 50%, rgba(255,235,176,.32), transparent 28%),radial-gradient(circle at 50% 50%, rgba(255,178,54,.16), transparent 55%);animation:cinemaBreath 1.8s ease-in-out infinite;}
@keyframes cinemaBreath{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.specialSigil{width:min(62vmin,660px);transition:transform 1.45s cubic-bezier(.16,1,.3,1), opacity .7s ease;}
.specialOverlay.show .specialSigil{animation:sigilSpin 10s linear infinite, sigilPulse 2.15s ease-in-out infinite;}
@keyframes sigilPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(226,172,74,.26));}50%{filter:drop-shadow(0 0 52px rgba(255,218,126,.48));}}
.specialText{transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .62s ease;}
.specialTitle{font-size:clamp(52px,8.5vw,142px);letter-spacing:.08em;}
.specialKicker{font-size:clamp(13px,1.35vw,20px);margin-bottom:16px;}
.specialSubtitle{font-size:clamp(13px,1.55vw,22px);margin-top:20px;}
.specialOverlay.hideText .specialText{transition-duration:.78s;}
.specialParticle{width:5px;height:5px;}
.board.cinematicHold{filter:brightness(.48) saturate(.78) blur(.4px);transition:filter .55s ease;}
.flipCard.specialArrive{animation:specialCardCharge .9s cubic-bezier(.16,1,.3,1) both;}
@keyframes specialCardCharge{0%{filter:drop-shadow(0 0 0 rgba(255,220,130,0));transform:rotateY(0deg) scale(.92)}45%{filter:drop-shadow(0 0 42px rgba(255,220,130,.58));transform:rotateY(0deg) scale(1.045)}100%{filter:drop-shadow(0 30px 34px rgba(0,0,0,.72));transform:rotateY(0deg) scale(1)}}

/* v24 dramatic entry into the proven 3D inspector */
.viewer.dramatic{background:rgba(0,0,0,.90);}
.viewer.dramatic::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%, rgba(255,210,111,.26), transparent 26%),radial-gradient(circle at 50% 54%, rgba(116,58,255,.12), transparent 50%);opacity:.95;animation:viewerAura 2.8s ease-in-out infinite;pointer-events:none;}
@keyframes viewerAura{0%,100%{transform:scale(.98);opacity:.58}50%{transform:scale(1.04);opacity:1}}
.viewerStage.summon{animation:viewerSummon 1.18s cubic-bezier(.13,1.08,.22,1) both;}
@keyframes viewerSummon{0%{opacity:0;transform:translateY(48px) scale(.58) rotateZ(-3deg);filter:blur(7px) brightness(1.8)}42%{opacity:1;transform:translateY(-8px) scale(1.055) rotateZ(1deg);filter:blur(0) brightness(1.28)}100%{opacity:1;transform:translateY(0) scale(1) rotateZ(0);filter:blur(0) brightness(1)}}
.viewer.dramatic .viewerControls{animation:controlsIn .72s ease .78s both;}
@keyframes controlsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* v24 UI micro-polish */
.btn{border-color:rgba(230,174,75,.82);}
.btn:hover{box-shadow:inset 0 0 0 1px rgba(255,236,170,.16),0 0 24px rgba(214,152,52,.24);}
.mini{transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;}
.mini:hover{transform:translateY(-8px) scale(1.045);filter:brightness(1.1);box-shadow:0 0 22px rgba(226,166,65,.36),0 18px 22px rgba(0,0,0,.42);}


/* v25 final logo + collection book foundation */
.topbar{
  position:relative;
  height:152px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:4px;
}
.topActions{position:absolute;left:0;top:0;display:flex;gap:10px;align-items:center;z-index:5;}
.topbar .sound{position:absolute;right:0;top:0;z-index:5;}
.logo{
  width:min(66vw,980px);
  max-height:148px;
  object-fit:contain;
  object-position:center top;
  margin-top:-6px;
  filter:drop-shadow(0 0 10px rgba(255,222,139,.32)) drop-shadow(0 0 32px rgba(210,140,42,.28));
  pointer-events:none;
}
.collectionBtn{min-width:132px;}

.collectionBook{position:fixed;inset:0;z-index:62;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease, visibility .35s ease;}
.collectionBook.open{opacity:1;visibility:visible;pointer-events:auto;}
.bookBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(7px) brightness(.72);}
.bookPanel{
  position:absolute;left:50%;top:50%;width:min(92vw,1280px);height:min(86vh,850px);transform:translate(-50%,-47%) scale(.96);
  opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease;
  color:#2c1a08;padding:34px 42px 32px;border-radius:24px;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,232,158,.48),transparent 34%),
    linear-gradient(90deg,rgba(83,46,19,.28) 0 1px,transparent 1px calc(50% - 2px),rgba(80,44,18,.28) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
    linear-gradient(90deg,#e4c992 0%,#f4e4bc 47%,#cfab69 50%,#f3e0b1 53%,#dfc48c 100%);
  border:1px solid rgba(255,225,149,.86);box-shadow:0 40px 80px rgba(0,0,0,.7), inset 0 0 0 2px rgba(83,44,12,.22), inset 0 0 70px rgba(90,47,12,.25);
  overflow:hidden;
}
.collectionBook.open .bookPanel{transform:translate(-50%,-50%) scale(1);opacity:1;}
.bookPanel:before,.bookPanel:after{content:"";position:absolute;inset:16px;border:1px solid rgba(94,56,16,.36);border-radius:17px;pointer-events:none;}
.bookPanel:after{inset:25px;border-color:rgba(166,111,35,.28);}
.bookClose{position:absolute;right:24px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(89,50,16,.55);background:rgba(40,20,5,.82);color:#ffe7ae;font-size:26px;cursor:pointer;z-index:5;}
.bookHeader{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px;padding:0 8px 12px;border-bottom:1px solid rgba(93,55,15,.28);}
.bookKicker{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:#8b5b18;margin-bottom:5px;}
.bookHeader h2{margin:0;font-size:clamp(32px,4vw,58px);line-height:1;color:#2b1c0b;text-shadow:0 1px 0 rgba(255,255,255,.55);}
.bookProgress{text-align:center;min-width:130px;color:#2b1c0b;border:1px solid rgba(94,56,16,.3);border-radius:14px;padding:10px 14px;background:rgba(255,244,209,.42);box-shadow:inset 0 0 20px rgba(96,54,14,.08);}
.bookProgress strong{font-size:34px;line-height:1;color:#39230c}.bookProgress span{font-size:18px}.bookProgress small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-top:3px;color:#7b551d;}
.bookTabs{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.bookTab{font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#57340f;background:rgba(255,241,201,.42);border:1px solid rgba(100,60,18,.28);padding:8px 12px;border-radius:999px;cursor:pointer;transition:.18s ease;}
.bookTab:hover,.bookTab.active{color:#fff0bf;background:linear-gradient(180deg,#5e370f,#211005);border-color:rgba(194,132,42,.7);box-shadow:0 0 14px rgba(163,98,22,.25);}
.bookPages{position:relative;z-index:2;height:calc(100% - 142px);overflow:auto;padding:8px 12px 20px;scrollbar-color:#8f631e rgba(0,0,0,.08);}
.bookGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px;align-items:start;}
.bookSlot{position:relative;aspect-ratio:704/1000;border:1px solid rgba(87,50,12,.42);border-radius:10px;background:linear-gradient(180deg,rgba(255,246,214,.52),rgba(122,73,20,.13));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 16px rgba(73,42,12,.18);overflow:hidden;cursor:default;transition:.2s ease;}
.bookSlot.unlocked{cursor:pointer;background:#080604;box-shadow:0 10px 18px rgba(61,35,10,.28),0 0 0 1px rgba(112,70,20,.3);}
.bookSlot.unlocked:hover{transform:translateY(-8px) scale(1.035);box-shadow:0 16px 25px rgba(53,29,7,.36),0 0 24px rgba(196,136,41,.32);}
.bookSlot img{width:100%;height:100%;object-fit:cover;display:block;}
.bookSlot.locked{display:grid;place-items:center;}
.lockOrnament{width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(96,57,14,.35);display:grid;place-items:center;color:#6f4a17;font-size:28px;background:radial-gradient(circle,rgba(255,240,188,.58),rgba(93,57,16,.1) 65%,transparent);}
.bookSlot .newBadge{position:absolute;top:6px;right:6px;background:linear-gradient(180deg,#fff2b9,#d6972b);color:#2b1604;border:1px solid rgba(78,39,5,.45);border-radius:999px;padding:4px 7px;font-size:10px;font-weight:bold;letter-spacing:.08em;box-shadow:0 0 14px rgba(242,182,60,.48);}
.bookSlotMeta{position:absolute;left:0;right:0;bottom:0;padding:7px 5px;text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#ffe8ae;background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));text-shadow:0 1px 2px #000;}
@media(max-width:900px){.topbar{height:118px}.logo{width:min(78vw,760px);max-height:110px}.topActions{gap:6px}.collectionBtn{min-width:0}.bookPanel{padding:28px 22px}.bookGrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}.bookTabs{justify-content:flex-start;overflow:auto;max-height:78px}.bookHeader h2{font-size:34px}}

/* v27 — Memory Shelf collection view */
.collectionBook.open{background:#030201;}
.collectionBook .bookBackdrop{
  background:radial-gradient(circle at 50% 50%, rgba(40,22,6,.26), rgba(0,0,0,.88) 65%);
  backdrop-filter:blur(5px) brightness(.66);
}
.bookPanel.memoryPanel{
  width:min(98vw, 1780px);
  height:auto;
  max-height:96vh;
  aspect-ratio:16/9;
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:0 28px 90px rgba(0,0,0,.68), 0 0 80px rgba(177,112,30,.08);
  transform:translate(-50%,-49%) scale(.985);
}
.collectionBook.open .bookPanel.memoryPanel{transform:translate(-50%,-50%) scale(1);}
.bookPanel.memoryPanel:before,
.bookPanel.memoryPanel:after{display:none;}
.memoryShelfScene{
  position:absolute;
  inset:0;
  height:auto;
  overflow:visible;
  padding:0;
  z-index:1;
  border-radius:10px;
  filter:drop-shadow(0 0 32px rgba(214,147,47,.12));
}
.memoryShelfImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
}
.memorySlots{
  position:absolute;
  inset:0;
  display:block;
  z-index:3;
  pointer-events:none;
}
.bookSlot.memoryCard{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  aspect-ratio:704/1000;
  transform:translate(-50%,-50%);
  border-radius:5px;
  border:1px solid rgba(235,176,72,.55);
  background:#060402;
  padding:0;
  margin:0;
  overflow:hidden;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 3px 10px rgba(0,0,0,.72),0 0 0 1px rgba(255,214,105,.11),0 0 14px rgba(223,151,47,.08);
  transition:transform .22s cubic-bezier(.2,.8,.22,1), box-shadow .22s ease, filter .22s ease;
  animation:shelfCardIn .48s cubic-bezier(.18,.9,.22,1) both;
}
.bookSlot.memoryCard:hover{
  transform:translate(-50%, calc(-50% - 9px)) scale(1.09);
  z-index:30;
  box-shadow:0 16px 26px rgba(0,0,0,.78),0 0 0 1px rgba(255,222,122,.45),0 0 30px rgba(227,157,51,.34);
  filter:brightness(1.08) saturate(1.06);
}
.bookSlot.memoryCard img{width:100%;height:100%;object-fit:cover;display:block;}
.bookSlot.memoryCard .newBadge{
  position:absolute;
  top:-7px;
  right:-7px;
  z-index:4;
  background:linear-gradient(180deg,#fff6c8,#d49529 65%,#71430d);
  color:#1d0f03;
  border:1px solid rgba(255,226,139,.8);
  border-radius:999px;
  padding:4px 7px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  box-shadow:0 0 18px rgba(251,194,67,.55);
}
.shelfProgress{
  position:absolute;
  right:2.4%;
  top:2.7%;
  z-index:8;
  display:flex;
  align-items:baseline;
  gap:4px;
  padding:8px 14px 7px;
  border:1px solid rgba(189,130,45,.55);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(24,13,4,.82),rgba(6,3,1,.72));
  color:#ffe7a7;
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.06em;
  box-shadow:0 10px 30px rgba(0,0,0,.34), inset 0 0 18px rgba(255,178,55,.08);
}
.shelfProgress strong{font-size:22px;line-height:1;color:#ffd47a;text-shadow:0 0 12px rgba(241,178,71,.4);}
.shelfProgress span{font-size:16px;color:#dfb668;}
.shelfProgress small{display:block;margin-left:8px;font-size:10px;text-transform:uppercase;color:#b48a47;}
.memoryPanel .bookClose{
  right:1.2%;
  top:1.6%;
  z-index:10;
  width:38px;
  height:38px;
  background:rgba(8,4,1,.72);
  border-color:rgba(215,149,49,.72);
  color:#ffe2a3;
  box-shadow:0 0 20px rgba(0,0,0,.45);
}
.shelfHeader,.memoryPanel .bookTabs{display:none !important;}
.collectionBook.open .memoryShelfImage{animation:shelfFadeIn .55s ease both;}
.collectionBook.open .bookSlot.memoryCard:nth-child(1n){animation-delay:.06s;}
.collectionBook.open .bookSlot.memoryCard:nth-child(2n){animation-delay:.10s;}
.collectionBook.open .bookSlot.memoryCard:nth-child(3n){animation-delay:.14s;}
@keyframes shelfFadeIn{from{opacity:.55;filter:blur(2px) brightness(.7);transform:scale(1.01)}to{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes shelfCardIn{from{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.92);filter:brightness(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1)}}
@media(max-width:900px){
  .bookPanel.memoryPanel{width:100vw;max-height:100vh;}
  .shelfProgress{transform:scale(.82);transform-origin:top right;}
  .memoryPanel .bookClose{transform:scale(.86);transform-origin:top right;}
}

/* v28 — Fullscreen Memory Shelf: exact overlay grid + opening-style hover */
.collectionBook.open{
  background:#030201;
}
.collectionBook .bookBackdrop{
  background:#030201;
  backdrop-filter:none;
}
.bookPanel.memoryPanel{
  width:100vw !important;
  height:100vh !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  left:50%;
  top:50%;
  padding:0 !important;
  overflow:hidden !important;
  background:#030201 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) scale(1) !important;
}
.collectionBook.open .bookPanel.memoryPanel{
  transform:translate(-50%,-50%) scale(1) !important;
}
.memoryShelfScene{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
  border-radius:0 !important;
  filter:none !important;
  background:#030201;
}
.memoryShelfImage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.memorySlots{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.bookSlot.memoryCard{
  position:absolute !important;
  left:var(--x) !important;
  top:var(--y) !important;
  width:var(--w) !important;
  aspect-ratio:704/1000 !important;
  transform:translate(-50%,-50%) scale(1) !important;
  transform-origin:center bottom !important;
  border-radius:4px !important;
  border:1px solid rgba(235,176,72,.58) !important;
  background:#070402 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  box-shadow:
    0 5px 11px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,225,140,.10),
    0 0 12px rgba(224,150,43,.10) !important;
  transition:
    transform .22s cubic-bezier(.18,.9,.22,1),
    box-shadow .22s ease,
    filter .22s ease !important;
  animation:shelfCardIn .42s cubic-bezier(.18,.9,.22,1) both !important;
}
.bookSlot.memoryCard:hover{
  transform:translate(-50%, calc(-50% - 10px)) scale(1.085) !important;
  z-index:40 !important;
  box-shadow:
    0 18px 28px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,225,135,.48),
    0 0 34px rgba(226,157,52,.36) !important;
  filter:brightness(1.1) saturate(1.07) !important;
}
.bookSlot.memoryCard:active{
  transform:translate(-50%, calc(-50% - 6px)) scale(1.045) !important;
}
.bookSlot.memoryCard img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  pointer-events:none !important;
}
.memoryPanel .bookClose{
  position:fixed !important;
  top:18px !important;
  right:22px !important;
  z-index:20 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1px solid rgba(224,164,61,.55) !important;
  background:rgba(5,3,1,.48) !important;
  color:#ffe7ad !important;
  box-shadow:0 0 18px rgba(214,151,48,.14) !important;
  opacity:.62;
  transition:.18s ease;
}
.memoryPanel .bookClose:hover{opacity:1;transform:translateY(-1px) scale(1.04);}
.shelfProgress,.shelfHeader,.memoryPanel .bookTabs{display:none !important;}
.collectionBook.open .memoryShelfImage{animation:shelfFadeIn .45s ease both;}
@keyframes shelfCardIn{
  from{opacity:0;transform:translate(-50%, calc(-50% + 14px)) scale(.92);filter:blur(2px);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
}
@media(max-aspect-ratio:16/9){
  /* The shelf reference is 16:9. On narrower screens we keep the art covering the viewport;
     percentages remain aligned to the visible center area. */
  .bookSlot.memoryCard{width:calc(var(--w) * 1.02) !important;}
}

/* v29 — precision memory shelf layout */
.collectionBook.open{
  background:#030201 !important;
  overflow:hidden !important;
}
.collectionBook .bookBackdrop{
  background:#030201 !important;
  backdrop-filter:none !important;
}
.bookPanel.memoryPanel{
  width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  left:0 !important;
  top:0 !important;
  transform:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#030201 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.collectionBook.open .bookPanel.memoryPanel{
  transform:none !important;
}
.memoryShelfScene{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(100vw, calc(100vh * 1672 / 941)) !important;
  height:min(100vh, calc(100vw * 941 / 1672)) !important;
  aspect-ratio:1672 / 941 !important;
  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
  border-radius:0 !important;
  background:#030201 !important;
}
.memoryShelfImage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
}
.memorySlots{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  z-index:6 !important;
  pointer-events:none !important;
}
.bookSlot.memoryCard{
  position:absolute !important;
  left:var(--x) !important;
  top:var(--y) !important;
  width:var(--w) !important;
  aspect-ratio:704 / 1000 !important;
  transform:translate(-50%,-50%) scale(1) !important;
  transform-origin:center bottom !important;
  border-radius:4.5px !important;
  border:1px solid rgba(236,181,77,.48) !important;
  background:#070402 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,222,126,.08),
    0 0 10px rgba(230,161,54,.08) !important;
  transition:
    transform .2s cubic-bezier(.18,.9,.22,1),
    box-shadow .2s ease,
    filter .2s ease !important;
  animation:shelfCardInV29 .34s cubic-bezier(.18,.9,.22,1) both !important;
}
.bookSlot.memoryCard:hover{
  transform:translate(-50%, calc(-50% - 7px)) scale(1.055) !important;
  z-index:50 !important;
  box-shadow:
    0 14px 24px rgba(0,0,0,.82),
    0 0 0 1px rgba(255,225,135,.46),
    0 0 26px rgba(226,157,52,.32) !important;
  filter:brightness(1.08) saturate(1.06) !important;
}
.bookSlot.memoryCard:active{
  transform:translate(-50%, calc(-50% - 4px)) scale(1.035) !important;
}
.bookSlot.memoryCard img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  pointer-events:none !important;
}
.shelfProgress{display:none !important;}
.memoryPanel .bookClose{
  position:fixed !important;
  top:18px !important;
  right:22px !important;
  z-index:80 !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:1px solid rgba(224,164,61,.58) !important;
  background:rgba(5,3,1,.45) !important;
  color:#ffe7ad !important;
  font-size:24px !important;
  line-height:34px !important;
  box-shadow:0 0 18px rgba(214,151,48,.12) !important;
}
@keyframes shelfCardInV29{
  from{opacity:0;transform:translate(-50%,calc(-50% + 10px)) scale(.96);filter:brightness(.82)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1)}
}


/* v31 — final shelf sizing/position polish */
.bookSlot.memoryCard{
  width:var(--w) !important;
  border-radius:3.8px !important;
  border:1px solid rgba(236,181,77,.42) !important;
  box-shadow:
    0 3px 7px rgba(0,0,0,.82),
    0 0 0 1px rgba(255,222,126,.07),
    0 0 8px rgba(230,161,54,.07) !important;
}
.bookSlot.memoryCard:hover{
  transform:translate(-50%, calc(-50% - 6px)) scale(1.075) !important;
  box-shadow:
    0 13px 21px rgba(0,0,0,.84),
    0 0 0 1px rgba(255,225,135,.45),
    0 0 25px rgba(226,157,52,.30) !important;
}
.bookSlot.memoryCard:active{
  transform:translate(-50%, calc(-50% - 4px)) scale(1.04) !important;
}
.bookSlot.memoryCard img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}


/* v34 — Lantern/candle life: subtle non-invasive light flicker overlays on the memory shelf */
.memoryShelfScene::before,
.memoryShelfScene::after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.72;
  filter:blur(10px);
  will-change:opacity, transform, filter;
}
.memoryShelfScene::before{
  left:-1.5%;
  top:20%;
  width:10%;
  height:58%;
  background:
    radial-gradient(circle at 38% 13%, rgba(255,194,82,.34) 0 7%, rgba(255,157,43,.16) 10%, transparent 25%),
    radial-gradient(circle at 35% 54%, rgba(255,185,73,.30) 0 6%, rgba(255,146,34,.13) 10%, transparent 24%),
    radial-gradient(circle at 45% 90%, rgba(255,178,63,.26) 0 5%, rgba(255,143,32,.11) 10%, transparent 24%);
  animation:shelfLanternLeft 3.8s ease-in-out infinite;
}
.memoryShelfScene::after{
  right:-1.4%;
  top:20%;
  width:11%;
  height:63%;
  background:
    radial-gradient(circle at 58% 14%, rgba(255,194,82,.32) 0 7%, rgba(255,157,43,.14) 10%, transparent 25%),
    radial-gradient(circle at 61% 54%, rgba(255,185,73,.28) 0 6%, rgba(255,146,34,.12) 10%, transparent 24%),
    radial-gradient(circle at 51% 91%, rgba(255,176,58,.34) 0 6%, rgba(255,132,24,.13) 11%, transparent 26%);
  animation:shelfLanternRight 4.35s ease-in-out infinite;
}
.memoryShelfScene .memorySlots::before,
.memoryShelfScene .memorySlots::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.42;
  filter:blur(8px);
  background:radial-gradient(circle, rgba(255,195,87,.25) 0 8%, rgba(255,151,34,.11) 15%, transparent 34%);
  animation:shelfCandleBreath 2.9s ease-in-out infinite;
}
.memoryShelfScene .memorySlots::before{left:63.5%;top:88.5%;width:10%;height:9%;animation-delay:.35s;}
.memoryShelfScene .memorySlots::after{left:2.5%;top:27%;width:9%;height:11%;animation-delay:1.15s;}
@keyframes shelfLanternLeft{
  0%,100%{opacity:.54;transform:scale(1);filter:blur(10px) brightness(1)}
  12%{opacity:.82;transform:scale(1.025);filter:blur(11px) brightness(1.15)}
  27%{opacity:.48;transform:scale(.992);filter:blur(9px) brightness(.96)}
  43%{opacity:.74;transform:scale(1.018);filter:blur(10px) brightness(1.09)}
  65%{opacity:.60;transform:scale(1.006);filter:blur(10px) brightness(1.02)}
  82%{opacity:.86;transform:scale(1.03);filter:blur(12px) brightness(1.18)}
}
@keyframes shelfLanternRight{
  0%,100%{opacity:.50;transform:scale(1);filter:blur(10px) brightness(1)}
  16%{opacity:.78;transform:scale(1.022);filter:blur(11px) brightness(1.14)}
  35%{opacity:.45;transform:scale(.988);filter:blur(9px) brightness(.95)}
  51%{opacity:.82;transform:scale(1.028);filter:blur(12px) brightness(1.17)}
  74%{opacity:.56;transform:scale(1.002);filter:blur(10px) brightness(1.01)}
}
@keyframes shelfCandleBreath{
  0%,100%{opacity:.28;transform:scale(.96)}
  18%{opacity:.54;transform:scale(1.05)}
  34%{opacity:.33;transform:scale(.99)}
  62%{opacity:.60;transform:scale(1.08)}
  84%{opacity:.38;transform:scale(1.02)}
}
@media (prefers-reduced-motion: reduce){
  .memoryShelfScene::before,
  .memoryShelfScene::after,
  .memoryShelfScene .memorySlots::before,
  .memoryShelfScene .memorySlots::after{animation:none !important;}
}

/* v37 — Milestone 3 profile/inventory UI */
.profileBtn{min-width:94px;}
.bookSlot.memoryCard .ownedBadge{
  position:absolute;
  left:4px;
  bottom:4px;
  z-index:5;
  min-width:20px;
  height:18px;
  padding:1px 6px 0;
  border-radius:999px;
  border:1px solid rgba(255,224,142,.75);
  background:linear-gradient(180deg,rgba(46,25,7,.92),rgba(9,5,2,.92));
  color:#ffe7aa;
  font-size:10px;
  font-weight:800;
  line-height:17px;
  letter-spacing:.04em;
  box-shadow:0 0 12px rgba(219,152,46,.22),0 4px 8px rgba(0,0,0,.45);
  pointer-events:none;
}
.profileModal{
  position:fixed;
  inset:0;
  z-index:86;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}
.profileModal.open{opacity:1;visibility:visible;pointer-events:auto;}
.profileBackdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(78,43,11,.24),rgba(0,0,0,.78) 62%);
  backdrop-filter:blur(6px) brightness(.75);
}
.profilePanel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw,880px);
  max-height:88vh;
  overflow:auto;
  transform:translate(-50%,-48%) scale(.96);
  opacity:0;
  transition:transform .42s cubic-bezier(.18,.9,.22,1), opacity .28s ease;
  border:1px solid rgba(230,172,72,.58);
  border-radius:24px;
  padding:28px;
  color:#ffe7ad;
  background:
    radial-gradient(circle at 50% -20%,rgba(236,178,72,.20),transparent 38%),
    linear-gradient(180deg,rgba(23,13,4,.96),rgba(6,3,1,.96));
  box-shadow:0 34px 90px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,226,149,.08), inset 0 0 60px rgba(191,120,32,.08);
  font-family:Georgia,'Times New Roman',serif;
}
.profileModal.open .profilePanel{transform:translate(-50%,-50%) scale(1);opacity:1;}
.profileClose{
  position:absolute;
  right:18px;
  top:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(224,164,61,.62);
  background:rgba(5,3,1,.55);
  color:#ffe7ad;
  font-size:26px;
  cursor:pointer;
}
.profileHeader{padding-right:52px;margin-bottom:20px;}
.profileKicker{display:block;text-transform:uppercase;letter-spacing:.22em;color:#d6a14f;font-size:12px;margin-bottom:6px;}
.profileHeader h2{margin:0;font-size:clamp(34px,5vw,58px);line-height:1;text-shadow:0 0 22px rgba(215,149,49,.16);}
.profileHeader p{margin:9px 0 0;color:#cda86b;font-size:15px;}
.profileStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0;}
.profileStats article{
  border:1px solid rgba(221,158,58,.34);
  border-radius:16px;
  padding:15px 14px 13px;
  background:linear-gradient(180deg,rgba(255,215,126,.09),rgba(0,0,0,.18));
  box-shadow:inset 0 0 22px rgba(255,179,57,.04);
}
.profileStats strong{display:block;font-size:30px;line-height:1;color:#ffd47a;}
.profileStats span{display:block;margin-top:5px;font-size:11px;text-transform:uppercase;letter-spacing:.10em;color:#b98f50;}
.profileProgress{height:10px;border-radius:999px;overflow:hidden;border:1px solid rgba(219,158,56,.38);background:rgba(0,0,0,.36);box-shadow:inset 0 0 10px rgba(0,0,0,.5);}
.profileProgress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5315,#e7ad45,#fff0a8);box-shadow:0 0 18px rgba(233,174,68,.48);transition:width .45s ease;}
.rarityProgress{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:22px 0 18px;}
.rarityProgressRow{display:grid;grid-template-columns:132px 1fr 54px;align-items:center;gap:10px;font-size:13px;color:#e8c58d;}
.rarityProgressRow span{white-space:nowrap;color:#f0d29b;}
.rarityProgressRow strong{text-align:right;color:#ffd47a;font-size:13px;}
.rarityMeter{height:8px;border-radius:999px;background:rgba(0,0,0,.44);overflow:hidden;border:1px solid rgba(216,153,50,.22);}
.rarityMeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6f3e10,#d9962f,#ffe7a3);box-shadow:0 0 12px rgba(224,160,54,.35);}
.profileActions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;}
.btn.danger{border-color:rgba(210,92,56,.64);color:#ffd7cc;}
.btn.danger:hover{box-shadow:0 0 22px rgba(210,73,42,.28), inset 0 0 0 1px rgba(255,209,193,.14);}
.profileNote{margin:14px 0 0;color:#b99055;font-size:13px;text-align:right;}
@media(max-width:760px){
  .profileStats{grid-template-columns:repeat(2,1fr)}
  .rarityProgress{grid-template-columns:1fr}
  .rarityProgressRow{grid-template-columns:116px 1fr 48px}
}

/* v38 — The Keeper's Cabin homebase + softer world layer */
.topActions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.cabinBtn{border-color:rgba(255,210,120,.9);box-shadow:0 0 18px rgba(226,166,65,.18),inset 0 0 0 1px rgba(255,235,180,.08)}
.cabinModal{position:fixed;inset:0;z-index:92;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s ease}.cabinModal.open{opacity:1;visibility:visible;pointer-events:auto}.cabinBackdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 54%,rgba(99,50,12,.34),rgba(0,0,0,.83) 66%),linear-gradient(180deg,rgba(2,4,3,.34),rgba(0,0,0,.9));backdrop-filter:blur(5px) brightness(.72)}
.cabinRoom{position:absolute;left:50%;top:50%;width:min(94vw,1180px);height:min(86vh,720px);transform:translate(-50%,-48%) scale(.97);opacity:0;transition:transform .58s cubic-bezier(.16,1,.28,1),opacity .42s ease;overflow:hidden;border:1px solid rgba(225,164,61,.66);border-radius:30px;background:radial-gradient(circle at 50% 62%,rgba(245,149,46,.20),transparent 28%),radial-gradient(circle at 18% 35%,rgba(94,62,21,.50),transparent 34%),radial-gradient(circle at 88% 38%,rgba(43,69,46,.38),transparent 32%),linear-gradient(180deg,#26170c,#090604 76%,#020101);box-shadow:0 36px 120px rgba(0,0,0,.82),inset 0 0 0 1px rgba(255,228,163,.10),inset 0 -80px 140px rgba(0,0,0,.46)}
.cabinModal.open .cabinRoom{transform:translate(-50%,-50%) scale(1);opacity:1}.cabinRoom:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 26%,transparent 74%,rgba(0,0,0,.42)),radial-gradient(circle at 50% 72%,rgba(255,181,70,.20),transparent 38%);pointer-events:none}.cabinRoom:after{content:"";position:absolute;left:4%;right:4%;bottom:11%;height:22%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.46),transparent 66%);filter:blur(12px);pointer-events:none}.cabinClose{position:absolute;right:20px;top:18px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(226,166,65,.72);background:rgba(6,4,2,.56);color:#ffe7ae;font-size:28px;cursor:pointer}.cabinHeader{position:absolute;z-index:4;left:50%;top:28px;transform:translateX(-50%);text-align:center;text-shadow:0 3px 18px rgba(0,0,0,.8)}.cabinKicker{display:block;text-transform:uppercase;letter-spacing:.25em;color:#d5a14d;font-size:12px;margin-bottom:6px}.cabinHeader h1{margin:0;color:#ffe5a4;font-size:clamp(38px,5vw,72px);line-height:.96;filter:drop-shadow(0 0 18px rgba(229,164,63,.26))}.cabinHeader p{margin:10px 0 0;color:#d1ad73;font-size:15px}.cabinFireplace{position:absolute;z-index:3;left:50%;bottom:15%;width:270px;height:255px;transform:translateX(-50%);filter:drop-shadow(0 24px 28px rgba(0,0,0,.62))}.mantle{position:absolute;left:0;right:0;bottom:118px;height:58px;border:1px solid rgba(210,148,55,.44);border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#61411d,#251208);box-shadow:inset 0 0 18px rgba(255,221,137,.08)}.firebox{position:absolute;left:42px;right:42px;bottom:0;height:135px;border:1px solid rgba(224,162,57,.46);border-radius:16px 16px 26px 26px;background:radial-gradient(circle at 50% 70%,rgba(255,131,30,.72),rgba(89,24,8,.45) 42%,rgba(0,0,0,.88) 72%);box-shadow:0 0 72px rgba(255,137,34,.28),inset 0 0 30px rgba(0,0,0,.72);animation:cabinLight 2.7s ease-in-out infinite}.flame{position:absolute;bottom:28px;left:50%;width:54px;height:88px;border-radius:70% 30% 60% 40%;background:linear-gradient(180deg,#fff0a6,#ff9d2e 48%,#a91d08);mix-blend-mode:screen;filter:blur(.2px);transform-origin:50% 100%;animation:flameFlicker 1.1s ease-in-out infinite}.f1{margin-left:-58px;transform:rotate(-10deg) scale(.82);animation-delay:.1s}.f2{margin-left:-25px;height:105px;width:62px;animation-delay:.28s}.f3{margin-left:22px;transform:rotate(12deg) scale(.72);animation-delay:.4s}.ember{position:absolute;bottom:38px;left:50%;width:4px;height:4px;border-radius:50%;background:#ffe7a6;box-shadow:0 0 12px #ffb13e;animation:emberRise 3.4s ease-in infinite}.e1{margin-left:-42px;animation-delay:.2s}.e2{margin-left:8px;animation-delay:1.1s}.e3{margin-left:43px;animation-delay:2s}@keyframes cabinLight{50%{box-shadow:0 0 96px rgba(255,153,45,.42),inset 0 0 24px rgba(0,0,0,.66);filter:brightness(1.14)}}@keyframes flameFlicker{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-9px) rotate(4deg) scale(1.08,.94)}}@keyframes emberRise{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translateY(-106px) translateX(20px) scale(.12)}}
.cabinHotspot{position:absolute;z-index:4;width:230px;padding:16px 18px;border-radius:18px;border:1px solid rgba(225,166,67,.48);background:linear-gradient(180deg,rgba(31,20,9,.82),rgba(5,3,1,.74));color:#ffe7ad;text-align:left;font-family:Georgia,'Times New Roman',serif;cursor:pointer;box-shadow:0 18px 34px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,226,154,.06);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.cabinHotspot:hover{transform:translateY(-8px) scale(1.025);box-shadow:0 28px 44px rgba(0,0,0,.52),0 0 30px rgba(224,163,64,.18);filter:brightness(1.1)}.cabinHotspot strong{display:block;font-size:20px;color:#ffe3a1}.cabinHotspot span{display:block;margin-top:5px;color:#caa36b;font-size:13px}.shelfHotspot{left:8%;bottom:21%}.packHotspot{left:50%;bottom:4%;transform:translateX(-50%)}.packHotspot:hover{transform:translateX(-50%) translateY(-8px) scale(1.025)}.profileHotspot{right:8%;bottom:21%}.cabinBoard{position:absolute;z-index:3;right:9%;top:26%;width:245px;min-height:160px;padding:18px 18px 16px;border:1px solid rgba(214,150,55,.36);border-radius:18px;background:linear-gradient(180deg,rgba(43,24,8,.72),rgba(8,4,2,.72));box-shadow:inset 0 0 35px rgba(0,0,0,.42);display:flex;flex-direction:column;gap:10px}.cabinBoard span{display:block;padding:9px 11px;border-radius:10px;background:rgba(255,226,153,.08);color:#dcb979;font-size:13px;letter-spacing:.06em;text-transform:uppercase}.cabinDust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.cabinDust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,222,149,.75);box-shadow:0 0 10px rgba(255,207,107,.65);animation:cabinDust var(--dur,7s) linear forwards}@keyframes cabinDust{from{opacity:0;transform:translate3d(0,20px,0)}15%{opacity:.85}to{opacity:0;transform:translate3d(var(--dx,20px),-160px,0)}}
body.cabin-active .app{filter:blur(2px) brightness(.55)}
@media(max-width:760px){.cabinRoom{height:90vh}.cabinHeader h1{font-size:42px}.cabinFireplace{transform:translateX(-50%) scale(.82);bottom:22%}.shelfHotspot{left:5%;bottom:17%;width:190px}.profileHotspot{right:5%;bottom:17%;width:190px}.packHotspot{width:210px}.cabinBoard{display:none}}

/* v39 — Keeper's Cabin scene integration */
.cabinModal.open{background:#020100;}
.cabinModal .cabinBackdrop{background:#020100;backdrop-filter:none;}
.cabinRoom.cabinScene{
  left:50%;top:50%;width:100vw;height:100vh;max-width:none;max-height:none;
  transform:translate(-50%,-50%) scale(1);border:0;border-radius:0;overflow:hidden;
  background-image:
    radial-gradient(circle at 50% 52%, rgba(255,142,38,.10), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 22%, transparent 78%, rgba(0,0,0,.40)),
    url('assets/ui/keepers-cabin-bg.webp');
  background-size:cover,cover,cover;background-position:center center;
  box-shadow:none;opacity:1;
}
.cabinModal.open .cabinRoom.cabinScene{transform:translate(-50%,-50%) scale(1);}
.cabinRoom.cabinScene:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 66%, rgba(255,135,35,.14), transparent 28%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18));mix-blend-mode:screen;}
.cabinRoom.cabinScene:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.65),inset 0 0 0 1px rgba(218,153,45,.22);}
.cabinHeader,.cabinFireplace,.cabinBoard{display:none!important;}
.cabinClose{right:24px;top:24px;z-index:12;background:rgba(5,3,1,.58);backdrop-filter:blur(8px);}
.keeperRank{position:absolute;left:2.4vw;top:3.1vh;z-index:8;display:flex;align-items:center;gap:14px;min-width:280px;padding:12px 16px 12px 12px;border:1px solid rgba(224,163,64,.42);border-radius:15px;background:linear-gradient(180deg,rgba(9,7,4,.72),rgba(8,5,2,.52));box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,221,137,.05);backdrop-filter:blur(8px);color:#ffe8b2;font-family:Georgia,'Times New Roman',serif;}
.rankSigil{width:60px;height:60px;border-radius:14px;border:1px solid rgba(218,153,45,.65);display:grid;place-items:center;color:#f2c878;font-size:30px;background:radial-gradient(circle,rgba(219,154,55,.18),rgba(0,0,0,.45));box-shadow:0 0 22px rgba(218,153,45,.14)}
.keeperRank strong{display:block;font-size:17px;line-height:1.1}.keeperRank span{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#c99a53;margin:4px 0 8px}.rankBar{width:170px;height:7px;border-radius:999px;border:1px solid rgba(214,150,55,.35);background:rgba(0,0,0,.45);overflow:hidden}.rankBar i{display:block;width:72%;height:100%;background:linear-gradient(90deg,#9f5a1b,#ffd987);box-shadow:0 0 13px rgba(255,194,92,.36)}
.cabinTopIcons{position:absolute;right:5.8vw;top:4.3vh;z-index:8;display:flex;gap:18px}.cabinTopIcons button{width:54px;height:54px;border-radius:50%;border:1px solid rgba(224,163,64,.42);background:rgba(6,4,2,.50);color:#ffd893;font-size:23px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.28);backdrop-filter:blur(8px);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.cabinTopIcons button:hover{transform:translateY(-5px);box-shadow:0 20px 38px rgba(0,0,0,.42),0 0 24px rgba(225,164,61,.16);filter:brightness(1.13)}
.cabinHotspot{z-index:8;width:auto;min-width:220px;padding:14px 18px;border-radius:8px;border-color:rgba(229,168,68,.55);background:linear-gradient(180deg,rgba(18,13,7,.74),rgba(7,4,2,.62));backdrop-filter:blur(6px);}
.shelfHotspot{left:9.8vw;bottom:12vh}.packHotspot{left:48.5vw;bottom:12.3vh;transform:translateX(-50%)}.packHotspot:hover{transform:translateX(-50%) translateY(-8px) scale(1.025)}.profileHotspot{right:20.5vw;bottom:12.7vh}.dailyHotspot{right:7.3vw;bottom:4.2vh;min-width:205px;opacity:.80}.dailyHotspot:hover{opacity:1;}
.lastCardStand{position:absolute;z-index:7;left:63.2vw;top:60.2vh;width:96px;height:136px;border:0;background:transparent;padding:0;cursor:pointer;transform:perspective(720px) rotateZ(11deg) rotateY(-9deg) rotateX(3deg);transform-origin:50% 100%;transition:transform .24s ease,filter .24s ease;}
.lastCardStand:hover{transform:perspective(720px) rotateZ(11deg) rotateY(-9deg) rotateX(3deg) translateY(-8px) scale(1.035);filter:drop-shadow(0 0 18px rgba(234,170,67,.38)) brightness(1.08)}
.lastCardStand img{width:100%;height:100%;object-fit:cover;border-radius:7px;box-shadow:0 13px 22px rgba(0,0,0,.46), -2px 8px 10px rgba(0,0,0,.34);opacity:0;transition:opacity .25s ease;}
.lastCardStand.has-card img{opacity:1}.lastCardEmpty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:700 11px/1.25 Georgia,'Times New Roman',serif;color:#b88942;text-transform:uppercase;letter-spacing:.08em;background:rgba(5,3,2,.28);border-radius:7px;}.lastCardStand.has-card .lastCardEmpty{display:none}
.cabinEmbers{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.cabinEmbers i{position:absolute;left:45%;bottom:29%;width:4px;height:4px;border-radius:50%;background:rgba(255,211,132,.9);box-shadow:0 0 14px #ff9b32;opacity:0;animation:cabinSceneEmber 4.2s ease-in-out infinite}.cabinEmbers i:nth-child(2){left:49%;animation-delay:1s}.cabinEmbers i:nth-child(3){left:54%;animation-delay:2s}.cabinEmbers i:nth-child(4){left:43%;animation-delay:2.8s}.cabinEmbers i:nth-child(5){left:51%;animation-delay:3.3s}@keyframes cabinSceneEmber{0%{opacity:0;transform:translateY(0) translateX(0) scale(.5)}18%{opacity:.85}100%{opacity:0;transform:translateY(-180px) translateX(42px) scale(.1)}}
.cabinDust{z-index:4}.cabinDust i{width:2px;height:2px;background:rgba(255,210,129,.55)}
@media(max-width:900px){.keeperRank{transform:scale(.82);transform-origin:top left}.cabinTopIcons{transform:scale(.82);transform-origin:top right}.cabinHotspot{transform:scale(.88);transform-origin:center}.packHotspot{transform:translateX(-50%) scale(.88)}.packHotspot:hover{transform:translateX(-50%) scale(.88) translateY(-8px)}.lastCardStand{width:74px;height:105px}}

/* v40 — Keeper's Cabin precision polish: new clean background + aligned last-card stand. */
.cabinRoom.cabinScene{
  background-image:
    radial-gradient(circle at 46% 60%, rgba(255,139,38,.10), transparent 27%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 17%, transparent 82%, rgba(0,0,0,.28)),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
    url('assets/ui/keepers-cabin-bg.webp') !important;
  background-size:cover,cover,cover,cover !important;
  background-position:center center !important;
}
.cabinRoom.cabinScene:after{
  box-shadow:inset 0 0 95px rgba(0,0,0,.58), inset 0 0 0 1px rgba(225,164,61,.24) !important;
}
.keeperRank{
  left:2.2vw;top:3.6vh;min-width:265px;padding:11px 15px 11px 11px;
  border-radius:16px;border-color:rgba(232,174,74,.48);
  background:linear-gradient(180deg,rgba(16,11,6,.72),rgba(4,3,2,.58));
  box-shadow:0 16px 38px rgba(0,0,0,.38),0 0 18px rgba(221,157,54,.08),inset 0 0 0 1px rgba(255,232,170,.06);
}
.rankSigil{border-radius:18px;box-shadow:0 0 24px rgba(218,153,45,.16), inset 0 0 16px rgba(255,220,150,.04)}
.cabinTopIcons{right:3.6vw;top:4.3vh;gap:14px}
.cabinTopIcons button{width:50px;height:50px;background:rgba(5,3,1,.48);border-color:rgba(229,169,69,.46);}
.cabinHotspot{
  min-width:0;border-radius:12px;padding:13px 17px;
  background:linear-gradient(180deg,rgba(19,13,7,.76),rgba(4,3,2,.64));
  box-shadow:0 16px 32px rgba(0,0,0,.36),0 0 16px rgba(224,163,64,.08),inset 0 0 0 1px rgba(255,232,170,.06);
}
.cabinHotspot strong{font-size:18px;letter-spacing:.01em}.cabinHotspot span{font-size:12px;color:#d3a96f}.shelfHotspot{left:7.6vw;bottom:9.8vh;width:285px}.packHotspot{left:49.8vw;bottom:11.9vh;width:270px;text-align:center}.profileHotspot{display:none}.dailyHotspot{right:4.7vw;bottom:4.6vh;width:230px;opacity:.72}.dailyHotspot.claimed{animation:dailyPulse .85s ease both}@keyframes dailyPulse{50%{filter:brightness(1.45);box-shadow:0 0 34px rgba(255,199,95,.32)}}
.cabinClose{right:22px;top:22px;width:42px;height:42px;border-color:rgba(229,169,69,.48);font-size:26px;opacity:.72}.cabinClose:hover{opacity:1;filter:brightness(1.15)}

/* Last drawn card: aligned to the physical stand in the background. */
.lastCardStand{
  left:61.95vw !important;
  top:55.35vh !important;
  width:124px !important;
  height:176px !important;
  transform:perspective(950px) rotateZ(-4.8deg) rotateY(-13deg) rotateX(5deg) !important;
  transform-origin:50% 100% !important;
  z-index:9 !important;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.48));
}
.lastCardStand:hover{
  transform:perspective(950px) rotateZ(-4.8deg) rotateY(-13deg) rotateX(5deg) translateY(-7px) scale(1.026) !important;
  filter:drop-shadow(0 0 18px rgba(235,174,72,.36)) drop-shadow(0 18px 18px rgba(0,0,0,.50)) brightness(1.06) !important;
}
.lastCardStand img{
  width:100%;height:100%;object-fit:cover;border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,230,160,.28),0 9px 18px rgba(0,0,0,.48);
  transform:none !important;
}
.lastCardEmpty{
  border:1px solid rgba(226,166,65,.30);
  background:linear-gradient(180deg,rgba(10,7,4,.52),rgba(0,0,0,.28));
  color:#c99b55;
}
.cabinEmbers i{bottom:31%;}
.cabinDust i{background:rgba(255,213,135,.48);box-shadow:0 0 8px rgba(255,203,104,.52)}
@media(max-width:1200px){.lastCardStand{width:105px!important;height:149px!important;left:62.1vw!important;top:55.7vh!important}.shelfHotspot{width:250px}.packHotspot{width:245px}.dailyHotspot{width:205px}}
@media(max-width:900px){.lastCardStand{width:82px!important;height:116px!important;left:62.2vw!important;top:56vh!important}}

/* v42 — Cabin perfection pass: custom panel art, no daily reward, precision last-card mount. */
.cabinRoom.cabinScene{
  background-image:
    radial-gradient(circle at 46% 60%, rgba(255,139,38,.11), transparent 27%),
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 17%, transparent 82%, rgba(0,0,0,.27)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.18)),
    url('assets/ui/keepers-cabin-bg.webp') !important;
}

/* Replace the old HTML panels with the supplied artwork. */
.cabinHotspot.shelfHotspot,
.cabinHotspot.packHotspot{
  border:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  color:transparent !important;
  overflow:visible !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.50));
}
.cabinHotspot.shelfHotspot strong,
.cabinHotspot.shelfHotspot span,
.cabinHotspot.packHotspot strong,
.cabinHotspot.packHotspot span{
  opacity:0 !important;
  pointer-events:none !important;
}
.cabinHotspot.shelfHotspot{
  background-image:url('assets/ui/panel-memory-shelf.webp') !important;
  left:5.8vw !important;
  bottom:5.2vh !important;
  width:min(36vw,520px) !important;
  height:calc(min(36vw,520px) * 0.572) !important;
}
.cabinHotspot.packHotspot{
  background-image:url('assets/ui/panel-booster-open.webp') !important;
  left:50% !important;
  bottom:4.8vh !important;
  width:min(39vw,560px) !important;
  height:calc(min(39vw,560px) * 0.572) !important;
  transform:translateX(-50%) !important;
}
.cabinHotspot.shelfHotspot:hover{
  transform:translateY(-7px) scale(1.018) !important;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(229,165,62,.26)) brightness(1.08) !important;
}
.cabinHotspot.packHotspot:hover{
  transform:translateX(-50%) translateY(-7px) scale(1.018) !important;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.62)) drop-shadow(0 0 26px rgba(255,178,58,.32)) brightness(1.09) !important;
}

/* Daily reward removed from Cabin. */
.dailyHotspot,
#cabinDaily{display:none !important;}

/* v43 — final precision placement for the last drawn card in the physical tabletop stand. */
.lastCardStand{
  left:62.72vw !important;
  top:59.12vh !important;
  width:124px !important;
  height:176px !important;
  transform:perspective(1050px) rotateZ(7.8deg) rotateY(-10.5deg) rotateX(4deg) skewY(-1.2deg) !important;
  transform-origin:50% 100% !important;
  z-index:9 !important;
  filter:drop-shadow(0 13px 15px rgba(0,0,0,.56));
}
.lastCardStand::after{
  content:"";
  position:absolute;
  left:9%; right:6%; bottom:-3%; height:14%;
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.46));
  pointer-events:none;
  z-index:3;
}
.lastCardStand:hover{
  transform:perspective(1050px) rotateZ(7.8deg) rotateY(-10.5deg) rotateX(4deg) skewY(-1.2deg) translateY(-7px) scale(1.025) !important;
  filter:drop-shadow(0 0 18px rgba(235,174,72,.34)) drop-shadow(0 18px 18px rgba(0,0,0,.55)) brightness(1.06) !important;
}
.lastCardStand img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:5px !important;
  box-shadow:0 0 0 1px rgba(255,230,160,.30),0 10px 18px rgba(0,0,0,.52) !important;
}
.lastCardEmpty{
  border-radius:5px !important;
  transform:none !important;
}

@media(max-width:1200px){
  .cabinHotspot.shelfHotspot{width:min(38vw,440px)!important;height:calc(min(38vw,440px) * .572)!important;left:4.8vw!important;bottom:5.8vh!important;}
  .cabinHotspot.packHotspot{width:min(42vw,480px)!important;height:calc(min(42vw,480px) * .572)!important;bottom:5.4vh!important;}
  .lastCardStand{width:108px!important;height:153px!important;left:62.85vw!important;top:59.05vh!important;}
}
@media(max-width:900px){
  .cabinHotspot.shelfHotspot{width:270px!important;height:154px!important;left:3vw!important;bottom:5vh!important;}
  .cabinHotspot.packHotspot{width:290px!important;height:166px!important;bottom:5vh!important;}
  .lastCardStand{width:86px!important;height:122px!important;left:62.95vw!important;top:59.2vh!important;}
}

/* v44 — final tabletop card mount polish: fills the wooden stand more naturally. */
.lastCardStand{
  left:63.08vw !important;
  top:59.72vh !important;
  width:136px !important;
  height:193px !important;
  transform:perspective(1120px) rotateZ(6.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) !important;
  transform-origin:50% 100% !important;
  z-index:9 !important;
  filter:drop-shadow(0 15px 17px rgba(0,0,0,.60));
}
.lastCardStand::before{
  content:"";
  position:absolute;
  inset:-3% -3% -1% -3%;
  border-radius:8px;
  background:radial-gradient(ellipse at 52% 66%, rgba(255,177,67,.12), transparent 62%);
  pointer-events:none;
  z-index:-1;
}
.lastCardStand::after{
  content:"";
  position:absolute;
  left:7%; right:5%; bottom:-4%; height:18%;
  border-radius:0 0 13px 13px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58) 62%, rgba(0,0,0,.72));
  pointer-events:none;
  z-index:3;
}
.lastCardStand:hover{
  transform:perspective(1120px) rotateZ(6.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) translateY(-7px) scale(1.022) !important;
  filter:drop-shadow(0 0 18px rgba(235,174,72,.32)) drop-shadow(0 20px 20px rgba(0,0,0,.58)) brightness(1.06) !important;
}
.lastCardStand img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:5.5px !important;
  box-shadow:
    0 0 0 1px rgba(255,231,165,.34),
    inset 0 0 12px rgba(255,218,142,.08),
    0 11px 20px rgba(0,0,0,.58) !important;
  transform:none !important;
}
.lastCardEmpty{
  border-radius:5.5px !important;
}
@media(max-width:1200px){
  .lastCardStand{width:118px!important;height:167px!important;left:63.18vw!important;top:59.72vh!important;}
}
@media(max-width:900px){
  .lastCardStand{width:94px!important;height:133px!important;left:63.22vw!important;top:59.82vh!important;}
}


/* v45 — micro-adjustment only: tabletop card shifted left/down and tilted clockwise. */
.lastCardStand{
  left:62.50vw !important;
  top:59.82vh !important;
  width:136px !important;
  height:193px !important;
  transform:perspective(1120px) rotateZ(11.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) !important;
  transform-origin:50% 100% !important;
}
.lastCardStand:hover{
  transform:perspective(1120px) rotateZ(11.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) translateY(-7px) scale(1.022) !important;
}
@media(max-width:1200px){
  .lastCardStand{width:118px!important;height:167px!important;left:62.60vw!important;top:59.82vh!important;}
}
@media(max-width:900px){
  .lastCardStand{width:94px!important;height:133px!important;left:62.64vw!important;top:59.92vh!important;}
}

/* v46 — final micro-adjustment: 2° counter-clockwise from v45 and 4px further left. */
.lastCardStand{
  left:62.29vw !important;
  top:59.82vh !important;
  transform:perspective(1120px) rotateZ(9.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) !important;
}
.lastCardStand:hover{
  transform:perspective(1120px) rotateZ(9.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) translateY(-7px) scale(1.022) !important;
}
@media(max-width:1200px){
  .lastCardStand{left:62.39vw!important;top:59.82vh!important;}
}
@media(max-width:900px){
  .lastCardStand{left:62.43vw!important;top:59.92vh!important;}
}

/* v47 — Cabin Polish Wave 1: final card-holder lock + warmer living-room atmosphere. */
/* Final lock: the tabletop card is moved exactly 3px left from v46. */
.lastCardStand{
  left:calc(62.29vw - 3px) !important;
  top:59.82vh !important;
  transform:perspective(1120px) rotateZ(9.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) !important;
}
.lastCardStand:hover{
  transform:perspective(1120px) rotateZ(9.2deg) rotateY(-9.2deg) rotateX(4.6deg) skewY(-1.0deg) translateY(-7px) scale(1.022) !important;
}
@media(max-width:1200px){.lastCardStand{left:calc(62.39vw - 3px)!important;top:59.82vh!important;}}
@media(max-width:900px){.lastCardStand{left:calc(62.43vw - 3px)!important;top:59.92vh!important;}}

/* The room breathes subtly now: no layout changes, only light and atmosphere. */
.cabinRoom.cabinScene::before{
  background:
    radial-gradient(circle at 45% 61%, rgba(255,139,38,.18), transparent 25%),
    radial-gradient(circle at 38% 72%, rgba(255,176,77,.10), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.18)) !important;
  mix-blend-mode:screen;
  animation:cabinFireBreath 4.8s ease-in-out infinite;
}
.cabinRoom.cabinScene::after{
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.66),
    inset 0 0 0 1px rgba(218,153,45,.23),
    inset 0 -80px 130px rgba(255,119,29,.045) !important;
}
@keyframes cabinFireBreath{
  0%,100%{opacity:.78;filter:brightness(1)}
  32%{opacity:.92;filter:brightness(1.09)}
  57%{opacity:.70;filter:brightness(.94)}
  78%{opacity:.96;filter:brightness(1.12)}
}

/* Candle/lantern glints are intentionally tiny overlays that sit on top of the background art. */
.cabinLightFlicker{
  position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:.62;
  background:
    radial-gradient(circle at 20.4% 34.8%, rgba(255,198,103,.22), transparent 4.7%),
    radial-gradient(circle at 74.7% 29.6%, rgba(255,190,92,.16), transparent 4.8%),
    radial-gradient(circle at 84.2% 72.1%, rgba(255,176,74,.14), transparent 5.2%),
    radial-gradient(circle at 43.3% 59.6%, rgba(255,133,41,.16), transparent 9%);
  animation:cabinCandleFlicker 2.8s steps(5,end) infinite;
}
@keyframes cabinCandleFlicker{
  0%,100%{opacity:.47;filter:brightness(.95)}
  20%{opacity:.68;filter:brightness(1.18)}
  43%{opacity:.52;filter:brightness(1.02)}
  61%{opacity:.73;filter:brightness(1.24)}
  83%{opacity:.58;filter:brightness(1.06)}
}

/* Panels now share one premium hover language without changing their placement. */
.cabinHotspot.shelfHotspot,
.cabinHotspot.packHotspot{
  transition:transform .24s cubic-bezier(.16,1,.28,1), filter .24s ease !important;
}
.cabinHotspot.shelfHotspot:hover,
.cabinHotspot.packHotspot:hover{
  will-change:transform,filter;
}

/* Last card gets a tiny warm contact glow so it reads as physically seated in the holder. */
.lastCardStand::before{
  background:
    radial-gradient(ellipse at 52% 72%, rgba(255,178,68,.16), transparent 56%),
    linear-gradient(180deg, transparent 76%, rgba(0,0,0,.25)) !important;
}
.lastCardStand img{
  filter:saturate(1.02) contrast(1.015) !important;
}

/* Softer, more abundant floating dust. Uses existing generated particles. */
.cabinDust i{
  width:2.5px!important;height:2.5px!important;
  background:rgba(255,221,150,.58)!important;
  box-shadow:0 0 10px rgba(255,207,107,.58)!important;
}
.cabinEmbers i{
  animation-duration:4.8s!important;
  box-shadow:0 0 17px rgba(255,156,49,.95)!important;
}

/* Entry feels slightly more staged and game-menu-like. */
.cabinModal.open .cabinRoom.cabinScene{
  animation:cabinSceneArrive .9s cubic-bezier(.16,1,.28,1) both;
}
@keyframes cabinSceneArrive{
  0%{opacity:0;transform:translate(-50%,-48.5%) scale(.982);filter:brightness(.78) saturate(.95)}
  65%{opacity:1;filter:brightness(1.06) saturate(1.04)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1) saturate(1)}
}

/* v48 — FINAL CARD HOLDER LOCK: only move the tabletop card 4px further left from v47. */
.lastCardStand{
  left:calc(62.39vw - 7px)!important;
}
.lastCardStand:hover{
  transform:perspective(760px) rotateZ(14deg) rotateY(-9deg) rotateX(3deg) translateY(-7px) scale(1.035)!important;
}
@media(max-width:1200px){.lastCardStand{left:calc(62.39vw - 7px)!important;top:59.82vh!important;}}
@media(max-width:900px){.lastCardStand{left:calc(62.43vw - 7px)!important;top:59.92vh!important;}}


/* v2 online account layer */
.accountChip{position:absolute;right:72px;top:17px;z-index:8;display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid rgba(177,143,76,.38);background:rgba(12,12,14,.72);backdrop-filter:blur(10px);border-radius:12px;color:#eee;font-size:12px;box-shadow:0 8px 30px rgba(0,0,0,.24)}
.accountChip b{color:#d7b96c;font-weight:700}.authGate{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(4,5,7,.86);backdrop-filter:blur(14px)}.authGate.open{display:flex}.authCard{width:min(520px,88vw);padding:34px 34px 30px;text-align:center;border:1px solid rgba(194,158,79,.42);border-radius:22px;background:linear-gradient(180deg,rgba(30,29,27,.98),rgba(12,13,15,.98));box-shadow:0 30px 90px rgba(0,0,0,.65)}.authCard img{width:min(360px,80%);height:auto;margin:0 auto 22px}.authCard p{color:#ddd;font-size:16px;margin:0 0 22px}.authCard small{display:block;color:#8e8e91;margin-top:16px}.authLogin{display:inline-flex;text-decoration:none;align-items:center;justify-content:center;padding:13px 20px}.toast{position:fixed;left:50%;bottom:34px;z-index:12000;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(15,15,18,.95);border:1px solid rgba(193,157,78,.5);color:#eee;padding:11px 16px;border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.45);transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.accountChip{right:16px;top:70px}.accountChip span{display:none}}