/* Spellpod, grayscale */
:root {
  --felt: #16181b;
  --felt-2: #202327;
  --felt-3: #2a2e33;
  --line: #3a3f45;
  --ink: #e9eaec;
  --ink-dim: #9aa0a6;
  --brass: #d0d3d7;       /* light-silver accent (was gold) */
  --brass-soft: #71767d;  /* mid gray */
  --danger: #c75b4a;
  /* fixed-tile cards (board/hand/draft) at the recommended-card render width (~221px); art is max-res png */
  --card-w: 221px;
  --hand-w: 221px;
  /* column-fit base for the deck list + recommended-card grid (they stretch to fill, so they must share
     the same base to render the same size); keep in step with .bld-recs-grid */
  --col-w: 182px;
  --card-r: 6px;
  --foot-h: 1.9rem;       /* height reserved for the pinned Fan Content disclaimer footer */
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* dark, subtle scrollbars site-wide, no jarring white default bar over the dark theme */
* { scrollbar-width: thin; scrollbar-color: var(--brass-soft) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brass-soft); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--brass); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
html, body { height: 100%; }
body {
  height: 100dvh;
  background: radial-gradient(1200px 700px at 50% -10%, #20242a 0%, var(--felt) 60%);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; touch-action: manipulation; }
.brand { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .04em; }
.brand span { color: var(--brass); }
.hero-logo { margin: 0 auto .4rem; }
.hero-logo img { width: min(560px, 82vw); height: auto; display: block; margin: 0 auto; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
/* the one clickable Spellpod logo, top-left of every page → home */
.brand-logo { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .03em; white-space: nowrap;
  background: none; border: none; padding: 0; margin: 0; color: var(--ink); cursor: pointer; line-height: 1; flex: 0 0 auto; }
.brand-logo span { color: var(--brass); }
.brand-logo .brand-img { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .brand-logo .brand-img { height: 22px; } }
.brand-logo:hover { filter: brightness(1.18); }
.brand-logo:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 5px; }
/* a slim pill offering to return to a game you minimized to the lobby */
.return-table { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 330;
  display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem; border-radius: 999px;
  background: var(--felt-2); border: 1px solid var(--brass); box-shadow: 0 14px 40px rgba(0,0,0,.6); font-size: .85rem; }

.btn {
  border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .8rem; background: var(--felt-2);
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--brass-soft); background: var(--felt-3); }
.btn.brass { background: linear-gradient(180deg, #e3e5e8, #b9bdc2); color: #15171a; font-weight: 600; border: none; }
.btn.brass:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.big { padding: .7rem 1.4rem; font-size: 1.05rem; }
.btn:focus-visible, .pile:focus-visible, .turn-ring:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ============ lobby ============ */
#lobby { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; overflow: auto; padding: 0 1rem 2rem;
  background-color: #08080e; }
.lobby-nav { position: sticky; top: 0; z-index: 50; align-self: stretch; margin: 0 -1rem 1.4rem; padding: .5rem 1rem;
  background: rgba(8,8,14,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ln-inner { width: min(1000px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ln-brand { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; white-space: nowrap; }
.ln-brand span { color: var(--brass); }
.ln-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 560px) { .ln-brand { display: none; } .ln-inner { justify-content: center; } .ln-actions { justify-content: center; } }
/* account widget: fixed top-right on every page, Log in when out, avatar + name dropdown when in */
#account-widget { position: fixed; top: 10px; right: 14px; z-index: 70; display: flex; align-items: center; gap: .45rem; } /* above the fixed builder/builder-lobby views (z-60); flex so the notification bell sits left of the account button */
.notif-w { position: relative; }
.notif-bell { position: relative; width: 38px; height: 38px; border-radius: 999px; background: var(--felt-2); border: 1px solid var(--brass-soft); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; }
.notif-bell:hover { border-color: var(--brass); }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #c75b4a; color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 300px; max-height: 70vh; overflow-y: auto; background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 12px; padding: .4rem; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.notif-item { position: relative; padding: .5rem 1.7rem .5rem .55rem; border-radius: 8px; border: 1px solid var(--line); margin-bottom: .35rem; }
.notif-item:last-child { margin-bottom: 0; }
.notif-x { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--felt-3); color: var(--ink-dim); font-size: .6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.notif-x:hover { color: var(--ink); border-color: var(--brass-soft); }
.ni-txt { font-size: .82rem; color: var(--ink); line-height: 1.4; margin-bottom: .45rem; }
.ni-txt code { background: var(--felt-3); padding: .02rem .3rem; border-radius: 4px; }
.ni-acts { display: flex; gap: .35rem; }
.notif-empty { padding: .9rem; text-align: center; color: var(--ink-dim); font-size: .82rem; }
.notif-gear { width: 100%; margin-top: .35rem; padding: .4rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-dim); font-size: .76rem; cursor: pointer; }
.notif-gear:hover { color: var(--ink); border-color: var(--brass-soft); }
.set-notif { display: grid; gap: .35rem; margin: .2rem 0 .5rem; }
.set-notif-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink); cursor: pointer; }
.notif-settings-body { padding: .6rem 1rem 1rem; min-width: 240px; }
/* wide screens: content caps at 1500px and centers, so pin the widget to the content's right edge instead of the far viewport corner */
@media (min-width: 1500px) { #account-widget { right: calc((100vw - 1500px) / 2 + 14px); } }
#account-widget > .btn { padding: .4rem .95rem; }
.acct-w-in { position: relative; }
.acct-w-toggle { display: flex; align-items: center; gap: .45rem; background: var(--felt-2); border: 1px solid var(--brass-soft);
  border-radius: 999px; padding: .22rem .6rem .22rem .25rem; cursor: pointer; color: var(--ink); max-width: 220px; }
.acct-w-toggle:hover { border-color: var(--brass); }
.acct-w-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--brass) center/cover no-repeat;
  display: grid; place-items: center; color: #15171a; font-weight: 700; font-family: "Cinzel", serif; font-size: .92rem; overflow: hidden; }
.acct-w-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 6rem; } /* cap long usernames so the widget can't grow over the deck-builder toolbar buttons */
.acct-w-patron { font-size: .85rem; margin: 0 .1rem; flex: none; }   /* 💜 badge for active patrons */
.badge.pl-patron { background: transparent; border: none; padding: 0; filter: drop-shadow(0 0 4px rgba(192,96,208,.9)); } /* glowing 💜 by a patron at the table */
.badge.pl-patron.founder { filter: drop-shadow(0 0 4px rgba(230,190,80,.95)); } /* founders get a gold 🥇 glow */
.acct-w-caret { color: var(--ink-dim); font-size: .7rem; }
.acct-w-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 172px; background: var(--felt-2);
  border: 1px solid var(--brass-soft); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.6); padding: .3rem; display: flex; flex-direction: column; gap: .12rem; }
