/* ============================================================
   BANG! The Duel — minimal card table
   The page never scrolls on desktop: 100dvh shell, three rows
   (opponent · table · you). Cards are the interface — rules and
   labels live in hover tooltips, actions in icon buttons.
   ============================================================ */
:root {
  --coal: #17100e;
  --paper: #e8d7af;
  --paper-light: #f5eaca;
  --ink: #21140f;
  --ink-soft: #5a4338;
  --red: #a52b22;
  --red-bright: #db4b35;
  --law: #234f64;
  --law-light: #68a2b9;
  --outlaw: #7d2d25;
  --outlaw-light: #c66c52;
  --gold: #c79b46;
  --gold-bright: #e8bf6a;
  --display: "Rockwell", "Roboto Slab", Georgia, serif;
  --body: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --card-h: clamp(120px, 21vh, 200px);
  --card-w: calc(var(--card-h) * .643);
  --ccard-h: clamp(96px, 14vh, 150px);
  --ccard-w: calc(var(--ccard-h) * .643);
  --char-h: clamp(120px, 20vh, 190px);
  --char-w: calc(var(--char-h) * .643);
  --ochar-h: clamp(96px, 16vh, 160px);
  --ochar-w: calc(var(--ochar-h) * .643);
  --topbar-h: 44px;
}

* { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html, body { height: 100%; }
html { background: var(--coal); }
body {
  margin: 0;
  overflow: hidden;
  color: var(--paper-light);
  font-family: var(--body);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(170, 100, 52, .16), transparent 62%),
    linear-gradient(160deg, rgba(0,0,0,.2), rgba(0,0,0,.55)),
    repeating-linear-gradient(92deg, #291914 0, #342019 4px, #291813 8px, #3a2118 12px);
}
button, input, select { font: inherit; }
button { color: inherit; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ---------- shell / boot ---------- */
.app-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.boot-card {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(90vw, 440px); padding: 42px; text-align: center; color: var(--ink);
  background: var(--paper); border: 2px solid #8d693b; box-shadow: 0 14px 30px rgba(10,5,3,.38);
  clip-path: polygon(2% 0, 98% 1%, 100% 96%, 96% 100%, 3% 98%, 0 4%);
}
.boot-card strong { display: block; margin: 10px 0; font: 38px/1 var(--display); color: var(--red); }
.boot-kicker { letter-spacing: .22em; text-transform: uppercase; }
.boot-line { display: block; width: 60px; height: 3px; margin: 18px auto 0; background: var(--gold); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { width: 150px; opacity: .45; } }

/* ---------- topbar (minimal) ---------- */
.topbar {
  flex: 0 0 var(--topbar-h); z-index: 20; display: flex; align-items: center;
  justify-content: space-between; padding: 0 clamp(10px, 1.6vw, 22px);
  background: transparent;
}
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--gold);
  border-radius: 50%; color: var(--paper-light); background: var(--red); font: 14px var(--display);
  transform: rotate(-5deg); box-shadow: inset 0 0 0 3px rgba(31, 14, 10, .35);
}
.top-icons { display: flex; align-items: center; gap: 8px; }
.ai-dot { width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: #7c6a52; box-shadow: 0 0 6px rgba(0,0,0,.4); }
.ai-dot.trained { background: var(--gold-bright); box-shadow: 0 0 8px rgba(232,191,106,.7); }
.ghost-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(232,215,175,.25); border-radius: 50%;
  background: rgba(0,0,0,.25); cursor: pointer; transition: .18s ease; color: #d9c8a6;
}
.ghost-btn svg { width: 17px; height: 17px; }
.ghost-btn:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(199,155,70,.12); }

/* ---------- table rows ---------- */
.table-wrap {
  flex: 1; min-height: 0; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0 clamp(10px, 2vw, 30px) 6px; gap: 2px;
}
.row { min-height: 0; }

