/* Original v32 base style remains unmodified; new components only. */
:root{--accent:#b69b5f}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d2b676;outline-offset:3px}#app{min-height:100svh}.boot{padding:22vh 5vw;text-align:center;color:#b8a273;font-size:24px;letter-spacing:.28em}.welcome{min-height:100svh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 60% 0,#29313b,#0b0e12 65%)}.auth{border:1px solid #695b42;background:linear-gradient(145deg,#1d2024,#10151c);padding:30px;max-width:440px;width:100%;box-shadow:0 20px 80px #0008}.auth h1{font-size:32px;letter-spacing:.15em;color:#eee4c7;margin:10px 0}.auth p{color:#a9afba;font-size:13px}.auth input{display:block;width:100%;background:#0a0f14;border:1px solid #404b59;color:#fff;padding:13px;margin:12px 0}.auth .row{display:flex;gap:9px;flex-wrap:wrap}.auth .row button{flex:1}.shell-content{min-height:0;overflow:auto}.screen-inner{width:100%;max-width:1400px;margin:0 auto;padding:24px 28px 44px}.screen-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}.screen-head h1{font-size:27px;margin:3px 0}.screen-head small{color:var(--muted)}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.home-hero{position:relative;min-height:360px;overflow:hidden;border:1px solid #34414f;background:linear-gradient(100deg,#090e16 16%,#23303e 100%)}.home-hero img{position:absolute;height:116%;width:65%;object-fit:contain;right:-5%;bottom:-11%;filter:drop-shadow(0 22px 18px #000a)}.hero-copy{position:relative;z-index:2;padding:38px;max-width:60%;text-shadow:0 2px 8px #000}.hero-copy h2{font-size:clamp(28px,3.1vw,45px);letter-spacing:.09em;margin:12px 0}.hero-copy p{color:#bac8d8;line-height:1.8;font-size:12px}.hero-copy .btn{margin-top:18px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px}.quick{background:linear-gradient(145deg,#171d25,#0f141a);text-align:left;min-height:106px;padding:18px;border:1px solid #35404d;color:#ebe5d5}.quick strong{display:block;font-size:16px;margin-bottom:7px}.quick small{display:block;color:#8994a1;font-size:11px}.sidepanel{padding:18px}.sidepanel h3{font-size:13px;margin:3px 0 15px;color:#ead8b0}.statline{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #2b343e;padding:12px 0;font-size:12px}.statline b{color:#f1e3bf}.card-grid-game{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:14px;align-content:start}.tcg-card{--art:#667c99;position:relative;isolation:isolate;aspect-ratio:0.70;background:linear-gradient(135deg,#33343b 0,#0b1017 24%,#191e28 60%,#181923 100%);border:2px solid #6b6f74;box-shadow:0 4px 12px #0008;overflow:hidden;min-width:0;color:#f9f5e9;text-shadow:0 2px 4px #0009;padding:0;display:flex;flex-direction:column;text-align:left;transition:transform .18s,border-color .18s}.tcg-card:hover{transform:translateY(-3px);border-color:#d0b16c}.tcg-card:before{content:"";position:absolute;z-index:-1;inset:5px;background:radial-gradient(circle at 58% 39%,var(--art) 0%,#202735 56%,#0b1016 88%);opacity:.9}.tcg-card:after{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid #ffffff2e}.tcg-card.foil:after,.tcg-card.hr:after,.tcg-card.sp:after{background:linear-gradient(117deg,transparent 16%,#d5fff033 31%,transparent 45%,#fc9fff33 66%,transparent 83%);background-size:240% 240%;animation:cardshine 5s linear infinite;mix-blend-mode:screen}@keyframes cardshine{0%{background-position:0% 0%}100%{background-position:200% 200%}}.tcg-card.hr{border-color:#dbb65a}.tcg-card.sp{border-color:#c6a1ff}.tcg-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#0a141fdc,#27303c99,#0a141fba);margin:7px 7px 0;padding:7px 8px;gap:4px;min-height:30px}.tcg-head strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcg-head b{font-size:10px;color:#ffeba8}.tcg-number{font-size:9px;letter-spacing:.08em;color:#ece2c7}.tcg-portrait{height:57%;width:100%;object-fit:contain;filter:drop-shadow(0 11px 8px #0009);flex-shrink:0;position:relative;z-index:1}.tcg-footer{margin:auto 7px 7px;padding:6px 7px 9px;border:1px solid #ffffff45;background:linear-gradient(170deg,#111924dc,#111723f4);width:calc(100% - 14px);font-size:9px;line-height:1.4;min-height:56px}.tcg-footer b{display:block;font-size:11px;margin-bottom:3px;color:#f2deae}.tcg-footer em{font-style:normal;color:#aeb9c8;font-size:9px}.tcg-card.unknown{filter:grayscale(1);opacity:.75;background:#0e141b;border-style:dashed}.tcg-card.unknown img{filter:brightness(0) drop-shadow(0 0 4px #314356);opacity:.65}.atlas-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid #434c55;border-bottom:1px solid #434c55;padding:10px 2px;margin:13px 0 20px;color:#c4ad78;font-size:12px}.progressline{height:5px;background:#263441;flex:1;max-width:280px}.progressline i{display:block;height:100%;background:#c7ac75}.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 15px}.filters input,.filters select,.filters button{background:#161e27;color:#eee;border:1px solid #3d4856;padding:9px}.filters input{min-width:210px}.inventory-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.selected-card{outline:3px solid #c1a466;outline-offset:1px}.slot-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid #394656;padding:16px;margin-bottom:16px;background:#101720}.slot{border:1px dashed #556070;min-height:100px;display:grid;place-items:center;text-align:center;gap:8px;padding:11px;color:#b8c3d0;font-size:11px}.slot strong{font-size:14px;color:#ece0c0}.slot.filled{border-style:solid;border-color:#9a8455}.slot img{width:65px;height:60px;object-fit:contain}.pack-display{display:flex;gap:20px;align-items:center;justify-content:center;min-height:320px;padding:18px;background:radial-gradient(ellipse at 50% 30%,#273443,#0e151b 70%)}.pack-display img{width:205px;max-width:45vw;filter:drop-shadow(0 20px 18px #000);cursor:pointer}.pack-note{max-width:300px;color:#d0d7de;line-height:1.8}.pack-stage{padding:17px;border:1px solid #384657;background:#111a24}.opened-cards{display:flex;gap:9px;overflow:auto;padding:16px 3px;justify-content:center}.opened-cards .tcg-card{width:175px;flex:none}.flip{perspective:900px;cursor:pointer}.flip .tcg-card{backface-visibility:hidden}.flip.is-hidden{background:center/cover url('/assets/branding/card-back.webp')}.flip.is-hidden .tcg-card{visibility:hidden}.showcase{display:flex;gap:18px;align-items:start;flex-wrap:wrap}.showcase .tcg-card{width:245px;flex-shrink:0}.showcase .description{flex:1;min-width:230px;line-height:1.8;color:#c1cbd7}.selectbox{padding:12px;background:#151d27;border:1px solid #34414d;margin:12px 0}.selectbox label{display:block;font-size:11px;color:#a9b6c4}.selectbox input{width:100%}.empty{padding:32px 16px;text-align:center;color:#93a1af;background:#101720;border:1px dashed #374451}.mon-chip{display:inline-flex;align-items:center;gap:6px;margin:4px;padding:5px 8px;border:1px solid #45515d;font-size:11px;background:#18222a}.mon-chip img{width:32px;height:32px;object-fit:contain}#toast{position:fixed;z-index:200;bottom:72px;left:50%;transform:translateX(-50%);background:#142535;border:1px solid #bd9c63;color:white;padding:11px 20px;box-shadow:0 9px 24px #000a;max-width:90vw;display:none}#toast.show{display:block}.tiny{color:#8d98a6;font-size:11px}.muted{color:#9ba5af}.row-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.card-detail{width:min(800px,95vw);max-height:88vh;overflow:auto;background:#121a24;border:1px solid #857149;padding:24px}.veil{position:fixed;inset:0;background:#050a11da;z-index:180;display:grid;place-items:center}.veil[hidden]{display:none}.deck-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}.deck-slots button{background:#1b252f;border:1px solid #657181;min-height:80px;color:#fff}.deck-slots img{height:48px;width:100%;object-fit:contain}.battle-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.battle-choices button{min-height:100px;border:1px solid #3b566e;background:#122134;color:white;padding:10px}.battle-choices button[disabled]{opacity:.4}.battle-choices img{height:80px;width:100%;object-fit:contain}.battle-choices button.selected{border-color:#dfbc6c;background:#22394a}.alert{border-left:3px solid #bd9656;padding:10px 14px;background:#15202b;font-size:12px;color:#cbd3e0}.shell-mobile{display:none}
@media(max-width:900px){.content-layout{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.home-hero{min-height:295px}.hero-copy{padding:25px}.home-hero img{right:-19%;width:84%}.deck-slots{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.app{grid-template-rows:49px minmax(0,1fr) 54px}.workspace{display:block;min-height:0}.rail{display:none}.mobile-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:0}.mobile-nav button{font-size:9px;padding:4px 0}.screen-inner{padding:14px 12px 22px}.screen-head h1{font-size:23px}.screen-head{margin-bottom:13px}.topbar{padding:0 10px}.topstats{gap:8px;font-size:9px}.top-actions{gap:2px}.top-actions .btn{padding:6px}.card-grid-game{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tcg-card{max-width:230px}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick{padding:11px;min-height:94px}.quick strong{font-size:13px}.home-hero{min-height:265px}.home-hero img{right:-30%;width:93%;height:104%}.hero-copy{padding:20px;max-width:73%}.hero-copy h2{font-size:27px}.hero-copy p{font-size:10px}.opened-cards{justify-content:start}.opened-cards .tcg-card{width:140px}.slot-panel{gap:5px;padding:8px}.slot{min-height:88px;padding:6px}.slot img{width:45px}.filters input{min-width:0;width:100%}.deck-slots{gap:4px}.deck-slots button{padding:4px}.battle-choices button{padding:5px;font-size:10px;min-height:95px}.battle-choices img{height:65px}.sidepanel{padding:12px}}

/* Keep the original five-card desktop view, with a sequential mobile reveal. */
.flip:not(.is-hidden){animation:card-reveal .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes card-reveal{0%{opacity:.5;transform:rotateY(74deg) scale(.93)}65%{opacity:1;transform:rotateY(-7deg) scale(1.02)}100%{opacity:1;transform:rotateY(0) scale(1)}}
@media(max-width:640px){
 .opened-cards.pack-progress{min-height:300px;display:flex;align-items:center;justify-content:center;overflow:visible;padding:10px}
 .opened-cards.pack-progress .flip{display:none}
 .opened-cards.pack-progress .flip.mobile-next{display:block;min-width:170px;width:min(67vw,220px);height:auto;aspect-ratio:.7;background-position:center;background-size:100% 100%;box-shadow:0 8px 35px #0009}
 .opened-cards.pack-progress .flip.mobile-next .tcg-card{width:100%;height:100%}
 .opened-cards.pack-complete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;justify-items:center}
 .opened-cards.pack-complete .flip{width:100%;min-width:0}
 .opened-cards.pack-complete .tcg-card{width:100%;min-width:0}
 .opened-cards.pack-complete .tcg-head{padding:3px;margin:3px 3px 0;min-height:25px}
 .opened-cards.pack-complete .tcg-head strong{font-size:9px}
 .opened-cards.pack-complete .tcg-footer{font-size:7px;min-height:34px;padding:2px;margin:0 3px 3px;width:calc(100% - 6px)}
 .opened-cards.pack-complete .tcg-footer b{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.flip:not(.is-hidden){animation:none}}