/* ============================================================
   PLAYER CARD STYLES 1–10
   Pick one with CONFIG.cardStyle (js/config.js); 0 = the default look.
   Preview all of them in tools/cards.html.
   Every style only reskins the same card markup, so the game code
   does not change. Each card keeps its player colour in --ac / --acl / --acd.
   ============================================================ */

/* ---------- shared bits ---------- */
[class*="card-"] .stations .station { transition: box-shadow .25s ease, transform .2s ease, filter .25s ease; }

/* ============================================================
   1 — NEON GLASS : frosted glass, thin neon edge, glowing outline buttons
   ============================================================ */
.card-1 .stations .station {
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 45%, rgba(10,20,50,.35));
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--acl) 70%, transparent);
  border-radius: 20px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 35%, transparent), inset 0 0 22px color-mix(in srgb, var(--ac) 18%, transparent), 0 12px 30px rgba(0,0,0,.45);
}
.card-1 .stations .station::before { height: 1px; left: 18px; right: 18px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); }
.card-1 .stations .station::after { border-radius: 20px; background: radial-gradient(90% 60% at 15% 0%, rgba(255,255,255,.14), transparent 70%); }
.card-1 .st-badge { background: transparent; color: var(--acl); box-shadow: inset 0 0 0 1.5px var(--acl), 0 0 12px color-mix(in srgb, var(--ac) 60%, transparent); text-shadow: 0 0 8px var(--ac); }
.card-1 .st-read-box { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px !important; }
.card-1 .st-read-box b { text-shadow: 0 0 10px rgba(255,255,255,.35); }
.card-1 .stations .st-confirm { border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: none; }
.card-1 .stations .st-confirm.is-bet { background: rgba(49,217,138,.12); color: #8dffc8; box-shadow: inset 0 0 0 1.5px #31d98a, 0 0 16px rgba(49,217,138,.45); text-shadow: 0 0 8px #31d98a; }
.card-1 .stations .st-confirm.is-bet:disabled { background: rgba(255,255,255,.04); color: rgba(220,230,255,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); text-shadow: none; }
.card-1 .stations .st-confirm.is-cancel { background: rgba(255,80,110,.12); color: #ffb3c0; box-shadow: inset 0 0 0 1.5px #ff5c7c, 0 0 14px rgba(255,80,110,.4); }
.card-1 .stations .st-confirm.is-cash { background: rgba(255,160,40,.85); color: #2a1100; animation: c1-cash 1s ease-in-out infinite; }
@keyframes c1-cash { 50% { box-shadow: 0 0 26px 4px rgba(255,160,40,.85); } }
.card-1 .stations .station[data-state="PLACED"] { box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 60%, transparent), inset 0 0 26px color-mix(in srgb, var(--ac) 25%, transparent), 0 12px 30px rgba(0,0,0,.45); }
.card-1 .stations .station[data-state="INFLIGHT"] { animation: c1-live 1.2s ease-in-out infinite; }
@keyframes c1-live { 0%,100% { box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 50%, transparent), 0 12px 30px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 40px var(--ac), 0 12px 30px rgba(0,0,0,.45); } }
.card-1 .stations .station[data-state="CASHED"] { border-color: #31d98a; box-shadow: 0 0 30px rgba(49,217,138,.55), 0 12px 30px rgba(0,0,0,.45); }

/* ============================================================
   2 — ARCADE : chunky frame in the player colour, 3D push buttons
   ============================================================ */
.card-2 .stations .station {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px), linear-gradient(180deg, #1a1440, #0b0820);
  border: 3px solid var(--ac); border-radius: 14px;
  box-shadow: 0 0 0 3px #05030f, 0 8px 0 3px var(--acd), 0 14px 24px rgba(0,0,0,.6);
  padding-bottom: 14px;
}
.card-2 .stations .station::before { height: 0; }
.card-2 .stations .station::after { border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%); }
.card-2 .st-badge { border-radius: 6px; font: 800 15px 'Baloo 2', var(--font); transform: rotate(-3deg); background: linear-gradient(180deg, var(--acl), var(--ac)); color: #120a2a; box-shadow: 0 3px 0 var(--acd); }
.card-2 .st-status { font-family: 'Baloo 2', var(--font); font-size: 12px; }
.card-2 .st-read-box { background: #05030f !important; border: 2px solid color-mix(in srgb, var(--ac) 45%, #000) !important; border-radius: 8px !important; }
.card-2 .st-read-box span { color: var(--acl) !important; }
.card-2 .st-read-box b { font: 800 21px/1.15 'Baloo 2', var(--font); color: #fff7d6; }
.card-2 .stations .st-confirm { border-radius: 10px; font: 800 19px 'Baloo 2', var(--font); letter-spacing: 1px; transform: translateY(-2px); }
.card-2 .stations .st-confirm:active { transform: translateY(2px); }
.card-2 .stations .st-confirm.is-bet { background: linear-gradient(180deg, #4dff9a, #12b25a); color: #04260f; box-shadow: 0 5px 0 #08702f, 0 8px 12px rgba(0,0,0,.5); }
.card-2 .stations .st-confirm.is-bet:disabled { background: #2a2450; color: #8079b0; box-shadow: 0 5px 0 #15112e; }
.card-2 .stations .st-confirm.is-cancel { background: linear-gradient(180deg, #ff7b8d, #e0233f); box-shadow: 0 5px 0 #8c0f22, 0 8px 12px rgba(0,0,0,.5); }
.card-2 .stations .st-confirm.is-cash { background: linear-gradient(180deg, #ffe14d, #ff9a00); color: #3a1a00; box-shadow: 0 5px 0 #a65400, 0 8px 12px rgba(0,0,0,.5); animation: c2-cash .5s steps(2) infinite; }
@keyframes c2-cash { 50% { filter: brightness(1.25); } }
.card-2 .stations .st-confirm.is-won { background: #0b3a22; color: #6dffb0; box-shadow: 0 5px 0 #052414, inset 0 0 0 2px #31d98a; }
.card-2 .stations .st-confirm.is-lost { background: #3a0b16; color: #ff8a9c; box-shadow: 0 5px 0 #22040b, inset 0 0 0 2px #ff5c7c; }
.card-2 .stations .station[data-state="PLACED"] { transform: translateY(-4px); box-shadow: 0 0 0 3px #05030f, 0 8px 0 3px var(--acd), 0 0 24px var(--ac); }
.card-2 .stations .station[data-state="INFLIGHT"] { transform: translateY(-4px); animation: c2-live .6s steps(2) infinite; }
@keyframes c2-live { 0%,100% { box-shadow: 0 0 0 3px #05030f, 0 8px 0 3px var(--acd), 0 0 18px var(--ac); } 50% { box-shadow: 0 0 0 3px #fff, 0 8px 0 3px var(--acd), 0 0 34px var(--acl); } }
.card-2 .stations .station[data-state="CASHED"] { border-color: #31d98a; box-shadow: 0 0 0 3px #05030f, 0 8px 0 3px #0e7a43, 0 0 28px rgba(49,217,138,.6); }

/* ============================================================
   3 — HOLO HUD : sci-fi corner brackets, scanlines, mono digits
   ============================================================ */
.card-3 .stations .station {
  border-radius: 4px; border: 1px solid color-mix(in srgb, var(--acl) 35%, transparent);
  background:
    linear-gradient(var(--acl), var(--acl)) left top / 16px 2px no-repeat,
    linear-gradient(var(--acl), var(--acl)) left top / 2px 16px no-repeat,
    linear-gradient(var(--acl), var(--acl)) right top / 16px 2px no-repeat,
    linear-gradient(var(--acl), var(--acl)) right top / 2px 16px no-repeat,
    linear-gradient(var(--acl), var(--acl)) left bottom / 16px 2px no-repeat,
    linear-gradient(var(--acl), var(--acl)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--acl), var(--acl)) right bottom / 16px 2px no-repeat,
    linear-gradient(var(--acl), var(--acl)) right bottom / 2px 16px no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--ac) 16%, rgba(2,10,24,.92)), rgba(2,8,20,.94));
  box-shadow: 0 0 22px color-mix(in srgb, var(--ac) 22%, transparent), 0 10px 26px rgba(0,0,0,.5);
}
.card-3 .stations .station::before { top: auto; bottom: 0; height: 100%; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ac) 14%, transparent)); }
.card-3 .stations .station::after { border-radius: 4px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acl) 18%, transparent) 50%, transparent) 0 -60px / 100% 60px no-repeat; animation: c3-sweep 3.2s linear infinite; }
@keyframes c3-sweep { to { background-position: 0 calc(100% + 60px); } }
.card-3 .st-badge { border-radius: 2px; background: color-mix(in srgb, var(--ac) 25%, transparent); color: var(--acl); box-shadow: inset 0 0 0 1px var(--acl); font: 700 12px Consolas, 'Courier New', monospace; letter-spacing: 2px; }
.card-3 .st-status { font: 700 10.5px Consolas, 'Courier New', monospace; letter-spacing: 2px; }
.card-3 .st-status::before { content: '● '; animation: c3-blink 1s steps(2) infinite; }
@keyframes c3-blink { 50% { opacity: 0; } }
.card-3 .st-read-box { background: rgba(0,0,0,.35) !important; border: 0 !important; border-left: 2px solid var(--acl) !important; border-radius: 0 !important; }
.card-3 .st-read-box span { font-family: Consolas, 'Courier New', monospace !important; letter-spacing: 2px !important; color: color-mix(in srgb, var(--acl) 75%, #fff) !important; opacity: .75; }
.card-3 .st-read-box b { font: 700 19px/1.2 Consolas, 'Courier New', monospace; color: #e8fbff; text-shadow: 0 0 10px color-mix(in srgb, var(--acl) 70%, transparent); }
.card-3 .stations .st-confirm { border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); font: 700 16px Consolas, 'Courier New', monospace; letter-spacing: 3px; box-shadow: none; }
.card-3 .stations .st-confirm.is-bet { background: linear-gradient(90deg, #0fd4a0, #18a8e0); color: #021a1a; }
.card-3 .stations .st-confirm.is-bet:disabled { background: rgba(124,240,255,.08); color: rgba(160,230,255,.4); }
.card-3 .stations .st-confirm.is-cancel { background: linear-gradient(90deg, #ff3d6e, #c41f6a); }
.card-3 .stations .st-confirm.is-cash { background: linear-gradient(90deg, #ffd23d, #ff8a1f); color: #241000; animation: c3-cash .8s ease-in-out infinite; }
@keyframes c3-cash { 50% { filter: brightness(1.3); } }
.card-3 .stations .st-confirm.is-won { background: rgba(49,217,138,.18); color: #7dffbf; }
.card-3 .stations .st-confirm.is-lost { background: rgba(255,60,100,.15); color: #ff8fa6; }
.card-3 .stations .station[data-state="PLACED"] { box-shadow: 0 0 30px color-mix(in srgb, var(--ac) 45%, transparent), 0 10px 26px rgba(0,0,0,.5); }
.card-3 .stations .station[data-state="INFLIGHT"] { animation: c3-live 1.2s ease-in-out infinite; }
@keyframes c3-live { 0%,100% { box-shadow: 0 0 20px color-mix(in srgb, var(--ac) 40%, transparent), 0 10px 26px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 42px var(--ac), 0 10px 26px rgba(0,0,0,.5); } }
.card-3 .stations .station[data-state="CASHED"] { box-shadow: 0 0 30px rgba(49,217,138,.55), 0 10px 26px rgba(0,0,0,.5); }

/* ============================================================
   4 — GOLD CASINO : black lacquer, gold rim, gold numbers
   ============================================================ */
.card-4 .stations .station {
  border: 1.5px solid transparent; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #2a1f0a 0%, #0c0904 55%, #050402 100%) padding-box,
              linear-gradient(160deg, #fff1b8, #d4a017 30%, #7a5208 55%, #f5d572 80%, #9c6b0c) border-box;
  box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 18px rgba(212,160,23,.18);
}
.card-4 .stations .station::before { height: 2px; left: 30%; right: 30%; border-radius: 2px; background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.card-4 .stations .station::after { border-radius: 16px; background: linear-gradient(115deg, rgba(255,230,160,.10), transparent 40%); }
.card-4 .st-badge { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; font: 800 12px var(--font); background: radial-gradient(circle at 35% 30%, #fff3c4, #e0ad2a 45%, #8a5e0a); color: #3a2400; box-shadow: 0 0 0 2px var(--ac), 0 3px 6px rgba(0,0,0,.6); }
.card-4 .st-badge .st-mouse { display: none; }
.card-4 .st-head { height: 30px; margin-top: -4px; }
.card-4 .st-status { color: rgba(240,215,150,.65); }
.card-4 .st-read-box { background: rgba(0,0,0,.45) !important; border: 1px solid rgba(212,160,23,.28) !important; }
.card-4 .st-read-box span { color: rgba(240,210,140,.65) !important; font-family: Georgia, 'Times New Roman', serif !important; font-style: italic; letter-spacing: .8px !important; text-transform: none !important; font-size: 11px !important; }
.card-4 .st-read-box b { background: linear-gradient(180deg, #fff6cf, #f2c94c 50%, #b07c10); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 20px; }
.card-4 .stations .st-confirm { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1.5px #d4a017, 0 6px 14px rgba(0,0,0,.5); letter-spacing: 2px; }
.card-4 .stations .st-confirm.is-bet { background: linear-gradient(180deg, #1fae6a, #0b6b3e); color: #f8f0d0; }
.card-4 .stations .st-confirm.is-bet:disabled { background: rgba(255,255,255,.04); color: rgba(240,215,150,.4); box-shadow: 0 0 0 1px rgba(212,160,23,.3); }
.card-4 .stations .st-confirm.is-cancel { background: linear-gradient(180deg, #b3243c, #6e0f1f); color: #ffe7c2; }
.card-4 .stations .st-confirm.is-cash { background: linear-gradient(180deg, #fff1b0, #f2c230 45%, #c08a10); color: #3a2400; animation: c4-cash 1s ease-in-out infinite; }
@keyframes c4-cash { 50% { box-shadow: 0 0 0 1.5px #fff1b8, 0 0 28px rgba(255,200,60,.85); } }
.card-4 .stations .st-confirm.is-won { background: rgba(31,174,106,.18); color: #b8ffd8; }
.card-4 .stations .st-confirm.is-lost { background: rgba(179,36,60,.18); color: #ffb0bd; box-shadow: 0 0 0 1px rgba(179,36,60,.6); }
.card-4 .stations .station[data-state="PLACED"] { box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 26px rgba(242,201,76,.4); }
.card-4 .stations .station[data-state="INFLIGHT"] { animation: c4-live 1.4s ease-in-out infinite; }
@keyframes c4-live { 0%,100% { box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 16px rgba(242,201,76,.35); } 50% { box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 38px rgba(255,214,90,.8); } }
.card-4 .stations .station[data-state="CASHED"] { box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 30px rgba(49,217,138,.5); }

/* ============================================================
   5 — COSMIC COLOUR : the whole card in the player colour, with stars
   ============================================================ */
.card-5 .stations .station {
  border: 1px solid rgba(255,255,255,.35); border-radius: 18px;
  background:
    radial-gradient(1.2px 1.2px at 12% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 62% 72%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--acl) 85%, #fff) 0%, transparent 55%),
    linear-gradient(160deg, var(--ac) 0%, var(--acd, #222) 55%, color-mix(in srgb, var(--acd, #222) 55%, #050318) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.card-5 .stations .station::before { height: 0; }
.card-5 .stations .station::after { border-radius: 18px; background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 38%); }
.card-5 .st-badge { background: rgba(255,255,255,.92); color: #0b0a24; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.card-5 .st-status { color: rgba(255,255,255,.85) !important; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.card-5 .st-read-box { background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.18) !important; }
.card-5 .st-read-box span { color: rgba(255,255,255,.75) !important; }
.card-5 .stations .st-confirm { border-radius: 14px; }
.card-5 .stations .st-confirm.is-bet { background: #fff; color: #0b0a24; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.card-5 .stations .st-confirm.is-bet:disabled { background: rgba(255,255,255,.18); color: rgba(255,255,255,.6); box-shadow: none; }
.card-5 .stations .st-confirm.is-won { background: rgba(255,255,255,.92); color: #0f8a4c; box-shadow: 0 0 22px rgba(255,255,255,.5); }
.card-5 .stations .st-confirm.is-lost { background: rgba(0,0,0,.35); color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.card-5 .stations .station[data-state="PLACED"] { box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 2px #fff, 0 0 22px color-mix(in srgb, var(--acl) 70%, transparent); }
.card-5 .stations .station[data-state="INFLIGHT"] { animation: c5-live 1.2s ease-in-out infinite; }
@keyframes c5-live { 0%,100% { box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 2px #fff, 0 0 14px var(--acl); } 50% { box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 2px #fff, 0 0 40px var(--acl); } }
.card-5 .stations .station[data-state="CASHED"] { box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 2px #4dffa6, 0 0 30px rgba(77,255,166,.6); }

/* ============================================================
   6 — MINIMAL : flat and clean, a colour stripe on the left, big numbers
   ============================================================ */
.card-6 .stations .station {
  background: rgba(9,13,26,.9); border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); padding-left: 16px;
}
.card-6 .stations .station::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; background: var(--ac); }
.card-6 .stations .station::after { display: none; }
.card-6 .st-badge { background: none; box-shadow: none; padding: 0; color: #fff; font-size: 13px; }
.card-6 .st-badge .st-mouse { color: var(--ac); }
.card-6 .st-status { letter-spacing: .6px; text-transform: none; font-size: 12px; font-weight: 500; }
.card-6 .st-read { gap: 4px; }
.card-6 .st-read-box { background: none !important; border: 0 !important; padding: 0 6px 2px 0 !important; }
.card-6 .st-bet { padding-right: 22px !important; border-left: 1px solid rgba(255,255,255,.08) !important; padding-left: 10px !important; border-radius: 0 !important; }
.card-6 .st-read-box span { letter-spacing: .5px !important; text-transform: none !important; font-size: 11px !important; font-weight: 500 !important; color: rgba(200,210,235,.55) !important; }
.card-6 .st-read-box b { font-size: 22px; font-weight: 700; }
.card-6 .stations .st-confirm { border-radius: 8px; box-shadow: none; height: 44px; font-weight: 700; letter-spacing: .5px; }
.card-6 .stations .st-confirm.is-bet { background: #22c27a; }
.card-6 .stations .st-confirm.is-bet:disabled { background: rgba(255,255,255,.05); color: rgba(220,228,250,.4); box-shadow: none; }
.card-6 .stations .st-confirm.is-cancel { background: #e5484d; }
.card-6 .stations .st-confirm.is-cash { background: #f59e0b; color: #1d1200; animation: none; }
.card-6 .stations .st-confirm.is-won { background: rgba(34,194,122,.14); color: #5ee4a6; box-shadow: none; }
.card-6 .stations .st-confirm.is-lost { background: rgba(229,72,77,.12); color: #ff8c8f; box-shadow: none; }
.card-6 .stations .station[data-state="PLACED"] { transform: none; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px var(--ac); }
.card-6 .stations .station[data-state="INFLIGHT"] { transform: none; animation: none; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1.5px #f59e0b; }
.card-6 .stations .station[data-state="CASHED"] { box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1.5px #22c27a; }

/* ============================================================
   7 — COCKPIT : brushed metal plate, rivets, LED displays, push buttons
   ============================================================ */
.card-7 .stations .station {
  border-radius: 12px; border: 1px solid #0a0d12;
  background:
    radial-gradient(circle at 9px 9px, #d8dde6 0 2px, #4a5262 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #d8dde6 0 2px, #4a5262 2.5px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #d8dde6 0 2px, #4a5262 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #d8dde6 0 2px, #4a5262 2.5px, transparent 3.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #4b5566 0%, #2c3340 45%, #1c212b 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.4);
  padding: 12px 16px 14px;
}
.card-7 .stations .station::before { top: 12px; left: auto; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--acl); box-shadow: 0 0 8px var(--ac), 0 0 2px #fff inset; }
.card-7 .stations .station::after { display: none; }
.card-7 .st-head { padding-right: 16px; }
.card-7 .st-badge { border-radius: 3px; background: linear-gradient(180deg, #1b1f27, #0f1217); color: var(--acl); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.15); font: 700 12px Consolas, 'Courier New', monospace; letter-spacing: 1.5px; }
.card-7 .st-status { color: #c9d1de !important; text-shadow: 0 1px 0 rgba(0,0,0,.6); font-size: 10px; }
.card-7 .station[data-state="INFLIGHT"] .st-status { color: #ffcc3d !important; }
.card-7 .st-read-box { background: #050806 !important; border: 1px solid #000 !important; border-radius: 4px !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.18); }
.card-7 .st-read-box span { color: #7d8797 !important; font-family: Consolas, 'Courier New', monospace !important; letter-spacing: 1.5px !important; }
.card-7 .st-read-box b { font: 700 20px/1.2 Consolas, 'Courier New', monospace; color: #5dff8f; text-shadow: 0 0 8px rgba(93,255,143,.75); }
.card-7 .st-bet b { color: #ffc53d; text-shadow: 0 0 8px rgba(255,197,61,.75); }
.card-7 .stations .st-confirm { border-radius: 8px; letter-spacing: 2px; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
.card-7 .stations .st-confirm.is-bet { background: radial-gradient(120% 140% at 50% 0%, #6dff9e, #18a54c 60%, #0d6b30); color: #052010; text-shadow: none; box-shadow: 0 4px 0 #083d1b, 0 0 0 2px #0a0d12, 0 6px 12px rgba(0,0,0,.6); }
.card-7 .stations .st-confirm.is-bet:disabled { background: linear-gradient(180deg, #3a4250, #262c37); color: #8892a3; box-shadow: 0 4px 0 #151920, 0 0 0 2px #0a0d12; }
.card-7 .stations .st-confirm.is-cancel { background: radial-gradient(120% 140% at 50% 0%, #ff8a8a, #d32f2f 60%, #8a1414); box-shadow: 0 4px 0 #4a0a0a, 0 0 0 2px #0a0d12, 0 6px 12px rgba(0,0,0,.6); }
.card-7 .stations .st-confirm.is-cash { background: radial-gradient(120% 140% at 50% 0%, #ffe680, #ffb300 60%, #b36b00); color: #2a1500; text-shadow: none; box-shadow: 0 4px 0 #5c3700, 0 0 0 2px #0a0d12, 0 6px 12px rgba(0,0,0,.6); animation: c7-cash .7s ease-in-out infinite; }
@keyframes c7-cash { 50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,190,40,.9)); } }
.card-7 .stations .st-confirm.is-won { background: #050806; color: #5dff8f; text-shadow: 0 0 8px rgba(93,255,143,.8); box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px #000; font-family: Consolas, 'Courier New', monospace; }
.card-7 .stations .st-confirm.is-lost { background: #050806; color: #ff5c5c; text-shadow: 0 0 8px rgba(255,92,92,.8); box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px #000; font-family: Consolas, 'Courier New', monospace; }
.card-7 .stations .station[data-state="PLACED"] { box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px var(--ac); }
.card-7 .stations .station[data-state="INFLIGHT"] { animation: none; box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px #ffb300, 0 0 22px rgba(255,179,0,.4); }
.card-7 .stations .station[data-state="INFLIGHT"]::before { animation: c7-led .5s steps(2) infinite; }
@keyframes c7-led { 50% { background: #222; box-shadow: none; } }
.card-7 .stations .station[data-state="CASHED"] { box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 0 2px #31d98a, 0 0 22px rgba(49,217,138,.4); }

/* ============================================================
   8 — CANDY CARTOON : thick outline, hard drop shadow, bouncy (matches the cartoon Earth)
   ============================================================ */
.card-8 .stations .station {
  border: 3px solid #0c1033; border-radius: 22px;
  background: radial-gradient(130% 90% at 30% -10%, color-mix(in srgb, var(--acl) 85%, #fff) 0%, var(--ac) 55%, var(--acd, var(--ac)) 100%);
  box-shadow: 0 6px 0 #0c1033, 0 12px 20px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5);
  padding: 10px 12px 13px;
}
.card-8 .stations .station::before { height: 0; }
.card-8 .stations .station::after { inset: 6px 10px auto 10px; height: 34%; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
.card-8 .st-badge { background: #0c1033; color: #fff; font: 800 14px 'Baloo 2', var(--font); box-shadow: none; }
.card-8 .st-status { color: #0c1033 !important; font: 800 12px 'Baloo 2', var(--font); letter-spacing: .8px; }
.card-8 .st-read-box { background: #fff !important; border: 2.5px solid #0c1033 !important; border-radius: 14px !important; box-shadow: 0 3px 0 #0c1033; }
.card-8 .st-read-box span { color: #5a5f86 !important; font-family: 'Baloo 2', var(--font) !important; font-size: 11px !important; letter-spacing: .6px !important; }
.card-8 .st-read-box b { font: 800 21px/1.1 'Baloo 2', var(--font); color: #0c1033; }
.card-8 .st-bet .lvl { color: #0c1033; }
.card-8 .stations .st-confirm { border: 2.5px solid #0c1033; border-radius: 16px; font: 800 19px 'Baloo 2', var(--font); letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.card-8 .stations .st-confirm.is-bet { background: linear-gradient(180deg, #7dffb0, #22c46b); color: #fff; box-shadow: 0 4px 0 #0c1033, inset 0 3px 0 rgba(255,255,255,.55); }
.card-8 .stations .st-confirm.is-bet:disabled { background: #c9cde6; color: #6d7299; text-shadow: none; box-shadow: 0 4px 0 #0c1033; }
.card-8 .stations .st-confirm.is-cancel { background: linear-gradient(180deg, #ff9db0, #ff4d6d); box-shadow: 0 4px 0 #0c1033, inset 0 3px 0 rgba(255,255,255,.5); }
.card-8 .stations .st-confirm.is-cash { background: linear-gradient(180deg, #ffe066, #ff9f1a); color: #fff; box-shadow: 0 4px 0 #0c1033, inset 0 3px 0 rgba(255,255,255,.55); animation: c8-cash .7s ease-in-out infinite; }
@keyframes c8-cash { 50% { transform: scale(1.04) rotate(-1deg); } }
.card-8 .stations .st-confirm.is-won { background: #fff; color: #18a659; text-shadow: none; box-shadow: 0 4px 0 #0c1033; }
.card-8 .stations .st-confirm.is-lost { background: #ffd6de; color: #d12a4a; text-shadow: none; box-shadow: 0 4px 0 #0c1033; }
.card-8 .stations .station[data-state="PLACED"] { transform: translateY(-5px); box-shadow: 0 11px 0 #0c1033, 0 16px 22px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); }
.card-8 .stations .station[data-state="INFLIGHT"] { transform: translateY(-5px); animation: c8-live .9s ease-in-out infinite; }
@keyframes c8-live { 0%,100% { transform: translateY(-5px); box-shadow: 0 11px 0 #0c1033, 0 16px 22px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); } 50% { transform: translateY(-8px); box-shadow: 0 14px 0 #0c1033, 0 0 26px var(--acl), inset 0 3px 0 rgba(255,255,255,.5); } }
.card-8 .stations .station[data-state="CASHED"] { box-shadow: 0 6px 0 #0c1033, 0 0 0 4px #4dffa6, 0 0 26px rgba(77,255,166,.6); }
.card-8 .stations .station[data-state="LOST"] { filter: saturate(.35) brightness(.8); }

/* ============================================================
   9 — BOARDING PASS : dark space ticket with side notches and a coloured tear-off stub
   ============================================================ */
.card-9 .stations .station {
  --notch: calc(100% - 67px);
  border: 0; border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 14px, rgba(255,255,255,.22) 14px 22px, transparent 22px 30px) 0 var(--notch) / 16px 1.5px repeat-x,
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 60%) 0 0 / 100% var(--notch) no-repeat,
    linear-gradient(180deg, rgba(22, 36, 78, 0.95) 0%, rgba(9, 16, 42, 0.96) var(--notch), var(--ac) var(--notch), var(--acd, var(--ac)) 100%);
  -webkit-mask: radial-gradient(circle 9px at 0 var(--notch), transparent 96%, #000 100%) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--notch), transparent 96%, #000 100%) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--notch), transparent 96%, #000 100%) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--notch), transparent 96%, #000 100%) right / 51% 100% no-repeat;
  box-shadow: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5));
  padding: 10px 12px 11px;
}
.card-9 .stations .station::before { top: auto; bottom: 66px; left: 14px; right: 14px; height: 0; border-top: 2px dashed rgba(190,215,255,.28); background: none; }
.card-9 .stations .station::after { display: none; }
.card-9 .st-badge { background: var(--ac); color: #fff; border-radius: 6px; box-shadow: none; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.card-9 .st-status { color: rgba(214,228,255,.62) !important; }
.card-9 .station[data-state="INFLIGHT"] .st-status { color: #ffcf5c !important; }
.card-9 .station[data-state="CASHED"] .st-status { color: #4fe39b !important; }
.card-9 .station[data-state="LOST"] .st-status { color: #ff7a8e !important; }
.card-9 .station[data-state="PLACED"] .st-status { color: var(--acl) !important; }
.card-9 .st-read { margin-bottom: 8px; }
.card-9 .st-read-box { background: transparent !important; border: 0 !important; padding: 0 4px !important; }
.card-9 .st-read-box span { color: rgba(190,206,240,.6) !important; }
.card-9 .st-read-box b { color: #fff; font-size: 21px; }
.card-9 .st-bet { border-left: 1.5px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; padding-left: 12px !important; }
.card-9 .st-bet .lvl { color: var(--acl); }
.card-9 .stations .st-confirm { border-radius: 10px; letter-spacing: 1.5px; }
.card-9 .stations .st-confirm.is-bet { background: #fff; color: #0f9d58; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.card-9 .stations .st-confirm.is-bet:disabled { background: rgba(255,255,255,.25); color: rgba(255,255,255,.85); box-shadow: none; }
.card-9 .stations .st-confirm.is-cancel { background: rgba(0,0,0,.28); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.card-9 .stations .st-confirm.is-cash { background: #fff; color: #e06900; box-shadow: 0 3px 0 rgba(0,0,0,.2); animation: c9-cash .9s ease-in-out infinite; }
@keyframes c9-cash { 50% { background: #ffefc2; transform: scale(1.03); } }
.card-9 .stations .st-confirm.is-won { background: #fff; color: #0f9d58; box-shadow: none; }
.card-9 .stations .st-confirm.is-lost { background: rgba(0,0,0,.3); color: #fff; box-shadow: none; }
.card-9 .stations .station[data-state="PLACED"] { transform: translateY(-4px); box-shadow: none; filter: drop-shadow(0 0 10px var(--ac)) drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.card-9 .stations .station[data-state="INFLIGHT"] { transform: translateY(-4px); box-shadow: none; animation: c9-live 1.2s ease-in-out infinite; }
@keyframes c9-live { 0%,100% { filter: drop-shadow(0 0 6px var(--ac)) drop-shadow(0 10px 16px rgba(0,0,0,.5)); } 50% { filter: drop-shadow(0 0 16px var(--acl)) drop-shadow(0 10px 16px rgba(0,0,0,.5)); } }
.card-9 .stations .station[data-state="CASHED"] { box-shadow: none; filter: drop-shadow(0 0 12px rgba(49,217,138,.9)) drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.card-9 .stations .station[data-state="LOST"] { filter: saturate(.4) brightness(.8) drop-shadow(0 10px 16px rgba(0,0,0,.5)); }

/* ============================================================
   10 — PLASMA RING : dark card wrapped in a slowly turning glow ring
   ============================================================ */
.card-10 .stations .station {
  border: 0; border-radius: 18px; background: #070b1c; padding: 12px 13px 13px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--ac) 30%, transparent);
  isolation: isolate;
}
.card-10 .stations .station::before {
  inset: -60%; top: -60%; height: auto; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 18%, var(--acl) 26%, var(--ac) 32%, transparent 42% 68%, var(--acl) 76%, var(--ac) 82%, transparent 92%);
  animation: c10-spin 5s linear infinite;
}
@keyframes c10-spin { to { transform: rotate(360deg); } }
.card-10 .stations .station::after {
  inset: 2px; z-index: -1; border-radius: 16px;
  background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--ac) 22%, #0a1030) 0%, #070b1c 65%);
}
.card-10 .st-badge { background: linear-gradient(90deg, var(--ac), var(--acl)); color: #070b1c; }
.card-10 .st-read-box { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; }
.card-10 .st-read-box b { color: #fff; }
.card-10 .stations .st-confirm { border-radius: 13px; }
.card-10 .stations .st-confirm.is-bet { background: linear-gradient(90deg, #1ed4a0, #31d98a 40%, #7cf0ff); color: #032016; }
.card-10 .stations .st-confirm.is-cash { background: linear-gradient(90deg, #ff5f6d, #ffc371); color: #2a0b00; }
.card-10 .stations .station[data-state="PLACED"] { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--ac) 55%, transparent); }
.card-10 .stations .station[data-state="PLACED"]::before { animation-duration: 2.5s; }
.card-10 .stations .station[data-state="INFLIGHT"] { transform: translateY(-3px); animation: none; box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--ac) 75%, transparent); }
.card-10 .stations .station[data-state="INFLIGHT"]::before { animation-duration: 1s; background: conic-gradient(from 0deg, transparent 0 10%, #ffd36b 20%, var(--acl) 30%, transparent 40% 60%, #ffd36b 70%, var(--acl) 80%, transparent 90%); }
.card-10 .stations .station[data-state="CASHED"] { box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 34px rgba(49,217,138,.6); }
.card-10 .stations .station[data-state="CASHED"]::before { background: conic-gradient(#31d98a, #b9ffd9, #31d98a, #b9ffd9, #31d98a); animation-duration: 3s; }
.card-10 .stations .station[data-state="LOST"]::before { animation: none; background: rgba(255,90,110,.45); }