/* opponent row */
.row.opponent { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.row-side { display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 6px; }
.row-side.right { justify-content: flex-end; }

/* character slots */
.char-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 2vw, 26px); }
.char-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.char {
  position: relative; width: var(--char-w); height: var(--char-h);
  border-radius: 10px; user-select: none;
  transition: transform .16s ease, filter .16s ease;
}
.row.opponent .char { width: var(--ochar-w); height: var(--ochar-h); }
.char-art {
  display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.45));
}
.char-slot.is-active .char { filter: none; }
.char-slot:not(.is-active) .char-art { opacity: .88; }
.active-star {
  position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: #3a2410; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold));
  font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 3;
}
.char.facedown, .char.eliminated {
  display: grid; place-items: center;
  border: 2px dashed rgba(232,215,175,.3); border-radius: 10px;
  background: rgba(0,0,0,.25); color: rgba(232,215,175,.45);
}
.char-glyph { font-size: clamp(22px, 4.5vh, 40px); }
.char.eliminated { filter: grayscale(1); opacity: .55; }
.char.eliminated .char-art { opacity: .5; }

.char.actionable { cursor: pointer; }
.char.actionable::after {
  content: ""; position: absolute; inset: 2px; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2.5px rgba(232,191,106,.85), 0 0 18px rgba(232,191,106,.4);
  animation: breathe 1.6s ease-in-out infinite;
}
.char.actionable:hover { transform: translateY(-4px) scale(1.02); }
.char.actionable:hover::after { animation: none; opacity: 1; }
@keyframes breathe { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* the character whose ability is asking for the current decision */
.char.asking::before {
  content: ""; position: absolute; inset: -4px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(143,188,116,.8), 0 0 22px rgba(143,188,116,.35);
  animation: breathe 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .char.asking::before { animation: none; }
}

/* life bullets over the art */
.life-row {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  display: flex; gap: 3px; padding: 3px 6px; border-radius: 99px;
  background: rgba(20, 11, 8, .82); box-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 2;
}
.bullet { width: 6px; height: clamp(11px, 1.8vh, 15px); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg,#96702c,#ebc56a,#825b1e); border: 1px solid #68471b; }
.bullet.empty { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* equipment under the character */
.equip-row { display: flex; justify-content: center; gap: 4px; min-height: 4px; }
.equip-card {
  position: relative; width: calc(var(--char-w) * .33); border-radius: 4px; user-select: none;
  transition: transform .15s ease;
}
.equip-card img { display: block; width: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); pointer-events: none; }
.equip-card:hover { transform: translateY(-3px) scale(1.6); z-index: 8; }
.equip-card.actionable { cursor: grab; touch-action: none; }
.equip-card.actionable::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(232,191,106,.85), 0 0 10px rgba(232,191,106,.4);
  animation: breathe 1.6s ease-in-out infinite;
}
.equip-card.selected::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 12px rgba(232,191,106,.55);
}

