@import url('./HolographicFoil.css');
/* Standalone card styling. All balance/generation settings stay in src/. */
.player-card, .player-card *, .player-card *:before, .player-card *:after { box-sizing:border-box; }
.player-card { --rarity:#aeb8c2; --ink:#20342f; width:100%; max-width:370px; margin:auto; color:var(--ink); font-family:'Segoe UI',sans-serif; container-type:inline-size; }
.player-card--compact { max-width:300px; }
.card-flip { width:100%; aspect-ratio:5 / 7; perspective:1200px; cursor:pointer; border-radius:20px; -webkit-tap-highlight-color:transparent; }
.card-flip:focus-visible { outline:3px solid #edc776; outline-offset:6px; }
.card-rotor { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 650ms cubic-bezier(.2,.7,.25,1); }
.card-flip.is-flipped .card-rotor { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; border-radius:20px; padding:9px; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:linear-gradient(135deg,#ffffff66,transparent 28%,#00000020 62%,#ffffff44),var(--rarity); box-shadow:0 16px 32px #0005,inset 0 0 0 1px #ffffff80,inset 0 0 0 3px #ffffff1c; }
.card-front { display:flex; flex-direction:column; transform:rotateY(0deg); }
.player-artwork { position:relative; flex:1; min-height:0; overflow:hidden; border-radius:12px 12px 0 0; background:linear-gradient(160deg,#f5f7f5,#d5e1db); border:1px solid #ffffff65; }
.artwork-placeholder { position:absolute; inset:0; }
.artwork-placeholder[hidden] { display:none; }
.batter-art { height:100%; width:100%; display:block; object-fit:cover; }
.player-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.card-rarity { position:absolute; top:29px; left:25px; max-width:calc(100% - 140px); font-size:10px; font-size:2.7cqw; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#3e574c; }
.on-base-badge { position:absolute; top:22px; right:22px; width:86px; height:86px; width:23.3cqw; height:23.3cqw; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(145deg,#ffffff,#f1f3ed); border:3px solid var(--rarity); box-shadow:0 4px 8px #1d342e25,inset 0 0 0 2px #ffffff; z-index:1; }
.on-base-label { font-size:10px; font-size:2.7cqw; font-weight:800; letter-spacing:.8px; margin-top:3px; }
.on-base-number { font-size:43px; font-size:11.6cqw; font-weight:850; line-height:1.06; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.card-identity { background:linear-gradient(180deg,#fffefb,#f0f0e8); padding:17px 15px 10px; border-radius:0 0 12px 12px; border-top:3px solid var(--rarity); box-shadow:inset 0 0 0 1px #ffffff90; min-height:108px; min-height:29.2cqw; }
.card-player-name { text-align:center; font-size:28px; font-size:7.5cqw; font-weight:850; line-height:1.08; letter-spacing:-.5px; margin:0; text-wrap:balance; overflow-wrap:anywhere; }
.card-front-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.card-edition { font-size:8px; font-size:2.2cqw; letter-spacing:2px; color:#5f7167; font-weight:650; }
.card-position { font-size:22px; font-size:6cqw; line-height:1; font-weight:850; color:#2e473c; }
.card-back { transform:rotateY(180deg); display:flex; flex-direction:column; isolation:isolate; padding:27px 30px 21px; padding:7.3cqw 8.1cqw 5.7cqw; }
.card-back:before { content:''; position:absolute; inset:9px; border-radius:12px; background:linear-gradient(155deg,#fffefb,#edf1ed); z-index:-1; border:1px solid #fff; }
.card-position-name { text-align:center; font-size:24px; font-size:6.5cqw; letter-spacing:1px; font-weight:850; margin:3px 0 17px; margin:0.8cqw 0 4.6cqw; line-height:1.2; }
.card-ratings { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #223b3020; padding:14px 0 17px; padding:3.8cqw 0 4.6cqw; }
.card-rating { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.card-rating span { font-size:10px; font-size:2.7cqw; letter-spacing:.3px; font-weight:750; }
.card-rating strong { font-size:21px; font-size:5.7cqw; font-weight:850; font-variant-numeric:tabular-nums; }
.card-ratings--pitcher { justify-content:center; }
.chart-heading { text-align:center; background:#233d33; color:#fffef6; border-bottom:3px solid var(--rarity); border-radius:3px; font-size:12px; font-size:3.25cqw; letter-spacing:2px; padding:11px 4px; padding:3cqw 1cqw; margin:0 0 10px; margin-bottom:2.7cqw; }
.player-card .hitting-chart { width:100%; border-collapse:collapse; font-size:17px; font-size:4.6cqw; font-variant-numeric:tabular-nums; }
.player-card .hitting-chart th { text-align:left; font-size:9px; font-size:2.4cqw; letter-spacing:1.4px; color:#5f7268; padding:7px 7px 9px; padding:1.9cqw 1.9cqw 2.4cqw; font-weight:650; }
.player-card .hitting-chart td { padding:7px; padding:2cqw 1.9cqw; border-bottom:1px solid #2b453319; line-height:1.2; }
.player-card .hitting-chart td:first-child { width:38%; font-weight:650; color:#455d51; }
.player-card .hitting-chart td:last-child { font-weight:850; letter-spacing:.4px; }
.player-card .hitting-chart tr[data-result='Homerun'] td:last-child { color:#a04431; }
.player-card .hitting-chart tr[data-result='Triple'] td:last-child { color:#2c7457; }
.card-back-footer { margin-top:auto; padding-top:12px; padding-top:3.2cqw; text-align:center; color:#627469; font-size:9px; font-size:2.4cqw; letter-spacing:2px; }
.flip-hint { margin:13px 0 5px; text-align:center; font-size:9px; letter-spacing:1.5px; color:#aabeb0; }
@media(prefers-reduced-motion:reduce) { .card-rotor { transition:none; } }