/* Shared card-deck + game CSS (Top Trumps deck, hand tray, duel/Higher-Lower/roguelike overlay).
   Extracted from football/cards.qmd so afl/cards.qmd (and future sports) reuse it. All rules are
   CSS-var driven (--c per card, --ink/--paper, site tokens) so they're sport-agnostic. */
/* Deck controls + grid */
.deck-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; margin:0.4rem 0 1.1rem; }
.deck-count { font-family:'JetBrains Mono', monospace; font-size:0.8rem; opacity:0.7; }
.deck-nav { display:flex; align-items:center; gap:0.5rem; }
.deck-pg { font-family:'JetBrains Mono', monospace; font-size:0.78rem; padding:0.25rem 0.7rem; border:1.5px solid rgba(var(--site-overlay-rgb), 0.35); border-radius:5px; background:transparent; color:inherit; cursor:pointer; }
.deck-pg:disabled { opacity:0.35; cursor:default; }
.deck-pg:not(:disabled):hover { background:rgba(var(--site-overlay-rgb), 0.1); }
.deck-pgn { font-family:'JetBrains Mono', monospace; font-size:0.78rem; opacity:0.7; min-width:3.5rem; text-align:center; }
.ttc-deck { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:1.3rem; align-items:start; margin-bottom:132px; }