/* decks / hidden hands */
.mini-back {
  display: block; width: clamp(30px, 4.6vh, 44px); height: clamp(45px, 6.9vh, 66px);
  border: 1.5px solid #9b7044; border-radius: 4px;
  background: repeating-radial-gradient(circle at 50%, #4d241d 0 3px, #a84430 4px 7px);
  box-shadow: inset 0 0 0 2.5px #d6b56c, 0 2px 5px rgba(0,0,0,.35);
}
.mini-back.law { background: repeating-radial-gradient(circle at 50%, #173c51 0 3px, #36718c 4px 7px); }
.deck-stack { position: relative; flex: 0 0 auto; }
.deck-stack .mini-back { position: relative; }
.deck-stack::before, .deck-stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: #3a2119; border: 1px solid #6b4a2a;
}
.deck-stack::before { transform: translate(3px, 3px); }
.deck-stack::after { transform: translate(1.5px, 1.5px); }
.deck-count {
  position: absolute; right: -7px; bottom: -7px; z-index: 2; min-width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0 5px; border-radius: 99px;
  background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700;
  border: 1px solid #8d693b; box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
/* face-down reserve: the pile size is public, the characters in it are not */
.reserve-stack { position: relative; flex: 0 0 auto; }
.reserve-stack .char-back {
  position: relative; display: grid; place-items: center;
  width: clamp(26px, 4vh, 38px); height: clamp(39px, 6vh, 57px);
  background: linear-gradient(150deg, #4a2f1c, #2d1a10 60%, #4a2f1c);
}
.reserve-stack .char-back.law { background: linear-gradient(150deg, #21455a, #11242f 60%, #21455a); }
.reserve-stack .char-mark { color: #d6b56c; font-size: 15px; font-weight: 700; opacity: .8; }
.reserve-stack::before, .reserve-stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: #3a2119; border: 1px solid #6b4a2a;
}
.reserve-stack::before { transform: translate(3px, 3px); }
.reserve-stack::after { transform: translate(1.5px, 1.5px); }
.reserve-stack .deck-count { right: -6px; bottom: -6px; min-width: 18px; height: 18px; font-size: 10px; }
.reserve-stack.empty::before, .reserve-stack.empty::after { display: none; }
.reserve-stack.empty .char-back {
  background: none; border-style: dashed; box-shadow: none; opacity: .45;
}
.reserve-stack.empty .deck-count { background: #7d2f24; color: #f3e2c0; border-color: #c0714a; }

.card-back {
  width: clamp(20px, 3vh, 30px); height: clamp(30px, 4.6vh, 45px); margin-left: -11px;
  border: 1.5px solid #9b7044; border-radius: 3.5px;
  background: repeating-radial-gradient(circle at 50%, #4d241d 0 3px, #a84430 4px 7px);
  box-shadow: inset 0 0 0 2.5px #d6b56c, 0 2px 5px rgba(0,0,0,.3);
}
.card-back.law { background: repeating-radial-gradient(circle at 50%, #173c51 0 3px, #36718c 4px 7px); }
.backs-fan { display: flex; align-items: center; padding-left: 11px; }
.more-count { margin-left: 5px; color: #cbb99d; font-size: 11px; }
.known-row { display: flex; gap: 3px; align-items: center; }
.known-card { width: clamp(22px, 3.4vh, 34px); transition: transform .15s ease; }
.known-card img { display: block; width: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.known-card:hover { transform: scale(2.1); z-index: 9; position: relative; }

/* ---------- center table ---------- */
.row.center { display: grid; place-items: center; }
.table-felt {
  position: relative; width: 100%; height: 100%; min-height: clamp(110px, 16vh, 190px);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  border: 1px solid rgba(220,181,112,.2); border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(103,57,35,.5), rgba(23,13,10,.65)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  transition: box-shadow .18s ease;
}
.phase-pill {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; max-width: 90%;
  padding: 5px 16px; border-radius: 99px; white-space: nowrap;
  border: 1px solid rgba(199,155,70,.35); background: rgba(20,11,8,.88);
  color: #cbb99d; font-size: clamp(11px, 1.7vh, 13.5px); letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.phase-pill.yours { color: var(--gold-bright); border-color: var(--gold); }
.phase-line { display: flex; align-items: center; gap: 8px; }
/* the pill grows into a briefing card when the decision needs explaining */
.phase-pill.with-hint {
  flex-direction: column; align-items: center; gap: 3px; white-space: normal;
  width: min(560px, 92%); max-width: 92%; padding: 7px 18px 9px; border-radius: 14px;
  text-align: center;
}
.phase-hint {
  color: #b7a68d; font-size: clamp(10.5px, 1.5vh, 12.5px); line-height: 1.45;
  letter-spacing: .01em;
}
.row.center.has-hint .table-felt { padding-top: clamp(34px, 7vh, 72px); }
.choice-row { display: flex; gap: 10px; align-items: center; z-index: 2; padding-top: 16px; max-width: 70%; overflow-x: auto; scrollbar-width: thin; }
.table-piles { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; }
.discard-spot .pcard { cursor: default; opacity: .92; }
.discard-empty {
  display: block; width: var(--ccard-w); height: var(--ccard-h);
  border: 2px dashed rgba(232,215,175,.2); border-radius: 8px;
}

/* drop zone feedback */
[data-zone].drop-ok { z-index: 4; }
.char-slot[data-zone].drop-ok .char { outline: 2.5px dashed var(--gold-bright); outline-offset: 3px; border-radius: 10px; animation: breathe 1.2s ease-in-out infinite; }
.row.center[data-zone].drop-ok .table-felt { box-shadow: inset 0 0 0 2px rgba(232,191,106,.7), inset 0 0 40px rgba(232,191,106,.14); }
[data-zone].drop-hot { animation: none !important; }
.char-slot[data-zone].drop-hot .char { outline: 3px solid var(--gold-bright); outline-offset: 3px; transform: scale(1.03); }
.row.center[data-zone].drop-hot .table-felt { box-shadow: inset 0 0 0 3px var(--gold-bright), inset 0 0 52px rgba(232,191,106,.28); }
/* hover preview: softer zone outlines before a card is even selected */
.zone-preview .char-slot[data-zone].drop-ok .char { outline: 2px dashed rgba(232,191,106,.5); animation: none; }
.zone-preview .row.center[data-zone].drop-ok .table-felt { box-shadow: inset 0 0 0 2px rgba(232,191,106,.32), inset 0 0 28px rgba(232,191,106,.07); }
body.dragging { cursor: grabbing; }
body.dragging * { cursor: grabbing !important; }

/* ---------- player row ---------- */
.row.player { display: flex; flex-direction: column; }
.player-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.player-table .row-side { padding: 0; }
.player-table .dock { justify-self: end; }

/* the icon dock */
.dock { display: flex; align-items: center; gap: 9px; min-height: 46px; }
.dock-btn {
  position: relative;
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1.5px solid rgba(232,215,175,.35); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), rgba(0,0,0,.35));
  color: #e3d3ae; cursor: pointer; transition: .16s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.dock-btn svg { width: 21px; height: 21px; }
.dock-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold-bright); color: var(--gold-bright); }
.dock-btn:disabled { opacity: .45; cursor: wait; }
.dock-btn.confirm { border-color: rgba(143,188,116,.6); color: #b9d9a2; }
.dock-btn.confirm:hover:not(:disabled) { border-color: #cfe8ba; color: #d9f0c6; }
.dock-btn.danger { border-color: rgba(219,75,53,.65); color: #eb9c8b; }
.dock-btn.danger:hover:not(:disabled) { border-color: var(--red-bright); color: #ffb7a6; }
.dock-btn.deck-pick { border-radius: 8px; width: auto; height: auto; padding: 5px; }
.dock-btn.deck-pick .mini-back { width: 30px; height: 45px; }
/* auto-pass countdown: the pending decision applies when the bar fills */
.dock-btn.countdown { border-color: var(--gold-bright); color: var(--gold-bright); }
.dock-btn.countdown::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -7px; height: 3px;
  border-radius: 2px; background: rgba(232,191,106,.25);
}
.dock-btn.countdown::before {
  content: ""; position: absolute; left: 6px; bottom: -7px; height: 3px; z-index: 1;
  width: 0; border-radius: 2px; background: var(--gold-bright);
  animation: countdown-fill .9s linear forwards;
}
@keyframes countdown-fill { to { width: calc(100% - 12px); } }
/* end-turn spotlight: nothing left to play, beacon the way out */
.dock-btn.spotlight { border-color: var(--gold-bright); color: var(--gold-bright); animation: beacon 1.5s ease-in-out infinite; }
@keyframes beacon {
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(232,191,106,.55); }
  50% { box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 0 9px rgba(232,191,106,0); }
}
@media (prefers-reduced-motion: reduce) {
  .dock-btn.spotlight { animation: none; }
}
.dock-btn.labeled { width: auto; border-radius: 99px; padding: 0 15px; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }
/* ability decisions: the two options carry their own wording */
.dock-btn.named {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; border-radius: 99px;
  padding: 0 16px 0 13px; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap;
}
.dock-btn.named svg { width: 17px; height: 17px; flex: none; }

/* hand fan */
.cards-fan {
  display: flex; justify-content: center; align-items: flex-end;
  padding-top: 16px; min-height: calc(var(--card-h) + 16px);
}
.cards-fan .pcard { margin-left: 8px; }
.cards-fan .pcard:first-child { margin-left: 0; }
.cards-fan[data-fan="1"] .pcard { margin-left: calc(var(--card-w) * -.3); }
.cards-fan[data-fan="2"] .pcard { margin-left: calc(var(--card-w) * -.55); }
.cards-fan[data-fan="1"] .pcard:first-child, .cards-fan[data-fan="2"] .pcard:first-child { margin-left: 0; }
.cards-fan .pcard { transform: rotate(calc((var(--i, 0) - var(--mid, 0)) * 1.1deg)); transform-origin: 50% 120%; }
.cards-fan .pcard.actionable:hover, .cards-fan .pcard.selected { transform: rotate(0deg) translateY(-16px) scale(1.05); }

/* ---------- playing cards ---------- */
.pcard {
  position: relative; flex: 0 0 auto; width: var(--card-w); height: var(--card-h);
  display: block; padding: 0; border: 0; border-radius: 8px; text-align: left;
  background: transparent;
  transition: transform .16s ease, filter .16s ease;
  user-select: none;
}
.pcard-art {
  display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.38));
}
.pcard-reveal {
  position: absolute; right: 2px; top: 3px; display: grid; place-items: center;
  width: clamp(17px, 2.6vh, 23px); height: clamp(17px, 2.6vh, 23px);
  border: 1px solid rgba(54,29,18,.6); border-radius: 50%; color: #3a2519; background: rgba(247,235,203,.95);
  font: 700 clamp(10px, 1.4vh, 12px)/1 var(--display); box-shadow: 0 2px 4px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .15s ease;
}
.pcard:hover .pcard-reveal, .pcard.selected .pcard-reveal { opacity: 1; }
.pcard.actionable { cursor: grab; touch-action: none; }
.pcard.actionable::after {
  content: ""; position: absolute; inset: 1px; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(232,191,106,.75), 0 0 14px rgba(232,191,106,.35);
  animation: breathe 1.8s ease-in-out infinite;
}
.pcard.actionable:hover { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 12px 10px rgba(0,0,0,.42)); z-index: 6; }
.pcard.actionable:hover::after { animation: none; opacity: 1; }
.pcard.selected { transform: translateY(-10px); z-index: 5; filter: drop-shadow(0 12px 10px rgba(0,0,0,.42)); }
.pcard.selected::after { animation: none; opacity: 1; box-shadow: 0 0 0 3px var(--gold-bright), 0 0 18px rgba(232,191,106,.5); }
.pcard.drag-src { opacity: .35; }
.pcard.compact { width: var(--ccard-w); height: var(--ccard-h); border-radius: 6px; }

/* ---------- playability hint (hand) ----------
   On your turn, cards you can act on keep a soft steady glow while the rest
   recede — so what's playable reads at a glance. Hover/selected still win. */
.cards-fan.hinting .pcard:not(.actionable) {
  opacity: .46; filter: saturate(.5) brightness(.82);
  transition: opacity .25s ease, filter .25s ease;
}
.cards-fan.hinting .pcard:not(.actionable):hover { opacity: .82; filter: none; }
.cards-fan.hinting .pcard.actionable:not(:hover):not(.selected)::after {
  animation: none; opacity: .9;
  box-shadow: 0 0 0 1.5px rgba(232, 191, 106, .5), 0 0 15px rgba(232, 191, 106, .28);
}

/* ---------- effect ghosts (played / drawn / revealed cards) ---------- */
#fx-root { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
.fx-ghost {
  position: fixed; transform-origin: top left; perspective: 700px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.fx-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.fx-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fx-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
.fx-back { transform: rotateY(180deg); }
.fx-back .mini-back, .fx-fill { width: 100%; height: 100%; }
.fx-float {
  position: fixed; z-index: 195; pointer-events: none;
  font: 700 clamp(19px, 3vh, 26px) var(--display);
  text-shadow: 0 2px 5px rgba(0, 0, 0, .65);
}
.fx-float.damage { color: var(--red-bright); }
.fx-float.heal { color: var(--gold-bright); }
.fx-float.death { color: #cfc4ad; font-size: clamp(24px, 4vh, 34px); }

/* BANG! / MISSED! callouts across the felt */
.fx-callout {
  position: fixed; left: 50%; top: 42%; z-index: 196; pointer-events: none;
  font: clamp(42px, 9vh, 88px) var(--display); letter-spacing: .06em; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-2deg);
  text-shadow: 0 3px 0 rgba(43,16,10,.8), 0 12px 30px rgba(0,0,0,.65);
}
.fx-callout.bang { color: var(--red-bright); }
.fx-callout.missed { color: var(--gold-bright); }

/* death ceremony skull */
.fx-skull {
  position: fixed; z-index: 197; pointer-events: none;
  font-size: clamp(40px, 8vh, 72px); line-height: 1; color: #e6dcc4;
  text-shadow: 0 4px 14px rgba(0,0,0,.75);
  transform: translate(-50%, -50%);
}

.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; margin: 0 !important;
  transform-origin: 50% 50%; opacity: .96;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.5));
}
.drag-ghost.returning { transition: transform .22s ease-in, opacity .22s ease-in; opacity: 0; }

/* busy shimmer on the phase pill */
.spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-shell.busy .pcard.actionable, .app-shell.busy .equip-card.actionable,
.app-shell.busy .char.actionable { pointer-events: none; filter: saturate(.8); }

/* ---------- chooser popover ---------- */
.chooser {
  position: fixed; z-index: 210; display: flex; flex-direction: column; gap: 5px;
  min-width: 200px; max-width: 300px; padding: 8px;
  border: 1px solid var(--gold); border-radius: 10px;
  background: rgba(26, 15, 11, .98); box-shadow: 0 18px 40px rgba(0,0,0,.6);
  animation: pop .14s ease-out;
}
@keyframes pop { from { transform: translateY(4px) scale(.97); opacity: 0; } }
.chooser button {
  padding: 8px 10px; border: 1px solid rgba(215,188,143,.3); border-radius: 6px;
  background: rgba(255,255,255,.05); text-align: left; cursor: pointer; transition: .15s ease;
}
.chooser button:hover { border-color: var(--gold); background: rgba(199,155,70,.15); }
.chooser button strong { display: block; font-weight: 600; }
.chooser button small { color: #bca98e; }

/* ---------- log drawer ---------- */
.log-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 80;
  width: min(85vw, 300px); display: flex; flex-direction: column;
  border-left: 1px solid rgba(199,155,70,.3); background: rgba(20,12,9,.97);
  box-shadow: -14px 0 40px rgba(0,0,0,.5);
  transform: translateX(102%); transition: transform .22s ease;
}
.log-drawer.open { transform: none; }
.log-drawer header {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(199,155,70,.2);
}
.log-drawer header strong { font: 16px var(--display); color: var(--gold-bright); }
.log-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 14px 12px; scrollbar-width: thin; scrollbar-color: rgba(199,155,70,.5) transparent; }
.log-entry { position: relative; padding: 5.5px 6px 5.5px 15px; border-bottom: 1px solid rgba(255,255,255,.055); color: #cdbb9f; font-size: 11.5px; line-height: 1.3; }
.log-entry::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #88745e; }
.log-entry.law::before { background: var(--law-light); }
.log-entry.outlaw::before { background: var(--outlaw-light); }
.log-entry.system { color: var(--gold); font-style: italic; }

/* ---------- toast / tooltip ---------- */
#toast {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 220; max-width: min(90vw, 460px); padding: 9px 16px;
  border: 1px solid #b95645; border-radius: 8px; color: #ffd4c8; background: rgba(120,32,25,.96);
  font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: pop .18s ease-out;
}
#tooltip {
  position: fixed; z-index: 230; max-width: 270px; padding: 8px 11px; pointer-events: none;
  border: 1px solid var(--gold); border-radius: 8px;
  background: rgba(24, 14, 11, .97); color: #e9dcc0; font: 12px/1.4 Georgia, serif;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
#tooltip strong { display: block; margin-bottom: 2px; font-family: var(--display); color: var(--gold-bright); }

/* ---------- winner overlay ---------- */
.winner-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(13,7,5,.72); backdrop-filter: blur(3px); animation: fade .4s ease;
}
@keyframes fade { from { opacity: 0; } }
.winner-banner {
  width: min(92vw, 420px); padding: 34px 26px; text-align: center; color: var(--ink);
  background: linear-gradient(145deg, var(--paper-light), var(--paper));
  border: 2px solid #9d7540; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  clip-path: polygon(1% 0, 98% 1%, 100% 97%, 96% 100%, 2% 99%, 0 4%);
}
.winner-banner .star { font-size: 44px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.winner-banner strong { display: block; margin: 6px 0 2px; font: 30px var(--display); color: var(--red); }
.winner-banner span { color: var(--ink-soft); }
.winner-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px;
  margin: 18px 0 0; padding: 12px 4px;
  border-top: 1px solid rgba(125,90,52,.35); border-bottom: 1px solid rgba(125,90,52,.35);
}
.winner-stats div { display: grid; gap: 2px; }
.winner-stats dt { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.winner-stats dd { margin: 0; font: 20px var(--display); color: var(--red); }

/* ---------- buttons / modal ---------- */
.primary-btn {
  margin-top: 18px; padding: 10px 26px; border: 1px solid var(--red); border-radius: 4px;
  color: white; background: var(--red); cursor: pointer; font-weight: 600; letter-spacing: .04em;
}
.primary-btn:hover { background: var(--red-bright); }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(13,7,5,.82); backdrop-filter: blur(8px); }
.modal {
  width: min(430px, 100%); padding: 28px; color: var(--ink); border: 2px solid #9d7540;
  background: linear-gradient(145deg, var(--paper-light), var(--paper)); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  clip-path: polygon(1% 0, 98% 1%, 100% 97%, 96% 100%, 2% 99%, 0 4%);
}
.modal h2 { margin: 0 0 16px; font: 28px var(--display); color: var(--red); text-align: center; }
.side-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.side-option {
  display: grid; justify-items: center; gap: 3px; padding: 14px 8px 10px;
  border: 2px solid rgba(125,90,52,.4); border-radius: 8px; cursor: pointer; transition: .15s ease;
}
.side-option input { position: absolute; opacity: 0; pointer-events: none; }
.side-option .mini-back { width: 34px; height: 51px; }
.side-option strong { font: 15px var(--display); }
.side-option small { color: var(--ink-soft); font-size: 11px; }
.side-option.picked { border-color: var(--red); background: rgba(165,43,34,.08); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.side-option:hover { border-color: #9d7540; }
.form-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; align-items: center; }
.form-row label { color: var(--ink-soft); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.form-row select, .form-row input { width: 100%; padding: 8px; border: 1px solid #a98a57; border-radius: 4px; color: var(--ink); background: rgba(255,255,255,.45); }
.modal-actions { display: flex; justify-content: center; gap: 10px; }
.modal-actions .ghost-btn { width: auto; border-radius: 4px; padding: 10px 18px; margin-top: 18px; color: var(--ink-soft); border-color: rgba(125,90,52,.5); background: transparent; }
.modal-actions .ghost-btn:hover { color: var(--ink); }

/* ---------- tight viewports ---------- */
@media (max-height: 700px) {
  :root { --topbar-h: 38px; }
}

/* ---------- narrow screens: allow scrolling (mobile fallback) ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; }
  .table-wrap { gap: 10px; }
  .row.opponent { grid-template-columns: 1fr; justify-items: center; }
  .row-side { flex-wrap: wrap; justify-content: center; }
  .player-table { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .player-table .dock { justify-self: center; }
  .table-piles { position: static; transform: none; }
  .table-felt { flex-wrap: wrap; padding: 44px 10px 12px; gap: 12px; }
  .cards-fan { flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: 14px; }
  .cards-fan .pcard, .cards-fan[data-fan="1"] .pcard, .cards-fan[data-fan="2"] .pcard { margin-left: 0; transform: none; }
}