/* Relic Quest — "The Hollow Bazaar" · Powered by Orion
   A dark fantasy cosmos: a slow galaxy video under black and charcoal surfaces;
   painted relic cards, wax-sealed values, gold and astral-violet accents.
   Mobile-first table layout; every interactive target >= 44px. */
:root {
  --night0: #030304;
  --night: #07070a;
  --night2: #0e0e12;
  --plum: #15151a;
  --panel: rgba(16, 16, 20, 0.86);
  --panel-solid: #131317;
  --well: rgba(0, 0, 0, 0.55);
  --line: #2c2c35;
  --line-soft: #1d1d24;
  --gold: #d4a73a;
  --gold-hi: #ffe08a;
  --gold-dim: #8a6a1f;
  --brass: #b98a3a;
  --ink: #ece1c4;
  --ink-dim: #bcae8c;
  --muted: #8a8a96;
  --parch: #f3e6c4;
  --parch-deep: #d9c48f;
  --parch-ink: #2d2210;
  --parch-faint: #6f5a33;
  --spell: #1c1c24;
  --spell2: #0b0b10;
  --spell-ink: #e6dcff;
  --spell-glow: #c9a2ff;
  --wax: #a6242a;
  --ok: #8fd07a;
  --err: #e0665a;
  --gry: #a3262b; --sly: #1f7a3a; --rav: #2b56c9; --huf: #d0a12b;
  --display: "Cinzel", "Palatino Linotype", Georgia, serif;
  --decor: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --body: "EB Garamond", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  --whim: "EB Garamond", "Book Antiqua", Georgia, serif;
  --topbar-h: 50px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
.cardf, .seat, .t-actions button, .char-pick, .dg-card, .pile, .option-row, .zone, .sheet-card {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body {
  font-family: var(--body);
  color: var(--ink);
  min-height: 100vh;
  background: radial-gradient(80% 40% at 50% 110%, rgba(212,167,58,0.07), rgba(212,167,58,0) 60%),
              linear-gradient(var(--night), var(--night0));
  background-attachment: fixed;
  position: relative;
}

/* ================================================================ SKY */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
/* the cosmos: a looping galaxy video that always covers the screen (cropped, never
   stretched) and sits dimmed under a shade so cards and text stay readable */
.sky { background: #020205 url(video/cosmos-poster.jpg) 50% 42% / cover no-repeat; }
.cosmos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.cosmos-shade { position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(2,2,6,.42), rgba(2,2,6,.74) 70%, rgba(2,2,6,.88)); }
body.in-game .cosmos-shade { background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(2,2,6,.55), rgba(2,2,6,.8) 70%, rgba(2,2,6,.9)); }

.topbar, main, .modal, .counter-overlay, .toast, .sheet, .winner-overlay { position: relative; z-index: 1; }

/* ---- lite mode (older tablets/phones, see client/perf.ts): same show, cheaper paint ---- */
html.lite .cosmos { display: none; } /* lite: the still poster only */
html.lite .m-wrap, html.lite .m-sigil, html.lite .m-sigil .w-tip, html.lite .warden-mark,
html.lite .hero-crest, html.lite .hero-crest img { filter: none; }
html.lite .m-sigil { animation: none; }
html.lite .mandala[data-effect="unmake"] .m-wrap { filter: none; }
html.lite .m-name { text-shadow: 0 2px 6px rgba(0,0,0,.8); }
html.lite .inspect { backdrop-filter: none; }
html.lite .warden-mark, html.lite .hero-crest img { animation: none; }

/* ================================================================ ANIMATIONS */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(16px); } }
@keyframes pulseTurn {
  0%, 100% { text-shadow: 0 0 10px rgba(255,224,138,0.3); }
  50% { text-shadow: 0 0 22px rgba(255,224,138,0.8), 0 0 44px rgba(212,167,58,0.35); }
}
@keyframes glowBorder {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,224,138,0.35), 0 0 18px rgba(212,167,58,0.35); }
  50% { box-shadow: 0 0 0 2px rgba(255,224,138,0.7), 0 0 30px rgba(212,167,58,0.6); }
}
@keyframes acceptPulse {
  0%, 100% { outline-color: rgba(255,224,138,0.45); box-shadow: 0 0 12px rgba(212,167,58,0.25); }
  50% { outline-color: rgba(255,224,138,0.95); box-shadow: 0 0 26px rgba(212,167,58,0.55); }
}
@keyframes acceptPulseRed {
  0%, 100% { outline-color: rgba(231,76,60,0.45); box-shadow: 0 0 12px rgba(231,76,60,0.25); }
  50% { outline-color: rgba(231,76,60,0.95); box-shadow: 0 0 26px rgba(231,76,60,0.55); }
}
@keyframes cardDealIn { from { opacity: 0; transform: translateY(30px) rotate(var(--rot, 0deg)) scale(.9); } to { opacity: 1; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)) scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes shake {
  10%, 90% { transform: translate(calc(var(--shake) * -0.3), 0); }
  20%, 80% { transform: translate(calc(var(--shake) * 0.6), 1px); }
  30%, 50%, 70% { transform: translate(calc(var(--shake) * -1), -1px); }
  40%, 60% { transform: translate(var(--shake), 1px); }
}
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pulseGold { 0% { box-shadow: 0 0 0 0 rgba(255,224,138,0.7); } 100% { box-shadow: 0 0 0 18px rgba(255,224,138,0); } }
@keyframes pulseSet { 0% { box-shadow: 0 0 0 0 rgba(143,208,122,0.8); transform: scale(1); } 50% { transform: scale(1.04); } 100% { box-shadow: 0 0 0 22px rgba(143,208,122,0); transform: scale(1); } }
@keyframes feedIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes winnerBg { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes petrifyGray { from { filter: grayscale(0); } to { filter: grayscale(.9); } }

.table.shaking { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
.screen-flash { position: fixed; inset: 0; z-index: 65; pointer-events: none; animation: flashOut .26s ease-out forwards; }
.pulse-gold { animation: pulseGold 1.1s ease-out; border-radius: 8px; }
.pulse-set { animation: pulseSet 1.2s ease-out; }

.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: normal; }
hr.sep { border: none; border-top: 1px solid var(--line-soft); margin: 22px 0; position: relative; }
hr.sep::after {
  content: "\2726"; position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  background: var(--night); padding: 0 10px; color: var(--gold-dim); font-size: 0.8rem;
}

/* ================================================================ TOPBAR */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(var(--topbar-h) + var(--sat)); padding: var(--sat) 14px 0;
  background: linear-gradient(rgba(27,27,31,0.95), rgba(16,16,19,0.95));
  border-bottom: 1px solid var(--gold-dim);
  box-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 4px 18px rgba(0,0,0,0.55);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--decor); font-size: .95rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; }
.brand-text { overflow: hidden; text-overflow: ellipsis; }
.brand .accent { color: var(--gold-hi); }
.brand-sub { font-family: var(--display); font-weight: 500; font-size: .8rem; color: var(--ink-dim); letter-spacing: .12em; }
.topbar-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.turn-pill {
  font-family: var(--display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line); padding: 5px 12px; border-radius: 20px;
  background: var(--well); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.turn-pill.mine { color: #1c1506; background: linear-gradient(#ffe08a, var(--gold)); border-color: #6e5620; font-weight: 700; animation: glowBorder 2s ease-in-out infinite; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.badge {
  font-family: var(--display); letter-spacing: 3px; font-size: 0.85rem;
  background: var(--well); border: 1px solid var(--gold-dim); color: var(--gold-hi);
  padding: 5px 10px; border-radius: 4px; box-shadow: inset 0 0 12px rgba(0,0,0,0.7);
}
.icon-btn {
  width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-hi); border-radius: 50%; background: var(--well);
}
.icon-btn.muted { color: var(--muted); }
.icon-btn.lite-btn { color: var(--muted); }
.icon-btn.lite-btn.on { color: #1c1506; background: linear-gradient(#ffe08a, var(--gold)); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; transition: background 0.3s; flex: 0 0 auto; }
.conn-dot.on { background: var(--ok); box-shadow: 0 0 6px rgba(143,208,122,0.6); }
.conn-dot.off { background: var(--err); box-shadow: 0 0 6px rgba(224,102,90,0.6); }

/* ================================================================ BUTTONS */
button {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--line);
  background: linear-gradient(#393942, #27282e); color: var(--ink);
  padding: 10px 16px; border-radius: 6px; font-weight: 700; min-height: 40px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.1s, filter 0.18s, opacity 0.18s;
}
button:hover:not(:disabled) { border-color: var(--gold-dim); box-shadow: 0 0 14px rgba(212,167,58,0.3); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.primary {
  background: linear-gradient(#ffe39a, var(--gold) 55%, #9a7a24);
  color: #1c1506; border-color: #6e5620;
  text-shadow: 0 1px 0 rgba(255,240,200,0.4);
  box-shadow: 0 0 18px rgba(212,167,58,0.35), inset 0 1px 0 rgba(255,245,210,0.55);
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 24px rgba(212,167,58,0.55), inset 0 1px 0 rgba(255,245,210,0.55); }
button.ghost { background: transparent; }
button.wide { width: 100%; }
button.big { padding: 14px 26px; font-size: .9rem; min-height: 48px; }

/* ================================================================ LOBBY */
.lobby { max-width: 900px; margin: 0 auto; padding: 22px 16px 40px; animation: fadeIn 0.4s ease-out; }
.lobby-hero { text-align: center; margin: 6px 0 22px; animation: slideUp .5s ease-out both; }
.hero-crest { filter: drop-shadow(0 0 18px rgba(212,167,58,0.45)); }
.hero-crest img { width: clamp(96px, 26vw, 150px); height: auto; display: block; margin: 0 auto; animation: crestGlow 5s ease-in-out infinite; }
@keyframes crestGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(212,167,58,.35)); } 50% { filter: drop-shadow(0 0 22px rgba(255,215,106,.6)); } }
.hero-title { margin: 6px 0 2px; font-family: var(--decor); font-size: clamp(1.5rem, 5vw, 2.4rem); color: var(--gold-hi); letter-spacing: .06em; text-shadow: 0 0 24px rgba(212,167,58,0.45); }
.hero-sub { font-family: var(--whim); font-style: italic; font-size: 1.25rem; color: var(--ink-dim); }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---- lobby: identity ---- */
.identity { display: flex; flex-direction: column; gap: 4px; margin: 0 auto 16px; max-width: 520px; animation: slideUp .5s ease-out both; }
.id-label { font-family: var(--whim); font-style: italic; font-size: 1.15rem; color: var(--ink-dim); padding-left: 2px; }
.id-row { display: flex; gap: 8px; align-items: stretch; }
.id-row input { margin: 0; flex: 1; font-family: var(--display); letter-spacing: .04em; }
.dice-btn { flex: 0 0 52px; min-height: 46px; padding: 0; font-size: 1.35rem; border-color: var(--line); }