/* "+ Hand" add button on each gallery card (hover-revealed; always shown on touch) */
.ttc-add { position:absolute; top:0.4rem; left:0.4rem; z-index:2; font-family:'JetBrains Mono', monospace; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:0.15rem 0.45rem; border:1.5px solid rgba(255,255,255,0.85); border-radius:4px; background:rgba(43,33,20,0.55); color:#fff; cursor:pointer; opacity:0; transition:opacity 0.12s ease, background 0.12s ease; }
.ttc:hover .ttc-add, .ttc-add:focus { opacity:1; }
.ttc-add:hover { background:rgba(43,33,20,0.85); }
.ttc-add.added { background:#2e7d52; border-color:#2e7d52; opacity:1; }
@media (hover: none) { .ttc-add { opacity:0.9; } }

/* Hand tray — sticky drag-to-build-your-deck strip (theme-aware via Bootstrap + site tokens) */
.deck-tray { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bs-body-bg, #1c1a17); border-top:2px solid rgba(var(--site-overlay-rgb), 0.4); box-shadow:0 -4px 16px rgba(0,0,0,0.22); padding:0.5rem 1rem 0.6rem; }
.deck-tray.drop-hot { background:rgba(46,125,82,0.16); border-top-color:#2e7d52; }
.deck-tray-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.35rem; }
.deck-tray-title { font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; }
.deck-tray-actions { display:flex; gap:0.5rem; }
.deck-tray-btn { font-family:'JetBrains Mono', monospace; font-size:0.7rem; padding:0.2rem 0.7rem; border:1.5px solid rgba(var(--site-overlay-rgb), 0.35); border-radius:5px; background:transparent; color:inherit; cursor:pointer; }
.deck-tray-btn:disabled { opacity:0.4; cursor:default; }
.deck-tray-btn:not(:disabled):hover { background:rgba(var(--site-overlay-rgb), 0.12); }
.deck-tray-strip { display:flex; gap:0.6rem; overflow-x:auto; min-height:62px; align-items:center; padding-bottom:0.2rem; }
.deck-tray-hint { font-size:0.85rem; opacity:0.55; padding:0 0.3rem; }
.tray-card { flex:0 0 auto; display:flex; align-items:center; gap:0.45rem; padding:0.3rem 0.5rem 0.3rem 0.3rem; border:1.5px solid rgba(var(--site-overlay-rgb), 0.3); border-left:4px solid var(--c); border-radius:7px; background:rgba(var(--site-overlay-rgb), 0.06); cursor:grab; }
.tray-card.dragging { opacity:0.4; }
.tray-thumb { position:relative; width:38px; height:38px; border-radius:50%; overflow:hidden; background:var(--c); display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; }
.tray-thumb img { width:100%; height:100%; object-fit:cover; }
.tray-mono { font-weight:800; font-size:0.85rem; color:#fff; }
.tray-meta { display:flex; flex-direction:column; line-height:1.1; cursor:pointer; }
.tray-name { font-weight:700; font-size:0.78rem; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tray-panna { font-family:'JetBrains Mono', monospace; font-size:0.66rem; opacity:0.65; }
.tray-x { border:none; background:transparent; color:inherit; opacity:0.5; font-size:1rem; line-height:1; cursor:pointer; padding:0 0.1rem; }
.tray-x:hover { opacity:1; color:#c0392b; }

/* Pointer-drag affordances */
.ttc-deck .ttc { cursor:grab; }
.ttc-deck .ttc:active, .tray-card:active { cursor:grabbing; }
/* Suppress the browser's native link/image drag so pointer-drag owns the gesture */
.ttc, .ttc img, .tray-card, .tray-thumb img { -webkit-user-drag:none; user-select:none; }
/* Source card while it's being dragged */
.tray-card.dragging { opacity:0.4; }
.ttc.dragging { opacity:0.5; }
/* The floating clone that follows the pointer (a slightly-tilted card token) */
.deck-ghost-card { position:fixed; z-index:100; pointer-events:none; transform:translate(-50%, -50%) rotate(-3deg); opacity:0.96; box-shadow:0 16px 38px rgba(0,0,0,0.48); }
/* Compact it: header + portrait + name only — the full stat list makes the
   ghost skinny-and-long, so drop the rows + footer while dragging. */
.deck-ghost-card.ttc { width:172px; }
.deck-ghost-card.ttc .ttc-stats, .deck-ghost-card.ttc .ttc-foot { display:none; }
.deck-ghost-card.ttc .ttc-id { padding-bottom:0.6rem; }
/* The slot the hand opens up as you drag a card over it (cards slide aside) */
.tray-gap { flex:0 0 auto; width:0; align-self:stretch; min-height:54px; border-radius:7px; box-sizing:border-box; transition:width 0.16s ease; }
.tray-gap.open { width:150px; border:2px dashed rgba(var(--site-overlay-rgb), 0.45); background:rgba(var(--site-overlay-rgb), 0.06); }
/* Fallback chip ghost (used only if no clone element was supplied) */
.deck-ghost { position:fixed; z-index:100; transform:translate(-50%, -50%); pointer-events:none; padding:0.3rem 0.65rem; border-radius:6px; background:var(--c, #5a9a7a); color:#fff; font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:0.82rem; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,0.32); border:2px solid rgba(255,255,255,0.75); }
/* Smooth the hand cards as the gap pushes them around */
.deck-tray-strip .tray-card { transition:opacity 0.12s ease; }

/* Nationality flag (deck-local copy) */
.ttc-flag { height:0.95em; width:auto; border-radius:1px; vertical-align:-0.05em; margin-right:0.35rem; }

/* Top Trumps card — fixed retro paper island (theme-independent), shared design
   with football/player.qmd. As an <a> in the deck it stretches to its grid cell. */
.ttc { display:block; text-decoration:none; --ink:#2b2114; --paper:#f4ead2; width:100%; border:3px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:5px 5px 0 rgba(43,33,20,0.22); overflow:hidden; font-family:'Bricolage Grotesque', sans-serif; color:var(--ink); transition:transform 0.12s ease, box-shadow 0.12s ease; }
.ttc:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(43,33,20,0.28); color:var(--ink); }
.ttc-head { display:flex; align-items:center; justify-content:space-between; background:var(--c); padding:0.4rem 0.7rem; }
.ttc-cat { font-family:'JetBrains Mono', monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.95); font-weight:600; }
.ttc-pos { font-family:'JetBrains Mono', monospace; font-size:0.72rem; font-weight:700; color:#fff; background:rgba(43,33,20,0.28); border-radius:3px; padding:0.05rem 0.4rem; }
.ttc-portrait { position:relative; aspect-ratio:1/1; background:var(--c); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:3px solid var(--ink); }
.ttc-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.ttc-portrait::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(43,33,20,0.4) 1.4px, transparent 1.5px); background-size:6px 6px; mix-blend-mode:multiply; opacity:0.45; z-index:1; pointer-events:none; }
.ttc-monogram { position:relative; z-index:1; font-weight:800; font-size:3.6rem; line-height:1; color:rgba(255,255,255,0.95); text-shadow:2px 2px 0 rgba(43,33,20,0.35); letter-spacing:0.02em; }
.ttc-id { padding:0.55rem 0.8rem 0.35rem; }
.ttc-name { font-size:1.18rem; font-weight:800; line-height:1.05; }
.ttc-sub { font-family:'JetBrains Mono', monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; margin-top:0.15rem; }
.ttc-stats { padding:0.15rem 0.8rem 0.45rem; }
.ttc-row { display:grid; grid-template-columns:60px 50px 1fr 22px; align-items:center; gap:0.45rem; padding:0.26rem 0; border-top:1px dotted rgba(43,33,20,0.25); }
.ttc-row:first-child { border-top:none; }
.ttc-row-label { font-family:'JetBrains Mono', monospace; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.75; }
.ttc-row-val { font-family:'JetBrains Mono', monospace; font-size:0.8rem; font-weight:700; text-align:right; }
.ttc-row-bar { height:7px; background:rgba(43,33,20,0.1); border-radius:2px; overflow:hidden; }
.ttc-row-bar i { display:block; height:100%; background:var(--c); }
.ttc-row-pct { font-family:'JetBrains Mono', monospace; font-size:0.64rem; text-align:right; opacity:0.6; }
.ttc-foot { display:flex; justify-content:space-between; background:var(--ink); color:var(--paper); padding:0.3rem 0.8rem; font-family:'JetBrains Mono', monospace; font-size:0.58rem; text-transform:uppercase; letter-spacing:0.08em; }

/* Game buttons in the hand tray */
.deck-tray-btn.daily { background:#2a7d8c; border-color:#2a7d8c; color:#fff; font-weight:700; }
.deck-tray-btn.daily:hover { background:#236876; }
.deck-tray-btn.run { background:#b23a48; border-color:#b23a48; color:#fff; font-weight:700; }
.deck-tray-btn.run:hover { background:#9c303d; }
.deck-tray-btn.hl { background:#6a4c93; border-color:#6a4c93; color:#fff; font-weight:700; }
.deck-tray-btn.hl:hover { background:#583e7c; }

/* Gaffer's Run roguelike (reuses the duel overlay; adds map/draft/score screens) */
.run-score { text-align:center; font-family:'JetBrains Mono', monospace; font-size:0.82rem; font-weight:700; padding:0.5rem 1rem 0; letter-spacing:0.04em; }
.run-info { padding:0.4rem 1.4rem 0.2rem; }
.run-line { font-size:0.9rem; opacity:0.85; margin:0.3rem 0; }
/* Daily Run leaderboard panel */
.run-lb { max-width:320px; margin:0.8rem auto 0; text-align:left; }
.run-lb-title { font-family:'JetBrains Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; text-align:center; margin-bottom:0.3rem; }
.run-lb-row { display:flex; align-items:center; gap:0.5rem; padding:0.22rem 0.5rem; border-radius:5px; font-size:0.86rem; }
.run-lb-row:nth-child(even) { background:rgba(43,33,20,0.05); }
.run-lb-row.me { background:rgba(42,125,140,0.22); font-weight:700; }
.run-lb-rank { width:1.4em; text-align:right; opacity:0.6; font-family:'JetBrains Mono', monospace; font-size:0.78rem; }
.run-lb-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.run-lb-depth { font-family:'JetBrains Mono', monospace; font-weight:700; }
.run-draft { display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; padding:0.6rem 1rem 1rem; }
.run-offer { display:flex; flex-direction:column; align-items:center; gap:0.5rem; width:190px; max-width:44vw; padding:0.5rem; border:2.5px solid rgba(43,33,20,0.25); border-radius:10px; }
.run-offer .duel-card { width:100%; }
.run-offer.rar-bronze { border-color:#b08d57; box-shadow:0 0 0 1px #b08d5755; }
.run-offer.rar-silver { border-color:#9aa6b2; box-shadow:0 0 0 1px #9aa6b255; }
.run-offer.rar-gold   { border-color:#d4af37; box-shadow:0 0 10px #d4af3766; }
.run-offer.rar-legend { border-color:#b56be0; box-shadow:0 0 14px #b56be088; }
.run-tactic { width:200px; justify-content:flex-start; background:rgba(43,33,20,0.05); }
.run-tactic-name { font-weight:800; font-size:1rem; }
.run-tactic-desc { font-size:0.82rem; opacity:0.75; text-align:center; min-height:2.4em; }
.deck-tray-btn.quick { background:#b9772a; border-color:#b9772a; color:#fff; font-weight:700; }
.deck-tray-btn.quick:hover { background:#a3691f; }
.deck-tray-btn.play:not(:disabled) { background:#2e7d52; border-color:#2e7d52; color:#fff; font-weight:700; }
.deck-tray-btn.play:not(:disabled):hover { background:#266b46; }

/* Higher / Lower (reuses the duel overlay + card styles) */
.hl-stat-pick { display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; padding:0.6rem 1rem 0; }
.hl-stat-btn { font-family:'JetBrains Mono', monospace; font-size:0.7rem; padding:0.22rem 0.7rem; border:1.5px solid var(--ink, #2b2114); border-radius:5px; background:transparent; color:var(--ink, #2b2114); cursor:pointer; }
.hl-stat-btn.on { background:#6a4c93; border-color:#6a4c93; color:#fff; }
.hl-controls { gap:0.8rem; }
.hl-guess { min-width:120px; }

/* ── Top Trumps Duel overlay (retro paper island, theme-independent) ── */
.duel-overlay { position:fixed; inset:0; z-index:200; background:rgba(20,16,10,0.72); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:1rem; }
.duel-modal { --ink:#2b2114; --paper:#f4ead2; width:min(640px,96vw); max-height:94vh; overflow:auto; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:12px; box-shadow:8px 8px 0 rgba(43,33,20,0.3); font-family:'Bricolage Grotesque', sans-serif; }
.duel-bar { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; background:var(--ink); color:var(--paper); padding:0.5rem 0.9rem; }
.duel-title { font-family:'JetBrains Mono', monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; }
.duel-counts { font-family:'JetBrains Mono', monospace; font-size:0.74rem; opacity:0.9; margin-left:auto; }
.duel-x { background:transparent; border:none; color:var(--paper); font-size:1.1rem; cursor:pointer; line-height:1; opacity:0.8; padding:0 0.2rem; }
.duel-x:hover { opacity:1; }
.duel-banner { text-align:center; padding:0.7rem 1rem; font-size:0.98rem; min-height:1.4em; border-bottom:2px dotted rgba(43,33,20,0.25); }
.duel-banner b { font-weight:800; }
.duel-banner.duel-end { font-size:1.5rem; padding:1.4rem; }
.duel-table { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:0.6rem; padding:1rem; }
.duel-side { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.duel-side-label { font-family:'JetBrains Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; }
.duel-vs { align-self:center; font-family:'JetBrains Mono', monospace; font-weight:800; font-size:0.9rem; opacity:0.5; }
.duel-slot { width:100%; max-width:230px; }

.duel-card { width:100%; border:2.5px solid var(--ink); border-radius:9px; overflow:hidden; background:var(--paper); box-shadow:3px 3px 0 rgba(43,33,20,0.2); }
.duel-card.face-down { aspect-ratio:3/4; }
.duel-back { width:100%; height:100%; background:var(--c); display:flex; align-items:center; justify-content:center; }
.duel-back span { font-family:'JetBrains Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.92); font-weight:700; background-image:radial-gradient(rgba(43,33,20,0.4) 1.4px, transparent 1.5px); background-size:7px 7px; padding:1.6rem 0.8rem; border-radius:6px; }
.duel-chead { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; background:var(--c); padding:0.4rem 0.6rem; }
.duel-cmeta { display:flex; flex-direction:column; gap:0.08rem; min-width:0; flex:1 1 auto; }
.duel-cname { font-weight:800; font-size:1.04rem; color:#fff; text-shadow:1px 1px 0 rgba(43,33,20,0.4); line-height:1.06; }
.duel-csub { font-family:'JetBrains Mono', monospace; font-size:0.64rem; color:rgba(255,255,255,0.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:0.3rem; letter-spacing:0.02em; }
.duel-flag { height:0.82em; width:auto; border-radius:1px; flex:0 0 auto; }
.duel-cpos { font-family:'JetBrains Mono', monospace; font-size:0.66rem; font-weight:700; color:#fff; background:rgba(43,33,20,0.3); border-radius:3px; padding:0.05rem 0.4rem; flex:0 0 auto; }
.duel-portrait { position:relative; aspect-ratio:1/1; background:var(--c); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:2.5px solid var(--ink); }
.duel-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.duel-portrait::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(43,33,20,0.4) 1.4px, transparent 1.5px); background-size:6px 6px; mix-blend-mode:multiply; opacity:0.4; }
.duel-mono { position:relative; font-weight:800; font-size:2.6rem; color:rgba(255,255,255,0.95); text-shadow:2px 2px 0 rgba(43,33,20,0.35); }
.duel-stats { padding:0.2rem 0.5rem 0.4rem; }
.duel-row { display:flex; align-items:center; justify-content:space-between; padding:0.32rem 0.4rem; border-top:1px dotted rgba(43,33,20,0.25); border-radius:5px; }
.duel-row:first-child { border-top:none; }
/* Many stats (10-stat packs) → 2-column grid so the card isn't skinny-and-tall */
.duel-card.multi .duel-stats { display:grid; grid-template-columns:1fr 1fr; column-gap:0.6rem; }
.duel-card.multi .duel-row { border-top:none; border-bottom:1px dotted rgba(43,33,20,0.22); padding:0.26rem 0.4rem; }
.duel-card.multi .duel-row-label { font-size:0.62rem; }
.duel-card.multi .duel-row-val { font-size:0.78rem; }
.duel-row-label { font-family:'JetBrains Mono', monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; opacity:0.8; }
.duel-row-val { font-family:'JetBrains Mono', monospace; font-size:0.84rem; font-weight:700; }
.duel-card.pickable .duel-row { cursor:pointer; }
.duel-card.pickable .duel-row:hover { background:rgba(43,33,20,0.1); }
.duel-row.active { font-weight:800; }
.duel-row.active.win { background:#2e7d52; color:#fff; }
.duel-row.active.lose { background:#c0392b; color:#fff; }
.duel-row.active.tie { background:rgba(43,33,20,0.18); }
.duel-row.active .duel-row-label, .duel-row.active .duel-row-val { opacity:1; }
.duel-controls { display:flex; gap:0.6rem; justify-content:center; padding:0 1rem 1.2rem; }
.duel-btn { font-family:'JetBrains Mono', monospace; font-size:0.82rem; padding:0.45rem 1.1rem; border:2px solid var(--ink); border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; font-weight:700; }
.duel-btn:hover { background:rgba(43,33,20,0.1); }
.duel-btn.primary { background:var(--ink); color:var(--paper); }
.duel-btn.primary:hover { background:#3a2d1c; }
@media (max-width:520px) { .duel-table { grid-template-columns:1fr; } .duel-vs { display:none; } .duel-slot { max-width:280px; } }