/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a1628;
  --bg2:       #0d2040;
  --bg3:       #102850;
  --border:    #1a4060;
  --accent:    #00d4ff;
  --accent2:   #0099bb;
  --text:      #c8e6f5;
  --muted:     #5a8aaa;
  --ok:        #4ade80;
  --warn:      #facc15;
  --danger:    #f87171;
  --beast-bg:  #2d0a0a;
  --beast-brd: #7f1d1d;

  --p1: #00d4ff;
  --p2: #f97316;
  --p3: #22c55e;
  --p4: #a855f7;

  --felt:        rgba(15, 8, 3, .88);
  --felt-border: rgba(140, 80, 30, .5);
  --card-loc-brd:#2a6aaa;
  --card-beast-brd:#8b1c1c;
  --warm-text:   #e8d5b5;
  --warm-muted:  #9a7850;
  --gold:        #d4a855;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  min-height: 100vh;
}

body.game-page {
  background-color: #3a1a06;
  background-image:
    repeating-linear-gradient(91deg, transparent 0, transparent 2px, rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 3px),
    repeating-linear-gradient(178deg, transparent 0, transparent 18px, rgba(255,255,255,.012) 18px, rgba(255,255,255,.012) 19px),
    linear-gradient(165deg, #7a4020 0%, #4a2510 25%, #5c3015 50%, #3d1e08 75%, #5a2e10 100%);
  color: var(--warm-text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted  { color: var(--muted); }
.ok     { color: var(--ok); }
.warn   { color: var(--warn); }
.error  { color: var(--danger); background: #2d0a0a; padding: .5rem .75rem; border-radius: 4px; border: 1px solid var(--beast-brd); }

/* ===================== PLAYER COLORS ===================== */
.color-p1 { color: var(--p1); }
.color-p2 { color: var(--p2); }
.color-p3 { color: var(--p3); }
.color-p4 { color: var(--p4); }
.color-border-p1 { border-color: var(--p1) !important; }
.color-border-p2 { border-color: var(--p2) !important; }
.color-border-p3 { border-color: var(--p3) !important; }
.color-border-p4 { border-color: var(--p4) !important; }
.color-bg-p1 { background: rgba(0,212,255,.07) !important; border-top: 2px solid var(--p1); }
.color-bg-p2 { background: rgba(249,115,22,.07) !important; border-top: 2px solid var(--p2); }
.color-bg-p3 { background: rgba(34,197,94,.07) !important; border-top: 2px solid var(--p3); }
.color-bg-p4 { background: rgba(168,85,247,.07) !important; border-top: 2px solid var(--p4); }

/* ===================== TOPBAR ===================== */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: .4rem 1.2rem; height: 38px; position: relative; z-index: 10;
}
.game-page .topbar {
  background: rgba(12,6,2,.95);
  border-bottom: 1px solid var(--felt-border);
}
.logo { font-size: 1.1rem; font-weight: bold; color: var(--accent); }
.topbar nav { display: flex; gap: 1rem; margin-left: auto; }
.topbar-user { color: var(--accent); font-size: .82rem; }
.topbar-logout {
  border: 1px solid var(--muted); border-radius: 4px;
  padding: .15rem .55rem; font-size: .78rem; color: var(--muted);
}
.topbar-logout:hover { background: var(--muted); color: var(--bg); text-decoration: none; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .85rem; border: 1px solid var(--accent); border-radius: 4px;
  background: transparent; color: var(--accent);
  cursor: pointer; font-size: .8rem; transition: background .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); color: var(--bg); }
.btn-primary  { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn-secondary{ border-color: var(--muted); color: var(--muted); }
.btn-secondary:hover { background: var(--muted); color: var(--bg); }
.btn-danger   { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--bg); }
.btn-info     { border-color: #60a5fa; color: #60a5fa; }
.btn-info:hover { background: #60a5fa; color: var(--bg); }
.btn-warning  { border-color: var(--warn); color: var(--warn); }
.btn-warning:hover { background: var(--warn); color: var(--bg); }
.btn-location { border-color: var(--ok); color: var(--ok); }
.btn-location:hover { background: var(--ok); color: var(--bg); }
.btn-success  { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,.12); font-weight: 700; }
.btn-success:hover { background: #4ade80; color: var(--bg); }
.btn-sm  { padding: .2rem .55rem; font-size: .75rem; }
.btn-xs  { padding: .15rem .4rem; font-size: .7rem; }
.btn-lg  { padding: .6rem 1.4rem; font-size: .95rem; }
button[disabled], .btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.mt4 { margin-top: .3rem; }
.inline-form { display: inline-flex; }

/* ===================== TABLES ===================== */
.table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table th, .table td { padding: .45rem .7rem; border-bottom: 1px solid var(--border); text-align: left; }
.table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }

/* ===================== HOME PAGE ===================== */
.page-home { padding: 2rem; max-width: 900px; margin: 0 auto; }
.page-home h1 { color: var(--accent); margin-bottom: 1rem; }
.page-home h2 { color: var(--muted); margin: 1.5rem 0 .5rem; font-size: 1rem; }

/* ===================== SETUP PAGE ===================== */
.page-setup { padding: 2rem; max-width: 900px; margin: 0 auto; }
.page-setup h1 { color: var(--accent); margin-bottom: 1.5rem; }
.card-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; margin-bottom: 1.4rem; }
.card-section h2 { color: var(--muted); font-size: .85rem; text-transform: uppercase; margin-bottom: .9rem; }
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .65rem; }
.scenario-card {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--border); border-radius: 6px;
  padding: .7rem; cursor: pointer; transition: border-color .12s;
}
.scenario-card input { display: none; }
.scenario-card:hover, .scenario-card.selected { border-color: var(--accent); background: var(--bg3); }
.scenario-card strong { color: var(--accent); font-size: .88rem; }
.scenario-card small  { color: var(--muted); font-size: .76rem; }
.players-setup { display: flex; flex-direction: column; gap: .65rem; }
.player-row { background: var(--bg3); border-radius: 6px; padding: .7rem; }
.player-fields { display: flex; gap: .45rem; margin-top: .45rem; flex-wrap: wrap; }
.player-fields input[type=text], .player-fields select, .select-sm {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: .3rem .55rem; font-size: .8rem;
}
.player-fields select { min-width: 260px; }
.select-sm { min-width: 80px; }

