* { box-sizing: border-box; margin: 0; padding: 0; }

/* thronesdb icon font — the same challenge/faction icons the real cards use */
@font-face {
  font-family: 'thronesdb';
  src: url('../assets/fonts/thronesdb.woff') format('woff'),
       url('../assets/fonts/thronesdb.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.tdb {
  font-family: 'thronesdb';
  font-style: normal; font-weight: normal; line-height: 1;
  display: inline-block; vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
}
.tdb-military:before { content: '\e605'; }
.tdb-intrigue:before { content: '\e602'; }
.tdb-power:before    { content: '\e607'; }
.tdb-plot:before     { content: '\e60c'; }
.tdb-agenda:before   { content: '\e611'; }
.tdb-unique:before   { content: '\e60b'; }
.tdb-baratheon:before      { content: '\e600'; }
.tdb-greyjoy:before        { content: '\e601'; }
.tdb-lannister:before      { content: '\e603'; }
.tdb-martell:before        { content: '\e604'; }
.tdb-thenightswatch:before { content: '\e606'; }
.tdb-stark:before          { content: '\e608'; }
.tdb-targaryen:before      { content: '\e609'; }
.tdb-tyrell:before         { content: '\e60a'; }
.tdb-neutral:before        { content: '\e612'; }

/* small inline SVG icons (gold / piles — no glyph in the font) */
.sic { display: inline-flex; vertical-align: -2px; }
.sic svg { width: 13px; height: 13px; display: block; }
.sic-deck, .sic-hand { color: #b8b39f; }
.sic-discard { color: #9a958a; }
.sic-dead { color: #cfccc0; }
.sic-reserve, .sic-initiative { color: #d9c88a; }

body {
  background: #14161c;
  color: #d8d5cc;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}

#app { height: 100vh; }

/* ---------- faction select ---------- */
.select-screen {
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
.select-screen h1 { font-size: 42px; letter-spacing: 2px; color: #e8e2d0; }
.select-screen h2 { font-weight: 300; color: #9a958a; }
.subtitle { color: #7a766d; margin-bottom: 20px; }
.faction-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.faction-tile {
  border: 2px solid #555; border-radius: 10px;
  padding: 16px 20px 18px; min-width: 190px; text-align: center;
  cursor: pointer; background: #1c1f27; transition: transform .1s, background .1s;
}
.faction-tile .faction-art {
  display: block; height: 120px; margin: 0 auto 10px;
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.55);
  pointer-events: none;
}
.faction-tile:hover { transform: scale(1.05); background: #262b36; }
.faction-tile.picked { background: #2e3542; box-shadow: 0 0 0 2px #ffd54a; }
.faction-name { font-size: 17px; font-weight: 600; }
.banner-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.banner-row .subtitle { margin-bottom: 0; }
.banner-select {
  background: #232733; color: #d8d5cc; border: 1px solid #454c5e;
  border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.start-btn {
  background: #3a4356; color: #e8e2d0; border: 1px solid #566181;
  border-radius: 6px; padding: 9px 28px; font-size: 15px; cursor: pointer;
}
.start-btn:hover { background: #4a5570; }

/* ---------- layout ---------- */
#game { display: flex; height: 100vh; }
#board-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#side-col {
  width: 340px; display: flex; flex-direction: column;
  border-left: 1px solid #2a2e38; background: #171a21; padding: 8px; gap: 8px;
}

.zone { flex: 1; padding: 4px 10px 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#ai-zone { background: linear-gradient(#1a1420, #14161c); }
#my-zone { background: linear-gradient(#14161c, #121a16); }

.zone-head { display: flex; align-items: center; gap: 10px; }

.zone-stats {
  font-size: 12.5px; color: #b0aca0; padding: 4px 2px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* ---------- stat chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #1f2430; border: 1px solid #2e3442; border-radius: 20px;
  padding: 2px 9px; white-space: nowrap; line-height: 1.5; cursor: default;
}
.chip b { color: #f0c75e; font-size: 13px; }
.chip .dim { color: #6d6a60; }
.chip .cic { font-size: 12px; display: inline-flex; align-items: center; }
.chip .sic svg { width: 12px; height: 12px; }
.chip .dim .sic svg { width: 10px; height: 10px; }
.chip .dim .sic { vertical-align: -1px; margin-left: 3px; }
.chip .tdb-plot { color: #d9c88a; }
.chip.house .fac-ic { font-size: 14px; margin-right: 2px; }
.chip.house {
  border-color: var(--fc); border-width: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 28%, #1f2430), #1f2430);
  color: #e8e2d0; font-weight: 700;
}
.chip.house .fp {
  background: #f0c75e; color: #14161c; border-radius: 10px;
  font-size: 10px; font-weight: 700; padding: 0 6px; margin-left: 4px;
}
.chip .pbar {
  width: 52px; height: 5px; background: #2a2f3c; border-radius: 3px;
  overflow: hidden; margin-left: 3px;
}
.chip .pbar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #8a7433, #ffd54a);
  transition: width .4s ease;
}
.chip.plot-stat { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.chip.plot-stat b { font-size: 12px; }
.chip.click { cursor: pointer; transition: background .1s, border-color .1s; }
.chip.click:hover { background: #2a3040; border-color: #8a7433; }

/* ---------- rows ---------- */
.row {
  display: flex; gap: 6px; padding: 12px 2px 4px;  /* top padding so raised/selected cards aren't clipped */
  min-height: calc(var(--ch) - 10px); align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}

/* stats + hand grouped and pinned to the bottom of the screen */
#my-bottom { margin-top: auto; }
#my-bottom .zone-stats { padding: 4px 6px; }
#hand-bar {
  display: flex; align-items: stretch; gap: 10px;
  border-top: 1px solid #2a2e38; background: #10141a; padding: 0 6px;
}
#hand-bar .row.hand { flex: 1; min-height: calc(var(--ch) + 18px); margin-bottom: 0; }

/* ---------- plot / faction / agenda meta cards ---------- */
.meta-cards { display: flex; gap: 8px; align-items: center; padding: 6px 4px; }
#hand-bar .meta-cards { border-right: 1px solid #2a2e38; padding-right: 12px; }
.meta-card { position: relative; flex-shrink: 0; }
.meta-card img, .meta-card .text-card {
  display: block; height: 106px; border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.meta-card .text-card { width: 76px; }
.meta-card.land img { height: 80px; }
.meta-tag {
  position: absolute; bottom: -1px; left: 0; right: 0; text-align: center;
  font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(10,12,16,.85); color: #d9c88a; border-radius: 0 0 5px 5px;
  padding: 1px 0;
}
.meta-card.faction { transition: transform .4s ease; }
.meta-card.faction.knelt { transform: rotate(90deg) scale(.8); }
.meta-cards.mini .meta-card.faction.knelt { transform: rotate(90deg) scale(.85); }
.faction-card {
  width: 76px; height: 106px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid var(--fc);
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--fc) 45%, #14161c), #171a22 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .4s ease;
}
.faction-card .fc-name { font-size: 11px; font-weight: 700; color: #e8e2d0; line-height: 1.2; }
.faction-card .fc-knelt {
  font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: #ffd54a; border: 1px solid #8a7433; border-radius: 8px; padding: 0 6px;
}
.faction-card.knelt { transform: rotate(90deg) scale(.8); }
.meta-cards.mini .meta-card img { height: 62px; }
.meta-cards.mini .meta-card.land img { height: 46px; }
.meta-cards.mini .faction-card { width: 44px; height: 62px; }
.meta-cards.mini .faction-card .fc-name { font-size: 8px; }
.meta-cards.mini .faction-card.knelt { transform: rotate(90deg) scale(.85); }
.meta-cards.mini .meta-tag { font-size: 7px; letter-spacing: 1px; }
.meta-cards.mini { padding: 2px 4px; }

/* ---------- mid bar ---------- */
#mid-bar {
  border-top: 1px solid #2a2e38; border-bottom: 1px solid #2a2e38;
  background: #1b1f28; padding: 6px 12px;
  display: flex; align-items: center; gap: 12px; row-gap: 4px;
  flex-wrap: wrap; min-height: 52px;
}
#challenge-ind { font-size: 13px; color: #d8d5cc; font-weight: 600; white-space: nowrap; }
.ci-tag {
  border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: 1px; margin-right: 4px;
}
.ci-tag .tdb, .pbtn.chal-btn .tdb { color: #fff; font-size: 12px; margin-right: 2px; }
.cit-military { background: #8e2b23; }
.cit-intrigue { background: #1f6e43; }
.cit-power    { background: #1f5586; }
.cit-att { color: #e88a84; }
.cit-def { color: #8ab6e0; }
#prompt-text { font-size: 14px; color: #e8e2d0; flex: 1 1 200px; }
#prompt-note { color: #e8b04a; font-weight: 600; animation: notefade 3s ease forwards; }
@keyframes notefade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.ci-claim { color: #d9c88a; font-weight: 600; margin-left: 4px; }
#prompt-buttons {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; margin-left: auto; flex: 0 1 auto;
  max-height: 86px; overflow-y: auto;
}
.pbtn {
  background: #3a4356; color: #e8e2d0; border: 1px solid #566181;
  border-radius: 6px; padding: 7px 16px; font-size: 13px; cursor: pointer;
}
.pbtn:hover:not(:disabled) { background: #4a5570; }
.pbtn:disabled { opacity: .4; cursor: default; }
.pbtn.primary:not(:disabled) { border-color: #8a7433; box-shadow: 0 0 0 1px rgba(240,199,94,.25); }
.pbtn.undo { background: #2c3140; color: #d9c88a; font-size: 12px; }
.pbtn.undo:hover:not(:disabled) { background: #3a4356; color: #ffe38a; }

#speed-btn {
  height: 26px; border-radius: 13px; flex-shrink: 0; padding: 0 10px;
  background: #2c3140; color: #b0aca0; border: 1px solid #454c5e;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#speed-btn:hover { background: #3a4356; color: #d9c88a; }

/* challenge initiation buttons */
.pbtn.chal-btn {
  font-weight: 700; letter-spacing: .5px; color: #fff;
  border-width: 1px; padding: 7px 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: transform .08s, filter .08s;
}
.pbtn.chal-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.2); }
.pbtn.chal-military { background: linear-gradient(#a03328, #6e1f18); border-color: #c05248; }
.pbtn.chal-military:hover:not(:disabled) { background: linear-gradient(#b03a2e, #7e251d); }
.pbtn.chal-intrigue { background: linear-gradient(#237a4b, #14522f); border-color: #3f9a68; }
.pbtn.chal-intrigue:hover:not(:disabled) { background: linear-gradient(#28874f, #1a5c36); }
.pbtn.chal-power { background: linear-gradient(#2565a0, #173f68); border-color: #4a86bd; }
.pbtn.chal-power:hover:not(:disabled) { background: linear-gradient(#2b71b0, #1b4a78); }

#help-btn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: #2c3140; color: #d9c88a; border: 1px solid #566181;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
#help-btn:hover { background: #3a4356; }

/* ---------- phase track (breadcrumb) ---------- */
#phase-track { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pt-round {
  font-size: 11px; font-weight: 700; color: #14161c; background: #f0c75e;
  border-radius: 4px; padding: 1px 6px; margin-right: 4px;
}
.pt-item { font-size: 10px; letter-spacing: .5px; color: #5d5a52; text-transform: uppercase; }
.pt-item.active {
  color: #ffd54a; font-weight: 700; font-size: 11px;
  text-shadow: 0 0 12px rgba(255, 213, 74, .5);
}
.pt-sep { color: #3a3e48; font-size: 9px; }

/* ---------- FX overlay (phase banners + event toasts) ---------- */
#fx-layer {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 40;
  pointer-events: none; padding-bottom: 12vh;
}
/* during playback the (stale) board is frozen and the overlay is clickable to skip */
#game.playing #board-col { pointer-events: none; }
#fx-layer.active { pointer-events: auto; cursor: pointer; }
#fx-layer.active::after {
  content: 'click to skip ⏩';
  position: absolute; bottom: 12vh;
  font-size: 12px; letter-spacing: 1px; color: #7a766d;
  background: rgba(16,18,24,.85); border: 1px solid #2e3442;
  border-radius: 14px; padding: 4px 14px;
}
.fx { animation: fxpop var(--fxdur, 1300ms) ease forwards; }
@keyframes fxpop {
  0%   { opacity: 0; transform: translateY(14px) scale(.95); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.fx-phase {
  position: relative; width: 100%; text-align: center; padding: 26px 0;
  background: linear-gradient(90deg, transparent, rgba(20,22,28,.94) 18%, rgba(20,22,28,.94) 82%, transparent);
  border-top: 1px solid rgba(240,199,94,.35);
  border-bottom: 1px solid rgba(240,199,94,.35);
}
.fx-phase .pb-round { font-size: 15px; letter-spacing: 6px; color: #b0aca0; text-transform: uppercase; }
.fx-phase .pb-phase {
  font-size: 42px; font-weight: 700; letter-spacing: 3px; color: #e8e2d0;
  text-shadow: 0 2px 30px rgba(0,0,0,.9);
}
.fx-phase .pb-sub { font-size: 13px; color: #9a958a; margin-top: 2px; letter-spacing: .5px; }

.fx-toast {
  display: flex; align-items: center; gap: 14px;
  background: rgba(16,18,24,.94); border: 1px solid #3a4152; border-radius: 12px;
  padding: 14px 22px; max-width: 560px;
  box-shadow: 0 10px 40px rgba(0,0,0,.65);
}
.fx-toast .fx-img { height: 130px; border-radius: 6px; flex-shrink: 0; }
.fx-toast .fx-img.land { height: 92px; }
.fx-toast .fx-icon { font-size: 34px; flex-shrink: 0; }
.fx-toast .fx-icon .tdb { vertical-align: 0; }
.fx-toast .fx-body { display: flex; align-items: center; gap: 12px; }
.fx-toast .fx-text { font-size: 15px; color: #e8e2d0; line-height: 1.4; }
.fx-toast .fx-text b { color: #ffe38a; }
.fx-toast .fx-sub { font-size: 12px; color: #9a958a; margin-top: 3px; }

.fx-kill    { border-color: #a03328; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(160,51,40,.35); }
.fx-kill .fx-img { filter: grayscale(1) brightness(.8); }
.fx-discard { border-color: #6d6a60; }
.fx-save    { border-color: #3f9a68; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(63,154,104,.3); }
.fx-cancel  { border-color: #8a7433; }
.fx-power   { border-color: #8a7433; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(240,199,94,.3); }
.fx-plot    { border-color: #8a7433; }
.fx-chal.fxc-military, .fx-chalwin.fxc-military { border-color: #c05248; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(160,51,40,.4); }
.fx-chal.fxc-intrigue, .fx-chalwin.fxc-intrigue { border-color: #3f9a68; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(35,122,75,.4); }
.fx-chal.fxc-power, .fx-chalwin.fxc-power { border-color: #4a86bd; box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 24px rgba(37,101,160,.4); }

/* draw fx: fanned card backs */
.fx-draw .fan { display: flex; flex-shrink: 0; }
.fx-draw .cardback {
  width: 62px; height: 88px; border-radius: 6px; margin-right: -38px;
  border: 2px solid #8a7433;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,199,94,.25) 0 12%, transparent 13%),
    repeating-linear-gradient(45deg, #2a2333 0 6px, #241e2c 6px 12px);
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  transform: rotate(calc((var(--i) - 1) * 9deg)) translateY(calc(var(--i) * 2px));
  animation: dealcard calc(var(--fxdur, 1500ms) * .4) ease backwards;
  animation-delay: calc(var(--i) * 120ms);
}
.fx-draw .fan { padding-right: 44px; }
@keyframes dealcard {
  from { opacity: 0; transform: translateX(-30px) translateY(-16px) rotate(-14deg); }
}

/* ---------- cards ---------- */
/* size driven by viewport height so a fullscreen laptop gets bigger cards */
:root {
  --ch: clamp(96px, 13.2vh, 158px);          /* card height */
  --cw: calc(var(--ch) * 0.7156);            /* card width (63.5 x 88.75mm ratio) */
}
.card { position: relative; width: var(--cw); flex-shrink: 0; }
.card-img {
  position: relative; width: var(--cw); height: var(--ch);
  border-radius: 5px; transition: transform .15s;
}
.card-img img, .card-img .text-card {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 5px; display: block;
}
.card-img.kneeling { transform: rotate(90deg) scale(.92); }
.card.kneel-outer { margin: 0 calc((var(--ch) - var(--cw)) / 2); }
.card.actionable, .card.selectable { cursor: pointer; }
.card.actionable .card-img img { box-shadow: 0 0 0 2px #6db56d; }
.card.selectable .card-img img { box-shadow: 0 0 0 2px #c8b45e; }
.card.selectable:hover .card-img img { box-shadow: 0 0 0 3px #ffe38a; }
.card.actionable:hover .card-img img { box-shadow: 0 0 0 3px #8fdc8f; }
.card.unplayable { opacity: .45; }

/* cards with usable abilities: purple glow + "!" badge; click opens a menu */
.card.has-action { cursor: pointer; }
.card.has-action .card-img img, .card.has-action .card-img .text-card {
  box-shadow: 0 0 0 2px #9b7fd4, 0 0 14px rgba(155,127,212,.45);
}
.card.has-action:hover .card-img img, .card.has-action.menu-open .card-img img,
.card.has-action:hover .card-img .text-card, .card.has-action.menu-open .card-img .text-card {
  box-shadow: 0 0 0 3px #c3a8ff, 0 0 18px rgba(155,127,212,.7);
}
.act-badge {
  position: absolute; top: -7px; right: -6px; z-index: 3;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: #9b7fd4; color: #16121f; font-weight: 700; font-size: 12px;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.6);
  animation: checkpop .18s ease; pointer-events: none;
}
.lg-box .act-badge.lg { position: static; display: inline-block; animation: none; }
.meta-card.has-action { cursor: pointer; }
.meta-card.has-action img { box-shadow: 0 0 0 2px #9b7fd4, 0 0 14px rgba(155,127,212,.5); }
.meta-card.has-action:hover img, .meta-card.has-action.menu-open img {
  box-shadow: 0 0 0 3px #c3a8ff, 0 0 18px rgba(155,127,212,.75);
}

/* the per-card action menu */
#act-menu {
  position: fixed; z-index: 48; min-width: 210px; max-width: 300px;
  background: #221d30; border: 1px solid #6d5a85; border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 14px 50px rgba(0,0,0,.75);
  animation: pickpop .15s ease;
}
#act-menu .act-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #c3a8ff; padding: 3px 8px 4px; border-bottom: 1px solid #3a3050;
}
.act-item {
  background: #4a3d5c; color: #ece8f5; border: 1px solid #6d5a85;
  border-radius: 6px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
  text-align: left; line-height: 1.35;
}
.act-item:hover { background: #5c4c73; border-color: #9b7fd4; }
.act-item.act-cancel {
  background: none; border-color: transparent; color: #9a958a;
  text-align: center; padding: 4px; font-size: 11.5px;
}
.act-item.act-cancel:hover { color: #d8d5cc; }

.act-hint { color: #c3a8ff; font-size: 12.5px; }
.card-img.attacking img { box-shadow: 0 0 0 3px #d9534f; }
.card-img.defending img { box-shadow: 0 0 0 3px #5b9bd5; }
.card.bypassed { opacity: .5; filter: grayscale(.8); }

/* selected: raised, glowing, with a check mark (row top padding leaves room) */
.card.selected .card-img { transform: translateY(-8px) scale(1.03); }
.card.selected .card-img img {
  box-shadow: 0 0 0 3px #ffd54a, 0 0 18px rgba(255,213,74,.7);
}
.card.selected .card-img.kneeling { transform: rotate(90deg) scale(.95) translateX(-8px); }
.card.selected::after {
  content: '✓'; position: absolute; top: -10px; right: -6px; z-index: 3;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: #ffd54a; color: #14161c; font-weight: 700; font-size: 13px;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.6);
  animation: checkpop .18s ease;
}
@keyframes checkpop { from { transform: scale(.4); opacity: 0; } }

/* kneel / stand / enter-play transitions */
@keyframes standup { from { transform: rotate(90deg) scale(.92); } }
.card-img.just-stood { animation: standup .7s ease backwards; }
@keyframes kneeldown { from { transform: none; } }
.card-img.just-knelt { animation: kneeldown .45s ease; }
@keyframes enterplay { from { opacity: 0; transform: translateY(14px) scale(.8); } }
.card.enter-play { animation: enterplay .5s ease backwards; }

.badge {
  position: absolute; font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.78); color: #fff; border-radius: 4px; padding: 1px 4px;
}
.badge.str { bottom: 2px; left: 2px; }
.badge.icons {
  bottom: 2px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px; align-items: center; padding: 2px 4px;
}
.badge.icons .tdb { font-size: 9px; vertical-align: 0; }
.ic-military { color: #e0675c; }
.ic-intrigue { color: #4dbd7f; }
.ic-power    { color: #5f9fd8; }
.badge.str.modified { color: #7ee07e; }
.badge.pow { top: 2px; right: 2px; color: #ffd54a; }
.badge.dup { top: 2px; left: 2px; color: #9fd0ff; }
.badge.poison { bottom: 2px; right: 2px; color: #9be07e; }
.badge.betrayal { bottom: 16px; right: 2px; color: #e0a33c; }

/* attachment strips tucked under the card */
.attach-strip {
  width: calc(var(--cw) - 4px); margin: 0 auto; margin-top: -3px; padding: 3px 5px 2px;
  font-size: 8.5px; line-height: 1.15; color: #cfd6e4;
  background: linear-gradient(#2a2f3c, #222633);
  border: 1px solid #3c4354; border-top: none;
  border-left: 3px solid #8f8a7d;
  border-radius: 0 0 5px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  cursor: default;
}
.attach-strip:hover { background: #333a4a; color: #fff; }

/* text fallback card */
.text-card {
  border: 1px solid #555; border-radius: 5px;
  background: #232733; padding: 4px; font-size: 9px; overflow: hidden;
}
.text-card.big { width: 100%; height: auto; min-height: 200px; font-size: 13px; padding: 10px; }
.tc-name { font-weight: 700; color: #e8e2d0; }
.tc-line { color: #b8b39f; }
.tc-traits { font-style: italic; color: #8f8a7d; }
.tc-text { margin-top: 6px; color: #cfccc0; }

/* ---------- pick modal (plot choice / deck searches) ---------- */
/* floats over the board column only — the side column stays visible so
   hovering cards still previews them on the right */
#pick-modal {
  position: fixed; top: 0; bottom: 0; left: 0; right: 341px;
  display: flex; align-items: center; justify-content: center;
  z-index: 45; pointer-events: none;
}
#pick-modal.hidden { display: none; }
#pick-modal:not(.min)::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(8, 9, 12, .55);
}
.pick-box {
  position: relative; pointer-events: auto;
  background: #1c2029; border: 1px solid #4a5266; border-radius: 12px;
  padding: 14px 18px 16px; max-width: min(860px, 92%); max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 18px 70px rgba(0,0,0,.75);
  animation: pickpop .18s ease;
}
@keyframes pickpop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.pick-head { display: flex; align-items: baseline; gap: 12px; }
.pick-title { flex: 1; font-size: 16px; font-weight: 700; color: #e8e2d0; }
.pick-min {
  flex-shrink: 0; background: #2c3140; color: #d9c88a; border: 1px solid #566181;
  border-radius: 6px; width: 28px; height: 24px; font-size: 11px; cursor: pointer;
}
.pick-min:hover { background: #3a4356; }
.pick-sub { font-size: 12px; color: #9a958a; padding: 3px 0 8px; }
.pick-row { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 6px; flex-wrap: wrap; justify-content: center; }
.pick-card {
  flex-shrink: 0; cursor: pointer; border-radius: 6px;
  transition: transform .1s;
}
.pick-card img, .pick-card .text-card { display: block; border-radius: 6px; }
.pick-card img { height: 150px; }
.pick-card.plotcard img { height: 148px; }
.pick-card:hover { transform: translateY(-3px); }
.pick-card:hover img { box-shadow: 0 0 0 3px #ffe38a; }
.pick-card.selected img { box-shadow: 0 0 0 3px #ffd54a; }
.pick-buttons { display: flex; gap: 8px; padding-top: 8px; justify-content: center; }

/* per-plot stat strip in the plot picker */
.plot-stats {
  display: flex; justify-content: center; gap: 9px;
  font-size: 11.5px; color: #d9c88a; padding-top: 4px;
}
.plot-stats .sic { margin-right: 2px; }
.plot-stats .sic svg { width: 11px; height: 11px; }

/* ---------- pile viewer (read-only: discard / dead / revealed plots) ---------- */
#pile-modal {
  position: fixed; top: 0; bottom: 0; left: 0; right: 341px;
  display: flex; align-items: center; justify-content: center;
  z-index: 55; background: rgba(8, 9, 12, .55);
}
#pile-modal.hidden { display: none; }
.pick-card.view { cursor: default; }
.pick-card.view:hover { transform: none; }
.pick-card.view:hover img { box-shadow: 0 0 0 2px #566181; }

/* minimised: a docked pill at the bottom of the board to reopen */
#pick-modal.min { align-items: flex-end; padding-bottom: 148px; }
.pick-pill {
  pointer-events: auto; cursor: pointer;
  background: #2c3140; color: #f0c75e; border: 1px solid #8a7433;
  border-radius: 18px; padding: 7px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-pill:hover { background: #3a4356; color: #ffe38a; }

/* ---------- side column ---------- */
#preview { min-height: 380px; display: flex; align-items: flex-start; justify-content: center; }
#preview:empty::after {
  content: 'Hover any card to preview it here';
  align-self: center; color: #4a4e58; font-size: 12px; letter-spacing: .5px;
  border: 1px dashed #2a2f3c; border-radius: 12px; padding: 80px 34px; margin-top: 12px;
}
#preview img { max-width: 100%; max-height: 450px; border-radius: 12px; }
#log {
  flex: 1; overflow-y: auto; font-size: 11.5px; line-height: 1.45;
  background: #12151b; border: 1px solid #262a33; border-radius: 6px; padding: 6px;
}
.log-line {
  display: flex; gap: 5px; align-items: baseline;
  padding: 2px 0; color: #b6b2a6;
  border-bottom: 1px solid #1a1e27;
}
.log-icon { flex-shrink: 0; width: 16px; font-size: 10px; text-align: center; }
.log-msg { flex: 1; }
.log-card {
  color: #d9c88a; cursor: help; text-decoration: underline dotted #6d6349;
  text-underline-offset: 2px;
}
.log-card:hover { color: #ffe38a; }
.log-me { color: #7ec97e; font-weight: 600; }
.log-opp { color: #d98a8a; font-weight: 600; }
.log-round {
  margin: 8px 0 2px; padding: 3px 6px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #14161c;
  background: linear-gradient(90deg, #8a7433, #f0c75e, #8a7433);
  border-radius: 4px;
}
.log-phase-div {
  margin: 5px 0 1px; font-size: 9px; letter-spacing: 2.5px; color: #6d6a60;
  border-bottom: 1px solid #262a33; padding-bottom: 1px;
}
#new-game {
  background: #2c3140; color: #d8d5cc; border: 1px solid #454c5e;
  border-radius: 6px; padding: 8px; cursor: pointer;
}
#new-game:hover { background: #383f52; }

/* ---------- legend ---------- */
#legend {
  position: fixed; inset: 0; background: rgba(8,9,12,.7);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
#legend.hidden { display: none; }
.lg-box {
  background: #1c2029; border: 1px solid #3a4152; border-radius: 12px;
  padding: 18px 24px 22px; max-width: 620px; max-height: 88vh; overflow-y: auto;
  font-size: 13px; line-height: 1.5; box-shadow: 0 16px 60px rgba(0,0,0,.7);
}
.lg-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 700; color: #e8e2d0; margin-bottom: 6px;
}
#legend-close {
  background: none; border: none; color: #9a958a; font-size: 16px; cursor: pointer;
}
#legend-close:hover { color: #fff; }
.lg-sec {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #d9c88a;
  border-bottom: 1px solid #2e3442; margin: 14px 0 6px; padding-bottom: 3px;
}
.lg-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; color: #b6b2a6; }
.lg-row b { color: #e8e2d0; }
.lg-green { color: #7ee07e; }
.lg-box .badge.lg { position: static; flex-shrink: 0; min-width: 26px; text-align: center; transform: none; }
.lg-key {
  flex-shrink: 0; min-width: 48px; text-align: center;
  background: #2c3140; border: 1px solid #566181; border-radius: 5px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; color: #d9c88a;
}
.lg-swatch {
  display: inline-block; width: 22px; height: 30px; border-radius: 3px;
  background: #2a2f3c; margin: 2px 4px; flex-shrink: 0;
}

/* ---------- modal (game over) ---------- */
#modal {
  position: fixed; inset: 0; background: rgba(8,9,12,.82);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
#modal.hidden { display: none; }
.modal-box {
  background: #1c2029; border: 1px solid #3a4152; border-radius: 12px;
  padding: 26px; text-align: center; max-width: 90vw; max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { color: #e8e2d0; margin-bottom: 12px; }
.modal-box button {
  margin-top: 16px; background: #3a4356; color: #e8e2d0;
  border: 1px solid #566181; border-radius: 6px; padding: 10px 26px; font-size: 15px; cursor: pointer;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #333947; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }