.card-launch { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:380px; margin:18px 0 0; padding:16px 20px; background:var(--forest); color:var(--offwhite); border:1px solid var(--forest); font:700 15px/1.4 var(--text); cursor:pointer; transition:background .2s,transform .2s; }
.card-launch:hover { background:#2b5039; transform:translateY(-2px); }
.card-launch svg { width:21px; height:21px; }
.card-launch:focus-visible, .card-dialog button:focus-visible { outline:3px solid #d3b577; outline-offset:5px; }
body.card-modal-open { overflow:hidden; }
.card-dialog { --gold:#d3b577; --paper:#f8f6ed; position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--paper); overflow:hidden; }
.card-dialog::backdrop { background:rgba(8,19,14,.90); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.card-dialog[open] { display:flex; align-items:center; justify-content:center; animation:viewer-enter .22s ease-out; }
.card-shell { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(1240px,100% - 64px); height:min(1000px,100% - 48px); }
.card-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 6px 18px; border-bottom:1px solid #ffffff24; }
.card-title { margin:0; color:var(--paper); font:500 clamp(22px,3vw,30px)/1.2 var(--display); }
.card-kicker { margin:0 0 7px; color:var(--gold); font:700 12px/1.3 var(--text); letter-spacing:2.5px; text-transform:uppercase; }
.card-dialog button { -webkit-tap-highlight-color:transparent; font-family:var(--text); }
.card-icon-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:46px; height:46px; padding:0; border:1px solid #ffffff38; border-radius:50%; background:#ffffff08; color:var(--paper); cursor:pointer; }
.card-icon-button:hover { background:#ffffff19; border-color:#d3b577; }
.card-icon-button svg { width:21px; height:21px; }
.card-stage { position:relative; overflow:auto; min-height:0; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#bda56b #15291e; }
.card-space { position:relative; width:100%; height:100%; perspective:1800px; }
.card-anchor { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--card-w,300px); height:var(--card-h,420px); transition:width .8s cubic-bezier(.22,.7,.18,1),height .8s cubic-bezier(.22,.7,.18,1); }
.baseball-card { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .95s cubic-bezier(.25,.65,.2,1); transform:rotateY(0deg) rotateZ(0deg); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.baseball-card.is-back { transform:rotateY(180deg) rotateZ(90deg); }
.card-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#d9c78e; border-radius:3px; box-shadow:0 18px 55px #0008,0 2px 8px #0007; overflow:hidden; }
.card-front { transform:translateZ(.5px); }
.card-back { transform:rotateY(180deg) translateZ(.5px); }
.card-art { position:relative; overflow:hidden; width:100%; height:100%; }
.card-art img { position:absolute; display:block; max-width:none; user-select:none; pointer-events:none; }
.front-art img { width:100%; height:100%; left:0; top:0; }
.back-art { position:absolute; left:50%; top:50%; width:var(--card-h,420px); height:var(--card-w,300px); transform:translate(-50%,-50%) rotate(90deg); transition:width .8s cubic-bezier(.22,.7,.18,1),height .8s cubic-bezier(.22,.7,.18,1); }
.back-art img { width:100%; height:100%; left:0; top:0; }
.card-toolbar { position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #ffffff24; padding:20px 6px 0; }
.card-position { min-width:150px; color:#e2e3dc; font-size:14px; display:flex; align-items:center; gap:13px; }
.card-position .rule { width:25px; height:1px; background:#ffffff4a; }
.card-position strong { font-size:12px; color:var(--gold); letter-spacing:1.5px; }
.card-flip { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 24px; border:1px solid var(--gold); border-radius:3px; background:var(--gold); color:#14291c; font-size:16px; line-height:1.4; font-weight:700; cursor:pointer; }
.card-flip:hover { background:#e3c88d; }
.card-flip svg { width:20px; height:20px; }
.card-tools { display:flex; justify-content:flex-end; gap:10px; min-width:150px; }
.card-tools button[aria-pressed="true"] { background:#d3b577; color:#14291c; border-color:#d3b577; }
.card-feedback { position:absolute; bottom:calc(100% + 10px); right:4px; margin:0; padding:7px 12px; border-radius:3px; background:#f8f6ed; color:#183724; font:400 14px/1.4 var(--text); box-shadow:0 3px 12px #0004; }
.card-feedback:empty { display:none; }
.card-copy-fallback { position:absolute; bottom:calc(100% + 10px); right:0; width:min(470px,100%); padding:12px; border:1px solid var(--gold); background:#183724; color:var(--paper); }
.card-copy-fallback label { display:block; margin-bottom:6px; font-size:14px; }
.card-copy-fallback input { width:100%; padding:8px; font:14px var(--text); }
.card-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@keyframes viewer-enter { from {opacity:0} to {opacity:1} }
@media(max-width:680px) {
 .card-launch { max-width:320px; }
 .card-shell { width:calc(100% - 28px); height:calc(100% - 24px); height:calc(100dvh - 24px); padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
 .card-heading { padding:0 2px 15px; gap:10px; }
 .card-kicker { font-size:12px; letter-spacing:1.8px; }
 .card-title { font-size:22px; }
 .card-toolbar { display:grid; grid-template-columns:1fr auto; gap:14px; padding:14px 2px 0; }
 .card-position { min-width:0; }
 .card-tools { min-width:0; gap:8px; }
 .card-flip { grid-row:2; grid-column:1/-1; width:100%; padding:14px; }
 .card-icon-button { width:44px; height:44px; }
}
@media(max-height:500px) and (min-width:681px) {
 .card-shell { height:calc(100% - 20px); }
 .card-heading { padding-bottom:8px; }
 .card-kicker { display:none; }
 .card-title { font-size:22px; }
 .card-toolbar { padding-top:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .card-dialog[open] { animation:none; }
 .card-anchor,.baseball-card,.back-art,.card-launch { transition:none; }
}

@media print {
 body { overflow:visible!important; }
 body.card-modal-open > :not(dialog) { display:none!important; }
 .site-header,.card-launch,.card-toolbar,.card-heading>button { display:none!important; }
 .profile-page aside { position:static; }
 .card-dialog[open] { display:block; position:static; width:100%; height:auto; overflow:visible; color:#1f3d2b; }
 .card-dialog::backdrop { display:none; }
 .card-shell { display:block; width:100%; height:auto; }
 .card-title,.card-kicker { color:#1f3d2b; }
 .card-stage { overflow:visible; }
 .card-space,.card-anchor { position:static; width:auto!important; height:auto!important; perspective:none; transform:none!important; }
 .baseball-card { width:auto; height:auto; transform:none!important; }
 .card-face { position:relative; inset:auto; width:110mm; height:154.08mm; margin:8mm auto; transform:none; backface-visibility:visible; box-shadow:none; break-inside:avoid; }
 .card-back { width:180mm; height:128.55mm; }
 .back-art { left:0; top:0; width:100%; height:100%; transform:none; }
}

.card-loading { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; font-size:16px; color:var(--paper); pointer-events:none; }
.card-loading[hidden] { display:none; }
.card-stage[aria-busy="true"] .baseball-card { visibility:hidden; }
.card-dialog[data-opening] .card-anchor,
.card-dialog[data-opening] .baseball-card,
.card-dialog[data-opening] .back-art { transition:none; }