/* ===================== FACTION CARDS ===================== */
.faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: .8rem;
}
.faction-card {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  border: 2px solid var(--border); border-radius: 8px;
  padding: .8rem .6rem; cursor: pointer; transition: border-color .15s, background .15s;
  text-align: center; position: relative;
}
.faction-card input[type="radio"] { display: none; }
.faction-card:hover:not(.faction-taken) { border-color: var(--gold); background: rgba(212,168,85,.08); }
.faction-card.selected { border-color: var(--gold); background: rgba(212,168,85,.15); box-shadow: 0 0 12px rgba(212,168,85,.25); }
.faction-card.faction-taken { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
.faction-card-img { width: 100px; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); }
.faction-card-img-ph {
  width: 100px; height: 130px; border-radius: 6px; border: 1px dashed rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--warm-muted); background: rgba(255,255,255,.03);
}
.faction-card-name { font-size: .88rem; font-weight: 700; color: var(--gold); line-height: 1.2; }
.faction-card-bonuses { font-size: .75rem; color: var(--ok); letter-spacing: .02em; line-height: 1.5; }
.faction-card-desc { font-size: .7rem; color: var(--warm-muted); line-height: 1.3; }
.faction-taken-badge {
  position: absolute; top: .35rem; right: .35rem;
  background: rgba(248,113,113,.8); color: #fff; font-size: .6rem; font-weight: 700;
  padding: .15rem .35rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}

/* ===================== LOGIN PAGE ===================== */
.page-login { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 38px); }
.login-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 2rem 2.4rem; width: 340px; }
.login-logo { font-size: 1.6rem; font-weight: bold; color: var(--accent); text-align: center; margin-bottom: 1rem; }
.login-box h1 { color: var(--text); font-size: 1.15rem; text-align: center; margin-bottom: 1.4rem; }
.login-form { display: flex; flex-direction: column; gap: .9rem; }
.login-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); }
.login-form input {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); padding: .5rem .75rem; font-size: .9rem; transition: border-color .12s;
}
.login-form input:focus { outline: none; border-color: var(--accent); }

/* ===================== WIN / FLASH ===================== */
.win-banner {
  position: fixed; top: 38px; left: 0; right: 0; z-index: 400;
  background: linear-gradient(90deg, #14532d, #166534);
  border-bottom: 2px solid var(--ok); text-align: center;
  padding: .65rem; font-size: 1.1rem; font-weight: bold; color: var(--ok);
}
.flash-result {
  position: fixed; top: 42px; left: 50%; transform: translateX(-50%);
  padding: .45rem 1.2rem; font-size: .82rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: 5px;
  z-index: 300; box-shadow: 0 2px 12px rgba(0,0,0,.5);
  max-width: 90vw; text-align: center;
}
.flash-ok  { background: #0d2a18; color: var(--ok); border-color: var(--ok); }
.flash-err { background: #2d0a0a; color: var(--danger); border-color: var(--danger); }

/* ===================== WAITING BANNER ===================== */
.waiting-banner {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(0,0,0,.45); border-bottom: 1px solid var(--warn);
  padding: .3rem 1rem; font-size: .82rem; color: var(--warn); flex-shrink: 0;
}
.waiting-dot { font-size: 1rem; }

/* ===================== GAME LAYOUT ===================== */
.game-layout {
  display: flex; flex-direction: column;
  height: calc(100vh - 38px);
  overflow: hidden;
}

.topstrip {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--felt); border-bottom: 1px solid var(--felt-border);
  padding: .35rem 1rem; flex-shrink: 0; font-size: .82rem;
}
.scenario-chip { display: flex; gap: .4rem; align-items: center; overflow: hidden; }
.scenario-chip .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; font-size: .75rem; color: var(--warm-muted); }
.round-chip { color: var(--warm-muted); white-space: nowrap; }
.round-chip strong { color: var(--gold); }
.active-chip { font-weight: 600; white-space: nowrap; color: var(--warm-text); }

/* ===================== TABLE AREA — two-column layout ===================== */
.table-area {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}

/* ===== LEFT: Board takes all remaining space ===== */
.board-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 14px 16px 10px;
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.board-wrapper {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 480px; width: 100%;
}

/* Column headers */
.board-headers {
  display: flex; align-items: flex-end; gap: 8px; padding-bottom: 3px;
}
.bh-spacer { width: 72px; flex-shrink: 0; }
.bh-col {
  width: 86px; flex-shrink: 0;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--warm-muted); text-align: center; line-height: 1.3;
}
.bh-loc { width: 96px; }
.bh-ships { flex: 1; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--warm-muted); padding-left: 8px; }

