/* Pazaak — Planet Circuit */
:root {
  --victory: #ffc46b;   /* the VICTORY yellow-orange, reused by the start-menu logo and button hovers */
  --z: 1.25; /* interface scale: 1.25 = 125% (larger text and controls by default) */
  --bg: #0a0c10;
  --panel: rgba(32, 33, 35, 0.96);
  --panel-2: #1a1b1d;
  --bar: #0d0d0e;
  --line: #3b3d41;
  --line-2: #55585e;
  --text: #e8e6e1;
  --muted: #9a9ca1;
  --accent: #e9e3d4;
  --cyan: #79d4ff;
  --red: #d42020;
  --orange: #ff8a1f;
  --gold: #f2c94c;
  --green: #4fe07a;
  --font-ui: 'Orbitron', 'Exo 2', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Exo 2', 'Segoe UI', Arial, sans-serif;
  --cw: 100px;
  --ch: calc(var(--cw) * 1.3);
  --g: calc(var(--cw) * 0.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
#card-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- scrollbars (one theme everywhere) ----------
   Steel thumb in a dark recessed track, turning gold on hover/drag — matches the
   brushed-metal table and the gold accents. WebKit/Blink get the full styling;
   Firefox gets the same colours through scrollbar-color. */
:root { --sb-track: #0b0b0c; --sb-thumb: #8a8e95; --sb-thumb-hi: #d8b24a; }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
@supports selector(::-webkit-scrollbar) {
  /* Blink ignores ::-webkit-scrollbar when scrollbar-color is set, so let the pseudo-elements win there */
  * { scrollbar-width: auto; scrollbar-color: auto; }
}
::-webkit-scrollbar { width: calc(12px * var(--z)); height: calc(12px * var(--z)); }
::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: calc(6px * var(--z));
  box-shadow: inset 0 0 0 1px #2c2e32, inset 0 2px calc(4px * var(--z)) rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb {
  border: calc(3px * var(--z)) solid transparent; border-radius: calc(6px * var(--z)); background-clip: padding-box;
  background-color: var(--sb-thumb);
  background-image: linear-gradient(90deg, #5f6268 0%, #b9bdc3 45%, #8a8e95 60%, #5a5d63 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  min-height: calc(36px * var(--z));
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hi);
  background-image: linear-gradient(90deg, #9c7412 0%, #ffe28a 45%, #e0b43c 60%, #8e680c 100%);
}
::-webkit-scrollbar-thumb:active {
  background-color: #ff8a1f;
  background-image: linear-gradient(90deg, #a94a00 0%, #ffc27a 45%, #ff8a1f 60%, #9a4100 100%);
}
::-webkit-scrollbar-corner { background: var(--sb-track); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: calc(44px * var(--z)); z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: calc(10px * var(--z));
  padding: 0 max(calc(12px * var(--z)), env(safe-area-inset-right)) 0 max(calc(12px * var(--z)), env(safe-area-inset-left));
  background: linear-gradient(#0c0d0f, rgba(12, 13, 15, 0.9));
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 calc(4px * var(--z)) calc(14px * var(--z)) rgba(0, 0, 0, 0.45);
}
.tb-left { display: flex; align-items: center; gap: calc(14px * var(--z)); min-width: 0; justify-self: start; }
.tb-game { display: none; align-items: baseline; gap: calc(10px * var(--z)); min-width: 0; font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.tb-game .tb-where { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
body.in-game .tb-game { display: flex; }
/* "CREDITS # CR": label styled like the WAGER text, amount in credit yellow */
/* credits + wager group, just left of the icon buttons */
.tb-money { display: inline-flex; align-items: baseline; gap: calc(20px * var(--z)); margin-right: calc(10px * var(--z)); white-space: nowrap; }
.tb-credits { display: none; align-items: baseline; gap: calc(8px * var(--z)); white-space: nowrap; }
body.tb-cr .tb-credits { display: inline-flex; }   /* planet screen, side deck screen, and during a match beside the wager */
.tb-cr-label { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.tb-cr-val { font-family: var(--font-ui); font-weight: 700; font-size: calc(12px * var(--z)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: inline-block; }
.tb-cr-val.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.18); color: #fff3b0; } }
.tb-wager { display: none; }
.tb-wager { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; align-items: baseline; gap: calc(8px * var(--z)); }
.tb-wg-val { font-weight: 700; font-size: calc(12px * var(--z)); letter-spacing: 0.08em; color: #ff5a4a; }   /* wager amount in red */
body.in-game .tb-wager:not(:empty) { display: inline-flex; }
/* PAZAAK wordmark: letters filled by a solid colour + a light band (background-clip: text).
   Hover sweeps the band left→right and turns the letters credit-yellow; leaving sweeps it back right→left. */
.brand {
  border: 0; font-family: var(--font-ui); font-weight: 900; letter-spacing: 0.32em; font-size: calc(15px * var(--z));
  cursor: pointer; padding: calc(6px * var(--z)) calc(4px * var(--z));
  color: var(--accent);
  background-color: var(--accent);
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .6s ease, background-color .25s ease, filter .25s ease;
}
.brand:hover, .brand:focus-visible {
  background-color: var(--gold); background-position: 0% 0;
  filter: drop-shadow(0 0 calc(6px * var(--z)) rgba(242, 201, 76, 0.45)); outline: none;
}
/* set score in the top bar */
.sc-me { color: #4fe07a; text-shadow: 0 0 calc(6px * var(--z)) rgba(79, 224, 122, 0.45); }
.sc-opp { color: #ff5a4a; text-shadow: 0 0 calc(6px * var(--z)) rgba(255, 90, 74, 0.45); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(6px * var(--z)); min-width: 0; justify-self: end; }
.icon-btn { width: calc(34px * var(--z)); height: calc(30px * var(--z)); border-radius: calc(3px * var(--z)); background: #151618; border: 1px solid var(--line-2); cursor: pointer; font-size: calc(15px * var(--z)); line-height: 1; display: grid; place-items: center; }
.icon-btn:hover { border-color: #9da1a8; }
.icon-btn.off { opacity: 0.45; text-decoration: line-through; }

/* music menu */
.music-menu { position: fixed; top: calc(50px * var(--z)); right: calc(12px * var(--z)); z-index: 40; width: min(calc(320px * var(--z)), calc(100vw - calc(24px * var(--z)))); padding: calc(12px * var(--z)); display: flex; flex-direction: column; gap: calc(10px * var(--z)); animation: pop .16s ease; }
.music-menu.hidden { display: none; }
.mm-head { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: calc(6px * var(--z)); }
.mm-list { display: flex; flex-direction: column; gap: calc(4px * var(--z)); }
.mm-item { display: flex; align-items: center; gap: calc(10px * var(--z)); width: 100%; text-align: left; background: var(--bar); border: 1px solid var(--line); border-radius: calc(3px * var(--z)); padding: calc(9px * var(--z)) calc(10px * var(--z)); cursor: pointer; font-size: calc(13px * var(--z)); color: #d8d3c8; transition: border-color .15s, background .15s; }
.mm-item:hover { border-color: #cfc9bb; background: #222326; }
.mm-item .dot { width: calc(8px * var(--z)); height: calc(8px * var(--z)); border-radius: 50%; flex: 0 0 auto; background: #2c2d30; border: 1px solid #000; }
.mm-item.sel { border-color: #d8b24a; color: #fff; }
.mm-item.sel .dot { background: var(--orange); box-shadow: 0 0 calc(6px * var(--z)) var(--orange); }
.mm-item small { margin-left: auto; color: var(--muted); font-size: calc(11px * var(--z)); }
.mm-row { display: flex; align-items: center; gap: calc(10px * var(--z)); font-family: var(--font-ui); font-size: calc(10px * var(--z)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mm-row input { flex: 1; accent-color: #c9c3b5; }
.mm-btns .btn { flex: 1; }
#btn-tracks[aria-expanded="true"] { border-color: #e3dccb; background: #26282c; }
.btn.toggle.on { border-color: #d8b24a; color: #ffd98a; box-shadow: inset 0 0 0 1px rgba(216, 178, 74, .35), 0 0 calc(10px * var(--z)) rgba(216, 178, 74, .25); }

/* save / load menu */
.save-menu { width: min(calc(300px * var(--z)), calc(100vw - calc(24px * var(--z)))); }
.sm-info { font-size: calc(13px * var(--z)); color: #d8d3c8; line-height: 1.5; background: var(--bar); border: 1px solid var(--line); border-radius: calc(3px * var(--z)); padding: calc(8px * var(--z)) calc(10px * var(--z)); }
.sm-info b { font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-size: calc(12px * var(--z)); }
.sm-info .cr { color: var(--gold); font-weight: 700; }
.sm-btn { width: 100%; padding: calc(11px * var(--z)) calc(14px * var(--z)); }
.sm-note { margin: 0; font-size: calc(12px * var(--z)); color: var(--muted); line-height: 1.4; }
#btn-save svg { display: block; width: calc(17px * var(--z)); height: calc(17px * var(--z)); }
#btn-save[aria-expanded="true"] { border-color: #e3dccb; background: #26282c; }

/* ---------- online: chat button, badge and panel ---------- */
.chat-btn { display: none; position: relative; }
body.online-chat .chat-btn { display: grid; }
.chat-badge {
  position: absolute; top: calc(-6px * var(--z)); right: calc(-6px * var(--z)); min-width: calc(17px * var(--z)); height: calc(17px * var(--z));
  padding: 0 calc(4px * var(--z)); border-radius: 999px; background: #e5372a; color: #fff; border: 1px solid #000;
  font-family: var(--font-body); font-weight: 700; font-size: calc(10px * var(--z)); line-height: calc(15px * var(--z)); text-align: center;
  box-shadow: 0 0 calc(6px * var(--z)) rgba(255, 60, 40, .7); pointer-events: none;
}
.chat-badge[hidden] { display: none; }
#btn-chat[aria-expanded="true"] { border-color: #e3dccb; background: #26282c; }
.chat-panel { width: min(calc(340px * var(--z)), calc(100vw - 24px)); }
.chat-log {
  height: min(calc(260px * var(--z)), 45vh); overflow-y: auto; background: var(--bar); border: 1px solid var(--line); border-radius: 3px;
  padding: calc(8px * var(--z)) calc(10px * var(--z)); display: flex; flex-direction: column; gap: calc(6px * var(--z));
  font-size: calc(14px * var(--z)); line-height: 1.4; overscroll-behavior: contain;
}
.chat-line { color: #e8e6e1; overflow-wrap: anywhere; }
.chat-lock { float: right; font-family: var(--font-body); letter-spacing: .02em; text-transform: none; font-size: calc(11px * var(--z)); color: #8ff0a8; }
.chat-form input:disabled { opacity: .55; }
.chat-line b { color: #ff8a7a; font-weight: 700; }
.chat-line.mine b { color: var(--gold); }
.chat-empty { margin: auto; text-align: center; font-size: calc(13px * var(--z)); }
.chat-form { display: flex; gap: calc(8px * var(--z)); }
.chat-form input { flex: 1; min-width: 0; background: var(--bar); border: 1px solid var(--line-2); border-radius: 3px; padding: calc(9px * var(--z)) calc(10px * var(--z)); font-size: 16px; color: var(--text); }
.chat-form input:focus { outline: none; border-color: #d6d1c4; }

/* ---------- online: lobby screen ---------- */
.ol-hidden { display: none !important; }
.net-badge {
  align-self: flex-start; font-family: var(--font-ui); font-size: calc(10px * var(--z)); letter-spacing: .2em; text-transform: uppercase;
  padding: calc(5px * var(--z)) calc(10px * var(--z)); border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: var(--bar);
}
.net-badge::before { content: ''; display: inline-block; width: calc(7px * var(--z)); height: calc(7px * var(--z)); border-radius: 50%; margin-right: calc(7px * var(--z)); background: #555; vertical-align: middle; }
.net-badge[data-state="online"] { color: #8ff0a8; border-color: #2f6b3d; }
.net-badge[data-state="online"]::before { background: #4fe07a; box-shadow: 0 0 6px #4fe07a; }
.net-badge[data-state="connecting"] { color: var(--gold); border-color: #6b5a2a; }
.net-badge[data-state="connecting"]::before { background: var(--gold); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ol-hint { margin: calc(-6px * var(--z)) 0 0; font-size: calc(12px * var(--z)); }
.ol-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: calc(12px * var(--z)); font-size: calc(15px * var(--z)); }
.ol-me b { color: var(--gold); font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.ol-list { display: flex; flex-direction: column; gap: calc(8px * var(--z)); }
.ol-player { display: flex; align-items: center; gap: calc(12px * var(--z)); background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: calc(10px * var(--z)) calc(12px * var(--z)); }
.ol-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ol-pinfo b { font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-pinfo small { color: var(--muted); font-size: calc(12px * var(--z)); }
.ol-dot { width: calc(10px * var(--z)); height: calc(10px * var(--z)); border-radius: 50%; flex: 0 0 auto; background: #4fe07a; box-shadow: 0 0 6px rgba(79, 224, 122, .8); }
.ol-player.playing .ol-dot { background: var(--orange); box-shadow: 0 0 6px rgba(255, 138, 31, .7); }
.ol-player.away .ol-dot { background: #666; box-shadow: none; }
.ol-player.playing, .ol-player.away { opacity: .7; }
.ol-empty { text-align: center; padding: calc(24px * var(--z)) calc(12px * var(--z)); line-height: 1.6; border: 1px dashed var(--line-2); border-radius: 3px; }

/* ---------- screens ---------- */
#app { position: fixed; inset: calc(44px * var(--z)) 0 0 0; z-index: 1; }
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: calc(14px * var(--z)) max(calc(14px * var(--z)), env(safe-area-inset-right)) max(calc(14px * var(--z)), env(safe-area-inset-bottom)) max(calc(14px * var(--z)), env(safe-area-inset-left)); }
.screen.active { display: flex; }

.holo, .panel {
  background: var(--panel);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 calc(20px * var(--z)) calc(60px * var(--z)) rgba(0, 0, 0, 0.65);
  border-radius: calc(4px * var(--z));
}
.panel { width: min(calc(760px * var(--z)), 100%); max-height: 100%; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; padding: calc(22px * var(--z)); gap: calc(14px * var(--z)); }
.panel.wide { width: min(calc(1180px * var(--z)), 100%); }
.scroll { overflow: auto; min-height: 0; flex: 1; padding-right: calc(8px * var(--z)); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16px * var(--z)); flex-wrap: wrap; }
.eyebrow { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
h2 { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: calc(4px * var(--z)) 0 calc(4px * var(--z)); font-size: clamp(calc(18px * var(--z)), 3vw, calc(26px * var(--z))); color: var(--accent); }
.muted { color: var(--muted); }
p { margin: calc(4px * var(--z)) 0; line-height: 1.45; }
.head-stats { display: flex; gap: calc(10px * var(--z)); align-items: center; flex-wrap: wrap; }
.stat { background: var(--bar); border: 1px solid var(--line); padding: calc(6px * var(--z)) calc(12px * var(--z)); min-width: calc(96px * var(--z)); text-align: center; }
.stat span { display: block; font-family: var(--font-ui); font-size: calc(9px * var(--z)); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }
.stat b { font-family: var(--font-ui); font-size: calc(18px * var(--z)); color: var(--accent); }
#credits { color: var(--gold); }   /* same yellow as the top-bar credits */

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.2em; font-size: calc(12px * var(--z)); font-weight: 700;
  background: var(--bar); color: var(--accent); border: 1px solid #7d8087; border-radius: calc(3px * var(--z));
  padding: calc(10px * var(--z)) calc(16px * var(--z)); cursor: pointer; transition: background .15s, border-color .15s, transform .08s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn:hover:not(:disabled) { background: #26282c; border-color: #d6d2c8; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn.primary { border-color: #d8d2c3; background: linear-gradient(#2a2b2e, #151618); }
.btn.ghost { border-color: var(--line-2); color: #cfcbc2; }
.btn.small { padding: calc(6px * var(--z)) calc(10px * var(--z)); font-size: calc(10px * var(--z)); }
.btn.danger { border-color: #a33; color: #ffb3b3; }
.btn.big { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--z)); padding: calc(16px * var(--z)) calc(18px * var(--z)); font-size: calc(15px * var(--z)); width: 100%; }
.btn.big small { font-family: var(--font-body); text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--muted); font-size: calc(12px * var(--z)); }
.toolbar { display: flex; flex-wrap: wrap; gap: calc(8px * var(--z)); align-items: center; }
.spacer { flex: 1; }
.check { display: inline-flex; align-items: center; gap: calc(8px * var(--z)); font-size: calc(13px * var(--z)); color: #cfcbc2; cursor: pointer; }
.check input { accent-color: #c9c3b5; width: calc(16px * var(--z)); height: calc(16px * var(--z)); }

/* ---------- title ---------- */
.title-panel { align-items: center; text-align: center; padding: clamp(calc(22px * var(--z)), 5vw, calc(46px * var(--z))); width: min(calc(560px * var(--z)), 100%); }
.logo { font-family: var(--font-ui); font-weight: 900; font-size: clamp(34px, 9.6vw, 74px); white-space: nowrap; max-width: 100%; letter-spacing: 0.22em; padding-left: 0.22em; color: var(--victory); text-shadow: 0 0 calc(20px * var(--z)) rgba(255, 150, 40, 0.6), 0 2px 0 #000; }
.sub { font-family: var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; font-size: calc(11px * var(--z)); color: #f1ebdc; margin-bottom: calc(18px * var(--z)); }
.menu-buttons { display: grid; gap: calc(12px * var(--z)); width: 100%; }
.menu-buttons .btn.big { height: calc(68px * var(--z)); padding: 0 calc(14px * var(--z)); justify-content: center; min-width: 0; transition: border-color .2s ease, color .2s ease, background .15s, box-shadow .2s ease, transform .08s; }
.menu-buttons .btn.big small { transition: color .2s ease; }
/* start-menu buttons: border + text turn the VICTORY yellow on hover */
.menu-buttons .btn.big:hover:not(:disabled), .menu-buttons .btn.big:focus-visible, .menu-buttons .btn.big[aria-expanded="true"] {
  border-color: var(--victory); color: var(--victory);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 calc(12px * var(--z)) rgba(255, 150, 40, 0.25); outline: none;
}
.menu-buttons .btn.big:hover:not(:disabled) small, .menu-buttons .btn.big:focus-visible small, .menu-buttons .btn.big[aria-expanded="true"] small { color: var(--victory); opacity: .85; }
.menu-buttons .btn.big span, .menu-buttons .btn.big small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--z)); }
#btn-title-music[aria-expanded="true"] { border-color: var(--victory); background: #26282c; }
/* the start screen has no top bar */
body.title-screen #topbar { display: none; }
body.title-screen #app { top: 0; }
.push-right { margin-left: auto; }
.foot { margin-top: calc(18px * var(--z)); font-size: calc(13px * var(--z)); color: var(--muted); }

/* ---------- galaxy ---------- */
.planet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(190px * var(--z)), 1fr)); gap: calc(12px * var(--z)); padding-bottom: calc(6px * var(--z)); }
.planet {
  position: relative; background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(3px * var(--z)); padding: calc(14px * var(--z));
  display: flex; gap: calc(12px * var(--z)); align-items: center; cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.planet:hover:not(.locked) { border-color: #cfc9bb; background: #222326; }
.planet.locked { cursor: not-allowed; }
/* dim the orb, name and progress dots of a locked planet, but keep the red LOCKED label vivid */
.planet.locked .orb, .planet.locked .station, .planet.locked .pname, .planet.locked .pips { opacity: 0.45; filter: grayscale(0.7); }
.planet .pinfo { min-width: 0; }
.planet .pname { font-family: var(--font-ui); font-size: calc(13px * var(--z)); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.pips { display: flex; gap: calc(4px * var(--z)); margin-top: calc(6px * var(--z)); }
.pip { width: calc(18px * var(--z)); height: calc(6px * var(--z)); border-radius: calc(3px * var(--z)); background: #2c1708; border: 1px solid #000; }
/* planet progress: red dots in the regular campaign, orange bars in unlocked mode */
.pip.dot { width: calc(10px * var(--z)); height: calc(10px * var(--z)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a1210, #160606 70%); border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9); }
.pip.dot.on { background: radial-gradient(circle at 38% 32%, #ffd0c8 0%, #ff4a3a 30%, #d01810 65%, #7a0804 100%); box-shadow: 0 0 calc(6px * var(--z)) rgba(255, 50, 30, 0.9); }
/* unlocked mode hides everything to do with credits */
body.free-mode .credits-only, body.free-mode .tb-credits { display: none !important; }
.pip.on { background: linear-gradient(#ffd08a, #ff7a1a 55%, #a33a00); box-shadow: 0 0 calc(6px * var(--z)) rgba(255, 130, 40, 0.8); }
.lock-tag { color: #ff4a3a; margin-top: calc(6px * var(--z)); height: calc(12px * var(--z)); display: flex; align-items: center; line-height: 0; filter: drop-shadow(0 0 calc(4px * var(--z)) rgba(255, 60, 40, 0.45)); }   /* red closed padlock in place of the progress dots */
.lock-tag svg { width: calc(14px * var(--z)); height: calc(14px * var(--z)); display: block; }
.orb {
  --c1: #ccc; --c2: #666; --c3: #111; --band: transparent;
  width: calc(54px * var(--z)); height: calc(54px * var(--z)); flex: 0 0 auto; border-radius: 50%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 34% 30%, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  box-shadow: inset -8px -10px calc(18px * var(--z)) rgba(0, 0, 0, 0.7), 0 0 calc(18px * var(--z)) rgba(255, 255, 255, 0.08);
}
.orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(-14deg, transparent 0 calc(7px * var(--z)), var(--band) calc(7px * var(--z)) calc(11px * var(--z)), transparent calc(11px * var(--z)) calc(17px * var(--z))); mix-blend-mode: overlay; }
.orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.45), transparent 32%); }
.orb.big { width: calc(76px * var(--z)); height: calc(76px * var(--z)); }
.station { width: calc(54px * var(--z)); height: calc(64px * var(--z)); flex: 0 0 auto; display: block; filter: drop-shadow(0 0 calc(6px * var(--z)) rgba(255, 190, 90, 0.18)); }
.station.big { width: calc(76px * var(--z)); height: calc(104px * var(--z)); }
.station .sf-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.planet:hover:not(.locked) .station { filter: drop-shadow(0 0 calc(10px * var(--z)) rgba(255, 190, 90, 0.4)); }

/* ---------- planet / opponents ---------- */
.planet-title { display: flex; gap: calc(16px * var(--z)); align-items: center; max-width: calc(760px * var(--z)); }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(260px * var(--z)), 1fr)); gap: calc(14px * var(--z)); }
.opp { background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(3px * var(--z)); padding: calc(16px * var(--z)); display: flex; flex-direction: column; gap: calc(10px * var(--z)); }
.opp.locked { opacity: 0.5; }
.opp.beaten { border-color: #6d5a2c; }
.opp h3 { margin: 0; font-family: var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; font-size: calc(15px * var(--z)); color: var(--accent); }
.opp .otitle { font-size: calc(12px * var(--z)); color: var(--muted); }
.opp .quote { font-style: italic; color: #c9c5bb; font-size: calc(14px * var(--z)); }
.opp .row { display: flex; justify-content: space-between; align-items: center; gap: calc(10px * var(--z)); font-size: calc(13px * var(--z)); }
.opp .reward { display: flex; align-items: center; gap: calc(10px * var(--z)); background: var(--bar); border: 1px solid var(--line); padding: calc(8px * var(--z)); }
.opp .reward .mini { --cw: calc(40px * var(--z)); width: calc(40px * var(--z)); height: calc(52px * var(--z)); position: relative; }
.badge { font-family: var(--font-ui); font-size: calc(10px * var(--z)); letter-spacing: 0.18em; text-transform: uppercase; padding: calc(3px * var(--z)) calc(7px * var(--z)); border: 1px solid var(--line-2); border-radius: 2px; color: var(--muted); }
.badge.win { color: #ffcf7a; border-color: #8a6a2a; }
.stars { color: var(--orange); letter-spacing: 2px; font-size: calc(13px * var(--z)); }

/* ---------- deck builder / shop ---------- */
.section-bar { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.3em; text-transform: uppercase; text-align: center; color: #b9b4a8; background: var(--bar); border: 1px solid var(--line); padding: calc(7px * var(--z)); margin: 0 0 calc(10px * var(--z)); }
.deck-slots { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(8px * var(--z)); background: var(--bar); border: 1px solid var(--line); padding: calc(10px * var(--z)); }
.dslot { aspect-ratio: 100 / 130; background: #171819; border: 1px solid #2c2d30; border-radius: calc(4px * var(--z)); position: relative; cursor: pointer; }
.dslot .card { position: absolute; inset: 0; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(86px * var(--z)), 1fr)); gap: calc(12px * var(--z)); padding: calc(4px * var(--z)) 2px calc(10px * var(--z)); }
.pool-item { display: flex; flex-direction: column; align-items: center; gap: calc(5px * var(--z)); cursor: pointer; background: none; border: 0; padding: 0; }
.pool-item .pc { width: 100%; aspect-ratio: 100 / 130; position: relative; transition: transform .12s; }
.pool-item:hover:not(.disabled) .pc { transform: translateY(-3px); }
.pool-item.disabled { cursor: not-allowed; opacity: 0.35; }
.pool-item .cnt { font-family: var(--font-ui); font-size: calc(10px * var(--z)); letter-spacing: 0.12em; color: var(--muted); }
.pool-item .price { font-family: var(--font-ui); font-size: calc(11px * var(--z)); color: var(--gold); }
.pool-row-title { grid-column: 1 / -1; font-family: var(--font-ui); font-size: calc(10px * var(--z)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding: calc(6px * var(--z)) 0 calc(4px * var(--z)); }

/* ---------- forms ---------- */
.form { display: grid; gap: calc(14px * var(--z)); }
.form label { display: grid; gap: calc(6px * var(--z)); font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.form label.check { display: flex; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: calc(14px * var(--z)); }
input[type=text], .form input:not([type]), .form select, .modal-box input {
  background: var(--bar); border: 1px solid var(--line-2); border-radius: calc(3px * var(--z)); padding: calc(11px * var(--z)) calc(12px * var(--z)); font-family: var(--font-body); font-size: calc(16px * var(--z)); color: var(--text); letter-spacing: 0.02em; text-transform: none; width: 100%;
}
.form input:focus, .form select:focus, .modal-box input:focus { outline: none; border-color: #d6d1c4; }

/* ---------- game screen ---------- */
#scr-game { flex-direction: column; justify-content: stretch; align-items: stretch; padding: calc(6px * var(--z)) max(calc(8px * var(--z)), env(safe-area-inset-right)) max(calc(8px * var(--z)), env(safe-area-inset-bottom)) max(calc(8px * var(--z)), env(safe-area-inset-left)); gap: calc(6px * var(--z)); }
.table-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }

.table { --ch: calc(var(--cw) * 1.3); --g: calc(var(--cw) * 0.1); position: relative; display: flex; gap: calc(var(--cw) * 0.16); padding: calc(var(--cw) * 0.24); border-radius: calc(var(--cw) * 0.12); }
.table.land { flex-direction: row; align-items: stretch; }
.table.port { flex-direction: column-reverse; align-items: stretch; }


.side {
  position: relative; display: flex; flex-direction: row; gap: calc(var(--g) * 0.9); padding: calc(var(--g) * 1.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.06));
  border: 1px solid rgba(25, 29, 34, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 0 rgba(255,255,255,.5);
  border-radius: calc(var(--cw) * 0.07);
  transition: box-shadow .25s;
}
.side.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(255, 138, 31, 0.85), 0 0 calc(var(--cw) * 0.25) rgba(255, 120, 20, 0.45); }

.side-head { display: flex; align-items: stretch; gap: calc(var(--g) * 0.8); height: calc(var(--cw) * 0.36); }
.table.land .s1 .side-head { flex-direction: row-reverse; }
.nameplate {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--g) * 0.8); padding: 0 calc(var(--g) * 1.2);
  background: linear-gradient(#18191b, #0a0a0b); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3b3d41; border-radius: 2px;
}
.table.land .s1 .nameplate { flex-direction: row-reverse; text-align: right; }
.pname { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: max(calc(10px * var(--z)), calc(var(--cw) * 0.13)); color: #ece6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptag { font-family: var(--font-ui); font-size: max(calc(8px * var(--z)), calc(var(--cw) * 0.085)); letter-spacing: 0.18em; color: var(--orange); white-space: nowrap; text-shadow: 0 0 calc(6px * var(--z)) rgba(255, 130, 30, 0.7); }
.ptag.bust { color: #ff5a4a; text-shadow: 0 0 calc(6px * var(--z)) rgba(255, 60, 40, 0.8); }
.total {
  width: calc(var(--cw) * 0.62); flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(#18191b, #0a0a0b); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3b3d41; border-radius: 2px;
  font-family: var(--font-ui); font-weight: 700; font-size: max(calc(13px * var(--z)), calc(var(--cw) * 0.2)); color: #f3eee3;
}
.total.over { color: #ff5a4a; }
.total.twenty { color: #ffc46b; text-shadow: 0 0 calc(8px * var(--z)) rgba(255, 150, 40, 0.8); }
.total.pulse { animation: pulse .45s ease; }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* sets won: red dots running down the outer edge (player 1 far left, player 2 far right) */
.setdots {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * 0.12);
  align-self: center;
  padding: calc(var(--cw) * 0.07) calc(var(--cw) * 0.05);
  background: #0b0b0c; border-radius: calc(999px * var(--z));
  box-shadow: inset 0 1px calc(3px * var(--z)) #000, 0 1px 0 rgba(255, 255, 255, 0.5);
}
.setdot {
  display: block; width: calc(var(--cw) * 0.17); height: calc(var(--cw) * 0.17); min-width: calc(8px * var(--z)); min-height: calc(8px * var(--z)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a1210, #160606 70%);
  border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
}
.setdot.on {
  background: radial-gradient(circle at 38% 32%, #ffd0c8 0%, #ff4a3a 30%, #d01810 65%, #7a0804 100%);
  box-shadow: 0 0 calc(var(--cw) * 0.1) rgba(255, 50, 30, 0.95), 0 0 calc(var(--cw) * 0.22) rgba(255, 40, 20, 0.45);
}
.setdot.new { animation: dotOn .9s ease; }
@keyframes dotOn { 0%, 30%, 60% { filter: brightness(2.2); transform: scale(1.25); } 15%, 45% { filter: brightness(.4); } 100% { filter: none; transform: none; } }
.side-main { display: flex; flex-direction: column; gap: calc(var(--g) * 0.9); min-width: 0; flex: 1 1 auto; }
.s1 { flex-direction: row-reverse; }
.table:not(.land) .s0 { flex-direction: row-reverse; }   /* portrait: both players' set dots on the right */

.side-body { display: flex; gap: calc(var(--g) * 1.6); align-items: center; justify-content: center; }
.table.hb .side-body { flex-direction: column; }
.table.hs .side-body { flex-direction: row; }
.table.hs.land .s0 .side-body { flex-direction: row-reverse; }

.grid { display: grid; grid-template-columns: repeat(3, var(--cw)); grid-template-rows: repeat(3, var(--ch)); gap: var(--g); }
.hand { display: grid; gap: var(--g); }
.table.hb .hand { grid-template-columns: repeat(4, var(--cw)); grid-template-rows: var(--ch); }
.table.hs .hand { grid-template-columns: repeat(2, var(--cw)); grid-template-rows: repeat(2, var(--ch)); }

.slot { position: relative; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * 0.08); background: rgba(10, 12, 14, 0.16); box-shadow: inset 0 1px calc(3px * var(--z)) rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.45); border: 1px solid rgba(20, 24, 28, 0.35); }
.hand .slot { background: rgba(10, 12, 14, 0.24); }
.card { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.08); }
.cardsvg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--cw) * 0.03) calc(var(--cw) * 0.03) rgba(0, 0, 0, 0.45)); }
.card.deal { animation: deal .38s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes deal { 0% { transform: translateY(-30%) scale(.6) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.card.flipped-anim { animation: flipAnim .5s ease; }
@keyframes flipAnim { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.hand .card.playable { cursor: pointer; transition: transform .14s, filter .14s; }
.hand .card.playable:hover, .hand .card.playable:focus-visible { transform: translateY(-8%); filter: brightness(1.08); outline: none; }
.hand .card.playable::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(255, 170, 60, 0.0); transition: box-shadow .15s; }
.hand .card.playable:hover::after { box-shadow: 0 0 0 2px rgba(255, 170, 60, 0.9); }
.hand .card.locked { filter: saturate(.6) brightness(.85); }
.side.bust .grid { animation: shake .45s; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4%); } 40% { transform: translateX(4%); } 60% { transform: translateX(-3%); } 80% { transform: translateX(2%); } }

.divider { position: relative; display: flex; align-items: center; justify-content: center; }
.table.land .divider { width: calc(var(--cw) * 0.5); }
.table.port .divider { height: calc(var(--cw) * 0.5); }
.table.land .divider::before { content: ''; position: absolute; top: 4%; bottom: 4%; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(rgba(0,0,0,0), rgba(20,24,28,.5) 20%, rgba(20,24,28,.5) 80%, rgba(0,0,0,0)); box-shadow: 1px 0 0 rgba(255,255,255,.5); }
.table.port .divider::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(20,24,28,.5) 20%, rgba(20,24,28,.5) 80%, rgba(0,0,0,0)); box-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ring { position: relative; width: calc(var(--cw) * 0.46); height: calc(var(--cw) * 0.46); border-radius: 50%; background: radial-gradient(#d9dde2, #9aa1a8); box-shadow: 0 0 0 2px #1a1c20, inset 0 0 calc(4px * var(--z)) rgba(0,0,0,.5); z-index: 1; }
.arc { position: absolute; inset: 8%; border-radius: 50%; border: calc(var(--cw) * 0.06) solid transparent; transform: rotate(45deg); transition: border-color .25s, filter .25s; }
.table.land .arc.a0 { border-left-color: #2a2b2e; border-bottom-color: #2a2b2e; }
.table.land .arc.a1 { border-right-color: #2a2b2e; border-top-color: #2a2b2e; }
.table.port .arc.a0 { border-bottom-color: #2a2b2e; border-right-color: #2a2b2e; }
.table.port .arc.a1 { border-top-color: #2a2b2e; border-left-color: #2a2b2e; }
.table.land .arc.a0.on { border-left-color: var(--red); border-bottom-color: var(--red); filter: drop-shadow(0 0 calc(4px * var(--z)) rgba(255,40,40,.8)); }
.table.land .arc.a1.on { border-right-color: var(--red); border-top-color: var(--red); filter: drop-shadow(0 0 calc(4px * var(--z)) rgba(255,40,40,.8)); }
.table.port .arc.a0.on { border-bottom-color: var(--red); border-right-color: var(--red); filter: drop-shadow(0 0 calc(4px * var(--z)) rgba(255,40,40,.8)); }
.table.port .arc.a1.on { border-top-color: var(--red); border-left-color: var(--red); filter: drop-shadow(0 0 calc(4px * var(--z)) rgba(255,40,40,.8)); }

.controls { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--z)); }
.ctrl-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(14px * var(--z)); }
#btn-end, #btn-stand, #btn-forfeit, #btn-end-2, #btn-stand-2, #btn-forfeit-2 {
  position: relative; overflow: hidden; isolation: isolate;
  min-width: calc(156px * var(--z)); padding: calc(13px * var(--z)) calc(24px * var(--z)); border-radius: calc(4px * var(--z));
  font-size: calc(13px * var(--z)); font-weight: 900; letter-spacing: 0.24em;
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease, opacity .2s ease;
  will-change: transform;
}
/* yellow END TURN */
#btn-end, #btn-end:hover:not(:disabled),
#btn-end-2, #btn-end-2:hover:not(:disabled) {
  color: #2b1e00; border: 1px solid #6b4f00;
  background: linear-gradient(180deg, #fff09a 0%, #f6cd3a 45%, #d9a10c 55%, #b07d00 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
#btn-end, #btn-end-2 { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.18), 0 calc(3px * var(--z)) calc(8px * var(--z)) rgba(0,0,0,.55); }
#btn-end:hover:not(:disabled), #btn-end-2:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(0,0,0,.18), 0 calc(6px * var(--z)) calc(14px * var(--z)) rgba(0,0,0,.55), 0 0 calc(18px * var(--z)) rgba(255, 205, 60, .65); }
/* red STAND */
#btn-stand, #btn-stand:hover:not(:disabled),
#btn-stand-2, #btn-stand-2:hover:not(:disabled) {
  color: #fff; border: 1px solid #4a0603;
  background: linear-gradient(180deg, #ff8a7c 0%, #e5372a 45%, #c01f14 55%, #870c06 100%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
#btn-stand, #btn-stand-2 { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.25), 0 calc(3px * var(--z)) calc(8px * var(--z)) rgba(0,0,0,.55); }
#btn-stand:hover:not(:disabled), #btn-stand-2:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.25), 0 calc(6px * var(--z)) calc(14px * var(--z)) rgba(0,0,0,.55), 0 0 calc(18px * var(--z)) rgba(255, 70, 50, .6); }
/* black FORFEIT */
#btn-forfeit, #btn-forfeit:hover:not(:disabled),
#btn-forfeit-2, #btn-forfeit-2:hover:not(:disabled) {
  color: #ff4a3a; border: 1px solid #000;
  background: linear-gradient(180deg, #3a3c40 0%, #1c1d20 45%, #0d0d0f 55%, #050506 100%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
#btn-forfeit, #btn-forfeit-2 { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08), 0 calc(3px * var(--z)) calc(8px * var(--z)) rgba(0,0,0,.55); }
#btn-forfeit:hover:not(:disabled), #btn-forfeit-2:hover:not(:disabled) { color: #ff6a5a; text-shadow: 0 0 calc(8px * var(--z)) rgba(255, 60, 40, .55), 0 1px 1px rgba(0,0,0,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.22), 0 calc(6px * var(--z)) calc(14px * var(--z)) rgba(0,0,0,.6), 0 0 calc(16px * var(--z)) rgba(255, 255, 255, .18); }
/* shared hover: lift, brighten, light sweep */
#btn-end::before, #btn-stand::before, #btn-forfeit::before, light sweep */
#btn-end-2::before, #btn-stand-2::before, #btn-forfeit-2::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -75%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); transition: none; pointer-events: none;   /* snaps back instantly on hover-out */
}
#btn-end:hover:not(:disabled), #btn-stand:hover:not(:disabled), #btn-forfeit:hover:not(:disabled), #btn-end-2:hover:not(:disabled), #btn-stand-2:hover:not(:disabled), #btn-forfeit-2:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07) saturate(1.1); }
#btn-end:hover:not(:disabled)::before, #btn-stand:hover:not(:disabled)::before, #btn-forfeit:hover:not(:disabled)::before, #btn-end-2:hover:not(:disabled)::before, #btn-stand-2:hover:not(:disabled)::before, #btn-forfeit-2:hover:not(:disabled)::before { left: 130%; transition: left .55s ease; }
#btn-end:active:not(:disabled), #btn-stand:active:not(:disabled), #btn-forfeit:active:not(:disabled), #btn-end-2:active:not(:disabled), #btn-stand-2:active:not(:disabled), #btn-forfeit-2:active:not(:disabled) { transform: translateY(1px); filter: brightness(.94); transition-duration: .06s; }
#btn-end:focus-visible, #btn-stand:focus-visible, #btn-forfeit:focus-visible, #btn-end-2:focus-visible, #btn-stand-2:focus-visible, #btn-forfeit-2:focus-visible { outline: 2px solid #fff; outline-offset: calc(3px * var(--z)); }
#btn-end:disabled, #btn-stand:disabled, #btn-end-2:disabled, #btn-stand-2:disabled { opacity: 0.38; filter: grayscale(.55) brightness(.8); transform: none; cursor: not-allowed; }

/* ---------- "Flip Player 2 screen": two players facing each other across one screen ---------- */
.controls-p2 { display: none; }
body.flip-mode .controls-p2 { display: flex; rotate: 180deg; }
/* Player 2's half uses the same inner layout as Player 1's, then turns to face the far side */
body.flip-mode .s1 { flex-direction: row; rotate: 180deg; }
body.flip-mode .table:not(.land) .s1 { flex-direction: row-reverse; }   /* portrait: dots on each player's own right */
body.flip-mode .table.land .s1 .side-head { flex-direction: row; }
body.flip-mode .table.land .s1 .nameplate { flex-direction: row; text-align: left; }
body.flip-mode .table.hs.land .s1 .side-body { flex-direction: row-reverse; }
.modal-box.flip180 { rotate: 180deg; }
.modal-box[hidden] { display: none !important; }
.overlay.mirrored { flex-direction: column; justify-content: space-evenly; gap: calc(12px * var(--z)); }
.overlay.mirrored .modal-box { max-height: calc(50vh - calc(24px * var(--z))); max-height: calc(50dvh - calc(24px * var(--z))); padding: calc(14px * var(--z)) calc(16px * var(--z)); gap: calc(8px * var(--z)); }
.overlay.mirrored .big-result { font-size: clamp(24px, 6vw, calc(38px * var(--z))); }
@media (orientation: landscape) {
  /* side by side: Player 1's copy on the left (their half), Player 2's turned copy on the right */
  .overlay.mirrored { flex-direction: row-reverse; }
  .overlay.mirrored .modal-box { max-height: calc(100vh - calc(32px * var(--z))); max-height: calc(100dvh - calc(32px * var(--z))); width: min(calc(460px * var(--z)), calc(50% - 16px)); }
}
.toast.flip { rotate: 180deg; top: calc(22px * var(--z)); bottom: auto; }

/* ---------- modal & toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: calc(16px * var(--z)); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
.overlay.hidden { display: none; }
.modal-box { width: min(calc(520px * var(--z)), 100%); max-height: calc(100vh - calc(32px * var(--z))); max-height: calc(100dvh - calc(32px * var(--z))); overflow: auto; overscroll-behavior: contain; padding: calc(22px * var(--z)) calc(16px * var(--z)) calc(22px * var(--z)) calc(22px * var(--z)); display: flex; flex-direction: column; gap: calc(14px * var(--z)); animation: pop .22s ease; }
.modal-box.wide { width: min(calc(820px * var(--z)), 100%); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-box h3 { margin: 0; font-family: var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; font-size: calc(18px * var(--z)); color: var(--accent); text-align: center; }
.modal-box .mbody { line-height: 1.5; }
.modal-box .mbtns { display: flex; flex-wrap: wrap; gap: calc(10px * var(--z)); justify-content: center; }
.big-result { font-family: var(--font-ui); font-weight: 900; font-size: clamp(calc(30px * var(--z)), 8vw, calc(46px * var(--z))); letter-spacing: 0.16em; text-align: center; }
.big-result.win { color: var(--victory); text-shadow: 0 0 calc(20px * var(--z)) rgba(255, 150, 40, 0.6); }
.big-result.lose { color: #ff6a5a; }
.score-line { display: flex; justify-content: center; gap: calc(18px * var(--z)); font-family: var(--font-ui); letter-spacing: 0.12em; }
.choice-row { display: flex; justify-content: center; gap: calc(10px * var(--z)); flex-wrap: wrap; }
.choice-row .btn { min-width: calc(72px * var(--z)); font-size: calc(18px * var(--z)); }
.rules h4 { font-family: var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; font-size: calc(12px * var(--z)); color: var(--accent); margin: calc(14px * var(--z)) 0 calc(4px * var(--z)); }
.rules ul { margin: calc(4px * var(--z)) 0; padding-left: calc(20px * var(--z)); line-height: 1.5; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--z)), 1fr)); gap: calc(10px * var(--z)); margin-top: calc(6px * var(--z)); }
.legend-item { display: flex; gap: calc(10px * var(--z)); align-items: center; background: var(--bar); border: 1px solid var(--line); padding: calc(8px * var(--z)); }
.legend-item .lc { width: calc(46px * var(--z)); height: calc(60px * var(--z)); position: relative; flex: 0 0 auto; }
.legend-item b { font-family: var(--font-ui); font-size: calc(11px * var(--z)); letter-spacing: 0.1em; text-transform: uppercase; }
.legend-item div { font-size: calc(13px * var(--z)); }
.reward-card { width: calc(90px * var(--z)); height: calc(117px * var(--z)); position: relative; margin: 0 auto; }

.toast { position: fixed; left: 50%; bottom: calc(22px * var(--z)); transform: translateX(-50%) translateY(calc(30px * var(--z))); z-index: 60; background: #0d0d0e; border: 1px solid #7d8087; padding: calc(10px * var(--z)) calc(16px * var(--z)); border-radius: calc(3px * var(--z)); font-family: var(--font-ui); font-size: calc(12px * var(--z)); letter-spacing: 0.12em; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100vw - calc(32px * var(--z))); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- responsive ---------- */
@media (max-width: 950px) {
  #topbar { gap: calc(6px * var(--z)); }
  .tb-left { gap: calc(8px * var(--z)); }
  .tb-credits, .tb-wager { gap: calc(6px * var(--z)); }
  .tb-money { gap: calc(12px * var(--z)); margin-right: calc(4px * var(--z)); }
  .tb-cr-label { font-size: calc(10px * var(--z)); letter-spacing: .14em; }
  body.in-game .tb-where { display: none !important; }
  .panel { padding: calc(14px * var(--z)); gap: calc(10px * var(--z)); }
  .deck-slots { grid-template-columns: repeat(5, 1fr); }
  #btn-end, #btn-stand, #btn-forfeit, #btn-end-2, #btn-stand-2, #btn-forfeit-2 { min-width: calc(110px * var(--z)); padding: calc(12px * var(--z)) calc(12px * var(--z)); }
  .stat { min-width: calc(80px * var(--z)); padding: calc(5px * var(--z)) calc(8px * var(--z)); }
}
/* galaxy map toolbar on phones / narrow tablets: one full-width button per line */
/* galaxy map Menu toggle: only on phones / narrow tablets */
.gal-menu-toggle { display: none; }
.lbl-mob { display: none; }   /* "Exit to Main Menu" wording is mobile-only */
.gal-menu-toggle .chev { width: calc(12px * var(--z)); height: calc(8px * var(--z)); transition: transform .2s ease; }
@media (max-width: 900px) {
  #scr-galaxy .toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  #scr-galaxy .toolbar .btn { width: 100%; }
  #scr-galaxy .lbl-desk, #scr-planet .lbl-desk { display: none; }
  #scr-galaxy .lbl-mob, #scr-planet .lbl-mob { display: inline; }
  /* planet screen: full-width Return to Galaxy Map under the planet header */
  #scr-planet .panel-head { flex-direction: column; align-items: stretch; }
  #btn-planet-back { width: 100%; }
  #scr-galaxy .gal-menu-toggle { display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--z)); }
  #scr-galaxy .gal-menu-toggle[aria-expanded="true"] { border-color: var(--victory); color: var(--victory); }
  #scr-galaxy .gal-menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  /* collapsed: only the Menu button shows */
  #scr-galaxy .toolbar:not(.open) > .btn:not(.gal-menu-toggle) { display: none; }
  #scr-galaxy .toolbar.open > .btn:not(.gal-menu-toggle) { animation: menuIn .18s ease both; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  body.in-game .brand { display: none; }
  /* phones: credits and wager stack as two small lines so both stay visible */
  body.in-game .tb-money { flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
  .tb-cr-label, .tb-wager { font-size: 9px; letter-spacing: .12em; }
  .tb-cr-val, .tb-wg-val { font-size: 10px; }
  .icon-btn { width: calc(30px * var(--z)); }
  .tb-game { font-size: calc(10px * var(--z)); letter-spacing: .12em; }
  .brand { letter-spacing: .2em; font-size: calc(13px * var(--z)); }
}
/* in-game buttons on phones held upright: full width, stacked End Turn / Stand / Forfeit */
@media (max-width: 900px) and (orientation: portrait) {
  .controls { width: 100%; }
  .ctrl-buttons { width: 100%; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: calc(8px * var(--z)); }
  #btn-end, #btn-stand, #btn-forfeit, #btn-end-2, #btn-stand-2, #btn-forfeit-2 { width: 100%; min-width: 0; padding: calc(11px * var(--z)) calc(12px * var(--z)); }
}
@media (max-width: 900px) and (orientation: portrait) {
  body.flip-mode .ctrl-buttons { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; gap: calc(8px * var(--z)); }
  body.flip-mode .ctrl-buttons .btn { padding: calc(10px * var(--z)) 4px; font-size: 12px; letter-spacing: .12em; }
}
@media (max-width: 480px) {
  .controls { width: 100%; }
  .ctrl-buttons { width: 100%; gap: 8px; }
  #btn-end, #btn-stand, #btn-forfeit, #btn-end-2, #btn-stand-2, #btn-forfeit-2 { flex: 1 1 0; min-width: 0; padding: 12px 4px; font-size: 12px; letter-spacing: .12em; }
}
@media (max-height: 520px) {
  #btn-end, #btn-stand, #btn-forfeit { padding: calc(8px * var(--z)) calc(16px * var(--z)); }
  }
@media (max-width: 600px), (max-height: 500px) { :root { --z: 1; } }
@media (max-height: 500px) {
  .deck-slots { grid-template-columns: repeat(10, 1fr); padding: 6px; gap: 5px; }
  #deck-hint { display: none; }
  .panel { padding: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}