/* ---- lobby: mode cards ---- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.mode-card {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 14px; min-height: 84px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); position: relative; overflow: hidden;
  animation: slideUp .5s ease-out both; text-transform: none; letter-spacing: 0; font-family: var(--body);
}
.mode-card:nth-child(2) { animation-delay: .06s; } .mode-card:nth-child(3) { animation-delay: .12s; }
.mode-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, var(--tint, rgba(212,167,58,.16)), transparent 60%); pointer-events: none; }
.mode-card.host { --tint: rgba(212,167,58,.2); }
.mode-card.ai { --tint: rgba(212,167,58,.12); }
.mode-card.hotseat { --tint: rgba(212,167,58,.12); }
.mode-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold-dim); }
.m-ico { font-size: 1.7rem; flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #35363e, #151519); border: 1px solid var(--gold-dim); box-shadow: inset 0 0 10px rgba(0,0,0,.6), 0 0 10px rgba(212,167,58,.15); }
.m-ico img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.mode-card.ai .m-ico { color: #c9a2ff; }
.m-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.m-title { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .86rem; color: var(--gold-hi); }
.m-sub { font-size: .82rem; color: var(--ink-dim); font-style: italic; line-height: 1.3; }
.m-arrow { font-size: 1.6rem; color: var(--gold-dim); }
.join-panel { max-width: 520px; margin: 0 auto; }
/* launcher modes: only the relevant ways to play */
.mode-card.joinapp { display: none; --tint: rgba(212,167,58,.12); }
body[data-mode="app"] .mode-card.joinapp { display: flex; }
body[data-mode="app"] .modes { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.app-version { text-align: center; color: #221c12; font-family: var(--display); font-weight: 900; font-size: 1.05rem; letter-spacing: .12em; margin: 18px auto 0; cursor: pointer; width: max-content; min-width: 118px; padding: 16px 30px; background: url(img/ui-plaque.svg) center / 100% 100% no-repeat; text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 -1px 0 rgba(0,0,0,.25); filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.app-version:empty { display: none; }
body[data-mode="local"] .mode-card.host, body[data-mode="local"] .join-panel, body[data-mode="local"] #join-status { display: none; }
body[data-mode] .modes { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }

.join-row { display: flex; gap: 8px; }
.join-row input { margin: 0; flex: 1; font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; text-align: center; font-size: 1.1rem; }
.join-row button { flex: 0 0 auto; padding-inline: 22px; }
.nearby { margin: 0 auto 16px; max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.nearby-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 14px; text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--body);
  border: 1px solid var(--gold-dim); border-radius: 10px; background: linear-gradient(rgba(212,167,58,.14), rgba(212,167,58,.04)); box-shadow: 0 0 14px rgba(212,167,58,.2); animation: slideUp .35s ease-out both; }
.nb-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-host { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--gold-hi); overflow-wrap: anywhere; }
.nb-meta { font-size: .8rem; color: var(--ink-dim); font-style: italic; }
.nb-go { font-family: var(--display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.rooms-title { margin: 14px 0 6px; font-family: var(--display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }

.seer { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.seer-card { transform: scale(1.15); margin: 10px 0 14px; filter: drop-shadow(0 0 18px rgba(201,162,255,.5)); }
.seer button { width: 100%; }
/* ---- setup sheets (solo / pass & play) ---- */
.setup { display: flex; flex-direction: column; gap: 14px; }
.setup-label { font-family: var(--display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 10px; }
.stepper button { width: 54px; min-height: 54px; padding: 0; font-size: 1.5rem; border-radius: 50%; }
.stepper .n { font-family: var(--decor); font-size: 2.6rem; color: var(--gold-hi); min-width: 60px; text-align: center; text-shadow: 0 0 18px rgba(212,167,58,.5); }
.stepper-sub { text-align: center; color: var(--ink-dim); font-style: italic; font-size: .85rem; }
.char-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.char-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--well); font-size: .8rem; color: var(--ink-dim); text-transform: none; letter-spacing: 0; font-family: var(--body); min-height: 40px; }
.char-chip.on { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px rgba(212,167,58,.35); }
.char-chip.taken { opacity: .4; }
.hs-row select { width: 46%; margin: 0; padding: 8px 6px; min-height: 46px; font-size: .85rem; }

/* ---- room: network (app host) ---- */
.net-card { padding: 14px 16px; margin: 0 0 14px; }
.net-switch { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); }
.net-opt { min-height: 44px; border: 0; background: transparent; color: var(--ink-dim); font-size: .72rem; box-shadow: none; padding: 10px 6px; }
.net-opt.on { background: linear-gradient(#e0b64a, #b98a1f); color: #2a1d05; box-shadow: 0 0 12px rgba(212,167,58,.45); }
.net-note { margin: 10px 2px 0; color: var(--ink-dim); font-style: italic; font-size: .85rem; }
.net-wifi-join { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.net-wifi-join .invite-qr { flex: 0 0 130px; width: 130px; height: 130px; }
.net-creds { font-family: var(--display); font-size: .85rem; line-height: 1.7; color: var(--ink); user-select: all; word-break: break-all; }
.net-creds b { color: var(--gold-hi); }
/* ---- room: invite ---- */
.room-head { align-items: center; margin-bottom: 12px; }
.back-btn { padding-inline: 14px; }
.room-kicker { font-family: var(--whim); font-style: italic; font-size: 1.35rem; color: var(--gold-hi); }
.invite { display: flex; gap: 18px; align-items: center; padding: 18px; margin-bottom: 18px; }
.invite-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.invite-code { font-family: var(--decor); font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: .22em; color: var(--gold-hi); text-shadow: 0 0 24px rgba(212,167,58,.55); line-height: 1.1; user-select: all; }
.invite-how { margin: 0; color: var(--ink-dim); font-style: italic; font-size: .85rem; }
.invite-qr { flex: 0 0 150px; width: 150px; height: 150px; border-radius: 10px; overflow: hidden; background: #fff8e6; box-shadow: 0 0 0 4px #fff8e6, 0 10px 26px rgba(0,0,0,.5); }
.invite-qr svg { display: block; width: 100%; height: 100%; }
.invite-qr:empty { display: none; }
.share-box { margin-top: 4px; }
.share-box button { flex: 0 0 auto; }
.patrons { margin: 16px 0 90px; }
.patrons summary { cursor: pointer; font-family: var(--display); letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; color: var(--ink-dim); padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.patrons summary::before { content: "\25B8"; color: var(--gold-dim); transition: transform .2s; }
.patrons[open] summary::before { transform: rotate(90deg); }
.patrons summary .muted { text-transform: none; letter-spacing: 0; font-family: var(--body); font-style: italic; font-size: .8rem; }
.patrons .characters { margin-top: 8px; }
.seat-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 56px; width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); animation: slideUp .35s ease-out both; }
.seat-card.me { border-color: var(--gold-dim); box-shadow: 0 0 12px rgba(212,167,58,.2); }
.seat-card .sc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seat-card .sc-name { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.seat-card .sc-sub { font-size: .78rem; color: var(--ink-dim); font-style: italic; }
.seat-card select { width: auto; max-width: 46%; margin: 0; padding: 6px 8px; min-height: 40px; font-size: .82rem; }
.seat-card.empty { border-style: dashed; opacity: .6; }
.start-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(11,12,14,.92) 30%); }
.start-bar .primary.big { flex: 0 0 auto; min-width: 200px; }
.start-bar .hint { flex: 1; }
.start-bar .primary.big.waiting { background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line); animation: pulseTurn 2s ease-in-out infinite; }
.card, .panel {
  background: var(--panel); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 10px; padding: 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; animation: slideUp 0.5s ease-out both;
}
.card:nth-child(2) { animation-delay: 0.1s; }
.card::before, .panel::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(212,167,58,0.18);
  border-radius: 7px; pointer-events: none;
}
.panel h2::before, .room > h3::before, .modal-card h3::before { content: ""; display: inline-block; width: 1.05em; height: 1.6em; margin-right: .5em; vertical-align: -.45em; background: url(img/ui-emblem.svg) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.modal-card { background-image: url(img/ui-emblem.svg), linear-gradient(#2a2b32, #18181c); background-repeat: no-repeat; background-position: right -40px top -30px, 0 0; background-size: 170px auto, auto; background-blend-mode: soft-light, normal; }
.invite { background-image: none; background-repeat: no-repeat; background-position: left 12px bottom 8px; background-size: 150px auto; }
.panel h2 { margin: 0 0 14px; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hi); font-weight: 700; }
label { display: block; margin-bottom: 12px; font-size: 0.95rem; color: var(--ink-dim); font-style: italic; }
input, select {
  width: 100%; font-family: var(--body); font-size: 1.05rem; color: var(--ink);
  background: var(--well); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px 12px; margin-top: 4px; min-height: 46px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6); transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus { outline: none; border-color: var(--gold-dim); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 12px rgba(212,167,58,0.3); }
.rooms { margin-top: 14px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.room-row {
  display: flex; align-items: center; justify-content: space-between; min-height: 46px;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--well); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.room-row:hover { border-color: var(--gold-dim); transform: translateX(3px); }
.room-row.closed { cursor: default; opacity: .55; }
.room-row.closed:hover { border-color: var(--line-soft); transform: none; }
.room-row .rc { font-family: var(--display); letter-spacing: 2px; font-weight: 700; color: var(--gold-hi); }
.room-row .meta { color: var(--muted); font-size: 0.85rem; }
.room-row .meta.open { color: var(--ok); }
.hint { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.solo-hint { margin: 8px 0 0; font-size: 0.85rem; font-family: var(--whim); font-style: italic; font-size: 1.05rem; }
.ai-btn { margin-top: 10px; background: linear-gradient(#313139, #212227); color: #c9a2ff; border: 1px solid #5a5b6a; }
.ai-btn:hover { border-color: #8a6ad6; box-shadow: 0 0 14px rgba(201,162,255,0.3); }
.ai-ico { color: var(--gold-hi); margin-right: 4px; }
.hotseat-btn { margin-top: 8px; background: linear-gradient(#2c2d34, #202025); color: var(--ink); border: 1px solid #5a5b6a; }
.hotseat-btn:hover { border-color: var(--gold-dim); }
.hs-wrap { display: flex; flex-direction: column; gap: 10px; }
.hs-list { display: flex; flex-direction: column; gap: 6px; }
.hs-row { display: flex; gap: 6px; align-items: center; }
.hs-row input { margin: 0; }
.hs-x { width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; }
.hs-ai { display: flex; align-items: center; gap: 8px; font-style: normal; color: var(--ink-dim); }
.hs-ai select { width: auto; margin: 0; padding: 8px 10px; min-height: 40px; }

/* ---- pass & play curtain ---- */
.curtain { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(70% 60% at 50% 40%, #27272d, #0e0e11 80%); animation: fadeIn .25s ease-out; }
.curtain-card { text-align: center; max-width: 420px; width: 100%; }
.curtain-kicker { font-family: var(--whim); font-style: italic; font-size: 1.4rem; color: var(--ink-dim); }
.curtain-name { font-family: var(--decor); font-size: clamp(1.8rem, 8vw, 3rem); color: var(--gold-hi); letter-spacing: .06em; text-shadow: 0 0 28px rgba(212,167,58,.6); margin: 6px 0 10px; }
.curtain-sub { color: var(--ink-dim); font-style: italic; margin-bottom: 22px; min-height: 1.4em; }
.curtain .primary.big { width: 100%; min-height: 56px; font-size: .95rem; }

/* ================================================================ ROOM */
.room { max-width: 900px; margin: 0 auto; padding: 20px 16px 40px; animation: fadeIn 0.4s ease-out; }
.room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.room-head h2 { margin: 0 0 4px; font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 1.1rem; }
.room-head .code { color: var(--gold-hi); letter-spacing: 3px; }
.seats, .characters { display: flex; flex-wrap: wrap; gap: 10px; }
.room h3, .table h3 { font-family: var(--display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; color: var(--ink-dim); }
.char-pick {
  position: relative; width: 150px; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--house, var(--gold-dim));
  border-radius: 8px; padding: 12px; transition: transform .25s, box-shadow .25s;
}
.char-pick.mystery { border-top-style: dashed; }
.char-pick .c-name { font-family: var(--display); font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; color: var(--ink); }
.char-pick .c-house { color: var(--gold-dim); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; font-family: var(--display); }
.char-pick .c-ability { font-size: 0.85rem; line-height: 1.35; color: var(--ink-dim); font-style: italic; }
.seat-chip {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 12px 6px 6px; border: 1px solid var(--line-soft); border-radius: 24px; background: var(--well);
  font-size: 0.95rem; animation: slideUp 0.3s ease-out both;
}
.seat-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.seat-chip.me { border-color: var(--gold-dim); }
.seat-chip .dot.has { background: var(--gold-hi); box-shadow: 0 0 6px rgba(255,224,138,0.5); }
.start-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.share-row { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.share-box { display: flex; gap: 8px; }
.share-alt { font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.share-alt-link { color: var(--gold-hi); font-family: monospace; font-size: 0.8rem; }
.share-alt:empty { display: none; }
.share-box input { flex: 1; font-family: monospace; font-size: 0.85rem; color: var(--gold-hi); border-color: var(--gold-dim); margin: 0; }

/* ================================================================ TABLE */
.table {
  padding: 0; height: calc(100vh - var(--topbar-h) - var(--sat)); height: calc(100dvh - var(--topbar-h) - var(--sat));
  display: flex; flex-direction: column; overflow: hidden; animation: fadeIn 0.5s ease-out;
  --shake: 0px;
}

/* ---- opponents strip ---- */
.t-opps {
  flex: 0 1 auto; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px; padding: 8px 10px 6px;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.t-opps::-webkit-scrollbar { display: none; }
.seat {
  flex: 0 0 auto; width: 176px; scroll-snap-align: start;
  background: linear-gradient(rgba(36,37,43,0.9), rgba(20,20,23,0.95));
  border: 1px solid var(--line-soft); border-top: 3px solid var(--house, var(--gold-dim)); border-radius: 10px;
  padding: 7px 8px; cursor: pointer; position: relative;
  transition: border-color 0.3s, box-shadow 0.3s, transform .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5); animation: slideUp 0.35s ease-out both;
}
.seat.active { border-color: var(--gold); animation: glowBorder 2.2s ease-in-out infinite; }
.seat.is-petrified { filter: grayscale(.55); }
.seat.accepts { outline: 2px dashed rgba(231,76,60,0.7); outline-offset: 3px; animation: acceptPulseRed 1.2s ease-in-out infinite; }
.seat.drag-over { outline: 2px dashed #e74c3c; box-shadow: 0 0 22px rgba(231,76,60,0.5); }
.seat .s-header { display: flex; align-items: center; gap: 7px; }
.seat .s-info { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.seat .s-name { font-family: var(--display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; overflow-wrap: break-word; }
.seat .s-char { color: var(--ink-dim); font-size: 0.68rem; font-style: italic; overflow-wrap: anywhere; }
.seat .s-ability { margin-top: 4px; font-size: .62rem; line-height: 1.3; color: var(--ink-dim); font-style: italic; }
.seat.is-petrified .s-ability, .seat.is-dead .s-ability { text-decoration: line-through; opacity: .6; }
.seat .s-hand, .seat .s-bank, .seat .s-renown { display: flex; flex-direction: column; align-items: center; line-height: 1; flex: 0 0 auto; }
.seat .s-hand b, .seat .s-bank b, .seat .s-renown b { font-family: var(--display); font-size: .95rem; color: var(--gold-hi); white-space: nowrap; }
.seat .s-renown b { color: var(--ink-dim); }
.seat .s-renown.on b { color: #d9c2ff; text-shadow: 0 0 8px rgba(201,162,255,.6); }
.seat .s-hand small, .seat .s-bank small, .seat .s-renown small { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.seat .s-summary { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line-soft); }
.seat .s-sets { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.seat .s-none { font-size: .66rem; color: var(--muted); font-style: italic; }
/* opponents' items at a glance */
.pip-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 2px; border-radius: 12px; background: rgba(0,0,0,.32); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.pip-group.done { border-color: var(--ok); box-shadow: 0 0 7px rgba(143,208,122,.5); }
.pip-group.overflow { border-style: dashed; opacity: .8; }
.item-pip { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: radial-gradient(circle at 40% 30%, #fff9e8, #e2d0a0 75%); border: 1.5px solid var(--c); -webkit-touch-callout: none; }
.item-pip .pip-art, .item-pip .pip-art svg { width: 15px; height: 15px; display: block; }
.item-pip.wild { border-color: #f1e4c3; }
.item-pip.shielded { box-shadow: 0 0 0 1.5px #ffe08a, 0 0 8px rgba(255,215,106,.9); }
.pip-n { font-family: var(--display); font-size: .56rem; color: var(--gold-hi); margin-left: 2px; }
.pip-n.ok { color: var(--ok); font-size: .7rem; }
.sg-mini { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 3px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.sg-mini.done { border-color: var(--ok); box-shadow: 0 0 6px rgba(143,208,122,.4); }
.sg-mini .sg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c); display: inline-block; }
.sg-mini .sg-mini-n { font-family: var(--display); font-size: 0.58rem; color: var(--gold-hi); }
.seat .s-flags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.seat .s-detail { display: none; margin-top: 6px; }
.sd .s-zone { margin-top: 5px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.sd .s-zone-label { font-family: var(--display); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.sd .s-cards-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-theme { font-family: var(--whim); font-style: italic; font-size: .8rem; color: var(--ink-dim); margin-left: 4px; opacity: .8; }
.sg-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; border-left: 3px solid var(--c); background: rgba(0,0,0,.25); }
.sg-group.done { box-shadow: 0 0 8px rgba(143,208,122,.4); }

/* ---- center ---- */
.t-center {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 12px; position: relative;
}
.t-center::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; opacity: .35;
  background: radial-gradient(circle, rgba(212,167,58,0.08) 0, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(212,167,58,0.12) 0 1deg, transparent 1deg 30deg);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.t-turn-info { text-align: center; min-width: 0; flex: 1 1 auto; max-width: 340px; }
.turn-banner { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; color: var(--gold-hi); text-shadow: 0 0 14px rgba(212,167,58,0.45); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.turn-banner.my-turn { animation: pulseTurn 2s ease-in-out infinite; }
.tb-main { text-transform: uppercase; }
.tb-pips { display: inline-flex; gap: 5px; }
.tb-pips i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--gold-dim); background: transparent; display: inline-block; transition: background .25s, box-shadow .25s; }
.tb-pips i.on { background: var(--gold-hi); box-shadow: 0 0 8px rgba(255,224,138,.8); }
#action-msg { min-height: 1em; font-size: .8rem; }
.scavenger-choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 6px 0; }
.cc-lbl { flex: 1 1 100%; font-family: var(--whim); font-style: italic; font-size: 1.1rem; color: var(--gold-hi); }
.scavenger-btn { padding: 8px 12px; font-size: .7rem; }

.feed { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-width: 100%; }
.feed-line { font-size: .74rem; color: var(--muted); font-style: italic; line-height: 1.3; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-line.new { opacity: 1; color: var(--ink-dim); animation: feedIn .3s ease-out; }
.feed-line.me { color: #ffb0a6; opacity: 1; }
.feed-line.k-ward.new { color: var(--spell-glow); }
.feed-line.k-win { color: var(--gold-hi); font-style: normal; }

/* ---- piles ---- */
.pile {
  flex: 0 0 auto; width: 58px; height: 80px; border-radius: 7px; position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.pile-back {
  width: 100%; height: 100%; border-radius: 7px; border: 1px solid #5c4a8f;
  background: linear-gradient(160deg, #40414c, #212126), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px);
  background-blend-mode: overlay;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), inset 0 0 0 3px rgba(212,167,58,0.25), inset 0 0 18px rgba(0,0,0,0.7);
  position: relative; overflow: hidden;
}
.pile-back::before { content: "\2726"; position: absolute; font-size: 2.4rem; color: rgba(212,167,58,.15); }
.pile-back b { font-family: var(--display); font-size: 1rem; color: var(--gold-hi); position: relative; }
.pile-back span { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); position: relative; }
.pile-back.empty { opacity: .5; }
.pile.discard .cardf.mini { pointer-events: none; }
.pile-count { position: absolute; right: -6px; top: -6px; background: var(--gold); color: #1a1405; font-family: var(--display); font-size: .6rem; font-weight: 900; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.pile.accepts { outline: 2px dashed var(--gold-hi); outline-offset: 4px; animation: acceptPulse 1.2s ease-in-out infinite; transform: scale(1.06); }
.pile.drag-over { transform: scale(1.1); }

/* ---- my board ---- */
.t-spacer { flex: 1 1 0; min-height: 0; }
.t-my-board {
  flex: 0 1 auto; min-height: 0; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* wrap: the row sizes to its tallest zone (not to the capped board), so the
     Items / Bank outlines always grow around their cards and the board scrolls */
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 8px 12px;
  background: linear-gradient(rgba(23,23,26,0.6), rgba(14,14,16,0.8));
  border-top: 1px solid var(--line-soft);
}
.my-section { flex: 1; min-width: 0; border-radius: 10px; padding: 8px 10px; }
.my-section h4 {
  margin: 0 0 6px; font-family: var(--display); font-size: 0.66rem; color: var(--gold-hi);
  text-transform: uppercase; letter-spacing: 0.14em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sec-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--c, var(--line)); box-shadow: 0 0 8px var(--c, transparent); }
.sec-sub { color: var(--muted); font-family: var(--body); font-size: 0.72rem; text-transform: none; letter-spacing: 0.02em; font-style: italic; }
.my-section.char-side { flex: 0 0 176px; padding: 0; }
.zone { border: 1px dashed var(--line); background: rgba(0,0,0,.18); transition: outline-color .2s, box-shadow .2s, background .2s; outline: 2px dashed transparent; outline-offset: 2px; min-height: 84px; cursor: pointer; }
.zone.accepts { outline-color: rgba(255,224,138,.6); animation: acceptPulse 1.2s ease-in-out infinite; background: rgba(212,167,58,0.06); }
.zone.drag-over { outline-color: var(--gold-hi); box-shadow: 0 0 22px rgba(212,167,58,0.5); background: rgba(212,167,58,0.1); }
.zone-empty { font-family: var(--whim); font-style: italic; font-size: 1rem; color: var(--muted); padding: 6px 4px; text-align: center; }
.rows { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
body.dragging .zone { outline-color: rgba(212,167,58,0.35); }
body.dragging .seat { outline: 1px dashed rgba(231,76,60,0.4); outline-offset: 3px; }
body.drag-money .zone#items-zone, body.drag-item .zone#bank-zone, body.drag-wild2 .zone#bank-zone, body.drag-wildall .zone#bank-zone { opacity: .45; }
.cardf.draggable { cursor: grab; }
.cardf.draggable:active { cursor: grabbing; }

/* ---- set groups ---- */
.set-group {
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px 8px; border: 1px solid var(--line-soft); border-left: 4px solid var(--c, var(--line));
  border-radius: 8px; background: rgba(0,0,0,0.3); min-width: 128px; flex: 0 1 auto; cursor: pointer;
  transition: box-shadow .2s, outline-color .2s; outline: 2px dashed transparent; outline-offset: 2px;
}
body.has-sel .set-group:hover { outline-color: rgba(255,224,138,.5); }
.set-group.complete { box-shadow: 0 0 16px rgba(143,208,122,0.3); background: rgba(143,208,122,0.08); border-color: rgba(143,208,122,.4); }
/* the Warden's medallion: the counter sitting on the set his ability protects */
.warden-mark { pointer-events: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(255,215,106,.75)); animation: shieldPulse 2.4s ease-in-out infinite; }
.warden-mark.on-set { position: absolute; top: -13px; right: -11px; width: 36px; height: 36px; z-index: 4; }
.sg-group .warden-mark.on-set { top: -9px; right: -9px; width: 28px; height: 28px; }
.warden-mark.on-pips { width: 20px; height: 20px; margin-left: 2px; }
.set-group, .sg-group, .pip-group { position: relative; }
.cardf.shielded { box-shadow: 0 0 0 1px rgba(255,224,138,.7), 0 0 12px rgba(255,215,106,.45); }
@keyframes shieldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.set-group.shielded { outline: 1px solid rgba(255,224,138,0.55); outline-offset: 2px; }
.set-group.unassigned { border-left-color: #b8a05a; }
.set-group.overflow { border-style: dashed; background: rgba(0,0,0,.18); opacity: .92; }
.set-group.overflow .sg-name { color: var(--ink-dim); }
.sg-group.overflow { border-left-style: dashed; opacity: .85; }
.dg-flag.over { background: #474853; color: var(--ink-dim); }
.set-group.drag-over { outline-color: var(--gold-hi); box-shadow: 0 0 20px rgba(212,167,58,.5); }
.sg-head { display: flex; align-items: center; gap: 6px; }
.sg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--line)); box-shadow: 0 0 8px var(--c, transparent); flex: 0 0 auto; }
.sg-dot.none { background: conic-gradient(#c0392b, #2f6fb0, #2f8a4c, #8e44ad, #c0392b); }
.sg-name { font-family: var(--display); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.sg-prog { display: inline-flex; gap: 3px; margin-left: auto; }
.sg-prog i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--c); display: inline-block; }
.sg-prog i.on { background: var(--c); box-shadow: 0 0 5px var(--c); }
.sg-badge { font-size: 0.52rem; letter-spacing: 0.1em; color: #10240e; background: var(--ok); padding: 1px 6px; border-radius: 8px; font-family: var(--display); font-weight: 700; }
.sg-hintsub { font-size: 0.6rem; color: var(--muted); font-style: italic; margin-left: auto; }
.sg-cards { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- hand ---- */
.t-hand-wrap {
  flex: 0 0 auto; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 12px 16px 4px; background: linear-gradient(rgba(17,18,21,0.4), rgba(11,12,14,0.9));
  border-top: 1px solid var(--line-soft);
}
.t-hand-wrap::-webkit-scrollbar { display: none; }
.hand { display: flex; gap: 8px; min-height: 146px; justify-content: safe center; padding: 4px 6px 2px; width: max-content; min-width: 100%; margin: 0; }
.hand.fanned { gap: 0; }
.hand .cardf { flex: 0 0 auto; transition: transform 0.2s, margin 0.2s, box-shadow 0.2s; transform-origin: bottom center; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)); }
.hand.fanned .cardf { margin: 0 -6px; }
.hand .cardf:hover { z-index: 10; transform: translateY(-14px) scale(1.08) rotate(0deg); }
.hand .cardf.selected { z-index: 9; transform: translateY(-16px) scale(1.08) rotate(0deg); }
.hand-empty { font-family: var(--whim); font-style: italic; font-size: 1.1rem; color: var(--muted); align-self: center; }
.cardf.dealing { animation: cardDealIn 0.45s ease-out both; }

/* ---- actions ---- */
.t-actions {
  flex: 0 0 auto; display: flex; align-items: stretch; justify-content: flex-end; gap: 6px;
  padding: 6px 10px calc(6px + var(--sab)); background: linear-gradient(rgba(30,31,36,0.95), rgba(17,17,19,0.98));
  border-top: 1px solid var(--line-soft);
}
.t-actions .abtn { flex: 0 0 auto; min-width: 120px; min-height: 42px; padding: 6px 14px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ab-ico { font-size: 1rem; line-height: 1; }
.abtn.urge { animation: glowBorder 1.4s ease-in-out infinite; }
.drag-hint { flex: 1 1 auto; align-self: center; font-family: var(--whim); font-style: italic; font-size: 1rem; color: var(--muted); padding: 0 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-mobile { display: none; }

/* ---- selection bar: the destinations for the selected card ---- */
body.has-sel .t-actions { display: none; }
.sel-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px calc(6px + var(--sab));
  background: linear-gradient(90deg, rgba(212,167,58,0.16), rgba(212,167,58,0.05));
  border-top: 1px solid var(--gold-dim); animation: slideUp .2s ease-out;
}
.sb-what { font-family: var(--display); font-size: .72rem; letter-spacing: .06em; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.sb-btn { flex: 1 1 0; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 10px; line-height: 1.1; }
.sb-btn .sb-l { font-size: .74rem; }
.sb-btn .sb-s { font-family: var(--body); font-style: italic; font-size: .68rem; text-transform: none; letter-spacing: 0; opacity: .8; font-weight: normal; }
.sb-btn.cast { background: linear-gradient(#5b3fb0, #33343c); color: #f1e9ff; border-color: #8a6ad6; box-shadow: 0 0 16px rgba(201,162,255,0.35); }
.sb-btn.cast:hover:not(:disabled) { box-shadow: 0 0 24px rgba(201,162,255,0.6); }
.sb-x { flex: 0 0 auto; width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }

/* ---- bank stacks ---- */
.stack { position: relative; display: inline-block; }
.stack.multi .cardf { box-shadow: 2px 2px 0 -1px rgba(0,0,0,.55), 2px 2px 0 0 #6b4f1d, 4px 4px 0 -1px rgba(0,0,0,.55), 4px 4px 0 0 #6b4f1d, 0 4px 12px rgba(0,0,0,.65); }
.stack-n { position: absolute; right: -6px; top: -6px; background: var(--gold); color: #1a1405; font-family: var(--display); font-weight: 900; font-size: .62rem; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 2px 6px rgba(0,0,0,.6); z-index: 2; }
.rows-bank { gap: 10px 12px; }

/* ---- character card ---- */
.char-card {
  border: 1px solid var(--line-soft); border-top: 3px solid var(--house, var(--gold-dim));
  border-radius: 8px; background: rgba(0,0,0,0.3); padding: 7px 9px;
}
.char-card.mini { padding: 4px 6px; margin-top: 4px; }
.char-card.strip { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-top-width: 1px; border-left: 3px solid var(--house, var(--gold-dim)); }
.char-card.strip .cc-titles { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.char-card.strip .cc-name { font-size: .72rem; white-space: nowrap; }
.char-card.strip .cc-ability { margin: 0; font-size: .68rem; line-height: 1.25; }
.char-card.petrified { animation: petrifyGray .6s ease-out both; }
.cc-top { display: flex; align-items: center; gap: 8px; }
.cc-titles { min-width: 0; }
.cc-name { font-family: var(--display); font-weight: 700; font-size: 0.78rem; line-height: 1.2; }
.cc-house { font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.cc-ability { font-size: 0.74rem; line-height: 1.35; color: var(--ink-dim); font-style: italic; margin-top: 4px; }
.char-card.mini .cc-ability { font-size: 0.62rem; }
.cc-petrify { margin-top: 4px; padding: 2px 7px; border: 1px dashed #a86ec7; border-radius: 10px; background: rgba(140,90,180,0.14); display: inline-flex; align-items: center; box-shadow: 0 0 8px rgba(170,110,199,0.3); }
.cc-petrify-label { font-size: 0.6rem; color: #d3a8f0; font-style: italic; line-height: 1.3; white-space: nowrap; }
.flag.owes { background: #2a1a10; color: #ffb36a; border-color: #8a5a2a; }
.petrify-choice .cc-lbl { color: #d3a8f0; }
.pick-total { font-family: var(--display); font-size: .8rem; letter-spacing: .06em; color: var(--ink-dim); margin: 2px 0 6px; }
.pick-total.ok { color: var(--ok); }

/* ---- discard browser / swap wizard / log ---- */
.discard-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 60vh; overflow-y: auto; }
.dg-card { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; }
.discard-grid.pick .cardf.mini, .discard-grid.pick .dg-card { width: 76px; }
.discard-grid.pick .cardf.mini { height: 108px; }
.discard-grid.pick .cardf.mini .nm { font-size: .5rem; }
.discard-grid.pick .cardf.mini.spell .art { width: 34px; height: 34px; }
.discard-grid.pick .cardf.mini.item .medal { width: 36px; height: 36px; padding: 5px; }
.dg-name { font-size: 0.6rem; color: var(--ink-dim); text-align: center; line-height: 1.2; }
.dg-flag { font-size: 0.5rem; letter-spacing: 0.08em; color: #10240e; background: var(--ok); padding: 0 5px; border-radius: 8px; }
.swap-wrap { display: flex; flex-direction: column; gap: 12px; }
.swap-sec-title { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 6px; }
.swap-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.log-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.log-row { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--ink-dim); }
.log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--muted); }
.log-row.k-spell .log-dot, .log-row.k-pending .log-dot { background: var(--spell-glow); }
.log-row.k-ward .log-dot { background: #8fd0ff; }
.log-row.k-bank .log-dot { background: var(--gold); }
.log-row.k-item .log-dot { background: var(--ok); }
.log-row.k-pay .log-dot, .log-row.k-hex .log-dot { background: var(--err); }
.log-row.k-turn { color: var(--muted); font-style: italic; }
.log-row.k-win { color: var(--gold-hi); }

/* ---- flags ---- */
.flag { font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line); }
.flag.petr { background: #1a1a22; color: #b8bcc8; border-color: #4a5060; }
.flag.shield { background: #1e1f24; color: var(--spell-glow); border-color: #5a3f9a; }
.flag.sets { background: #0f2a14; color: var(--ok); border-color: #2e7d4f; }
.flag.dead { background: #06140a; color: #39ff6a; border-color: #1fbf4a; box-shadow: 0 0 8px rgba(57,255,106,.35); }
.seat.is-dead { border-top-color: #1fbf4a; }
.seat.is-dead .avatar { filter: grayscale(1) brightness(.8); }
.char-card.dead { border-top-color: #1fbf4a; }
.char-card.dead .cc-ability { text-decoration: line-through; opacity: .5; }
.cc-dead { margin-top: 4px; font-size: .66rem; color: #39ff6a; font-style: italic; text-shadow: 0 0 8px rgba(57,255,106,.5); }

/* ================================================================ CARDS */
.cardf {
  position: relative; width: 94px; height: 138px; border-radius: 8px;
  border: 1px solid #6b4f1d;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.35);
  padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.35), rgba(255,255,255,0) 50%),
    repeating-radial-gradient(circle at 30% 40%, rgba(120,90,40,0.045) 0 2px, transparent 2px 5px),
    linear-gradient(165deg, var(--parch) 0%, var(--parch-deep) 100%);
  color: var(--parch-ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cardf::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid rgba(107,79,29,0.45); border-radius: 6px; pointer-events: none;
}
/* wax seal value */
.cardf .val {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  font-family: var(--display); font-weight: 900; font-size: 0.8rem;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d84a4f, var(--wax) 55%, #5e1216 100%);
  color: #ffe6b0; border: 1px solid #3d0c0f;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,220,150,0.45), inset 0 -2px 3px rgba(0,0,0,.35);
}
.cardf .body { padding: 6px 6px 5px; flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.cardf .nm { font-family: var(--display); font-weight: 700; font-size: 0.62rem; line-height: 1.15; text-align: center; margin-top: 3px; }
.cardf .tx { font-size: 0.55rem; color: var(--parch-faint); margin-top: 3px; line-height: 1.3; font-style: italic; text-align: center; }
.cardf .colorbar { height: 4px; width: 60%; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); margin-top: auto; }
.cardf .art { display: block; width: 100%; height: 100%; }
.cardf .art svg { width: 100%; height: 100%; display: block; }

/* items: parchment with a coloured ribbon + medallion */
.cardf.item .ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 15px; z-index: 1;
  background: var(--c); color: #fff; font-family: var(--display); font-weight: 700; font-size: .48rem; letter-spacing: .16em;
  display: flex; align-items: center; justify-content: center; padding-left: 26px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.cardf.item .body { padding-top: 18px; }
.cardf.item .medal {
  width: 52px; height: 52px; border-radius: 50%; color: var(--c); padding: 4px; margin-top: 2px; flex: 0 0 auto;
  background: radial-gradient(circle at 40% 30%, #fff9e8, #ead9ae 70%);
  border: 2px solid var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.3), inset 0 0 10px rgba(0,0,0,.08);
}
.cardf.item .nm { color: #2d2210; }
.cardf.item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%); pointer-events: none; }
.cardf .rent { display: flex; gap: 3px; align-items: center; justify-content: center; background: rgba(45,34,16,0.1); border: 1px solid rgba(45,34,16,0.25); border-radius: 3px; padding: 1px 4px; margin-top: auto; font-size: 0.48rem; line-height: 1.4; }
.cardf .rent-label { opacity: 0.7; font-style: italic; }
.cardf .rent-pip { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.cardf .rent-pip.full { color: var(--wax); }

/* spells: a page from the spellbook */
.cardf.spell {
  background: radial-gradient(120% 70% at 50% 0%, rgba(201,162,255,0.25), transparent 60%), linear-gradient(165deg, var(--spell), var(--spell2));
  color: var(--spell-ink); border-color: #6a4fb0; box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 0 14px rgba(201,162,255,0.15), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.cardf.spell::after { border-color: rgba(201,162,255,0.35); }
.cardf.spell .val { background: radial-gradient(circle at 35% 30%, #a98ae6, #5a3f9a 60%, #34343c); color: #f2ecff; border-color: #26272d; }
.cardf.spell .art { width: 44px; height: 44px; color: var(--spell-glow); filter: drop-shadow(0 0 6px rgba(201,162,255,0.8)); margin-top: 8px; flex: 0 0 auto; }
.cardf.spell .nm { color: #f1e9ff; font-size: .6rem; letter-spacing: .04em; }
.cardf.spell .tx { color: #b9a8e6; font-size: .46rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.cardf.spell .spell-foot { font-family: var(--display); font-size: .46rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-align: center; padding: 2px 0 4px; opacity: .9; }

/* wilds: rainbow-rimmed parchment with a colour orb */
.cardf.wild2, .cardf.wildall {
  border: 2px solid transparent;
  background: linear-gradient(165deg, var(--parch) 0%, var(--parch-deep) 100%) padding-box,
    linear-gradient(135deg, #c0392b, #d4a73a, #2f8a4c, #2f6fb0, #8e44ad) border-box;
}
.wild-orb { width: 40px; height: 40px; border-radius: 50%; margin-top: 10px; box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.35), inset 0 0 12px rgba(255,255,255,.35); }

/* coins: a Moneychanger's card with the painted coin centred */
.cardf.bank { background: radial-gradient(90% 60% at 50% 42%, rgba(255,215,106,.22), transparent 70%), linear-gradient(165deg, #313139, #18181c); border-color: #8a6a1f; color: #f3e3b0; }
.cardf.bank::after { border-color: rgba(212,167,58,.45); }
.cardf.bank .body { justify-content: center; gap: 3px; padding: 18px 4px 6px; }
.cardf.bank .coin-pile { position: relative; width: 80%; aspect-ratio: 1; flex: 0 0 auto; }
.cardf.bank .coin-img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.cardf.bank .coin-pile.n2 .coin-img { width: 82%; height: 82%; }
.cardf.bank .coin-pile.n2 .coin-img:nth-child(1) { left: -4%; top: -2%; }
.cardf.bank .coin-pile.n2 .coin-img:nth-child(2) { left: 22%; top: 20%; }
.cardf.bank .coin-pile.n3 .coin-img { width: 72%; height: 72%; }
.cardf.bank .coin-pile.n3 .coin-img:nth-child(1) { left: -6%; top: -4%; }
.cardf.bank .coin-pile.n3 .coin-img:nth-child(2) { left: 14%; top: 14%; }
.cardf.bank .coin-pile.n3 .coin-img:nth-child(3) { left: 34%; top: 32%; }

.cardf.bank.coin-gold .coin-img, .cardf.bank.coin-starstone .coin-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,215,106,.45)); }
.cardf.bank .nm { color: var(--gold-hi); font-size: .56rem; letter-spacing: .02em; white-space: nowrap; }
/* on the table (bank, seats, pickers) money is just the round coin, seal on its rim */
.cardf.mini.bank { height: auto !important; aspect-ratio: 1; align-self: center; background: none; border: none; box-shadow: none; overflow: visible; border-radius: 50%; }
.cardf.mini.bank::before, .cardf.mini.bank::after { display: none; }
.cardf.mini.bank .body { padding: 0; }
.cardf.mini.bank .coin-pile { width: 100%; }
.cardf.mini.bank .nm { display: none; }
.cardf.mini.bank .val { top: auto; left: auto; right: -5px; bottom: -4px; z-index: 2; }
/* several identical coins: a little pile */
.stack.multi .cardf.bank { box-shadow: none; }
.stack.multi .cardf.bank .coin-img { filter: drop-shadow(0 3px 0 rgba(60,40,10,.95)) drop-shadow(0 3px 0 rgba(60,40,10,.8)) drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
#inspect .inspect-card .cardf.bank .coin-pile { width: 82%; }
#inspect .inspect-card .cardf.bank .body { gap: 18px; }
/* painted coins: the picture is the coin, the value sits on a small seal */
/* painted item pictures inside the card medallion / seat icons */
.cardf .medal .art-img { width: 118%; height: 118%; margin: -9%; max-width: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); position: relative; }
.item-pip .art-img { width: 17px; height: 17px; object-fit: contain; }
.cardf .medal .art-img.wide { width: 150%; height: 150%; margin: -25%; }
.item-pip .art-img.wide { width: 24px; height: 24px; margin: -3.5px; max-width: none; }
/* crest avatars */
.avatar.has-img { background: radial-gradient(circle at 40% 30%, #35363e, #151519); }
.avatar .avatar-img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events: none; }

/* mini cards */
.cardf.mini { width: 54px; height: 76px; border-radius: 5px; }
.cardf.mini::after { inset: 2px; border-radius: 3px; }
.cardf.mini .val { width: 17px; height: 17px; font-size: 0.55rem; top: 3px; left: 3px; }
.cardf.mini .body { padding: 3px 3px 2px; }
.cardf.mini .nm { font-size: 0.42rem; margin-top: 1px; }
.cardf.mini .tx, .cardf.mini .rent, .cardf.mini .spell-foot { display: none; }
.cardf.mini .colorbar { height: 3px; }
.cardf.mini.item .ribbon { height: 9px; font-size: .3rem; padding-left: 18px; }
.cardf.mini.item .body { padding-top: 11px; }
.cardf.mini.item .medal { width: 30px; height: 30px; padding: 4px; border-width: 1.5px; }
.cardf.mini.spell .art { width: 28px; height: 28px; margin-top: 4px; }
.cardf.mini .wild-orb { width: 24px; height: 24px; margin-top: 6px; }

/* click / selection */
.cardf.click { cursor: pointer; }
.cardf.click:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 12px 28px rgba(0,0,0,0.7), 0 0 18px rgba(212,167,58,0.35); }
.cardf.selected { outline: 3px solid var(--gold-hi); outline-offset: 2px; box-shadow: 0 0 24px rgba(255,224,138,0.7), 0 8px 20px rgba(0,0,0,0.5); }

/* ---- card reveal ---- */
.reveal-scene { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 1; transition: opacity 0.25s ease; }
.reveal-scene.out { opacity: 0; }
.reveal-scene .reveal-card {
  position: fixed; left: 0; top: 0; width: 150px; height: 220px; z-index: 61; pointer-events: none;
  transition: left 0.5s cubic-bezier(.4,.0,.2,1), top 0.5s cubic-bezier(.4,.0,.2,1), transform 0.5s cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 18px 50px rgba(0,0,0,0.85), 0 0 30px rgba(212,167,58,0.4);
}
.reveal-scene .reveal-card .nm { font-size: .9rem; }
.reveal-scene .reveal-card .tx { font-size: .68rem; -webkit-line-clamp: 5; }
.reveal-scene .reveal-card .val { width: 34px; height: 34px; font-size: 1.05rem; }
.reveal-scene .reveal-card.item .ribbon { height: 22px; font-size: .62rem; padding-left: 40px; }
.reveal-scene .reveal-card.item .body { padding-top: 28px; }
.reveal-scene .reveal-card.item .medal { width: 78px; height: 78px; padding: 10px; }
.reveal-scene .reveal-card.spell .art { width: 76px; height: 76px; }
.reveal-scene .reveal-card .wild-orb { width: 64px; height: 64px; }
.reveal-scene .reveal-card .rent { font-size: .62rem; }
.reveal-scene .reveal-card .spell-foot { font-size: .6rem; }
.reveal-scene .reveal-count { position: absolute; right: -8px; bottom: -8px; background: var(--gold); color: #1a1405; font-family: var(--display); font-weight: 900; font-size: 0.8rem; padding: 3px 8px; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.6); }
.reveal-scene .reveal-label {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(50% + 128px);
  background: rgba(20,20,23,0.94); border: 1px solid var(--gold-dim); color: var(--gold-hi);
  font-family: var(--display); letter-spacing: 0.05em; font-size: 0.85rem; padding: 8px 16px; border-radius: 20px;
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7); z-index: 62; animation: fadeIn 0.3s ease-out both;
}

/* ================================================================ MODAL / SHEET */
.modal { position: fixed; inset: 0; background: rgba(5,5,5,0); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 18px; }
.modal:not(.hidden) { background: rgba(8,8,9,0.82); animation: fadeIn 0.2s ease-out; backdrop-filter: blur(3px); }
.modal-card {
  background: linear-gradient(#2a2b32, #18181c); border: 1px solid var(--gold-dim); border-radius: 12px;
  box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 24px rgba(212,167,58,0.15);
  padding: 22px; width: min(620px, 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto; animation: scaleIn 0.25s ease-out;
}
.modal-foot button, .counter-actions button, .swap-foot button { min-height: 46px; }
.modal-card h3 { margin: 0 0 14px; font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; color: var(--gold-hi); }
#modal-body { display: flex; flex-direction: column; gap: 10px; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.option-row {
  display: flex; align-items: center; gap: 10px; min-height: 50px;
  padding: 12px; border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; background: var(--well);
  transition: border-color 0.2s, background 0.2s, transform 0.15s; font-size: 1rem;
}
.option-row:hover { border-color: var(--gold-dim); transform: translateX(4px); }
.option-row.sel { border-color: var(--gold); box-shadow: inset 0 0 14px rgba(212,167,58,0.12); }
.option-row .hint { margin-left: auto; text-align: right; }

.sheet { position: fixed; inset: 0; z-index: 52; background: rgba(8,8,9,0.6); display: flex; align-items: flex-end; }
.sheet-card {
  width: 100%; max-height: 78vh; max-height: 78dvh; overflow-y: auto; background: linear-gradient(#2a2b32, #18181c);
  border-top: 1px solid var(--gold-dim); border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--sab));
  box-shadow: 0 -10px 40px rgba(0,0,0,.7); animation: sheetUp .28s cubic-bezier(.2,.8,.2,1);
}
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sheet-titles { flex: 1; min-width: 0; }
.sheet-name { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.sheet-sub { color: var(--muted); font-size: .85rem; font-style: italic; }
.sheet-close { padding: 8px 12px; }
.sheet .sd .s-cards-row .cardf.mini { width: 60px; height: 84px; }

/* ================================================================ COUNTER PROMPT */
.counter-overlay { position: fixed; inset: 0; background: rgba(5,5,5,0); display: flex; align-items: center; justify-content: center; z-index: 55; padding: 18px; }
.counter-overlay:not(.hidden) { background: rgba(10,10,11,0.9); animation: fadeIn 0.2s ease-out; backdrop-filter: blur(3px); }
.counter-card {
  background: radial-gradient(80% 60% at 50% 0%, rgba(123,79,214,0.35), transparent 60%), linear-gradient(#26262c, #121316);
  border: 1px solid #a86ec7; border-radius: 14px; box-shadow: 0 0 50px rgba(0,0,0,0.85), 0 0 30px rgba(170,110,199,0.35);
  padding: 24px; width: min(460px, 100%); text-align: center; animation: scaleIn 0.28s ease-out;
}
.counter-glyph { margin-bottom: 8px; filter: drop-shadow(0 0 16px rgba(201,162,255,0.8)); }
.counter-card h3 { margin: 0 0 6px; font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 1.05rem; color: #e0bff0; }
.counter-text { margin: 0 0 16px; color: var(--ink-dim); font-size: 0.95rem; }
.counter-detail { margin: 6px 0 12px; }
.counter-detail:empty { display: none; }
.cd-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cd-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cd-cards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cd-lbl { font-family: var(--whim); font-style: italic; font-size: 1rem; color: var(--ink-dim); }
.cd-arrow { font-size: 1.6rem; color: var(--gold-hi); }
.cd-ability { padding: 10px 12px; border: 1px dashed var(--spell-glow, #c9a2ff); border-radius: 8px; font-family: var(--display); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #e0bff0; }
.cd-detail { margin-top: 8px; font-size: .85rem; color: var(--ink); font-style: italic; }
.counter-bar { height: 6px; background: #1b1c20; border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
#counter-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #c790e0, #8e44ad); transition: width 0.2s linear; }
.counter-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ================================================================ TOAST */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%);
  background: linear-gradient(#2a2b32, #18181c); border: 1px solid var(--gold-dim); color: var(--ink);
  padding: 12px 20px; border-radius: 10px; z-index: 66; font-weight: 600; max-width: 92vw; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); animation: toastIn 0.3s ease-out;
}
.toast.hiding { animation: toastOut 0.3s ease-in forwards; }
.toast.err { border-color: var(--err); background: linear-gradient(#2a1418, #140b0d); }
.toast.hit { border-color: #ff8f7a; background: linear-gradient(#3a1a1a, #1a0c0c); color: #ffd9d0; }
.toast.win { border-color: var(--gold); font-size: 1.05rem; box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 24px rgba(212,167,58,0.35); }

/* ================================================================ WINNER */
.winner-overlay {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 45%, rgba(212,167,58,0.14), rgba(8,8,9,0.95) 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center;
  animation: fadeIn 0.6s ease-out;
}
.winner-overlay::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg, rgba(212,167,58,0.08) 0 6deg, transparent 6deg 18deg);
  animation: winnerBg 40s linear infinite; pointer-events: none;
}
.winner-crest { font-size: 3rem; color: var(--gold-hi); text-shadow: 0 0 30px rgba(212,167,58,0.9); position: relative; }
.winner-overlay h1 { font-family: var(--decor); font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: 0.1em; color: var(--gold-hi); margin: 0; text-shadow: 0 0 30px rgba(212,167,58,0.6); animation: pulseTurn 1.5s ease-in-out infinite; position: relative; }
.winner-overlay p { color: var(--ink-dim); font-family: var(--whim); font-style: italic; font-size: 1.3rem; margin: 0 0 10px; position: relative; }
.winner-overlay button { position: relative; }

/* ================================================================ AVATAR */
.avatar {
  position: relative; border-radius: 50%; overflow: visible; flex: 0 0 auto;
  border: 2px solid var(--house, var(--gold-dim));
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--house, #474853) 55%, #141518), #121316 75%);
  box-shadow: 0 0 10px rgba(0,0,0,0.6), inset 0 0 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.avatar .avatar-initial { position: absolute; right: -4px; bottom: -4px; z-index: 1; font-family: var(--display); font-weight: 900; font-size: .36em; min-width: 12px; min-height: 12px; color: #1a1405; background: radial-gradient(circle at 40% 30%, #fff0bf, var(--gold-hi) 60%, #a07a22); border: 1.5px solid #1a1405; box-shadow: 0 1px 3px rgba(0,0,0,.7); border-radius: 50%; width: 1.35em; height: 1.35em; display: flex; align-items: center; justify-content: center; line-height: 1; }
.avatar .avatar-initial.big { position: static; background: none; color: var(--gold-hi); width: auto; height: auto; font-size: 1em; }
.avatar.xs { width: 26px; height: 26px; font-size: 20px; }
.avatar.sm { width: 34px; height: 34px; font-size: 24px; }
.avatar.md { width: 44px; height: 44px; font-size: 30px; }

/* ================================================================ SPELL MANDALA */
.mandala { position: fixed; inset: 0; z-index: 63; pointer-events: none; display: flex; align-items: center; justify-content: center; --m: #c9a2ff; --mg: rgba(201,162,255,.5); }
.m-veil { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, var(--mg), rgba(8,8,9,0) 70%); opacity: 0; transition: opacity .4s; }
.mandala.in .m-veil { opacity: .7; }
.mandala[data-effect="unmake"] .m-veil { background: radial-gradient(70% 70% at 50% 50%, rgba(57,255,106,.5), rgba(2,12,4,.85) 75%); }
.mandala[data-effect="unmake"] .m-wrap { filter: drop-shadow(0 0 34px rgba(57,255,106,.9)); }
.mandala[data-effect="unmake"] .m-name { font-size: clamp(1.4rem, 6vw, 2.4rem); animation: pulseTurn .5s ease-in-out infinite; }
.mandala.out .m-veil { opacity: 0; }
.m-wrap { position: relative; width: min(78vmin, 420px); height: min(78vmin, 420px); display: flex; align-items: center; justify-content: center; transform: scale(.2) rotate(-40deg); opacity: 0; transition: transform .7s cubic-bezier(.2,.9,.3,1.1), opacity .45s ease-out; filter: drop-shadow(0 0 22px var(--mg)); }
.mandala.in .m-wrap { transform: scale(1) rotate(0deg); opacity: 1; }
.mandala.out .m-wrap { transform: scale(1.25) rotate(20deg); opacity: 0; transition: transform .5s ease-in, opacity .45s ease-in; }
.m-rings { position: absolute; inset: 0; }
/* each ring is its own layer: the GPU spins it without repainting the SVG */
.m-rings .ring, .m-rings .m-glow { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-rings .ring { will-change: transform; }
.m-rings svg { width: 100%; height: 100%; overflow: visible; display: block; }
.m-rings .r1 { animation: spinCW 18s linear infinite; }
.m-rings .r2 { animation: spinCCW 12s linear infinite; }
.m-rings .r3 { animation: spinCW 30s linear infinite; }
.m-rings .runes { fill: var(--m); font-family: serif; letter-spacing: 2px; opacity: .85; }
@keyframes spinCW { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }
.m-sigil { position: relative; width: 26%; height: 26%; color: var(--m); filter: drop-shadow(0 0 12px var(--m)); animation: sigilPulse 1.2s ease-in-out infinite alternate; }
.m-sigil svg { width: 100%; height: 100%; overflow: visible; }
/* sigil trace: the stroke unrolls from the start dot, then the arrowhead lands */
.m-sigil .wand { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wandDraw .9s .25s cubic-bezier(.3,.1,.3,1) forwards; }
.m-sigil .w-head { opacity: 0; animation: wandHead .25s 1.1s ease-out forwards; }
.m-sigil .w-start { animation: wandStart .5s ease-out both; }
.m-sigil .w-tip { fill: #fff8e0; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--m)); transition: opacity .4s; }
.m-sigil .w-tip.done { opacity: 0; }
@keyframes wandDraw { to { stroke-dashoffset: 0; } }
@keyframes wandHead { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes wandStart { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
.m-sigil .w-head, .m-sigil .w-start { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .m-sigil .wand { animation: none; stroke-dashoffset: 0; } .m-sigil .w-head { animation: none; opacity: 1; } }
@keyframes sigilPulse { from { transform: scale(.94); } to { transform: scale(1.08); } }
.m-name { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -8px); font-family: var(--decor); font-size: clamp(1.1rem, 4.5vw, 1.8rem); color: var(--m); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 18px var(--m), 0 2px 8px rgba(0,0,0,.8); }
.m-caster { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 30px); font-family: var(--whim); font-style: italic; font-size: 1.15rem; color: var(--ink-dim); white-space: nowrap; }

/* ================================================================ INSPECT */
.leave-ico { display: none; }
@media (max-width: 720px) { .leave-ico { display: inline; } }
.inspect { position: fixed; inset: 0; z-index: 75; background: rgba(8,8,9,0.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: fadeIn .15s ease-out; backdrop-filter: blur(4px); }
#inspect .inspect-card .cardf { width: min(92vw, 460px); height: auto; min-height: min(135vw, 640px); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.9), 0 0 40px rgba(212,167,58,.35); animation: scaleIn .18s ease-out; }
#inspect { overflow-y: auto; justify-content: safe center; padding: 16px 0; }
#inspect .inspect-card .cardf .body { padding: 14px 20px 18px; }
#inspect .inspect-card .cardf .val { width: 58px; height: 58px; font-size: 1.8rem; top: 12px; left: 12px; }
#inspect .inspect-card .cardf .nm { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-top: 14px; line-height: 1.1; }
#inspect .inspect-card .cardf .tx, #inspect .inspect-card .cardf.spell .tx { font-size: clamp(1.35rem, 5.6vw, 1.7rem); color: #e6dcff; line-height: 1.4; margin-top: 16px; padding: 0 4px; -webkit-line-clamp: unset; display: block; overflow: visible; font-style: normal; }
#inspect .inspect-card .cardf.wild2 .tx, #inspect .inspect-card .cardf.wildall .tx { color: #4a3a1c; }
#inspect .inspect-card .cardf.item .ribbon { height: 48px; font-size: 1.35rem; padding-left: 70px; }
#inspect .inspect-card .cardf.item .body { padding-top: 60px; }
#inspect .inspect-card .cardf.item .medal { width: min(52vw, 220px); height: min(52vw, 220px); padding: 12px; border-width: 4px; }
#inspect .inspect-card .cardf.item .theme { font-family: var(--whim); font-style: italic; font-size: clamp(1.25rem, 5vw, 1.55rem); color: #5a4522; margin-top: 4px; text-align: center; }
#inspect .inspect-card .cardf .ladder { width: 100%; margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
#inspect .inspect-card .cardf .ladder-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-size: clamp(1.15rem, 4.8vw, 1.45rem); color: #2d2210; }
#inspect .inspect-card .cardf .ladder-dots { flex: 1; border-bottom: 2px dotted rgba(45,34,16,.35); transform: translateY(-5px); }
#inspect .inspect-card .cardf .ladder-v { font-weight: 700; }
#inspect .inspect-card .cardf .ladder-row.full { color: var(--wax); font-weight: 700; }
#inspect .inspect-card .cardf.spell .art { width: min(46vw, 190px); height: min(46vw, 190px); margin-top: 24px; }
#inspect .inspect-card .cardf .wild-orb { width: min(40vw, 170px); height: min(40vw, 170px); margin-top: 40px; }
#inspect .inspect-card .cardf .spell-foot { font-size: 1.35rem; padding: 10px 0 16px; }
#inspect .inspect-card .char-card { width: min(94vw, 500px); padding: 24px; }
#inspect .inspect-card .char-card .avatar { width: 84px; height: 84px; flex: 0 0 84px; }
#inspect .inspect-card .char-card .cc-top { gap: 16px; }
#inspect .inspect-card .char-card .cc-name { font-size: clamp(1.9rem, 8vw, 2.4rem); }
#inspect .inspect-card .char-card .cc-house { font-size: 1.1rem; }
#inspect .inspect-card .char-card .cc-ability { font-size: clamp(1.45rem, 6vw, 1.8rem); line-height: 1.4; margin-top: 16px; }
#inspect .inspect-card .char-card .cc-petrify-label { font-size: 1.2rem; white-space: normal; }
.inspect-hint { font-family: var(--whim); font-style: italic; color: var(--muted); font-size: 1.1rem; }
.seat-pick { width: auto; margin: 0 0 0 6px; padding: 6px 8px; min-height: 36px; font-size: .9rem; }
.seat-chip .seat-name { white-space: nowrap; }
.char-pick.assigned { border-top-style: solid; border-top-color: var(--gold); }
.char-pick .c-tag { position: absolute; top: 8px; right: 10px; font-size: 0.72rem; color: var(--gold-hi); font-family: var(--whim); font-style: italic; }

/* ================================================================ FX CANVAS */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 64; }

/* ================================================================ SCROLLBARS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--well); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ================================================================ RESPONSIVE */
/* desktop: opponents show their full table inline, hand fans */
@media (min-width: 900px) {
  .t-opps { align-items: flex-start; padding: 8px 16px 4px; }
  .seat { width: auto; flex: 1 1 176px; max-width: 240px; cursor: default; } /* fill the row, wrap only when truly out of room */
  .seat .s-ability { display: none; } /* shown in the inline character card */
  .seat .s-detail { display: block; }
  .seat .s-summary { display: none; }
  .seat .sd .cardf.mini { width: 44px; height: 62px; }
  .seat .sd .cardf.mini .medal { width: 24px; height: 24px; padding: 3px; }
  .seat .sd .cardf.mini.spell .art { width: 22px; height: 22px; }
  .t-center { padding: 4px 16px; }
  .pile { width: 64px; height: 88px; }
  .t-my-board { flex: 0 1 auto; }
  .my-section.char-side { flex: 0 0 190px; }
  .board-row { display: contents; }
  .zone#bank-zone { flex: 0 1 300px; }
}

/* phones + tablets: the seat name gets its own line so it never breaks mid-word */
@media (max-width: 899px) {
  .seat .s-header { display: grid; grid-template-columns: auto auto auto auto 1fr; grid-template-areas: "av nm nm nm nm" "av hd bk rn ."; column-gap: 7px; row-gap: 0; align-items: center; }
  .seat .s-header > .avatar { grid-area: av; }
  .seat .s-header > .s-info { grid-area: nm; }
  .seat .s-header > .s-hand { grid-area: hd; }
  .seat .s-header > .s-bank { grid-area: bk; }
  .seat .s-header > .s-renown { grid-area: rn; }
  .seat .s-hand, .seat .s-bank, .seat .s-renown { flex-direction: row; align-items: baseline; gap: 2px; }

  /* opponents: a single row that scrolls sideways; each seat is a full-height
     column showing every placed card (it scrolls itself if a player has a lot) */
  .t-opps { flex: 1 1 0; min-height: max(170px, 30vh); flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px 8px 4px; gap: 6px; }
  .t-opps .seat:first-child { margin-left: auto; }  /* centred when they fit, scrollable when they don't */
  .t-opps .seat:last-child { margin-right: auto; }
  .t-spacer { flex: 0 0 0; }                        /* the seats use the spare height instead */
  .seat { flex: 0 0 176px; width: 176px; max-width: none; overflow-y: auto; scrollbar-width: none; scroll-snap-align: start; padding: 5px 6px; border-radius: 8px; }
  .seat::-webkit-scrollbar { display: none; }
  .seat .s-summary { display: none; }
  .seat .s-detail { display: block; margin-top: 4px; }
  .seat .sd > .char-card { display: none; }         /* the ability is already on the seat */
  .seat .sd .s-zone { margin-top: 0; border-top: 0; padding-top: 0; }
  .seat .sd .s-zone-label { display: none; }        /* the cards speak for themselves */
  .seat .sd .s-cards-row { gap: 4px; }
  .seat .sd .sg-group { padding: 2px; gap: 2px; flex-wrap: wrap; }
  .seat .sd .cardf.mini { width: 44px; height: 62px; }
  .seat .sd .cardf.mini .medal { width: 24px; height: 24px; padding: 3px; }
  .seat .sd .cardf.mini.spell .art { width: 22px; height: 22px; }
  .seat .flag.sets { display: inline-flex; }
}

/* phones */
@media (max-width: 720px) {
  :root { --topbar-h: 46px; }
  .brand-sub { display: none; }
  .brand { font-size: .8rem; }
  .badge { display: none; }
  .topbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .topbar-right { gap: 6px; }
  .icon-btn { width: 34px; height: 34px; }
  #leave-btn { padding: 8px 10px; font-size: .68rem; min-height: 34px; }
  body.in-game .brand-text { display: none; }
  .leave-btn .leave-txt { display: none; }
  .leave-btn { width: 38px; min-height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .turn-pill { font-size: .62rem; padding: 5px 10px; }
  .lobby-grid { grid-template-columns: 1fr; }
  .char-pick { width: calc(50% - 5px); }
  .modes, body[data-mode] .modes { grid-template-columns: 1fr; gap: 10px; }
  .mode-card { min-height: 72px; padding: 12px; }
  .lobby-hero { margin-bottom: 14px; }
  .hero-crest svg { width: 64px; height: 64px; }
  .invite { flex-direction: column; align-items: stretch; }
  .invite-qr { align-self: center; width: 170px; height: 170px; flex-basis: auto; }
  .start-bar { flex-direction: column-reverse; gap: 6px; align-items: stretch; }
  .start-bar .primary.big { min-width: 0; width: 100%; }
  .start-bar .hint { text-align: center; }
  .dh-desktop { display: none; }
  .dh-mobile { display: inline; }
  /* opponents: a centred grid that grows with the players instead of a left strip */
  .seat .s-sets { gap: 3px; }
  /* phones: wider seats fit ~5 cards a row (fewer rows, shorter seats); scroll sideways for the rest */
  .seat { flex: 0 0 min(72vw, 280px); width: min(72vw, 280px); }
  .t-opps { min-height: 30vh; }                     /* opponents always keep a real share of the height */
  .seat .s-ability { font-size: .58rem; line-height: 1.25; margin-top: 3px; }
  .t-my-board { flex: 0 1 auto; max-height: 62vh; } /* phones: my own table gets the bigger share */
  .seat .s-hand b, .seat .s-bank b, .seat .s-renown b { font-size: .74rem; }
  .seat .s-hand small, .seat .s-bank small, .seat .s-renown small { font-size: .5rem; letter-spacing: .06em; }
  .seat .s-summary { border-top: 0; margin-top: 3px; padding-top: 0; }

  /* the piles move into the bottom bar; the hint they replace isn't needed */

  .t-actions .drag-hint { display: none; }
  .t-actions .abtn { min-width: 0; padding: 6px 12px; }
  /* the middle keeps just the latest news and any prompt (lift / Rook) */

  .seat .s-header { gap: 5px; }
  .seat .avatar.sm { width: 26px; height: 26px; font-size: 20px; }
  .seat .s-name { font-size: .68rem; }
  .seat .s-char { font-size: .6rem; }
  .seat .s-summary { margin-top: 4px; padding-top: 3px; }
  .seat .s-flags { margin-top: 3px; }
  .t-center { gap: 10px; padding: 2px 8px; }
  .t-turn-info { max-width: none; }
  .feed-line:not(:nth-last-child(-n+2)) { display: none; }
  .t-center::before { width: 200px; height: 200px; }
  .turn-banner { font-size: .78rem; gap: 2px; }
  .tb-pips i { width: 8px; height: 8px; }
  .feed { margin-top: 2px; }
  .feed-line { font-size: .66rem; }
  .pile { width: 58px; height: 80px; }
  .t-center { gap: 12px; padding: 6px 12px; }
  .t-my-board { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 5px 8px; }
  .t-my-board > * { flex-shrink: 0; } /* zones keep their full height; the board scrolls */
  .my-section { padding: 5px 8px; }
  .my-section h4 { margin-bottom: 4px; font-size: .6rem; }
  .my-section.char-side { flex: 0 0 auto; }
  .my-char .char-card { padding: 5px 8px; }
  .my-char .cc-top { gap: 6px; }
  .my-char .cc-titles { display: flex; align-items: baseline; gap: 8px; }
  .my-char .cc-name { font-size: .74rem; }
  .my-char .cc-ability { margin-top: 3px; font-size: .68rem; line-height: 1.3; }
  .board-row { display: flex; flex-direction: column; gap: 6px; }
  .zone { min-height: 64px; }
  .zone-empty { padding: 2px 4px; font-size: .95rem; }
  .zone#items-zone { flex: 1 1 auto; min-width: 0; }
  .zone#bank-zone { flex: 0 0 auto; width: auto; min-height: 0; }
  .zone#bank-zone .rows-bank { flex-wrap: wrap; }
  .zone#items-zone { min-height: 0; }
  .rows-bank { gap: 8px 10px; }
  .set-group { min-width: 0; padding: 4px 6px; }
  .set-group .sg-theme { display: none; } /* the card ribbons already name the colour */
  .set-group .sg-head { gap: 4px; flex-wrap: wrap; }
  .set-group .sg-name { font-size: .62rem; }
  .set-group .sg-hintsub { display: none; }
  .rows-items { gap: 6px; }
  .sg-cards { gap: 3px; }
  .hand { min-height: 122px; gap: 6px; }
  .t-hand-wrap { padding: 8px 10px 2px; }
  .cardf { width: 76px; height: 110px; }
  .cardf .nm { font-size: 0.54rem; }
  .cardf .val { width: 20px; height: 20px; font-size: .68rem; }
  .cardf.item .medal { width: 38px; height: 38px; padding: 5px; }
  .cardf.item .rent { font-size: .42rem; }
  .cardf.spell .art { width: 34px; height: 34px; margin-top: 4px; }
  .cardf.spell .tx { -webkit-line-clamp: 3; font-size: .42rem; }
  .cardf.mini { width: 42px; height: 60px; }
  .cardf.mini.item .medal { width: 24px; height: 24px; padding: 3px; }
  .cardf.mini.spell .art { width: 22px; height: 22px; }
  .stack-n { min-width: 17px; height: 17px; font-size: .55rem; }
  .t-actions { gap: 6px; padding: 5px 8px calc(5px + var(--sab)); }
  .t-actions .abtn { min-width: 0; flex: 0 0 auto; padding: 5px 12px; font-size: .62rem; min-height: 42px; }
  .t-actions .abtn.primary { flex: 0 0 auto; min-width: 118px; }
  .drag-hint { font-size: .92rem; }
  .sel-bar { padding: 5px 8px; gap: 6px; }
  .sb-what { display: none; }
  .sb-btn { min-height: 44px; }
  .modal-card { padding: 16px; }
  .toast { bottom: calc(120px + var(--sab)); }
}

@media (max-width: 400px) {
  .cardf { width: 72px; height: 104px; }
}

/* short landscape phones: shrink the hand so the board stays visible */
@media (max-height: 520px) {
  .hand { min-height: 100px; }
  .cardf { width: 66px; height: 96px; }
  .t-actions .abtn { min-height: 40px; }
  .drag-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .cosmos { display: none; }
}

/* ---- relic types (no colour coding): emblems in pickers, magical items ---- */
.opt-icon { width: 24px; height: 24px; margin-right: 10px; vertical-align: middle; flex: 0 0 auto; }
img.wild-orb { object-fit: contain; background: none; border-radius: 50%; }
.wild-now { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; font-family: var(--display); font-size: .56rem; letter-spacing: .06em; color: var(--parch-ink); }
.wild-now-ico { width: 18px; height: 18px; }
.cardf.mini .wild-now-ico { width: 14px; height: 14px; }
.item-pip img.pip-art { width: 100%; height: 100%; object-fit: contain; }

/* Hoard Power badges and Renown on my board */
.sg-power { display: flex; flex-direction: column; gap: 1px; margin: 4px 2px 0; padding: 4px 7px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(201,162,255,.16), rgba(201,162,255,.04)); border: 1px solid rgba(201,162,255,.3); font-size: .64rem; line-height: 1.25; color: var(--ink-dim); }
.sg-power b { font-family: var(--display); letter-spacing: .06em; color: #e3d2ff; font-size: .66rem; }
.sg-next { margin: 4px 2px 0; font-size: .62rem; font-style: italic; color: var(--gold-hi); opacity: .85; }
.flag.power { background: rgba(201,162,255,.14); border-color: rgba(201,162,255,.4); color: #e3d2ff; }
.renown-sub { color: #d9c2ff; }
.renown-sub.close { color: var(--gold-hi); text-shadow: 0 0 8px rgba(255,224,138,.5); }
.cardf .power-line { margin-top: 6px; font-size: .7rem; line-height: 1.3; color: var(--parch-ink); }

/* ================================================================ GLIM (guide) */
.glim { position: fixed; left: 12px; bottom: calc(206px + var(--sab)); z-index: 40; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
body:not(.in-game) .glim { bottom: calc(18px + var(--sab)); }
.glim-face { pointer-events: auto; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,138,.25), rgba(201,162,255,.08) 60%, transparent 72%);
  cursor: pointer; animation: glimFloat 4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,224,138,.55)); order: 0; position: relative; }
.glim-face svg { width: 100%; height: 100%; }
.glim.news .glim-face::after { content: ""; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: #ff8fd8; box-shadow: 0 0 8px #ff8fd8; }
.glim.urgent .glim-face { filter: drop-shadow(0 0 14px rgba(255,143,216,.9)); }
.glim.hop .glim-face { animation: glimHop .5s ease-out, glimFloat 4s ease-in-out .5s infinite; }
@keyframes glimFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes glimHop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.glim-bubble { pointer-events: auto; order: 1; max-width: min(340px, calc(100vw - 92px)); padding: 12px 14px 10px; border-radius: 14px 14px 14px 4px; position: relative;
  background: rgba(14,14,18,.96); border: 1px solid rgba(201,162,255,.45); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 22px rgba(201,162,255,.12);
  transform-origin: bottom left; transform: scale(.85); opacity: 0; visibility: hidden; transition: transform .18s ease, opacity .18s ease, visibility .18s; }
.glim.open .glim-bubble { transform: none; opacity: 1; visibility: visible; }
.glim.urgent .glim-bubble { border-color: rgba(255,143,216,.7); }
.glim-text { font-size: .9rem; line-height: 1.38; color: var(--ink); padding-right: 14px; }
.glim-row { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.glim-btn { min-height: 32px; padding: 4px 10px; font-size: .74rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); cursor: pointer; font-family: var(--display); letter-spacing: .04em; }
.glim-btn.primary { background: linear-gradient(#f3cf6a, #c9952b); color: #1c1506; border-color: #8a6a1f; }
.glim-btn.ghost { background: transparent; color: var(--muted); }
.glim-x { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .9rem; }
html.lite .glim-face { animation: none; }
.help-btn { font-family: var(--display); font-weight: 900; font-size: 1rem; }
.rules-link { display: block; margin: 14px auto 0; }
.rules { max-height: 62vh; overflow: auto; padding-right: 4px; }
.rules-sec { margin-bottom: 14px; }
.rules-sec h4 { margin: 0 0 4px; font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--gold-hi); }
.rules-sec p { margin: 3px 0; font-size: .9rem; line-height: 1.4; }
.rules-hoards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rh { display: flex; gap: 8px; align-items: flex-start; }
.rh-ico { width: 34px; height: 34px; flex: 0 0 auto; }
.rh-t { display: flex; flex-direction: column; font-size: .8rem; line-height: 1.3; color: var(--ink-dim); }
.rh-t b { color: var(--ink); font-family: var(--display); letter-spacing: .05em; }
/* Patron picker: what the chosen Patron does */
.char-desc { margin-top: 8px; font-size: .86rem; line-height: 1.35; color: var(--ink-dim); min-height: 2.6em; }
.char-desc b { color: var(--gold-hi); font-family: var(--display); letter-spacing: .04em; }

/* seat header at every size: name on its own line, stats underneath */
.seat .s-header { display: grid; grid-template-columns: auto auto auto auto 1fr; grid-template-areas: "av nm nm nm nm" "av hd bk rn ."; column-gap: 9px; row-gap: 1px; align-items: center; }
.seat .s-header > .avatar { grid-area: av; }
.seat .s-header > .s-info { grid-area: nm; }
.seat .s-header > .s-hand { grid-area: hd; }
.seat .s-header > .s-bank { grid-area: bk; }
.seat .s-header > .s-renown { grid-area: rn; }
.seat .s-hand, .seat .s-bank, .seat .s-renown { flex-direction: row; align-items: baseline; gap: 3px; }

/* ---- painted relics: the painting fills the card, text sits on a dark fade ---- */
.cardf.has-art { background: #0b0b10; overflow: hidden; }
.cardf.has-art .card-art-bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; z-index: 0; filter: blur(10px) brightness(.55) saturate(1.15); }
.cardf.has-art .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 30%; z-index: 0; }
.cardf.has-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 26%, transparent 48%, rgba(5,5,9,.86) 78%, rgba(5,5,9,.95)); }
.cardf.has-art > *:not(.card-art):not(.card-art-bg) { position: relative; z-index: 2; }
.cardf.has-art .val, .cardf.has-art .ribbon { position: absolute; z-index: 3; }
.cardf.has-art .body { justify-content: flex-end; padding-bottom: 5px; }
.cardf.has-art .art-spacer { flex: 1; }
.cardf.has-art .nm { color: #fff3d6; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); }
.cardf.has-art .tx, .cardf.has-art .theme, .cardf.has-art .power-line { color: #e9dcbf; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.cardf.has-art .rent { background: rgba(0,0,0,.45); border-radius: 6px; }
.cardf.has-art .wild-now { color: #e9dcbf; }
.cardf.has-art.wild2, .cardf.has-art.wildall { box-shadow: 0 0 0 1px rgba(201,162,255,.55), 0 0 12px rgba(201,162,255,.25); }
.cardf.mini.has-art .nm { font-size: .44rem; }
.cardf .medal img.painted, .item-pip img.painted { object-fit: cover; border-radius: 50%; width: 100%; height: 100%; margin: 0; filter: none; }
.item-pip img.pip-art.painted { border-radius: 50%; }
#inspect .inspect-card .cardf.has-art .body { padding-top: 0; }
.cardf.has-art .ladder-row, .cardf.has-art .ladder-n, .cardf.has-art .ladder-v { color: #efe3c8; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.cardf.has-art .ladder-row.full .ladder-n, .cardf.has-art .ladder-row.full .ladder-v { color: #ffd27a; }
.cardf.has-art .ladder-dots { border-color: rgba(239,227,200,.35); }

/* ================================================================ ORION (Powered by Orion)
   Same mark and voice as every Orion product: the Orion constellation in thin lines,
   Betelgeuse warm, Rigel blue; the wordmark in Space Grotesk with wide spacing. */
:root { --orion-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --rigel: #5b9dff; --betelgeuse: #ff8a5c; }
.orion line { stroke: currentColor; stroke-width: .9; stroke-linecap: round; opacity: .45; }
.orion circle { fill: currentColor; }
.orion .glow { opacity: .22; }
.orion .betelgeuse { fill: var(--betelgeuse); }
.orion .rigel { fill: var(--rigel); }
.orion.draw line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: orionLine .9s cubic-bezier(.6, 0, .2, 1) forwards; }
.orion.draw circle { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: orionStar .5s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.orion.twinkle circle:not(.glow) { animation: orionTwinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.orion.twinkle circle:nth-of-type(3n) { animation-delay: -1.1s; }
.orion.twinkle circle:nth-of-type(3n+1) { animation-delay: -2.2s; }
@keyframes orionLine { to { stroke-dashoffset: 0; } }
@keyframes orionStar { to { transform: scale(1); } }
@keyframes orionTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* "Powered by Orion": small, quiet, centred */
.orion-foot { display: flex; justify-content: center; padding: 26px 0 calc(10px + var(--sab)); }
.powered { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--orion-display); font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.powered svg { width: 15px; height: 15px; color: var(--muted); }
.powered b { font-weight: 700; letter-spacing: .4em; color: var(--ink-dim); margin-right: -.4em; }
.powered:hover line { opacity: .8; transition: opacity .3s; }
/* the hidden watermark must not inherit letter-spacing, or it widens and pushes the label off-centre */
.powered .zw { font-size: 0; letter-spacing: 0; }

/* About Orion */
.orion-dlg { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #07080d; color: var(--ink); overflow: hidden; }
.orion-dlg::backdrop { background: rgba(0,0,0,.7); }
.orion-about { padding: 30px 26px 22px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(57, 135, 229, .18), transparent 70%); }
.orion-about svg { width: 140px; height: 140px; color: #fff; filter: drop-shadow(0 0 14px rgba(140, 185, 255, .35)); }
.orion-about .wordmark { font-family: var(--orion-display); font-weight: 700; font-size: 24px; letter-spacing: .5em; margin: 12px 0 4px; padding-left: .5em; }
.orion-about p { margin: 6px 0; font-size: .92rem; color: var(--ink-dim); }
.orion-about .meta { font-family: var(--orion-display); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.orion-about button { margin-top: 14px; }

/* intro splash: once per session */
.orion-splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #030306; transition: opacity .6s ease, visibility .6s; cursor: pointer; }
.orion-splash[hidden] { display: none; }
.orion-splash.gone { opacity: 0; visibility: hidden; }
.orion-splash .inner { text-align: center; }
.orion-splash svg { width: 120px; height: 120px; color: #fff; filter: drop-shadow(0 0 16px rgba(140, 185, 255, .45)); }
.orion-splash .title { font-family: var(--decor); font-weight: 900; font-size: 26px; letter-spacing: .06em; color: var(--gold-hi); margin-top: 16px; opacity: 0; animation: orionRise .6s .7s ease forwards; }
.orion-splash .by { font-family: var(--orion-display); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 8px; opacity: 0; animation: orionRise .6s .9s ease forwards; }
.orion-splash .by b { letter-spacing: .4em; color: var(--ink-dim); }
@keyframes orionRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ================================================================ REALISTIC DARK FANTASY
   One card language: near-black stock, an antique-gold hairline frame, a minted value
   seal, no type banners (the name says what it is). Paintings are shown whole. */
.cardf { background: linear-gradient(170deg, #1d1d23, #0b0b0f); color: var(--ink); border: 1px solid #5e4a22;
  box-shadow: 0 6px 16px rgba(0,0,0,.72), inset 0 0 0 1px rgba(212,167,58,.10); }
.cardf::after { border-color: rgba(212,167,58,.26); }
.cardf .val { background: radial-gradient(circle at 35% 30%, #3b3b43, #111115 72%); color: #f0d48e; border: 1px solid #b8913c;
  font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,236,190,.18); }
.cardf .tx { color: #b7aa8a; }
.cardf .nm { letter-spacing: .03em; }
/* relics without a painting yet: the type emblem on dark stock */
.cardf.item::before { background: radial-gradient(90% 60% at 50% 38%, rgba(212,167,58,.10), transparent 70%); }
.cardf.item .body { padding-top: 10px; }
.cardf.item .nm { color: #f1e6c8; }
.cardf.item .medal { width: 58px; height: 58px; padding: 0; background: none; border: 0; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.cardf .rent { background: rgba(0,0,0,.35); border-color: rgba(212,167,58,.22); color: #cdbf9d; }
.cardf .rent-pip.full { color: #f0c36a; }
/* magical items: an astral hairline instead of the rainbow rim */
.cardf.wild2, .cardf.wildall { border: 1px solid rgba(201,162,255,.55); background: linear-gradient(170deg, #1d1a27, #0b0a10);
  box-shadow: 0 6px 16px rgba(0,0,0,.72), 0 0 10px rgba(201,162,255,.14); }
.cardf.wild2 .tx, .cardf.wildall .tx { color: #c5b6e6; }
.cardf.wild2 .nm, .cardf.wildall .nm { color: #efe6ff; }
.wild-orb { box-shadow: 0 4px 12px rgba(0,0,0,.6); }
/* spells: same stock, a faint astral glow behind the sigil */
.cardf.spell { background: radial-gradient(110% 60% at 50% 18%, rgba(201,162,255,.14), transparent 60%), linear-gradient(170deg, #1b1a22, #0b0b0f); border-color: #4c4068; }
.cardf.spell .val { background: radial-gradient(circle at 35% 30%, #3b3946, #111115 72%); color: #e6dcff; border-color: #8f7cc2; }
/* coins */
.cardf.bank { background: radial-gradient(90% 60% at 50% 42%, rgba(240,212,142,.12), transparent 70%), linear-gradient(170deg, #1d1d23, #0b0b0f); }
/* paintings: whole artwork; the blurred copy behind it is brighter so edges blend */
.cardf.has-art .card-art-bg { filter: blur(14px) brightness(.72) saturate(1.1); }
.cardf.has-art .card-art { object-position: 50% 50%; }
.cardf.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 22%, transparent 55%, rgba(6,6,9,.82) 80%, rgba(6,6,9,.94)); }
/* small cards: names fit */
.cardf.mini .nm { font-size: .4rem; letter-spacing: 0; line-height: 1.12; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.cardf.mini .val { width: 17px; height: 17px; font-size: .58rem; top: 3px; left: 3px; }
/* the full-size read: a dark, blurred room around the card (nothing bleeds through) */
#inspect { background: rgba(3,3,6,.9) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* type and accents */
.sec-dot { background: #b8913c !important; box-shadow: none !important; }
.seat { align-self: flex-start; }
.t-opps { align-items: flex-start; }
.char-card { border-top-color: #6d5a33 !important; }
.avatar-initial { background: #1b1b20 !important; color: #e6c57a !important; border-color: #8a7344 !important; }
.die-ico { width: 22px; height: 22px; vertical-align: middle; }
.chip-die { width: 18px; height: 18px; }
.net-opt { letter-spacing: .06em; }
/* Glim: a wisp of light docked in the bottom bar during play */
.glim-face { background: none; filter: drop-shadow(0 0 12px rgba(255,236,190,.6)); }
.glim .glim-spark { transform-origin: 32px 32px; animation: glimSpin 9s linear infinite; }
@keyframes glimSpin { to { transform: rotate(360deg); } }
html.lite .glim .glim-spark { animation: none; }
body.in-game .glim { left: 8px; bottom: calc(8px + var(--sab)); }
body.in-game .glim-face { width: 44px; height: 44px; }
body.in-game .glim-bubble { margin-bottom: 52px; }
body.in-game .t-actions .drag-hint { padding-left: 46px; }
.cardf.mini .nm, .cardf.mini.has-art .nm { font-size: .37rem; letter-spacing: 0; overflow-wrap: break-word; padding: 0 1px; }
#inspect .inspect-card .cardf.item .theme, .cardf.has-art .theme { color: #c9b98f !important; }
.glim.news .glim-face::after { background: #e6c57a; box-shadow: 0 0 8px rgba(230,197,122,.9); }


/* ================================================================ CONSTELLATIONS
   Spells are star figures: white cores, a glow in the spell's colour, fine lines. */
.constellation .c-line { stroke: currentColor; stroke-width: .9; stroke-linecap: round; opacity: .6; }
.constellation .c-glow { fill: currentColor; opacity: .22; }
.constellation .c-star { fill: #fffaf0; }
.cardf.spell .art { width: 52px; height: 52px; margin-top: 6px; filter: drop-shadow(0 0 4px rgba(201,162,255,.55)); }
.cardf.mini.spell .art { width: 30px; height: 30px; }
/* when cast: stars kindle, lines draw in one by one, then the figure flares complete */
.m-sigil { animation: none; filter: drop-shadow(0 0 10px var(--m)); width: 34%; height: 34%; }
.m-sigil .constellation .c-line { stroke-width: 1.1; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cLine .32s var(--d) ease-out forwards; }
.m-sigil .constellation .c-star, .m-sigil .constellation .c-glow { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: cStar .45s var(--d) cubic-bezier(.2, 1.6, .4, 1) forwards; }
.m-sigil .constellation { animation: cDone .7s var(--done) ease-out forwards; }
@keyframes cLine { to { stroke-dashoffset: 0; } }
@keyframes cStar { to { transform: scale(1); } }
@keyframes cDone { 0% { filter: none; } 40% { filter: brightness(1.9) drop-shadow(0 0 8px #fff); } 100% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .m-sigil .constellation .c-line { animation: none; stroke-dashoffset: 0; }
  .m-sigil .constellation .c-star, .m-sigil .constellation .c-glow { animation: none; transform: none; }
}
html.lite .m-sigil .constellation .c-line { animation-duration: .01s; }

/* paintings fill the whole card */
.cardf.has-art .card-art { object-fit: cover; object-position: 50% 45%; }

/* a spell is playing out: the table waits */
body.casting .t-hand-wrap, body.casting .t-actions, body.casting .sel-bar, body.casting #my-board, body.casting .t-opps,
body.casting .t-center { pointer-events: none; }
body.casting .t-actions { opacity: .55; transition: opacity .2s; }

/* Patron crests: a painted shield in a gold ring */
.avatar.has-crest { overflow: hidden; border-color: #9c7a35; background: #0d0d10; box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.7); }
.avatar .avatar-crest { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.avatar.lg { width: 64px; height: 64px; font-size: 40px; }
.char-desc { display: flex; align-items: center; gap: 12px; }
.char-desc .avatar { flex: 0 0 auto; }
#inspect .inspect-card .char-card .avatar.has-crest { border-width: 3px; }

/* launch: two stages, Orion first, then the game's medallion and name */
.orion-splash .stage { grid-area: 1 / 1; text-align: center; transition: opacity .55s ease, transform .9s ease; }
.orion-splash .s-orion .by { font-size: 11px; margin-top: 18px; animation-delay: .8s; }
.orion-splash .s-game { opacity: 0; transform: scale(.94); pointer-events: none; }
.orion-splash.stage2 .s-orion { opacity: 0; transform: scale(1.04); }
.orion-splash.stage2 .s-game { opacity: 1; transform: none; }
.orion-splash .s-game .logo { width: min(260px, 62vw); height: auto; display: block; margin: 0 auto; }
.orion-splash .s-game .title { animation: none; opacity: 1; margin-top: 10px; font-size: 28px; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.hero-crest { filter: none; }
.hero-crest img { width: clamp(120px, 34vw, 190px); animation: crestBreathe 6s ease-in-out infinite; }
@keyframes crestBreathe { 0%, 100% { transform: scale(1); filter: brightness(.95); } 50% { transform: scale(1.025); filter: brightness(1.08); } }
/* the centre news over the moving sky: a dark glass plaque so the turn and the feed always read */
.t-turn-info { background: linear-gradient(180deg, rgba(8,8,12,.80), rgba(5,5,8,.86)); border: 1px solid rgba(212,167,58,.22);
  border-radius: 12px; padding: 6px 14px 7px; box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,236,190,.05);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html.lite .t-turn-info { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,6,9,.9); }
.turn-banner { text-shadow: 0 1px 2px #000, 0 0 12px rgba(212,167,58,.35); }
#action-msg { color: #e3d6b4; text-shadow: 0 1px 2px #000; }
.feed-line { color: #b9ad90; opacity: .8; text-shadow: 0 1px 2px #000; }
.feed-line.new { color: #efe4c6; }
.t-center::before { opacity: .22; }
@media (max-width: 600px) { .t-turn-info { padding: 4px 10px 5px; border-radius: 10px; } }

/* ================================================================ CAST (realistic)
   The table darkens, a hairline astrolabe draws itself, the constellation kindles
   line by line and settles, the name resolves out of a blur. Nothing bounces. */
.mandala .m-veil { background: radial-gradient(75% 70% at 50% 48%, rgba(4,4,8,.64), rgba(2,2,5,.88) 75%); opacity: 0; transition: opacity .7s ease; }
.mandala.in .m-veil { opacity: 1; }
.mandala.out .m-veil { opacity: 0; transition: opacity .6s ease-in; }
.mandala[data-effect="unmake"] .m-veil { background: radial-gradient(75% 70% at 50% 48%, rgba(6,14,9,.6), rgba(1,4,2,.9) 75%); }
.mandala .m-wrap, .mandala[data-effect="unmake"] .m-wrap { transform: scale(.97); opacity: 0; filter: none;
  transition: opacity .7s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.mandala.in .m-wrap { transform: none; opacity: 1; }
.mandala.out .m-wrap { transform: scale(1.02); opacity: 0; filter: blur(3px); transition: opacity .55s ease-in, transform .6s ease-in, filter .55s ease-in; }
.m-bloom { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, var(--mg), transparent 66%); opacity: 0; animation: mBloom 2.6s ease-out forwards; }
@keyframes mBloom { 0% { opacity: 0; transform: scale(.75); } 45% { opacity: 1; } 100% { opacity: .55; transform: scale(1.04); } }
.m-astro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-circle { fill: none; stroke: var(--m); stroke-width: .8; opacity: .34; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cLine 1.5s .1s cubic-bezier(.65,0,.35,1) forwards; }
.m-circle.inner { opacity: .14; animation-delay: .35s; animation-duration: 1.7s; }
.m-ticks { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; animation: mFade 1.2s .5s ease forwards, mTurn 60s linear infinite; }
.m-ticks line { stroke: var(--m); stroke-width: .7; }
@keyframes mFade { to { opacity: .3; } }
@keyframes mTurn { to { transform: rotate(360deg); } }
.mandala .m-sigil { width: 42%; height: 42%; color: var(--m); filter: drop-shadow(0 0 5px var(--mg)); animation: none; }
.m-sigil .constellation .c-line { stroke-width: .75; opacity: .72; animation: cLine .5s var(--d) cubic-bezier(.65,0,.35,1) forwards; }
.m-sigil .constellation .c-star { opacity: 0; transform: scale(.5); animation: cKindle .7s var(--d) ease-out forwards; }
.m-sigil .constellation .c-glow { opacity: 0; transform: scale(.5); animation: cKindleGlow .9s var(--d) ease-out forwards; }
.m-sigil .constellation { animation: cSettle 1.3s var(--done) ease-out forwards; }
@keyframes cKindle { to { opacity: 1; transform: none; } }
@keyframes cKindleGlow { to { opacity: .22; transform: none; } }
@keyframes cSettle { 0% { filter: none; } 35% { filter: brightness(1.5) drop-shadow(0 0 4px rgba(255,250,235,.8)); } 100% { filter: brightness(1.1); } }
.mandala .m-name, .mandala[data-effect="unmake"] .m-name { top: 100%; transform: translate(-50%, -6px); font-family: var(--display); font-weight: 500;
  font-size: clamp(1rem, 3.8vw, 1.5rem); letter-spacing: .42em; padding-left: .42em; color: #efe3c2;
  text-shadow: 0 0 18px var(--mg), 0 2px 10px rgba(0,0,0,.9); animation: mName 1.2s .45s ease-out both; }
@keyframes mName { from { opacity: 0; letter-spacing: .7em; padding-left: .7em; filter: blur(6px); } to { opacity: 1; letter-spacing: .42em; padding-left: .42em; filter: none; } }
.mandala .m-caster { top: 100%; transform: translate(-50%, 36px); font-family: var(--body); font-style: italic; font-size: .95rem; letter-spacing: .05em;
  color: #b7aa8a; text-shadow: 0 2px 8px #000; animation: mFadeIn .9s .7s ease-out both; }
@keyframes mFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.lite .m-bloom { display: none; }
html.lite .m-ticks { animation: mFade 1.2s .5s ease forwards; }
html.lite .mandala .m-sigil { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .m-circle { animation: none; stroke-dashoffset: 0; }
  .m-sigil .constellation .c-star, .m-sigil .constellation .c-glow { animation: none; opacity: 1; transform: none; }
  .m-sigil .constellation .c-glow { opacity: .22; }
  .m-ticks { animation: none; opacity: .3; }
}

/* ================================================================ TWO-TYPE ITEMS
   The seal is a tall pill bearing both type emblems (readable from a fanned hand);
   a plate under the name says "Potions or Monsters"; once placed, the chosen type
   is lit and the other fades. */
.cardf .val.dual-seal { width: 22px; height: 40px; border-radius: 11px; flex-direction: column; gap: 2px; padding: 3px 0;
  background: linear-gradient(180deg, #2c2a33, #111115); border: 1px solid #b8913c; }
.dual-seal .dual-ico { width: 15px; height: 15px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); transition: opacity .2s; }
.dual-seal .dual-ico.off { opacity: .28; }
.dual-seal .dual-ico.on { filter: drop-shadow(0 0 3px rgba(240,212,142,.9)); }
.cardf.mini .val.dual-seal { width: 15px; height: 27px; border-radius: 8px; gap: 1px; padding: 2px 0; }
.cardf.mini .dual-seal .dual-ico { width: 10px; height: 10px; }
#inspect .inspect-card .cardf .val.dual-seal { width: 46px; height: 86px; border-radius: 23px; gap: 6px; }
#inspect .inspect-card .cardf .dual-seal .dual-ico { width: 32px; height: 32px; }
.bridge { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; padding: 2px 6px; max-width: 100%;
  border-top: 1px solid rgba(212,167,58,.35); }
.br-type { display: inline-flex; align-items: center; gap: 2px; font-family: var(--display); font-size: .46rem; letter-spacing: .04em; color: #e9dcbf; white-space: nowrap; transition: opacity .2s; }
.br-type.off { opacity: .35; }
.br-type.on .br-name { color: #f6d98e; }
.br-ico { width: 11px; height: 11px; object-fit: contain; }
.br-or { font-family: var(--body); font-style: italic; font-size: .5rem; color: #b7aa8a; }
.cardf.has-art .bridge { text-shadow: 0 1px 3px #000; }
#inspect .inspect-card .bridge { gap: 12px; margin-top: 10px; padding-top: 8px; }
#inspect .inspect-card .br-type { font-size: 1rem; gap: 6px; }
#inspect .inspect-card .br-ico { width: 26px; height: 26px; }
#inspect .inspect-card .br-or { font-size: 1rem; }
.cardf.wild2.has-art, .cardf.wildall.has-art { border-color: #8f7a4a; box-shadow: 0 6px 16px rgba(0,0,0,.72), 0 0 0 1px rgba(212,167,58,.25); }
/* normal-size cards: the plate is a compact italic line (the seal already shows the emblems) */
.cardf:not(.big) .bridge .br-ico { display: none; }
.cardf:not(.big) .br-type { font-family: var(--body); font-style: italic; font-size: .56rem; letter-spacing: 0; }
.cardf:not(.big) .br-or { font-size: .5rem; }
.cardf:not(.big) .bridge { gap: 3px; padding: 1px 2px 0; }
#inspect .inspect-card .cardf .bridge .br-ico { display: inline-block; }
#inspect .inspect-card .cardf .br-type { font-family: var(--display); font-style: normal; font-size: 1rem; letter-spacing: .04em; }
#inspect .inspect-card .cardf .br-or { font-size: 1rem; }
/* at cast size the stars stay small and sharp: fine points, not blobs */
.mandala .m-sigil .constellation .c-star { transform-box: fill-box; transform-origin: center; animation-name: cKindleSm; }
.mandala .m-sigil .constellation .c-glow { transform-box: fill-box; transform-origin: center; animation-name: cKindleGlowSm; }
@keyframes cKindleSm { to { opacity: 1; transform: scale(.6); } }
@keyframes cKindleGlowSm { to { opacity: .18; transform: scale(.75); } }
.mandala .m-sigil { width: 38%; height: 38%; }
@media (prefers-reduced-motion: reduce) {
  .mandala .m-sigil .constellation .c-star { transform: scale(.6); }
  .mandala .m-sigil .constellation .c-glow { transform: scale(.75); opacity: .18; }
}

/* ================================================================ SPELL CARDS: NIGHT SKY
   The card is a patch of sky (client/art.ts skySVG); words sit on a dark fade below. */
.cardf.spell.has-sky { background: #05060c; overflow: hidden; border-color: #3e3a55; }
.cardf.has-sky .card-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cardf.has-sky .card-sky svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.cardf.has-sky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 46%, rgba(4,5,10,.78) 66%, rgba(4,5,10,.94)); }
.cardf.has-sky > *:not(.card-sky) { position: relative; z-index: 2; }
.cardf.has-sky .val { position: absolute; z-index: 3; }
.cardf.has-sky .body { justify-content: flex-end; padding-bottom: 2px; }
.cardf.has-sky .art-spacer { flex: 1; }
.cardf.has-sky .nm { color: #f3ecda; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }
.cardf.has-sky .tx { color: #cfc6e2; text-shadow: 0 1px 2px #000; }
.cardf.has-sky .spell-foot { position: relative; z-index: 2; }
#inspect .inspect-card .cardf.has-sky .body { padding-top: 0; }
#inspect .inspect-card .cardf.has-sky .art-spacer { min-height: 46vh; }

/* launch splash geometry: the Orion mark dead centre (120px), the words 18px under it;
   the Android loading screen (layout/activity_game.xml) draws the same, so the hand-over
   from native to page doesn't move. Shown only when the head script set html.intro. */
.orion-splash { display: none; background: #07070a; }
html.intro .orion-splash { display: grid; }
.orion-splash .s-orion { position: relative; }
.orion-splash .s-orion [data-orion] svg { display: block; }
.orion-splash .s-orion .by { position: absolute; left: -100px; right: -100px; top: calc(100% + 18px); margin: 0; text-align: center; white-space: nowrap; line-height: 1; }
html.app-shell .orion-splash .s-orion svg { filter: none; }
html.app-shell .orion-splash .s-orion .by { animation: none; opacity: 1; font-family: Roboto, "Noto Sans", sans-serif; font-size: 11px; letter-spacing: .3em; color: #8a8a96; }
html.app-shell .orion-splash .s-orion .by b { font-weight: 400; letter-spacing: inherit; color: inherit; }
.cardf.bank.coin-void .coin-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(150,110,255,.5)); }
.cardf.bank.coin-dragon .coin-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,120,60,.5)); }

/* ================================================================ MY BOARD FILLS THE TABLE
   The Hoards and the Purse take every bit of height the opponents, the centre and the
   hand leave, at fixed proportions: they never resize as cards land, they scroll inside. */
.t-spacer { flex: 0 0 0; }
.t-my-board { flex: 1 1 0; min-height: 0; max-height: none; overflow: hidden; }
.t-my-board .zone { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(212,167,58,.35) transparent; }
@media (min-width: 900px) {
  .t-my-board { flex-wrap: nowrap; align-items: stretch; }
  .t-my-board .zone#items-zone { flex: 1 1 0; }
  .t-my-board .zone#bank-zone { flex: 0 0 clamp(240px, 26vw, 340px); }
  .my-section.char-side { overflow-y: auto; }
}
@media (max-width: 899px) {
  .t-my-board > .board-row { flex: 1 1 0; min-height: 0; flex-shrink: 1; }
  .t-my-board .zone#items-zone { flex: 1 1 0; min-height: 0; }
  /* the Purse is one row of coins that scrolls sideways: the same height whatever it holds */
  .t-my-board .zone#bank-zone { flex: 0 0 auto; min-height: 0; overflow-y: hidden; }
  .t-my-board .zone#bank-zone .rows-bank { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 2px; }
  .t-my-board .zone#bank-zone .rows-bank::-webkit-scrollbar { display: none; }
  .t-my-board .zone#bank-zone .rows-bank > * { flex: 0 0 auto; }
}

/* ================================================================ FIXED FOOTPRINTS
   Nothing on the table resizes as cards arrive. Each Hoard group is as wide as the relics
   its type needs (empty slots wait, dashed), with one reserved line for its power; extras
   scroll sideways. The opponents' strip is a fixed height; each seat scrolls inside. */
.rows-items { --mc-w: 54px; --mc-h: 76px; --mc-gap: 4px; }
@media (max-width: 720px) { .rows-items { --mc-w: 42px; --mc-h: 60px; --mc-gap: 3px; } }
#my-items .set-group { --sw: calc(var(--slots, 2) * var(--mc-w) + (var(--slots, 2) - 1) * var(--mc-gap));
  flex: 0 0 auto; min-width: 0; width: auto; gap: 4px; }
#my-items .sg-head { width: var(--sw); flex-wrap: nowrap; overflow: hidden; min-height: 14px; }
#my-items .sg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#my-items .sg-hintsub, #my-items .sg-badge { display: none; }
#my-items .sg-cards { width: var(--sw); height: var(--mc-h); flex-wrap: nowrap; gap: var(--mc-gap);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
#my-items .sg-cards::-webkit-scrollbar { display: none; }
#my-items .sg-cards > .cardf, .sg-slot { flex: 0 0 var(--mc-w); width: var(--mc-w); height: var(--mc-h); }
.sg-slot { border: 1px dashed rgba(212,167,58,.22); border-radius: 5px; background: rgba(255,255,255,.015); }
.sg-note { width: var(--sw); height: 14px; line-height: 14px; font-size: .56rem; font-style: italic; color: var(--gold-hi); opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-note.power { font-style: normal; font-family: var(--display); letter-spacing: .04em; color: #e3d2ff; opacity: 1; }

.t-opps { max-height: none; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
.t-opps .seat { height: auto; max-height: 100%; overflow-y: auto; scrollbar-width: none; scroll-snap-align: start; }
.t-opps .seat::-webkit-scrollbar { display: none; }
.t-opps .seat:first-child { margin-left: auto; }
.t-opps .seat:last-child { margin-right: auto; }
@media (min-width: 900px) {
  .t-opps { flex: 0 0 clamp(160px, 26vh, 300px); }
  .t-opps .seat { flex: 0 0 260px; width: 260px; }
}
@media (max-width: 899px) {
  .t-opps { flex: 0 0 clamp(150px, 22vh, 220px); min-height: 0; height: auto; }
}
/* wide but short screens (tablets in landscape, small laptops): the board keeps a real share */
@media (min-width: 900px) and (max-height: 820px) {
  .t-opps { flex-basis: clamp(150px, 23vh, 240px); }
  .hand .cardf { width: 84px; height: 122px; }
  .t-hand-wrap { padding-top: 4px; }
  .pile { width: 56px; height: 76px; }
  .t-center { padding-top: 2px; padding-bottom: 2px; }
}

/* ================================================================ TWO ROWS OF CARDS
   Every zone is sized to show exactly two rows of cards, whatever it holds; more
   scrolls inside it. Above the hand, everything scrolls together if the screen is
   too short (the hand and action bar stay put). Opponent seats share the width. */
.t-scroll { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t-scroll::-webkit-scrollbar { display: none; }
.t-scroll > * { flex-shrink: 0; }
.t-scroll > .t-spacer { flex: 1 0 0; }
.t-scroll > .t-my-board { flex: 0 0 auto; max-height: none; overflow: visible; }
.t-scroll > .t-my-board .zone { overflow: hidden; }

/* opponents: one seat fills the strip, two share it, many scroll sideways */
.t-scroll > .t-opps { --om-h: 62px; flex: 0 0 auto; height: auto; min-height: 0; max-height: none;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
.t-scroll > .t-opps > .seat { flex: 1 1 0; min-width: var(--seat-min, 220px); width: auto; max-width: none; height: auto; max-height: none;
  margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.t-opps .seat .s-ability { height: 2.5em; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 0 0 auto; }
.t-opps .seat .s-flags { height: 18px; margin-top: 3px; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; flex: 0 0 auto; }
.t-opps .seat .s-flags .flag { white-space: nowrap; }
.t-opps .seat .s-summary { display: none; }
.t-opps .seat .s-detail { display: block; flex: 0 0 auto; height: calc(2 * var(--om-h) + 34px); overflow-y: auto; scrollbar-width: none; margin-top: 4px; }
.t-opps .seat .s-detail::-webkit-scrollbar { display: none; }
.t-opps .seat .sd > .char-card { display: none; }
.t-opps .seat .sd .cardf.mini { width: 44px; height: var(--om-h); }
@media (max-width: 899px) { .t-scroll > .t-opps { --seat-min: 150px; } }

/* my Hoards: exactly two rows of groups */
.rows-items { --grp-h: calc(var(--mc-h) + 52px); --grp-gap: 8px; height: calc(2 * var(--grp-h) + var(--grp-gap)); gap: var(--grp-gap);
  overflow-y: auto; align-content: flex-start; scrollbar-width: thin; scrollbar-color: rgba(212,167,58,.35) transparent; }
@media (max-width: 720px) { .rows-items { --grp-h: calc(var(--mc-h) + 46px); --grp-gap: 6px; } }
#my-items .set-group { height: var(--grp-h); box-sizing: border-box; }
/* my Purse: exactly two rows of coins */
.t-scroll .rows-bank { --coin-h: 76px; height: calc(2 * var(--coin-h) + 8px); flex-wrap: wrap; align-content: flex-start;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,167,58,.35) transparent; }
@media (max-width: 720px) { .t-scroll .rows-bank { --coin-h: 60px; } }
@media (max-width: 899px) {
  .t-my-board .zone#bank-zone .rows-bank { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; }
}
/* inside the scroller every zone keeps its natural (fixed) height: nothing collapses */
.t-scroll > .t-my-board > .board-row, .t-scroll > .t-my-board .zone#items-zone, .t-scroll > .t-my-board .zone#bank-zone { flex: 0 0 auto; min-height: 0; }
@media (min-width: 900px) {
  .t-scroll > .t-my-board .zone#items-zone { flex: 1 1 0; }
  .t-scroll > .t-my-board .zone#bank-zone { flex: 0 0 clamp(240px, 26vw, 340px); }
}
.t-opps .seat .s-detail { height: calc(2 * (var(--om-h) + 4px) + 20px); }
.t-scroll .rows-bank { --coin-h: 50px; }
@media (max-width: 720px) { .t-scroll .rows-bank { --coin-h: 42px; } }
@media (max-width: 899px) {
  /* compact pieces so more of the two-row zones fits without scrolling */
  .t-scroll > .t-my-board .my-char .char-card { padding: 4px 8px; }
  .t-scroll > .t-my-board .my-char .cc-top { gap: 6px; }
  .t-scroll > .t-my-board .my-char .avatar.sm { width: 28px; height: 28px; }
  .t-scroll > .t-my-board .my-char .cc-ability { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-scroll > .t-center { padding-top: 2px; padding-bottom: 2px; }
  .t-scroll > .t-center .pile { width: 48px; height: 66px; }
  .t-opps .seat .s-ability { height: 1.25em; -webkit-line-clamp: 1; }
}
.t-opps .seat .s-detail { height: calc(2 * (var(--om-h) + 4px) + 14px); }
@media (min-width: 900px) and (max-height: 820px) {
  .rows-items { --mc-w: 44px; --mc-h: 62px; }
  #my-items .cardf.mini { width: 44px; height: 62px; }
  .t-scroll .rows-bank { --coin-h: 44px; }
}

/* ================================================================ LAYOUT BUDGET
   Three screen tiers, one fixed height per zone, chosen so the whole table fits
   without scrolling (zones scroll inside themselves; the opponents take the spare).
   Phones: opponents as full-width ribbons (name, counts, hoard progress as pips),
   one-line Patron, one-row Purse. Tablets up: opponents as columns, two rows of
   cards each. Hoards: two rows of groups everywhere. */
:root { --coin-h: 54px; --hand-h: 170px; --opps-min: 200px; --grp-chrome: 50px; }
.t-scroll > .t-spacer { display: none; }
.t-scroll > .t-opps { flex: 1 1 0; min-height: var(--opps-min); height: auto; max-height: none; }
.t-scroll .rows-items { --grp-h: calc(var(--mc-h) + var(--grp-chrome)); }
.t-scroll .cardf.mini.bank { width: var(--coin-h); }
.hand { min-height: 142px; }
/* a Ward prompt sits above the cast veil, never under it */
.counter-overlay { z-index: 70; }
/* Glim's tips open above the hand, not over it */
body.in-game .glim-bubble { margin-bottom: calc(52px + var(--hand-h)); }

/* ---- tablets and small laptops: columns, two rows of cards ---- */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --hand-h: 150px; --opps-min: 196px; }
  .hand .cardf { width: 84px; height: 122px; }
  .hand { min-height: 126px; }
  .t-hand-wrap { padding: 8px 12px 2px; }
  .t-scroll > .t-opps > .seat { min-width: 200px; }
  .t-opps .seat .s-detail { --om-h: 56px; height: calc(2 * (var(--om-h) + 4px) + 14px); }
  .t-opps .seat .sd .cardf.mini { width: 40px; height: var(--om-h); }
  .t-scroll .rows-items { --mc-w: 44px; --mc-h: 62px; --mc-gap: 3px; --grp-chrome: 48px; }
  .t-scroll #my-items .cardf.mini { width: 44px; height: 62px; }
  .pile { width: 52px; height: 72px; }
  .t-scroll > .t-center { padding-top: 2px; padding-bottom: 2px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  /* the Patron row and the Purse run full width: one line, one row */
  .my-char .cc-ability { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .my-char .cc-house { display: none; }
  .t-scroll .zone#bank-zone .rows-bank { height: calc(var(--coin-h) + 8px); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .t-scroll .zone#bank-zone .rows-bank::-webkit-scrollbar { display: none; }
  .t-scroll .zone#bank-zone .rows-bank > * { flex: 0 0 auto; }
}

/* ---- phones (the Fold's cover screen, and its inner screen): ribbons ---- */
@media (max-width: 767px) {
  :root { --coin-h: 42px; --hand-h: 124px; --opps-min: calc(2 * 64px + 4px); }
  .hand .cardf { width: 72px; height: 104px; }
  .hand { min-height: 108px; gap: 6px; }
  .t-hand-wrap { padding: 6px 10px 2px; }

  /* opponents: one ribbon each, every opponent in view; the row of pips is their table
     (hoard progress, full hoards, shields); tap a ribbon for every card */
  .t-scroll > .t-opps { flex-direction: column; flex-wrap: nowrap; overflow-x: hidden; overflow-y: auto; gap: 4px; padding: 4px 8px; align-items: stretch; }
  .t-scroll > .t-opps > .seat { flex: 0 0 64px; height: 64px; width: auto; min-width: 0; max-width: none; margin: 0; padding: 4px 8px 4px 7px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 22px 28px; row-gap: 4px; column-gap: 6px;
    border-top: 1px solid var(--line-soft); border-left: 3px solid var(--house, var(--gold-dim)); border-radius: 8px; overflow: hidden; }
  .t-scroll > .t-opps > .seat.active { border-left-color: var(--gold-hi); }
  .t-scroll > .t-opps > .seat > .s-header { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; height: 22px; min-width: 0; }
  .t-scroll > .t-opps > .seat .avatar.sm { width: 22px; height: 22px; font-size: 14px; flex: 0 0 auto; }
  .t-scroll > .t-opps > .seat .avatar .avatar-initial { display: none; }
  .t-scroll > .t-opps > .seat > .s-header > .s-info { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: baseline; gap: 6px; overflow: hidden; }
  .t-scroll > .t-opps > .seat .s-name { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-scroll > .t-opps > .seat .s-char { display: none; }
  .t-scroll > .t-opps > .seat .s-hand, .t-scroll > .t-opps > .seat .s-bank, .t-scroll > .t-opps > .seat .s-renown { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 2px; }
  .t-scroll > .t-opps > .seat .s-hand b, .t-scroll > .t-opps > .seat .s-bank b, .t-scroll > .t-opps > .seat .s-renown b { font-size: .8rem; }
  .t-scroll > .t-opps > .seat .s-hand small, .t-scroll > .t-opps > .seat .s-bank small, .t-scroll > .t-opps > .seat .s-renown small { font-size: .46rem; letter-spacing: .06em; }
  .t-scroll > .t-opps > .seat > .s-ability, .t-scroll > .t-opps > .seat > .s-detail { display: none; }
  .t-scroll > .t-opps > .seat > .s-summary { display: flex; grid-row: 2; grid-column: 1; margin: 0; padding: 0; border: 0; min-width: 0; height: 28px; align-items: center; }
  .t-scroll > .t-opps > .seat > .s-summary .s-sets { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 4px; height: 28px; align-items: center; }
  .t-scroll > .t-opps > .seat > .s-summary .s-sets::-webkit-scrollbar { display: none; }
  .t-scroll > .t-opps > .seat > .s-summary .pip-group { flex: 0 0 auto; }
  .t-scroll > .t-opps > .seat > .s-summary .s-none { white-space: nowrap; }
  .t-scroll > .t-opps > .seat > .s-flags { grid-row: 2; grid-column: 2; height: 28px; margin: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
  .t-scroll > .t-opps > .seat > .s-flags .flag { font-size: .5rem; padding: 2px 6px; white-space: nowrap; }

  /* the centre, lower: small piles, the turn, one line of news */
  .t-scroll > .t-center { padding: 3px 8px; gap: 8px; }
  .t-scroll > .t-center .pile { width: 44px; height: 60px; }
  .t-scroll > .t-center .t-turn-info { padding: 3px 10px 4px; border-radius: 10px; }
  .t-scroll > .t-center .turn-banner { font-size: .72rem; gap: 1px; }
  .t-scroll > .t-center .feed { margin-top: 1px; }
  .t-scroll > .t-center .feed-line:not(:last-child) { display: none; }

  /* my Patron: one line */
  .t-scroll .my-char .char-card.strip { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
  .t-scroll .my-char .char-card.strip .cc-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
  .t-scroll .my-char .char-card.strip .cc-name { font-size: .72rem; white-space: nowrap; }
  .t-scroll .my-char .char-card.strip .cc-ability { margin: 0; font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-scroll .my-char .char-card.strip .flag { flex: 0 0 auto; }

  /* my Hoards: two rows of compact groups; my Purse: one row */
  .t-scroll .rows-items { --mc-w: 42px; --mc-h: 60px; --mc-gap: 3px; --grp-chrome: 44px; --grp-gap: 6px; }
  .t-scroll #my-items .cardf.mini, .t-scroll .sg-slot { width: 42px; height: 60px; }
  .t-scroll #my-items .set-group { padding: 3px 5px; gap: 3px; }
  .t-scroll #my-items .sg-head { min-height: 13px; }
  .t-scroll #my-items .sg-name { font-size: .56rem; }
  .t-scroll .sg-note { height: 12px; line-height: 12px; font-size: .52rem; }
  .t-scroll .my-section { padding: 4px 8px; }
  .t-scroll .my-section h4 { margin-bottom: 3px; font-size: .58rem; }
  .t-scroll .zone#bank-zone .rows-bank { height: calc(var(--coin-h) + 8px); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 8px; padding-top: 2px; }
  .t-scroll .zone#bank-zone .rows-bank::-webkit-scrollbar { display: none; }
  .t-scroll .zone#bank-zone .rows-bank > * { flex: 0 0 auto; }
  .t-scroll .zone-empty { font-size: .8rem; padding: 2px 4px; }
}

/* ================================================================ QUIET ZONES
   Zones are barely-there glass: a faint wash on the sky, no borders, no outlines.
   Only the things that must speak keep a mark: whose turn it is (a soft glow), a
   Warded Hoard (a thin gold ring), and where a chosen card can go (a soft lift). */
.zone, .t-my-board .zone, .t-scroll > .t-my-board .zone { border: 0; outline: 0; background: rgba(4,4,8,.22); border-radius: 10px; }
.zone.accepts, .zone.drag-over { outline: 0; animation: none; background: rgba(212,167,58,.07); box-shadow: inset 0 0 0 1px rgba(212,167,58,.28), 0 0 18px rgba(212,167,58,.14); }
body.dragging .zone { outline: 0; }
.seat, .t-scroll > .t-opps > .seat { border: 0; background: rgba(4,4,8,.26); box-shadow: none; }
.seat.active, .t-scroll > .t-opps > .seat.active { animation: none; background: rgba(212,167,58,.08); box-shadow: inset 0 0 0 1px rgba(255,224,138,.35), 0 0 16px rgba(212,167,58,.14); }
.seat.accepts, .seat.drag-over { outline: 0; animation: none; box-shadow: inset 0 0 0 1px rgba(231,110,90,.55), 0 0 18px rgba(231,76,60,.22); }
body.dragging .seat { outline: 0; }
.set-group, #my-items .set-group { border: 0; outline: 0; background: rgba(255,255,255,.035); }
.set-group.complete { background: rgba(143,208,122,.07); box-shadow: none; }
.set-group.overflow { background: rgba(255,255,255,.02); }
.set-group.shielded { outline: 0; box-shadow: inset 0 0 0 1px rgba(255,224,138,.5); }
.set-group.drag-over, body.has-sel .set-group:hover { outline: 0; box-shadow: inset 0 0 0 1px rgba(255,224,138,.4); }
.sg-slot { border: 1px dashed rgba(212,167,58,.16); background: transparent; }
.sg-group { border-left-color: transparent; background: rgba(255,255,255,.03); }
.char-card, .my-char .char-card { border: 0; background: rgba(4,4,8,.22); }
.t-turn-info { border: 0; box-shadow: none; }
.t-my-board { background: none; border-top: 0; }
.t-hand-wrap { border-top: 0; }
.my-section h4 { color: #cdbf9d; }
.sec-dot { display: none !important; }
/* ribbons: deeper glass so names read over bright nebula; two columns when there's room */
.t-scroll > .t-opps > .seat { background: rgba(4,4,8,.36); }
.t-scroll > .t-opps > .seat .s-name, .t-scroll > .t-opps > .seat .s-hand b, .t-scroll > .t-opps > .seat .s-bank b, .t-scroll > .t-opps > .seat .s-renown b { text-shadow: 0 1px 2px #000; }
@media (min-width: 560px) and (max-width: 767px) {
  .t-scroll > .t-opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 64px; gap: 4px 6px; align-content: start; }
  .t-scroll > .t-opps > .seat { height: 64px; }
}
@media (max-width: 767px) {
  .t-scroll .zone#bank-zone .rows-bank > .zone-empty { flex: 1 1 auto; white-space: normal; text-align: left; }
}
/* tablets in landscape (short): trim so the table fits without scrolling */
@media (min-width: 768px) and (max-width: 1199px) {
  .t-scroll > .t-center { padding: 2px 10px; }
  .t-scroll > .t-center .t-turn-info { padding: 3px 12px 4px; }
  .t-scroll > .t-center .turn-banner { font-size: .8rem; gap: 2px; }
  .t-scroll > .t-center .feed { margin-top: 1px; }
  .t-scroll > .t-center .feed-line:not(:nth-last-child(-n+2)) { display: none; }
  .t-opps .seat .s-ability { height: 1.25em; -webkit-line-clamp: 1; }
}
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 820px) {
  :root { --opps-min: 176px; --hand-h: 138px; }
  .t-opps .seat .s-ability { display: none; }
  .t-opps .seat .s-detail { --om-h: 50px; }
  .t-opps .seat .sd .cardf.mini { width: 36px; }
  .t-scroll .rows-items { --mc-w: 40px; --mc-h: 56px; --grp-chrome: 46px; }
  .t-scroll #my-items .cardf.mini, .t-scroll .sg-slot { width: 40px; height: 56px; }
  .hand .cardf { width: 80px; height: 116px; }
  .hand { min-height: 120px; }
}
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 820px) {
  .t-scroll > .t-my-board { padding: 4px 12px; gap: 8px; }
  .t-scroll > .t-my-board .my-section { padding: 4px 8px; }
  .t-scroll > .t-my-board .my-section h4 { margin-bottom: 2px; }
  .t-scroll .rows-items { --grp-chrome: 42px; }
  .t-scroll #my-items .set-group { padding: 3px 6px; gap: 3px; }
  .t-opps .seat .s-detail { --om-h: 48px; }
}
/* desktop: columns tall enough for two rows plus the seat's header, ability and flags */
@media (min-width: 1200px) {
  :root { --opps-min: 244px; }
  .t-opps .seat .s-detail { --om-h: 62px; height: calc(2 * (var(--om-h) + 4px) + 14px); }
  .t-scroll > .t-center .feed-line:not(:nth-last-child(-n+2)) { display: none; }
}
@media (min-width: 1200px) and (max-height: 940px) {
  .t-scroll > .t-center { padding-top: 2px; padding-bottom: 2px; }
  .t-scroll > .t-my-board { padding: 4px 12px; }
  .t-scroll .rows-items { --mc-h: 68px; --mc-w: 48px; }
  .t-scroll #my-items .cardf.mini, .t-scroll .sg-slot { width: 48px; height: 68px; }
  .t-opps .seat .s-ability { height: 1.25em; -webkit-line-clamp: 1; }
}
/* the top bar keeps the turn pill readable: the subtitle goes first, then the brand */
@media (max-width: 1023px) { body.in-game .brand-sub { display: none; } }
@media (max-width: 899px) { body.in-game .brand-text { display: none; } }
.topbar-mid .turn-pill { flex: 0 1 auto; min-width: 0; }

/* opponents' cards and pips: a size up, so a rival's table reads at a glance */
.item-pip { width: 28px; height: 28px; }
.item-pip .pip-art, .item-pip .pip-art svg { width: 20px; height: 20px; }
.item-pip .art-img { width: 22px; height: 22px; }
.pip-n { font-size: .62rem; }
@media (max-width: 767px) { .t-scroll > .t-opps > .seat > .s-summary, .t-scroll > .t-opps > .seat > .s-summary .s-sets, .t-scroll > .t-opps > .seat > .s-flags { height: 34px; } }
@media (max-width: 767px) {
  .t-scroll > .t-opps > .seat { grid-template-rows: 22px 34px; height: 70px; flex-basis: 70px; }
  :root { --opps-min: calc(2 * 70px + 4px); }
}
@media (min-width: 560px) and (max-width: 767px) { .t-scroll > .t-opps { grid-auto-rows: 70px; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .t-opps .seat .s-detail { --om-h: 64px; }
  .t-opps .seat .sd .cardf.mini { width: 46px; }
  :root { --opps-min: 212px; }
}
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 820px) {
  .t-opps .seat .s-detail { --om-h: 56px; }
  .t-opps .seat .sd .cardf.mini { width: 40px; }
  :root { --opps-min: 196px; }
  .t-scroll .rows-items { --mc-h: 52px; --mc-w: 37px; }
  .t-scroll #my-items .cardf.mini, .t-scroll .sg-slot { width: 37px; height: 52px; }
}
@media (min-width: 1200px) {
  .t-opps .seat .s-detail { --om-h: 72px; }
  .t-opps .seat .sd .cardf.mini { width: 52px; height: var(--om-h); }
  :root { --opps-min: 264px; }
}
@media (min-width: 1200px) and (max-height: 940px) {
  .t-scroll .rows-items { --mc-h: 64px; --mc-w: 46px; }
  .t-scroll #my-items .cardf.mini, .t-scroll .sg-slot { width: 46px; height: 64px; }
}

/* relics on the table carry no value seal: the Hoard's progress is what counts there */
#my-items .cardf.mini .val, .t-opps .sd .cardf.mini .val, .sheet .sd .cardf.mini .val, .discard-grid .cardf.mini.item .val { display: none; }
/* badges never clipped: a Hoard group holds at most its size, so its row needn't scroll;
   only the "extra" and loose-wild groups do. The Purse row gets breathing room. */
#my-items .set-group:not(.overflow):not(.unassigned) .sg-cards { overflow: visible; }
#my-items .warden-mark.on-set { top: 1px; right: 3px; width: 26px; height: 26px; }
.t-scroll .zone#bank-zone .rows-bank { padding: 7px 8px 5px; height: calc(var(--coin-h) + 14px); }
@media (min-width: 900px) { .t-scroll .rows-bank { padding: 7px 8px 5px; height: calc(2 * var(--coin-h) + 22px); } }
@media (max-width: 767px) { :root { --coin-h: 38px; } }
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 820px) {
  :root { --opps-min: 214px; }
  .t-opps .seat .sd .s-zone-label { display: none; }
  .t-opps .seat .s-flags { height: 14px; margin-top: 2px; }
  .t-opps .seat .s-detail { height: calc(2 * (var(--om-h) + 4px) + 8px); margin-top: 2px; }
}
@media (min-width: 1200px) and (max-height: 940px) {
  .t-scroll > .t-my-board .my-section { padding: 4px 8px; }
  .t-scroll > .t-my-board .my-section h4 { margin-bottom: 3px; }
  .t-scroll .rows-items { --grp-chrome: 46px; }
  .t-scroll #my-items .set-group { padding: 4px 6px; gap: 3px; }
}
@media (max-width: 767px) {
  /* room for three ribbons: tighter group chrome, Patron strip and piles */
  .t-scroll .rows-items { --grp-chrome: 40px; }
  .t-scroll #my-items .set-group { padding: 2px 5px; gap: 2px; }
  .t-scroll .my-char .char-card.strip { padding: 2px 8px; }
  .t-scroll .my-char .char-card.strip .avatar.xs { width: 24px; height: 24px; }
  .t-scroll > .t-center .pile { width: 41px; height: 56px; }
  .t-scroll > .t-center .t-turn-info { padding: 2px 10px 3px; }
}
@media (max-width: 767px) {
  .hand .cardf { width: 68px; height: 98px; }
  .hand { min-height: 102px; }
  :root { --hand-h: 118px; }
  .t-scroll > .t-my-board { gap: 4px; padding-top: 3px; padding-bottom: 3px; }
  .t-scroll > .t-my-board > .board-row { gap: 4px; }
  .t-scroll .my-section { padding: 3px 8px; }
  .t-scroll .my-section h4 { margin-bottom: 2px; }
  .t-scroll .zone#bank-zone .rows-bank { padding: 6px 8px 4px; height: calc(var(--coin-h) + 12px); }
}

/* ================================================================ OMENS, LAST ROUND */
.omen-line { font-size: .64rem; font-style: italic; color: #d9c2ff; margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.omen-line b { font-style: normal; font-family: var(--display); font-weight: 600; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #efe3ff; margin-right: 2px; }
.omen-line.hidden { display: none; }
.tb-last { display: block; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #ffb0a6; margin-top: 2px; }
@media (max-width: 767px) {
  .t-scroll > .t-center .omen-line { font-size: .58rem; margin-top: 1px; }
  .t-scroll > .t-center .t-turn-info:has(.omen-line:not(.hidden)) .feed { display: none; } /* the Omen takes the news line */
}

/* the action bar: buttons start right of Glim; a long ability name trims instead of running under it */
.t-actions #a-ability { min-width: 0; }
.t-actions #a-ability .ab-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  body.in-game .t-actions { padding-left: 60px; }
  .t-actions #a-ability { flex: 1 1 auto; max-width: 56vw; }
}

/* ================================================================ OMENS, MADE OBVIOUS
   A new Omen rises as a card over the darkened table, then flies into a badge that
   glows in the centre all round. Each Omen has its own emblem and colour (--oc). */
.omen-line { display: none !important; }
.omen-art { display: inline-grid; place-items: center; color: var(--oc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--oc) 70%, transparent)); }
.omen-art svg { width: 100%; height: 100%; display: block; }
.omen-art.sm { width: 22px; height: 22px; flex: 0 0 22px; }
.omen-art.lg { width: min(34vw, 132px); height: min(34vw, 132px); margin: 6px auto 4px; }

.omen-badge { display: flex; align-items: center; gap: 7px; margin: 5px auto 0; max-width: 100%; padding: 3px 12px 3px 6px; border-radius: 999px; cursor: pointer;
  font: inherit; text-align: left; color: #f3ecda; background: color-mix(in srgb, var(--oc) 14%, rgba(6,6,10,.82));
  border: 1px solid color-mix(in srgb, var(--oc) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--oc) 35%, transparent), inset 0 0 10px color-mix(in srgb, var(--oc) 12%, transparent);
  animation: omenGlow 3.2s ease-in-out infinite; }
.omen-badge.hidden { display: none; }
.omen-badge.fresh { animation: omenLand .7s cubic-bezier(.2,.8,.3,1), omenGlow 3.2s ease-in-out .7s infinite; }
.omen-badge .ob-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.omen-badge .ob-text b { font-family: var(--display); font-weight: 700; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oc); }
.omen-badge .ob-text span { font-size: .62rem; font-style: italic; color: #e6dcc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes omenGlow { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--oc) 25%, transparent); } 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--oc) 50%, transparent); } }
@keyframes omenLand { from { transform: scale(1.35); filter: brightness(1.8); } to { transform: none; filter: none; } }
@media (max-width: 767px) {
  .t-scroll > .t-center .omen-badge { margin-top: 3px; padding: 2px 10px 2px 4px; }
  .t-scroll > .t-center .t-turn-info:has(.omen-badge:not(.hidden)) .feed { display: none; }
}

.omen-reveal { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--oc) 16%, rgba(4,4,8,.72)), rgba(2,2,5,.92) 75%);
  animation: orVeil .45s ease-out both; }
.omen-reveal .or-card { width: min(78vw, 300px); padding: 20px 20px 16px; text-align: center; border-radius: 16px;
  background: linear-gradient(170deg, rgba(22,20,30,.96), rgba(8,8,12,.98));
  border: 1px solid color-mix(in srgb, var(--oc) 60%, transparent);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb, var(--oc) 30%, transparent), inset 0 0 0 1px rgba(255,255,255,.04);
  animation: orRise .7s cubic-bezier(.2,.9,.25,1) both; transition: transform .6s cubic-bezier(.5,0,.75,0), opacity .6s ease-in; }
.or-kicker { font-family: var(--display); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: #b7aa8a; }
.or-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 7vw, 1.9rem); letter-spacing: .08em; color: var(--oc);
  text-shadow: 0 0 18px color-mix(in srgb, var(--oc) 55%, transparent), 0 2px 8px #000; animation: orName .9s .25s ease-out both; }
.or-rule { width: 60%; height: 1px; margin: 10px auto; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oc) 70%, transparent), transparent); }
.or-text { font-size: 1rem; line-height: 1.4; color: #efe6cf; }
.or-hint { margin-top: 12px; font-size: .62rem; font-style: italic; color: #8a8a96; }
.omen-reveal .omen-art.lg { animation: orArt 1.1s .15s cubic-bezier(.2,.9,.3,1) both; }
.omen-reveal.out { animation: orVeilOut .6s ease-in forwards; }
.omen-reveal.out .or-card { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.12); opacity: .2; }
@keyframes orVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes orVeilOut { to { opacity: 0; } }
@keyframes orRise { from { opacity: 0; transform: translateY(26px) scale(.92) rotateX(18deg); } to { opacity: 1; transform: none; } }
@keyframes orArt { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes orName { from { opacity: 0; letter-spacing: .4em; filter: blur(5px); } to { opacity: 1; letter-spacing: .08em; filter: none; } }

/* Truce: hexes in hand are sealed for the round */
#hand .cardf.omen-blocked { filter: grayscale(.85) brightness(.55); }
#hand .cardf.omen-blocked::after { content: attr(data-omen-tag); position: absolute; inset: auto 0 38% 0; z-index: 5; border: 0; border-radius: 0;
  text-align: center; font-family: var(--display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #ece6d4;
  background: rgba(10,10,14,.82); padding: 3px 0; }
.omen-badge .ob-text span { text-transform: none; letter-spacing: .01em; font-family: var(--body); }
.omen-badge .ob-text b { font-style: normal; }

/* ================================================================ TABLE, REVISED
   One layout for every screen, narrowest first (the Fold's cover screen is ~344px):
   rivals centred; a slim play bar (piles, whose turn, round, Omen, prompts, news);
   then my board: Hoards on a fixed two-row footprint across the full width, my Patron
   and my Purse (one row of coins that scrolls sideways). Nothing resizes as cards land. */

/* ---- rivals: always centred ---- */
#table .t-opps { justify-content: flex-start; }
#table .t-opps > .seat:first-child { margin-left: auto; }
#table .t-opps > .seat:last-child { margin-right: auto; }
#table .t-opps > .seat { flex: 0 1 380px; min-width: min(250px, 100%); max-width: 420px; }
#table .t-opps .seat .s-header { justify-content: center; }
#table .t-opps .seat .s-info { flex: 0 1 auto; align-items: center; text-align: center; }
#table .t-opps .seat .s-ability { text-align: center; }
#table .t-opps .seat .s-flags { justify-content: center; }
#table .t-opps .seat .sd .s-cards-row { justify-content: center; }
#table .t-opps .seat .s-sets { justify-content: center; }
@media (max-width: 767px) {
  /* ribbons: one per rival, centred under each other */
  #table .t-opps > .seat { flex: 0 0 70px; width: 100%; max-width: 520px; min-width: 0; margin-left: auto; margin-right: auto; }
}
@media (min-width: 560px) and (max-width: 767px) {
  #table .t-scroll > .t-opps { grid-template-columns: repeat(auto-fit, minmax(250px, 340px)); justify-content: center; }
  #table .t-opps > .seat { margin: 0; }
}

/* ---- Stonebind's mark: a boulder in crossed chains ---- */
.stonebound-ico { display: inline-block; flex: 0 0 auto; vertical-align: middle; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.stonebound-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stonebound-ico.xs { width: 13px; height: 13px; margin-right: 3px; }
.stonebound-ico.sm { width: 20px; height: 20px; }
.stonebound-ico.md { width: 40px; height: 40px; }
.stonebound-ico.lg { width: 64px; height: 64px; }
.sb-rock { fill: #737783; stroke: #26282e; stroke-width: 2; stroke-linejoin: round; }
.sb-face { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.4; }
.sb-crack { fill: none; stroke: #2b2d33; stroke-width: 1.6; stroke-linecap: round; }
.sb-chain ellipse { fill: none; stroke: #dfe2ea; stroke-width: 2.4; }
.sb-chain rect { fill: #c3c7d1; stroke: #3a3d45; stroke-width: .8; }
.sb-lock rect { fill: #caa34c; stroke: #3b2a08; stroke-width: 1.2; }
.sb-lock path { stroke: #caa34c; stroke-width: 2.6; }
.sb-lock .sb-key { fill: #3b2a08; }
.flag.petr { display: inline-flex; align-items: center; }
.s-av { position: relative; display: inline-flex; flex: 0 0 auto; }
.s-av .stonebound-ico { position: absolute; right: -7px; bottom: -6px; z-index: 2; }
.seat.is-petrified .s-av .avatar { filter: grayscale(1) brightness(.7); }
.cc-petrify { gap: 6px; }
.char-card.strip .flag.petr { white-space: nowrap; }

/* ---- the play bar ---- */
#table .t-scroll > .play-bar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: relative;
  width: calc(100% - 16px); max-width: 860px; margin: 4px auto; padding: 6px 10px 5px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(10,10,15,.82), rgba(6,6,9,.88)); box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,167,58,.16); }
html.lite #table .play-bar { background: rgba(6,6,9,.92); }
#table .play-bar::before { display: none; }
#table .play-bar .pb-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#table .play-bar .pb-piles { display: flex; gap: 6px; flex: 0 0 auto; }
#table .play-bar .pile { width: 36px; height: 50px; border-radius: 5px; }
#table .play-bar .pile .pile-back { border-radius: 5px; }
#table .play-bar .pile .pile-back::before { font-size: 1.4rem; }
#table .play-bar .pile .pile-back b { font-size: .8rem; }
#table .play-bar .pile .cardf.mini { width: 36px; height: 50px; border-radius: 5px; }
#table .play-bar .pile .cardf.mini.bank { width: 36px; }
#table .play-bar .pile-count { right: -5px; top: -5px; min-width: 16px; height: 16px; font-size: .55rem; }
#table .play-bar .pile.accepts { transform: scale(1.12); }
#table .play-bar .t-turn-info { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; }
#table .play-bar .turn-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: .9rem; letter-spacing: .08em; animation: none; }
#table .play-bar .tb-who { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
#table .play-bar .tb-who .avatar { width: 22px; height: 22px; font-size: 14px; }
#table .play-bar .tb-who .avatar .avatar-initial { display: none; }
#table .play-bar .tb-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#table .play-bar .turn-banner.my-turn .tb-main { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255,224,138,.55), 0 1px 2px #000; }
#table .play-bar .tb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: .72rem; color: var(--ink-dim); text-shadow: none; }
#table .play-bar .tb-pips { gap: 4px; }
#table .play-bar .tb-pips i { width: 9px; height: 9px; }
#table .play-bar .tb-pips.idle i { opacity: .35; box-shadow: none; background: transparent; }
#table .play-bar .tb-moves { font-style: italic; color: #efe4c6; }
#table .play-bar .tb-round, #table .play-bar .tb-last { font-family: var(--display); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(212,167,58,.35); color: #e6cf94; margin: 0; display: inline-block; }
#table .play-bar .tb-last { border-color: rgba(255,140,120,.55); color: #ffb0a6; }
#table .play-bar #action-msg { font-size: .72rem; min-height: 0; text-align: left; margin-top: 1px; }
#table .play-bar #action-msg:empty { display: none; }
#table .play-bar .pb-omen { flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; }
#table .play-bar .pb-omen:empty { display: none; }
#table .play-bar .omen-badge { margin: 0; max-width: 100%; padding: 4px 8px 4px 5px; gap: 6px; }
#table .play-bar .omen-badge .ob-text { min-width: 0; }
.omen-badge .ob-more { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .55rem; font-style: normal;
  color: #0b0b10; background: var(--oc); opacity: .85; }
#table .play-bar .pb-prompt:empty { display: none; }
#table .play-bar .feed { margin: 0; padding-top: 3px; border-top: 1px solid rgba(212,167,58,.12); text-align: left; }
#table .play-bar .feed:empty { display: none; }
#table .play-bar .feed-line { font-size: .7rem; }
#table .play-bar .feed-line:not(:nth-last-child(-n+2)) { display: none; }

/* prompts that need me now */
.pb-card { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: slideUp .3s ease-out both; }
.pb-card .pbc-text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pb-card .pbc-text b { font-family: var(--display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.pb-card .pbc-text span { font-size: .76rem; color: var(--ink-dim); font-style: italic; }
.pb-card .pbc-btn { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 42px; padding: 5px 12px; line-height: 1.1; }
.pb-card .pbc-l { font-size: .7rem; }
.pb-card .pbc-s { font-family: var(--body); font-style: italic; font-size: .66rem; text-transform: none; letter-spacing: 0; font-weight: normal; opacity: .85; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stone-prompt { background: linear-gradient(90deg, rgba(150,155,170,.16), rgba(150,155,170,.04)); box-shadow: inset 0 0 0 1px rgba(190,195,210,.28); }
.stone-prompt .pbc-text b { color: #dfe2ea; }
.rummage-prompt .pbc-btn { flex: 1 1 120px; }

@media (max-width: 767px) {
  #table .t-scroll > .play-bar { width: calc(100% - 12px); padding: 5px 8px 4px; margin: 3px auto; gap: 3px; }
  #table .play-bar .pb-row { gap: 8px; }
  #table .play-bar .pile, #table .play-bar .pile .cardf.mini { width: 30px; height: 42px; }
  #table .play-bar .turn-banner { font-size: .76rem; }
  #table .play-bar .tb-meta { font-size: .66rem; gap: 3px 6px; }
  #table .play-bar .tb-moves { display: none; }
  #table .play-bar .pb-omen { max-width: 42%; }
  #table .play-bar .omen-badge .ob-text span { display: none; }
  #table .play-bar .omen-badge .ob-text b { font-size: .58rem; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #table .play-bar .feed-line:not(:last-child) { display: none; }
  #table .play-bar .feed-line { font-size: .66rem; }
  .pb-card { padding: 6px 7px; gap: 6px 8px; }
  .pb-card .pbc-text span { font-size: .7rem; }
  .stone-prompt .pbc-btn { flex: 1 1 100%; }
}

/* ---- my board: Hoards across the full width; Patron and Purse beside each other ---- */
#table .t-scroll > .t-my-board { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "char" "items" "bank"; gap: 4px; padding: 2px 8px 4px; }
#table .t-my-board .board-row { display: contents; }
#table .t-my-board .char-side { grid-area: char; min-width: 0; overflow: visible; }
#table .t-my-board .zone#items-zone { grid-area: items; min-width: 0; min-height: 0; padding: 4px 6px 5px; overflow: hidden; }
#table .t-my-board .zone#bank-zone { grid-area: bank; min-width: 0; min-height: 0; padding: 4px 6px 4px; overflow: hidden; width: auto; }
#table .t-my-board .my-section h4 { margin: 0 0 3px; }
@media (min-width: 768px) {
  #table .t-scroll > .t-my-board { grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); grid-template-areas: "items items" "char bank"; padding: 4px 12px; gap: 6px; }
  #table .t-my-board .char-side { align-self: stretch; }
  #table .t-my-board .char-side .char-card { height: 100%; box-sizing: border-box; }
}

/* the Hoards: nine fixed groups in two fixed rows; the rows scroll sideways together
   when the screen is narrower than they are */
#table #my-items { --mc-w: 36px; --mc-h: 50px; --mc-gap: 3px;
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; height: auto; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 0 1px; align-content: stretch; }
#table #my-items::-webkit-scrollbar { display: none; }
#table #my-items .hoard-row { display: flex; gap: 5px; width: max-content; min-width: 100%; }
#table #my-items .set-group { flex: 1 0 auto; height: auto; width: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 5px 4px; }
#table #my-items .set-group.empty { background: rgba(255,255,255,.018); }
#table #my-items .sg-head { width: 100%; min-width: var(--sw); height: 13px; min-height: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
#table #my-items .sg-name { font-size: .5rem; letter-spacing: .08em; flex: 0 1 auto; }
#table #my-items .set-group.empty .sg-name { color: var(--muted); }
#table #my-items .sg-prog { margin-left: auto; gap: 2px; }
#table #my-items .sg-prog i { width: 5px; height: 5px; }
.sg-pow { margin-left: auto; font-family: var(--display); font-size: .48rem; letter-spacing: .04em; color: #e3d2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sg-extra { flex: 0 0 auto; font-family: var(--display); font-size: .5rem; color: #1a1405; background: var(--gold-hi); border-radius: 6px; padding: 0 4px; line-height: 11px; }
#table #my-items .sg-cards { width: var(--sw); height: var(--mc-h); display: flex; flex-wrap: nowrap; gap: var(--mc-gap); overflow: visible; }
#table #my-items .sg-cards.has-extra { overflow-x: auto; scrollbar-width: none; }
#table #my-items .sg-cards > .cardf, #table #my-items .sg-slot { flex: 0 0 var(--mc-w); width: var(--mc-w); height: var(--mc-h); }
#table #my-items .cardf.mini.extra { opacity: .75; outline: 1px dashed rgba(255,224,138,.5); outline-offset: -1px; }
#table #my-items .sg-slot { display: grid; place-items: center; border-radius: 4px; border: 1px dashed rgba(212,167,58,.2); background: rgba(255,255,255,.012); }
#table #my-items .sg-slot-ico { width: 62%; height: auto; opacity: .16; filter: grayscale(1) brightness(1.6); pointer-events: none; }
#table #my-items .sg-note { display: none; }
#table #my-items .warden-mark.on-set { top: -6px; right: -4px; width: 22px; height: 22px; }
#table #my-items .cardf.mini .nm { font-size: .32rem; }
@media (min-width: 768px) { #table #my-items { --mc-w: 44px; --mc-h: 62px; } #table #my-items .sg-name { font-size: .54rem; } }
@media (min-width: 1200px) { #table #my-items { --mc-w: 52px; --mc-h: 72px; --mc-gap: 4px; } #table #my-items .cardf.mini .nm { font-size: .37rem; } }
@media (min-width: 1200px) and (max-height: 940px) { #table #my-items { --mc-w: 46px; --mc-h: 64px; } }
@media (min-width: 768px) and (max-height: 820px) { #table #my-items { --mc-w: 40px; --mc-h: 56px; } }

/* the Purse: one row of every coin, scrolling sideways */
#table .t-my-board #my-bank { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; height: calc(var(--coin-h) + 12px); padding: 6px 6px 4px; scrollbar-width: none; }
#table .t-my-board #my-bank::-webkit-scrollbar { display: none; }
#table .t-my-board #my-bank > * { flex: 0 0 auto; }
#table .t-my-board #my-bank > .zone-empty { flex: 1 1 auto; white-space: normal; text-align: left; font-size: .8rem; }
#table .t-my-board #my-bank .cardf.mini.bank { width: var(--coin-h); }

/* ---- the full Omen card ---- */
.omen-art.xl { width: 116px; height: 116px; }
.omen-full { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; padding: 16px; cursor: pointer;
  background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--oc) 14%, rgba(4,4,8,.78)), rgba(2,2,5,.93) 75%); animation: orVeil .3s ease-out both; }
.omen-full.out { animation: orVeilOut .26s ease-in forwards; }
.of-card { width: min(100%, 380px); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 18px; text-align: center;
  background: linear-gradient(175deg, rgba(20,19,28,.98), rgba(8,8,12,.99)); border: 1px solid color-mix(in srgb, var(--oc) 60%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.75), 0 0 46px color-mix(in srgb, var(--oc) 28%, transparent); animation: orRise .45s cubic-bezier(.2,.9,.25,1) both; }
.of-sky { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 75% at 50% 55%, color-mix(in srgb, var(--oc) 34%, #0b0b14), #05050a 78%);
  border-bottom: 1px solid color-mix(in srgb, var(--oc) 40%, transparent); }
.of-stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fffaf0; }
.of-stars .tw { animation: ofTwinkle 3.6s ease-in-out infinite; }
@keyframes ofTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.of-sky .omen-art { position: relative; filter: drop-shadow(0 0 14px var(--oc)) drop-shadow(0 0 3px rgba(0,0,0,.8)); animation: orArt .8s .05s cubic-bezier(.2,.9,.3,1) both; }
.of-body { padding: 14px 20px 18px; }
.of-body .or-name { animation: none; }
.of-text { font-size: 1.02rem; line-height: 1.4; color: #efe6cf; }
.of-rules { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.of-rules li { position: relative; padding-left: 20px; font-size: .9rem; line-height: 1.35; color: #e2d8bd; }
.of-rules li::before { content: "\2726"; position: absolute; left: 2px; top: 0; color: var(--oc); font-size: .8rem; }
.of-lore { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); font-style: italic; font-size: .92rem; line-height: 1.45; color: #b9ad90; }
@media (prefers-reduced-motion: reduce) { .of-stars .tw { animation: none; } }

/* ---- graphical pickers ---- */
.modal-card:has(.pk-wrap), .modal-card:has(.discard-grid.pick) { width: min(780px, 100%); }
.pk-sub { margin: -6px 0 2px; font-size: .9rem; font-style: italic; color: var(--ink-dim); }
.pk-wrap button { font: inherit; text-transform: none; letter-spacing: normal; text-align: left; color: var(--ink); }
.pk-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.pk-player { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); box-shadow: none; }
.pk-player:hover:not(.blocked) { border-color: var(--gold-dim); box-shadow: 0 0 16px rgba(212,167,58,.2); transform: translateY(-1px); }
.pk-player.blocked, .pk-hoard.blocked { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.pkp-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pkp-av { position: relative; flex: 0 0 auto; }
.pkp-av .avatar.lg { width: 56px; height: 56px; }
.pkp-av .stonebound-ico { position: absolute; right: -10px; bottom: -8px; }
.pk-player.stone .pkp-av .avatar { filter: grayscale(1) brightness(.7); }
.pkp-names { min-width: 0; flex: 1 1 auto; }
.pkp-name { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkp-patron { font-size: .8rem; font-style: italic; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkp-stats { display: flex; gap: 14px; margin-top: 4px; }
.pkp-stat { display: flex; align-items: baseline; gap: 3px; }
.pkp-stat b { font-family: var(--display); font-size: .9rem; color: var(--gold-hi); }
.pkp-stat small { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pkp-relics { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; min-height: 52px; align-items: center; }
.pkp-relics::-webkit-scrollbar { display: none; }
.pkp-relics .cardf.mini { flex: 0 0 auto; width: 36px; height: 50px; }
.pkp-relics .cardf.mini .val { display: none; }
.pkp-none { font-size: .8rem; font-style: italic; color: var(--muted); }
.pkp-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.pkp-note, .pkh-note { font-size: .78rem; font-style: italic; color: var(--ink-dim); line-height: 1.3; }
.pkp-note.bad, .pkh-note.bad { color: #ffb0a6; font-style: normal; font-family: var(--display); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.pk-hoards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.pk-hoard { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); box-shadow: none; position: relative; }
.pk-hoard:hover:not(.blocked) { border-color: var(--gold-dim); box-shadow: 0 0 16px rgba(212,167,58,.2); transform: translateY(-1px); }
.pk-hoard.current { border-color: rgba(255,224,138,.6); box-shadow: inset 0 0 18px rgba(212,167,58,.12); }
.pk-hoard.none { justify-content: center; }
.pkh-head { display: flex; align-items: center; gap: 10px; }
.pkh-ico { width: 30px; height: 30px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.pkh-names { min-width: 0; flex: 1 1 auto; }
.pkh-name { font-family: var(--display); font-weight: 700; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.pkh-label { font-size: .86rem; color: var(--gold-hi); }
.pkh-cur { font-family: var(--display); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: #1a1405; background: var(--gold-hi); border-radius: 8px; padding: 2px 7px; }
.pkh-cards { display: flex; gap: 6px; position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pkh-cards .cardf.mini, .pkh-slot { flex: 0 0 auto; width: 56px; height: 78px; }
.pkh-cards .cardf.mini .val { display: none; }
.pkh-slot { display: grid; place-items: center; border-radius: 5px; border: 1px dashed rgba(212,167,58,.25); }
.pkh-slot img { width: 55%; opacity: .18; filter: grayscale(1) brightness(1.6); }
.pkh-cards .warden-mark.on-set { top: -6px; right: -4px; width: 26px; height: 26px; }
.pk-relics { display: flex; flex-direction: column; gap: 14px; }
.pkr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pkr-ico { width: 22px; height: 22px; }
.pkr-full, .pkr-circle { font-size: .5rem; letter-spacing: .12em; padding: 2px 6px; border-radius: 8px; color: #10240e; background: var(--ok); }
.pkr-circle { color: #1a1405; background: var(--gold-hi); }
.pkr-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.pkr-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; position: relative; }
.pkr-cell .cardf { width: 96px; height: 140px; cursor: pointer; }
.pkr-cell .cardf:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.7), 0 0 14px rgba(212,167,58,.35); }
.pkr-cell.blocked .cardf { cursor: not-allowed; filter: grayscale(.8) brightness(.6); }
.pkr-cell.blocked .cardf:hover { transform: none; box-shadow: none; }
.pkr-name { font-size: .74rem; text-align: center; line-height: 1.15; color: var(--ink-dim); }
.pkr-why, .pkr-tag { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 8px; background: rgba(10,10,14,.9); color: #ffb0a6; border: 1px solid rgba(255,140,120,.45); }
.pkr-tag { color: var(--gold-hi); border-color: rgba(255,224,138,.4); top: auto; bottom: 26px; }
/* card grids (paying, Rummage, Glamour, the discard pile): full cards, readable art */
.discard-grid.pick { gap: 12px 10px; justify-content: flex-start; }
.discard-grid.pick .dg-card { width: 92px; }
.discard-grid.pick .cardf { width: 92px; height: 134px; }
.discard-grid.pick .cardf.bank { height: 92px; }
.discard-grid.pick .dg-name { font-size: .72rem; }
.discard-grid.pick .cardf.selected { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(255,224,138,.6); }

/* narrow phones: pickers rise as a bottom sheet */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; padding: 14px 12px calc(12px + var(--sab)); }
  .pk-player, .pk-hoard { padding: 9px; }
  .pkp-av .avatar.lg { width: 48px; height: 48px; }
  .pkh-cards .cardf.mini, .pkh-slot { width: 48px; height: 67px; }
  .pkr-cards, .discard-grid.pick { gap: 10px 8px; }
  .pkr-cell, .discard-grid.pick .dg-card { width: calc((100% - 16px) / 3); }
  .pkr-cell .cardf, .discard-grid.pick .cardf { width: 100%; height: auto; aspect-ratio: 92 / 134; }
  .discard-grid.pick .cardf.bank { aspect-ratio: 1; }
  .pkr-why, .pkr-tag { top: 40%; }
}
@media (max-width: 767px) {
  /* whose turn always reads in full; the Omen badge takes what's left */
  #table .play-bar .t-turn-info { flex: 0 1 auto; }
  #table .play-bar .tb-main { overflow: visible; text-overflow: clip; }
  #table .play-bar .pb-omen { flex: 1 1 0; max-width: none; justify-content: flex-end; }
  #table .play-bar .omen-badge { padding: 3px 6px 3px 4px; gap: 4px; }
  #table .play-bar .omen-badge .omen-art.sm { width: 18px; height: 18px; flex-basis: 18px; }
}
/* my Patron strip: the name gives way to the Stonebound chip, never runs under it */
.t-scroll .my-char .char-card.strip .cc-titles { min-width: 0; overflow: hidden; }
.t-scroll .my-char .char-card.strip .cc-name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.char-card.petrified .avatar { filter: grayscale(1) brightness(.7); }
/* rivals give the spare height back: seats fill the strip, their cards scroll inside */
#table .t-scroll > .t-opps { min-height: min(var(--opps-min), 200px); }
#table .t-opps > .seat { max-height: 100%; }
#table .t-opps .seat .s-detail { flex: 1 1 0; height: auto; min-height: 0; overflow-y: auto; }
@media (min-width: 768px) {
  #table .play-bar .feed-line:not(:last-child) { display: none; }
  /* my Patron, one line beside the Purse: the ability may take two */
  #table .t-my-board .my-char .char-card.strip { height: 100%; align-items: center; padding: 6px 10px; }
  #table .t-my-board .my-char .char-card.strip .cc-titles { flex-direction: column; align-items: flex-start; gap: 2px; }
  #table .t-my-board .my-char .char-card.strip .cc-ability { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 768px) and (max-height: 960px) { #table .t-scroll > .t-opps { min-height: 150px; } }
/* seats stretch to the strip's height so their relic rows get the room */
#table .t-scroll > .t-opps { align-items: stretch; }
#table .t-scroll > .t-opps > .seat { align-self: stretch; }
@media (min-width: 768px) {
  #table .t-my-board .my-char .char-card.strip { flex-wrap: wrap; row-gap: 4px; }
  #table .t-my-board .my-char .char-card.strip .cc-titles { flex: 1 1 140px; }
}

/* the piles: a size up, each named underneath */
#table .play-bar .pb-piles { gap: 8px; padding-bottom: 13px; align-self: flex-start; }
#table .play-bar .pile, #table .play-bar .pile .cardf.mini { width: 44px; height: 62px; }
#table .play-bar .pile .cardf.mini.bank { width: 44px; height: 44px; }
#table .play-bar .pile .pile-back b { font-size: .95rem; }
#table .play-bar .pile .pile-back::before { font-size: 1.7rem; }
#table .play-bar .pile::after { content: attr(data-label); position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: #cdbf9d; white-space: nowrap; pointer-events: none; }
@media (max-width: 767px) {
  #table .play-bar .pb-piles { gap: 6px; padding-bottom: 12px; }
  #table .play-bar .pile, #table .play-bar .pile .cardf.mini { width: 40px; height: 56px; }
  #table .play-bar .pile .cardf.mini.bank { width: 40px; height: 40px; }
  #table .play-bar .pile::after { font-size: .46rem; letter-spacing: .08em; }
}

/* my Hoards, dynamic: groups appear as relics land and fill two rows in Hoard order; the
   zone keeps the two-row height (empty or full), so placing a card never moves the board */
#table #my-items { --hz-gap: 5px; display: grid; grid-template-rows: repeat(2, calc(var(--mc-h) + 21px)); grid-auto-flow: column; grid-auto-columns: max-content;
  gap: var(--hz-gap); align-content: start; justify-content: start; height: calc(2 * (var(--mc-h) + 21px) + var(--hz-gap)); }
#table #my-items .set-group { flex: 0 0 auto; height: calc(var(--mc-h) + 21px); box-sizing: border-box; align-items: flex-start; }
#table #my-items .sg-head { min-width: max(var(--sw), 70px); }
#table #my-items .sg-cards { width: auto; min-width: var(--sw); }
#table #my-items .sg-cards.has-extra { overflow: visible; }
#table #my-items > .zone-empty { grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-size: .9rem; }

/* my Hoards, centred like a rival's: one row while it fits, a second row when needed
   (beyond two rows the zone scrolls), groups in Hoard order */
#table #my-items { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; grid-template-rows: none;
  height: auto; max-height: calc(2 * (var(--mc-h) + 21px) + var(--hz-gap)); overflow-x: hidden; overflow-y: auto; }
#table #my-items > .zone-empty { flex: 1 1 100%; text-align: center; white-space: normal; }

/* ---- charms: painted spells; flags for a Bulwark and a Key ---- */
.cardf.charm.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent 20%, transparent 42%, rgba(6,6,9,.86) 66%, rgba(6,6,9,.96)); }
.cardf.charm .tx { color: #d9d0bb; font-size: .44rem; line-height: 1.25; text-shadow: 0 1px 2px #000; -webkit-line-clamp: 4; }
.cardf.charm .val { background: radial-gradient(circle at 35% 30%, #3b3946, #111115 72%); color: #e6dcff; border-color: #8f7cc2; }
.cardf.charm .nm { color: #f3ecda; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }
#inspect .inspect-card .cardf.charm .tx { font-size: 1rem; -webkit-line-clamp: unset; }
.flag.bulwark { background: rgba(159,216,168,.14); border-color: rgba(159,216,168,.5); color: #bfe8c6; }
.flag.unlocked { background: rgba(226,192,112,.14); border-color: rgba(226,192,112,.55); color: #f0d894; }

/* in the app the native launch screen plays the mark; the page opens on the medallion */
html.app-shell .orion-splash .s-orion { display: none; }

/* a Sigil: a spell sealed into coin */
.cardf.bank.coin-sigil .coin-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(201,162,255,.55)); }
.cardf.bank.coin-sigil .val { background: radial-gradient(circle at 35% 30%, #3b3946, #111115 72%); color: #e6dcff; border-color: #8f7cc2; }

/* ---- the zoomed card: the full painting, and text you can read from the sofa ---- */
#inspect .inspect-card .cardf { width: min(94vw, 520px); min-height: min(140vw, 760px); }
#inspect .inspect-card .cardf .nm { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
#inspect .inspect-card .cardf .tx, #inspect .inspect-card .cardf.spell .tx, #inspect .inspect-card .cardf.charm .tx { font-size: clamp(1.55rem, 6.2vw, 2rem); line-height: 1.38; -webkit-line-clamp: unset; }
#inspect .inspect-card .cardf .power-line { font-size: clamp(1.3rem, 5.2vw, 1.6rem); line-height: 1.4; margin-top: 10px; }
#inspect .inspect-card .cardf .power-line b { color: #f1d98e; }
#inspect .inspect-card .cardf.item .theme { font-size: clamp(1.3rem, 5.2vw, 1.6rem); }
#inspect .inspect-card .cardf.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent 18%, transparent 38%, rgba(6,6,9,.86) 58%, rgba(6,6,9,.97)); }
#inspect .inspect-card .cardf.has-art .nm, #inspect .inspect-card .cardf.has-art .tx { text-shadow: 0 2px 6px #000, 0 0 14px rgba(0,0,0,.9); }
#inspect .inspect-card .cardf.bank .nm { margin-top: 0; }

/* ---- a raised card is never clipped by the hand's scroller ---- */
.t-hand-wrap { padding-top: 28px; }
.hand { min-height: 138px; }
@media (min-width: 768px) and (max-width: 1199px) { .t-hand-wrap { padding-top: 24px; } .hand { min-height: 122px; } }
@media (max-width: 767px) { .t-hand-wrap { padding-top: 22px; } .hand { min-height: 98px; } :root { --opps-min: calc(2 * 64px + 4px); } }
@media (max-height: 520px) { .t-hand-wrap { padding-top: 18px; } }

/* ---- powers and conditions ---- */
.flag.fx-more { background: rgba(255,224,138,.12); border-color: rgba(255,224,138,.45); color: #f1d98e; cursor: pointer; }
.s-flags.tappable { cursor: pointer; }
.s-flags.tappable:hover .flag.fx-more { background: rgba(255,224,138,.22); }
.flag.fx-mine { font: inherit; font-family: var(--display); min-height: 0; line-height: 1.2; }
.fx-list { display: flex; flex-direction: column; gap: 8px; }
.fx-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
.fx-row.fx-place { background: rgba(201,162,255,.08); border-color: rgba(201,162,255,.3); }
.fx-row.fx-power { background: rgba(201,162,255,.1); border-color: rgba(201,162,255,.35); }
.fx-row.fx-shield { background: rgba(255,224,138,.08); border-color: rgba(255,224,138,.35); }
.fx-row.fx-bulwark { background: rgba(159,216,168,.08); border-color: rgba(159,216,168,.4); }
.fx-row.fx-key { background: rgba(226,192,112,.1); border-color: rgba(226,192,112,.45); }
.fx-row.fx-stone { background: rgba(150,155,170,.1); border-color: rgba(190,195,210,.3); }
.fx-row.fx-dead { background: rgba(57,255,106,.06); border-color: rgba(57,255,106,.3); }
.fx-ico { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.fx-glyph { display: grid; place-items: center; font-size: 1.4rem; color: var(--gold-hi); }
.fx-glyph.fx-bulwark { color: #bfe8c6; } .fx-glyph.fx-key { color: #f0d894; } .fx-glyph.fx-dead { color: #39ff6a; } .fx-glyph.fx-place-ico { color: #d9c2ff; }
.fx-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-text b { font-family: var(--display); font-size: .92rem; letter-spacing: .04em; color: var(--ink); }
.fx-text span { font-size: .95rem; line-height: 1.4; color: var(--ink-dim); }
.fx-row.fx-power .fx-text b { color: #e3d2ff; }
.sheet .fx-list { margin-top: 4px; }

/* ---- Patron portraits: the face in every round avatar; the full painting on sheets and the Patron choice ---- */
.avatar .avatar-portrait { object-position: 50% 22%; }
.portrait { position: relative; flex: 0 0 auto; width: 96px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 2px solid var(--house, #9c7a35); box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.6); background: #0d0d10; }
.portrait .portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.portrait .portrait-crest { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #9c7a35; box-shadow: 0 1px 4px rgba(0,0,0,.8); background: #0d0d10; }
.portrait .avatar-initial.big { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; }
.portrait.sheet { width: 64px; border-radius: 8px; }
.portrait.sheet .portrait-crest { width: 20px; height: 20px; right: 2px; bottom: 2px; }
.char-desc .portrait.desc { width: 88px; }
@media (max-width: 400px) { .char-desc .portrait.desc { width: 72px; } }

/* ---- the painted title: forged bronze letters under the medallion ---- */
.hero-title .wordmark { display: block; width: min(440px, 86vw); height: auto; margin: -6px auto 0; filter: drop-shadow(0 4px 14px rgba(0,0,0,.85)); }
.hero-title { text-shadow: none; line-height: 0; }
.orion-splash .s-game .title.wordmark { width: min(360px, 78vw); height: auto; display: block; margin: -4px auto 0; filter: drop-shadow(0 4px 14px rgba(0,0,0,.9)); }

/* ---- the zoomed card on short landscape screens (Fold inner screen sideways, tablets, laptops):
   the whole card fits the height, the art gives way and the words stay large ---- */
@media (orientation: landscape) and (max-height: 820px) {
  #inspect .inspect-card .cardf { height: calc(100dvh - 28px); min-height: 0; width: min(94vw, 560px, calc((100dvh - 28px) * .84)); }
  #inspect .inspect-card .cardf .body { min-height: 0; }
  #inspect .inspect-card .cardf.has-sky .art-spacer, #inspect .inspect-card .cardf .art-spacer { min-height: 0; flex: 1 1 auto; }
  #inspect .inspect-card .cardf .val { width: 46px; height: 46px; font-size: 1.45rem; top: 10px; left: 10px; }
  #inspect .inspect-card .cardf .nm { font-size: clamp(1.5rem, 5.8vh, 2.3rem); margin-top: 6px; }
  #inspect .inspect-card .cardf .tx, #inspect .inspect-card .cardf.spell .tx, #inspect .inspect-card .cardf.charm .tx { font-size: clamp(1.15rem, 3.9vh, 1.8rem); line-height: 1.3; margin-top: 8px; }
  #inspect .inspect-card .cardf .power-line { font-size: clamp(1.05rem, 3.4vh, 1.5rem); line-height: 1.3; margin-top: 6px; }
  #inspect .inspect-card .cardf.spell .art { width: min(30vh, 190px); height: min(30vh, 190px); margin-top: 12px; }
  #inspect .inspect-card .cardf.item .medal { width: min(32vh, 220px); height: min(32vh, 220px); }
  #inspect .inspect-card .cardf .wild-orb { width: min(28vh, 170px); height: min(28vh, 170px); margin-top: 16px; }
  #inspect .inspect-card .char-card .cc-ability { font-size: clamp(1.1rem, 3.6vh, 1.8rem); }
}

/* ==== CARD UX, REVISED ====================================================== */
/* the Hoard emblem on a relic's face: top-right, opposite the value seal */
.cardf .type-badge, .cardf.has-art > .type-badge, .cardf.has-sky > .type-badge { position: absolute; z-index: 3; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #2a2a33, #0c0c10); border: 1px solid rgba(212,167,58,.75); box-shadow: 0 1px 4px rgba(0,0,0,.8); }
.cardf .type-badge .type-badge-ico { width: 72%; height: 72%; object-fit: contain; }
.cardf.mini .type-badge { display: none; }
/* painted faces: the darkening only where the name sits, the painting keeps the rest */
.cardf.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 16%, transparent 64%, rgba(6,6,9,.78) 84%, rgba(6,6,9,.92)); }
.cardf.charm.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent 16%, transparent 52%, rgba(6,6,9,.84) 72%, rgba(6,6,9,.95)); }

/* small cards on the table (your Hoards, rivals' seats): the painting is the card.
   No seal, no banner covering it; the name and worth are a long-press away. */
#my-items .cardf.has-art .val, .seat .cardf.has-art .val, #my-items .cardf.has-art .nm, .seat .cardf.has-art .nm,
#my-items .cardf .type-badge, .seat .cardf .type-badge { display: none; }
#my-items .cardf.has-art::before, .seat .cardf.has-art::before { background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,.35)); }
#my-items .cardf.has-art .card-art, .seat .cardf.has-art .card-art { object-fit: cover; object-position: 50% 40%; }

/* the zoomed card: the card clean on one side, its words on the other */
#inspect .inspect-card .insp { display: flex; align-items: center; justify-content: center; gap: 22px; max-width: 96vw; }
#inspect .inspect-card .insp-face { flex: 0 0 auto; }
#inspect .inspect-card .insp .insp-face .cardf { height: min(calc(100dvh - 56px), 720px); width: auto; min-height: 0; aspect-ratio: 5 / 7; }
#inspect .inspect-card .insp .insp-face .cardf .body { min-height: 0; }
#inspect .inspect-card .insp .insp-face .cardf .art-spacer { min-height: 0; flex: 1 1 auto; }
#inspect .inspect-card .insp .insp-face .cardf .nm, #inspect .inspect-card .insp .insp-face .cardf .tx, #inspect .inspect-card .insp .insp-face .cardf .theme,
#inspect .inspect-card .insp .insp-face .cardf .power-line, #inspect .inspect-card .insp .insp-face .cardf .ladder, #inspect .inspect-card .insp .insp-face .cardf .bridge,
#inspect .inspect-card .insp .insp-face .cardf .wild-now, #inspect .inspect-card .insp .insp-face .cardf .rent { display: none; }
#inspect .inspect-card .insp .insp-face .cardf.has-art::before { background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 18%); }
#inspect .inspect-card .insp .insp-face .cardf .type-badge { width: 52px; height: 52px; top: 12px; right: 12px; border-width: 2px; }
#inspect .inspect-card .insp .insp-face .cardf .val { width: 52px; height: 52px; font-size: 1.6rem; top: 12px; left: 12px; }
#inspect .inspect-card .insp .insp-face .cardf.spell:not(.has-art) .art { width: 62%; height: auto; aspect-ratio: 1; margin: auto; }
#inspect .inspect-card .insp-info { width: min(440px, 44vw); max-height: min(calc(100dvh - 56px), 720px); overflow: auto; text-align: left;
  background: linear-gradient(180deg, rgba(24,22,30,.97), rgba(12,11,16,.97)); border: 1px solid rgba(212,167,58,.45); border-radius: 16px;
  padding: 20px 22px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.8); color: #e9dcbf; font-family: var(--body); animation: scaleIn .18s ease-out; }
.insp-info .ii-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: #c9b98f; }
.insp-info .ii-ico { width: 22px; height: 22px; }
.insp-info .ii-name { font-family: var(--decor); font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.1; color: #fff3d6; margin: 6px 0 8px; }
.insp-info .ii-sub { font-size: 1.08rem; line-height: 1.45; color: #cfc2a3; font-style: italic; margin: 6px 0; }
.insp-info .ii-rules { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.42; color: #f1e7cf; margin: 4px 0 10px; }
.insp-info .ii-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(212,167,58,.22); }
.insp-info .ii-h { font-family: var(--display); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 6px; }
.insp-info .ii-p { font-size: 1.18rem; line-height: 1.45; color: #f1e7cf; }
.insp-info .ladder { margin-top: 8px; }
.insp-info .ladder-row { display: flex; align-items: baseline; gap: 8px; font-size: 1.1rem; padding: 3px 0; color: #efe3c8; }
.insp-info .ladder-dots { flex: 1; border-bottom: 1px dotted rgba(239,227,200,.35); }
.insp-info .ladder-row.full .ladder-n, .insp-info .ladder-row.full .ladder-v { color: #ffd27a; }
.insp-info .bridge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.15rem; }
.insp-info .br-type { display: inline-flex; align-items: center; gap: 6px; }
.insp-info .br-ico { width: 26px; height: 26px; }
.insp-info .br-type.off { opacity: .45; }
.insp-info .ii-worth { margin-top: 14px; font-size: 1rem; color: #c9b98f; }
.insp-info .ii-close { margin-top: 14px; font-size: .78rem; color: var(--muted); text-align: center; font-style: italic; }
/* portrait (phones, the Fold cover, the Fold inner screen upright): the card above, its words under it */
@media (orientation: portrait), (max-width: 640px) {
  #inspect .inspect-card .insp { flex-direction: column; gap: 12px; }
  #inspect .inspect-card .insp .insp-face .cardf { height: min(46dvh, 520px); }
  #inspect .inspect-card .insp-info { width: min(92vw, 520px); max-height: calc(54dvh - 44px); padding: 14px 16px 10px; }
  .insp-info .ii-name { font-size: clamp(1.5rem, 6.4vw, 2.1rem); margin: 4px 0 6px; }
  .insp-info .ii-rules { font-size: clamp(1.15rem, 4.8vw, 1.45rem); }
  .insp-info .ii-p, .insp-info .ii-sub { font-size: clamp(1rem, 4.2vw, 1.2rem); }
  #inspect .inspect-card .insp .insp-face .cardf .type-badge, #inspect .inspect-card .insp .insp-face .cardf .val { width: 40px; height: 40px; font-size: 1.25rem; top: 8px; }
  #inspect .inspect-card .insp .insp-face .cardf .val { left: 8px; }
  #inspect .inspect-card .insp .insp-face .cardf .type-badge { right: 8px; }
}
#inspect .inspect-card .insp .insp-face .cardf.has-sky .nm { display: block; font-size: clamp(1.6rem, 4.4vh, 2.6rem); margin-bottom: 18px; }

/* ==== THE RACE TO ASCEND ==================================================== */
.ascent { margin: 8px 0 2px; padding: 8px 12px 10px; border-radius: 14px; cursor: pointer; position: relative;
  background: linear-gradient(180deg, rgba(40, 28, 64, .55), rgba(12, 10, 18, .6)); border: 1px solid rgba(201, 162, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .06); transition: border-color .4s, box-shadow .4s; }
.ascent:hover { border-color: rgba(255, 224, 138, .55); }
.ascent.close { border-color: rgba(255, 210, 120, .6); box-shadow: 0 0 22px rgba(255, 200, 100, .18), inset 0 1px 0 rgba(255, 240, 200, .08); }
.as-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.as-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.as-label { font-family: var(--display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #d8c2ff; text-shadow: 0 0 10px rgba(201, 162, 255, .5); }
.as-goal { font-family: var(--body); font-style: italic; font-size: .82rem; color: var(--ink-dim); }
.as-mine { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.as-num { font-family: var(--decor); font-size: 1.55rem; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 14px rgba(255, 210, 120, .55); }
.as-of { font-family: var(--display); font-size: .85rem; color: var(--ink-dim); }
.as-togo { margin-left: 6px; font-family: var(--body); font-style: italic; font-size: .8rem; color: #d8c2ff; }
.as-track { position: relative; height: 40px; margin: 6px 26px 0 14px; }
.as-rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 162, 255, .18); }
.as-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #5b34b8, #b58cff 55%, #ffe08a); box-shadow: 0 0 12px rgba(201, 162, 255, .7); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.as-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: asShimmer 2.8s linear infinite; }
.as-tick { position: absolute; top: -3px; width: 1px; height: 12px; background: rgba(255, 240, 200, .25); }
.as-tick::after { content: attr(data-n); position: absolute; top: 13px; left: -8px; width: 16px; text-align: center; font-size: .58rem; color: var(--muted); font-family: var(--display); }
.as-goal-mark { position: absolute; right: -24px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #fff1c2, #d9a640 55%, #6b4a12); box-shadow: 0 0 16px rgba(255, 210, 120, .55), 0 0 0 1px rgba(255, 240, 200, .6); }
.as-goal-mark svg { position: absolute; width: 70%; height: 70%; fill: rgba(255, 255, 255, .25); }
.as-goal-mark b { position: relative; font-family: var(--decor); font-size: .82rem; color: #241604; }
.ascent.close .as-goal-mark { animation: asGoal 1.6s ease-in-out infinite; }
.as-marker { position: absolute; top: 50%; width: 0; height: 0; transition: left 1.1s cubic-bezier(.2, .8, .2, 1); z-index: 1; }
.as-marker .avatar { position: absolute; left: -13px; top: calc(-13px + var(--lane, 0) * 12px); width: 26px; height: 26px; box-shadow: 0 0 0 2px rgba(10, 8, 14, .9), 0 2px 6px rgba(0, 0, 0, .8); transition: transform .3s; }
.as-marker .as-n { position: absolute; left: 10px; top: calc(-22px + var(--lane, 0) * 12px); font-family: var(--display); font-weight: 700; font-size: .62rem; color: var(--ink); text-shadow: 0 1px 2px #000; }
.as-marker.me { z-index: 3; }
.as-marker.me .avatar { width: 32px; height: 32px; left: -16px; top: calc(-16px + var(--lane, 0) * 12px); box-shadow: 0 0 0 2px var(--gold-hi), 0 0 14px rgba(255, 210, 120, .7); }
.as-marker.me .as-n { color: var(--gold-hi); font-size: .7rem; left: 13px; }
.as-marker.turn .avatar { animation: asTurn 1.8s ease-in-out infinite; }
.as-marker.lead::before { content: "♛"; position: absolute; left: -6px; top: calc(-30px + var(--lane, 0) * 12px); font-size: .8rem; color: var(--gold-hi); text-shadow: 0 0 8px rgba(255, 200, 100, .9); }
.as-marker.near .avatar { box-shadow: 0 0 0 2px #ff9f7a, 0 0 16px rgba(255, 130, 90, .8); }
.as-marker.me.near .avatar { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 22px rgba(255, 220, 140, 1); }
.as-marker.gain .avatar { animation: asGain .9s ease-out; }
.as-marker.loss .avatar { animation: asLoss .7s ease-out; }
.as-pop { position: absolute; left: -14px; top: -34px; width: 28px; text-align: center; font-family: var(--decor); font-size: .95rem; pointer-events: none; animation: asPop 1.6s ease-out forwards; }
.as-pop.up { color: var(--gold-hi); text-shadow: 0 0 10px rgba(255, 210, 120, .9); }
.as-pop.down { color: #ff8c6a; text-shadow: 0 0 10px rgba(255, 110, 80, .8); }
@keyframes asShimmer { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes asGoal { 0%, 100% { box-shadow: 0 0 16px rgba(255, 210, 120, .55), 0 0 0 1px rgba(255, 240, 200, .6); transform: scale(1); } 50% { box-shadow: 0 0 34px rgba(255, 220, 140, 1), 0 0 0 2px #fff3c8; transform: scale(1.1); } }
@keyframes asTurn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes asGain { 0% { transform: scale(1); } 30% { transform: scale(1.35); filter: brightness(1.6); } 100% { transform: scale(1); } }
@keyframes asLoss { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes asPop { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
@media (max-width: 520px) {
  .ascent { padding: 6px 10px 8px; }
  .as-num { font-size: 1.3rem; }
  .as-goal { display: none; }
}
/* the old line beside "Hoards" now just says it again, quietly */
#renown-sub { color: #d8c2ff; }

/* the breakdown sheet */
.essence-sheet .es-lead { color: var(--ink-dim); font-size: .95rem; margin: 0 0 12px; }
.es-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-top: 1px solid rgba(201, 162, 255, .15); }
.es-row.me { background: rgba(255, 224, 138, .06); border-radius: 10px; }
.es-mid { flex: 1; min-width: 0; }
.es-name { font-family: var(--display); font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-bar { display: flex; height: 8px; margin: 6px 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.es-bar i { display: block; height: 100%; }
.es-relics { background: linear-gradient(90deg, #5b34b8, #b58cff); }
.es-bonus { background: linear-gradient(90deg, #d9a640, #ffe08a); box-shadow: 0 0 8px rgba(255, 210, 120, .6); }
.es-why { font-size: .82rem; color: var(--muted); font-style: italic; }
.es-tot { display: flex; flex-direction: column; align-items: flex-end; }
.es-tot b { font-family: var(--decor); font-size: 1.5rem; line-height: 1; color: var(--gold-hi); }
.es-tot span { font-size: .72rem; color: var(--muted); }

/* ==== THE ASCENSION ========================================================= */
.ascension { position: fixed; inset: 0; z-index: 400; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #1a1430 0, #07060c 70%); animation: ascIn .9s ease both; cursor: default; }
.ascension.them { background: radial-gradient(ellipse at 50% 30%, #161420 0, #050508 70%); }
.asc-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .9s, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.asc-rays { position: absolute; left: 50%; top: 36%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 170, .12) 0deg 4deg, transparent 4deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%);
  animation: ascRays 1.6s .5s ease forwards, spin 60s linear infinite; }
.ascension.them .asc-rays { background: repeating-conic-gradient(from 0deg, rgba(200, 190, 255, .08) 0deg 4deg, transparent 4deg 14deg); }
.asc-beam { position: absolute; left: 50%; top: -10%; width: min(420px, 70vw); height: 120%; transform: translateX(-50%) scaleX(0); transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, .14) 30%, rgba(255, 246, 220, .4) 50%, rgba(255, 236, 190, .14) 70%, transparent);
  filter: blur(6px); animation: ascBeam 1.3s .2s cubic-bezier(.2, .8, .2, 1) forwards; }
.asc-motes { position: absolute; left: 50%; top: 0; bottom: 0; width: min(420px, 70vw); transform: translateX(-50%); pointer-events: none; }
.asc-motes i { position: absolute; bottom: -10px; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: #fff3c8; box-shadow: 0 0 8px #ffd77a, 0 0 16px rgba(255, 200, 100, .6); opacity: 0; animation: ascMote 4s linear infinite; }
.asc-portrait { position: relative; width: min(220px, 46vw); aspect-ratio: 3 / 4; border-radius: 50% 50% 18px 18px / 36% 36% 18px 18px; overflow: visible; opacity: 0; transform: translateY(60vh) scale(.8);
  animation: ascRise 2.2s .6s cubic-bezier(.16, .84, .3, 1) forwards; }
.asc-portrait > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: inherit; border: 2px solid #ffe08a;
  box-shadow: 0 0 0 6px rgba(255, 224, 138, .12), 0 0 60px rgba(255, 210, 120, .7), 0 30px 80px rgba(0, 0, 0, .8); }
.ascension.them .asc-portrait > img:first-child { border-color: #c9b8ff; box-shadow: 0 0 0 6px rgba(201, 184, 255, .1), 0 0 50px rgba(190, 170, 255, .5), 0 30px 80px rgba(0, 0, 0, .8); }
.asc-portrait::after { content: ""; position: absolute; inset: -22%; border-radius: 50%; border: 1px dashed rgba(255, 230, 170, .35); animation: spin 24s linear infinite; pointer-events: none; }
.asc-crest { position: absolute; right: -14px; bottom: -14px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #ffe08a; box-shadow: 0 6px 18px rgba(0, 0, 0, .8); }
.asc-words { position: relative; margin-top: 26px; text-align: center; padding: 0 16px; }
.asc-kicker { font-family: var(--display); letter-spacing: .34em; text-transform: uppercase; font-size: .8rem; color: #d8c2ff; opacity: 0; animation: ascFade .8s 1.6s forwards; }
.asc-name { margin: 8px 0 2px; font-family: var(--decor); font-size: clamp(1.8rem, 7vw, 3.4rem); line-height: 1.05; color: #fff3d6; opacity: 0; letter-spacing: .04em;
  text-shadow: 0 0 30px rgba(255, 210, 120, .7), 0 4px 18px rgba(0, 0, 0, .9); animation: ascName 1.2s 1.8s cubic-bezier(.2, .8, .2, 1) forwards; }
.asc-title { font-style: italic; color: var(--ink-dim); font-size: 1.1rem; opacity: 0; animation: ascFade .8s 2.2s forwards; }
.asc-count { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px; opacity: 0; animation: ascFade .8s 1.4s forwards; }
.asc-count b { font-family: var(--decor); font-size: clamp(2.2rem, 8vw, 3.4rem); color: var(--gold-hi); text-shadow: 0 0 24px rgba(255, 210, 120, .8); }
.asc-count span { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: #d8c2ff; }
.asc-board { position: relative; z-index: 2; width: min(560px, 92vw); max-height: 88dvh; overflow: auto; padding: 22px 22px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 24, 46, .94), rgba(10, 9, 14, .96)); border: 1px solid rgba(255, 224, 138, .5); box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 200, 100, .15);
  opacity: 0; transform: translateY(40px) scale(.96); pointer-events: none; transition: opacity .8s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.asc-board h2 { margin: 0; font-family: var(--decor); color: var(--gold-hi); font-size: clamp(1.3rem, 5vw, 1.9rem); }
.asc-sub { margin: 4px 0 14px; color: var(--ink-dim); font-style: italic; }
.asc-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid rgba(255, 224, 138, .12); text-align: left; opacity: 0; transform: translateX(-20px); }
.asc-row.won { background: linear-gradient(90deg, rgba(255, 224, 138, .14), transparent); border-radius: 12px; border-top-color: transparent; }
.asc-row.me .asc-pname { color: var(--gold-hi); }
.asc-rank { width: 22px; text-align: center; font-family: var(--decor); color: var(--muted); }
.asc-row.won .asc-rank { color: var(--gold-hi); text-shadow: 0 0 10px rgba(255, 210, 120, .9); }
.asc-mid { flex: 1; min-width: 0; }
.asc-pname { font-family: var(--display); font-weight: 700; color: var(--ink); }
.asc-meta { font-size: .82rem; color: var(--muted); font-style: italic; }
.asc-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.asc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5b34b8, #b58cff 60%, #ffe08a); box-shadow: 0 0 10px rgba(201, 162, 255, .6); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.asc-row.won .asc-bar i { background: linear-gradient(90deg, #d9a640, #ffe08a, #fff6d8); box-shadow: 0 0 14px rgba(255, 210, 120, .9); }
.asc-r { font-family: var(--decor); font-size: 1.5rem; color: var(--ink); min-width: 34px; text-align: right; }
.asc-row.won .asc-r { color: var(--gold-hi); }
.asc-btns { margin-top: 16px; }
.ascension.act2 .asc-stage { opacity: .28; transform: translateY(-12vh) scale(.86); }
.ascension.act2 .asc-board { opacity: 1; transform: none; pointer-events: auto; }
.ascension.act2 .asc-row { animation: ascRow .7s var(--d, 0s) cubic-bezier(.2, .8, .2, 1) forwards; }
.ascension.act2 .asc-bar i { width: var(--w); transition-delay: calc(var(--d, 0s) + .3s); }
@keyframes ascIn { from { opacity: 0; } }
@keyframes ascRays { to { opacity: 1; } }
@keyframes ascBeam { to { transform: translateX(-50%) scaleX(1); } }
@keyframes ascMote { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: .8; } 100% { opacity: 0; transform: translateY(-100vh); } }
@keyframes ascRise { 0% { opacity: 0; transform: translateY(60vh) scale(.8); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ascName { from { opacity: 0; transform: translateY(14px); filter: blur(8px); letter-spacing: .3em; } to { opacity: 1; transform: none; filter: none; letter-spacing: .04em; } }
@keyframes ascFade { to { opacity: 1; } }
@keyframes ascRow { to { opacity: 1; transform: none; } }
.ascension.calm *, .ascension.calm { animation-duration: .01s !important; animation-delay: 0s !important; }
.ascension.calm .asc-rays, .ascension.calm .asc-motes { display: none; }
@media (max-height: 640px) { .asc-portrait { width: min(150px, 34vw); } .asc-words { margin-top: 14px; } }

/* ==== the website ==== */
.site-link { display: inline-block; margin-top: 10px; font-family: var(--body); font-style: italic; font-size: .92rem; color: #d8c2ff; text-decoration: none; border-bottom: 1px dotted rgba(216, 194, 255, .5); transition: color .2s, border-color .2s; }
.site-link:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
.rules-site { display: block; margin: 0 0 14px; font-size: 1rem; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==== THE RACE TO ASCEND, COMPACT: one slim line inside the play bar's own row ==== */
#table .play-bar .pb-row { flex-wrap: wrap; row-gap: 6px; }
#table .play-bar .pb-row > #ascent { order: 2; flex: 1 1 300px; min-width: 240px; margin: 0; }
#table .play-bar .pb-row > .pb-omen { order: 3; }
.ascent { display: flex; align-items: center; gap: 10px; padding: 3px 12px 3px 10px; border-radius: 999px; min-height: 36px; }
.ascent .as-head { flex: 0 0 auto; }
.ascent .as-title { display: none; }
.ascent .as-mine { gap: 3px; }
.ascent .as-mine::before { content: "✦"; color: #d8c2ff; font-size: .8rem; margin-right: 3px; text-shadow: 0 0 8px rgba(201, 162, 255, .7); }
.ascent .as-num { font-size: 1.2rem; }
.ascent .as-of { font-size: .75rem; }
.ascent .as-togo { font-size: .72rem; margin-left: 4px; }
.ascent .as-track { flex: 1 1 auto; height: 28px; margin: 0 16px 0 8px; min-width: 120px; }
.ascent .as-rail { height: 5px; margin-top: -2.5px; }
.ascent .as-tick { height: 9px; top: -2px; }
.ascent .as-tick::after { display: none; }
.ascent .as-goal-mark { width: 26px; height: 26px; margin-top: -13px; right: -17px; }
.ascent .as-goal-mark b { font-size: .64rem; }
.ascent .as-marker .avatar { width: 20px; height: 20px; left: -10px; top: calc(-10px + var(--lane, 0) * 7px); }
.ascent .as-marker.me .avatar { width: 24px; height: 24px; left: -12px; top: calc(-12px + var(--lane, 0) * 7px); }
.ascent .as-marker .as-n { display: none; }
.ascent .as-marker.lead::before { top: calc(-22px + var(--lane, 0) * 7px); left: -5px; font-size: .66rem; }
.ascent .as-pop { top: -26px; font-size: .8rem; }
/* narrow: its own slim row under whose turn it is */
@media (max-width: 760px) {
  #table .play-bar .pb-row > #ascent { order: 9; flex-basis: 100%; }
  .ascent .as-togo { display: none; }
}

/* ==== SHORT DESKTOP SCREENS (laptops, 125% scaling): rivals show a full row of relics ==== */
@media (min-width: 900px) and (max-height: 900px) {
  .t-scroll > .t-opps .seat .s-header { grid-template-columns: auto auto 1fr auto auto auto; grid-template-areas: "av nm . hd bk rn"; row-gap: 0; }
  .t-scroll > .t-opps .seat .s-header .avatar { width: 26px; height: 26px; }
  .t-scroll > .t-opps .seat .s-ability { display: none; }
  .t-scroll > .t-opps .seat .s-flags { margin-top: 2px; }
  .t-scroll > .t-opps .seat .s-detail { --om-h: 56px; height: calc(var(--om-h) + 26px); margin-top: 2px; }
  .t-scroll > .t-opps { --opps-min: 0px; flex: 0 0 auto; min-height: 0; }
  .t-scroll > .t-center { padding-top: 4px; padding-bottom: 4px; }
}

/* the track and the place share the row: the track takes the room, the place's text gives way */
@media (min-width: 761px) {
  #table .play-bar .pb-row { flex-wrap: nowrap; }
  #table .play-bar .pb-row > #ascent { flex: 1 1 200px; min-width: 170px; }
  #table .play-bar .pb-row > .pb-omen { flex: 0 1 300px; min-width: 150px; max-width: 34%; }
  #table .play-bar .t-turn-info { flex: 0 1 auto; }
}

/* wide screens: the play bar grows so the race has room to read */
@media (min-width: 1200px) { #table .t-scroll > .play-bar { max-width: 1080px; } }
@media (min-width: 900px) and (max-height: 900px) { #table .t-scroll > .play-bar { margin-top: 2px; margin-bottom: 2px; } }

/* ==== ESSENCE ON EVERY PLAYER: a gauge filling toward the target ==== */
.ess-gauge { position: relative; display: flex; align-items: center; gap: 8px; margin: 5px 2px 2px; cursor: pointer; }
.ess-gauge .eg-bar { position: relative; flex: 1; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 162, 255, .22); overflow: visible; }
.ess-gauge .eg-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #5b34b8, #b58cff 60%, #ffe08a); box-shadow: 0 0 10px rgba(201, 162, 255, .6); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.ess-gauge .eg-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: asShimmer 3.2s linear infinite; }
.ess-gauge .eg-tick { position: absolute; top: 1px; bottom: 1px; width: 1px; background: rgba(255, 240, 200, .18); }
.ess-gauge .eg-lab { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.ess-gauge .eg-lab b { font-family: var(--decor); font-size: .95rem; color: #ecdcff; line-height: 1; }
.ess-gauge .eg-lab small { font-family: var(--display); font-size: .62rem; color: var(--ink-dim); letter-spacing: .04em; }
.ess-gauge.lead .eg-lab::before { content: "♛"; color: var(--gold-hi); font-size: .78rem; margin-right: 3px; text-shadow: 0 0 8px rgba(255, 200, 100, .9); }
.ess-gauge.near .eg-bar { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 200, 120, .7), 0 0 14px rgba(255, 190, 100, .5); animation: egNear 1.8s ease-in-out infinite; }
.ess-gauge.near .eg-lab b { color: var(--gold-hi); }
.ess-gauge.me .eg-lab b { color: var(--gold-hi); text-shadow: 0 0 10px rgba(255, 210, 120, .55); }
/* yours, over your Hoards: bigger and gold-lit */
.ess-gauge.big { margin: 0 0 0 12px; min-width: 180px; flex: 1; max-width: 520px; }
.ess-gauge.big .eg-bar { height: 10px; border-radius: 5px; }
.ess-gauge.big .eg-lab b { font-size: 1.25rem; }
.ess-gauge.big .eg-lab small { font-size: .7rem; text-transform: none; font-family: var(--body); font-style: italic; letter-spacing: 0; }
#renown-sub { display: flex; flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; }
#items-zone > h4 { display: flex; align-items: center; }
.ess-gauge .eg-pop { position: absolute; right: 30px; top: -18px; font-family: var(--decor); font-size: .9rem; pointer-events: none; animation: asPop 1.6s ease-out forwards; }
.ess-gauge .eg-pop.up { color: var(--gold-hi); text-shadow: 0 0 10px rgba(255, 210, 120, .9); }
.ess-gauge .eg-pop.down { color: #ff8c6a; text-shadow: 0 0 10px rgba(255, 110, 80, .8); }
.ess-gauge.gain .eg-fill { animation: egGain 1s ease-out; }
.ess-gauge.loss .eg-bar { animation: asLoss .6s ease-out; }
@keyframes egNear { 0%, 100% { filter: none; } 50% { filter: brightness(1.35); } }
@keyframes egGain { 0% { filter: none; } 30% { filter: brightness(1.8) saturate(1.3); } 100% { filter: none; } }
@media (max-width: 520px) { .ess-gauge.big { min-width: 120px; } .ess-gauge.big .eg-lab small { display: none; } }

/* ==== A PATRON, UP CLOSE (long-press a face) ==== */
#inspect .inspect-card .insp-patron .portrait-full { position: relative; height: min(calc(100dvh - 56px), 720px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: visible; }
#inspect .inspect-card .insp-patron .portrait-full > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; border: 2px solid rgba(255, 224, 138, .8);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 50px rgba(255, 200, 100, .18); animation: scaleIn .2s ease-out; }
#inspect .inspect-card .insp-patron .pf-crest { position: absolute; right: -12px; bottom: -12px; width: 76px; height: 76px; border-radius: 50%; border: 2px solid #ffe08a; box-shadow: 0 6px 18px rgba(0, 0, 0, .8); }
@media (orientation: portrait), (max-width: 640px) {
  #inspect .inspect-card .insp-patron .portrait-full { height: min(52dvh, 560px); }
  #inspect .inspect-card .insp-patron .pf-crest { width: 56px; height: 56px; right: -8px; bottom: -8px; }
}

/* ==== the play bar: turn | your Essence (centre) | the place (right edge) ==== */
#table .play-bar .pb-row > .pb-essence { order: 2; flex: 1 1 220px; min-width: 160px; display: flex; justify-content: center; }
#table .play-bar .pb-row > .pb-essence:empty { display: none; }
#table .play-bar .pb-row > .pb-essence .ess-gauge.big { margin: 0; width: 100%; max-width: 460px; }
#table .play-bar .pb-row > .pb-omen { order: 3; margin-left: auto; justify-content: flex-end; }
@media (max-width: 760px) {
  #table .play-bar .pb-row { flex-wrap: wrap; }
  #table .play-bar .pb-row > .pb-essence { order: 9; flex-basis: 100%; }
}

/* ==== rivals: the name sits right beside the portrait, left-aligned ==== */
.t-opps .seat .s-header { justify-items: start; }
.t-opps .seat .s-header .s-info { text-align: left; justify-self: start; align-items: flex-start; }
.t-opps .seat .s-header .s-info .s-name, .t-opps .seat .s-header .s-info .s-char { text-align: left; }

/* ==== the living background: a new place opens from the centre in a widening glow ==== */
.sky video.cosmos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
html.lite .sky video.cosmos { display: block; }
.sky video.cosmos.arriving { animation: placeIn 2.4s cubic-bezier(.2, .7, .2, 1) both; z-index: 1; }
.sky video.cosmos.leaving { animation: placeOut 2.4s ease both; }
.sky .cosmos-shade { z-index: 2; }
@keyframes placeIn {
  0% { opacity: 0; transform: scale(1.12); filter: blur(14px) brightness(1.8); -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 18%); mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 18%); }
  45% { opacity: 1; filter: blur(4px) brightness(1.25); -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 35%, transparent 70%); mask-image: radial-gradient(circle at 50% 52%, #000 35%, transparent 70%); }
  100% { opacity: 1; transform: none; filter: none; -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 100%, transparent 140%); mask-image: radial-gradient(circle at 50% 52%, #000 100%, transparent 140%); }
}
@keyframes placeOut { 0% { opacity: 1; filter: none; } 100% { opacity: 0; filter: blur(10px) brightness(.6); transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .sky video.cosmos.arriving, .sky video.cosmos.leaving { animation-duration: .01s; } }

/* ==== how friends reach your table: three choices, each saying when it fits ==== */
#net-card .net-switch { display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0; }
#net-card .net-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--line, rgba(212,167,58,.28)); background: rgba(10,9,14,.55); color: var(--ink); text-transform: none; letter-spacing: 0; min-height: 0; }
#net-card .net-opt b { font-family: var(--display); font-size: .92rem; letter-spacing: .06em; color: #fff3d6; }
#net-card .net-opt span { font-family: var(--body); font-size: .86rem; line-height: 1.35; color: var(--ink-dim); font-style: italic; font-weight: 400; }
#net-card .net-opt.on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(255,224,138,.14), rgba(10,9,14,.6)); box-shadow: 0 0 18px rgba(255,200,100,.15); }
#net-card .net-opt.on b { color: var(--gold-hi); }

/* ==== the browser version: Solo and Pass & Play only, and how to join friends ==== */
.web-note { display: none; }
html.web .web-note { display: block; }
html.web .web-note p { color: var(--ink-dim); font-size: .95rem; line-height: 1.45; margin: 6px 0 8px; }
html.web #create-btn, html.web #join-app-btn, html.web .join-panel, html.web #join-status { display: none; }

/* several cards revealed at once: the others fan out behind the first, a shade darker */
.reveal-scene .reveal-card.reveal-behind { z-index: 60; filter: brightness(.7); transform-origin: 50% 90%; }
.reveal-scene .reveal-count { display: none; }