/* Board row */
.board-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 8px 10px;
  transition: box-shadow .15s, background .15s;
}
.board-row.level-row-1 { background: rgba(0,30,20,.35); border-color: rgba(0,180,120,.15); }
.board-row.level-row-2 { background: rgba(0,15,40,.40); border-color: rgba(0,100,200,.15); }
.board-row.level-row-3 { background: rgba(20,0,30,.40); border-color: rgba(120,0,200,.15); }

/* Drag & drop states */
.board-row.drop-valid   { box-shadow: inset 0 0 0 2px rgba(212,168,85,.4); }
.board-row.drop-hover   { background: rgba(212,168,85,.12) !important; box-shadow: inset 0 0 0 3px var(--gold) !important; }
.board-row.drop-invalid { opacity: .45; pointer-events: none; }

.level-tag {
  width: 72px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.level-icon { font-size: 1.4rem; line-height: 1; }
.level-name { font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--warm-muted); font-weight: 600; text-align: center; }

.card-col     { flex-shrink: 0; width: 86px; display: flex; justify-content: center; }
.card-col-loc { flex-shrink: 0; width: 96px; display: flex; justify-content: center; }
.ships-col    { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 4px; min-height: 128px; }

/* ===================== CARDS ===================== */
.card {
  width: 78px; height: 110px;
  border-radius: 7px; border: 2px solid rgba(255,255,255,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden; position: relative;
  font-size: .62rem; text-align: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
  user-select: none;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(0,0,0,.7); }

/* Face-down used pile */
.card-back-used {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 5px),
    linear-gradient(135deg, #1e1008, #2a1508);
  border-color: #4a2a10; cursor: default;
}
.card-back-used::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 4px;
}

/* Face-down loc deck */
.card-back-loc {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255,255,255,.025) 5px, rgba(255,255,255,.025) 6px),
    linear-gradient(135deg, #051525, #0a2040);
  border-color: #1a4a80; cursor: default;
}
.card-back-loc::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(42,106,170,.28); border-radius: 4px;
}

/* Pile stack shadow */
.card-pile-multi {
  box-shadow:
    2px -2px 0 rgba(0,0,0,.45), 4px -4px 0 rgba(0,0,0,.3),
    6px -6px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.5);
}
.card-back-symbol { margin-top: 28px; font-size: 1.7rem; opacity: .3; }
.card-pile-count {
  position: absolute; bottom: 7px;
  font-size: .75rem; font-weight: 700; color: var(--gold);
  background: rgba(0,0,0,.55); border-radius: 3px; padding: 0 5px;
}
.card-back-pattern { margin-top: 28px; font-size: 1.4rem; opacity: .18; }

