/* Pack presentation follows Carquive beta/core-systems: a quiet graphite room,
   one black/gold back, a single turn, face-up swipe sequence and five-card finish.
   Original Steelward art, names and gameplay values are retained. */
.pr-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:calc(100dvh - 300px);padding:12px 0 20px}
.pr-stage h1{font:500 17px/1.3 Inter,Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:#babac1;margin:0 0 10px}
body.studio-shell #main:has(>.pr-stage){padding-top:20px}
.pr-stage .pr-pack{position:relative;display:block;width:min(210px,25dvh);max-width:65vw;aspect-ratio:650/960;border:0!important;border-radius:9px;background:none!important;padding:0;box-shadow:none;filter:drop-shadow(0 16px 24px #0007);transition:transform .2s;transform:none}
.pr-stage .pr-pack:hover:not(:disabled){transform:translateY(-5px)}
.pr-stage .pr-pack:disabled{cursor:default;opacity:.46}
.pr-stage>p{margin:0;font-family:Inter,Arial,sans-serif}
.pr-stage .pr-availability{font-size:16px;letter-spacing:.7px;color:#dedddf;margin-top:3px}
.studio-shell .pr-stage .pr-open-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:160px;padding:8px 16px;border:0;background:transparent;color:#dec28f;font-size:13px;font-weight:500;box-shadow:none}
.pr-stage .pr-open-label:hover{color:#f2dcae;background:transparent}
.pr-stage .pr-cadence,.pr-stage .pr-scope{font-size:11px;line-height:1.6;color:#a6a8af}
.pr-stage .pr-scope{font-size:10px;color:#8f959e}
.pr-info,.pr-online{max-width:640px;margin:0 auto;padding:12px;text-align:center;font-size:12px;line-height:1.7;color:#a9adb5}
.pr-info summary,.pr-online summary{cursor:pointer;width:fit-content;min-height:32px;margin:auto;color:#c0c3c9}
.pr-info p,.pr-online p{margin:6px 0;font-size:12px;line-height:1.7}
.pr-rarities{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin:12px 0;color:#e5e1d9;font-size:11px}
.pr-online a{color:#dec28f;display:block;margin-top:5px}

/* Shared original card back. Layout and dimensions mirror the reference,
   without importing Carquive's logo, car silhouette or automotive artwork. */
.fp-back-design{box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;aspect-ratio:650/960;overflow:hidden;padding:20% 7% 11%;border:2px solid #57606c;border-radius:10px;background:radial-gradient(ellipse at 50% 46%,#18283a80,transparent 63%),repeating-linear-gradient(57deg,#0b121b 0 4px,#14202c 5px,#0b121b 6px 10px);color:#d8ba7d;font-family:Arial,sans-serif;isolation:isolate;container-type:inline-size;box-shadow:inset 0 0 0 5px #04080d}
.fp-back-design:before{content:'';position:absolute;inset:5% 7%;border:2px solid #b99250;clip-path:polygon(4% 0,96% 0,100% 3%,100% 97%,96% 100%,4% 100%,0 97%,0 3%);pointer-events:none}
.fp-back-frame{position:absolute;inset:6.5% 9%;border:1px solid #caa76379;clip-path:polygon(5% 0,95% 0,100% 3%,100% 97%,95% 100%,5% 100%,0 97%,0 3%)}
.fp-back-brand{position:relative;display:block;font-size:clamp(12px,10.5cqw,30px);font-weight:400;letter-spacing:.16em;white-space:nowrap;text-align:center}
.fp-back-brand small{display:block;color:#c4c9ce;font-size:clamp(5px,3cqw,9px);font-weight:500;letter-spacing:.24em;margin-top:7px}
.fp-back-symbol{font:500 clamp(40px,32cqw,100px)/1 'Barlow Condensed',Arial,sans-serif;color:#c7a463;display:grid;place-items:center;width:1.2em;height:1.3em;border:1px solid #b58f4f66;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);background:#0b121b55;transform:skew(-6deg)}
.fp-back-motto{display:block;text-align:center;font:500 clamp(7px,4.5cqw,14px)/1.75 Arial,sans-serif;letter-spacing:.22em;color:#e6e2dc}
.fp-back-seal{font-size:clamp(14px,9cqw,26px);line-height:1}

#field-pack-dialog{background:#111214!important;color:#eeeef0;font-family:Inter,Arial,sans-serif}
#field-pack-dialog::backdrop{background:#111214!important}
#field-pack-dialog .fp-shell{min-height:100%;max-width:1248px;margin:0 auto;padding:0 36px;display:flex;flex-direction:column}
#field-pack-dialog .fp-header{position:relative;height:68px;min-height:68px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;background:transparent}
#field-pack-dialog .fp-kicker{font:500 11px Inter,Arial,sans-serif;letter-spacing:2px;color:#b7b8bd}
#field-pack-dialog .fp-close{border:0;background:transparent;box-shadow:none;color:#b4b5bd;font:12px Inter,Arial,sans-serif;display:flex;align-items:center;gap:14px;padding:10px 0 10px 14px;min-height:44px}
#field-pack-dialog .fp-close span{font-size:24px;font-weight:300}
#field-pack-dialog .fp-opening{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 0;min-height:0;overflow:hidden}
#field-pack-dialog .fp-progress{display:block;font:400 18px/1.5 Inter,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#a9adb5;margin:0 0 2px}
#field-pack-dialog .fp-stage{position:relative;width:min(280px,calc((100dvh - 245px) * .67708));min-width:180px;max-width:70vw;height:auto;aspect-ratio:650/960;perspective:1000px;isolation:isolate;flex:none}
#field-pack-dialog .fp-card-button{position:relative;inset:auto;display:block;width:100%;height:100%;padding:0;border:0;background:none!important;box-shadow:none;border-radius:8px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;will-change:transform,opacity;color:inherit}
#field-pack-dialog .fp-card-button.is-revealed{cursor:grab}
#field-pack-dialog .fp-card-button.is-revealed:active{cursor:grabbing}
#field-pack-dialog .fp-card-button img{pointer-events:none;-webkit-user-drag:none}
#field-pack-dialog .fp-card-button.is-turning-back{animation:fp-turn-back 280ms cubic-bezier(.4,0,1,1) both;pointer-events:none}
#field-pack-dialog .fp-card-button.is-turning-front{animation:fp-turn-front 420ms cubic-bezier(0,0,.2,1) both;pointer-events:none}
@keyframes fp-turn-back{from{transform:rotateY(0) scale(1)}to{transform:rotateY(90deg) scale(1.025)}}
@keyframes fp-turn-front{from{transform:rotateY(-90deg) scale(1.025)}to{transform:rotateY(0) scale(1)}}
#field-pack-dialog .fp-card-front,#field-pack-dialog .fp-result{--fp-color:#c7ced8;--fp-rgb:199,206,216;position:relative;inset:auto;width:100%;height:100%;transform:none;border:1px solid var(--fp-color);border-radius:9px;padding:3px;overflow:hidden;background:linear-gradient(137deg,#f8ffff 0%,rgba(var(--fp-rgb),.98) 6%,#07111c 13%,#101c2b 49%,#07101a 84%,rgba(var(--fp-rgb),1) 94%,#dce9f4 100%);box-shadow:inset 0 0 0 1px #ffffff20,0 8px 14px #0004;clip-path:polygon(4% 0,96% 0,100% 3%,100% 96%,96% 100%,4% 100%,0 96%,0 4%);text-align:left;container-type:inline-size}
#field-pack-dialog :is(.fp-card-front,.fp-result).rare{--fp-color:#8ab9d5;--fp-rgb:138,185,213}
#field-pack-dialog :is(.fp-card-front,.fp-result).elite{--fp-color:#bd9cc9;--fp-rgb:189,156,201}
#field-pack-dialog :is(.fp-card-front,.fp-result).legendary{--fp-color:#dec184;--fp-rgb:222,193,132}
#field-pack-dialog .fp-face{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;clip-path:polygon(3% 0,97% 0,100% 2%,100% 98%,97% 100%,3% 100%,0 98%,0 2%);background:#15171a}
#field-pack-dialog .fp-front-art{position:relative;display:block;flex:1;min-height:0;height:auto!important;margin:0;padding:0;overflow:hidden;background:#1a1c20;border:0}
#field-pack-dialog .fp-front-art .unit-illustration,#field-pack-dialog .fp-front-art svg{display:block;position:absolute;inset:0;object-fit:cover;object-position:center;width:100%;height:100%;border:0;filter:none;opacity:1}
#field-pack-dialog .fp-front-art:after{content:'';position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#070d1599);pointer-events:none}
#field-pack-dialog .fp-front-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;z-index:2;font-family:Inter,Arial,sans-serif;letter-spacing:0}
#field-pack-dialog .fp-rarity{font-size:clamp(9px,5.4cqw,13px)!important;font-weight:650;letter-spacing:.045em!important;padding:7px 15px 7px 8px;border-right:1px solid var(--fp-color);border-bottom:2px solid var(--fp-color);background:linear-gradient(125deg,#0a0e16,#0c1623 73%,rgba(var(--fp-rgb),.39));color:#f2f3f6;clip-path:polygon(0 0,100% 0,89% 100%,0 100%);text-transform:uppercase;line-height:1;white-space:nowrap}
#field-pack-dialog .fp-supply{display:flex;align-items:center;gap:3px;padding:6px;background:#070d15b8;color:#f7f9ff;font:600 clamp(10px,6cqw,16px) Inter,Arial,sans-serif}
#field-pack-dialog .fp-supply small{font:500 clamp(5px,2.7cqw,8px) Inter,Arial,sans-serif;letter-spacing:0}
#field-pack-dialog .fp-owned{position:absolute;bottom:9px;left:8px;right:auto;z-index:3;max-width:calc(100% - 16px);margin:0;padding:4px 7px;border:1px solid #648372;border-radius:4px;background:#1b2a25f5;color:#d3e3da;font:500 clamp(7px,3.8cqw,10px)/1.3 Inter,Arial,sans-serif!important;letter-spacing:.2px;white-space:normal;box-shadow:none}
#field-pack-dialog .fp-owned.duplicate{background:#302c24f5;border-color:#897e65;color:#e4ddcb}
#field-pack-dialog .fp-owned.unknown{background:#252a31f5;border-color:#6b788b;color:#d7dce3}
#field-pack-dialog .fp-front-info{height:auto!important;min-height:0;flex:none;padding:9px 10px 9px!important;background:#15171a;display:flex;flex-direction:column;gap:7px;color:#eeeef0}
#field-pack-dialog .fp-front-info h2{font:600 clamp(12px,6.4cqw,19px)/1.2 Inter,Arial,sans-serif;letter-spacing:-.025em;margin:0!important;min-height:2.4em;overflow-wrap:anywhere}
#field-pack-dialog .fp-meta{display:grid;grid-template-columns:1fr 1.4fr;gap:7px;border-top:1px solid #c7d6ec30;padding-top:6px;font-size:clamp(7px,3.4cqw,10px);line-height:1.35;color:#b9c0ca}
#field-pack-dialog .fp-meta span{min-width:0;overflow-wrap:anywhere}
#field-pack-dialog .fp-meta span:last-child{text-align:right}
#field-pack-dialog .fp-stats{display:flex;flex-direction:row;justify-content:space-between;gap:8px;padding:0;margin:0;border:0;color:#e0e4e9;font:600 clamp(10px,4.5cqw,14px) Inter,Arial,sans-serif}
#field-pack-dialog .fp-stats span{display:flex;align-items:center;gap:5px}
#field-pack-dialog .fp-stats small{font:400 clamp(6px,2.7cqw,8px) Inter,Arial,sans-serif;letter-spacing:.3px;color:#9da6b4}
#field-pack-dialog .fp-card-brand{display:block;text-align:center;border-top:1px solid rgba(var(--fp-rgb),.3);padding-top:7px;font-size:clamp(8px,4.5cqw,12px);font-weight:500;letter-spacing:.23em;color:#e8eaee}
#field-pack-dialog .fp-hint{font:12px/1.5 Inter,Arial,sans-serif;letter-spacing:0;color:#b4b5bd;margin:0!important}
#field-pack-dialog .fp-key-help{font:10px/1.4 Inter,Arial,sans-serif;margin:-7px 0 0;color:#8e939c}
#field-pack-dialog .fp-footnote{flex:none;margin:0;padding:12px 0 max(18px,env(safe-area-inset-bottom));text-align:center;font:10px/1.6 Inter,Arial,sans-serif;letter-spacing:0;color:#969ca5}
#field-pack-dialog .fp-summary{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 0;text-align:center}
#field-pack-dialog .fp-summary h1{font:500 30px/1.2 Inter,Arial,sans-serif;letter-spacing:-1px;margin:12px 0;color:#eeeef0}
#field-pack-dialog .fp-summary>p:not(.fp-progress){font:12px/1.6 Inter,Arial,sans-serif;color:#a9adb5;margin:0}
#field-pack-dialog .fp-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;width:100%;max-width:1100px;margin:24px 0 28px}
#field-pack-dialog .fp-result{height:auto;aspect-ratio:650/960}
#field-pack-dialog .fp-finish{display:inline-flex;justify-content:center;align-items:center;min-width:180px;min-height:44px;padding:10px 24px;border:1px solid #dec28f;border-radius:6px;background:#dec28f;color:#191a1d;font:600 13px Inter,Arial,sans-serif;box-shadow:none}
#field-pack-dialog .fp-finish:hover{background:#e3c88f;border-color:#e3c88f}
#field-pack-dialog .fp-summary .fp-shield-bonus{margin:0 0 22px;color:#e3c88f;font-size:14px}
#field-pack-dialog .fp-shield-bonus small{display:block;font-size:10px;color:#a9adb5;margin-top:5px}
#field-pack-dialog :is(.fp-card-button,.fp-close,.fp-finish):focus-visible,.pr-stage :is(.pr-pack,.pr-open-label):focus-visible{outline:2px solid #e4e2df;outline-offset:5px}
@media(max-width:700px){
 .pr-stage{min-height:calc(100dvh - 285px);gap:8px;padding:8px 0 16px}
 .pr-stage .pr-pack{width:min(200px,25dvh)}
 #field-pack-dialog .fp-shell{padding:0 18px}
 #field-pack-dialog .fp-header{height:58px;min-height:58px}
 #field-pack-dialog .fp-opening{padding:16px 0;gap:12px}
 #field-pack-dialog .fp-stage{width:min(240px,34dvh);min-width:0;max-width:70vw}
 #field-pack-dialog .fp-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:540px}
 #field-pack-dialog .fp-result:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 7px);justify-self:center}
 #field-pack-dialog .fp-summary{justify-content:flex-start;padding-top:20px}
 #field-pack-dialog .fp-front-info{padding:7px 8px!important;gap:6px}
 #field-pack-dialog .fp-front-info h2{font-size:clamp(11px,6.6cqw,17px)}
 #field-pack-dialog .fp-front-info .fp-meta{grid-template-columns:1fr;gap:2px;font-size:clamp(8px,3.5cqw,10px)}
 #field-pack-dialog .fp-meta span:last-child{text-align:left}
 #field-pack-dialog .fp-key-help{margin-top:-5px}
}
@media(max-height:500px) and (min-width:701px){#field-pack-dialog .fp-opening{min-height:400px}#field-pack-dialog .fp-stage{width:210px}}
@media(prefers-reduced-motion:reduce){#field-pack-dialog *,#field-pack-dialog *:before,#field-pack-dialog *:after,.pr-stage .pr-pack{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pr-stage .pr-pack:hover{transform:none}}
@media(forced-colors:active){.fp-back-design,.fp-back-frame,#field-pack-dialog .fp-card-front,#field-pack-dialog .fp-result{border:2px solid CanvasText}#field-pack-dialog .fp-owned{border:1px solid CanvasText}}
#field-pack-dialog .fp-detail-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:-6px 0 0;padding:8px 12px;border:0;background:transparent;box-shadow:none;color:#b7bec9;font:12px Inter,Arial,sans-serif}
#field-pack-dialog .fp-detail-link:hover{color:#f1d89f;background:transparent}
#field-pack-dialog .fp-inspect{flex:1;padding:24px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
#field-pack-dialog .fp-inspect-layout{display:grid;grid-template-columns:minmax(180px,280px) minmax(200px,330px);gap:40px;align-items:center;max-width:740px;width:100%}
#field-pack-dialog .fp-inspect-card{aspect-ratio:650/960;width:100%}
#field-pack-dialog .fp-inspect-copy h1{font:500 30px/1.15 Inter,Arial,sans-serif;letter-spacing:-1px;margin:12px 0}
#field-pack-dialog .fp-inspect-copy p{font:13px/1.7 Inter,Arial,sans-serif;color:#b4bac4}
#field-pack-dialog .fp-inspect-copy small{font:11px/1.7 Inter,Arial,sans-serif;color:#9099a7}
#field-pack-dialog .fp-inspect-copy dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-block:1px solid #34373c;padding:20px 0;margin:20px 0}
#field-pack-dialog .fp-inspect-copy dt{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#a9adb5}
#field-pack-dialog .fp-inspect-copy dd{margin:8px 0 0;font-size:24px;color:#eeeef0}
#field-pack-dialog .fp-detail-link:focus-visible,#field-pack-dialog .fp-result:focus-visible{outline:2px solid #e4e2df;outline-offset:5px}
@media(max-width:700px){#field-pack-dialog .fp-inspect-layout{grid-template-columns:1fr;gap:22px;max-width:330px}#field-pack-dialog .fp-inspect-card{width:min(220px,34dvh);justify-self:center}#field-pack-dialog .fp-inspect-copy h1{font-size:24px}#field-pack-dialog .fp-opening{gap:10px}#field-pack-dialog .fp-detail-link{margin-top:-4px}}