.acct-w-item { text-align: left; background: none; border: none; color: var(--ink); padding: .5rem .6rem; border-radius: 7px; cursor: pointer; font: inherit; font-size: .86rem; }
.acct-w-item:hover { background: var(--felt-3); color: var(--brass); }
/* feedback / bug-report modal */
.fb-seg { margin: .55rem 0; }
.fb-text { width: 100%; min-height: 94px; resize: vertical; margin: .2rem 0 .5rem; }
.fb-send { width: 100%; }
/* supporters wall (account menu → 💜 Supporters) */
.supporters-list { display: flex; flex-direction: column; gap: .3rem; max-height: 50vh; overflow-y: auto; margin: .5rem 0; }
.supporter-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 8px; }
.supporter-heart { flex: none; }
.supporter-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supporters-cta { text-align: center; margin-top: .4rem; }
/* reserve room for the account widget only once the centered nav grows toward the right edge, a wide screen keeps the nav on one row */
@media (max-width: 1300px) { #lobby .ln-inner { padding-right: 160px; } }
@media (max-width: 560px) { .acct-w-name { display: none; } #lobby .ln-inner { padding-right: 52px; } }
/* help page */
#help-top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.help-body { max-width: 760px; margin: 1rem auto; padding: 0 1rem; display: grid; gap: .8rem; }
.help-card { background: var(--felt-2); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; }
.help-card h3 { font-family: "Cinzel", serif; color: var(--brass); margin-bottom: .35rem; }
.help-card p { color: var(--ink-dim); line-height: 1.55; }
/* settings: profile-picture row (reuses the round .acct-w-avatar, bigger) */
.set-avatar-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.set-avatar-prev { width: 56px; height: 56px; font-size: 1.5rem; }
.set-avatar-row .field-input { flex: 1; }
/* Tabletop nav dropdown (Start a table / Playtest), opens on hover or focus */
.nav-dd { position: relative; }
.nav-dd-menu { position: absolute; left: 0; top: 100%; margin-top: .3rem; z-index: 50; display: none;
  flex-direction: column; gap: .25rem; padding: .35rem; min-width: 180px;
  background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.nav-dd.open .nav-dd-menu { display: flex; } /* click the Tabletop button to open; click away to close */
.nav-dd-menu .btn { justify-content: flex-start; text-align: left; }
/* dedicated view pages (Start a table / Playtest) */
.view-topbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--felt-1); z-index: 20; }
.view-title { font-family: "Cinzel", serif; font-size: 1.15rem; margin: 0; }
.tt-wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 1.2rem; max-width: 1100px; margin: 0 auto; }
.tt-options { flex: 1 1 280px; } .tt-decks { flex: 1 1 240px; } .tt-entry { flex: 2 1 360px; }
.tt-h { font-family: "Cinzel", serif; font-size: 1rem; margin: 0 0 .6rem; color: var(--brass); }
.tt-toggle { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.tt-check { justify-content: center; }
#tt-decklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; max-height: 46vh; overflow-y: auto; }
/* sandbox deck picker reuses the builder-lobby grid (.bl-decks): bigger tiles, no inner scroll bar, the page scrolls instead */
#pt-decks { width: 100%; } /* the .pt-wrap flex column is align flex-start, so stretch the grid to fill it (else it collapses to one column) */
/* sandbox deck picker: left-click marks your deck (blue), right-click the opponent's (orange); one deck can be both */
.bl-tile.pt-you { border-color: #5aa9ff; box-shadow: 0 0 0 2px #5aa9ff; }
.bl-tile.pt-opp { border-color: #e0894a; box-shadow: 0 0 0 2px #e0894a; }
.bl-tile.pt-you.pt-opp { box-shadow: 0 0 0 2px #5aa9ff, 0 0 0 4px #e0894a; }
.pt-badge { position: absolute; top: 5px; right: 5px; z-index: 3; background: rgba(8,10,14,.92); color: #fff; font-size: .64rem; font-weight: 700; padding: .12rem .42rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tt-deck-pick { text-align: left; padding: .5rem .7rem; border-radius: 8px; background: var(--felt-3); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; font-size: .88rem; }
.tt-deck-pick:hover { border-color: var(--brass-soft); }
.tt-deck-pick.on { background: color-mix(in srgb, var(--brass) 18%, var(--felt-2)); border-color: var(--brass); }
.pt-wrap { flex-direction: column; } .pt-pick { display: flex; gap: 1rem; flex-wrap: wrap; width: 100%; }
.pt-pick > .lobby-card { flex: 1 1 320px; } .pt-pick textarea { width: 100%; margin-top: .5rem; }
.pt-actions { width: 100%; text-align: center; margin-top: .4rem; }
/* sandbox: colour-coded sides + VS divider + assign tools */
.pt-side { position: relative; border-top: 3px solid var(--line); }
.pt-side-you { border-top-color: #5aa9ff; } .pt-side-opp { border-top-color: #e0894a; }
.pt-side-you .tt-h { color: #9ccbff; } .pt-side-opp .tt-h { color: #f0ab73; }
.pt-vs { flex: 0 0 auto; align-self: center; font-family: "Cinzel", serif; font-weight: 700; font-size: 1.15rem; color: var(--ink-dim); letter-spacing: .06em; }
.pt-tools { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; width: 100%; margin: .6rem 0 .1rem; }
/* per-tile assign buttons: revealed on hover, always shown on touch or once a side is set */
.pt-tile-btns { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
.bl-tile:hover .pt-tile-btns, .bl-tile.pt-you .pt-tile-btns, .bl-tile.pt-opp .pt-tile-btns { opacity: 1; }
@media (hover: none) { .pt-tile-btns { opacity: 1; } }
.pt-tbtn { flex: 1; border: 1px solid rgba(255,255,255,.4); background: rgba(8,10,14,.86); color: #fff; font-size: .7rem; font-weight: 700; padding: .22rem 0; border-radius: 6px; cursor: pointer; }
.pt-tbtn:hover { border-color: #fff; }
.pt-tbtn-you.on { background: #5aa9ff; border-color: #5aa9ff; color: #08101a; }
.pt-tbtn-opp.on { background: #e0894a; border-color: #e0894a; color: #1a0f08; }
.pt-mode { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; width: 100%; margin-bottom: .3rem; }
.pt-mode .field { flex: 0 0 auto; }
.pt-life-field input { max-width: 100px; }
.pt-decks-h { width: 100%; margin-top: 1.1rem; }
/* home statistics panel */
.stat-sec { margin-bottom: 1rem; } .stat-sec:last-child { margin-bottom: 0; }
.stat-h { font-family: "Cinzel", serif; font-size: .9rem; margin: 0 0 .45rem; color: var(--brass); }
.stat-row { display: flex; justify-content: space-between; gap: .6rem; padding: .32rem .1rem; border-bottom: 1px solid var(--line); font-size: .84rem; }
.stat-row:last-child { border-bottom: none; }
.stat-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row-meta { color: var(--ink-dim); white-space: nowrap; }
.stat-left { display: flex; align-items: center; gap: .4rem; overflow: hidden; }
.stat-res { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 5px; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stat-res.win { background: #1f3a2a; color: #8fe0ab; border: 1px solid #2f5d40; }
.stat-res.loss { background: #3a2424; color: #e0a0a0; border: 1px solid #5d3636; }
.lobby-wrap { display: flex; gap: 1rem; width: min(1000px, 100%); align-items: flex-start; flex-wrap: wrap; }
.lobby-left { flex: 1 1 300px; }
.lobby-right { flex: 1.4 1 340px; }
.lobby-card {
  background: rgba(20, 22, 42, 0.78);
  border: 1px solid #2a2c44; border-radius: 14px; padding: 1.6rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lobby-card h1 { font-size: 1.7rem; }
.lobby-card h2 { font-family: "Cinzel", serif; font-size: 1rem; }
.qp-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.35rem; margin: 0 0 .15rem; }
.qp-sub { margin: 0 0 1rem; }
.tagline { color: var(--ink-dim); margin: .25rem 0 1.2rem; }
.hint { color: var(--ink-dim); font-size: .76rem; margin-top: .5rem; }
.acct-row { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; align-items: center; }
.field-input { width: 100%; background: var(--felt); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; font: inherit; }
.field-input:focus { outline: none; border-color: var(--brass-soft); }
#acct { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
#acct-in { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

/* ---- forced account gate ---- */
.auth-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
  /* let the dragon-scale homepage show through behind the card, dim the edges, keep the centre readable */
  background: radial-gradient(130% 120% at 50% 42%, rgba(8,9,14,.4) 0%, rgba(6,7,11,.72) 70%, rgba(4,4,8,.85) 100%);
  backdrop-filter: blur(2.5px); overflow-y: auto; }
body.gated { overflow: hidden; }
.ag-card { position: relative; width: min(440px, 100%); margin: auto; background: var(--felt-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.8rem 1.7rem; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.ag-brand { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.95rem; text-align: center; letter-spacing: .02em; }
.ag-brand span { color: var(--brass); }
.ag-tag { text-align: center; color: var(--ink-dim); font-size: .9rem; line-height: 1.5; margin: .4rem auto 1.2rem; max-width: 34ch; }
.ag-tabs { display: flex; gap: .3rem; background: var(--felt); border: 1px solid var(--line); border-radius: 12px; padding: .25rem; margin-bottom: 1.1rem; }
.ag-tab { flex: 1; background: transparent; border: none; color: var(--ink-dim); padding: .5rem; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ag-tab.on { background: var(--brass); color: #15171a; }
.ag-form { display: flex; flex-direction: column; gap: .7rem; }
.ag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ag-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ag-field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.ag-field input, .ag-field select { width: 100%; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .55rem .65rem; font: inherit; font-size: .92rem; color-scheme: dark; }
.ag-field input:focus, .ag-field select:focus { outline: none; border-color: var(--brass-soft); }
.ag-form .btn.big { margin-top: .4rem; width: 100%; justify-content: center; }
#ag-status { text-align: center; }
.ag-fine { font-size: .68rem; color: var(--ink-dim); line-height: 1.45; margin-top: .9rem; text-align: center; }
@media (max-width: 460px) { .ag-grid { grid-template-columns: 1fr; } .ag-card { padding: 1.4rem 1.2rem; } }

/* a text button that looks like an inline link */
.link-btn { background: none; border: none; color: var(--brass); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.link-btn:hover { color: var(--ink); }
.foot-links { margin-top: .5rem; }

/* ---- privacy notice modal ---- */
.privacy-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6,7,10,.82); backdrop-filter: blur(9px); overflow-y: auto; }
.pm-card { position: relative; width: min(640px, 100%); margin: auto; background: var(--felt-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.8rem 1.9rem; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.pm-close { position: absolute; top: .8rem; right: .9rem; width: 32px; height: 32px; border-radius: 8px; background: var(--felt-3); border: 1px solid var(--line); color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
.pm-close:hover { border-color: var(--brass-soft); }
.pm-title { font-family: "Cinzel", serif; font-size: 1.4rem; margin-bottom: .3rem; padding-right: 2rem; }
.pm-upd { color: var(--ink-dim); font-size: .82rem; line-height: 1.5; margin-bottom: 1rem; }
.pm-body { max-height: 62vh; overflow-y: auto; padding-right: .5rem; }
.pm-body h3 { font-family: "Cinzel", serif; font-size: .95rem; color: var(--brass); margin: 1.1rem 0 .35rem; }
.pm-body h3:first-child { margin-top: 0; }
.pm-body p, .pm-body li { color: var(--ink-dim); font-size: .85rem; line-height: 1.55; }
.pm-body ul { margin: 0 0 .2rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.pm-body b { color: var(--ink); }
.pm-body a { color: var(--brass); }
.pm-body code { background: rgba(0,0,0,.35); padding: 0 .25rem; border-radius: 4px; color: var(--brass); }
@media (max-width: 460px) { .pm-card { padding: 1.5rem 1.3rem; } }

/* ---- confirm dialog + danger zones ---- */
.draft-modal-box.confirm-box { width: min(440px, 94vw); }
.confirm-body { color: var(--ink-dim); line-height: 1.55; font-size: .9rem; margin-bottom: 1.1rem; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.set-h.set-danger-h { color: var(--danger); }
.set-danger { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; border: 1px solid rgba(199,91,74,.4); border-radius: 10px; padding: .85rem; margin-top: .3rem; }
.league-danger { border: 1px solid rgba(199,91,74,.4); border-radius: 10px; padding: .9rem 1rem; }
.lg-seed-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.lg-seed-name { flex: 1; min-width: 120px; }
.lg-seed-list { width: 100%; margin-top: .5rem; color-scheme: dark; }
.lg-seed-num { width: 5rem; color-scheme: dark; }
.league-danger .league-h { color: var(--danger); }
.admin-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); margin: .9rem 0 .25rem; }
.confirm-box .modal-input { color-scheme: dark; }
.confirm-box .confirm-actions { margin-top: 1rem; flex-wrap: wrap; }
/* themed confirm / alert / prompt: above every other popup (panels z90, previews z110, rejoin z320, tour z360) */
.draft-modal.ui-dialog { z-index: 400; }
.ui-dialog .draft-modal-box.confirm-box { width: min(420px, 94vw); }
.ui-dialog-msg { margin: 0 .15rem .7rem; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.import-ta { width: 100%; resize: vertical; min-height: 120px; margin-top: .2rem; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.import-file, .import-append { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .82rem; color: var(--ink-dim); flex-wrap: wrap; }
.import-append { cursor: pointer; }
.import-file input[type=file] { font-size: .78rem; color: var(--ink-dim); }
/* deck format: header selector, new-deck chooser, and the stats summary */
.bld-format { background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .4rem .5rem; font-size: .82rem; color-scheme: dark; }
.bld-format:disabled { opacity: .6; }
/* the "🏆 League name" button next to the format, back to this deck's league page */
#bld-league-link { color: var(--brass); border-color: var(--brass-soft); white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
#bld-league-link:hover { background: var(--brass); color: #15171a; }
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.fmt-card { display: flex; flex-direction: column; gap: .15rem; text-align: left; background: var(--felt); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; }
.fmt-card:hover { border-color: var(--brass); background: var(--felt-3); }
.fmt-name { font-family: "Cinzel", serif; font-size: .95rem; color: var(--ink); }
.fmt-desc { font-size: .68rem; color: var(--ink-dim); line-height: 1.3; }
.bld-fmtline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bld-fmt-name { font-family: "Cinzel", serif; color: var(--ink); font-size: .95rem; }
.bld-legal { font-size: .7rem; font-weight: 600; border-radius: 10px; padding: .12rem .5rem; white-space: nowrap; }
.bld-legal.ok { color: #9fce9f; border: 1px solid #3a5a3a; background: #1d2a1d; }
.bld-legal.bad { color: #f0b3aa; border: 1px solid #5d3a36; background: #2a1a18; }
.bld-fmt-size { font-size: .72rem; color: var(--ink-dim); margin-top: .4rem; }
.bld-fmt-size.bad { color: var(--brass); }
/* trade-in (recycle) picker */
.trade-list { max-height: 48vh; overflow-y: auto; margin: .3rem 0 .2rem; border: 1px solid var(--line); border-radius: 8px; }
.trade-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
.trade-row:last-child { border-bottom: none; }
/* interactive trade-in: a draggable panel synced with the live deck grid */
.trade-panel { position: fixed; top: 70px; right: 16px; z-index: 90; width: min(330px, 92vw);
  background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,.72); display: flex; flex-direction: column; max-height: 86vh; }
.trade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--line); cursor: move; user-select: none; }
.trade-panel-title { font-family: "Cinzel", serif; font-weight: 700; font-size: .95rem; }
.trade-panel-hint { font-size: .74rem; color: var(--ink-dim); line-height: 1.4; margin: .5rem .7rem 0; }
.trade-panel .trade-list { margin: .5rem .55rem; }
.trade-name { flex: 1; min-width: 0; cursor: help; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-name:hover { color: var(--brass); text-decoration: underline; }
.trade-have { color: var(--ink-dim); font-size: .72rem; }
.trade-qty { min-width: 1.4rem; text-align: center; font-weight: 700; }
.trade-status { margin: 0 .7rem; font-size: .8rem; }
.trade-status.ok { color: #5fcf82; font-weight: 700; }
.trade-panel-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: .55rem .7rem .7rem; }
/* a deck tile while picking: green outline + "N to trade" badge when selected */
.bld-deckcard.trade-eligible { cursor: copy; }
.bld-deckcard.trade-pick .bld-card { outline: 3px solid #4fcf72; box-shadow: 0 0 14px rgba(79,207,114,.7); border-radius: 8px; }
.trade-badge { position: absolute; bottom: 4px; left: 4px; z-index: 4; background: #2f7d49; color: #eafff0;
  font-size: .62rem; font-weight: 700; border-radius: 7px; padding: .05rem .35rem; border: 1px solid #4fcf72; }
/* big readable card preview pinned bottom-left (mirror of the top-left in-game #preview) */
#trade-preview { position: fixed; left: 14px; bottom: 14px; width: 340px; max-width: 32vw; z-index: 110; pointer-events: none; }   /* above modals (e.g. the reward-pack popup, z-index 80) */
/* drafts: pin the enlarged card top-right and cap its height to the pack area so it never runs into the deck-pool columns below */
#trade-preview:not(.tp-compact) { bottom: auto; top: 8vh; width: auto; left: auto; right: 14px; }
#trade-preview:not(.tp-compact) img { width: auto; height: 38vh; aspect-ratio: 488 / 680; }   /* definite size up front so the preview shows immediately instead of collapsing while the large image loads */
#trade-preview.tp-compact { width: 270px; max-width: 26vw; }   /* league builder: narrower so it clears the recommended-cards grid */
#trade-preview img { width: 100%; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.75); }
#trade-preview .noimg-big { width: 100%; aspect-ratio: 488/680; border-radius: 12px; background: var(--felt-3); border: 1px solid var(--line); display: grid; place-items: center; padding: 1rem; text-align: center; font-weight: 600; }
.trade-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.trade-have { color: var(--ink-dim); font-size: .72rem; white-space: nowrap; }
.trade-qty { min-width: 1.4rem; text-align: center; color: var(--brass); font-weight: 700; }
.btn.sm { padding: .1rem .5rem; font-size: .9rem; line-height: 1; }
.status.ok { color: #9fce9f; }
/* printing-upgrade panel (reuses .trade-panel for the draggable shell) */
.upgrade-panel { width: min(360px, 94vw); }
.upgrade-body { padding: 0 .55rem .25rem; overflow-y: auto; }
.upgrade-cardrow { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .4rem .55rem;
  background: var(--felt-3); border: 1px solid var(--line); border-radius: 8px; margin: .35rem 0; color: var(--ink); cursor: pointer; }
.upgrade-cardrow:hover { border-color: var(--brass-soft); }
.upgrade-go { color: var(--brass); font-size: .72rem; white-space: nowrap; }
.upgrade-cardname { font-weight: 700; margin: .5rem .2rem .2rem; }
.upgrade-prints { display: flex; flex-direction: column; gap: .4rem; max-height: 56vh; overflow-y: auto; padding-bottom: .3rem; }
.upgrade-print { display: flex; align-items: center; gap: .55rem; padding: .35rem; border: 1px solid var(--line); border-radius: 8px; background: var(--felt-2); }
.upgrade-print.locked { opacity: .5; }
.upgrade-thumb { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: var(--felt-3); }
.upgrade-meta { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.upgrade-set { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-price { font-size: .72rem; color: var(--brass); font-weight: 700; }
.upgrade-copy-ctr { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.upgrade-copy-ctr button { padding: .1rem .4rem; }
/* the ✨ marker on an upgraded card in the builder grid */
.bld-pimp-badge { position: absolute; top: 4px; left: 4px; z-index: 4; font-size: .7rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); pointer-events: none; }
@media (max-width: 460px) { .fmt-grid { grid-template-columns: 1fr; } }
.deck-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
#deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; max-height: 460px; overflow-y: auto; }
.deck-item {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  border: 1px solid var(--line); border-radius: 9px; padding: .5rem .7rem;
  background: var(--felt); transition: border-color .15s;
}
.deck-item:hover { border-color: var(--brass-soft); }
.deck-item.selected { border-color: var(--brass); }
.deck-item .dname { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-item .dcmdr { color: var(--ink-dim); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* recent-deck tiles with commander art + stats */
.deck-tile { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: .4rem; background: var(--felt); transition: border-color .15s; }
.deck-tile:hover { border-color: var(--brass-soft); }
.deck-tile.selected { border-color: var(--brass); }
.dt-art { flex: 0 0 auto; width: 62px; height: 44px; border-radius: 6px; background: var(--felt-3) center/cover no-repeat; border: 1px solid var(--line); }
.dt-body { min-width: 0; flex: 1; }
.dt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-cmdr { color: var(--ink-dim); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-league { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; flex-wrap: wrap; }
.dt-league-tag { font-size: .7rem; color: var(--brass); background: var(--felt-3); border: 1px solid var(--line); border-radius: 10px; padding: .05rem .45rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-league-stat { font-size: .68rem; color: var(--ink-dim); }
.dt-stats { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.dt-count { font-size: .72rem; color: var(--ink-dim); }
.dt-pips { display: flex; gap: 3px; }
.dt-pip { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
.deck-pager { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .55rem; }
.dp-arrow { padding: .2rem .55rem; line-height: 1; font-size: .8rem; }
.dp-arrow:disabled { opacity: .35; cursor: default; }
.dp-label { font-size: .75rem; color: var(--ink-dim); min-width: 8ch; text-align: center; }
.deck-sort { background: var(--felt); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: .25rem .4rem; font: inherit; font-size: .78rem; }
.deck-sort:focus { outline: none; border-color: var(--brass-soft); }
.reconnect-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: .6rem; max-width: 92vw;
  background: rgba(8,8,16,.96); border: 1px solid var(--brass-soft); border-radius: 10px; padding: .55rem .9rem;
  color: var(--ink); font-size: .88rem; box-shadow: 0 12px 44px rgba(0,0,0,.6); }
.reconnect-banner.failed { border-color: var(--danger); }
.reconnect-banner .btn { padding: .3rem .7rem; }
/* big, prominent "rejoin your table" popup shown on return */
.rejoin-prompt { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 320;
  width: min(460px, 92vw); text-align: center; background: var(--felt-2); border: 1px solid var(--brass-soft);
  border-radius: 16px; padding: 1.9rem 2rem; box-shadow: 0 28px 80px rgba(0,0,0,.75); }
.rj-title { font-family: "Cinzel", serif; font-size: clamp(1.3rem, 4vw, 1.6rem); margin-bottom: .5rem; }
.rj-sub { color: var(--ink-dim); font-size: .95rem; line-height: 1.55; margin-bottom: 1.3rem; }
.rj-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.rj-row .btn.big { font-size: 1rem; padding: .65rem 1.3rem; }
/* transient toast (quick confirmations, e.g. a take-control request was sent) */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 340;
  max-width: min(420px, 90vw); padding: .7rem 1.1rem; border-radius: 11px; font-size: .9rem;
  background: var(--felt-2); border: 1px solid var(--brass-soft); box-shadow: 0 14px 40px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* spectator mode: a watcher sees only the public boards, hide the personal seat, hand & piles */
body.spectating #mytable,
body.spectating #me-panel,
body.spectating #dock,
body.spectating #btn-turn,
body.spectating #phasebar,
body.spectating .topbar-tools [data-act] { display: none; } /* a watcher has no seat, turn, or game actions */
body.spectating #boards { padding-bottom: .6rem; }
/* the floating seat panel: watch controls (for spectators) + seat-request approvals (for the host) */
#seat-panel { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 330;
  display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
#seat-panel > * { pointer-events: auto; }
.seat-watch, .seat-requests { background: var(--felt-2); border: 1px solid var(--brass-soft);
  border-radius: 12px; padding: .55rem .8rem; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.seat-watch { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.seat-watch-label { font-family: "Cinzel", serif; font-weight: 700; }
.seat-watch-sub { color: var(--ink-dim); font-size: .85rem; }
.seat-req-title { font-family: "Cinzel", serif; font-size: .9rem; margin-bottom: .4rem; color: var(--brass); }
.seat-req-row { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.seat-req-name { flex: 1; min-width: 7rem; }
.seat-watchers { background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 999px;
  padding: .22rem .7rem; font-size: .8rem; color: var(--ink-dim); }
.btn.sm { padding: .28rem .6rem; font-size: .82rem; }
.seat-pick-list { display: flex; flex-direction: column; gap: .45rem; margin: .3rem 0 1rem; max-height: 46vh; overflow: auto; }
.rj-sub.err { color: var(--danger); }
/* #6: first-time quick tour, dim backdrop, a ring around the highlighted area, and a tip card */
.tut-backdrop { position: fixed; inset: 0; z-index: 360; background: rgba(0,0,0,.5); }
.tut-ring { position: fixed; border: 2px solid var(--brass); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.5), 0 0 18px var(--brass);
  pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.tut-tip { position: fixed; width: 320px; max-width: 92vw; background: var(--felt-2); border: 1px solid var(--brass-soft);
  border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 22px 60px rgba(0,0,0,.7); }
.tut-title { font-family: "Cinzel", serif; font-size: 1.05rem; margin-bottom: .4rem; color: var(--brass); }
.tut-body { font-size: .88rem; line-height: 1.5; color: var(--ink); margin-bottom: .9rem; }
.tut-row { display: flex; align-items: center; gap: .5rem; }
.tut-row .btn.brass { margin-left: auto; }
.tut-prog { font-size: .75rem; color: var(--ink-dim); }
/* #2: friends panel */
.friends-box { width: min(440px, 94vw); }
.friends-body { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; padding: .2rem; }
.friend-add { display: flex; gap: .5rem; }
.friend-add input { flex: 1; }
/* live friend-search results under the search box */
.friend-search-results { display: flex; flex-direction: column; gap: 4px; }
.friend-search-results:not(:empty) { margin: .5rem 0; max-height: 220px; overflow-y: auto; }
.friend-result { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; }
.fr-tag { font-size: .76rem; color: var(--ink-dim); }
.friends-h { margin: .6rem 0 .1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--brass); }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 9px; }
.friend-row.online { border-color: var(--brass-soft); }
.friend-id { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.friend-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: 0 0 auto; } /* default / offline = gray */
.friend-dot.online { background: #5e9c6e; box-shadow: 0 0 7px #5e9c6e; } /* green: online elsewhere on the site */
.friend-dot.playing { background: #c75b4a; box-shadow: 0 0 7px #c75b4a; } /* red: in a match or draft */
.friend-dot.idle { background: #d8b24a; box-shadow: 0 0 7px #d8b24a; } /* yellow: inactive */
.friend-dot.offline { background: #555; } /* gray: offline */
.friend-dot.on { background: #5e9c6e; box-shadow: 0 0 7px #5e9c6e; } /* legacy alias */
.friend-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-name.dim { color: var(--ink-dim); font-weight: 400; }
.friend-status { font-size: .76rem; color: var(--ink-dim); }
.friend-acts { display: flex; gap: .35rem; flex: 0 0 auto; }
.btn.sm { padding: .25rem .6rem; font-size: .8rem; }
/* required field flashed red when left blank */
.flash-bad { animation: flashBad .5s ease-in-out 2; }
@keyframes flashBad { 0%,100% { box-shadow: none; border-color: var(--line); } 50% { box-shadow: 0 0 0 2px var(--danger); border-color: var(--danger); } }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: .35rem; }
.field small { text-transform: none; font-weight: 400; letter-spacing: 0; opacity: .8; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--felt); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
  font: inherit; resize: vertical;
}
.field select { color-scheme: dark; cursor: pointer; resize: none; } /* dark-themed select + dropdown popup */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass-soft); }
.lobby-row { display: flex; gap: .8rem; align-items: flex-end; }
.lobby-row .grow { flex: 1; margin-bottom: 0; }
/* new-table privacy segmented control */
.seg-vis { display: flex; gap: .35rem; flex-wrap: wrap; }
.seg-vis .vis-opt { flex: 1 1 auto; padding: .5rem .6rem; border-radius: 9px; font-size: .82rem; cursor: pointer;
  background: var(--felt-2); color: var(--ink); border: 1px solid var(--line); transition: border-color .12s, background .12s; }
.seg-vis .vis-opt:hover { border-color: var(--brass-soft); }
.seg-vis .vis-opt.on { background: color-mix(in srgb, var(--brass) 18%, var(--felt-2)); border-color: var(--brass); color: var(--ink); }
.status { margin-top: 1rem; min-height: 1.2em; color: var(--brass); }

/* ---- landing: hero + footer ---- */
.hero { position: relative; overflow: hidden; width: auto; align-self: stretch; margin: 0 -1rem 1.4rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: clamp(380px, 52vh, 560px); padding: 2rem 1.2rem clamp(3.4rem, 9vh, 6rem); } /* full-bleed (cancels #lobby's 1rem padding); content sits a bit lower so the upper art reads */
/* on screens wider than the banner, cap + center it so the 1024px art isn't over-stretched/over-cropped (stays edge-to-edge below this) */
@media (min-width: 1500px) {
  .hero { align-self: center; width: 1500px; max-width: 1500px; margin: 0 auto 1.4rem; border-radius: 16px; }
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,16,.35) 0%, rgba(5,6,16,0) 24%, rgba(5,6,16,0) 58%, rgba(5,6,16,.74) 100%),
    radial-gradient(62% 62% at 50% 58%, rgba(5,6,16,.6) 0%, rgba(5,6,16,.2) 62%, rgba(5,6,16,0) 100%); }
.hero > h1, .hero > .hero-vp, .hero > .hero-cta, .hero > .hero-trust { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.3rem, 6.5vw, 3.5rem); margin: 0; line-height: 1; text-shadow: 0 2px 26px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7); }
.hero .hero-vp { text-shadow: 0 1px 16px rgba(0,0,0,.85); }
.hero .hero-trust { text-shadow: 0 1px 12px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.7); }
.hero .hero-trust { text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hb-orb { animation: hbPulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hb-spark { animation: hbDrift 5s ease-in-out infinite; }
.hb-mote { animation: hbDrift 4.4s ease-in-out infinite; }
.hb-bolt { stroke-dasharray: 6 7; animation: hbZap 1.1s linear infinite; }
.hb-flame { animation: hbFlame 1.9s ease-in-out infinite; }
.hb-shield { animation: hbShield 3.2s ease-in-out infinite; }
.hb-bolt2 { animation: hbFlash 6s ease-out infinite; }
@keyframes hbPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes hbDrift { 0%,100% { transform: translate(0,0); opacity: .8; } 50% { transform: translate(-9px,-13px); opacity: .4; } }
@keyframes hbZap { to { stroke-dashoffset: -26; } }
@keyframes hbFlame { 0%,100% { opacity: .6; } 50% { opacity: .95; } }
@keyframes hbShield { 0%,100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
@keyframes hbFlash { 0%,7%,100% { opacity: .16; } 2% { opacity: .95; } 4% { opacity: .35; } 5.5% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .hb-orb, .hb-spark, .hb-mote, .hb-bolt, .hb-flame, .hb-shield, .hb-bolt2 { animation: none; } }
.hero-vp { color: var(--ink-dim); font-size: clamp(.95rem, 1.6vw, 1.18rem); max-width: 60ch; margin: .9rem auto 1.4rem; line-height: 1.55; }
.hero-vp strong { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-trust { color: var(--brass-soft); font-size: .76rem; letter-spacing: .03em; margin-top: 1.1rem; }
.lobby-foot { width: min(1000px, 100%); margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.lobby-foot p { color: var(--ink-dim); font-size: .74rem; line-height: 1.65; text-align: center; margin: 0 auto; max-width: 70ch; }
.lobby-foot strong { color: var(--ink); }
.lobby-foot a { color: var(--brass); }

/* ---- landing: Legacy League showcase ---- */
.league-promo { width: min(1000px, 100%); display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.lp-hero {
  text-align: center; padding: 2.1rem 1.5rem 1.9rem;
  background: radial-gradient(720px 260px at 50% -50%, #2c3138 0%, var(--felt-2) 72%);
  border: 1px solid var(--line); border-radius: 16px;
}
.lp-badge {
  display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--brass-soft); border-radius: 20px; padding: .28rem .85rem; margin-bottom: 1rem;
}
.lp-title { font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(1.45rem, 3.2vw, 2.15rem); line-height: 1.18; margin: 0 auto .65rem; max-width: 19ch; }
.lp-sub { color: var(--ink-dim); max-width: 58ch; margin: 0 auto 1.4rem; line-height: 1.6; }
.lp-hero .btn.big { font-size: 1rem; padding: .65rem 1.3rem; }

.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; counter-reset: lp; }
.lp-step {
  position: relative; counter-increment: lp;
  background: var(--felt-2); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem 1rem 1rem;
  transition: border-color .15s, transform .15s;
}
.lp-step:hover { border-color: var(--brass-soft); transform: translateY(-3px); }
.lp-step::before {
  content: counter(lp); position: absolute; top: .7rem; right: .9rem;
  font-family: "Cinzel", serif; font-size: .95rem; color: var(--brass-soft);
}
.lp-ico { font-size: 2rem; line-height: 1; display: block; margin-bottom: .55rem; }
.lp-step h3 { font-family: "Cinzel", serif; font-size: 1rem; margin: 0 0 .35rem; color: var(--ink); }
.lp-step p { color: var(--ink-dim); font-size: .82rem; line-height: 1.5; margin: 0; }

.lp-ladder { background: var(--felt-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem 1.25rem; }
.lp-ladder-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.lp-ladder-title { font-family: "Cinzel", serif; font-size: 1rem; color: var(--ink); }
.lp-ladder-note { color: var(--brass); font-size: .78rem; }
.lp-rungs { display: flex; align-items: flex-end; gap: .5rem; }
.lp-rung {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .15rem;
  background: var(--felt-3); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .25rem; color: var(--ink-dim);
}
.lp-rung b { font-family: "Cinzel", serif; color: var(--ink); font-size: 1rem; }
.lp-rung span { font-size: .7rem; text-align: center; }
.lp-rung:nth-child(1) { height: 66px; }
.lp-rung:nth-child(2) { height: 82px; }
.lp-rung:nth-child(3) { height: 98px; }
.lp-rung:nth-child(4) { height: 114px; }
.lp-rung:nth-child(5) { height: 130px; }
.lp-rung-top { border-color: var(--brass); background: linear-gradient(180deg, var(--felt-3) 0%, #34393f 100%); }
.lp-rung-top b { color: var(--brass); }
@media (max-width: 560px) {
  .lp-rung b { font-size: .82rem; } .lp-rung span { font-size: .6rem; }
  .lp-rung:nth-child(1) { height: 56px; } .lp-rung:nth-child(5) { height: 108px; }
}
.status.err { color: var(--danger); }

/* ============ homepage feature showcase ============ */
.feature-show { width: min(1000px, 100%); display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.fs-head { text-align: center; padding: .3rem 0 .1rem; }
.fs-head .lp-title { margin-bottom: .5rem; max-width: 26ch; }
.fs-row {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.5rem; align-items: center;
  background: var(--felt-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.7rem;
  transition: border-color .15s;
}
.fs-row:hover { border-color: var(--brass-soft); }
.fs-rev .fs-art { order: -1; }
.fs-badge {
  display: inline-block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--brass-soft); border-radius: 20px; padding: .24rem .8rem; margin-bottom: .85rem;
}
.fs-copy h3 { font-family: "Cinzel", serif; font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.2; margin: 0 0 .55rem; color: var(--ink); }
.fs-copy > p { color: var(--ink-dim); line-height: 1.6; margin: 0 0 .9rem; font-size: .92rem; }
.fs-points { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fs-points li { position: relative; padding-left: 1.4rem; color: var(--ink); font-size: .85rem; }
.fs-points li::before { content: "✦"; position: absolute; left: 0; color: var(--brass); }
.fs-art { display: flex; align-items: center; justify-content: center; }

.mk {
  width: 100%; max-width: 340px; font-size: .7rem; color: var(--ink-dim);
  background: linear-gradient(180deg, #1b1e22, #121417); border: 1px solid var(--line);
  border-radius: 12px; padding: .85rem; box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.mk i { display: block; }
/* draft mock */
.mk-bar { display: flex; justify-content: space-between; margin-bottom: .65rem; }
.mk-pile { color: var(--brass); }
.mk-fan { display: flex; justify-content: center; gap: .3rem; height: 84px; }
.mk-fan i { width: 46px; border-radius: 5px; border: 1px solid #0b0d11; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
  background: linear-gradient(180deg, rgba(7,9,12,.52) 0 15%, rgba(7,9,12,0) 15% 55%, rgba(7,9,12,.5) 55%), linear-gradient(150deg, #47545f, #29313a); }
.mk-fan i.pick { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(208,211,215,.22), 0 6px 14px rgba(0,0,0,.5); transform: translateY(-7px); }
.mk-fan i.pick b { position: absolute; inset: auto 0 5px; text-align: center; color: var(--brass); font-size: .6rem; font-weight: 600; }
.mk-cap { margin-top: .65rem; text-align: center; font-size: .66rem; }
/* table mock */
.mk-opp, .mk-you { display: flex; align-items: center; gap: .35rem; }
.mk-opp { margin-bottom: .5rem; }
.mk-you { margin-top: .5rem; }
.mk-seat { background: var(--felt-3); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .5rem; color: var(--ink); white-space: nowrap; }
.mk-seat b { color: var(--brass); margin-left: .35rem; }
.mk-seat.you { border-color: var(--brass-soft); }
.mk-hand { margin-left: auto; }
.mk-opp i { width: 24px; height: 34px; border-radius: 4px; background: linear-gradient(160deg, #23272c, #15181b); border: 1px solid var(--line); }
.mk-stack { text-align: center; background: rgba(208,211,215,.08); border: 1px dashed var(--brass-soft); border-radius: 6px; padding: .32rem; color: var(--ink); }
.mk-field { display: flex; gap: .3rem; justify-content: center; margin-top: .5rem; }
.mk-field i { width: 30px; height: 42px; border-radius: 4px; border: 1px solid #0b0d11;
  background: linear-gradient(180deg, rgba(7,9,12,.52) 0 16%, rgba(7,9,12,0) 16% 54%, rgba(7,9,12,.5) 54%), linear-gradient(150deg, #47545f, #29313a); }
.mk-field i.t { transform: rotate(15deg); }
.mk-field i.l { background: linear-gradient(180deg, rgba(7,9,12,.52) 0 16%, rgba(7,9,12,0) 16% 54%, rgba(7,9,12,.5) 54%), linear-gradient(150deg, #356048, #1b2a1f); }
/* builder mock */
.mk-q { background: var(--felt-3); border: 1px solid var(--line); border-radius: 6px; padding: .38rem .55rem; color: var(--ink); margin-bottom: .6rem; }
.mk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .65rem; }
.mk-col { background: var(--felt); border: 1px solid var(--line); border-radius: 6px; padding: .38rem; display: flex; flex-direction: column; gap: .24rem; }
.mk-col span { color: var(--brass); font-size: .62rem; }
.mk-col i { height: 9px; border-radius: 3px; background: linear-gradient(90deg, #2c3138, #20242a); }
.mk-curve { display: flex; align-items: flex-end; gap: .28rem; height: 48px; }
.mk-curve i { flex: 1; background: linear-gradient(180deg, var(--brass-soft), #2c3138); border-radius: 3px 3px 0 0; }
.mk-curve-x { display: flex; gap: .28rem; margin-top: .22rem; }
.mk-curve-x span { flex: 1; text-align: center; font-size: .54rem; color: var(--ink-dim); }
.mk-pips { display: flex; gap: .25rem; margin: 0 0 .55rem; }
.mk-pips i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); }
.mk-pips i.w { background: #efe7c8; } .mk-pips i.u { background: #3b7dc4; } .mk-pips i.b { background: #54545c; } .mk-pips i.r { background: #c75b4a; } .mk-pips i.g { background: #5e9c6e; }
.mk-price { color: var(--brass); font-size: .62rem; text-align: right; margin-top: .5rem; }
/* table: active-turn cues */
.mk-turn { margin-left: .4rem; color: var(--brass); font-size: .58rem; border: 1px solid var(--brass-soft); border-radius: 10px; padding: .04rem .42rem; white-space: nowrap; }
.mk-you .mk-seat.you { box-shadow: 0 0 0 1px var(--brass-soft), 0 0 8px rgba(208,211,215,.18); }
@media (max-width: 680px) {
  .fs-row { grid-template-columns: 1fr; gap: 1.1rem; }
  .fs-rev .fs-art { order: 0; }
  .fs-art { order: -1; }
}

/* ============ news (homepage teaser + full view) ============ */
.news-teaser { width: min(1000px, 100%); background: var(--felt-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.4rem; margin-top: 1.4rem; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.nt-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 720px) { .nt-list { grid-template-columns: 1fr; } }

#news { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% -10%, #20242a, var(--felt) 60%); overflow-y: auto; }
#news-top { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: rgba(8,8,14,.92); backdrop-filter: blur(8px); }
.news-title { font-family: "Cinzel", serif; font-size: 1.1rem; }
.news-filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: .4rem; }
.nf-chip { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); border-radius: 14px; padding: .25rem .7rem; font-size: .78rem; cursor: pointer; }
.nf-chip:hover { border-color: var(--brass-soft); color: var(--ink); }
.nf-chip.on { background: var(--brass); color: #15171a; border-color: var(--brass); font-weight: 600; }
.news-updated { color: var(--ink-dim); font-size: .75rem; margin-left: auto; }
#news-body { max-width: 920px; width: 100%; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: .9rem; }
.news-item { display: flex; flex-direction: column; gap: .45rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.news-item:hover { border-color: var(--brass-soft); transform: translateY(-2px); }
.ni-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ni-cat { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border-radius: 10px; padding: .16rem .5rem; white-space: nowrap; }
.ni-release { background: #3a3f2a; color: #dcd9a6; border: 1px solid #585d38; }
.ni-leak { background: #3a2a3f; color: #d8b8e2; border: 1px solid #5d3a66; }
.ni-ann { background: #26323f; color: #a8c8e2; border: 1px solid #3a5066; }
.ni-deck { background: #2a3f30; color: #b0e2c4; border: 1px solid #3a6650; }
.ni-date { font-size: .7rem; color: var(--ink-dim); white-space: nowrap; }
.ni-title { font-size: .95rem; font-family: "Cinzel", serif; line-height: 1.25; margin: 0; }
.ni-sum { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; margin: 0; }
.ni-src { font-size: .7rem; color: var(--brass); margin-top: auto; }
.news-empty { color: var(--ink-dim); max-width: 52ch; margin: 2.5rem auto; text-align: center; line-height: 1.6; }

/* ============ topbar ============ */
#game { height: 100%; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .4rem .9rem; border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.25); flex: 0 0 auto;
}
.brand.small { font-size: 1.05rem; }
.room-code { color: var(--ink-dim); font-size: .85rem; }
.room-code strong { color: var(--ink); font-family: ui-monospace, monospace; letter-spacing: .15em; }
.topbar-tools { margin-left: auto; display: flex; gap: .4rem; }
.topbar-tools .btn { padding: .3rem .6rem; font-size: .82rem; }

/* signature: brass turn ring */
.turn-ring {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #e8c87c, #a8842f 70%);
  color: #15171a; display: grid; place-items: center; line-height: 1;
  box-shadow: 0 0 0 3px #5a5f66 inset, 0 4px 14px rgba(0,0,0,.5);
  transition: transform .15s, box-shadow .2s;
  margin: -10px 0;
  z-index: 5;
}
.turn-ring:hover { transform: scale(1.06); }
.turn-ring.my-turn { box-shadow: 0 0 0 3px #5a5f66 inset, 0 0 18px 4px rgba(255,255,255,.55); animation: ringpulse 2.2s infinite; }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 3px #5a5f66 inset, 0 0 26px 8px rgba(255,255,255,.75); } }
@media (prefers-reduced-motion: reduce) { .turn-ring.my-turn { animation: none; } }
.turn-label { font-size: .55rem; text-transform: uppercase; letter-spacing: .1em; }
.turn-num { font-family: "Cinzel", serif; font-size: 1.3rem; font-weight: 700; }
.turn-pass { font-size: .55rem; font-weight: 700; }

/* ============ layout ============ */
#layout { flex: 1; display: flex; min-height: 0; }
#boards { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } /* relative: anchors the stack overlay + its toggle over your board */
#side {
  width: 300px; flex: 0 0 300px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; background: rgba(0,0,0,.2); min-height: 0;
}

/* opponents */
#opponents { display: flex; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
#opponents:empty { display: none; }
.opp { flex: 1; min-width: 0; background: var(--felt-2); position: relative; height: calc(36vh + var(--foot-h)); display: flex; flex-direction: column; } /* +foot-h: in a match the disclaimer is hidden, so its reserved strip goes to the opponents */
@media (max-height: 1150px) { .opp { height: calc(31vh + var(--foot-h)); } } /* 1080p and shorter: trim the opponents strip so your own board (and its cards) get more height */
.seat-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.opp-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.opp-name.dc { opacity: .45; text-decoration: line-through; }
.opp-life { font-family: "Cinzel", serif; font-weight: 700; font-size: .9rem; color: var(--brass); flex: 0 0 auto; }
.opp-counts { color: var(--ink-dim); font-size: .72rem; white-space: nowrap; flex: 0 0 auto; }
.opp-field { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: .15rem; }
.opp.active-seat { box-shadow: 0 0 0 2px var(--brass) inset; }
.opp-command { position: absolute; top: .25rem; right: .35rem; z-index: 4; display: flex; gap: .25rem; padding: .22rem .22rem .5rem; background: rgba(0,0,0,.42); border: 1px solid var(--brass-soft); border-radius: 7px; }
.opp-command .card { width: 60px !important; }
.opp-command .cmdslot { position: relative; }
/* bottom info bar: seat, name, status, mana, then hand/library, life and the GY/Exile buttons grouped at the right (no top header) */
.opp-zones { position: absolute; left: .3rem; right: .3rem; bottom: .25rem; z-index: 3; display: flex; align-items: center; gap: .3rem; min-width: 0;
  background: rgba(0,0,0,.62); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .4rem; font-size: .76rem; }
.opp-zones .opp-counts { margin-left: auto; } /* push counts, life and the zone buttons together at the right edge */
.opp-zones button { font-size: .68rem; color: var(--ink-dim); background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .35rem; flex: 0 0 auto; }
.opp-zones button:hover { color: var(--ink); border-color: var(--brass-soft); }

/* my battlefield: organized rows (lands / creatures / other) */
#mytable { position: relative; flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: .35rem; padding: .45rem .55rem;
  background:
    radial-gradient(800px 400px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
    var(--felt);
}
#mytable.active-seat { box-shadow: 0 0 0 2px var(--brass) inset; }
.rowstrip {
  position: relative; flex: 1; display: flex; align-items: stretch;
  border: 1px dashed rgba(150,156,164,.45); border-radius: 10px;
  padding: .4rem .55rem .4rem 1.6rem; overflow: hidden;
  min-height: calc(var(--card-w) * 680 / 488 + 1rem);
  border-color: var(--trim, rgba(150,156,164,.45));
}
/* cards sit inside a body that holds one or two rows (see fitStrip) */
.rowbody { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.rowline { display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; }
/* my battlefield areas size to their content (never shrink); layoutStrips shrinks the cards instead
   so two rows fit the board height without scrolling */
#mytable > .rowstrip, #mytable > .bottomrows { flex: 1 0 auto; }
.rowlabel {
  position: absolute; left: .15rem; top: 50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--trim, var(--ink-dim)); text-shadow: 0 0 3px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.85);
  pointer-events: none;
}
.rowstrip.mini { flex: 1; min-height: 0; border: none; padding: .1rem .3rem; }
.rowstrip.mini .rowbody { gap: .2rem; }
.rowstrip.mini .rowline { gap: .25rem; }
.bottomrows { flex: 1; display: flex; gap: .35rem; min-height: 0; }
.bottomrows > .rowstrip { flex: 1; min-width: 0; }
.bottomrows.mini { gap: .2rem; }
/* no margin-left transition: the fan margin is recomputed every render (new nodes each
   time), so a transition made cards slide/jiggle on every state update (#8). */
.stackgroup { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; }
/* when cards overlap to fit, hovering/holding one lifts it above its neighbours */
.rowstrip .stackgroup:hover, .rowstrip .stackgroup:focus-within { z-index: 20; }
.card.attached { margin-right: calc(var(--card-w) * -0.6); transform: translateY(-9px); filter: brightness(.85); }
.card.attached.tapped { transform: translateY(-9px) rotate(45deg); }
/* #24: cards exiled "under" a permanent, a peeking edge + a clickable count badge */
.stackgroup.has-tucked::before { content: ""; position: absolute; left: 5px; right: 5px; bottom: -5px; height: 8px;
  border-radius: 0 0 6px 6px; background: repeating-linear-gradient(90deg, #2a2118, #2a2118 6px, #3a2e20 6px, #3a2e20 12px);
  border: 1px solid var(--brass); border-top: none; z-index: 0; }
.tuck-badge { position: absolute; bottom: -7px; right: -6px; z-index: 3; cursor: pointer;
  font-size: .68rem; line-height: 1; padding: 2px 5px; border-radius: 9px; color: var(--ink);
  background: color-mix(in srgb, var(--brass) 30%, #1a1410); border: 1px solid var(--brass); }
.tuck-badge:hover { background: var(--brass); color: #1a1410; }

/* shared stack strip */
/* the stack is a semi-transparent overlay across the top of your board (top set by JS), so you still see
   cards behind it; it auto-opens when a spell hits the stack and toggles from the button in the top corner */
#stack { position: absolute; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: .5rem;
  padding: .45rem 5rem .45rem 1.6rem; flex-wrap: wrap; row-gap: .35rem;
  background: rgba(8,10,14,.62); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  border-top: 1px solid var(--brass-soft); border-bottom: 1px solid var(--brass-soft);
}
#stack[hidden] { display: none; }
#stack .rowlabel { color: var(--brass); }
#stack.my-priority { background: rgba(255,255,255,.06); box-shadow: 0 0 0 2px var(--brass) inset; }
#stack-prio { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex: 0 0 auto; padding-left: .6rem; }
#stack-prio-text { font-size: .8rem; color: var(--ink); white-space: nowrap; }
.stack-prio-timer { font-family: "Cinzel", serif; font-weight: 700; color: var(--danger); min-width: 36px; text-align: right; }
#stack-pass { padding: .3rem .9rem; }
#stack-pass:disabled { opacity: .45; cursor: default; }
#stack-items { display: flex; align-items: flex-end; gap: .5rem; }
.sitem { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.stier { font-size: .5rem; letter-spacing: .06em; color: var(--ink-dim); text-transform: uppercase; }
.srespond { font-size: .54rem; color: var(--ink-dim); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem.resolvable .scard, .sitem.resolvable .snote { box-shadow: 0 0 0 2px var(--brass), 0 0 10px rgba(255,255,255,.5); }
.sitem.resolvable { cursor: pointer; }
/* guided respond: glow the item you're responding to (the top of the stack) */
.sitem.responding-glow .scard, .sitem.responding-glow .snote { animation: respondGlow 1.3s ease-in-out 2; }
@keyframes respondGlow { 0%,100% { box-shadow: 0 0 0 1px #000; } 50% { box-shadow: 0 0 0 3px var(--brass), 0 0 16px var(--brass); } }
.scard { width: 32px; flex: 0 0 auto; border-radius: 4px; overflow: hidden; cursor: pointer; border: 1px solid #000; }
.scard img { width: 100%; display: block; }
.scard.noart { aspect-ratio: 488/680; background: var(--felt-3); font-size: .45rem; display: grid; place-items: center; text-align: center; color: var(--ink); }
.snote { font-size: .72rem; border: 1px solid var(--brass-soft); border-radius: 12px; padding: .18rem .55rem; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stack-note { flex: 0 0 auto; padding: .15rem .5rem; font-size: .72rem; }
#stack.drop-hot { box-shadow: 0 0 0 2px var(--brass) inset; }
/* toggle button in the top corner of the board (top set by JS); highlighted while the stack overlay is open */
#stack-toggle { position: absolute; right: 8px; z-index: 6; padding: .25rem .65rem; font-size: .78rem; }
#stack-toggle.on { background: var(--brass); color: #15171a; border-color: var(--brass); }
/* counterspell gesture: highlight the opponent card you're about to drop a spell onto */
#opponents .card.drop-hot { outline: 3px solid var(--brass); outline-offset: 1px; box-shadow: 0 0 12px var(--brass); }

/* ping flash + targeting arrows */
.card.pinged, .gcard.pinged, .scard.pinged { animation: pingflash 1.5s; }
@keyframes pingflash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  25% { box-shadow: 0 0 0 7px rgba(255,255,255,.95); }
  60% { box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .card.pinged, .gcard.pinged, .scard.pinged { animation: none; outline: 3px solid var(--brass); }
}
body.arrowing, body.arrowing .card { cursor: crosshair !important; }
.arrow-overlay { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
/* opponent (small) battlefield cards use their own width, sized by sizeOppCards so two rows fit
   their fixed-height strip. The command zone keeps its 60px rule (it wins via !important). */
.card.small { width: var(--opp-card-w, 90px); }
/* opponent cards display upright for readability */
.opp .card.tapped { transform: rotate(45deg); }
.opp .card.tapped:hover { transform: rotate(45deg) scale(1.03); }
.opp .card.attached { transform: translateY(-9px); }
.opp .card.attached.tapped { transform: translateY(-9px) rotate(45deg); }

/* player turn-order bar */
#playerbar { display: flex; gap: .4rem; padding: .35rem .6rem; background: rgba(0,0,0,.3); border-bottom: 1px solid var(--line); overflow-x: auto; flex: 0 0 auto; }
.pbtn { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--felt-2); white-space: nowrap; flex: 0 0 auto; }
.pbtn:hover { border-color: var(--brass-soft); }
.pbtn.self { background: var(--felt-3); }
.pbtn.active { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 12px rgba(199,91,74,.5); }
.pbtn.active .pbtn-name { color: var(--danger); font-weight: 700; }
.pbtn.focus { outline: 2px solid var(--brass); }
.pbtn.solo { outline: 2px solid var(--brass); background: var(--felt-3); }
.pbtn.blink { animation: blueblink .45s ease-in-out 2; }
@keyframes blueblink { 50% { background: #2f6ea8; border-color: #4f8fc0; box-shadow: 0 0 12px rgba(79,143,192,.7); } }
@media (prefers-reduced-motion: reduce) { .pbtn.blink { animation: none; box-shadow: 0 0 10px rgba(79,143,192,.7); } }
.pbtn-name { font-size: .85rem; }
.pbtn-life { font-size: .8rem; font-weight: 700; color: var(--brass); }
.pbtn-life.low { color: var(--danger); }
.pbtn-life.dead { color: var(--danger); text-decoration: line-through; opacity: .75; }
.pbtn-out { opacity: .7; }
.opp.enlarged { flex: 2.2; }
.opp.soloed { flex: 1; }

/* setup modal */
.setup h3 { font-family: "Cinzel", serif; font-size: .9rem; margin: 1rem 0 .4rem; }
.setup-decks .btn { margin-top: .5rem; }
.order-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.order-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--felt); cursor: grab; }
.order-item:active { cursor: grabbing; }
.order-num { font-family: "Cinzel", serif; font-weight: 700; color: var(--brass); min-width: 1.4ch; }
.order-num.active-num { color: var(--danger); }
.order-move { margin-left: auto; display: flex; gap: .2rem; }
.order-move .btn { padding: .1rem .4rem; font-size: .7rem; }
.order-controls { display: flex; gap: .5rem; margin-bottom: .4rem; }

/* ============ cards ============ */
.card {
  position: relative; flex: 0 0 auto; width: var(--card-w); aspect-ratio: 488/680;
  border-radius: var(--card-r); background: var(--felt-3);
  border: 1px solid #000; box-shadow: 0 3px 8px rgba(0,0,0,.55);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-user-drag: none; touch-action: none;
  transition: transform .12s;
}
.card img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--card-r); pointer-events: none; -webkit-user-drag: none; }
.card .noimg {
  display: grid; place-items: center; height: 100%; padding: .3rem; text-align: center;
  font-size: .62rem; font-weight: 600; color: var(--ink); border-radius: var(--card-r);
  background: linear-gradient(160deg, #3a3f45, #22262b); border: 1px solid var(--line);
}
.card.tapped { transform: rotate(45deg); margin: 0 calc(var(--card-w) * 0.18); }
.card.tapped:hover { transform: rotate(45deg) scale(1.03); }
/* tap/untap rotation animation, played only on the card whose state just changed
 * (see cardEl: the .tap-anim / .untap-anim classes are added on the transition) */
@keyframes tapSpin { from { transform: rotate(0deg); } to { transform: rotate(45deg); } }
@keyframes untapSpin { from { transform: rotate(45deg); } to { transform: rotate(0deg); } }
.card.tap-anim { animation: tapSpin .18s ease-out; }
.card.untap-anim { animation: untapSpin .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .card.tap-anim, .card.untap-anim { animation: none; }
}
.card.mine { cursor: grab; }
.card.mine:active { cursor: grabbing; }
.card.commander::after {
  content: "★"; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  background: var(--brass); color: #15171a; border-radius: 50%;
  display: grid; place-items: center; font-size: .65rem; box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.card.facedown .back, .back {
  width: 100%; height: 100%; border-radius: var(--card-r);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.5) 0 9%, transparent 10%),
    repeating-conic-gradient(from 45deg, #3c2e14 0 25%, #2c2210 0 50%);
  border: 2px solid #51400f;
}
/* counters run down the left edge of a card, top-left first (see counterChip) */
.card-counters { position: absolute; left: -5px; top: -4px; z-index: 5; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ccounter { display: flex; align-items: center; background: rgba(12,14,18,.95); border: 1px solid var(--brass); border-radius: 8px; color: var(--brass); font-weight: 700; line-height: 1; cursor: pointer; }
.ccounter .cc-body { display: flex; align-items: center; gap: 2px; padding: 2px 4px; }
.ccounter .cc-n { font-size: .7rem; }
.ccounter .cc-k { font-size: .5rem; opacity: .85; }
.ccounter.cc-pos { border-color: #5e9c6e; color: #9fd6a8; }
.ccounter.cc-neg { border-color: #c75b4a; color: #f0a99c; }
.ccounter.cc-loy { border-color: #4f8fc0; color: #a8d0ec; }
.ccounter.open { box-shadow: 0 0 0 2px var(--brass-soft); }
.ccounter .cc-btn { width: 16px; height: 16px; border: none; background: transparent; color: inherit; font-size: .95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ccounter .cc-btn:hover { background: var(--brass); color: #15171a; border-radius: 6px; }
/* the searchable "Add a counter" panel, opened beside the card's right-click menu */
.counter-menu { position: fixed; z-index: 200; padding: 6px; width: 210px; max-height: 340px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(12,14,18,.97); border: 1px solid var(--brass-soft); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.counter-search { width: 100%; box-sizing: border-box; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--line); background: var(--felt); color: var(--ink); font-size: .8rem; }
.counter-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.counter-opt { text-align: left; padding: .3rem .5rem; background: transparent; border: none; color: var(--ink); font-size: .78rem; cursor: pointer; border-radius: 5px; text-transform: capitalize; }
.counter-opt:hover { background: var(--brass); color: #15171a; }
.counter-opt.cc-pos { color: #9fd6a8; } .counter-opt.cc-neg { color: #f0a99c; } .counter-opt.cc-loy { color: #a8d0ec; }
.counter-opt.counter-custom { color: var(--brass); font-style: italic; text-transform: none; }
.counter-none { padding: .3rem .5rem; color: var(--ink-dim); font-size: .75rem; }
.card.dragging { opacity: .25; }
#drag-ghost { position: fixed; z-index: 1000; pointer-events: none; width: var(--card-w); aspect-ratio: 488/680; transform: translate(-50%, -50%) rotate(3deg); filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
#drag-ghost img, #drag-ghost .back, #drag-ghost .noimg { width: 100%; height: 100%; object-fit: cover; border-radius: var(--card-r); }
[data-drop].drop-hot { box-shadow: 0 0 0 2px var(--brass) inset !important; }
/* drawn-card flight from library → hand */
.draw-fly {
  position: fixed; z-index: 1000; border-radius: var(--card-r); overflow: hidden; pointer-events: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.6); will-change: transform;
  transition: transform .34s cubic-bezier(.22,.7,.3,1);
}
.draw-fly img { width: 100%; height: 100%; object-fit: cover; }

/* ============ dock: zones + hand ============ */
#dock { flex: 0 0 auto; display: flex; align-items: stretch; gap: .8rem; padding: .5rem .8rem; border-top: 1px solid var(--line); background: rgba(0,0,0,.3); }
#zones { display: flex; gap: .55rem; }
.pile { position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.pile-art { width: 64px; aspect-ratio: 488/680; border-radius: 5px; background: var(--felt-3); border: 1px dashed var(--line); background-size: cover; background-position: center; }
.pile-art.back { border: 2px solid #51400f; }
.pile:hover .pile-art { border-color: var(--brass-soft); }
/* library is your draw stack, show it at full hand-card size */
#pile-library { width: var(--hand-w); }
#pile-library .pile-art { width: var(--hand-w); }
.pile-name { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.pile-count {
  position: absolute; top: -6px; right: 2px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--brass); color: #15171a; font-weight: 700; font-size: .72rem;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.token-art { display: grid; place-items: center; font-size: 1.4rem; color: var(--ink-dim); }

#hand { flex: 1; display: flex; align-items: center; gap: .35rem; overflow-x: auto; padding: .25rem .3rem; min-height: calc(var(--hand-w) * 680 / 488 * .98); border-radius: 8px; }
#hand .card { width: var(--hand-w); }
/* hand cards inherit flow positioning */
#hand .card:hover { transform: translateY(-8px); z-index: 2; }
#hand:empty::after { content: "Your hand is empty, click your library to draw."; color: var(--ink-dim); font-size: .8rem; padding-left: .5rem; }

/* phase tracker */
#phasebar { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
#phase-dots { display: flex; gap: 7px; }
.phase-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--line); }
.phase-dot.on { background: var(--brass); box-shadow: 0 0 9px rgba(255,255,255,.85); }
#btn-phase { padding: .4rem 1.1rem; font-size: 1.25rem; white-space: nowrap; }
#btn-phase #phase-label { color: var(--brass); font-weight: 700; }
#btn-phase.will-pass { border-color: var(--brass); }
#btn-phase.will-pass::after { content: ' · pass turn'; color: var(--ink-dim); font-size: .78rem; font-weight: 400; }

/* player badges & counters */
.badge { font-size: .68rem; border-radius: 9px; padding: 0 .3rem; background: rgba(0,0,0,.4); border: 1px solid var(--line); flex: 0 0 auto; }
.badge.poison { color: #9fd86c; border-color: #56713a; }
.badge.poison.lethal, .mc-num.lethal { color: var(--danger); border-color: var(--danger); font-weight: 700; }
.badge.crown { background: none; border: none; font-size: .8rem; }
.me-counters { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin-top: .55rem; align-items: center; }
.mc { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.mc .stepper { width: 21px; height: 21px; font-size: .78rem; }
.mc-label { color: var(--ink-dim); }
.mc-num { font-weight: 700; min-width: 2ch; text-align: center; }
.monarch-btn { padding: .2rem .55rem; font-size: .76rem; }
.monarch-btn.on { border-color: var(--brass); color: var(--brass); font-weight: 600; }
/* game mechanics grouped in a 2-column grid: day/night + monarch, then reveal/roll/flip/untap */
.me-mech { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .55rem; }
.me-mech .btn { font-size: .75rem; padding: .34rem .4rem; text-align: center; line-height: 1.2; }

/* commander tax */
.cmd-zone { width: auto; min-width: calc(var(--hand-w) + .6rem); border: 1px dashed var(--line); border-radius: 10px; padding: .2rem .25rem; }
.cmd-zone.drop-hot { border-style: solid; }
#command-cards { display: flex; gap: .35rem; align-items: flex-end; min-height: calc(var(--hand-w) * 680 / 488); }
#command-cards .card { width: var(--hand-w); } /* commander stored at the smaller hand size (like the library) so the dock only needs to be as tall as the hand */
.cmdslot { position: relative; }
.cmd-empty { width: calc(var(--hand-w) * .92); aspect-ratio: 488/680; border: 1px dashed var(--line); border-radius: var(--card-r); }
.ctax {
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; font-weight: 700; white-space: nowrap;
  background: var(--felt); color: var(--brass); border: 1px solid var(--brass);
  border-radius: 8px; padding: 0 .3rem; z-index: 2;
}

/* mana pool */
.mana-row { display: flex; gap: .3rem; margin-top: .55rem; align-items: center; flex-wrap: wrap; }
.mchip { min-width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .78rem; border: 1px solid rgba(0,0,0,.45); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mchip.zero { opacity: .4; }
.mchip:hover { transform: scale(1.08); }
.mclear { padding: .15rem .45rem; font-size: .68rem; }
.oppmana { min-width: 16px; height: 16px; border-radius: 50%; font-size: .62rem; font-weight: 700; color: #1a1a1a; display: grid; place-items: center; padding: 0 2px; flex: 0 0 auto; }

.cmdbox { display: flex; flex-direction: column; gap: .3rem; }
.taxrow { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.taxrow .stepper { width: 21px; height: 21px; font-size: .78rem; }

/* ============ side panel ============ */
#me-panel { padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.me-row { display: flex; align-items: center; gap: .5rem; }
.me-name { font-weight: 700; }
.life-ctl { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.life-num { font-family: "Cinzel", serif; font-size: 1.7rem; font-weight: 700; color: var(--brass); min-width: 2.2ch; text-align: center; }
.life-num.clickable { cursor: pointer; border-radius: 6px; padding: 0 .15rem; }
.life-num.clickable:hover { background: rgba(255,255,255,.08); }
.life-num.low { color: var(--danger); }
.stepper { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--felt-2); font-weight: 700; }
.stepper:hover { border-color: var(--brass-soft); }
.me-actions { display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.me-actions .btn { padding: .25rem .55rem; font-size: .76rem; }

.cmd-dmg { margin-top: .6rem; } /* nested in #me-panel right under your life */
.cmd-dmg h3, .mana-section h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: .4rem; }
.mana-section { margin-top: .7rem; }
.mana-section .mana-row { margin-top: .3rem; }
.cd-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; margin-bottom: .3rem; }
.cd-row .seat-dot { flex: 0 0 auto; }
.cd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ctl { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.cd-ctl .stepper { width: 22px; height: 22px; font-size: .8rem; }
.cd-num { font-weight: 700; min-width: 2ch; text-align: center; }
.cd-num.lethal { color: var(--danger); }

#log { flex: 1; overflow-y: auto; padding: .55rem .8rem; font-size: .78rem; display: flex; flex-direction: column; gap: .28rem; }
.log-line { color: var(--ink-dim); }
.log-line.turn { color: var(--brass); font-weight: 600; border-top: 1px solid var(--line); padding-top: .3rem; }
.log-line.chat { color: var(--ink); }
.log-line.life, .log-line.dice { color: #b8c8b8; }
#chat { flex: 0 0 auto; padding: .5rem .6rem; border-top: 1px solid var(--line); }
#chat-in { width: 100%; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .4rem .6rem; }
#chat-in:focus { outline: none; border-color: var(--brass-soft); }
/* ===== in-game chrome consolidated into a full-height right sidebar (the top bars moved in) ===== */
#main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#main-col > #boards { min-height: 0; } /* flex column needs this or the board grows to content height and shoves the dock off-screen */
#side { width: 232px; flex: 0 0 232px; overflow-y: auto; overflow-x: hidden; position: relative; }
/* minimize / pop-out the side panel for more board room */
#side-ctrls { width: 100%; display: flex; justify-content: flex-end; gap: .3rem; margin-bottom: .15rem; }
#side-ctrls .btn { padding: .12rem .5rem; font-size: .78rem; line-height: 1.3; }
body.side-min #side { display: none; } /* minimized: the board (#main-col, flex:1) takes the whole width */
#side-restore { position: fixed; top: 10px; right: 10px; z-index: 50; padding: .3rem .65rem; font-size: .82rem; }
/* popped into its own window: fill it, and override the narrow-screen slide-over drawer (the popout window
   is ~300px wide, which would otherwise position #side off-screen via transform: translateX(100%)) */
#side.popped { position: static; inset: auto; transform: none; transition: none; width: 100%; max-width: none; flex: none; height: 100vh; }
#side.popped #side-ctrls { display: none; } /* in the popout you dock by closing the window or the restore button */
#side #topbar .room-code { display: none; } /* the table code now lives at the top of Settings, not the top bar */
/* the former top bar, now stacked in the sidebar: let its controls wrap instead of a single wide row */
#side #topbar { flex-wrap: wrap; gap: .45rem .5rem; padding: .55rem .6rem; }
#side #topbar .brand-logo { width: 100%; display: flex; justify-content: center; } /* center Spellpod across the top of the sidebar */
/* tidy 2-column grid of labeled buttons so each one reads clearly */
#side .topbar-tools { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
#side .topbar-tools .btn { font-size: .75rem; padding: .36rem .45rem; text-align: center; line-height: 1.2; }
#side #phasebar .btn { font-size: .76rem; padding: .26rem .5rem; }
#btn-reveal-hand.on { background: var(--danger); border-color: var(--danger); color: #fff; } /* red while your hand is revealed to the table */
#side #turnphase-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; }
#side #phasebar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } /* phase tracker on the left of the row */
#side .turn-ring { margin: 0; width: 54px; height: 54px; } /* pass-turn on the right, shrunk a bit to share the row */
#side .turn-num { font-size: 1.05rem; }
/* player life list runs down the sidebar instead of across the top */
#side #playerbar { flex-direction: column; align-items: stretch; gap: .35rem; overflow-x: visible; }
/* compact log: a few recent lines; click to expand it over the panels above; pop-out button in the bar */
#log-wrap { flex: 0 0 auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
#log-bar { display: flex; align-items: center; justify-content: space-between; padding: .25rem .55rem; font-size: .7rem; color: var(--ink-dim); }
#log-bar .log-title { text-transform: uppercase; letter-spacing: .07em; }
#log-pop { font-size: .7rem; padding: .15rem .45rem; }
#log { flex: 0 0 auto; max-height: 5.4em; overflow-y: auto; cursor: pointer; }
/* grab this handle and pull down to resize the log into the empty sidebar space below it */
#log-resize { flex: 0 0 auto; height: 10px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
#log-resize::before { content: ""; width: 34px; height: 3px; border-radius: 3px; background: var(--line); transition: background .15s; }
#log-resize:hover::before, #log-resize.dragging::before { background: var(--brass-soft); }
#log.expanded { position: absolute; left: 4px; right: 4px; top: 4px; bottom: 3.4em; max-height: none; z-index: 40;
  background: var(--felt-2, #1a1d22); border: 1px solid var(--brass-soft); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.7); padding: .5rem .7rem; cursor: default; }
.cd-empty { font-size: .76rem; color: var(--ink-dim); margin: 0; padding: .15rem .8rem .55rem; }

/* ============ preview / context / modal ============ */
#preview { position: fixed; right: 10px; bottom: 10px; left: auto; top: auto; width: 330px; max-width: 90vw; z-index: 60; pointer-events: none; } /* enlarged hover image lives in the empty bottom-right (the sidebar's lower area), clear of the board and hand */
#preview img { width: 100%; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.7); }
#preview .noimg-big { width: 100%; aspect-ratio: 488/680; border-radius: 12px; background: var(--felt-3); border: 1px solid var(--line); display: grid; place-items: center; padding: 1rem; text-align: center; font-weight: 600; }

#ctxmenu { position: fixed; z-index: 90; min-width: 190px; background: #101a15; border: 1px solid var(--line); border-radius: 9px; padding: .3rem; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
#ctxmenu button { display: block; width: 100%; text-align: left; padding: .38rem .6rem; border-radius: 6px; font-size: .84rem; }
#ctxmenu button:hover { background: var(--felt-3); }
#ctxmenu .sep { height: 1px; background: var(--line); margin: .25rem .3rem; }

#modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: grid; place-items: center; }
#modal-box { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--felt-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#modal-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-family: "Cinzel", serif; font-weight: 700; }
#modal-body { padding: .9rem 1rem; overflow-y: auto; }
#modal-foot { padding: .6rem 1rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end; }
#modal-foot:empty { display: none; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.cardgrid .gcard { position: relative; border-radius: 7px; overflow: hidden; cursor: pointer; border: 1px solid #000; aspect-ratio: 488/680; background: var(--felt-3); }
.cardgrid .gcard img { width: 100%; height: 100%; object-fit: cover; }
.cardgrid .gcard:hover { outline: 2px solid var(--brass); }
.cardgrid .gcard.sel { outline: 3px solid var(--brass); box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.cardgrid .gcard.sel::after { content: "↩"; position: absolute; top: 3px; right: 5px; font-size: .8rem; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.mull-note { margin: 0 0 .7rem; color: var(--ink-dim, #cbb98a); font-size: .9rem; }
/* opening hand: a single horizontal row; cards fill the width and shrink so all of them fit with no scrollbar, hover to enlarge */
.mull-grid { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; }
.mull-grid .gcard { flex: 1 1 0; min-width: 0; max-width: 300px; }
#modal-box.wide-hand { width: 96vw; } /* near full width so the cards stay as large as possible while still fitting */
.gname { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .35rem; font-size: .64rem; background: rgba(0,0,0,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-quick { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.modal-input { width: 100%; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .5rem .7rem; }
.btn.ghost.on { background: var(--brass); color: #15171a; border-color: var(--brass); }
/* live reveal overlay, other players' revealed library cards */
#reveal-overlay { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 85; display: flex; flex-direction: column; gap: .5rem; max-width: 92vw; pointer-events: none; }
.reveal-block { background: rgba(12,18,21,.95); border: 1px solid var(--brass); border-radius: 10px; padding: .45rem .6rem; box-shadow: 0 10px 28px rgba(0,0,0,.6); pointer-events: auto; }
.reveal-title { font-size: .76rem; color: var(--brass); margin-bottom: .35rem; }
.reveal-cards { display: flex; gap: .35rem; flex-wrap: wrap; max-width: 88vw; }
.reveal-card { width: 56px; aspect-ratio: 488/680; border-radius: 5px; overflow: hidden; border: 1px solid #000; flex: 0 0 auto; background: var(--felt-3); }
.reveal-card img { width: 100%; height: 100%; object-fit: cover; }
.reveal-noart { display: grid; place-items: center; height: 100%; font-size: .5rem; text-align: center; padding: 2px; }
.lib-toolbar { display: flex; gap: .5rem; margin-bottom: .8rem; }
.lib-toolbar .modal-input { flex: 1; }
.cardgrid .gcard.scry-away { outline: 2px solid var(--danger); opacity: .8; }
.cardgrid .gcard.scry-away img { filter: grayscale(.5) brightness(.7); }
.scry-tag { position: absolute; top: 3px; left: 3px; z-index: 2; font-size: .58rem; font-weight: 700; background: rgba(0,0,0,.78); border: 1px solid var(--brass-soft); border-radius: 7px; padding: 0 .3rem; }
.gcard.scry-away .scry-tag { border-color: var(--danger); color: var(--danger); }
.cardgrid .gcard[draggable="true"] { cursor: grab; }
.cardgrid .gcard.dragging { opacity: .4; }
.cardgrid .gcard.drag-over { outline: 3px dashed var(--brass); outline-offset: 1px; }

/* ============ deck builder ============ */
.deck-head-btns { display: flex; gap: .4rem; }
/* deck builder lobby, a deck picker shown when you open the builder */
#builder-lobby { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow-y: auto;
  background: radial-gradient(1200px 700px at 50% -10%, #20242a, var(--felt) 60%); }
.bl-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 1.2rem; }
.bl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bl-title { font-family: "Cinzel", serif; font-size: 1.15rem; margin: 0; color: var(--brass); }
.bl-sub { margin: .2rem 0 0; }
.bl-head-btns { display: flex; gap: .5rem; align-items: center; }
.bl-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
/* deck tile: commander art as a full-bleed background, details over a bottom gradient */
.bl-tile { position: relative; height: 100%; min-height: 138px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden; padding: 0; cursor: pointer; text-align: left;
  background: var(--felt-3) center top/cover no-repeat; transition: border-color .15s, transform .08s, box-shadow .15s; }
.bl-tile:hover { border-color: var(--brass); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.bl-tile:active { transform: scale(.99); }
.bl-tile.selected { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.bl-tile-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,9,11,.95) 0%, rgba(8,9,11,.72) 45%, rgba(8,9,11,.10) 100%); }
.bl-tile-body { position: relative; z-index: 2; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .18rem; }
.bl-tile-name { font-family: "Cinzel", serif; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.bl-tile-cmdr { font-size: .76rem; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.bl-tile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .1rem; }
.bl-tag { font-size: .67rem; font-weight: 600; border-radius: 10px; padding: .08rem .5rem; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); color: #fff; white-space: nowrap; }
.bl-tag-fmt { color: var(--brass); border-color: var(--brass-soft); }
.bl-tag-legacy { color: #ffd97a; border-color: rgba(255,217,122,.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bl-tile-foot { display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.bl-tile-count { font-size: .7rem; color: rgba(255,255,255,.82); }
.bl-tile-foot .dt-pips { margin-left: auto; }
/* the leading "new deck" tile */
.bl-newtile { align-items: center; justify-content: center; gap: .3rem; min-height: 138px;
  background: transparent; border-style: dashed; color: var(--brass); }
.bl-newtile:hover { border-color: var(--brass); background: rgba(212,175,107,.06); box-shadow: none; }
.bl-newplus { font-size: 1.7rem; line-height: 1; font-weight: 700; }
.bl-newlabel { font-size: .82rem; font-weight: 600; }
#builder { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% -10%, #20242a, var(--felt) 60%); }
#bld-top { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; padding-right: 220px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.3); flex: 0 0 auto; flex-wrap: wrap; } /* reserve the top-right for the account widget (wide enough for a capped username) */
@media (max-width: 560px) { #bld-top { padding-right: 52px; } }
/* on narrower windows, drop the Tour/Import/Export labels to icons so the header stays on one row
   instead of wrapping a second row under the fixed account widget (which then looked off-center) */
@media (max-width: 1300px) { #bld-top .bld-blbl { display: none; } }
/* on wide monitors the account widget is inset to a centered 1500px column, but this header is full width,
   so reserve that same inset on the right, otherwise the header buttons sit to the right of the widget */
@media (min-width: 1500px) { #bld-top { padding-right: calc((100vw - 1500px) / 2 + 220px); } }
.bld-name { flex: 1; min-width: 0; max-width: 340px; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .45rem .7rem; font-size: 1rem; font-weight: 600; }
.bld-totals { display: flex; gap: .7rem; align-items: baseline; margin-left: auto; }
#bld-count { font-family: "Cinzel", serif; color: var(--brass); font-weight: 700; }
.bld-price { color: var(--ink-dim); font-size: .82rem; }
.bld-status { color: var(--ink-dim); font-size: .8rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

#bld-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr 230px; }
#bld-search { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: .6rem; gap: .5rem; }
.bld-q { width: 100%; background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .5rem .7rem; }
.bld-hint { color: var(--ink-dim); font-size: .72rem; line-height: 1.4; }
.set-sizehint { margin: .15rem 0 .5rem; } /* image-size tip snug under the Card sleeve / Playmat headings */
.bld-hint code { background: rgba(0,0,0,.35); padding: 0 .25rem; border-radius: 4px; color: var(--brass); }
#bld-results { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .4rem; align-content: start; }

#bld-boardwrap { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#bld-boardbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.bbar-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.bbar-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bbar-opt { background: transparent; color: var(--ink-dim); border: none; border-right: 1px solid var(--line); padding: .3rem .8rem; font-size: .8rem; cursor: pointer; }
.bbar-opt:last-child { border-right: none; }
.bbar-opt.on { background: var(--brass); color: #15171a; font-weight: 600; }
#bld-board { flex: 1; min-height: 0; display: flex; gap: .7rem; overflow-x: auto; padding: .7rem; align-items: flex-start; }
.bld-col { flex: 0 0 var(--col-w); display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.bld-col-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); padding: .2rem .1rem .35rem; position: sticky; top: 0; }
/* #5: sideboard / maybeboard columns sit apart from the maindeck with a divider + dimmer head */
.bld-board-col { border-left: 1px dashed var(--line); padding-left: .5rem; margin-left: .3rem; }
.bld-board-col .bld-col-head { color: var(--ink-dim); }
.bld-stack { display: flex; flex-direction: column; overflow-y: auto; overflow-x: visible; padding-bottom: 30%; }

.bld-card { position: relative; width: 100%; aspect-ratio: 488/680; border-radius: 6px; overflow: hidden; background: var(--felt-3); border: 1px solid #000; }
.bld-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bld-noimg { display: grid; place-items: center; height: 100%; padding: .3rem; text-align: center; font-size: .6rem; font-weight: 600; }
/* loading wheel shown over a card until its art arrives (deck cards while they resolve, plus search & recs) */
.bld-spinner { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2.5px solid rgba(255,255,255,.2); border-top-color: var(--brass); border-radius: 50%; animation: bld-spin .8s linear infinite; z-index: 2; pointer-events: none; }
@keyframes bld-spin { to { transform: rotate(360deg); } }
/* a loading card placeholder: name in a title strip up top (readable even when stacked), spinner centered */
.bld-noimg.bld-ph { display: block; padding: 0; }
.bld-ph-name { position: absolute; top: 0; left: 0; right: 0; padding: .25rem .35rem; font-size: .56rem; font-weight: 700; line-height: 1.2; background: rgba(0,0,0,.55); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.bld-result { cursor: pointer; }
.bld-result:hover { outline: 2px solid var(--brass); }
/* league deck: non-basic search results can't be hand-added (reward packs only), dim + lock cursor */
.bld-result-locked { opacity: .4; cursor: not-allowed; }
.bld-result-locked:hover { outline: 2px solid var(--danger); }
/* EDHREC recommendations strip below the deck board */
#bld-recs { flex: 0 0 auto; max-height: 46%; overflow-y: auto; border-top: 1px solid var(--line); padding: .5rem .7rem; background: rgba(0,0,0,.18); }
.bld-recs-head { margin: 0 0 .6rem; }
.bld-recs-headrow { display: flex; align-items: baseline; gap: .6rem; }
.bld-recs-title { font-family: "Cinzel", serif; color: var(--brass); font-size: .92rem; font-weight: 700; }
.bld-recs-src { font-size: .72rem; color: var(--ink-dim); text-decoration: none; }
.bld-recs-src:hover { color: var(--brass); text-decoration: underline; }
.bld-recs-note { font-size: .7rem; color: var(--ink-dim); margin-top: .12rem; }
.bld-recs-section { margin-bottom: .7rem; }
.bld-recs-subhead { font-family: "Cinzel", serif; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); opacity: .85; margin: 0 0 .35rem; border-left: 2px solid var(--brass-soft); padding-left: .4rem; }
.bld-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-w), 1fr)); gap: .4rem; }
.bld-rec-pct { position: absolute; bottom: 3px; right: 3px; z-index: 3; background: rgba(0,0,0,.82); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1.35; padding: 0 .3rem; border-radius: 7px; pointer-events: none; }
/* a recommendation already in the deck: green edge highlight, kept in the list (not removed) */
.bld-rec-have { box-shadow: 0 0 0 2px #4fcf72; border-radius: 6px; }
/* view-only recommendation (league deck, or a card already in the deck): no add affordance */
.bld-rec-view { cursor: default; }
.bld-rec-view:hover { outline: none; }
/* league wishlist: a ★ on a favorited search / recommendation card (double-click to toggle) */
.bld-fav { box-shadow: 0 0 0 2px rgba(244, 198, 74, .65); border-radius: 6px; }   /* border matches the star's yellow */
/* owned (in your deck) AND favorited: keep the green ownership ring on top, the ★ badge still marks it as a favorite */
.bld-rec-have.bld-fav { box-shadow: 0 0 0 2px #4fcf72; }
.bld-fav-badge { position: absolute; top: 1px; left: 3px; z-index: 4; color: rgba(244, 198, 74, .65); font-size: 1.5rem; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }

.bld-deckcard { position: relative; width: 100%; cursor: pointer; transition: margin-top .16s ease, transform .16s ease; }
.bld-deckcard:not(:first-child) { margin-top: var(--pool-mt, -125%); }   /* tight overlap: only each card's name strip shows. The draft pool sets --pool-mt so a full column fits without a scrollbar */
.bld-deckcard:hover { z-index: 10; }   /* hover lifts the full card for a quick peek */
/* click-to-read: the open card snaps the next card down to its bottom, revealing it fully IN PLACE instead of a
   pop-up that covers the ~10 cards below; reverts when you open another card or click off (see bldWireOpen). */
.bld-deckcard.open .bld-card { box-shadow: 0 0 0 2px var(--brass), 0 10px 22px rgba(0,0,0,.6); }   /* opened-card cue */
.bld-deckcard.cmdr .bld-card { outline: 2px solid var(--brass); }
/* illegal-in-format: red highlight + a hover popup explaining why */
.bld-deckcard.illegal .bld-card { outline: 2px solid var(--danger); box-shadow: 0 0 11px rgba(199,91,74,.65); }
.bld-illegal-badge { position: absolute; top: 3px; left: 4px; z-index: 3; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; border-radius: 8px; padding: 0 .3rem; line-height: 1.5; }
.illegal-tip { position: absolute; left: 4px; right: 4px; bottom: 30px; z-index: 6; display: none; flex-direction: column; gap: .15rem;
  background: rgba(26,12,12,.96); border: 1px solid var(--danger); border-radius: 7px; padding: .45rem .5rem; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.bld-deckcard:hover .illegal-tip, .bld-deckcard.open .illegal-tip { display: flex; }
.illegal-tip strong { color: #f1b3aa; font-size: .66rem; }
.illegal-tip span { color: #e8d2cf; font-size: .62rem; line-height: 1.35; }
.bld-qty { position: absolute; top: 3px; right: 4px; z-index: 3; background: rgba(0,0,0,.8); color: var(--ink); font-size: .64rem; font-weight: 700; border-radius: 8px; padding: 0 .3rem; border: 1px solid var(--brass-soft); }
.bld-ctrls { position: absolute; left: 0; right: 0; bottom: 0; display: none; justify-content: center; gap: 2px; padding: 3px; background: linear-gradient(transparent, rgba(0,0,0,.85)); z-index: 3; }
.bld-deckcard:hover .bld-ctrls, .bld-deckcard.open .bld-ctrls { display: flex; }
.bld-ctrls button { width: 22px; height: 22px; border-radius: 5px; background: rgba(20,32,27,.92); border: 1px solid var(--brass-soft); color: var(--ink); font-size: .8rem; line-height: 1; display: grid; place-items: center; }
.bld-ctrls button:hover { background: var(--brass); color: #15171a; }
.bld-ctrls button.ctrl-txt { width: auto; min-width: 22px; padding: 0 5px; font-size: .64rem; font-weight: 700; }   /* SB / MB text buttons */
.draft-poolcard .bld-ctrls { flex-wrap: wrap; }   /* let the move/split/combine buttons wrap if the card is narrow */

/* ---- guided tours (deck builder + draft) ---- */
.tour-overlay { position: fixed; inset: 0; z-index: 4000; }                      /* click-blocker; the spotlight ring supplies the dim */
.tour-overlay.dim { background: rgba(12,13,15,.66); }                            /* backdrop for the closing card */
.tour-ring { position: fixed; z-index: 4001; border: 2px solid var(--brass); border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(12,13,15,.66), 0 0 18px 3px rgba(208,211,215,.35);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.tour-pop { position: fixed; z-index: 4002; width: min(320px, 92vw); background: var(--felt-2); border: 1px solid var(--brass-soft);
  border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: .85rem .95rem; color: var(--ink); }
.tour-pop h4 { margin: 0 0 .35rem; font-size: 1rem; color: var(--brass); }
.tour-pop p { margin: 0 0 .75rem; font-size: .85rem; line-height: 1.45; color: var(--ink-dim); }
.tour-pop-row { display: flex; align-items: center; gap: .4rem; }
.tour-pop-row .tour-step-count { margin-right: auto; font-size: .74rem; color: var(--ink-dim); }
.tour-pop-row .btn { padding: .3rem .65rem; font-size: .8rem; }
.tour-final { position: fixed; inset: 0; z-index: 4002; display: grid; place-items: center; padding: 1rem; }
.tour-final-box { width: min(370px, 94vw); background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 14px;
  box-shadow: 0 18px 54px rgba(0,0,0,.6); padding: 1.4rem 1.5rem; text-align: center; color: var(--ink); }
.tour-final-box .tour-final-emoji { font-size: 2rem; }
.tour-final-box h3 { margin: .3rem 0 .5rem; color: var(--brass); }
.tour-final-box p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--ink-dim); }
.tour-final-check { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .85rem; color: var(--ink); margin-bottom: 1.1rem; cursor: pointer; }
.tour-final-check input { width: 16px; height: 16px; accent-color: var(--brass); cursor: pointer; }
.tour-final-box > .btn { min-width: 120px; }
/* league recycle (♻) armed state, first click "punches" it red (click again to confirm the trade-in) */
@keyframes bld-trade-punch { 0% { transform: scale(.7); } 45% { transform: scale(1.5); } 72% { transform: scale(.88); } 100% { transform: scale(1.18); } }
.bld-ctrls button.bld-trade-arm, .bld-ctrls button.bld-trade-arm:hover {
  background: var(--danger); border-color: var(--danger); color: #fff;
  transform: scale(1.18); animation: bld-trade-punch .3s ease-out;
}
.bld-empty { color: var(--ink-dim); padding: 1.5rem; max-width: 360px; }

/* Deck builder (both regular & league): the deck board + Recommended share ONE continuous vertical scroll
   with no visible scrollbar, you keep scrolling down from your deck straight into the recommendations. The
   deck keeps its STACKED columns; they grow to full height instead of each scrolling on their own. */
#bld-main #bld-boardwrap { overflow-y: auto; scrollbar-width: none; }      /* the single vertical scroller, hidden bar */
#bld-main #bld-boardwrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* pack the piles with CSS multi-column: tall sections take their own column and small groups stack together
   to fill the gaps, instead of each pile reserving a full-height slot in a wrapping row. */
#bld-main #bld-board { display: block; flex: 0 0 auto; min-height: 0; columns: var(--col-w); column-gap: .4rem; overflow-x: hidden; }
#bld-main .bld-col { max-height: none; break-inside: avoid; margin: 0 0 .9rem; }   /* a whole pile stays in one column */
#bld-main .bld-col-head { position: static; background: transparent; }             /* sticky is unreliable inside multicol */
#bld-main .bld-col-cont .bld-col-head { color: var(--ink-dim); }                   /* a continuation pile of the same section */
/* opening a card reveals its full art in place by sliding the cards below it down with a TRANSFORM
   (visual only, never layout), so the balanced multicolumn never reflows and the columns never shift.
   Each stack reserves one card length of room at the bottom for that slide. The open card keeps a high
   z-index so it stays on top while the rest slide. */
#bld-main .bld-stack { overflow-y: visible; padding-bottom: 140%; }   /* ~one card length of slide room (card height = 139% of stack width) */
#bld-main .bld-deckcard.open { z-index: 12; }
#bld-main .bld-deckcard.open ~ .bld-deckcard { transform: translateY(90%); }   /* slide the rest down ~one card height to reveal the open card; visual, so no reflow / column shift */
#bld-main #bld-recs { flex: 0 0 auto; max-height: none; overflow: visible; }   /* flows under the board in the same scroll */

#bld-stats { border-left: 1px solid var(--line); overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: 1rem; }
.bld-stat h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); margin-bottom: .45rem; }
.bld-curve { display: flex; align-items: flex-end; gap: .25rem; height: 96px; }
.bld-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 3px; }
.bld-bar { width: 100%; min-height: 2px; background: linear-gradient(var(--brass), var(--brass-soft)); border-radius: 3px 3px 0 0; position: relative; display: flex; justify-content: center; }
.bld-bar-n { position: absolute; top: -14px; font-size: .62rem; color: var(--ink-dim); }
.bld-bar-x { font-size: .6rem; color: var(--ink-dim); }
.bld-colors { display: flex; flex-wrap: wrap; gap: .35rem; }
.bld-pip { font-size: .72rem; font-weight: 700; border-radius: 12px; padding: .1rem .5rem; border: 1px solid rgba(0,0,0,.4); }
.pip-W { background: #efe8c9; color: #3b3520; } .pip-U { background: #4f8fc0; color: #07151f; }
.pip-B { background: #5b5168; color: #efe6f5; } .pip-R { background: #c75b4a; color: #2a0f0a; }
.pip-G { background: #5e9c6e; color: #07150d; } .pip-C { background: #a8a8a8; color: #222; }

/* league "Favorites by set": your wishlist grouped into collapsible set rows in the stats panel */
.bld-favset-head { width: 100%; display: flex; align-items: center; gap: .4rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .45rem; margin-bottom: 3px; cursor: pointer; color: var(--ink); font-size: .78rem; text-align: left; }
.bld-favset-head:hover, .bld-favset-head.open { border-color: var(--brass-soft); }
.bld-favset-head.open { background: var(--felt-3); }
.bld-favset-tog { color: var(--ink-dim); width: .9em; flex: 0 0 auto; }
.bld-favset-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-favset-n { flex: 0 0 auto; background: rgba(0,0,0,.35); border: 1px solid var(--brass-soft); color: var(--brass); font-weight: 700; border-radius: 10px; padding: 0 .4rem; font-size: .68rem; }
.bld-favset-cards { display: flex; flex-direction: column; gap: 2px; margin: 0 0 7px .35rem; padding-left: .45rem; border-left: 1px solid var(--line); }
.bld-favcard { display: flex; align-items: center; gap: .4rem; font-size: .76rem; padding: .12rem 0; cursor: pointer; }
.bld-favcard:hover { color: var(--brass); }
.bld-favcard-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-favloading { font-style: italic; opacity: .8; }
.bld-rar { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: #15171a; }
.bld-rar-common { background: #b8b8b8; }
.bld-rar-uncommon { background: #aebfc9; }
.bld-rar-rare { background: #e3c45a; }
.bld-rar-mythic { background: #e0712b; color: #fff; }
.bld-rar-special, .bld-rar-bonus { background: #b06fb0; color: #fff; }
.bld-types { display: flex; flex-direction: column; gap: .2rem; }
.bld-type-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-dim); }
.bld-type-n { color: var(--ink); font-weight: 600; }
.bld-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.bld-fig { background: var(--felt-2); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .2rem; text-align: center; }
.bld-fig-n { display: block; font-family: "Cinzel", serif; font-size: 1.05rem; color: var(--ink); line-height: 1.1; }
.bld-fig-l { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); margin-top: .15rem; }
.bld-strat { display: flex; flex-direction: column; gap: .3rem; }
.bld-strat-row { display: grid; grid-template-columns: 5.2rem 1fr 1.5rem; align-items: center; gap: .4rem; }
.bld-strat-lab { font-size: .72rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-strat-track { height: 8px; background: var(--felt-3); border-radius: 5px; overflow: hidden; }
.bld-strat-fill { height: 100%; min-width: 3px; background: linear-gradient(90deg, var(--brass-soft), var(--brass)); border-radius: 5px; }
.bld-strat-n { font-size: .72rem; color: var(--ink); font-weight: 600; text-align: right; }
.bld-guide { margin-top: .6rem; display: flex; flex-direction: column; gap: .25rem; }
.bld-guide p { font-size: .68rem; line-height: 1.35; color: var(--brass); }

#bld-preview { position: fixed; z-index: 110; width: 450px; aspect-ratio: 488/680; pointer-events: none; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.7); }   /* above modals (e.g. the reward-pack popup) so the hover preview is never hidden behind it */
#bld-preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  #bld-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #bld-search { border-right: none; border-bottom: 1px solid var(--line); max-height: 32vh; }
  #bld-stats { display: none; }
  #bld-preview { display: none !important; }
}

/* ============ draft ============ */
#draft { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% -10%, #20242a, var(--felt) 60%); overflow: hidden; }
#draft-home { overflow-y: auto; padding: 0 1rem 2rem; max-width: 720px; margin: 0 auto; width: 100%; }
#draft-home-top { display: flex; align-items: center; gap: 1rem; padding: .7rem .2rem; }
#draft-home .field { display: block; max-width: 320px; margin: .5rem 0 1.2rem; }
.draft-modes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
@media (max-width: 720px) { .draft-modes { grid-template-columns: 1fr; } }
.draft-modecard { display: flex; flex-direction: column; gap: .35rem; text-align: left; align-items: flex-start; padding: 1rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 12px; }
button.draft-modecard:hover { border-color: var(--brass); }
.dm-title { font-family: "Cinzel", serif; font-size: 1rem; color: var(--brass); }
.dm-sub { font-size: .8rem; color: var(--ink-dim); }
.draft-modejoin { gap: .6rem; }
.draft-host-bar { font-family: "Cinzel", serif; color: var(--brass); letter-spacing: .04em; }
#draft-setup { overflow-y: auto; padding: 0 1rem 2rem; }
#draft-setup-top { display: flex; align-items: center; gap: 1rem; padding: .7rem .2rem; position: sticky; top: 0; background: var(--felt); z-index: 2; border-bottom: 1px solid var(--line); }
.draft-title { flex: 1; font-family: "Cinzel", serif; }
#draft-start-status { padding: 0 .2rem; min-height: 1.1rem; }
.draft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1100px; margin: .8rem auto 0; }
@media (max-width: 820px) { .draft-cols { grid-template-columns: 1fr; } }
.draft-group { margin-bottom: 1.3rem; }
.draft-grouphead { font-family: "Cinzel", serif; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin-bottom: .5rem; }
.draft-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .22rem 0; }
.draft-label { color: var(--ink-dim); font-size: .86rem; }
.draft-rowhint { font-size: .68rem; color: var(--brass-soft); }
.draft-num { width: 58px; }
.draft-num, .draft-text, .draft-sel, .draft-cube { background: var(--felt); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: .3rem .5rem; }
.draft-text { width: 100%; min-width: 140px; }
.draft-cube { width: 100%; resize: vertical; font: inherit; }
.draft-subgroup { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; margin: .4rem 0; background: rgba(0,0,0,.18); }
.draft-subgroup.draft-disabled { opacity: .45; } /* booster-content box, locked until "Restrict booster packs" is on */
.draft-subgroup.draft-disabled input { pointer-events: none; }
.draft-subhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: .2rem; }
.draft-source-toggle { display: flex; gap: .4rem; }
.draft-source-toggle .btn.on { background: var(--brass); color: #15171a; }
.draft-history { max-width: 1100px; margin: 1.5rem auto 0; }
.draft-hist-item { display: flex; gap: 1rem; align-items: center; width: 100%; text-align: left; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .4rem; background: var(--felt-2); }
.draft-hist-item:hover { border-color: var(--brass-soft); }
.dh-set { font-weight: 700; color: var(--brass); min-width: 64px; }
.dh-when { color: var(--ink-dim); font-size: .8rem; flex: 1; }
.dh-n { color: var(--ink-dim); font-size: .8rem; }

.draft-join-wrap { display: flex; gap: .4rem; }
.draft-join-wrap input { width: 80px; }
.draft-setsearch { position: relative; }
.draft-setmenu { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 7px; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 24px rgba(0,0,0,.55); }
.draft-setitem { padding: .35rem .55rem; cursor: pointer; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-setitem:hover { background: var(--brass); color: #15171a; }
.ll-controls .draft-setsearch { flex: 1 1 220px; }   /* the themed set dropdown fills the lobby row like the old input did */
.ll-controls .draft-setsearch .draft-text { width: 100%; box-sizing: border-box; }
#draft-wait { display: flex; flex-direction: column; padding: 0 1rem 2rem; max-width: 600px; margin: 0 auto; width: 100%; }
#draft-wait-top { display: flex; align-items: center; gap: 1rem; padding: .7rem .2rem; }
#draft-wait-code { color: var(--brass); letter-spacing: .15em; }
.draft-wait-hint { color: var(--ink-dim); margin: .3rem 0 1rem; }
.draft-wait-players { display: flex; flex-direction: column; gap: .4rem; }
.draft-wait-row { display: flex; justify-content: space-between; padding: .55rem .8rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 8px; }
.draft-wait-host { color: var(--brass); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
#draft-play { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
#draft-play.draft-done #draft-pack { display: none; }                 /* free the pack area so the pool fills the view once the draft ends */
#draft-play.draft-done #draft-main { padding-right: 268px; }          /* reserve room on the right for the done card */
.draft-done-info { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 240px; background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.5); padding: 1rem 1.1rem; z-index: 6; }
.draft-done-info h3 { margin: 0 0 .4rem; color: var(--brass); font-size: 1rem; }
.draft-done-info p { margin: 0; color: var(--ink-dim); font-size: .85rem; line-height: 1.45; }
@media (max-width: 640px) { #draft-play.draft-done #draft-main { padding-right: .8rem; } .draft-done-info { position: static; transform: none; width: auto; margin: .4rem .8rem; } }
/* seat order + which way packs are being passed, pinned at the top of every live draft */
.draft-order { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .35rem .8rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25); font-size: .8rem; }
.draft-order-lbl { color: var(--ink-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.draft-order-seats { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.draft-seat { padding: .12rem .5rem; border-radius: 999px; background: var(--felt-3); border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.draft-seat.you { color: var(--ink); border-color: var(--brass-soft); background: var(--felt-2); font-weight: 600; }
.draft-order-arrow { color: var(--brass-soft); }
.draft-pass { margin-left: auto; color: var(--ink-dim); font-size: .74rem; white-space: nowrap; }
#draft-play-top { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.3); flex: 0 0 auto; }
#draft-progress { font-family: "Cinzel", serif; color: var(--brass); }
.draft-timer { color: var(--danger); font-weight: 700; }
.draft-spacer { flex: 1; }
.draft-groupby-lbl { font-size: .76rem; color: var(--ink-dim); display: flex; align-items: center; gap: .35rem; }
#draft-pack { flex: 0 0 46%; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-w), 1fr)); gap: .5rem; padding: .7rem; border-bottom: 2px solid var(--line); align-content: end; }   /* reserve a full pack's height; cards + the confirm bar sit at the bottom so the button stays put and a shrinking pack drops down to it */
.draft-pick { cursor: pointer; border-radius: 7px; overflow: hidden; transition: transform .1s; }
.draft-pick:hover { transform: translateY(-4px); outline: 2px solid var(--brass); }
.draft-pick.suggested { outline: 2px dashed var(--brass-soft); }
.draft-pick.sel { outline: 3px solid var(--brass); transform: translateY(-6px); box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.draft-confirm-bar { flex-basis: 100%; grid-column: 1 / -1; display: flex; justify-content: center; padding: .6rem 0 .2rem; }
.draft-confirm-bar .btn { font-size: 1rem; padding: .6rem 1.4rem; }
.draft-pick.foil, .draft-poolcard.foil .bld-card { box-shadow: 0 0 0 2px #b9f, 0 0 10px rgba(150,120,255,.6); }

#draft-deck { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#draft-deck-bar { display: flex; gap: 1rem; align-items: baseline; padding: .35rem .8rem; color: var(--ink-dim); font-size: .8rem; }
.draft-deck-label { color: var(--ink); font-weight: 600; }
#draft-main { flex: 1; min-height: 0; display: flex; gap: .7rem; overflow-x: auto; padding: .3rem .8rem; align-items: flex-start; }
/* sideboard + maybeboard now live as their own columns inside #draft-main (the bottom strips are gone) */
#draft-main .bld-board-col .bld-stack { min-height: calc(var(--card-w) * 0.7); }   /* keep an empty side/maybe column a usable drop target */
/* drafts: hide scrollbars (scrolling still works) */
#draft-pack, #draft-main, #draft-main .bld-stack { scrollbar-width: none; }
#draft-pack::-webkit-scrollbar, #draft-main::-webkit-scrollbar, #draft-main .bld-stack::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* a thin white line between pool sections, but not between a section and its wrapped continuation column */
#draft-main .bld-col:not(:first-child):not(.bld-col-cont) { border-left: 1px solid rgba(255,255,255,.28); padding-left: .55rem; }
#draft-main .bld-stack { padding-bottom: 8px; }   /* the draft pool fits its cards without scrolling, so it does not need the big bottom gap */
#draft-side-wrap { flex: 0 0 auto; border-top: 1px solid var(--line); background: rgba(0,0,0,.25); padding: .3rem .8rem .5rem; }
.draft-side-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); margin-bottom: .25rem; }
#draft-side { display: flex; gap: .35rem; overflow-x: auto; min-height: calc(var(--card-w) * 0.62); align-items: flex-start; }
#draft-side .draft-poolcard { flex: 0 0 76px; }
#draft-side:empty::before { content: "drop cards here"; color: var(--ink-dim); font-size: .76rem; opacity: .6; }
#draft-maybe-wrap { flex: 0 0 auto; border-top: 1px solid var(--line); background: rgba(0,0,0,.25); padding: .3rem .8rem .5rem; }
#draft-maybe { display: flex; gap: .35rem; overflow-x: auto; min-height: calc(var(--card-w) * 0.62); align-items: flex-start; }
#draft-maybe .draft-poolcard { flex: 0 0 76px; }
#draft-maybe:empty::before { content: "drop cards here"; color: var(--ink-dim); font-size: .76rem; opacity: .6; }
.draft-poolcard { cursor: pointer; }
.draft-poolcard.dragging { opacity: .4; }

.draft-log { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 80vw); background: #101a15; border-left: 1px solid var(--line); padding: .6rem .8rem; overflow-y: auto; z-index: 5; font-size: .8rem; }
.draft-logline { padding: .12rem 0; color: var(--ink-dim); border-bottom: 1px solid rgba(255,255,255,.04); }

.draft-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.66); display: grid; place-items: center; padding: 2rem; }
.draft-modal-box { width: min(900px, 94vw); max-height: 86vh; overflow-y: auto; background: var(--felt-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.draft-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; color: var(--brass); }

/* ============ settings: sleeves & playmat ============ */
.set-modal { width: min(540px, 94vw); }
/* settings as its own page with Game / Friends / Account tabs (the in-game gear stays a modal) */
#settings-top { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); }
.set-tabs { display: flex; gap: .35rem; max-width: 760px; margin: 1.1rem auto 0; padding: 0 1.2rem; }
.set-tab-btn { background: var(--felt); border: 1px solid var(--line); color: var(--ink-dim); padding: .5rem 1.15rem; border-radius: 9px 9px 0 0; font-weight: 600; font-size: .92rem; cursor: pointer; margin-bottom: -1px; }
.set-tab-btn:hover { color: var(--ink); border-color: var(--brass-soft); }
.set-tab-btn.on { background: var(--felt-2); border-color: var(--brass-soft); border-bottom-color: var(--felt-2); color: var(--brass); }
.set-page-body { max-width: 760px; margin: 0 auto; padding: 1.3rem 1.4rem 2.5rem; background: var(--felt-2); border: 1px solid var(--brass-soft); border-radius: 0 12px 12px 12px; }
.set-tab-panel[hidden] { display: none; }
.set-friends-body { margin-top: .7rem; }
/* expandable friend cards in the Friends tab (click to see their decks + recent games) */
.fr-profile { border: 1px solid var(--line); border-radius: 9px; margin-bottom: .5rem; overflow: hidden; background: var(--felt); }
.fr-profile-head { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; background: transparent; border: none; color: var(--ink); cursor: pointer; text-align: left; font-size: .92rem; }
.fr-profile-head:hover { background: rgba(255,255,255,.05); }
.fr-profile-head .friend-name { flex: 1; }
.fr-profile-caret { color: var(--ink-dim); font-size: .8rem; }
.fr-profile-detail { padding: .1rem .7rem .6rem; border-top: 1px solid var(--line); }
.fr-profile-detail[hidden] { display: none; }
/* the table join code, pinned at the very top of Settings */
.set-tablecode { display: flex; align-items: center; gap: .5rem; cursor: pointer; margin: 0 0 .9rem; padding: .45rem .7rem; background: var(--felt-3); border: 1px solid var(--brass-soft); border-radius: 9px; }
.set-tablecode:hover { border-color: var(--brass); }
.set-tablecode-k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.set-tablecode strong { font-family: "Cinzel", serif; letter-spacing: .14em; color: var(--brass); font-size: 1.15rem; }
.set-prevpos { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.set-keybinds { display: flex; flex-direction: column; gap: .4rem; margin-top: .35rem; }
.set-kb-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.set-kb-label { color: var(--ink-dim); font-size: .85rem; }
.set-kb-key { min-width: 4.5em; text-align: center; font-family: ui-monospace, "Cascadia Code", monospace; }
.set-kb-key.listening { border-color: var(--brass); color: var(--brass); }
.set-h { font-family: "Cinzel", serif; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin: 1rem 0 .5rem; }
.set-grid { display: flex; gap: 1rem; align-items: center; }
.set-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; flex: 1; }
.set-swatch { height: 42px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; }
.set-swatch.on { outline: 3px solid var(--brass); outline-offset: 1px; }
.set-trimrow { display: flex; gap: .6rem; }
.set-trimsw { width: 52px; height: 36px; }
.set-cardpreview { width: 84px; aspect-ratio: 488/680; border-radius: 8px; border: 2px solid #51400f; flex: 0 0 auto; }
.set-matpreview { width: 120px; height: 76px; border-radius: 8px; border: 1px solid var(--line); flex: 0 0 auto; }
.set-modal .modal-input { margin-top: .55rem; }
.set-saved { margin-top: .7rem; }
.set-saved-head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--ink-dim); margin-bottom: .4rem; }
.set-saved-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.set-saved-cell { position: relative; }
.set-saved-thumb { width: 96px; height: 60px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; background-size: cover; background-position: center; }
.set-saved-thumb.set-saved-sleeve { width: 60px; height: 84px; } /* sleeves are portrait, card-shaped */
.set-upsell { color: var(--brass); border-color: var(--brass-soft); } /* "patrons save 10" nudge at the free limit */
.set-saved-cell.on .set-saved-thumb { border-color: var(--brass); outline: 2px solid var(--brass); }
.set-saved-del { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--felt); border: 1px solid var(--brass-soft); color: var(--ink); font-size: .7rem; line-height: 1; display: grid; place-items: center; }
.set-saved-del:hover { background: var(--danger); color: #fff; }

/* ============ double-faced cards ============ */
.dfc-badge {
  position: absolute; bottom: 4px; left: 4px; z-index: 3;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(20,32,27,.92); border: 1px solid var(--brass); color: var(--brass);
  font-size: .72rem; line-height: 16px; text-align: center; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.bld-card .dfc-badge { width: 16px; height: 16px; font-size: .64rem; line-height: 14px; }
/* a single token card can stand in for many copies: a permanent xN count, bottom-left */
.token-copies { position: absolute; bottom: 4px; left: 4px; z-index: 5; pointer-events: none;
  background: rgba(12,14,18,.95); border: 1px solid var(--brass); border-radius: 8px;
  color: var(--brass); font-weight: 700; line-height: 1; font-size: .92rem; padding: 3px 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.token-copies.editable { pointer-events: auto; cursor: pointer; }
.token-copies.editable:hover { background: rgba(22,26,32,.98); color: #ffe9a8; border-color: #ffe9a8; }
.card.small .token-copies { font-size: .66rem; padding: 2px 4px; border-radius: 6px; }
.flip-pop { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.78); display: grid; place-items: center; padding: 2rem; cursor: zoom-out; }
.flip-pop-inner { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.flip-face { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.flip-face img { width: min(320px, 38vw); aspect-ratio: 488/680; border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.7); }
.flip-face-label { font-family: "Cinzel", serif; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
/* in-game transform: the card flips over to its other face */
@keyframes cardFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg) scale(1.04); }
  100% { transform: rotateY(0deg); }
}
.card.card-flip { animation: cardFlip .4s ease-in-out; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .card.card-flip { animation: none; } }

/* ============ leagues ============ */
#league { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% -10%, #20242a, var(--felt) 60%); overflow-y: auto; }
#league-top { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; position: sticky; top: 0; background: var(--felt); border-bottom: 1px solid var(--line); z-index: 2; }
#league-list-view, #league-detail-view { max-width: 820px; margin: 0 auto; width: 100%; padding: 1rem; }
.league-actions { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.league-actions .field { margin: 0; }
.league-actions .field.grow { flex: 1; min-width: 180px; }
.league-actions input { background: var(--felt); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: .5rem .7rem; }
.league-actions #league-join-code { width: 90px; }
.league-h { font-family: "Cinzel", serif; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin: 1rem 0 .6rem; }
#league-list { display: flex; flex-direction: column; gap: .5rem; }
.league-card { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; text-align: left; padding: .7rem .9rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 10px; }
.league-card:hover { border-color: var(--brass); }
.lc-name { font-weight: 700; }
.lc-meta { font-size: .78rem; color: var(--ink-dim); }
.league-name { font-family: "Cinzel", serif; margin-top: .6rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.league-code { color: var(--ink-dim); font-size: .85rem; margin: .2rem 0 .4rem; }
.league-block { margin-top: 1rem; }
.league-toggle { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; font-size: .9rem; line-height: 1.4; color: var(--ink); }
.league-toggle input { margin-top: .15rem; width: 16px; height: 16px; accent-color: var(--brass); cursor: pointer; flex: 0 0 auto; }
.league-reset-warn { background: rgba(199,160,90,.13); border: 1px solid rgba(199,160,90,.5); border-left: 3px solid #c7a05a; border-radius: 8px; padding: .55rem .85rem; margin: .2rem 0 1rem; color: var(--ink); font-size: .86rem; line-height: 1.45; }
.league-reset-warn strong { color: #d9b876; }
/* league search results */
#league-search-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.2rem; }
.league-result { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 10px; }
.league-result.clickable { cursor: pointer; }
/* league discovery: filter + sort bar */
.lsf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin: -.4rem 0 .7rem; }
.lsf-label { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 700; }
.lsf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lsf-opt { background: var(--felt); border: none; border-right: 1px solid var(--line); color: var(--ink-dim); padding: .3rem .7rem; cursor: pointer; font-size: .82rem; }
.lsf-opt:last-child { border-right: none; }
.lsf-opt:hover { color: var(--ink); }
.lsf-opt.on { background: var(--felt-3); color: var(--brass); font-weight: 600; }
.lsf-check { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-dim); cursor: pointer; font-size: .82rem; }
.lsf-check input { accent-color: var(--brass); cursor: pointer; }
.lsf-count { color: var(--ink-dim); font-size: .76rem; margin: 0 0 .45rem; }
.league-result.clickable:hover { border-color: var(--brass); }
.lr-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.lr-name { font-weight: 700; }
.lr-meta { font-size: .76rem; color: var(--ink-dim); }
.lr-right { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.lr-in { color: var(--brass); font-size: .8rem; font-weight: 700; }
/* visibility badges (search + detail header) */
.lv-badge { font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.lv-badge.lv-open { color: #9fd6a8; border-color: #5e9c6e; }
.lv-badge.lv-invite { color: #e7d2a8; border-color: var(--brass-soft); }
.lv-badge.lv-friends { color: #a8d0ec; border-color: #4f8fc0; }
.lv-badge.lv-closed { color: var(--ink-dim); border-color: var(--line); }
.lv-badge.lv-discord { color: #c2c8ff; border-color: #5865F2; }
.btn.discord-join { background: #5865F2; border-color: #5865F2; color: #fff; }
.btn.discord-join:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.set-discord { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.set-discord-on { color: #c2c8ff; font-weight: 600; }
.ag-links { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; margin-top: .2rem; }
.set-changepw { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.set-changepw .modal-input { width: 100%; box-sizing: border-box; }
.set-changepw .btn { align-self: flex-start; }
/* owner's who-can-join segmented control */
.lvis-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.lvis-opt { padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: var(--felt-2); color: var(--ink-dim); font-size: .85rem; cursor: pointer; }
.lvis-opt:hover { border-color: var(--brass-soft); color: var(--ink); }
.lvis-opt.on { background: var(--brass); color: #15171a; border-color: var(--brass); font-weight: 700; }
/* a live draft for this league, surfaced on the league page so members can jump in (#20) */
.league-draft-live { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; padding: .75rem 1rem;
  background: color-mix(in srgb, var(--brass) 14%, var(--felt-2)); border: 1px solid var(--brass); border-radius: 10px; }
.league-draft-live .ldl-text { flex: 1 1 240px; font-weight: 600; }
.league-members { display: flex; flex-wrap: wrap; gap: .4rem; }
.league-member { background: var(--felt-2); border: 1px solid var(--line); border-radius: 14px; padding: .25rem .7rem; font-size: .85rem; }
.league-standings { display: flex; flex-direction: column; gap: 2px; }
.ls-controls { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.ls-search { flex: 1 1 200px; min-width: 0; }
.ls-sort { flex: 0 0 auto; }
.ls-body { display: flex; flex-direction: column; }
.ls-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .6rem; }
.ls-pageinfo { font-size: .8rem; color: var(--ink-dim); }
.ls-empty { padding: .7rem .6rem; color: var(--ink-dim); font-size: .85rem; text-align: center; }
.ls-row { display: grid; grid-template-columns: 2ch 1fr 1fr 6ch 4ch 5ch; gap: .5rem; align-items: center; padding: .4rem .6rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 7px; font-size: .85rem; }
.ls-head { background: transparent; border: none; color: var(--ink-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ls-deck { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-bracket { color: var(--brass); font-weight: 700; }
.ls-pts { font-family: "Cinzel", serif; font-weight: 700; }
#league-detail .btn.brass { margin-top: 1.2rem; }

/* league draft: set lobby */
/* fill the fixed #draft column and let the body scroll, so a tall commander pool is reachable (header stays put) */
#draft-league { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 1rem; }
#draft-league-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .9rem; width: 100%; max-width: 820px; margin: 0 auto; padding: .7rem 0 1.4rem; }
.league-lobby { display: flex; flex-direction: column; gap: 4px; }
.ll-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: center; padding: .5rem .7rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 8px; }
.ll-row.ll-me { border-color: var(--brass); }
.ll-name { font-weight: 600; }
.ll-set { color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-lock { font-size: .8rem; color: var(--ink-dim); text-align: right; }
.ll-lock.on { color: var(--brass); font-weight: 700; }
.ll-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem; background: var(--felt-2); border: 1px solid var(--line); border-radius: 8px; }
.ll-controls .draft-text { flex: 1 1 220px; }
.ll-controls .draft-sel { flex: 1 1 220px; }
.ll-host-settings { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.18); }
.ll-host-summary { cursor: pointer; padding: .55rem .7rem; font-weight: 600; font-size: .85rem; color: var(--ink-dim); }
.ll-host-summary:hover { color: var(--ink); }
.ll-host-inner { padding: .1rem .7rem .6rem; }
/* match-lobby turn-order rows (rank · name · d20) */
.ll-rank { font-weight: 700; color: var(--brass); }
.ll-roll { font-weight: 700; text-align: right; white-space: nowrap; }

/* league draft: commander ban & pick */
.lc-order { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lc-order-lbl { color: var(--ink-dim); font-size: .85rem; }
.lc-seat { background: var(--felt-2); border: 1px solid var(--line); border-radius: 14px; padding: .2rem .7rem; font-size: .85rem; }
.lc-banner { padding: .55rem .8rem; border-radius: 8px; background: var(--felt-2); border: 1px solid var(--line); font-weight: 600; }
.lc-banner.lc-mine { border-color: var(--brass); color: var(--brass); }
.lc-summary { display: flex; flex-wrap: wrap; gap: .6rem; }
.lc-mem { flex: 1 1 160px; background: var(--felt-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.lc-mem-name { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.lc-mem-cmdr { font-size: .82rem; color: var(--brass); }
.lc-mem-empty { font-size: .8rem; color: var(--ink-dim); font-style: italic; }
.lc-bans { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; }
.lc-bans-lbl { color: var(--danger); font-weight: 700; }
/* grid (not flex) so each .bld-card is constrained to a cell, otherwise width:100% makes one giant card */
.lc-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.lc-pool-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .6rem 0; }
.lc-pool-pageno { font-size: .85rem; color: var(--ink-dim); }
.lc-pool-dim { opacity: .55; }
/* the shared confirm bar's flex-basis:100% is for the row-based pack view; in the column-flex commander
   body that would stretch its height, so pin it to its content (#E preview / select-then-confirm). */
#draft-league-body .draft-confirm-bar { flex: 0 0 auto; }

/* league draft: deck build */
#draft-league-build { background: var(--felt-2); border: 1px solid var(--brass); border-radius: 10px; padding: .8rem 1rem; margin: .6rem 0; display: flex; flex-direction: column; gap: .6rem; }
.lb-h { margin: 0; font-size: 1rem; }
.lb-cmdrs, .lb-third, .lb-namerow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lb-lbl { color: var(--ink-dim); font-size: .85rem; min-width: 6.5rem; }
.lb-cmdr-chip { background: var(--felt); border: 1px solid var(--line); border-radius: 14px; padding: .2rem .7rem; font-size: .85rem; color: var(--brass); }
.lb-namerow .draft-text { flex: 1 1 240px; }

/* play a league game */
.lg-game-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.lg-game-row .draft-sel { flex: 1 1 200px; }
.lg-code { width: 6rem; text-transform: uppercase; }

/* clickable standings rows + reward-pack column */
.ls-row.ls-click { cursor: pointer; }
.ls-row.ls-click:hover { border-color: var(--brass); }
/* owner view: a trailing delete column */
.ls-owner .ls-row { grid-template-columns: 2ch 1fr 1fr 6ch 4.6rem 4.6rem 1.6rem; }   /* wider Pts/Packs for the inline editors */
.ls-edit-num { width: 100%; min-width: 0; background: var(--felt-3); border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: inherit; font-size: .82rem; padding: .12rem .3rem; }
.ls-edit-num:focus { border-color: var(--brass); outline: none; background: var(--felt); }
.ls-del { background: none; border: none; cursor: pointer; color: var(--ink-dim); font-size: .9rem; line-height: 1; padding: 0; justify-self: center; }
.ls-del:hover { color: var(--danger); }
.ls-packs.has { color: var(--brass); font-weight: 700; }

/* legacy deck banner in the builder */
#bld-legacy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .8rem; background: var(--felt-2); border-bottom: 1px solid var(--brass); }
.bldl-tag { font-weight: 700; color: var(--brass); }
.bldl-packs { color: var(--ink-dim); font-size: .9rem; }
.bldl-packs.has { color: var(--brass); font-weight: 700; }
.bldl-count { font-weight: 700; font-size: .9rem; background: var(--felt-3); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; }
.bldl-count.full { border-color: var(--brass); color: var(--brass); }
.bldl-count.over { border-color: var(--danger); color: var(--danger); }
.bldl-note { color: var(--ink-dim); font-style: italic; font-size: .9rem; }
.bldl-help { color: var(--ink-dim); cursor: help; font-size: 1.05rem; line-height: 1; }
.bldl-help:hover { color: var(--brass); }
.bld-deckcard.locked { outline: 1px solid var(--brass); }
.bld-locked { font-size: .72rem; color: var(--brass); padding: .15rem .3rem; }

/* reward-pack opener */
.rp-wrap { display: flex; flex-direction: column; gap: .7rem; min-width: min(82vw, 720px); }
.rp-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rp-pick .draft-text { flex: 1 1 220px; }
/* all 15 cards visible at once: a tidy 5-wide grid of small cards (no scroll), not giant + scrolling */
.rp-pack { display: grid; grid-template-columns: repeat(5, minmax(0, 112px)); gap: .45rem; justify-content: center; }
.rp-card { width: 100%; cursor: pointer; opacity: .35; transition: opacity .12s, outline-color .12s; outline: 2px solid transparent; border-radius: 6px; }
.rp-card.on { opacity: 1; outline-color: var(--brass); }
.rp-counter { margin: 0; font-weight: 600; }
.rp-counter.err { color: var(--danger); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: .3rem; }
/* reward-pack countdown + over-limit warning */
.rp-timer { text-align: center; font-size: .82rem; color: var(--ink-dim); background: var(--felt-3); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .5rem; }
.rp-timer.urgent { color: #f0b3aa; border-color: var(--danger); font-weight: 700; }
.rp-warn { gap: .4rem; }
.rp-warn-title { font-family: "Cinzel", serif; color: var(--danger); font-size: 1.1rem; }
@media (max-width: 560px) { .rp-pack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* responsive / touch */
#btn-side { display: none; }

@media (max-width: 900px) {
  :root { font-size: 14px; } /* card sizes now come from the fluid clamp() in :root */
  #topbar { gap: .5rem; padding: .35rem .55rem; overflow-x: auto; scrollbar-width: none; }
  .brand.small { display: none; }
  .room-code { flex: 0 0 auto; }
  .turn-ring { width: 52px; height: 52px; margin: -6px 0; flex: 0 0 auto; }
  .turn-num { font-size: 1.05rem; }
  .topbar-tools { gap: .3rem; }
  .topbar-tools .btn { padding: .25rem .45rem; font-size: .74rem; white-space: nowrap; }
  #btn-side { display: inline-block; font-size: 1rem; }

  /* side panel becomes a slide-over drawer */
  #side {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw); flex: none;
    background: #131f19;
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 70;
  }
  #side.open { transform: none; box-shadow: -20px 0 60px rgba(0,0,0,.6); }
  @media (prefers-reduced-motion: reduce) { #side { transition: none; } }

  /* opponents scroll horizontally instead of squeezing */
  #opponents { overflow-x: auto; scrollbar-width: none; }
  .opp { flex: 0 0 auto; min-width: 46vw; height: calc(20vh + var(--foot-h)); }
  .opp-counts { display: none; }

  #zones { gap: .35rem; }
  .pile { width: 54px; }
  .pile-art { width: 46px; }
  .pile-name { font-size: .56rem; }
  #dock { gap: .5rem; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); }
}

/* touch devices: preview becomes a centered card you tap to dismiss */
@media (pointer: coarse) {
  #preview { left: 50%; right: auto; top: 45%; bottom: auto; transform: translate(-50%, -50%); width: min(310px, 78vw); pointer-events: auto; }
  #hand .card:hover { transform: none; }
}
.btn.danger { color: var(--danger); border-color: rgba(199,91,74,.5); }

/* Wizards Fan Content Policy disclaimer, one fixed bar pinned to the bottom of every view. box-sizing is
   border-box site-wide, so each full-screen view reserves the footer's height with padding-bottom and never
   covers content (works for both in-flow height:100% views and position:fixed inset:0 views). */
#legal-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; min-height: var(--foot-h);
  display: flex; align-items: center; justify-content: center; padding: .12rem .8rem;
  background: rgba(10,11,13,.94); border-top: 1px solid var(--line); }
#legal-foot p { margin: 0; font-size: clamp(.52rem, 1.5vw, .64rem); line-height: 1.2; color: var(--ink-dim); text-align: center; max-width: 110ch; }
#lobby, #game, #tabletop, #playtest, #news, #builder, #builder-lobby, #draft, #league { padding-bottom: var(--foot-h); }
/* in a match, hide the fixed disclaimer (still shown on every other view) and reclaim its reserved space for the table */
#game:not([hidden]) ~ #legal-foot { display: none; }
#game:not([hidden]) { padding-bottom: 0; }
@media (max-width: 640px) { :root { --foot-h: 2.7rem; } #legal-foot p { font-size: .54rem; } }