/* Location card */
.card-loc { background: linear-gradient(160deg, #0d3058, #082040); border-color: var(--card-loc-brd); }
.card-loc:hover { border-color: #5a9ad0; }

/* Beast card */
.card-beast { background: linear-gradient(160deg, #2a0a0a, #180505); border-color: var(--card-beast-brd); }
.card-beast:hover { border-color: var(--danger); }

/* Artifact card (cargo) */
.card-artifact { background: linear-gradient(160deg, #251405, #150c01); border-color: rgba(212,168,85,.4); }
.card-artifact:hover { border-color: var(--gold); }

/* Empty slot */
.card-empty {
  background: transparent; border: 2px dashed rgba(255,255,255,.1); cursor: default;
}
.card-empty:hover { transform: none; box-shadow: 0 3px 8px rgba(0,0,0,.55); }
.card-empty-label { color: rgba(255,255,255,.2); font-size: 1rem; margin-top: 42px; }

/* Ship card */
.card-ship { width: 96px; height: 128px; background: linear-gradient(160deg, #0d1a14, #060f0d); border-color: rgba(255,255,255,.15); }
.color-ship-p1 { border-color: var(--p1); background: linear-gradient(160deg, #002030, #001520); }
.color-ship-p2 { border-color: var(--p2); background: linear-gradient(160deg, #2a1200, #1a0a00); }
.color-ship-p3 { border-color: var(--p3); background: linear-gradient(160deg, #001a10, #000f0a); }
.color-ship-p4 { border-color: var(--p4); background: linear-gradient(160deg, #1a0028, #100018); }
.card-ship-active {
  box-shadow: 0 0 14px 4px rgba(255,255,100,.4), 0 3px 8px rgba(0,0,0,.55) !important;
  transform: translateY(-4px); z-index: 2;
}

/* Draggable ship */
.card-ship[data-my-ship] { cursor: grab !important; }
.card-ship[data-my-ship]:hover { box-shadow: 0 0 0 2px var(--gold), 0 7px 18px rgba(0,0,0,.7); }
.card-ship.dragging { opacity: .35; transform: scale(.93) !important; cursor: grabbing; }

/* Card content */
.card-type-tag {
  width: 100%; background: rgba(0,0,0,.55);
  padding: 2px 4px; font-size: .48rem; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.45); text-align: center; flex-shrink: 0;
}
.card-art { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.85rem; opacity: .55; width: 100%; }
.card-art-sm { font-size: 1.4rem; flex: 1; }
.card-art-sm-img { width: 100%; flex: 1; object-fit: cover; border-radius: 4px; min-height: 0; display: block; }
.card-name {
  width: 100%; padding: 2px 4px; font-size: .58rem; font-weight: 700;
  color: var(--warm-text); text-align: center; line-height: 1.2;
  background: rgba(0,0,0,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-stats {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  padding: 3px 2px; background: rgba(0,0,0,.55); font-size: .55rem; color: var(--warm-text);
}
.card-stats span { white-space: nowrap; }
.card-stats-sm { font-size: .56rem; padding: 3px 2px; }
.card-attack-btn {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: .5rem; padding: 1px 5px; z-index: 2; white-space: nowrap;
}
.card-ship-name {
  padding: 3px 4px 1px; font-size: .58rem; font-weight: 700; text-align: center; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-ship-vessel {
  font-size: .5rem; color: var(--warm-muted); padding: 0 3px; width: 100%;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-ship-actions {
  display: flex; gap: 3px; justify-content: center;
  padding: 3px; background: rgba(0,0,0,.4); width: 100%;
}
.ship-action-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.ship-action-dot.dot-on  { background: currentColor; border-color: currentColor; }
.ship-action-dot.dot-off { background: transparent; }
.ship-action-dot.color-p1 { color: var(--p1); }
.ship-action-dot.color-p2 { color: var(--p2); }
.ship-action-dot.color-p3 { color: var(--p3); }
.ship-action-dot.color-p4 { color: var(--p4); }

.deck-stack-card {
  width: 72px; min-height: 62px;
  border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 5px 4px;
  background: linear-gradient(145deg, #1a2a3a, #0d1a26);
  border: 1.5px solid #2a5a8a;
  font-size: .58rem; color: var(--warm-text);
  box-shadow: 2px -2px 0 #0a1520, 4px -4px 0 #07101a, 0 4px 10px rgba(0,0,0,.5);
  transition: transform .12s;
  cursor: default;
}
.deck-stack-card:hover { transform: translateY(-3px); }
.deck-stack.deck-empty .deck-stack-card { opacity: .28; border-color: #333; background: #111; box-shadow: none; }
.deck-stack-icon  { font-size: 1.1rem; line-height: 1; }
.deck-stack-label { font-size: .53rem; color: var(--warm-muted); text-align: center; line-height: 1.2; }
.deck-stack-count { font-size: .82rem; font-weight: 700; color: var(--gold); }
.deck-stack-disc  { font-size: .48rem; color: var(--warm-muted); opacity: .7; }

/* ===== MIDDLE DECK COLUMN — 5 vertical stacks ===== */
.deck-col {
  width: 96px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 10px 6px;
  background: rgba(0,0,0,.18);
  border-left: 1px solid var(--felt-border);
  border-right: 1px solid var(--felt-border);
  overflow-y: auto;
}
.deck-col-title {
  font-size: .9rem; opacity: .35; margin-bottom: 2px; flex-shrink: 0;
}
.deck-col .deck-stack-card {
  width: 80px; height: 64px;
}

/* ===== RIGHT COLUMN — log + full-height dashboard ===== */
.right-col {
  width: 420px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--felt-border);
  background: rgba(0,0,0,.25);
  overflow: hidden;
}

/* Log — compact, fixed height at top */
.side-log {
  flex-shrink: 0;
  max-height: 130px; overflow-y: auto;
  padding: 7px 8px 5px;
  border-bottom: 1px solid rgba(140,80,30,.25);
}
.side-section-title {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--warm-muted); margin-bottom: 4px;
  border-bottom: 1px solid rgba(140,80,30,.22); padding-bottom: 3px;
}
.log-line {
  display: flex; gap: .3rem; flex-wrap: wrap; align-items: baseline;
  font-size: .68rem; padding: .1rem 0; border-bottom: 1px solid rgba(0,0,0,.3);
}
.log-r   { color: var(--warm-muted); flex-shrink: 0; }
.log-act { color: var(--warn); }
.log-card{ color: var(--ok); }

/* ===================== PLAYER DASHBOARD — full remaining height ===================== */
.player-dashboard {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--felt);
  border-top: 2px solid var(--felt-border);
  overflow-y: auto;
  min-height: 0;
}
.color-dash-p1 { border-top-color: var(--p1) !important; }
.color-dash-p2 { border-top-color: var(--p2) !important; }
.color-dash-p3 { border-top-color: var(--p3) !important; }
.color-dash-p4 { border-top-color: var(--p4) !important; }

.dash-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .35rem .6rem; flex-shrink: 0; flex-wrap: wrap;
  border-bottom: 1px solid rgba(140,80,30,.3);
  background: rgba(0,0,0,.3);
}
.dash-ship { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dash-name { font-size: .85rem; font-weight: 700; }
.dash-faction { font-size: .7rem; color: var(--gold); opacity: .85; letter-spacing: .04em; }
.dash-level { font-size: .72rem; color: var(--warm-muted); }
.dash-stats { display: flex; gap: .5rem; font-size: .78rem; flex-shrink: 0; flex-wrap: wrap; }
.dash-stats span { white-space: nowrap; color: var(--warm-text); }
.dash-stats strong { color: var(--gold); }
.dash-actions { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.action-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid var(--warm-muted); }
.action-dot-on  { background: currentColor; border-color: currentColor; }
.action-dot-off { background: transparent; }
.action-dot.color-p1 { color: var(--p1); }
.action-dot.color-p2 { color: var(--p2); }
.action-dot.color-p3 { color: var(--p3); }
.action-dot.color-p4 { color: var(--p4); }

/* ===================== SHIP DAMAGE STACK ===================== */
.ship-stack {
  display: flex; flex-direction: column; flex-shrink: 0; align-items: stretch;
  width: 96px;
}
.ship-stack .card { transition: box-shadow .15s; transform: none !important; }
.ship-stack .card-ship-active { box-shadow: 0 0 14px 4px rgba(255,255,100,.4), 0 3px 8px rgba(0,0,0,.55) !important; }
.ship-stack:hover { transform: translateY(-3px); transition: transform .15s; }
.ship-dmg-peek {
  display: flex; flex-wrap: wrap; gap: .1rem; align-items: center;
  background: rgba(25,4,4,.85);
  border: 1px solid rgba(248,113,113,.4);
  border-top: none; border-radius: 0 0 5px 5px;
  padding: .14rem .3rem; margin-top: -3px;
  font-size: .55rem; color: #f87171;
  transition: transform .15s;
}
.ship-dmg-peek span {
  background: rgba(248,113,113,.2); border-radius: 3px; padding: .02rem .18rem;
  font-weight: 700; white-space: nowrap;
}
.dash-actions-row {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
  padding: .3rem .6rem; flex-shrink: 0;
  border-bottom: 1px solid rgba(140,80,30,.25);
  background: rgba(0,0,0,.15);
}

.dash-slots-cargo {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid rgba(140,80,30,.2);
}
.dash-slots { flex: 1; padding: .4rem .5rem; overflow-x: auto; }
.dash-section-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .2rem; font-weight: 600; color: var(--warm-muted);
}
.slots-row { display: flex; gap: .5rem; flex-wrap: nowrap; width: 100%; }
.slot-box {
  flex: 1; min-width: 0; overflow: hidden;
  background: rgba(0,0,0,.3); border: 2px dashed rgba(140,80,30,.35);
  border-radius: 8px; padding: .35rem .4rem; font-size: .72rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.slot-num { font-size: .58rem; color: var(--warm-muted); text-transform: uppercase; display: flex; align-items: center; gap: .3rem; }
.slot-cards-stack { display: flex; flex-direction: column; min-width: 0; }
.slot-mini-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(140,80,30,.4);
  border-radius: 5px; padding: .25rem .3rem;
  display: flex; flex-direction: column; gap: .12rem;
  min-width: 0; overflow: hidden;
}
.slot-card-peek {
  display: flex; flex-wrap: wrap; gap: .1rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(140,80,30,.3);
  border-top: none; border-radius: 0 0 5px 5px;
  padding: .15rem .3rem; margin-top: -3px;
  font-size: .58rem; color: var(--ok);
}
.slot-card-peek span { background: rgba(255,255,255,.07); border-radius: 3px; padding: .02rem .15rem; }
.smc-type { font-size: .48rem; text-transform: uppercase; color: var(--gold); opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smc-art  { font-size: .95rem; text-align: center; line-height: 1; }
.smc-name { font-size: .6rem; font-weight: 700; color: var(--gold); line-height: 1.2; word-break: break-word; }
.smc-stats { display: flex; flex-wrap: wrap; gap: .12rem; font-size: .56rem; margin-top: auto; }
.smc-stats span { background: rgba(255,255,255,.08); border-radius: 3px; padding: .02rem .15rem; }
.slot-total { font-size: .65rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: .2rem; display: flex; flex-wrap: wrap; gap: .2rem; }
.stat-ok   { color: var(--ok); font-weight: 600; }
.stat-fail { color: var(--danger, #f87171); font-weight: 700; }
.slot-empty { color: var(--warm-muted); font-style: italic; font-size: .66rem; text-align: center; padding: .5rem 0; }
.slot-box.drop-valid { border-color: rgba(212,168,85,.45); border-style: dashed; }
.slot-box.drop-hover { background: rgba(212,168,85,.15) !important; border: 2px solid var(--gold) !important; box-shadow: inset 0 0 8px rgba(212,168,85,.25); }
.slot-box-inactive { opacity: .35; pointer-events: none; border-style: solid; border-color: rgba(100,70,50,.3); background: rgba(0,0,0,.15); }
.slot-locked { font-size: .6rem; color: var(--warm-muted); text-align: center; padding: .6rem 0; letter-spacing: .04em; }
.si { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; display: inline-block; }
.si-lg { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; display: inline-block; }
.cargo-row { display: flex; gap: .25rem; flex-wrap: wrap; align-items: flex-start; }
.cargo-chip {
  background: rgba(255,255,255,.06); border: 1px solid rgba(140,80,30,.3); border-radius: 4px;
  padding: .15rem .4rem; font-size: .68rem; color: var(--warm-text);
  display: flex; gap: .2rem; align-items: center;
}
.cargo-chip small { color: var(--warm-muted); font-size: .62rem; }

.dash-hand { flex-shrink: 0; padding: .35rem .5rem; }
.hand-row { display: flex; gap: .45rem; flex-wrap: wrap; align-items: flex-start; }
.hand-card {
  width: 100px; min-height: 160px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,80,30,.3);
  border-radius: 7px; padding: .45rem .5rem;
  cursor: pointer; transition: border-color .12s, transform .1s;
  color: var(--warm-text); display: flex; flex-direction: column; gap: .22rem;
}
.hand-card:hover, .hand-card.selected-card {
  border-color: var(--gold); background: rgba(212,168,85,.1); transform: translateY(-3px);
}
.hand-card[data-card-id] { cursor: grab; }
.hand-card[data-card-id].dragging { opacity: .3; transform: scale(.93) !important; cursor: grabbing; }
.color-hover-p1:hover { border-color: var(--p1) !important; }
.color-hover-p2:hover { border-color: var(--p2) !important; }
.color-hover-p3:hover { border-color: var(--p3) !important; }
.color-hover-p4:hover { border-color: var(--p4) !important; }
.hc-type   { font-size: .55rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); opacity: .65; }
.hc-art    { font-size: 1.3rem; text-align: center; line-height: 1; margin: .1rem 0; }
.hc-name   { font-size: .7rem; font-weight: 700; color: var(--gold); line-height: 1.2; }
.hc-stats  { display: flex; flex-wrap: wrap; gap: .2rem; font-size: .65rem; }
.hc-stats span { background: rgba(255,255,255,.07); border-radius: 3px; padding: .03rem .22rem; }
.hc-effect { font-size: .61rem; color: var(--warm-text); line-height: 1.3;
             border-top: 1px solid rgba(140,80,30,.25); padding-top: .25rem; margin-top: auto; }
.hc-desc   { font-size: .57rem; color: var(--warm-muted); line-height: 1.25; font-style: italic; }
.hc-play-btn { width: 100%; justify-content: center; margin-top: .2rem; font-size: .6rem; padding: .12rem .3rem; }

.btn-pill {
  background: rgba(255,255,255,.07); border: 1px solid rgba(140,80,30,.4);
  border-radius: 20px; padding: .1rem .5rem; font-size: .65rem;
  color: var(--warm-muted); cursor: pointer; transition: background .12s, color .12s;
  white-space: nowrap;
}
.btn-pill:hover { background: rgba(212,168,85,.15); color: var(--gold); border-color: var(--gold); }
.load-slot-form {
  display: flex; align-items: flex-end; padding: .25rem .35rem;
  background: rgba(0,0,0,.2); border: 1px dashed rgba(140,80,30,.3); border-radius: 5px;
  min-width: 170px;
}
.load-controls { display: flex; flex-direction: column; gap: .25rem; width: 100%; }
.selected-label { font-size: .68rem; display: block; color: var(--warm-muted); }

/* ===================== MODALS ===================== */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal-box {
  background: #0d1a2e; border: 1px solid var(--accent);
  border-radius: 10px; padding: 1.4rem; min-width: 300px; max-width: 460px; width: 90%;
}
.modal-box h3 { color: var(--accent); margin-bottom: .9rem; font-size: 1rem; }
.modal-beast-req { margin-bottom: .9rem; font-size: .88rem; color: var(--danger); }
.modal-slot-select { margin-bottom: .75rem; font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.modal-slot-select select {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: .3rem .5rem; font-size: .82rem; flex: 1;
}
.modal-buttons { display: flex; gap: .65rem; margin-top: .9rem; }
.modal-box label { display: block; margin-bottom: .45rem; }
.modal-box select { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: .3rem .5rem; }

/* ===================== LOG MODAL ===================== */
.modal-log-box {
  max-width: 620px; width: 94%;
  max-height: 80vh;
  display: flex; flex-direction: column;
}
.log-modal-entries {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 4px;
}
.log-modal-line {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
  font-size: .82rem; padding: .35rem .5rem;
  border-radius: 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.log-modal-line:hover { background: rgba(255,255,255,.04); }

/* ===================== DECK MODAL ===================== */
.deck-modal-box {
  width: 96%; max-width: 1100px; max-height: 88vh;
  display: flex; flex-direction: column;
}
.deck-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem;
}
.deck-tab {
  padding: .28rem .65rem; border-radius: 16px; font-size: .72rem; cursor: pointer;
  border: 1px solid rgba(140,80,30,.35); background: rgba(255,255,255,.04);
  color: var(--warm-muted); display: flex; align-items: center; gap: .35rem;
}
.deck-tab:hover { border-color: var(--gold); color: var(--warm-text); }
.deck-tab.active { background: rgba(212,168,85,.18); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.deck-tab-cnt { font-size: .62rem; background: rgba(0,0,0,.3); border-radius: 8px; padding: .05rem .3rem; }
.deck-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.deck-three-cols {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem;
  flex: 1; overflow: hidden;
}
.deck-pile-col {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(0,0,0,.2); border: 1px solid rgba(140,80,30,.2);
  border-radius: 8px; overflow: hidden;
}
.deck-pile-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem;
  padding: .45rem .6rem; background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(140,80,30,.2); flex-shrink: 0;
}
.deck-pile-title { font-size: .72rem; font-weight: 600; color: var(--gold); }
.deck-pile-list { flex: 1; overflow-y: auto; padding: .3rem .4rem; display: flex; flex-direction: column; gap: 1px; }
.deck-card-row {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .22rem .3rem; border-radius: 4px; font-size: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.deck-card-row:hover { background: rgba(255,255,255,.05); }
.deck-card-discard { opacity: .65; }
.deck-card-board { border-left: 2px solid var(--ok); padding-left: .4rem; }
.deck-card-player { border-left: 2px solid var(--gold); padding-left: .4rem; }
.deck-card-pos { font-size: .6rem; color: var(--warm-muted); min-width: 1.4rem; text-align: right; flex-shrink: 0; }
.deck-card-thumb { width: 20px; height: 26px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.deck-card-name { font-size: .75rem; color: var(--warm-text); flex: 1; min-width: 0; }
.deck-card-stats { font-size: .62rem; color: var(--ok); display: flex; gap: .2rem; flex-wrap: wrap; }
.deck-card-loc { font-size: .65rem; width: 100%; margin-bottom: .1rem; }
.deck-pile-empty { color: var(--warm-muted); font-style: italic; font-size: .72rem; padding: .5rem; text-align: center; }
.deck-shuffle-btn { background: rgba(212,168,85,.15); border-color: rgba(212,168,85,.4); color: var(--gold); }
.deck-shuffle-btn:hover { background: rgba(212,168,85,.3); }
.btn-warning-sm { background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.35); color: #facc15; border-radius: 4px; font-size: .65rem; padding: .15rem .45rem; cursor: pointer; }
.btn-warning-sm:hover { background: rgba(250,204,21,.25); }

/* ===================== TURN ANNOUNCEMENT MODAL ===================== */
.turn-modal {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 500; pointer-events: none; transition: opacity .4s;
}
.turn-modal-box {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 5px, rgba(255,255,255,.012) 5px, rgba(255,255,255,.012) 6px),
    linear-gradient(135deg, #3d1e08, #5c3015);
  border: 2px solid rgba(212,168,85,.65);
  border-radius: 12px; padding: 1rem 1.5rem; text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,.7), 0 0 30px rgba(212,168,85,.12);
}
.turn-modal-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--warm-muted); margin-bottom: .25rem; }
.turn-modal-name  { font-size: 1.25rem; font-weight: 800; margin-bottom: .2rem; }
.turn-modal-sub   { font-size: .8rem; color: var(--gold); }

/* ===================== DISCOVERY MODAL ===================== */
.disc-box {
  background: linear-gradient(150deg, #0d1e10, #091508);
  border-color: var(--ok) !important;
  text-align: center; max-width: 360px;
}
.disc-headline {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: 1.1rem; font-weight: 700; color: var(--ok);
  margin-bottom: 1rem;
}
.disc-headline-icon { font-size: 1.6rem; }
.disc-cards-row {
  display: flex; flex-direction: row; gap: .75rem; justify-content: center;
}
.disc-cards-row .disc-card-reveal { flex: 1; min-width: 160px; margin-bottom: 0; }
.disc-card-img {
  width: 100%; object-fit: cover; border-radius: 5px; margin: .3rem 0; display: block;
}
.disc-card-img-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; background: rgba(0,0,0,.3);
  border: 1px dashed rgba(255,255,255,.12); border-radius: 5px; margin: .3rem 0;
}
.disc-card-reveal {
  background: rgba(0,0,0,.4); border: 1px solid rgba(74,222,128,.2);
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: .75rem;
}
.disc-card-type {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--warm-muted); margin-bottom: .2rem;
}
.disc-card-name {
  font-size: 1.15rem; font-weight: 800; color: var(--gold);
  margin-bottom: .35rem; line-height: 1.2;
}
.disc-card-stats {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  background: rgba(0,0,0,.3); border-radius: 4px; padding: .25rem .5rem;
  margin-bottom: .35rem; font-size: .82rem; font-weight: 600; color: var(--ok);
}
.disc-card-effect {
  font-size: .78rem; color: var(--warm-text); line-height: 1.5;
  border-top: 1px solid rgba(74,222,128,.15); padding-top: .35rem;
}
.disc-card-desc {
  font-size: .72rem; color: var(--warm-muted); margin-top: .25rem;
  font-style: italic; line-height: 1.4;
}
.disc-footer {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid rgba(74,222,128,.18);
}
.disc-dest { font-size: .8rem; font-weight: 600; }

/* ===================== CARGO MODAL ===================== */
.cargo-modal-box {
  max-width: 96vw; width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column;
}
.cargo-modal-cards {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  padding: .5rem 0; overflow-y: auto; justify-content: flex-start;
  align-items: flex-start;
}
.cargo-open-btn { font-size: .78rem; }

.cargo-card-full {
  width: 200px; min-height: 260px;
  background: linear-gradient(160deg, #251405, #150c01);
  border: 1px solid rgba(212,168,85,.4);
  border-radius: 10px; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .45rem;
  cursor: default;
}
.cargo-card-type {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold); opacity: .7;
}
.cargo-card-art {
  font-size: 2rem; text-align: center; line-height: 1; margin: .2rem 0;
}
.card-art-img    { width: 100%; flex: 1; object-fit: cover; border-radius: 4px; min-height: 0; display: block; }
.hc-art-img      { width: 100%; height: 52px; object-fit: cover; border-radius: 4px; display: block; margin: .1rem 0; }
.smc-art-img     { width: 100%; height: 36px; object-fit: cover; border-radius: 3px; display: block; }
.cargo-card-art-img { width: 100%; height: 80px; object-fit: cover; border-radius: 5px; display: block; margin: .2rem 0; }
.cargo-card-name {
  font-size: .95rem; font-weight: 700; color: var(--gold); line-height: 1.25;
}
.cargo-card-stats {
  display: flex; flex-wrap: wrap; gap: .3rem; font-size: .8rem;
}
.cargo-card-stats span {
  background: rgba(255,255,255,.07); border-radius: 4px; padding: .1rem .35rem;
}
.cargo-card-effect {
  font-size: .78rem; color: var(--warm-text); line-height: 1.4;
  border-top: 1px solid rgba(212,168,85,.2); padding-top: .4rem; margin-top: auto;
}
.cargo-card-desc {
  font-size: .72rem; color: var(--warm-muted); line-height: 1.35; font-style: italic;
}

/* ===================== CARD TOOLTIP ===================== */
#card-tooltip {
  display: none;
  position: fixed; z-index: 600; pointer-events: none;
  min-width: 160px; max-width: 230px;
  background: linear-gradient(150deg, #0e1e32, #091525);
  border: 1px solid rgba(212,168,85,.6);
  border-radius: 8px; padding: .55rem .75rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
}
.tip-type {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--warm-muted); margin-bottom: .2rem;
}
.tip-name {
  font-size: .88rem; font-weight: 700; color: var(--gold);
  margin-bottom: .3rem; line-height: 1.25;
}
.tip-name-beast { color: var(--danger); }
.tip-stats {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: .3rem; padding: .2rem .3rem;
  background: rgba(0,0,0,.35); border-radius: 4px;
}
.tip-stat { font-size: .75rem; font-weight: 600; color: var(--warm-text); white-space: nowrap; }
.tip-effect {
  font-size: .72rem; color: var(--warm-text); line-height: 1.4;
  border-top: 1px solid rgba(212,168,85,.2); padding-top: .25rem; margin-top: .15rem;
}
.tip-desc {
  font-size: .68rem; color: var(--warm-muted); line-height: 1.35; margin-top: .2rem;
  font-style: italic;
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb { background: rgba(140,80,30,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,85,.5); }

/* ===================== HAND FULL MODAL ===================== */
.hf-layout {
  display: flex; gap: 1rem; align-items: flex-start;
}
.hf-new-card {
  flex: 0 0 160px; min-width: 140px;
}
.hf-hand {
  flex: 1 1 0;
}
.hf-section-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--warm-muted); margin-bottom: .4rem;
}
.hf-hand-grid {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.hf-hand-card {
  flex: 0 0 calc(20% - .4rem); min-width: 100px; max-width: 130px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(212,168,85,.15);
  border-radius: 6px; padding: .4rem; display: flex; flex-direction: column; gap: .15rem;
  transition: border-color .15s;
}
.hf-hand-card:hover { border-color: rgba(248,113,113,.5); }
.hf-discard-btn {
  width: 100%; background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3); color: #f87171;
  font-size: .62rem; padding: .2rem .3rem; margin-top: auto;
}
.hf-discard-btn:hover { background: rgba(248,113,113,.25); border-color: rgba(248,113,113,.6); }
.hf-discard-new-btn {
  width: 100%; background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.35); color: #f87171;
  font-size: .7rem; padding: .3rem .4rem;
}
.hf-discard-new-btn:hover { background: rgba(248,113,113,.25); border-color: rgba(248,113,113,.65); }
@media (max-width: 600px) {
  .hf-layout { flex-direction: column; }
  .hf-new-card { flex: none; width: 100%; }
  .hf-hand-card { flex: 0 0 calc(33% - .4rem); }
}