:root {
  --bg: #0b0b0b;
  --panel: #151515;
  --panel-2: #1c1c1c;
  --ink: #f5f5f2;
  --muted: #a5a5a0;
  --line: #3c3c38;
  --light: #f3f3ef;
  --dark: #080808;
  --success: #c9ffb9;
  --warn: #ffe3a4;
  --danger: #ffb4b4;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Tahoma, Verdana, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.online-shell {
  min-height: 100vh;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 50% 0%, #272727 0, #111 42%, #080808 100%);
}

.online-panel {
  width: min(1100px, 96vw);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(17,17,17,.97);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  overflow: hidden;
}

.online-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  background: #0c0c0c;
}

.online-logo { width: min(280px, 48vw); display: block; }
.logo-home-btn { appearance: none; border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; }
.logo-home-btn:hover .online-logo { filter: drop-shadow(0 0 14px rgba(255,255,255,.12)); }
.logo-home-btn:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 4px; border-radius: 6px; }
.alpha-chip {
  border: 1px solid #5d5d58;
  border-radius: 4px;
  padding: 7px 9px;
  color: #d5d5cf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.online-body { padding: clamp(22px, 4vw, 46px); }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 800; }
h1 { margin: 9px 0 10px; font-size: clamp(34px, 5vw, 62px); line-height: .96; letter-spacing: -.045em; }
h2, h3 { margin: 0; }
.lede { max-width: 720px; color: var(--muted); line-height: 1.5; margin: 0 0 28px; }

.home-rules-card {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #121212;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-rules-card strong { display: block; margin-top: 6px; font-size: 18px; }
.home-rules-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.mode-grid, .agency-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.mode-card, .agency-card, .selection-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 20px;
}
.mode-card h2 { font-size: 22px; margin-bottom: 7px; }
.mode-card p, .agency-card p { color: var(--muted); line-height: 1.45; font-size: 13px; }

.field { display: grid; gap: 7px; margin-top: 14px; }
.field label { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 800; }
.field input, .field select {
  width: 100%;
  border: 1px solid #4a4a46;
  border-radius: 5px;
  background: #0d0d0d;
  color: white;
  padding: 12px;
  outline: none;
}
.field input:focus, .field select:focus { border-color: #8b8b84; }
.room-input { text-transform: uppercase; letter-spacing: .15em; font-weight: 800; }

.primary-btn, .secondary-btn, .ghost-btn {
  border-radius: 5px;
  padding: 12px 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
  border: 0;
}
.primary-btn { background: var(--light); color: var(--dark); }
.primary-btn:hover { background: white; }
.secondary-btn { background: #242424; color: white; border: 1px solid #555; }
.ghost-btn { background: transparent; color: white; border: 1px solid #555; }
.primary-btn:disabled, .secondary-btn:disabled, .ghost-btn:disabled { opacity: .35; cursor: not-allowed; }
.action-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101010;
  margin-bottom: 18px;
}
.room-code-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.room-code { font-size: clamp(30px, 5vw, 50px); letter-spacing: .12em; font-weight: 900; line-height: 1; }
.room-meta { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.agency-card { position: relative; min-height: 190px; }
.agency-card.you { border-color: #7b7b74; }
.seat-chip { position: absolute; top: 14px; right: 14px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agency-title { font-size: 22px; padding-right: 60px; }
.deck-line { margin-top: 12px; color: #ddd; font-size: 13px; }
.ready-line { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.ready-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.ready-line.ready .ready-dot { background: var(--success); box-shadow: 0 0 12px rgba(201,255,185,.5); }
.waiting-card { border: 1px dashed #454541; border-radius: 5px; min-height: 190px; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 22px; }

.selection-card { margin-top: 18px; }
.selection-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.brief-preview { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.brief-preview img { width: 112px; aspect-ratio: .7142857; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid #555; flex: 0 0 auto; }
.brief-copy { min-width: 0; }
.brief-copy strong { display: block; font-size: 15px; }
.brief-copy small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.4; }
.face-down-note { margin-top: 10px; color: var(--warn); font-size: 10px; line-height: 1.4; }

.connection-bar { margin-top: 18px; color: var(--muted); font-size: 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.connection-ok { color: var(--success); }
.connection-bad { color: var(--danger); }

.online-toast {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(620px, 90vw);
  background: #f5f5f0;
  color: #080808;
  padding: 12px 16px;
  border-radius: 5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  font-weight: 700;
}
.online-toast.error { background: #ffd6d6; }

.loading { min-height: 460px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.spinner { width: 30px; height: 30px; border: 3px solid #444; border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .mode-grid, .agency-grid, .selection-grid { grid-template-columns: 1fr; }
  .online-head { padding: 16px; }
  .online-body { padding: 20px 16px 28px; }
  .brief-preview img { width: 92px; }
  .home-rules-card { flex-direction: column; align-items: flex-start; }
}

/* Online Alpha 0.2 — Start Presentation handshake */
.start-presentation-card {
  margin-top: 18px;
  border: 1px solid #707068;
  border-radius: 5px;
  background: #1a1a18;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.start-presentation-card strong { display: block; margin-top: 6px; font-size: 17px; }
.start-presentation-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 720px; }
.waiting-host { color: var(--success); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; white-space: nowrap; }

.match-day {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
}
.match-launch {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(135deg, #171717, #0d0d0d);
  padding: clamp(22px, 4vw, 42px);
}
.match-kicker { color: var(--success); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.match-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; align-items: stretch; margin-top: 24px; }
.match-brief, .first-up-card, .network-next {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.match-brief { display: flex; gap: 20px; align-items: flex-start; padding: 20px; }
.match-brief img { width: 150px; aspect-ratio: .7142857; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid #5b5b55; flex: 0 0 auto; }
.match-brief h2 { margin-top: 7px; font-size: clamp(24px, 3vw, 36px); line-height: 1; }
.match-brief p { color: var(--muted); line-height: 1.45; }
.first-up-card { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.first-up-name { margin-top: 12px; font-size: clamp(30px, 4vw, 48px); font-weight: 900; line-height: .95; letter-spacing: -.045em; }
.first-up-meta { margin-top: 10px; color: var(--muted); }
.match-agencies { margin-top: 18px; }
.network-next { margin-top: 18px; padding: 18px 20px; }
.network-next strong { display: block; margin-top: 6px; }
.network-next p { color: var(--muted); line-height: 1.45; margin: 7px 0 0; font-size: 12px; }

@media (max-width: 760px) {
  .start-presentation-card { align-items: flex-start; flex-direction: column; }
  .match-grid { grid-template-columns: 1fr; }
  .match-brief img { width: 100px; }
}


/* Online Alpha 0.3 — server-owned Decks, private Hands, public boards */
.online-match-shell { max-width: 1480px; }
.match-status-row { align-items: flex-end; }
.match-status-right { text-align: right; }
.turn-chip {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid #5f5f59;
  border-radius: 4px;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
  font-weight: 800;
}
.match-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101010;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.match-context-brief { display: flex; align-items: center; gap: 13px; min-width: 0; }
.match-context-brief img {
  width: 56px;
  aspect-ratio: .7142857;
  object-fit: cover;
  object-position: top;
  border: 1px solid #555;
  border-radius: 4px;
}
.match-context-brief strong { display: block; margin-top: 4px; font-size: 16px; }
.match-context-brief small { display: block; margin-top: 5px; max-width: 650px; color: var(--muted); line-height: 1.35; }
.match-security { display: grid; gap: 5px; color: var(--muted); font-size: 10px; text-align: right; }

.network-board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.network-board {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101010;
  padding: 17px;
  min-width: 0;
}
.network-board.you { border-color: #6f6f68; }
.network-board.active { box-shadow: inset 0 0 0 1px rgba(201,255,185,.35); }
.network-board-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.network-board-head h2 { margin: 5px 0 0; font-size: 24px; }
.network-score { font-size: 30px; font-weight: 900; line-height: 1; text-align: right; }
.network-score span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .12em; margin-top: 4px; }
.network-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #2f2f2d;
}
.network-stats span {
  padding: 6px 8px;
  border-radius: 4px;
  background: #181818;
  color: var(--muted);
  font-size: 10px;
}
.network-stats strong { color: white; }

.network-play-area { display: grid; grid-template-columns: 1fr 92px; gap: 12px; margin-top: 16px; }
.network-campaign-slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.network-slot {
  min-height: 142px;
  border: 1px dashed #42423f;
  border-radius: 5px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #65655f;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 8px;
}
.network-slot.occupied { border-style: solid; color: #ddd; background: #171717; }
.network-piles { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.network-pile {
  min-height: 92px;
  border: 1px solid #343431;
  border-radius: 5px;
  background: #0b0b0b;
  padding: 8px;
}
.pile-placeholder { color: #666; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; margin-top: 14px; text-align: center; }
.deck-stack { position: relative; margin: 7px auto 0; width: 50px; }
.deck-stack img { display: block; width: 50px; border-radius: 4px; }
.deck-stack span {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: black;
  font-size: 9px;
  font-weight: 900;
  border: 2px solid #101010;
}

.private-hand-panel {
  position: relative;
  margin-top: 18px;
  border: 1px solid #55554f;
  border-radius: 5px;
  background: linear-gradient(180deg, #161616, #101010);
  padding: 18px 18px 24px;
  overflow: visible;
}
.private-hand-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.private-hand-heading h2 { margin: 5px 0 0; font-size: 24px; }
.private-lock {
  padding: 6px 8px;
  border: 1px solid #55554f;
  border-radius: 4px;
  color: var(--warn);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.private-note { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 8px 0 0; }
.private-hand-grid {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 17px;
  min-height: 190px;
  overflow: visible;
}
.private-hand-card {
  position: relative;
  width: 112px;
  flex: 0 0 112px;
  aspect-ratio: .7142857;
  border-radius: 6px;
  transform-origin: center bottom;
  transition: transform .16s ease, filter .16s ease;
  z-index: 1;
  cursor: zoom-in;
}
.private-hand-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.private-hand-card:hover {
  transform: translateY(-18px) scale(1.95);
  z-index: 90;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.65));
}
.private-hand-card.rare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 42%, rgba(220,245,255,.2) 50%, transparent 67%);
  background-size: 240% 100%;
  mix-blend-mode: screen;
}
.private-hand-card.rare-card:hover::after {
  opacity: 1;
  animation: onlineRareShimmer 5s ease-in-out infinite;
}
@keyframes onlineRareShimmer {
  0%, 72%, 100% { background-position: 190% 0; opacity: 0; }
  76% { opacity: .15; }
  84% { background-position: -80% 0; opacity: .85; }
  90% { opacity: .08; }
}

@media (max-width: 980px) {
  .network-board-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .match-context-bar { align-items: flex-start; flex-direction: column; }
  .match-security { text-align: left; }
  .network-play-area { grid-template-columns: 1fr 82px; }
  .network-campaign-slots { grid-template-columns: 1fr; }
  .network-slot { min-height: 92px; }
  .private-hand-card { width: 92px; flex-basis: 92px; }
  .private-hand-card:hover { transform: translateY(-10px) scale(1.55); }
}


/* Online Alpha 0.4 — core server-validated turn loop */
.turn-allowances {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.turn-allowances span {
  border: 1px solid #3d3d39;
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.turn-allowances strong { color: #fff; }

.hand-card-shell {
  width: 112px;
  flex: 0 0 112px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hand-card-shell .private-hand-card { width: 112px; flex-basis: auto; }
.card-play-btn {
  width: 100%;
  min-height: 28px;
  border: 1px solid #55554f;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.card-play-btn:disabled { opacity: .3; cursor: not-allowed; }
.effect-note {
  color: var(--warn);
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
}

.just-drawn .private-hand-card {
  animation: onlineDrawIn .75s cubic-bezier(.2,.75,.2,1);
}
@keyframes onlineDrawIn {
  0% { transform: translate(180px,-120px) scale(.38) rotate(7deg); opacity: .15; }
  72% { transform: translate(-4px,3px) scale(1.04) rotate(-1deg); opacity: 1; }
  100% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; }
}

.network-slot.campaign-stack {
  position: relative;
  display: block;
  min-height: 206px;
  overflow: visible;
  padding: 7px 7px 38px;
}
.stack-cards {
  position: relative;
  width: 88px;
  height: 146px;
  margin: 0 auto;
}
.stack-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  aspect-ratio: .7142857;
  border-radius: 5px;
  transform-origin: center bottom;
  transition: transform .15s ease, filter .15s ease;
}
.stack-card.attached-card { top: calc(var(--stack-index) * 20px); }
.stack-card img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:top;
  border-radius:inherit; box-shadow:0 5px 12px rgba(0,0,0,.38);
}
.stack-card:hover {
  transform: scale(1.9) translateY(-10px);
  z-index: 90;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.7));
}
.stack-card.rare-card::after, .modal-card.rare-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 42%,rgba(220,245,255,.2) 50%,transparent 67%);
  background-size:240% 100%; mix-blend-mode:screen;
}
.stack-card.rare-card:hover::after, .modal-card.rare-card:hover::after {
  opacity:1; animation:onlineRareShimmer 5s ease-in-out infinite;
}
.stack-label {
  position:absolute; left:7px; right:7px; bottom:25px;
  color:#ddd; font-size:8px; line-height:1.2; text-align:center;
}
.mini-danger {
  position:absolute; left:7px; right:7px; bottom:5px;
  border:1px solid #714545; border-radius:3px; background:#241414; color:#ffd7d7;
  font:inherit; font-size:7px; font-weight:800; text-transform:uppercase; padding:4px;
}
.network-slot.drop-ready { border-color: var(--success); box-shadow: inset 0 0 0 1px rgba(201,255,185,.45); }
.dragging-card [data-drop-campaign], .dragging-card [data-drop-idea] { border-color:#66665f; }

.network-pile.preview-discard, .stat-button {
  appearance:none; color:inherit; font:inherit; cursor:pointer; text-align:left;
}
.network-pile.preview-discard:hover, .stat-button:hover { border-color:#686860; }
.stat-button {
  border:0; border-radius:4px; background:#181818; color:var(--muted);
  padding:6px 8px; font-size:10px;
}

.turn-control-bar {
  margin-top:18px; border:1px solid #4b4b46; border-radius:5px; background:#141414;
  padding:16px 18px; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.turn-control-bar strong { display:block; margin-top:5px; font-size:18px; }
.turn-control-bar p { margin:6px 0 0; color:var(--muted); max-width:850px; font-size:10px; line-height:1.45; }
.timeline-chip { color:var(--warn); }

.game-overlay {
  position:fixed; z-index:2000; inset:0; background:rgba(0,0,0,.78);
  display:grid; place-items:center; padding:24px;
}
.game-modal {
  position:relative; width:min(980px,95vw); max-height:88vh; overflow:auto;
  border:1px solid #55554f; border-radius:6px; background:#141414; color:#fff;
  padding:24px; box-shadow:0 24px 70px rgba(0,0,0,.65);
}
.modal-x {
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  border:1px solid #666; background:#222; color:#fff; display:grid; place-items:center;
  line-height:1; font-size:20px; padding:0;
}
.modal-card-grid {
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-top:18px;
}
.modal-card {
  position:relative; width:112px; aspect-ratio:.7142857; border-radius:6px;
  transition:transform .15s ease; transform-origin:center top;
}
.modal-card img { width:100%; height:100%; display:block; object-fit:cover; object-position:top; border-radius:inherit; }
.modal-card:hover { transform:scale(1.8); z-index:50; }
.target-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.target-card {
  border:1px solid #484844; border-radius:5px; background:#1a1a1a; color:#fff;
  padding:12px; display:grid; gap:8px; text-align:left;
}
.target-card:hover { border-color:var(--success); }
.target-card img { width:90px; border-radius:5px; }
.target-card strong { font-size:12px; }
.target-card span { color:var(--muted); font-size:9px; }

@media (max-width:760px) {
  .hand-card-shell { width:92px; flex-basis:92px; }
  .hand-card-shell .private-hand-card { width:92px; }
  .turn-control-bar { align-items:flex-start; flex-direction:column; }
  .target-grid { grid-template-columns:1fr; }
}


/* ==========================================================================\n   Online Alpha 0.5 — side context column + stacked horizontal Presentations\n   ========================================================================== */
.online-match-shell-05 { max-width: 1560px; }
.match-head-05 { padding-block: 22px; }
.match-head-05 .online-logo { width: min(245px, 42vw); }
.match-body-05 { padding-top: 22px; }
.match-layout-05 {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.match-sidebar-05 {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  align-self: start;
}
.match-side-card {
  border: 1px solid #41413d;
  border-radius: 6px;
  background: #111;
  padding: 16px;
  min-width: 0;
}
.room-side-card { background: linear-gradient(180deg, #151515, #101010); }
.side-room-code {
  margin-top: 6px;
  font-size: clamp(30px, 3.2vw, 43px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: .105em;
  white-space: nowrap;
}
.side-room-meta {
  margin-top: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 800;
}
.side-day {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #343431;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.room-side-card .turn-chip { display: inline-flex; margin-top: 10px; }
.brief-side-card { display: grid; gap: 9px; }
.side-brief-image {
  display: block;
  width: 108px;
  max-width: 100%;
  aspect-ratio: .7142857;
  object-fit: cover;
  object-position: top;
  border: 1px solid #55554f;
  border-radius: 5px;
  margin-top: 3px;
}
.side-brief-title { font-size: 17px; line-height: 1.05; }
.brief-side-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.server-side-card { display: grid; gap: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.match-main-05 { min-width: 0; }
.board-band-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 7px;
  color: #f1f1ed;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 900;
}
.board-band-label small { color: var(--muted); font-size: 8px; font-weight: 700; }
.my-board-label { margin-top: 16px; }
.match-main-05 .network-board {
  min-height: 0;
  padding: 16px 17px 18px;
}
.match-main-05 .network-board.opponent {
  background: #101010;
  border-color: #373733;
}
.match-main-05 .network-board.you {
  background: linear-gradient(180deg, #171717, #111);
  border-color: #707067;
}
.match-main-05 .network-board-head h2 { font-size: 25px; }
.match-main-05 .network-play-area {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  margin-top: 14px;
}
.match-main-05 .network-campaign-slots {
  grid-template-columns: repeat(3, minmax(155px, 1fr));
  gap: 11px;
}
.match-main-05 .network-slot { min-height: 178px; }
.match-main-05 .network-slot.campaign-stack { min-height: 215px; }
.match-main-05 .network-board.opponent .network-slot.campaign-stack { min-height: 196px; }
.match-main-05 .stack-cards { width: 94px; height: 153px; }
.match-main-05 .stack-card { width: 94px; }
.match-main-05 .network-piles { gap: 10px; }
.match-main-05 .network-pile { min-height: 100px; }
.match-main-05 .private-hand-panel { margin-top: 17px; }
.turn-control-05 { margin-top: 17px; }

/* Action-card state */
.hand-card-shell .card-play-btn.play-action:not(:disabled) {
  border-color: #8d8357;
  background: #262114;
  color: #fff5c7;
}
.hand-card-shell .card-play-btn.play-action:not(:disabled):hover { border-color: #d0bf75; }
.network-slot.action-drop-ready { border-color: var(--warn); }

@media (max-width: 1120px) {
  .match-layout-05 { grid-template-columns: 210px minmax(0,1fr); }
  .match-main-05 .network-campaign-slots { grid-template-columns: repeat(3, minmax(125px,1fr)); }
}
@media (max-width: 900px) {
  .match-layout-05 { grid-template-columns: 1fr; }
  .match-sidebar-05 {
    position: static;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .side-brief-image { width: 74px; }
}
@media (max-width: 680px) {
  .match-sidebar-05 { grid-template-columns: 1fr; }
  .match-main-05 .network-play-area { grid-template-columns: 1fr; }
  .match-main-05 .network-piles { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .match-main-05 .network-campaign-slots { grid-template-columns: 1fr; }
  .match-main-05 .network-slot { min-height: 108px; }
  .board-band-label { align-items: flex-start; flex-direction: column; gap: 3px; }
}


/* ==========================================================================\n   Online Alpha 0.5.1 — Hand fan + Deck/Discard resource rail + holo polish\n   ========================================================================== */

/* Presentations are only Presentations now; physical Deck/Discard piles live with the Hand. */
.match-main-05 .network-play-area.presentation-only {
  display: block;
  grid-template-columns: none;
}
.match-main-05 .network-play-area.presentation-only .network-presentation { width: 100%; }

/* Hand + resource zone */
.private-hand-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
  overflow: visible;
}
.private-hand-fan { min-width: 0; overflow: visible; }
.private-hand-workspace .private-hand-grid {
  margin-top: 0;
  gap: 5px 0;
  padding-left: 28px;
  padding-right: 8px;
  align-content: flex-start;
}

/* Each 112px card occupies an 84px lane. Later cards tuck UNDER the card to their
   left, leaving the top-right point/value area readable — same behavior as local. */
.private-hand-workspace .hand-card-shell {
  width: 84px;
  flex: 0 0 84px;
  z-index: calc(220 - var(--hand-index));
}
.private-hand-workspace .hand-card-shell:hover { z-index: 700; }
.private-hand-workspace .hand-card-shell .private-hand-card {
  width: 112px;
  margin-left: -28px;
  flex-basis: auto;
}
.private-hand-workspace .hand-card-shell .card-play-btn {
  width: 80px;
  margin-left: 0;
  padding-inline: 4px;
}
.private-hand-workspace .hand-card-shell .effect-note {
  width: 80px;
  text-align: left;
}
.private-hand-workspace .private-hand-card:hover {
  transform: translateY(-18px) scale(2);
  z-index: 900;
}

.private-hand-resources {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-self: stretch;
}
.hand-resource-pile {
  min-height: 148px;
  border: 1px solid #454540;
  border-radius: 6px;
  background: #0b0b0b;
  color: #fff;
  padding: 10px;
  min-width: 0;
}
button.hand-resource-pile {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.hand-resource-pile:hover { border-color: #74746b; }
.hand-pile-count {
  margin-top: 8px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.3;
  text-align: center;
}
.pile-empty {
  min-height: 86px;
  display: grid;
  place-items: center;
  color: #676761;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}
.pile-top-card {
  position: relative;
  width: 72px;
  margin: 8px auto 0;
  aspect-ratio: .7142857;
  border-radius: 5px;
  transition: transform .16s ease, filter .16s ease;
  transform-origin: center center;
}
.pile-top-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  box-shadow: 0 5px 12px rgba(0,0,0,.42);
}
.hand-resource-pile:hover .pile-top-card {
  transform: scale(1.22);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.hand-deck-stack {
  position: relative;
  width: 72px;
  margin: 8px auto 0;
}
.hand-deck-stack img {
  display: block;
  width: 72px;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(0,0,0,.42);
}
.hand-deck-stack span {
  position: absolute;
  right: -8px;
  bottom: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #050505;
  border: 2px solid #111;
  font-size: 9px;
  font-weight: 900;
}

/* More holographic than a simple white glint, but still subtle enough to let the
   baked-in rare-card texture show through. One sweep per ~5 seconds while hovered. */
.private-hand-card.rare-card::after,
.stack-card.rare-card::after,
.modal-card.rare-card::after,
.pile-top-card.rare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(112deg,
      transparent 16%,
      rgba(255,90,180,.12) 31%,
      rgba(120,225,255,.42) 42%,
      rgba(255,255,255,.72) 49%,
      rgba(255,235,105,.28) 55%,
      rgba(170,120,255,.18) 64%,
      transparent 78%),
    linear-gradient(125deg,
      transparent 20%,
      rgba(255,0,128,.13),
      rgba(0,255,255,.13),
      rgba(255,235,0,.13),
      transparent 78%);
  background-size: 250% 100%, 220% 100%;
  mix-blend-mode: screen;
}
.private-hand-card.rare-card:hover::after,
.stack-card.rare-card:hover::after,
.modal-card.rare-card:hover::after,
.hand-resource-pile:hover .pile-top-card.rare-card::after {
  opacity: 1;
  animation: onlineRareShimmer051 5s ease-in-out infinite;
}
@keyframes onlineRareShimmer051 {
  0%, 72%, 100% { background-position: 190% 0, 165% 0; opacity: 0; }
  76% { opacity: .18; }
  84% { background-position: -70% 0, -45% 0; opacity: .92; }
  91% { opacity: .07; }
}

/* All face-up card previews use the same easy-read ~2x hover behavior. */
.stack-card:hover { transform: scale(2) translateY(-9px); }
.modal-card:hover { transform: scale(2); }

@media (max-width: 980px) {
  .private-hand-workspace { grid-template-columns: minmax(0,1fr) 112px; }
  .private-hand-workspace .private-hand-grid { padding-left: 23px; }
  .private-hand-workspace .hand-card-shell { width: 74px; flex-basis: 74px; }
  .private-hand-workspace .hand-card-shell .private-hand-card { width: 100px; margin-left: -23px; }
  .private-hand-workspace .hand-card-shell .card-play-btn,
  .private-hand-workspace .hand-card-shell .effect-note { width: 70px; }
}
@media (max-width: 680px) {
  .private-hand-workspace { grid-template-columns: 1fr; }
  .private-hand-resources { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .hand-resource-pile { min-height: 132px; }
  .private-hand-workspace .private-hand-grid { padding-left: 20px; }
  .private-hand-workspace .hand-card-shell { width: 70px; flex-basis: 70px; }
  .private-hand-workspace .hand-card-shell .private-hand-card { width: 92px; margin-left: -20px; }
  .private-hand-workspace .private-hand-card:hover { transform: translateY(-10px) scale(1.62); }
  .private-hand-workspace .hand-card-shell .card-play-btn,
  .private-hand-workspace .hand-card-shell .effect-note { width: 66px; }
}

/* ==========================================================================
   Online Alpha 0.5.3 — stable magnification + uninterrupted polling-safe hover
   ========================================================================== */

/*
  IMPORTANT: keep each card's hover hitbox at its original size. In 0.5.1 the
  wrapper itself scaled, which could move the hover boundary under the pointer
  and cause the card to rapidly toggle between 1x and 2x. We now scale the
  image (and holo layer) inside a stationary wrapper instead.
*/
.private-hand-card,
.stack-card,
.modal-card,
.pile-top-card {
  transform: none !important;
  filter: none !important;
}

.private-hand-card img,
.stack-card img,
.modal-card img,
.pile-top-card img,
.private-hand-card.rare-card::after,
.stack-card.rare-card::after,
.modal-card.rare-card::after,
.pile-top-card.rare-card::after {
  transform: translate3d(0,0,0) scale(1);
  transition: transform .16s ease, filter .16s ease;
  will-change: transform;
}

/* Keep the stationary parent above neighboring cards while its child is enlarged. */
.private-hand-workspace .hand-card-shell:hover { z-index: 1200; }
.private-hand-card:hover { z-index: 1200; }
.stack-card:hover { z-index: 1200; }
.modal-card:hover { z-index: 1200; }
.pile-top-card:hover { z-index: 1200; }

/* ~2x easy-read magnification without changing the hover target itself. */
.private-hand-card:hover img,
.private-hand-card.rare-card:hover::after {
  transform: translateY(-18px) scale(2);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.68));
}

.stack-card:hover img,
.stack-card.rare-card:hover::after {
  transform: translateY(-9px) scale(2);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.72));
}

.modal-card:hover img,
.modal-card.rare-card:hover::after {
  transform: scale(2);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.72));
}

.hand-resource-pile:hover .pile-top-card img,
.hand-resource-pile:hover .pile-top-card.rare-card::after {
  transform: scale(2);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.72));
}

/* Rare image itself gets a slight spectral lift while magnified. */
.private-hand-card.rare-card:hover img,
.stack-card.rare-card:hover img,
.modal-card.rare-card:hover img,
.hand-resource-pile:hover .pile-top-card.rare-card img {
  filter: saturate(1.22) brightness(1.06) drop-shadow(0 16px 30px rgba(0,0,0,.72));
}

/*
  Immediate sweep on mouse-enter, then the same sweep once every 5 seconds.
  The first ~0.9s is the visible pass; the remainder of each 5s cycle rests.
*/
.private-hand-card.rare-card:hover::after,
.stack-card.rare-card:hover::after,
.modal-card.rare-card:hover::after,
.hand-resource-pile:hover .pile-top-card.rare-card::after {
  opacity: .78;
  animation: onlineRareShimmer052 5s linear infinite !important;
}

@keyframes onlineRareShimmer052 {
  0% {
    background-position: 132% 0, 122% 0;
    opacity: .78;
  }
  5% {
    background-position: 82% 0, 78% 0;
    opacity: 1;
  }
  11% {
    background-position: 18% 0, 24% 0;
    opacity: .96;
  }
  17% {
    background-position: -78% 0, -62% 0;
    opacity: .30;
  }
  20%, 100% {
    background-position: -105% 0, -90% 0;
    opacity: 0;
  }
}

/* More visible spectral layer than 0.5.1, while preserving card readability. */
.private-hand-card.rare-card::after,
.stack-card.rare-card::after,
.modal-card.rare-card::after,
.pile-top-card.rare-card::after {
  background:
    linear-gradient(112deg,
      transparent 13%,
      rgba(255,70,185,.24) 27%,
      rgba(105,225,255,.54) 39%,
      rgba(255,255,255,.88) 49%,
      rgba(255,238,90,.44) 57%,
      rgba(170,105,255,.30) 67%,
      transparent 81%),
    linear-gradient(128deg,
      transparent 14%,
      rgba(255,0,136,.20) 30%,
      rgba(0,255,245,.20) 47%,
      rgba(255,220,0,.18) 63%,
      transparent 82%);
  background-size: 250% 100%, 225% 100%;
  mix-blend-mode: screen;
  box-shadow: inset 0 0 18px rgba(255,255,255,.08);
}

@media (max-width: 760px) {
  .private-hand-card:hover img,
  .private-hand-card.rare-card:hover::after {
    transform: translateY(-10px) scale(1.55);
  }
}


/* 0.5.3 note: the hover visual rules remain on stationary hitboxes. The JS
   render guard now prevents unchanged 1.8s synchronization polls from
   replacing a hovered card node, so magnification + holo animation can run
   continuously until the pointer actually leaves the card. */

/* ==========================================================================
   Online Alpha 0.8 — Brief requirement cues + roomy Discard browser
   ========================================================================== */

.campaign-requirement {
  margin-top: 7px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: none;
  border: 1px solid #44443f;
  background: #111;
}
.campaign-requirement.needs {
  color: #d7d7cf;
  border-color: #5c514b;
  background: #171311;
}
.campaign-requirement.met {
  color: var(--success);
  border-color: rgba(201,255,185,.34);
  background: rgba(201,255,185,.055);
}

/* The Discard browser is allowed to grow naturally while the overlay itself
   handles scrolling. That prevents a 2x magnified card from being clipped by
   the modal's old max-height/overflow boundary. */
.discard-browser-overlay {
  display: block;
  overflow: auto;
  padding: 6vh 24px 14vh;
}
.discard-browser-modal {
  width: min(1240px, 96vw);
  max-height: none;
  overflow: visible;
  margin: 0 auto;
  padding: 58px 52px 86px;
}
.discard-browser-content {
  min-height: 260px;
}
.discard-browser-modal .modal-card-grid {
  gap: 18px;
  padding: 44px 80px 90px;
  margin: 0 -24px -52px;
}
.discard-browser-modal .modal-card {
  width: 122px;
}
.discard-browser-modal .modal-card:hover img,
.discard-browser-modal .modal-card.rare-card:hover::after {
  transform: scale(2);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .discard-browser-overlay { padding: 3vh 10px 10vh; }
  .discard-browser-modal { width: 98vw; padding: 50px 18px 68px; }
  .discard-browser-modal .modal-card-grid {
    padding: 34px 42px 68px;
    margin: 0 -8px -34px;
    gap: 12px;
  }
  .discard-browser-modal .modal-card { width: 96px; }
}

/* ==========================================================================
   Online Alpha 0.9 — search sizing, compact Kill, pile hover, Undo + endgame
   ========================================================================== */

/* Deck-search / private-choice cards should open at normal card size. */
.modal-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}
.modal-choice-card {
  appearance: none;
  border: 1px solid #40403c;
  border-radius: 6px;
  background: #101010;
  color: #fff;
  padding: 8px;
  min-width: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.modal-choice-card:hover { border-color: #77776f; }

.modal-choice-card.is-selected {
  position: relative;
  border-color: #f3f3ef;
  background: #202020;
  box-shadow: 0 0 0 2px #f3f3ef, 0 14px 30px rgba(0,0,0,.34);
}
.modal-choice-card.is-selected::before {
  content: "✓";
  position: absolute;
  z-index: 1500;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3f3ef;
  color: #080808;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.choice-confirm-footer {
  align-items: center;
  gap: 14px;
}
.choice-selection-status {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.choice-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.choice-card-visual {
  position: relative;
  display: block;
  width: 100%;
  max-width: 122px;
  margin: 0 auto;
  aspect-ratio: .7142857;
  border-radius: 6px;
  z-index: 1;
}
.choice-card-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  transform: translate3d(0,0,0) scale(1);
  transition: transform .16s ease, filter .16s ease;
  will-change: transform;
  box-shadow: 0 7px 18px rgba(0,0,0,.38);
}
.modal-choice-card:hover .choice-card-visual { z-index: 1100; }
.modal-choice-card:hover .choice-card-visual img,
.modal-choice-card:hover .choice-card-visual.rare-card::after {
  transform: scale(1.78);
  filter: drop-shadow(0 15px 26px rgba(0,0,0,.68));
}
.modal-choice-card > strong {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
}
.modal-choice-card > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
}
.choice-card-visual.rare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 13%, rgba(255,70,185,.24) 27%, rgba(105,225,255,.54) 39%, rgba(255,255,255,.88) 49%, rgba(255,238,90,.44) 57%, rgba(170,105,255,.30) 67%, transparent 81%),
    linear-gradient(128deg, transparent 14%, rgba(255,0,136,.20) 30%, rgba(0,255,245,.20) 47%, rgba(255,220,0,.18) 63%, transparent 82%);
  background-size: 250% 100%, 225% 100%;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0) scale(1);
}
.modal-choice-card:hover .choice-card-visual.rare-card::after {
  opacity: .78;
  animation: onlineRareShimmer052 5s linear infinite;
}

/* Return Kill Campaign to the compact local-prototype treatment. */
.mini-danger.kill-campaign {
  position: static;
  display: inline-flex;
  width: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 9px auto 0;
  padding: 7px 9px;
  border: 1px solid #6a3d3d;
  border-radius: 999px;
  background: transparent;
  color: #ffb3b3;
  font-size: 8px;
  letter-spacing: .07em;
  white-space: nowrap;
}
.mini-danger.kill-campaign:hover:not(:disabled) {
  background: #2a1515;
  border-color: #ff8f8f;
}

/* Main-table Discard is a resource button, not a card-reading surface. */
.hand-resource-pile:hover .pile-top-card,
.hand-resource-pile:hover .pile-top-card img {
  transform: none !important;
  filter: none !important;
}
.hand-resource-pile:hover .pile-top-card::after {
  opacity: 0 !important;
  animation: none !important;
}

/* Undo response. */
.undo-reaction-preview {
  display: grid;
  grid-template-columns: 126px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #41413d;
  border-radius: 6px;
  background: #101010;
}
.undo-reaction-preview .modal-card { width: 118px; }
.undo-reaction-copy { display: grid; gap: 7px; }
.undo-reaction-copy strong { font-size: 22px; line-height: 1.05; }
.undo-reaction-copy span { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.undo-actions { margin-top: 22px; }
.reaction-only-btn { color: #aaa; border-style: dashed; }

/* Pie-in-the-Sky final moment. */
.pie-online-card { text-align: center; padding: 8px 10px 4px; }
.pie-online-card h1 {
  margin: 7px 0 8px;
  font-size: clamp(40px, 6vw, 72px);
  line-height: .94;
  letter-spacing: -.045em;
}
.pie-online-card > p { color: var(--muted); line-height: 1.45; }
.pie-online-stage {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(220px, 1fr);
  gap: 42px;
  align-items: center;
  max-width: 650px;
  margin: 28px auto 24px;
}
.pie-online-preview { display: grid; place-items: center; min-height: 310px; }
.pie-online-preview .modal-card { width: 150px; }
.pie-online-coin-column {
  min-height: 250px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 13px;
}
.pie-online-coin {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 5px solid #f2f2ed;
  border-radius: 50%;
  background: #171717;
  color: white;
  box-shadow: inset 0 0 0 4px #171717, inset 0 0 0 6px #f2f2ed, 0 18px 48px rgba(0,0,0,.52);
  transform-style: preserve-3d;
}
.pie-online-coin span { font-size: 50px; font-weight: 900; }
.pie-online-coin.flipping { animation: pieOnlineFlip 1.45s cubic-bezier(.18,.72,.2,1) both; }
.pie-online-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pie-online-result { display: grid; gap: 5px; max-width: 320px; }
.pie-online-result[hidden] { display: none; }
.pie-online-result strong { font-size: 25px; }
.pie-online-result span { color: var(--muted); font-size: 11px; line-height: 1.4; }
#pie-online-continue[hidden] { display: none; }
@keyframes pieOnlineFlip {
  0% { transform: translateY(0) rotateY(0deg) scale(1); }
  20% { transform: translateY(-50px) rotateY(540deg) scale(1.08); }
  58% { transform: translateY(-70px) rotateY(1260deg) scale(1.02); }
  84% { transform: translateY(-16px) rotateY(1980deg) scale(1.04); }
  100% { transform: translateY(0) rotateY(2160deg) scale(1); }
}

/* Winner screen. */
.winner-online-card { text-align: center; padding: 12px 16px 8px; }
.winner-online-card > img { width: min(150px, 34%); margin-bottom: 22px; }
.winner-online-card h1 {
  margin: 8px 0 0;
  font-size: clamp(40px, 6vw, 68px);
  line-height: .94;
  letter-spacing: -.045em;
}
.winner-online-scoreboard {
  width: min(500px, 100%);
  margin: 24px auto 18px;
  border: 1px solid #474743;
  border-radius: 6px;
  overflow: hidden;
}
.winner-online-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: #151515;
  border-top: 1px solid #343431;
}
.winner-online-row:first-child { border-top: 0; }
.winner-online-row.winner { background: #f1f1ed; color: #090909; }
.winner-online-row > span { font-weight: 800; text-align: left; }
.winner-online-row small { display: block; margin-top: 2px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.winner-online-row strong { font-size: 24px; white-space: nowrap; }
.winner-online-row em { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.winner-online-phrase { margin: 0 auto 24px; max-width: 560px; color: var(--muted); line-height: 1.45; }

@media (max-width: 720px) {
  .modal-choice-grid { grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap: 10px; }
  .choice-card-visual { max-width: 96px; }
  .modal-choice-card:hover .choice-card-visual img,
  .modal-choice-card:hover .choice-card-visual.rare-card::after { transform: scale(1.45); }
  .undo-reaction-preview { grid-template-columns: 90px 1fr; }
  .undo-reaction-preview .modal-card { width: 86px; }
  .pie-online-stage { grid-template-columns: 1fr; gap: 12px; }
  .pie-online-preview { min-height: 230px; }
  .pie-online-preview .modal-card { width: 118px; }
  .pie-online-coin-column { min-height: 210px; }
}

/* ========================================================================== */
/* Online Alpha 1.0 — table UX polish                                         */
/* ========================================================================== */

/* Campaign stacks now reserve real vertical space for every attached card.
   The inline --stack-offset / height values are calculated from stack size,
   so the stack never spills into requirement text or Kill Campaign controls. */
.match-main-05 .network-slot.campaign-stack {
  height: auto;
  min-height: 228px;
  padding-bottom: 12px;
  overflow: visible;
}
.match-main-05 .network-board.opponent .network-slot.campaign-stack {
  min-height: 212px;
}
.stack-cards {
  min-height: 153px;
  margin-bottom: 8px;
}
.stack-card.attached-card {
  top: calc(var(--stack-index) * var(--stack-offset, 20px));
}
.stack-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 3px;
}
.stack-summary .stack-label {
  min-width: 0;
  flex: 1 1 auto;
  margin-top: 0;
}
.campaign-point-tally {
  flex: 0 0 auto;
  border: 1px solid #52524c;
  border-radius: 999px;
  padding: 4px 7px 3px;
  background: #171717;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.network-board.opponent .campaign-point-tally {
  color: #d0d0cb;
  border-color: #40403c;
  background: #111;
}

/* The physical card is a play control now, not just a magnifier. */
.private-hand-card.is-click-playable {
  cursor: pointer;
}
.private-hand-card.is-click-playable::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid transparent;
  border-radius: 7px;
  pointer-events: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.private-hand-card.is-click-playable:hover::before {
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}

/* Beginning-of-turn Deck → Hand animation. The target remains laid out but is
   hidden until the face-down flyer arrives. */
.draw-target-hidden {
  opacity: 0 !important;
}
.online-turn-draw-flyer {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  transform-origin: top left;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 18px 52px rgba(0,0,0,.72);
}
.online-turn-draw-flyer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.draw-reveal {
  animation: onlineTurnDrawReveal .48s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes onlineTurnDrawReveal {
  0% { opacity: 0; transform: translateY(-8px) scale(.92); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.public-draw-arrival {
  animation: onlinePublicDrawArrival .48s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes onlinePublicDrawArrival {
  0% { transform: scale(.96); background: rgba(255,255,255,.02); }
  55% { transform: scale(1.06); background: rgba(255,255,255,.10); }
  100% { transform: scale(1); background: transparent; }
}
.public-hand-stat,
.public-deck-stat {
  position: relative;
}

/* Make the larger stacks breathe a bit more on narrower desktops without
   shrinking the cards themselves. */
@media (max-width: 1120px) {
  .match-main-05 .network-slot.campaign-stack { padding-inline: 6px; }
  .stack-summary { gap: 5px; }
  .campaign-point-tally { padding-inline: 6px; }
}

/* ========================================================================== */
/* Online Alpha 1.0.1 — Campaign info column + turn-state + Rules polish       */
/* ========================================================================== */

/* Each occupied Campaign is split into a left information rail and a right
   physical card stack. Keeping labels/requirements/buttons out of the stack's
   vertical path prevents deep stacks from colliding with controls. */
.match-main-05 .network-slot.campaign-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-rows: auto;
  gap: 10px;
  align-items: start;
  place-items: initial;
  text-align: left;
  min-height: 228px;
  padding: 12px;
}
.match-main-05 .network-board.opponent .network-slot.campaign-stack {
  min-height: 212px;
}
.campaign-stack-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 1px;
}
.campaign-stack-info .stack-label {
  position: static;
  inset: auto;
  width: 100%;
  color: #f1f1ed;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.12;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}
.campaign-stack-info .campaign-point-tally {
  display: inline-flex;
  margin: 0;
}
.campaign-stack-status {
  width: 100%;
  display: grid;
  gap: 6px;
}
.campaign-stack-info .campaign-requirement {
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  justify-self: start;
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
}
.campaign-stack-info .mini-danger.kill-campaign {
  margin: 2px 0 0;
  align-self: flex-start;
}
.match-main-05 .network-slot.campaign-stack .stack-cards {
  width: 94px;
  min-height: 153px;
  margin: 0;
  justify-self: end;
  align-self: start;
}

/* Hand turn-state lives inside the private Hand panel, where the player is
   already looking when deciding what to play. */
.private-hand-heading-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}
.your-turn-callout {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 10px;
  border: 1px solid rgba(201,255,185,.48);
  border-radius: 4px;
  background: rgba(201,255,185,.09);
  color: var(--success);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(201,255,185,.04);
}

/* Once an allowance has been spent, the whole reminder recedes instead of
   leaving a bright white zero that competes with still-available actions. */
.turn-allowances span.is-spent {
  color: #5f5f5a;
  border-color: #2b2b29;
  background: #111;
  opacity: .62;
}
.turn-allowances span.is-spent strong {
  color: #666660;
}

/* Rules lives as a true control in the left rail immediately above Online
   Match, matching the dimensions of the other sidebar cards. */
.rules-side-button {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 5px;
  text-align: left;
  color: #f1f1ed;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.rules-side-button strong {
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.rules-side-button > span:last-child {
  color: var(--muted);
  font-size: 9px;
}
.rules-side-button:hover {
  border-color: #6a6a64;
  background: #171717;
  transform: translateY(-1px);
}

.rules-overlay {
  overflow: auto;
}
.rules-modal {
  width: min(820px, 94vw);
  max-height: 88vh;
  padding: 30px 32px 36px;
}
.rules-modal-content > h2 {
  margin: 5px 0 22px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: .98;
  letter-spacing: -.035em;
}
.rules-section {
  padding: 18px 0;
  border-top: 1px solid #343431;
}
.rules-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.rules-section h3 {
  margin: 0 0 10px;
  color: #f1f1ed;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.rules-section p,
.rules-section li {
  color: #c8c8c1;
  font-size: 11px;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}
.rules-section p {
  margin: 8px 0 0;
}
.rules-section p:first-of-type {
  margin-top: 0;
}
.rules-section strong {
  color: #efefe9;
}
.rules-section ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.rules-section li + li {
  margin-top: 5px;
}

@media (max-width: 1120px) {
  .match-main-05 .network-slot.campaign-stack {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 7px;
    padding: 9px;
  }
  .match-main-05 .network-slot.campaign-stack .stack-cards {
    width: 88px;
  }
  .campaign-stack-info .stack-label { font-size: 9px; }
  .campaign-stack-info .campaign-requirement { font-size: 7px; padding-inline: 5px; }
}

@media (max-width: 760px) {
  .match-main-05 .network-slot.campaign-stack {
    grid-template-columns: minmax(118px, .8fr) minmax(92px, 1fr);
  }
  .private-hand-heading-status {
    justify-content: flex-start;
  }
  .rules-modal { padding: 26px 18px 30px; }
}
@media (max-width: 1120px) {
  .match-main-05 .network-slot.campaign-stack .stack-card { width: 88px; }
}

/* ==========================================================================
   Online Alpha 1.0.3 — telegraphic opponent-impact notifications
   ========================================================================== */

.impact-overlay {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(5px);
}
.impact-modal {
  width: min(840px, 94vw);
  border-color: #696962;
  box-shadow: 0 28px 90px rgba(0,0,0,.72);
}
.impact-modal-content { padding: 4px 2px 2px; }
.impact-eyebrow { color: var(--warn); }
.impact-modal h2 {
  margin-top: 8px;
  font-size: clamp(34px, 5vw, 54px);
  line-height: .94;
  letter-spacing: -.04em;
}
.impact-lede {
  margin: 12px 0 0;
  color: #d7d7d1;
  font-size: 13px;
  line-height: 1.5;
  max-width: 650px;
}
.impact-layout {
  display: grid;
  grid-template-columns: 156px minmax(0,1fr);
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.impact-source-card {
  width: 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.5);
}
.impact-source-card img {
  display: block;
  width: 100%;
  height: auto;
}
.impact-result-panel {
  min-height: 180px;
  border: 1px solid #3f3f3b;
  border-radius: 7px;
  background: #101010;
  padding: 16px;
}
.impact-result-panel > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.impact-result-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.impact-removed-row {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #30302d;
}
.impact-removed-row:first-of-type { border-top: 0; }
.impact-removed-row img {
  width: 58px;
  border-radius: 4px;
  box-shadow: 0 7px 16px rgba(0,0,0,.4);
}
.impact-removed-row strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
}
.impact-removed-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.impact-actions {
  margin-top: 22px;
  justify-content: flex-end;
}
.impact-actions .primary-btn { min-width: 130px; }

@media (max-width: 680px) {
  .impact-layout { grid-template-columns: 1fr; }
  .impact-source-card { width: 118px; }
  .impact-result-panel { min-height: 0; }
}

/* ========================================================================== */
/* Online Alpha 1.1.0 — 16:9 live-play layout + turn popup + emoji reactions  */
/* ========================================================================== */

/* The match no longer spends a full horizontal row on branding. The logo is
   part of the context rail, which gives the table back valuable vertical room. */
.match-brand-block {
  border: 1px solid #41413d;
  border-radius: 6px;
  background: #0d0d0d;
  padding: 11px 12px 10px;
  display: grid;
  justify-items: start;
  gap: 8px;
}
.match-sidebar-logo {
  width: min(150px, 100%);
  max-height: 96px;
  object-fit: contain;
  object-position: left center;
}
.match-brand-block .alpha-chip {
  padding: 5px 7px;
  font-size: 8px;
}

/* Compact Brief card for the live table. */
.brief-side-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.brief-side-card-compact .side-brief-image {
  width: 54px;
  margin: 0;
}
.brief-side-card-compact .side-brief-title {
  display: block;
  font-size: 12px;
  line-height: 1.12;
}
.brief-side-card-compact p {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.35;
}

/* Emoji reaction controls. Reactions are ephemeral social UI only; they do
   not affect turn state or card logic. */
.reaction-side-card { padding: 10px; }
.reaction-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.reaction-button {
  appearance: none;
  border: 1px solid #3e3e3a;
  border-radius: 999px;
  background: #181818;
  color: #fff;
  min-height: 34px;
  padding: 3px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.reaction-button:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #77776f;
  background: #222;
}
.reaction-button:active { transform: scale(.94); }

.emoji-reaction-layer {
  position: fixed;
  z-index: 1600;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.emoji-reaction-float {
  position: absolute;
  left: var(--reaction-left);
  bottom: -80px;
  display: grid;
  justify-items: center;
  gap: 3px;
  animation: agencyReactionFloat var(--reaction-duration) cubic-bezier(.18,.78,.28,1) forwards;
  will-change: transform, opacity;
}
.reaction-emoji {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20,20,20,.88);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  font-size: 32px;
  line-height: 1;
  backdrop-filter: blur(4px);
}
.emoji-reaction-float small {
  max-width: 130px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(10,10,10,.78);
  color: #e8e8e2;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes agencyReactionFloat {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.75); opacity: 0; }
  8% { opacity: 1; transform: translate3d(0, -50px, 0) rotate(calc(var(--reaction-rotate) * .2)) scale(1.06); }
  55% { opacity: 1; }
  100% { transform: translate3d(var(--reaction-drift), -88vh, 0) rotate(var(--reaction-rotate)) scale(1.18); opacity: 0; }
}

/* A celebratory but non-blocking transition when control passes to you. */
.your-turn-popup {
  position: fixed;
  z-index: 1800;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.25,1);
}
.your-turn-popup.show { opacity: 1; transform: scale(1); }
.your-turn-popup.leaving { opacity: 0; transform: scale(1.06); }
.your-turn-popup-inner {
  min-width: min(420px, 78vw);
  padding: 24px 36px 22px;
  border: 1px solid rgba(201,255,185,.56);
  border-radius: 9px;
  background: rgba(13,13,13,.94);
  color: var(--success);
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.68), inset 0 0 38px rgba(201,255,185,.045);
  backdrop-filter: blur(8px);
}
.your-turn-popup-inner span {
  display: block;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
}
.your-turn-popup-inner small {
  display: block;
  margin-top: 10px;
  color: #e9e9e3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Wide-screen "tabletop" mode. A normal 16:9 laptop/desktop viewport should
   show opponent Presentation, your Presentation, Hand, and End Turn without
   page scrolling. Narrower screens keep the existing responsive stack. */
@media (min-width: 1100px) and (min-aspect-ratio: 8/5) {
  .online-shell.match-fit-169 {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    max-width: none;
    padding: 10px 12px;
    overflow: hidden;
  }
  .match-panel-110 {
    width: min(1880px, calc(100vw - 24px));
    height: calc(100vh - 20px);
    overflow: visible;
  }
  .match-body-110 {
    height: 100%;
    padding: 9px 10px 8px;
  }
  .match-layout-110 {
    height: 100%;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .match-sidebar-110 {
    position: relative;
    top: 0;
    height: 100%;
    gap: 7px;
    align-content: start;
  }
  .match-sidebar-110 .match-side-card { padding: 9px 10px; }
  .match-sidebar-110 .side-room-code { margin-top: 3px; font-size: 25px; }
  .match-sidebar-110 .side-room-meta { margin-top: 5px; font-size: 7px; }
  .match-sidebar-110 .side-day {
    margin-top: 7px;
    padding-top: 7px;
    font-size: 17px;
  }
  .match-sidebar-110 .turn-chip { margin-top: 6px; padding: 4px 6px; font-size: 7px; }
  .match-sidebar-110 .rules-side-button { gap: 3px; }
  .match-sidebar-110 .rules-side-button strong { font-size: 15px; }
  .match-sidebar-110 .server-side-card { gap: 4px; font-size: 7px; }

  .match-main-110 {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .match-main-110 .board-band-label {
    min-height: 12px;
    margin: 0 2px 3px;
    font-size: 8px;
    line-height: 1;
  }
  .match-main-110 .board-band-label small { font-size: 7px; }
  .match-main-110 .my-board-label { margin-top: 5px; }

  .match-main-110 .network-board {
    padding: 7px 9px 8px;
  }
  .match-main-110 .network-board-head {
    align-items: center;
  }
  .match-main-110 .network-board-head h2 {
    margin-top: 2px;
    font-size: 17px;
    line-height: 1;
  }
  .match-main-110 .network-board-head .deck-line { display: none; }
  .match-main-110 .network-score { font-size: 22px; }
  .match-main-110 .network-score span { font-size: 6px; margin-top: 2px; }
  .match-main-110 .network-stats {
    gap: 5px;
    margin-top: 4px;
    padding-top: 4px;
  }
  .match-main-110 .network-stats span,
  .match-main-110 .network-stats .stat-button {
    padding: 3px 6px;
    font-size: 7px;
  }
  .match-main-110 .network-play-area { margin-top: 4px; }
  .match-main-110 .network-presentation > .eyebrow { display: none; }
  .match-main-110 .network-campaign-slots {
    gap: 6px;
    margin-top: 0;
  }
  .match-main-110 .network-slot,
  .match-main-110 .network-slot.campaign-stack,
  .match-main-110 .network-board.opponent .network-slot.campaign-stack {
    min-height: 168px;
    padding: 7px;
  }
  .match-main-110 .network-slot.campaign-stack {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 6px;
  }
  .match-main-110 .campaign-stack-info { gap: 5px; }
  .match-main-110 .campaign-stack-info .stack-label { font-size: 8px; line-height: 1.08; }
  .match-main-110 .campaign-point-tally { padding: 3px 5px 2px; font-size: 7px; }
  .match-main-110 .campaign-requirement { min-height: 0; padding: 3px 4px; font-size: 6px; }
  .match-main-110 .mini-danger.kill-campaign { padding: 5px 7px; font-size: 6px; }
  .match-main-110 .network-slot.campaign-stack .stack-cards {
    --stack-offset: 9px !important;
    width: 74px;
    height: 164px !important;
    min-height: 104px;
    margin: 0;
  }
  .match-main-110 .network-slot.campaign-stack .stack-card { width: 74px; }

  .match-main-110 .private-hand-panel {
    margin-top: 6px;
    padding: 8px 10px 9px;
  }
  .match-main-110 .private-hand-heading { align-items: center; }
  .match-main-110 .private-hand-heading h2 { margin-top: 2px; font-size: 16px; line-height: 1; }
  .match-main-110 .private-lock,
  .match-main-110 .your-turn-callout { min-height: 22px; padding: 4px 6px; font-size: 7px; }
  .match-main-110 .turn-allowances { margin-top: 5px; gap: 4px; }
  .match-main-110 .turn-allowances span { padding: 3px 5px; font-size: 7px; }
  .match-main-110 .private-hand-panel > .private-note { display: none; }
  .match-main-110 .private-hand-workspace {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    margin-top: 5px;
  }
  .match-main-110 .private-hand-workspace .private-hand-grid {
    min-height: 142px;
    padding-left: 20px;
    padding-right: 4px;
    gap: 0;
  }
  .match-main-110 .private-hand-workspace .hand-card-shell {
    width: 66px;
    flex-basis: 66px;
  }
  .match-main-110 .private-hand-workspace .hand-card-shell .private-hand-card {
    width: 90px;
    margin-left: -20px;
  }
  .match-main-110 .private-hand-workspace .hand-card-shell .card-play-btn {
    width: 62px;
    min-height: 20px;
    padding: 3px 2px;
    font-size: 6px;
  }
  .match-main-110 .private-hand-workspace .hand-card-shell .effect-note {
    width: 62px;
    font-size: 6px;
    line-height: 1.15;
  }
  .match-main-110 .private-hand-resources { gap: 5px; }
  .match-main-110 .hand-resource-pile {
    min-height: 72px;
    padding: 5px;
  }
  .match-main-110 .pile-top-card,
  .match-main-110 .hand-deck-stack { width: 43px; margin-top: 3px; }
  .match-main-110 .hand-deck-stack img { width: 43px; }
  .match-main-110 .pile-empty { min-height: 42px; font-size: 6px; }
  .match-main-110 .hand-pile-count { margin-top: 3px; font-size: 6px; }

  .turn-control-110 {
    margin-top: 5px;
    padding: 7px 9px;
    min-height: 42px;
  }
  .turn-control-110 strong { margin-top: 2px; font-size: 12px; }
  .turn-control-110 .primary-btn { padding: 8px 12px; font-size: 9px; }
  .match-connection-compact {
    margin-top: 4px;
    min-height: 10px;
    font-size: 7px;
    line-height: 1;
  }
}



/* ==========================================================================
   Online Alpha 1.2.0 — visual redesign + Meeting Notes
   ========================================================================== */

/* User-supplied pastel gradient is the base; oversized color blooms drift very
   slowly over it. Grain is a tiny static tile so the motion stays calm. */
.match-redesign-120 {
  --ink: #11110f;
  --muted: #6e6a63;
  --line: rgba(20,20,20,.18);
  --light: #11110f;
  --dark: #f9f6f0;
  position: relative;
  isolation: isolate;
  background: url('assets/AgencyTCG_Gradient_BG.webp') center / cover fixed no-repeat;
  color: #11110f;
}
.match-redesign-120::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -16%;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 36%, rgba(235,105,105,.48) 0 8%, transparent 29%),
    radial-gradient(circle at 40% 43%, rgba(246,168,92,.38) 0 9%, transparent 27%),
    radial-gradient(circle at 74% 18%, rgba(84,166,222,.34) 0 8%, transparent 28%),
    radial-gradient(circle at 86% 45%, rgba(193,137,220,.34) 0 8%, transparent 28%),
    radial-gradient(circle at 78% 80%, rgba(134,209,153,.30) 0 9%, transparent 30%),
    radial-gradient(circle at 33% 81%, rgba(235,144,160,.26) 0 8%, transparent 28%);
  filter: blur(22px) saturate(.92);
  opacity: .58;
  animation: agencyAmbientGradient 34s ease-in-out infinite alternate;
}
.match-redesign-120::after {
  content: "";
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  background: url('assets/AgencyTCG_Grain.png') repeat;
  opacity: .13;
  mix-blend-mode: soft-light;
}
@keyframes agencyAmbientGradient {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-.4deg); opacity: .49; }
  50% { transform: translate3d(1.5%, .8%, 0) scale(1.05) rotate(.2deg); opacity: .62; }
  100% { transform: translate3d(-.5%, 1.5%, 0) scale(1.03) rotate(.5deg); opacity: .54; }
}
@media (prefers-reduced-motion: reduce) {
  .match-redesign-120::before { animation: none; }
}

.match-redesign-120 .match-panel-120 {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.match-redesign-120 .match-body-110 { padding: 14px; }
.match-layout-120 {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr) 252px !important;
  gap: 14px !important;
  height: 100%;
  align-items: stretch;
}

/* Left rail: logo is color-responsive; functional modules remain high-contrast. */
.match-sidebar-120 {
  min-width: 0;
  gap: 9px !important;
  align-content: start;
  overflow: visible;
}
.match-sidebar-120 .match-brand-block {
  min-height: 158px;
  padding: 7px 4px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.match-sidebar-120 .match-brand-block .alpha-chip { display: none; }
.match-sidebar-120 .match-sidebar-logo {
  width: min(184px, 100%);
  filter: invert(1) contrast(1.25);
  mix-blend-mode: soft-light;
  opacity: .78;
  transition: opacity .18s ease, transform .18s ease;
}
.match-sidebar-120 .logo-home-btn:hover .match-sidebar-logo {
  opacity: .95;
  transform: translateY(-1px);
  filter: invert(1) contrast(1.25);
}
.match-sidebar-120 .match-side-card,
.match-sidebar-120 .rules-side-button {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(12,12,12,.89);
  color: #f7f5ef;
  box-shadow: 0 6px 18px rgba(36,27,25,.08);
  backdrop-filter: blur(10px);
}
.match-sidebar-120 .match-side-card .eyebrow,
.match-sidebar-120 .rules-side-button .eyebrow { color: rgba(255,255,255,.66); }
.match-sidebar-120 .side-room-code { color: #fff; }
.match-sidebar-120 .side-room-meta,
.match-sidebar-120 .brief-side-card p,
.match-sidebar-120 .server-side-card { color: rgba(255,255,255,.66); }
.match-sidebar-120 .side-day { color: #fff; border-color: rgba(255,255,255,.18); }
.match-sidebar-120 .turn-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.28);
  color: #eff7df;
}
.match-sidebar-120 .side-brief-image { border-color: rgba(255,255,255,.28); }
.match-sidebar-120 .connection-ok { color: #b9eea6; }
.match-sidebar-120 .reaction-button {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.25);
}
.match-sidebar-120 .reaction-button:hover { background: rgba(255,255,255,.12); }

/* Central play surface: airy translucent white panels from the supplied mockup. */
.match-main-120 { min-width: 0; overflow: visible; }
.match-main-120 > .board-band-label { display: none; }
.match-redesign-120 .network-board {
  border: 1px solid rgba(255,255,255,.66) !important;
  border-radius: 7px;
  background: rgba(255,255,255,.74) !important;
  color: #11110f;
  box-shadow: 0 7px 22px rgba(65,45,35,.055);
  backdrop-filter: blur(7px);
  overflow: visible;
}
.match-redesign-120 .network-board.you.active {
  border-color: rgba(25,25,25,.34) !important;
  box-shadow: 0 0 0 1px rgba(25,25,25,.10), 0 7px 22px rgba(65,45,35,.06);
}
.match-redesign-120 .network-board-head h2 { color: #0f0f0e; }
.match-redesign-120 .network-board-head .eyebrow,
.match-redesign-120 .network-presentation > .eyebrow { color: #706b65; }
.match-redesign-120 .network-score {
  min-width: 70px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #0b0b0b;
  color: #fff;
  text-align: center;
}
.match-redesign-120 .network-score span { color: rgba(255,255,255,.78); }
.match-redesign-120 .network-stats {
  border-color: rgba(30,30,30,.10);
  color: #3f3b37;
}
.match-redesign-120 .network-stats span,
.match-redesign-120 .network-stats .stat-button {
  border-color: transparent;
  background: transparent;
  color: #3c3935;
}
.match-redesign-120 .network-stats .stat-button:hover { text-decoration: underline; }
.match-redesign-120 .network-slot {
  border: 1px solid rgba(33,33,33,.08);
  border-radius: 5px;
  background: rgba(255,255,255,.42);
  color: #111;
  overflow: visible;
}
.match-redesign-120 .open-label { color: #8f8982; }
.match-redesign-120 .campaign-stack-info .stack-label { color: #111; }
.match-redesign-120 .campaign-point-tally {
  width: max-content;
  border-color: transparent;
  background: #0c0c0c;
  color: #fff;
  border-radius: 999px;
}
.match-redesign-120 .campaign-requirement {
  width: max-content;
  max-width: 100%;
  background: rgba(255,255,255,.48);
}
.match-redesign-120 .campaign-requirement.met { color: #4c9955; border-color: #83c28d; }
.match-redesign-120 .campaign-requirement.needs { color: #955c55; border-color: #c99992; }

/* Opponent Presentation is intentionally smaller but remains fully readable on hover. */
.match-redesign-120 .network-board.opponent {
  display: grid;
  grid-template-areas: "play" "stats" "head";
  gap: 0;
  padding: 8px 12px 7px !important;
  min-height: 0;
  position: relative;
  z-index: 4;
}
.match-redesign-120 .network-board.opponent .network-play-area { grid-area: play; margin-top: 0; overflow: visible; }
.match-redesign-120 .network-board.opponent .network-stats { grid-area: stats; margin: 5px 0 0; padding: 4px 0 0; font-size: 7px; }
.match-redesign-120 .network-board.opponent .network-board-head { grid-area: head; margin-top: 3px; }
.match-redesign-120 .network-board.opponent .network-board-head h2 { font-size: 17px !important; }
.match-redesign-120 .network-board.opponent .network-board-head .eyebrow { font-size: 8px; }
.match-redesign-120 .network-board.opponent .network-score { min-width: 62px; padding: 6px 10px; font-size: 18px !important; }
.match-redesign-120 .network-board.opponent .network-campaign-slots { gap: 7px; }
.match-redesign-120 .network-board.opponent .network-slot,
.match-redesign-120 .network-board.opponent .network-slot.campaign-stack {
  min-height: 91px !important;
  padding: 5px;
}
.match-redesign-120 .network-board.opponent .network-slot.campaign-stack {
  grid-template-columns: minmax(0,1fr) 47px !important;
  gap: 5px !important;
}
.match-redesign-120 .network-board.opponent .campaign-stack-info { gap: 3px; }
.match-redesign-120 .network-board.opponent .campaign-stack-info .stack-label { font-size: 6.5px !important; line-height: 1.08; }
.match-redesign-120 .network-board.opponent .campaign-point-tally { font-size: 6px !important; padding: 2px 4px !important; }
.match-redesign-120 .network-board.opponent .campaign-requirement { display: none; }
.match-redesign-120 .network-board.opponent .stack-cards {
  --stack-offset: 5px !important;
  width: 46px !important;
  height: 92px !important;
  min-height: 70px !important;
  overflow: visible;
}
.match-redesign-120 .network-board.opponent .stack-card { width: 46px !important; overflow: visible; }
.match-redesign-120 .network-board.opponent .stack-card:hover { z-index: 4000; }
.match-redesign-120 .network-board.opponent .stack-card:hover img,
.match-redesign-120 .network-board.opponent .stack-card.rare-card:hover::after {
  transform: translateY(18px) scale(2.75) !important;
  transform-origin: 50% 20%;
  filter: drop-shadow(0 16px 30px rgba(32,26,22,.28));
}

/* Your board gets more room than the compact opposing board. */
.match-redesign-120 .network-board.you { padding: 10px 12px 11px !important; margin-top: 8px; }
.match-redesign-120 .network-board.you .network-slot,
.match-redesign-120 .network-board.you .network-slot.campaign-stack { min-height: 185px !important; }
.match-redesign-120 .network-board.you .network-slot.campaign-stack { grid-template-columns: 92px minmax(0,1fr) !important; }
.match-redesign-120 .network-board.you .campaign-stack-info { align-self: start; }
.match-redesign-120 .network-board.you .stack-cards { justify-self: start; }

/* Private Hand matches the light paper-like center surface. */
.match-redesign-120 .private-hand-panel {
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #111;
  box-shadow: 0 7px 22px rgba(65,45,35,.05);
  backdrop-filter: blur(7px);
}
.match-redesign-120 .private-hand-panel .eyebrow,
.match-redesign-120 .private-lock { color: #766f68; }
.match-redesign-120 .private-lock,
.match-redesign-120 .your-turn-callout,
.match-redesign-120 .turn-allowances span {
  border-color: rgba(25,25,25,.16);
  background: rgba(255,255,255,.46);
  color: #292623;
}
.match-redesign-120 .turn-allowances .spent { opacity: .32; }
.match-redesign-120 .hand-resource-pile {
  background: rgba(255,255,255,.56);
  color: #111;
  border-color: rgba(30,30,30,.12);
}
.match-redesign-120 .hand-resource-pile .eyebrow,
.match-redesign-120 .hand-pile-count { color: #8d867e; }
.match-redesign-120 .pile-empty { color: #aaa39b; }
.match-redesign-120 .turn-control-bar {
  border-color: rgba(30,30,30,.11);
  background: rgba(255,255,255,.60);
  color: #111;
}
.match-redesign-120 .turn-control-bar .eyebrow { color: #77716b; }
.match-redesign-120 .turn-control-bar .primary-btn { background: #111; color: #fff; }
.match-redesign-120 .match-connection-compact { color: rgba(30,30,30,.52); }
.match-redesign-120 .match-connection-compact .connection-ok { color: #4c8255; }

/* Meeting Notes right rail */
.meeting-notes-panel {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 7px;
  background: rgba(255,255,255,.69);
  color: #141311;
  box-shadow: 0 7px 22px rgba(65,45,35,.05);
  backdrop-filter: blur(9px);
  overflow: hidden;
}
.meeting-notes-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(25,25,25,.08);
}
.meeting-notes-heading .eyebrow { color: #37322e; font-size: 10px; letter-spacing: .30em; }
.meeting-notes-live { color: #67956b; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.meeting-notes-feed {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(30,30,30,.22) transparent;
}
.meeting-notes-empty {
  padding: 24px 9px;
  color: #8d857d;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}
.meeting-note {
  margin-bottom: 10px;
  padding: 8px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(25,25,25,.07);
}
.meeting-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.meeting-note-meta strong { font-size: 9px; }
.meeting-note-meta span { color: #8c847c; font-size: 7px; white-space: nowrap; }
.meeting-note p { margin: 5px 0 0; font-size: 9px; line-height: 1.42; overflow-wrap: anywhere; }
.system-note {
  background: transparent;
  border-style: dashed;
  color: #746e67;
}
.meeting-note-system-label { color: #999188; font-size: 6.5px; font-weight: 900; letter-spacing: .12em; }
.system-note p { font-style: italic; }
.meeting-notes-composer {
  padding: 10px;
  border-top: 1px solid rgba(25,25,25,.09);
  background: rgba(255,255,255,.42);
}
.meeting-notes-composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid rgba(25,25,25,.11);
  border-radius: 5px;
  background: rgba(255,255,255,.75);
  color: #161412;
  padding: 9px;
  font: inherit;
  font-size: 9px;
  line-height: 1.35;
  outline: none;
}
.meeting-notes-composer textarea:focus { border-color: rgba(20,20,20,.42); }
.meeting-notes-composer-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.meeting-notes-composer-row > span,
.meeting-notes-composer > small { color: #918981; font-size: 6.5px; }
.meeting-note-send {
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  padding: 5px 9px;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.meeting-note-send:disabled { opacity: .28; cursor: not-allowed; }

/* 16:9 fit: smaller opponent, large own board, Hand, and persistent notes rail. */
@media (min-width: 1180px) and (min-aspect-ratio: 8/5) {
  .match-redesign-120.match-fit-169 { padding: 0 !important; }
  .match-redesign-120 .match-panel-120 { width: 100vw !important; height: 100vh !important; }
  .match-redesign-120 .match-body-110 { height: 100%; padding: 14px 16px; }
  .match-layout-120 { grid-template-columns: 214px minmax(0, 1fr) 252px !important; gap: 14px !important; }
  .match-main-120 { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .match-main-120 .network-board.opponent { flex: 0 0 145px; }
  .match-main-120 .network-board.you { flex: 0 0 255px; }
  .match-main-120 .private-hand-panel { flex: 1 1 auto; min-height: 220px; margin-top: 10px; }
  .match-main-120 .turn-control-110 { flex: 0 0 43px; margin-top: 8px; }
  .match-main-120 .match-connection-compact { flex: 0 0 10px; }
  .match-main-120 .private-hand-workspace .private-hand-grid { min-height: 145px; }
}

@media (max-width: 1179px) {
  .match-layout-120 { grid-template-columns: 190px minmax(0,1fr) !important; }
  .meeting-notes-panel { grid-column: 1 / -1; min-height: 360px; }
}
@media (max-width: 820px) {
  .match-layout-120 { grid-template-columns: 1fr !important; }
  .match-sidebar-120 .match-brand-block { min-height: 110px; }
  .match-sidebar-120 .match-sidebar-logo { width: 150px; }
  .meeting-notes-panel { min-height: 420px; }
}

/* ========================================================================== */
/* Online Alpha 1.3.0 — unified visual system + layout stabilization           */
/* ========================================================================== */

/*
  The 1.2.0 raster gradient is intentionally no longer used as the page-size
  background. These CSS-rendered blooms stay crisp at any viewport / DPR and
  give the color field a real, subtle drift. The installed grain tile remains
  as the fine texture layer.
*/
.site-redesign-130,
.match-redesign-130 {
  --paper: rgba(255,255,255,.68);
  --paper-strong: rgba(255,255,255,.80);
  --paper-soft: rgba(255,255,255,.48);
  --ui-ink: #171512;
  --ui-muted: #706a64;
  --ui-line: rgba(39,33,29,.11);
  position: relative;
  isolation: isolate;
  background: #f5f1eb !important;
  color: var(--ui-ink);
}
.site-redesign-130::before,
.match-redesign-130::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -18vmax;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 11% 31%, rgba(238,112,111,.54) 0 6%, rgba(238,112,111,.22) 17%, transparent 34%),
    radial-gradient(ellipse at 35% 42%, rgba(246,169,100,.48) 0 7%, rgba(246,169,100,.18) 19%, transparent 36%),
    radial-gradient(ellipse at 68% 13%, rgba(93,170,222,.40) 0 7%, rgba(93,170,222,.16) 19%, transparent 35%),
    radial-gradient(ellipse at 87% 37%, rgba(196,145,218,.43) 0 7%, rgba(196,145,218,.16) 19%, transparent 35%),
    radial-gradient(ellipse at 82% 78%, rgba(143,205,154,.35) 0 8%, rgba(143,205,154,.13) 21%, transparent 38%),
    radial-gradient(ellipse at 31% 80%, rgba(231,153,175,.29) 0 8%, rgba(231,153,175,.10) 21%, transparent 38%),
    radial-gradient(ellipse at 50% 52%, rgba(255,249,239,.90) 0 22%, transparent 53%);
  filter: blur(54px) saturate(.93);
  opacity: 1;
  transform: translate3d(-1.8%, -1.1%, 0) scale(1.04);
  transform-origin: center;
  animation: agencyGradientDrift130 32s ease-in-out infinite alternate;
}
.site-redesign-130::after,
.match-redesign-130::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: url('assets/AgencyTCG_Grain.png');
  background-repeat: repeat;
  opacity: .075;
  mix-blend-mode: multiply;
}
.site-redesign-130 > *,
.match-redesign-130 > * {
  position: relative;
  z-index: 2;
}
@keyframes agencyGradientDrift130 {
  0%   { transform: translate3d(-2.4%, -1.2%, 0) scale(1.045) rotate(-.25deg); }
  35%  { transform: translate3d( 1.2%, -2.1%, 0) scale(1.075) rotate(.18deg); }
  70%  { transform: translate3d( 2.3%,  1.8%, 0) scale(1.055) rotate(.34deg); }
  100% { transform: translate3d(-1.0%,  2.4%, 0) scale(1.065) rotate(-.12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-redesign-130::before,
  .match-redesign-130::before { animation: none; }
}

/* -------------------------------------------------------------------------- */
/* Home / loading / lobby: same visual language as the live table             */
/* -------------------------------------------------------------------------- */
.site-redesign-130 {
  min-height: 100vh;
  padding: 24px 20px 38px;
}
.site-redesign-130 .online-panel {
  width: min(1180px, 96vw);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.site-redesign-130 .online-head {
  padding: 8px 8px 22px;
  border: 0;
  background: transparent;
}
.site-redesign-130 .online-logo {
  width: min(240px, 48vw);
  filter: brightness(0) saturate(100%);
  opacity: .44;
  mix-blend-mode: multiply;
  transition: opacity .18s ease, transform .18s ease;
}
.site-redesign-130 .logo-home-btn:hover .online-logo {
  opacity: .62;
  transform: translateY(-1px);
  filter: brightness(0) saturate(100%);
}
.site-redesign-130 .alpha-chip {
  border-color: rgba(25,22,20,.15);
  background: rgba(255,255,255,.44);
  color: #4b4641;
  backdrop-filter: blur(10px);
}
.site-redesign-130 .online-body { padding: 10px 8px 28px; }
.site-redesign-130 .eyebrow { color: #716a64; }
.site-redesign-130 h1,
.site-redesign-130 h2,
.site-redesign-130 h3 { color: #171512; }
.site-redesign-130 .lede,
.site-redesign-130 .mode-card p,
.site-redesign-130 .agency-card p,
.site-redesign-130 .home-rules-card p,
.site-redesign-130 .start-presentation-card p { color: #6f6862; }
.site-redesign-130 .mode-card,
.site-redesign-130 .agency-card,
.site-redesign-130 .selection-card,
.site-redesign-130 .status-row,
.site-redesign-130 .home-rules-card,
.site-redesign-130 .start-presentation-card,
.site-redesign-130 .waiting-card {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.64);
  color: #171512;
  box-shadow: 0 8px 26px rgba(74,55,44,.055);
  backdrop-filter: blur(10px);
}
.site-redesign-130 .agency-card.you { border-color: rgba(25,22,20,.22); }
.site-redesign-130 .waiting-card { border-style: dashed; color: #756e68; }
.site-redesign-130 .status-row { background: rgba(255,255,255,.57); }
.site-redesign-130 .room-meta,
.site-redesign-130 .deck-line,
.site-redesign-130 .brief-copy small,
.site-redesign-130 .connection-bar { color: #746d66; }
.site-redesign-130 .field label { color: #6c655f; }
.site-redesign-130 .field input,
.site-redesign-130 .field select {
  border-color: rgba(28,24,21,.15);
  background: rgba(255,255,255,.64);
  color: #171512;
  backdrop-filter: blur(8px);
}
.site-redesign-130 .field input:focus,
.site-redesign-130 .field select:focus { border-color: rgba(25,22,20,.45); }
.site-redesign-130 .primary-btn {
  background: #171512;
  color: #fff;
}
.site-redesign-130 .primary-btn:hover { background: #000; }
.site-redesign-130 .secondary-btn,
.site-redesign-130 .ghost-btn {
  background: rgba(255,255,255,.45);
  color: #171512;
  border: 1px solid rgba(25,22,20,.18);
}
.site-redesign-130 .secondary-btn:hover,
.site-redesign-130 .ghost-btn:hover { background: rgba(255,255,255,.78); }
.site-redesign-130 .face-down-note { color: #7f6842; }
.site-redesign-130 .ready-line { color: #5f5953; }
.site-redesign-130 .ready-line.ready { color: #477950; }
.site-redesign-130 .connection-ok { color: #4f8358; }
.site-redesign-130 .connection-bad { color: #a65353; }
.site-redesign-130 .brief-preview img { box-shadow: 0 8px 22px rgba(39,31,27,.10); }
.site-redesign-130 .loading { color: #6e6761; }
.site-redesign-130 .spinner { border-color: rgba(25,22,20,.18); border-top-color: #171512; }

/* -------------------------------------------------------------------------- */
/* Live-table shell                                                           */
/* -------------------------------------------------------------------------- */
.match-redesign-130 {
  min-height: 100vh;
  padding: 0 !important;
  overflow-x: hidden;
}
.match-redesign-130 .match-panel-120 {
  width: 100%;
  max-width: none;
  min-height: 100vh;
}
.match-redesign-130 .match-body-110 {
  padding: 14px 16px !important;
}
.match-redesign-130 .match-layout-120 {
  grid-template-columns: 226px minmax(0, 1fr) 274px !important;
  gap: 14px !important;
  min-height: calc(100vh - 28px);
  height: calc(100vh - 28px);
}

/* Left rail now uses the exact same translucent paper system as center/right. */
.match-sidebar-120 .match-brand-block {
  min-height: 146px;
  padding: 4px 6px 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.match-sidebar-120 .match-sidebar-logo {
  width: min(190px, 100%);
  filter: brightness(0) saturate(100%) !important;
  mix-blend-mode: multiply !important;
  opacity: .43 !important;
}
.match-sidebar-120 .logo-home-btn:hover .match-sidebar-logo {
  opacity: .62 !important;
  filter: brightness(0) saturate(100%) !important;
}
.match-sidebar-120 .match-side-card,
.match-sidebar-120 .rules-side-button {
  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.64) !important;
  color: #171512 !important;
  box-shadow: 0 7px 22px rgba(65,45,35,.05) !important;
  backdrop-filter: blur(9px) !important;
}
.match-sidebar-120 .match-side-card .eyebrow,
.match-sidebar-120 .rules-side-button .eyebrow { color: #6f6862 !important; }
.match-sidebar-120 .side-room-code,
.match-sidebar-120 .side-day,
.match-sidebar-120 .side-brief-title,
.match-sidebar-120 .rules-side-button strong { color: #171512 !important; }
.match-sidebar-120 .side-room-meta,
.match-sidebar-120 .brief-side-card p,
.match-sidebar-120 .server-side-card,
.match-sidebar-120 .rules-side-button span:last-child { color: #746d66 !important; }
.match-sidebar-120 .side-day { border-color: rgba(25,22,20,.12) !important; }
.match-sidebar-120 .turn-chip {
  border-color: rgba(25,22,20,.17) !important;
  background: rgba(255,255,255,.42) !important;
  color: #3e6f48 !important;
}
.match-sidebar-120 .side-brief-image { border-color: rgba(25,22,20,.16) !important; }
.match-sidebar-120 .connection-ok { color: #4f8258 !important; }
.match-sidebar-120 .reaction-button {
  background: rgba(255,255,255,.46) !important;
  color: #171512;
  border-color: rgba(25,22,20,.16) !important;
}
.match-sidebar-120 .reaction-button:hover { background: rgba(255,255,255,.80) !important; }
.match-sidebar-120 .rules-side-button:hover { background: rgba(255,255,255,.80) !important; }

/* Main column gets explicit rows. Nothing is allowed to borrow space from the
   next board, which fixes the 1.2.0 score/header/slot collisions. */
.match-main-120 {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-rows: 166px 266px minmax(250px, 1fr) auto 12px;
  gap: 10px;
  overflow: visible;
}
.match-main-120 > .network-board,
.match-main-120 > .private-hand-panel,
.match-main-120 > .turn-control-bar,
.match-main-120 > .match-connection-compact { margin: 0 !important; }

/* Both board headers are fully contained and use stable alignment. */
.match-redesign-130 .network-board {
  min-height: 0 !important;
  overflow: visible;
}
.match-redesign-130 .network-board-head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.match-redesign-130 .network-board-head > div:first-child { min-width: 0; }
.match-redesign-130 .network-board-head h2 {
  line-height: .98;
  overflow-wrap: anywhere;
}
.match-redesign-130 .network-score {
  flex: 0 0 auto;
  position: static !important;
  margin: 0 !important;
  line-height: .9;
}

/* Opponent: compact cards first, then stats/name/score within the SAME box. */
.match-redesign-130 .network-board.opponent {
  display: grid !important;
  grid-template-areas: "play" "stats" "head" !important;
  grid-template-rows: minmax(92px, 1fr) auto auto !important;
  align-content: stretch;
  gap: 3px !important;
  padding: 8px 12px 9px !important;
  min-height: 166px !important;
  z-index: 8;
}
.match-redesign-130 .network-board.opponent .network-play-area {
  grid-area: play;
  min-height: 0;
  margin: 0 !important;
}
.match-redesign-130 .network-board.opponent .network-presentation,
.match-redesign-130 .network-board.opponent .network-campaign-slots { height: 100%; min-height: 0; }
.match-redesign-130 .network-board.opponent .network-campaign-slots {
  margin-top: 0 !important;
  gap: 8px !important;
}
.match-redesign-130 .network-board.opponent .network-stats {
  grid-area: stats;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  border-top: 1px solid rgba(25,22,20,.07);
  gap: 9px;
  min-height: 14px;
}
.match-redesign-130 .network-board.opponent .network-board-head {
  grid-area: head;
  margin: 0 !important;
  min-height: 31px;
  align-items: flex-end;
}
.match-redesign-130 .network-board.opponent .network-board-head h2 {
  margin: 2px 0 0 !important;
  font-size: 16px !important;
}
.match-redesign-130 .network-board.opponent .network-board-head .eyebrow {
  font-size: 7px !important;
  line-height: 1.1;
}
.match-redesign-130 .network-board.opponent .network-score {
  min-width: 58px;
  padding: 5px 9px;
  font-size: 17px !important;
}
.match-redesign-130 .network-board.opponent .network-slot,
.match-redesign-130 .network-board.opponent .network-slot.campaign-stack {
  min-height: 88px !important;
  height: 100%;
  padding: 5px !important;
}
.match-redesign-130 .network-board.opponent .network-slot.campaign-stack {
  grid-template-columns: minmax(0,1fr) 43px !important;
  gap: 5px !important;
}
.match-redesign-130 .network-board.opponent .stack-cards {
  --stack-offset: 4px !important;
  width: 42px !important;
  height: 80px !important;
  min-height: 68px !important;
}
.match-redesign-130 .network-board.opponent .stack-card { width: 42px !important; }
.match-redesign-130 .network-board.opponent .stack-card:hover { z-index: 9000 !important; }
.match-redesign-130 .network-board.opponent .stack-card:hover img,
.match-redesign-130 .network-board.opponent .stack-card.rare-card:hover::after {
  transform: translateY(14px) scale(3.1) !important;
  transform-origin: 50% 18% !important;
  filter: drop-shadow(0 18px 32px rgba(39,29,24,.28));
}

/* Your board: header -> stats -> slots. The slots no longer share physical
   space with the score / agency label. */
.match-redesign-130 .network-board.you {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 5px;
  padding: 10px 12px 11px !important;
  min-height: 266px !important;
  z-index: 5;
}
.match-redesign-130 .network-board.you .network-board-head {
  min-height: 42px;
  align-items: flex-start;
}
.match-redesign-130 .network-board.you .network-board-head h2 {
  margin: 3px 0 0;
  font-size: 22px !important;
}
.match-redesign-130 .network-board.you .network-stats {
  margin: 0 !important;
  padding: 4px 0 0 !important;
  min-height: 18px;
}
.match-redesign-130 .network-board.you .network-play-area {
  min-height: 0;
  margin: 0 !important;
}
.match-redesign-130 .network-board.you .network-presentation,
.match-redesign-130 .network-board.you .network-campaign-slots { height: 100%; min-height: 0; }
.match-redesign-130 .network-board.you .network-campaign-slots {
  margin-top: 5px !important;
  gap: 9px !important;
}
.match-redesign-130 .network-board.you .network-slot,
.match-redesign-130 .network-board.you .network-slot.campaign-stack {
  min-height: 180px !important;
  height: 100%;
}
.match-redesign-130 .network-board.you .network-slot.campaign-stack {
  grid-template-columns: 104px 84px !important;
  justify-content: start;
  gap: 10px !important;
  padding: 9px !important;
}
.match-redesign-130 .network-board.you .network-slot.campaign-stack .stack-cards {
  width: 82px !important;
  min-height: 136px !important;
  justify-self: start !important;
}
.match-redesign-130 .network-board.you .network-slot.campaign-stack .stack-card {
  width: 82px !important;
}
.match-redesign-130 .network-board.you .campaign-stack-info {
  min-width: 0;
  max-width: 104px;
  gap: 6px;
}
.match-redesign-130 .network-board.you .campaign-stack-info .stack-label {
  font-size: 9px !important;
  line-height: 1.08;
}
.match-redesign-130 .network-board.you .campaign-requirement {
  width: fit-content !important;
  max-width: 104px !important;
}

/* Hand uses the remaining middle-column height rather than pushing the footer
   out of view. */
.match-redesign-130 .private-hand-panel {
  min-height: 0 !important;
  height: 100%;
  padding-bottom: 10px;
  overflow: visible;
}
.match-redesign-130 .private-hand-workspace {
  min-height: 0;
  height: calc(100% - 48px);
  align-items: stretch;
}
.match-redesign-130 .private-hand-fan { min-height: 0; }
.match-redesign-130 .private-hand-workspace .private-hand-grid {
  min-height: 0 !important;
  align-content: start;
}
.match-redesign-130 .turn-control-110 {
  min-height: 44px;
}

/* Notes remains visually aligned to the left/center paper system. */
.match-redesign-130 .meeting-notes-panel {
  background: rgba(255,255,255,.66);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 7px 22px rgba(65,45,35,.05);
}

/* Desktop widths below the old 1179px breakpoint still keep all three columns
   whenever there is enough horizontal space for a real game table. */
@media (min-width: 1050px) and (max-width: 1399px) {
  .match-redesign-130 .match-layout-120 {
    grid-template-columns: 188px minmax(0,1fr) 228px !important;
    gap: 10px !important;
  }
  .match-redesign-130 .meeting-notes-panel {
    grid-column: auto !important;
    min-height: 0 !important;
  }
  .match-redesign-130 .match-sidebar-120 .match-brand-block { min-height: 112px; }
  .match-redesign-130 .match-sidebar-120 .match-sidebar-logo { width: 156px; }
}
@media (max-width: 1049px) {
  .match-redesign-130 .match-layout-120 {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 180px minmax(0,1fr) !important;
  }
  .match-redesign-130 .meeting-notes-panel {
    grid-column: 1 / -1 !important;
    min-height: 360px;
  }
  .match-redesign-130 .match-main-120 {
    height: auto;
    grid-template-rows: auto auto auto auto auto;
  }
}
@media (max-width: 760px) {
  .site-redesign-130 { padding-inline: 10px; }
  .site-redesign-130 .online-head { padding-inline: 4px; }
  .match-redesign-130 .match-layout-120 { grid-template-columns: 1fr !important; }
}


/* ==========================================================================\n   Online Alpha 1.3.1 — visual polish: Soft Light logo, contained slots,\n   hover-only hand controls, and unified light modal system\n   ========================================================================== */

/* Photoshop reference behavior: use the untouched WHITE outline art and let
   Soft Light do the color interaction. Never recolor the source to black. */
.site-redesign-130 .online-logo,
.match-redesign-130 .match-sidebar-logo {
  filter: none !important;
  mix-blend-mode: soft-light !important;
  opacity: .96 !important;
}
.site-redesign-130 .logo-home-btn:hover .online-logo,
.match-redesign-130 .logo-home-btn:hover .match-sidebar-logo {
  filter: none !important;
  mix-blend-mode: soft-light !important;
  opacity: 1 !important;
}

/* The redesigned boards do not need the old Presentation eyebrow. Removing it
   gives the slot grid the exact available row height instead of adding an
   invisible line of vertical overflow. */
.match-redesign-130 .network-presentation > .eyebrow { display: none !important; }
.match-redesign-130 .network-board.you .network-play-area,
.match-redesign-130 .network-board.you .network-presentation,
.match-redesign-130 .network-board.you .network-campaign-slots {
  min-height: 0 !important;
  height: 100% !important;
  margin-top: 0 !important;
}
.match-redesign-130 .network-board.you .network-campaign-slots {
  align-items: stretch !important;
}
.match-redesign-130 .network-board.you .network-slot,
.match-redesign-130 .network-board.you .network-slot.campaign-stack {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

/* Keep the action labels available without showing a row of buttons at rest.
   The shell is the stable hover hitbox, so moving from the magnified card down
   to its button does not collapse the control. */
.match-redesign-130 .private-hand-workspace .hand-card-shell .card-play-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(4px);
  transition: opacity .13s ease, transform .13s ease, visibility 0s linear .13s;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .card-play-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0);
  transition-delay: 0s;
  position: relative;
  z-index: 1500;
}
/* The small explanatory notes follow the same decluttered behavior. */
.match-redesign-130 .private-hand-workspace .hand-card-shell .effect-note {
  opacity: 0;
  visibility: hidden;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .effect-note,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .effect-note {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------- */
/* Unified light overlays                                                     */
/* -------------------------------------------------------------------------- */
.game-overlay {
  background: rgba(236,230,224,.58) !important;
  backdrop-filter: blur(14px) saturate(.92);
  -webkit-backdrop-filter: blur(14px) saturate(.92);
}
.game-modal {
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.88) !important;
  color: #171512 !important;
  box-shadow: 0 28px 80px rgba(60,44,36,.16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.game-modal .eyebrow,
.game-modal .private-note,
.game-modal p,
.game-modal small { color: #706963 !important; }
.game-modal h1,
.game-modal h2,
.game-modal h3,
.game-modal strong { color: #171512; }
.modal-x {
  border-color: rgba(25,22,20,.13) !important;
  background: rgba(255,255,255,.72) !important;
  color: #171512 !important;
}
.modal-x:hover { background: #fff !important; }

/* Search / discard / target / pending-choice surfaces. */
.modal-choice-card,
.target-card,
.undo-reaction-preview {
  border-color: rgba(31,27,24,.12) !important;
  background: rgba(255,255,255,.58) !important;
  color: #171512 !important;
  box-shadow: 0 8px 22px rgba(54,40,32,.05);
}
.modal-choice-card:hover,
.target-card:hover {
  border-color: rgba(31,27,24,.34) !important;
  background: rgba(255,255,255,.86) !important;
}
.modal-choice-card.is-selected {
  border-color: #171512 !important;
  box-shadow: 0 0 0 2px #171512, 0 12px 28px rgba(54,40,32,.10) !important;
}
.modal-choice-card.is-selected::before {
  background: #171512 !important;
  color: #fff !important;
}
.target-card span,
.modal-choice-card > small,
.undo-reaction-preview span { color: #756e67 !important; }

/* Discard browser stays roomy, but now belongs to the same paper system. */
.discard-browser-modal { background: rgba(255,255,255,.90) !important; }

/* Winner / loser result screen. */
.winner-online-card { color: #171512; }
.winner-online-scoreboard {
  border-color: rgba(31,27,24,.12) !important;
  background: rgba(255,255,255,.38);
}
.winner-online-row {
  background: rgba(255,255,255,.58) !important;
  color: #171512 !important;
  border-top-color: rgba(31,27,24,.08) !important;
}
.winner-online-row.winner {
  background: #171512 !important;
  color: #fff !important;
}
.winner-online-row.winner span,
.winner-online-row.winner strong,
.winner-online-row.winner small { color: #fff !important; }
.winner-online-phrase { color: #665f59 !important; }

/* Pie-in-the-Sky / endgame can retain a black coin, but the surrounding moment
   is light instead of reverting the entire UI to the legacy dark theme. */
.pie-online-card { color: #171512; }
.pie-online-card > p,
.pie-online-result span { color: #706963 !important; }

/* Turn handoff popup: same translucent paper + dark typography as the table. */
.your-turn-popup-inner {
  border: 1px solid rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.88) !important;
  color: #171512 !important;
  box-shadow: 0 26px 80px rgba(60,44,36,.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.your-turn-popup-inner span { color: #171512 !important; }
.your-turn-popup-inner small { color: #6e6761 !important; }

/* Legacy generic buttons inside modal surfaces also inherit the light system. */
.game-modal .secondary-btn,
.game-modal .ghost-btn {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(31,27,24,.15) !important;
  color: #171512 !important;
}
.game-modal .primary-btn {
  background: #171512 !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .match-redesign-130 .private-hand-workspace .hand-card-shell .card-play-btn {
    opacity: 0 !important;
  }
  .match-redesign-130 .private-hand-workspace .hand-card-shell:hover .card-play-btn,
  .match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .card-play-btn {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Online Alpha 1.3.2 — hover-stage controls, centered piles, logo swap
   ========================================================================== */

/* Use the supplied black-outline logo artwork directly on the pastel field. */
.site-redesign-130 .online-logo,
.match-redesign-130 .match-sidebar-logo {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}
.site-redesign-130 .logo-home-btn:hover .online-logo,
.match-redesign-130 .logo-home-btn:hover .match-sidebar-logo {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Magnify the whole card+control stage. This keeps the play control physically
   below the enlarged card and keeps the hover alive while the pointer travels
   from the card down to the button. */
.match-redesign-130 .private-hand-workspace .hand-card-shell {
  overflow: visible !important;
}
.match-redesign-130 .private-hand-workspace .hand-hover-stage {
  position: relative;
  width: 100%;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: top center;
  transition: transform .16s ease;
  will-change: transform;
  z-index: 1;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within {
  z-index: 1600 !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage {
  transform: translateY(-16px) scale(2);
  z-index: 1600;
}

/* The stage now owns the 2x magnification, so disable the legacy nested card
   and image transforms that otherwise cause double-scaling. */
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card,
.match-redesign-130 .private-hand-workspace .private-hand-card:hover {
  transform: none !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card img,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card img,
.match-redesign-130 .private-hand-workspace .private-hand-card:hover img,
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .private-hand-card.rare-card:hover::after {
  transform: none !important;
}

/* Keep the actual control at normal UI size even though its parent stage is 2x. */
.match-redesign-130 .private-hand-workspace .hand-hover-stage .card-play-btn {
  display: block;
  margin: 7px auto 0 !important;
  transform: scale(.5) !important;
  transform-origin: top center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage .card-play-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(.5) !important;
}

/* Preserve the rare shimmer for the entire hover stage, including while the
   pointer is on the play button below the card. */
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card.rare-card::after {
  opacity: .78 !important;
  animation: onlineRareShimmer052 5s linear infinite !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card.rare-card img,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card.rare-card img {
  filter: saturate(1.22) brightness(1.06) drop-shadow(0 8px 15px rgba(0,0,0,.34)) !important;
}

/* Resource labels align with EMPTY / pile contents instead of hugging left. */
.match-redesign-130 .private-hand-resources .hand-resource-pile > .eyebrow {
  width: 100%;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  .match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage,
  .match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage {
    transform: translateY(-10px) scale(1.62);
  }
  .match-redesign-130 .private-hand-workspace .hand-hover-stage .card-play-btn,
  .match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage .card-play-btn,
  .match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage .card-play-btn {
    transform: scale(.62) !important;
  }
}


/* ==========================================================================
   Online Alpha 1.3.3 — motion + readability polish
   ========================================================================== */

/* Counts on the new light surfaces must stay dark/readable. */
.match-redesign-130 .network-stats strong,
.match-redesign-130 .network-stats .stat-button strong,
.match-redesign-130 .turn-allowances strong {
  color: #171512 !important;
}
.match-redesign-130 .turn-allowances span.is-spent {
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(25,22,20,.10) !important;
  color: #857e78 !important;
  opacity: .50 !important;
}
.match-redesign-130 .turn-allowances span.is-spent strong {
  color: #716a64 !important;
}

/* The Hand card itself extends left of its overlap lane. Center the play
   control under the CARD, rather than under the narrower lane. */
.match-redesign-130 .private-hand-workspace .hand-hover-stage .card-play-btn {
  margin-left: -12px !important;
  margin-right: 0 !important;
}

/* Action cards visibly travel from the Hand into the user's public Discard. */
.online-action-discard-flyer {
  position: fixed;
  z-index: 12000;
  pointer-events: none;
  transform-origin: top left;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 18px 46px rgba(53,39,32,.28);
}
.online-action-discard-flyer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}
.action-card-departing { opacity: .10 !important; }
.action-discard-arrival {
  animation: actionDiscardArrival133 .46s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes actionDiscardArrival133 {
  0% { box-shadow: 0 0 0 0 rgba(23,21,18,0); transform: scale(1); }
  45% { box-shadow: 0 0 0 4px rgba(23,21,18,.10); transform: scale(1.025); }
  100% { box-shadow: 0 0 0 0 rgba(23,21,18,0); transform: scale(1); }
}

/* Briefs are cards too: hover to read them at a comfortable size without
   changing the surrounding layout. */
.match-sidebar-120,
.match-sidebar-120 .brief-side-card,
.match-sidebar-120 .brief-side-row,
.site-redesign-130 .brief-preview,
.match-brief {
  overflow: visible !important;
}
.match-sidebar-120 .brief-side-card { position: relative; z-index: 20; }
.match-sidebar-120 .brief-side-card:hover { z-index: 10000; }
.match-sidebar-120 .side-brief-image,
.site-redesign-130 .brief-preview img,
.match-brief img {
  position: relative;
  transition: transform .16s ease, filter .16s ease;
  transform-origin: left center;
  cursor: zoom-in;
}
.match-sidebar-120 .side-brief-image:hover {
  transform: translate(5px, 0) scale(2.8);
  z-index: 10001;
  filter: drop-shadow(0 16px 28px rgba(54,40,32,.26));
}
.site-redesign-130 .brief-preview img:hover,
.match-brief img:hover {
  transform: translateY(-4px) scale(1.75);
  z-index: 10001;
  filter: drop-shadow(0 16px 28px rgba(54,40,32,.24));
}

/* Opponent cards use the same visual corner language as magnified Hand cards.
   Their base image is scaled farther, so use a tighter pre-scale radius. */
.match-redesign-130 .network-board.opponent .stack-card,
.match-redesign-130 .network-board.opponent .stack-card img,
.match-redesign-130 .network-board.opponent .stack-card.rare-card::after {
  border-radius: 3px !important;
}

@media (max-width: 1100px) {
  .match-redesign-130 .private-hand-workspace .hand-hover-stage .card-play-btn {
    margin-left: -8px !important;
  }
  .match-sidebar-120 .side-brief-image:hover {
    transform: translate(4px, 0) scale(2.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-action-discard-flyer { display: none !important; }
  .action-discard-arrival { animation: none !important; }
  .match-sidebar-120 .side-brief-image,
  .site-redesign-130 .brief-preview img,
  .match-brief img { transition: none !important; }
}


/* -------------------------------------------------------------------------
   Online Alpha 1.3.4 — lobby hover stability + unobtrusive info notices
   ------------------------------------------------------------------------- */

/* Status notices belong above the table, not on top of Hand controls. */
.online-toast {
  top: 18px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(560px, calc(100vw - 40px));
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(61,47,40,.18) !important;
}

/* Theme Deck / Brief selection: keep a stationary hover hitbox. The image
   magnifies inside it, so moving pixels never changes what owns :hover. */
.site-redesign-130 .brief-preview-image-stage {
  width: 112px;
  aspect-ratio: .7142857;
  flex: 0 0 auto;
  position: relative;
  overflow: visible;
  z-index: 1;
}
.site-redesign-130 .brief-preview-image-stage:hover,
.site-redesign-130 .brief-preview-image-stage:focus-within {
  z-index: 10001;
}
.site-redesign-130 .brief-preview-image-stage img {
  width: 100% !important;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  transform-origin: left center;
  transition: transform .16s ease, filter .16s ease;
  cursor: zoom-in;
}
.site-redesign-130 .brief-preview-image-stage:hover img,
.site-redesign-130 .brief-preview-image-stage:focus-within img {
  transform: translateY(-4px) scale(1.75);
  filter: drop-shadow(0 16px 28px rgba(54,40,32,.24));
}
/* Disable the old image-owned hover transform so only the stable stage drives it. */
.site-redesign-130 .brief-preview img:hover {
  transform: none !important;
}

@media (max-width: 760px) {
  .site-redesign-130 .brief-preview-image-stage { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-redesign-130 .brief-preview-image-stage img { transition: none !important; }
}

/* ==========================================================================
   Online Alpha 1.3.5 — stable large magnification + contained resources
   ========================================================================== */

/* The Hand now uses a virtual/stationary lane as the hover selector. The
   enlarged visual may sit over neighboring cards, but moving the pointer into
   the next ORIGINAL lane immediately hands magnification to that card. */
.match-redesign-130 .private-hand-workspace .hand-hover-stage {
  width: 112px !important;
  margin-left: -28px !important;
  transform-origin: top center !important;
}
.match-redesign-130 .private-hand-workspace .hand-hover-stage .private-hand-card {
  width: 112px !important;
  margin-left: 0 !important;
}

/* Neutralize browser :hover as the magnification owner. JS applies
   .is-hand-hovered from the stationary pre-magnification lanes instead. */
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage {
  transform: translate3d(0,0,0) scale(1) !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .hand-hover-stage {
  transform: translateY(-18px) scale(2.6) !important;
  z-index: 1800 !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered {
  z-index: 1800 !important;
}

/* Buttons stay at normal UI size and are centered under the FULL card, not the
   narrower overlap lane. 1 / 2.6 = .384615. */
.match-redesign-130 .private-hand-workspace .hand-hover-stage .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .hand-hover-stage .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .hand-hover-stage .card-play-btn {
  margin: 7px auto 0 !important;
  left: auto !important;
  right: auto !important;
  transform: scale(.384615) !important;
  transform-origin: top center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .hand-hover-stage .card-play-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(.384615) !important;
}

/* The Hand shimmer gets its own complete pass. The highlight starts fully off
   the right edge, crosses the entire card, exits fully left, then rests before
   repeating. Raw DOM hover no longer owns the animation, preventing a partial
   sweep from being frozen when the enlarged visual overlaps another card. */
.match-redesign-130 .private-hand-workspace .private-hand-card.rare-card:hover::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:hover .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within .private-hand-card.rare-card::after {
  opacity: 0 !important;
  animation: none !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .private-hand-card.rare-card::after {
  opacity: .82 !important;
  animation: onlineRareShimmer135 5s linear infinite !important;
  animation-play-state: running !important;
}
@keyframes onlineRareShimmer135 {
  0%   { background-position: 185% 0, 165% 0; opacity: 0; }
  2%   { background-position: 165% 0, 148% 0; opacity: .72; }
  8%   { background-position: 82% 0, 76% 0; opacity: 1; }
  15%  { background-position: -30% 0, -20% 0; opacity: .95; }
  21%  { background-position: -135% 0, -120% 0; opacity: .28; }
  24%, 100% { background-position: -185% 0, -165% 0; opacity: 0; }
}

/* 30% larger easy-read magnification across live-table face-up cards. */
.match-redesign-130 .network-board.you .stack-card:hover img,
.match-redesign-130 .network-board.you .stack-card.rare-card:hover::after {
  transform: translateY(-12px) scale(2.6) !important;
  filter: drop-shadow(0 18px 32px rgba(39,29,24,.28));
}
.match-redesign-130 .network-board.opponent .stack-card:hover img,
.match-redesign-130 .network-board.opponent .stack-card.rare-card:hover::after {
  transform: translateY(18px) scale(4.03) !important;
  transform-origin: 50% 18% !important;
  filter: drop-shadow(0 20px 36px rgba(39,29,24,.30));
}
.match-redesign-130 .discard-browser-modal .modal-card:hover img,
.match-redesign-130 .discard-browser-modal .modal-card.rare-card:hover::after,
.match-redesign-130 .game-modal .modal-card:hover img,
.match-redesign-130 .game-modal .modal-card.rare-card:hover::after {
  transform: scale(2.6) !important;
}
.match-sidebar-120 .side-brief-image:hover {
  transform: translate(6px, 0) scale(3.64) !important;
}
.site-redesign-130 .brief-preview-image-stage:hover img,
.site-redesign-130 .brief-preview-image-stage:focus-within img {
  transform: translateY(-5px) scale(2.28) !important;
}

/* Deck and Discard are genuine children of the Hand panel. Their content now
   compresses inside the available 16:9 height instead of hanging through the
   Hand border. Main-table Discard remains non-magnifying by design. */
.match-redesign-130 .private-hand-resources {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  align-self: stretch !important;
  overflow: hidden !important;
}
.match-redesign-130 .private-hand-resources .hand-resource-pile {
  min-height: 0 !important;
  height: 100% !important;
  padding: 5px 5px 4px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}
.match-redesign-130 .private-hand-resources .pile-empty {
  min-height: 0 !important;
  width: 100%;
  height: 100%;
}
.match-redesign-130 .private-hand-resources .pile-top-card,
.match-redesign-130 .private-hand-resources .hand-deck-stack {
  width: 40px !important;
  max-height: 62px;
  margin: 2px auto 0 !important;
  align-self: center;
}
.match-redesign-130 .private-hand-resources .hand-deck-stack img {
  width: 40px !important;
}
.match-redesign-130 .private-hand-resources .hand-deck-stack span {
  right: -3px !important;
  bottom: -3px !important;
}
.match-redesign-130 .private-hand-resources .hand-pile-count {
  margin-top: 2px !important;
  line-height: 1.05 !important;
}

/* Meeting Notes — Slack/Google Chat-style per-message reactions. */
.meeting-note { position: relative; overflow: visible; }
.meeting-note-reactions {
  min-height: 16px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.meeting-note-reaction-chip,
.meeting-note-reaction-trigger,
.meeting-note-reaction-menu button {
  appearance: none;
  border: 1px solid rgba(35,31,28,.13);
  background: rgba(255,255,255,.56);
  color: #24211e;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.meeting-note-reaction-chip {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.meeting-note-reaction-chip span { font-size: 7px; font-weight: 900; }
.meeting-note-reaction-chip.mine {
  border-color: rgba(41,94,143,.30);
  background: rgba(215,235,255,.72);
}
.meeting-note-reaction-chip:hover,
.meeting-note-reaction-trigger:hover,
.meeting-note-reaction-menu button:hover { background: rgba(255,255,255,.92); }
.meeting-note-reaction-picker { position: relative; display: inline-flex; }
.meeting-note-reaction-trigger {
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #827b74;
  font-size: 11px;
  line-height: 1;
}
.meeting-note-reaction-menu {
  position: absolute;
  left: -4px;
  bottom: calc(100% + 4px);
  z-index: 100;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(35,31,28,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 7px 20px rgba(50,39,32,.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  white-space: nowrap;
}
.meeting-note-reaction-picker:hover .meeting-note-reaction-menu,
.meeting-note-reaction-picker:focus-within .meeting-note-reaction-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.meeting-note-reaction-menu button {
  width: 23px;
  height: 23px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
}

/* Widescreen match cards are 90px inside 66px lanes. Let the visual stage be
   the card's real width so the play button can center itself mathematically. */
@media (min-width: 1100px) and (min-aspect-ratio: 8/5) {
  .match-redesign-130 .private-hand-workspace .hand-hover-stage {
    width: 90px !important;
    margin-left: -20px !important;
  }
  .match-redesign-130 .private-hand-workspace .hand-hover-stage .private-hand-card {
    width: 90px !important;
  }
}

@media (max-width: 760px) {
  .match-redesign-130 .private-hand-workspace .hand-hover-stage {
    width: 92px !important;
    margin-left: -20px !important;
  }
  .match-redesign-130 .private-hand-workspace .hand-hover-stage .private-hand-card {
    width: 92px !important;
  }
  .match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage {
    transform: translateY(-12px) scale(2.10) !important;
  }
  .match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage .card-play-btn {
    transform: scale(.47619) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .private-hand-card.rare-card::after {
    animation: none !important;
    opacity: .28 !important;
  }
}

/* Overlay card previews live outside the match root, so keep their +30%
   magnification global rather than scoped to .match-redesign-130. */
.discard-browser-modal .modal-card:hover img,
.discard-browser-modal .modal-card.rare-card:hover::after,
.game-modal .modal-card:hover img,
.game-modal .modal-card.rare-card:hover::after {
  transform: scale(2.6) !important;
}

/* ==========================================================================
   Online Alpha 1.3.6 — reaction hover bridge + crisp, viewport-safe Hand preview
   ========================================================================== */

/* Meeting Notes: remove the dead zone between + and the emoji tray so the
   palette stays open as the pointer travels upward without requiring a click. */
.meeting-note-reaction-menu {
  bottom: calc(100% - 1px) !important;
}
.meeting-note-reaction-picker::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: 100%;
  height: 8px;
  pointer-events: auto;
}

/* 1.3.6 renders Hand magnification as a true-size fixed preview instead of
   raster-scaling the small in-layout card. This keeps 1500x2100 source art
   crisp and guarantees the enlarged card stays within the browser viewport. */
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .hand-hover-stage {
  transform: none !important;
  z-index: 1 !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .hand-hover-stage .card-play-btn,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .hand-hover-stage .card-play-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.match-redesign-130 .private-hand-workspace .hand-card-shell.is-hand-hovered .private-hand-card.rare-card::after,
.match-redesign-130 .private-hand-workspace .hand-card-shell:focus-within.is-hand-hovered .private-hand-card.rare-card::after {
  opacity: 0 !important;
  animation: none !important;
}

.hand-hover-portal {
  position: fixed;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  isolation: isolate;
}
.hand-hover-portal-card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 55px rgba(39,29,24,.34);
}
.hand-hover-portal-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  image-rendering: auto;
  transform: none !important;
  filter: none !important;
}
.hand-hover-portal-card.rare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 16%,
      rgba(255,90,180,.12) 31%,
      rgba(120,225,255,.42) 42%,
      rgba(255,255,255,.72) 49%,
      rgba(255,235,105,.28) 55%,
      rgba(170,120,255,.18) 64%,
      transparent 78%),
    linear-gradient(125deg,
      transparent 20%,
      rgba(255,0,128,.13),
      rgba(0,255,255,.13),
      rgba(255,235,0,.13),
      transparent 78%);
  background-size: 250% 100%, 220% 100%;
  mix-blend-mode: screen;
  animation: onlineRareShimmer135 5s linear infinite;
}
.hand-hover-portal-card.rare-card img {
  filter: saturate(1.16) brightness(1.03) !important;
}
.hand-hover-portal-button {
  width: max-content !important;
  min-width: 92px;
  max-width: 170px;
  min-height: 28px;
  margin: 8px auto 0 !important;
  padding: 6px 10px !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(39,29,24,.18);
}
.hand-hover-portal-button:disabled {
  pointer-events: none !important;
}

/* Full-resolution source images should always be resampled from their JPEG,
   not a cached small compositor layer, in every enlarged card context. */
.match-redesign-130 .stack-card img,
.match-redesign-130 .modal-card img,
.discard-browser-modal .modal-card img,
.game-modal .modal-card img {
  image-rendering: auto !important;
  will-change: auto !important;
}

/* Confirmation controls are promoted above their card grid by JS. Give that
   top action row separation so the decision is visible before scrolling. */
.game-modal .modal-choice-footer {
  margin: 10px 0 12px !important;
  padding-top: 0 !important;
}
.game-modal .modal-choice-footer + .modal-choice-grid {
  margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hand-hover-portal-card.rare-card::after {
    animation: none !important;
    opacity: .28 !important;
  }
}

/* =========================================================
   Multiplayer Alpha 2.0 — 2–4 Agency lobby
   ========================================================= */

.multiplayer-lobby-grid {
  align-items: stretch;
}

.multiplayer-lobby-grid.players-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.multiplayer-lobby-grid.players-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.multiplayer-lobby-grid.players-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.multiplayer-lobby-grid .agency-card,
.multiplayer-lobby-grid .waiting-card {
  min-width: 0;
  min-height: 170px;
}

#create-player-count {
  width: 100%;
}

@media (max-width: 980px) {
  .multiplayer-lobby-grid.players-3,
  .multiplayer-lobby-grid.players-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .multiplayer-lobby-grid.players-2,
  .multiplayer-lobby-grid.players-3,
  .multiplayer-lobby-grid.players-4 {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.1 — VARIABLE 2–4 AGENCY TABLE                         */
/* ========================================================================== */

/* In 3–4 player matches, all opposing Presentations share the compact top
   band. Two-player rooms keep the established single-opponent layout. */
.multiplayer-opponent-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  position: relative;
  z-index: 8;
}
.multiplayer-opponent-strip.opponents-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.multiplayer-opponent-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: visible;
  z-index: 1;
}
.multiplayer-opponent-shell:hover { z-index: 90; }
.multiplayer-opponent-shell > .network-board.opponent {
  height: 100% !important;
  min-height: 0 !important;
}

/* Compact the typography / gaps without sacrificing the three Campaign slots.
   Card art is intentionally tiny at rest because hover magnification remains
   the inspection mechanism during this engine-testing milestone. */
.multiplayer-opponent-strip .network-board.opponent {
  padding: 6px 8px 7px !important;
  gap: 2px !important;
  grid-template-rows: minmax(86px, 1fr) auto auto !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-campaign-slots {
  gap: 4px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-slot,
.multiplayer-opponent-strip .network-board.opponent .network-slot.campaign-stack {
  min-height: 82px !important;
  padding: 4px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-slot.campaign-stack {
  grid-template-columns: minmax(0, 1fr) 34px !important;
  gap: 3px !important;
}
.multiplayer-opponent-strip .network-board.opponent .stack-cards {
  width: 33px !important;
  height: 68px !important;
  min-height: 61px !important;
  --stack-offset: 3px !important;
}
.multiplayer-opponent-strip .network-board.opponent .stack-card {
  width: 33px !important;
}
.multiplayer-opponent-strip .network-board.opponent .campaign-stack-info {
  gap: 3px !important;
}
.multiplayer-opponent-strip .network-board.opponent .campaign-stack-info .stack-label {
  font-size: 6px !important;
  line-height: 1.03 !important;
}
.multiplayer-opponent-strip .network-board.opponent .campaign-point-tally {
  font-size: 5px !important;
  padding: 2px 3px !important;
}
.multiplayer-opponent-strip .network-board.opponent .campaign-requirement {
  font-size: 4.5px !important;
  line-height: 1.05 !important;
  padding: 2px 3px !important;
  max-width: 100% !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-stats {
  gap: 5px !important;
  padding-top: 2px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-stats span,
.multiplayer-opponent-strip .network-board.opponent .network-stats .stat-button {
  font-size: 5.5px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-board-head {
  min-height: 26px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-board-head h2 {
  font-size: 12px !important;
  margin-top: 1px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-board-head .eyebrow {
  font-size: 5.5px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-score {
  min-width: 42px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
}
.multiplayer-opponent-strip .network-board.opponent .network-score span {
  font-size: 5px !important;
}

/* Hovered opponent cards must rise above neighboring Agency panels. */
.multiplayer-opponent-strip .network-board.opponent .stack-card:hover {
  z-index: 9500 !important;
}
.multiplayer-opponent-strip .network-board.opponent .stack-card:hover img,
.multiplayer-opponent-strip .network-board.opponent .stack-card.rare-card:hover::after {
  transform: translateY(18px) scale(4.15) !important;
  transform-origin: 50% 12% !important;
}

/* Three opponents need one last density step at typical laptop widths. */
.multiplayer-opponent-strip.opponents-3 .network-board.opponent {
  padding-inline: 6px !important;
}
.multiplayer-opponent-strip.opponents-3 .network-board.opponent .network-campaign-slots {
  gap: 3px !important;
}
.multiplayer-opponent-strip.opponents-3 .network-board.opponent .network-slot.campaign-stack {
  grid-template-columns: minmax(0, 1fr) 29px !important;
}
.multiplayer-opponent-strip.opponents-3 .network-board.opponent .stack-cards,
.multiplayer-opponent-strip.opponents-3 .network-board.opponent .stack-card {
  width: 28px !important;
}
.multiplayer-opponent-strip.opponents-3 .network-board.opponent .network-stats {
  gap: 3px !important;
}

@media (max-width: 1180px) {
  .multiplayer-opponent-strip {
    grid-template-columns: repeat(2, minmax(245px, 1fr));
    overflow-x: auto;
    overflow-y: visible;
  }
  .multiplayer-opponent-strip.opponents-3 {
    grid-template-columns: repeat(3, minmax(225px, 1fr));
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.2 — TARGETING + RESPONSE STACK + OPPONENT CONTAINMENT */
/* ========================================================================== */

/* 3–4 player compact boards must never escape their allotted third/half of the
   center column. Explicit min-width resets beat older single-opponent rules. */
.multiplayer-opponent-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: stretch;
}
.multiplayer-opponent-shell,
.multiplayer-opponent-shell > .network-board.opponent,
.multiplayer-opponent-strip .network-play-area,
.multiplayer-opponent-strip .network-presentation,
.multiplayer-opponent-strip .network-campaign-slots,
.multiplayer-opponent-strip .network-slot,
.multiplayer-opponent-strip .campaign-stack-info {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.multiplayer-opponent-shell > .network-board.opponent {
  width: 100% !important;
  overflow: visible !important;
}
.multiplayer-opponent-strip .network-campaign-slots {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: visible !important;
}
.multiplayer-opponent-strip .network-slot,
.multiplayer-opponent-strip .network-slot.campaign-stack {
  width: auto !important;
  overflow: visible !important;
}
.multiplayer-opponent-strip .network-board-head,
.multiplayer-opponent-strip .network-stats {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.multiplayer-opponent-strip .network-board-head > div:first-child {
  min-width: 0 !important;
  overflow: hidden;
}
.multiplayer-opponent-strip .network-board-head h2,
.multiplayer-opponent-strip .network-board-head .deck-line,
.multiplayer-opponent-strip .network-board-head .eyebrow {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiplayer-opponent-strip .network-score {
  flex: 0 0 auto;
}

/* The campaign info column must surrender space before the card stack does. */
.multiplayer-opponent-strip .network-slot.campaign-stack {
  grid-template-columns: minmax(0, 1fr) minmax(22px, 30px) !important;
}
.multiplayer-opponent-strip .campaign-stack-info {
  overflow: hidden;
}
.multiplayer-opponent-strip .campaign-stack-info .stack-label {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.multiplayer-opponent-strip .stack-cards,
.multiplayer-opponent-strip .stack-card {
  max-width: 100% !important;
}

/* At normal laptop widths we keep all three opponent boards on one row instead
   of allowing an old minimum-width rule to create a horizontal overflow lane. */
@media (min-width: 900px) {
  .multiplayer-opponent-strip,
  .multiplayer-opponent-strip.opponents-3 {
    overflow: visible !important;
  }
  .multiplayer-opponent-strip.opponents-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .multiplayer-opponent-strip:not(.opponents-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Feedback target selection. */
.agency-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.agency-target-choice {
  appearance: none;
  border: 1px solid rgba(30,30,30,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.60);
  color: #111;
  min-height: 112px;
  padding: 14px;
  text-align: left;
  display: grid;
  align-content: space-between;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(70,50,42,.05);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.agency-target-choice:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.83);
  border-color: rgba(20,20,20,.34);
  box-shadow: 0 12px 28px rgba(70,50,42,.10);
}
.agency-target-choice.selected,
.agency-target-choice[aria-pressed="true"] {
  border-color: #111;
  box-shadow: inset 0 0 0 2px #111, 0 12px 28px rgba(70,50,42,.10);
  background: rgba(255,255,255,.92);
}
.agency-target-choice .agency-target-seat {
  color: #7e766f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.agency-target-choice strong {
  font-size: 20px;
  line-height: 1.05;
}
.agency-target-score {
  width: max-content;
  border-radius: 999px;
  background: #111;
  color: #fff;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
}

/* Response-stack window keeps the same paper-like modal language as the rest
   of the redesigned game while making the current top card unmistakable. */
.response-stack-preview {
  margin: 16px 0 4px;
  border: 1px solid rgba(30,30,30,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.48);
  padding: 12px;
}
.response-stack-top {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.response-stack-top .modal-card {
  width: 96px;
}
.response-stack-top .undo-reaction-copy {
  display: grid;
  gap: 5px;
}
.response-stack-top .undo-reaction-copy strong {
  color: #111;
  font-size: 18px;
}
.response-stack-top .undo-reaction-copy span,
.response-stack-top .undo-reaction-copy small {
  color: #6d665f;
}

@media (max-width: 1180px) {
  .multiplayer-opponent-strip .network-board.opponent {
    padding-inline: 5px !important;
  }
  .multiplayer-opponent-strip .network-board.opponent .network-board-head h2 {
    font-size: 10px !important;
  }
  .multiplayer-opponent-strip .network-board.opponent .network-score {
    min-width: 36px !important;
    padding-inline: 5px !important;
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.3 — ADAPTIVE 2/3/4 TABLE + PRESENTATION VIEWER         */
/* ========================================================================== */

/* Approved table composition: utility rail left, all opponent Presentations
   across the top, your Presentation + Hand in the center, Meeting Notes and
   room reactions sharing one right rail. */
.match-multiplayer-230 .match-layout-120 {
  grid-template-columns: 226px minmax(0, 1fr) 274px !important;
  gap: 14px !important;
}

/* The left rail now matches the approved wireframe: brand, game state, Brief,
   and Game Guide only. Reactions live beside Meeting Notes on the right. */
.match-multiplayer-230 .match-sidebar-120 {
  align-content: start;
}
.match-multiplayer-230 .match-sidebar-120 .rules-side-button {
  min-height: 76px;
}

/* Right rail: Meeting Notes consumes the flexible space, reactions stay
   visible in a small dock at the bottom. */
.match-right-rail {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}
.match-right-rail .meeting-notes-panel {
  min-height: 0;
  height: auto;
}
.meeting-notes-room {
  margin-top: 5px;
  color: #8b837b;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.match-reactions-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 7px;
  background: rgba(255,255,255,.66);
  color: #171512;
  box-shadow: 0 7px 22px rgba(65,45,35,.05);
  backdrop-filter: blur(9px);
}
.match-reactions-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.match-reactions-panel .eyebrow { color: #5e5852; }
.match-reactions-panel small {
  color: #8c847c;
  font-size: 6.5px;
}
.match-reactions-panel .reaction-dock {
  margin-top: 9px;
}
.match-reactions-panel .reaction-button {
  min-height: 35px;
  border-color: rgba(25,22,20,.15) !important;
  background: rgba(255,255,255,.48) !important;
  color: #171512 !important;
  box-shadow: none;
}
.match-reactions-panel .reaction-button:hover {
  border-color: rgba(25,22,20,.28) !important;
  background: rgba(255,255,255,.88) !important;
}

/* Presentation controls are intentionally quiet in the live table; the score
   remains the visual anchor while View Presentation is always available. */
.network-board-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}
.view-presentation-btn {
  appearance: none;
  border: 1px solid rgba(25,22,20,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: #5f5852;
  padding: 5px 8px;
  font: inherit;
  font-size: 6.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.view-presentation-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(25,22,20,.30);
  background: rgba(255,255,255,.92);
  color: #171512;
}
.multiplayer-opponent-strip .view-presentation-btn {
  padding: 4px 6px;
  font-size: 5px;
}

/* Final adaptive center-column proportions. Four-player allocates the most
   height to the three-opponent band, three-player slightly less, and the
   established two-player table remains comfortably roomy. */
@media (min-width: 1050px) {
  .match-multiplayer-230.match-players-4 .match-main-120 {
    grid-template-rows: minmax(200px, 1.20fr) minmax(218px, 1fr) minmax(190px, .82fr) 44px 12px !important;
  }
  .match-multiplayer-230.match-players-3 .match-main-120 {
    grid-template-rows: minmax(190px, 1.05fr) minmax(230px, 1.08fr) minmax(195px, .88fr) 44px 12px !important;
  }
  .match-multiplayer-230.match-players-2 .match-main-120 {
    grid-template-rows: minmax(176px, .86fr) minmax(248px, 1.18fr) minmax(205px, 1fr) 44px 12px !important;
  }

  .match-multiplayer-230.match-players-4 .multiplayer-opponent-strip,
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-strip {
    height: 100%;
    min-height: 0;
  }
  .match-multiplayer-230.match-players-4 .multiplayer-opponent-shell,
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-shell {
    height: 100%;
  }
  .match-multiplayer-230.match-players-4 .multiplayer-opponent-shell > .network-board.opponent,
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-shell > .network-board.opponent {
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Let the live opponent cards breathe a little more now that inspection no
     longer depends on fitting everything into a 166px test strip. */
  .match-multiplayer-230.match-players-4 .multiplayer-opponent-strip.opponents-3 .network-board.opponent .stack-cards,
  .match-multiplayer-230.match-players-4 .multiplayer-opponent-strip.opponents-3 .network-board.opponent .stack-card {
    width: 36px !important;
  }
  .match-multiplayer-230.match-players-4 .multiplayer-opponent-strip.opponents-3 .network-board.opponent .network-slot.campaign-stack {
    grid-template-columns: minmax(0,1fr) 37px !important;
  }
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-strip .network-board.opponent .stack-cards,
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-strip .network-board.opponent .stack-card {
    width: 42px !important;
  }
  .match-multiplayer-230.match-players-3 .multiplayer-opponent-strip .network-board.opponent .network-slot.campaign-stack {
    grid-template-columns: minmax(0,1fr) 43px !important;
  }

  .match-multiplayer-230 .multiplayer-opponent-strip .network-board.opponent .stack-cards {
    height: 82px !important;
    min-height: 72px !important;
  }
}

/* Full-screen public Presentation viewer. No server state is changed here;
   this is a read-only magnified view of the already-public board state. */
.presentation-viewer-overlay {
  display: grid !important;
  place-items: stretch !important;
  padding: 18px !important;
  overflow: hidden !important;
}
.presentation-viewer-modal {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 34px 38px 30px !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.presentation-viewer-content {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
}
.presentation-viewer-header {
  padding-right: 52px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.presentation-viewer-header h2 {
  margin: 5px 0 0;
  font-size: clamp(32px, 4vw, 58px);
  line-height: .94;
  letter-spacing: -.035em;
}
.presentation-viewer-meta {
  margin-top: 9px;
  color: #716a63;
  font-size: 10px;
}
.presentation-viewer-score {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 14px 18px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 38px;
  font-weight: 900;
  line-height: .82;
}
.presentation-viewer-score span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.72);
  font-size: 8px;
  letter-spacing: .12em;
}
.presentation-viewer-slots {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.presentation-viewer-modal .network-slot {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 18px;
  border: 1px solid rgba(33,33,33,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.48);
  color: #171512;
  overflow: visible;
}
.presentation-viewer-modal .network-slot:not(.campaign-stack) {
  display: grid;
  place-items: center;
  color: #928a82;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.presentation-viewer-modal .network-slot.campaign-stack {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(150px, 1fr);
  align-items: start;
  gap: 18px;
}
.presentation-viewer-modal .campaign-stack-info {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}
.presentation-viewer-modal .campaign-stack-info .stack-label {
  color: #171512;
  font-size: 20px;
  font-weight: 900;
  line-height: .98;
}
.presentation-viewer-modal .campaign-point-tally {
  width: max-content;
  padding: 6px 9px 5px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
.presentation-viewer-modal .campaign-requirement {
  width: fit-content;
  max-width: 100%;
  background: rgba(255,255,255,.74);
  color: #635c56;
  border-color: rgba(33,33,33,.12);
}
.presentation-viewer-modal .stack-cards {
  --stack-offset: 22px !important;
  position: relative;
  width: min(210px, 100%);
  min-height: 300px;
  justify-self: center;
  overflow: visible;
}
.presentation-viewer-modal .stack-card {
  width: min(180px, 100%);
  border-radius: 10px;
  overflow: visible;
}
.presentation-viewer-modal .stack-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transform: none !important;
  filter: drop-shadow(0 12px 24px rgba(45,34,28,.14));
}
.presentation-viewer-modal .stack-card:hover {
  z-index: 100;
}
.presentation-viewer-modal .stack-card:hover img,
.presentation-viewer-modal .stack-card.rare-card:hover::after {
  transform: translateY(-6px) scale(1.18) !important;
  transform-origin: 50% 35%;
}
.presentation-viewer-note {
  margin: 0 !important;
  text-align: center;
  font-size: 8px !important;
}

@media (min-width: 1050px) and (max-width: 1399px) {
  .match-multiplayer-230 .match-layout-120 {
    grid-template-columns: 188px minmax(0, 1fr) 228px !important;
    gap: 10px !important;
  }
  .match-multiplayer-230 .match-right-rail {
    grid-column: auto !important;
    min-height: 0 !important;
  }
  .multiplayer-opponent-strip .network-board-actions { gap: 4px; }
  .multiplayer-opponent-strip .view-presentation-btn {
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 1049px) {
  .match-multiplayer-230 .match-right-rail {
    grid-column: 1 / -1;
    min-height: 430px;
    height: auto;
    grid-template-rows: minmax(320px, 1fr) auto;
  }
  .match-multiplayer-230 .match-main-120 {
    grid-template-rows: auto auto auto auto auto !important;
  }
  .presentation-viewer-overlay { overflow: auto !important; padding: 10px !important; }
  .presentation-viewer-modal {
    height: auto !important;
    min-height: calc(100vh - 20px);
    overflow: visible !important;
    padding: 54px 18px 26px !important;
  }
  .presentation-viewer-slots { grid-template-columns: 1fr; }
  .presentation-viewer-modal .network-slot { min-height: 360px; }
}

@media (max-width: 760px) {
  .match-multiplayer-230 .match-right-rail { grid-column: auto; }
  .presentation-viewer-header { display: grid; }
  .presentation-viewer-score { min-width: 92px; font-size: 30px; }
  .presentation-viewer-modal .network-slot.campaign-stack {
    grid-template-columns: 1fr 120px;
  }
  .presentation-viewer-modal .stack-cards { width: 120px; }
  .presentation-viewer-modal .stack-card { width: 110px; }
}

/* 2.3 viewer sizing correction: renderCampaignStack writes an inline live-table
   height, so the full-screen viewer deliberately overrides it. */
.presentation-viewer-modal .stack-cards {
  height: min(410px, 55vh) !important;
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.4 — INTERACTION POLISH + VERTICAL CAMPAIGN HOVER       */
/* ========================================================================== */

/* Canonical launch-set department colors sampled from the final card art. */
.match-multiplayer-240 {
  --agency-account-green: #67C18B;
  --agency-art-red: #F03745;
  --hand-rest-card-width: 112px;
}

/* Current-turn language should read instantly as a positive live-state cue. */
.match-multiplayer-240 .current-turn-label {
  color: var(--agency-account-green) !important;
  font-weight: 950 !important;
}

/* Voluntary Campaign kills use the Art-card red rather than the older muted
   utility red, keeping gameplay actions inside the established card palette. */
.match-multiplayer-240 .mini-danger.kill-campaign {
  border-color: var(--agency-art-red) !important;
  color: var(--agency-art-red) !important;
  background: rgba(240,55,69,.045) !important;
}
.match-multiplayer-240 .mini-danger.kill-campaign:hover:not(:disabled) {
  border-color: var(--agency-art-red) !important;
  color: var(--agency-art-red) !important;
  background: rgba(240,55,69,.13) !important;
}

/* Opponent names need a little real line box beneath the baseline. The old
   ultra-tight line-height plus overflow containment clipped descenders (g/y/p). */
.match-multiplayer-240 .multiplayer-opponent-strip .network-board-head > div:first-child {
  overflow: visible !important;
}
.match-multiplayer-240 .multiplayer-opponent-strip .network-board.opponent .network-board-head h2 {
  line-height: 1.16 !important;
  padding-bottom: 2px !important;
}

/* Deck + Discard now read as two physical card piles beside the Hand. Deck is
   left, Discard is right, and each visible card matches the Hand's resting card
   width at the current breakpoint. */
.match-multiplayer-240 .private-hand-workspace {
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--hand-rest-card-width) + var(--hand-rest-card-width) + 26px) !important;
  gap: 12px !important;
}
.match-multiplayer-240 .private-hand-resources {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
  align-items: start !important;
}
.match-multiplayer-240 .private-hand-resources .hand-resource-pile {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 6px 5px 5px !important;
  grid-template-rows: auto auto auto !important;
  overflow: visible !important;
}
.match-multiplayer-240 .private-hand-resources .pile-top-card,
.match-multiplayer-240 .private-hand-resources .hand-deck-stack {
  width: var(--hand-rest-card-width) !important;
  max-height: none !important;
  margin: 5px auto 0 !important;
  aspect-ratio: 5 / 7 !important;
}
.match-multiplayer-240 .private-hand-resources .hand-deck-stack img {
  width: var(--hand-rest-card-width) !important;
  height: 100% !important;
  aspect-ratio: 5 / 7 !important;
  object-fit: cover !important;
}
.match-multiplayer-240 .private-hand-resources .pile-top-card img {
  width: 100% !important;
  height: 100% !important;
}
.match-multiplayer-240 .private-hand-resources .pile-empty {
  width: var(--hand-rest-card-width) !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 5 / 7 !important;
  margin: 5px auto 0 !important;
  border: 1px dashed rgba(26,23,21,.13);
  border-radius: 6px;
}
.match-multiplayer-240 .private-hand-resources .hand-pile-count {
  margin-top: 5px !important;
  min-height: 16px !important;
  font-size: 7px !important;
  line-height: 1.12 !important;
}

/* JS now owns Campaign-stack magnification using the same stationary-hitbox
   principle as the Hand. Disable all legacy nested :hover transforms on the
   live table so overlapping transforms cannot fight the vertical selector. */
.match-multiplayer-240 .match-main-120 .network-slot.campaign-stack .stack-card:hover,
.match-multiplayer-240 .match-main-120 .network-slot.campaign-stack .stack-card:hover img,
.match-multiplayer-240 .match-main-120 .network-slot.campaign-stack .stack-card.rare-card:hover::after,
.match-multiplayer-240 .multiplayer-opponent-strip .network-board.opponent .stack-card:hover,
.match-multiplayer-240 .multiplayer-opponent-strip .network-board.opponent .stack-card:hover img,
.match-multiplayer-240 .multiplayer-opponent-strip .network-board.opponent .stack-card.rare-card:hover::after {
  transform: none !important;
  filter: none !important;
}
.match-multiplayer-240 .match-main-120 .network-slot.campaign-stack .stack-card:hover {
  z-index: auto !important;
}
.match-multiplayer-240 .match-main-120 .network-slot.campaign-stack .stack-card.rare-card:hover::after {
  opacity: 0 !important;
  animation: none !important;
}

.campaign-hover-portal {
  position: fixed;
  z-index: 12000;
  display: block;
  pointer-events: none;
  isolation: isolate;
}
.campaign-hover-portal-card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(39,29,24,.34);
}
.campaign-hover-portal-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  image-rendering: auto;
  transform: none !important;
  filter: none !important;
}
.campaign-hover-portal-card.rare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 16%,
      rgba(255,90,180,.12) 31%,
      rgba(120,225,255,.42) 42%,
      rgba(255,255,255,.72) 49%,
      rgba(255,235,105,.28) 55%,
      rgba(170,120,255,.18) 64%,
      transparent 78%),
    linear-gradient(125deg,
      transparent 20%,
      rgba(255,0,128,.13),
      rgba(0,255,255,.13),
      rgba(255,235,0,.13),
      transparent 78%);
  background-size: 250% 100%, 220% 100%;
  mix-blend-mode: screen;
  animation: onlineRareShimmer135 5s linear infinite;
}
.campaign-hover-portal-card.rare-card img {
  filter: saturate(1.16) brightness(1.03) !important;
}

/* A modal is an intentional interaction lock. Kill every card magnifier while
   one is open and guarantee the modal plane sits above card-flight portals. */
body.game-overlay-open .game-overlay {
  z-index: 20000 !important;
}
body.game-overlay-open #hand-hover-portal,
body.game-overlay-open #campaign-hover-portal {
  display: none !important;
}
body.game-overlay-open .match-main-120 .stack-card:hover img,
body.game-overlay-open .private-hand-card:hover img {
  transform: none !important;
  filter: none !important;
}
body.game-overlay-open .match-main-120 .stack-card.rare-card:hover::after,
body.game-overlay-open .private-hand-card.rare-card:hover::after {
  transform: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Acting Agency waiting state during another Agency's Edit > Undo decision. */
.undo-actor-waiting {
  width: min(520px, 82vw);
  padding: 12px 4px 8px;
  text-align: center;
}
.undo-actor-waiting h2 {
  margin: 8px auto 8px !important;
  max-width: 430px;
  font-size: clamp(25px, 3vw, 38px) !important;
  line-height: 1.02 !important;
}
.undo-actor-waiting .private-note {
  max-width: 390px;
  margin-inline: auto !important;
}
.undo-thinking-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}
.undo-thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #171512;
  opacity: .24;
  animation: agencyUndoThinking 1.05s ease-in-out infinite;
}
.undo-thinking-dots span:nth-child(2) { animation-delay: .14s; }
.undo-thinking-dots span:nth-child(3) { animation-delay: .28s; }
@keyframes agencyUndoThinking {
  0%, 70%, 100% { transform: translateY(0); opacity: .24; }
  35% { transform: translateY(-5px); opacity: .9; }
}

@media (min-width: 1100px) and (min-aspect-ratio: 8/5) {
  .match-multiplayer-240 { --hand-rest-card-width: 90px; }
}

@media (max-width: 760px) {
  .match-multiplayer-240 { --hand-rest-card-width: 92px; }
  .match-multiplayer-240 .private-hand-workspace {
    grid-template-columns: 1fr !important;
  }
  .match-multiplayer-240 .private-hand-resources {
    width: calc(var(--hand-rest-card-width) + var(--hand-rest-card-width) + 10px);
    max-width: 100%;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-hover-portal-card.rare-card::after,
  .undo-thinking-dots span {
    animation: none !important;
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.4.1 — RESPONSIVE HAND + VIEWER STACK POLISH            */
/* ========================================================================== */

/* Keep Deck + Discard fully contained inside YOUR PRIVATE HAND. 2.4 matched
   their card size to the Hand, but the extra pile labels/counts could exceed
   the shortest 4-player Hand track. Give the Hand a real content floor and
   let the resources size to their contents instead of a constrained 100%. */
.match-multiplayer-241 .private-hand-panel {
  min-height: 226px !important;
}
.match-multiplayer-241 .private-hand-workspace {
  min-height: 166px;
  align-items: start !important;
}
.match-multiplayer-241 .private-hand-resources {
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
}
.match-multiplayer-241 .private-hand-resources .hand-resource-pile {
  box-sizing: border-box;
}

/* One-row Hand at every desktop/tablet width. The normal shell lane stays at
   its established width until space gets tight; then every lane except the
   final one is allowed to shrink. Since the card art itself stays full-size,
   shrinking lanes means progressively more overlap rather than a wrap. The
   final lane remains fixed so the last card's right edge stays contained. */
.match-multiplayer-241 .private-hand-workspace .private-hand-grid {
  flex-wrap: nowrap !important;
  width: 100%;
  min-width: 0;
}
.match-multiplayer-241 .private-hand-workspace .hand-card-shell {
  flex-shrink: 1 !important;
  min-width: 28px;
}
.match-multiplayer-241 .private-hand-workspace .hand-card-shell:last-child {
  flex-shrink: 0 !important;
}

/* The full-screen View Presentation now uses the same stationary-hitbox /
   floating-preview system as the live table. Turn off its older nested hover
   scale so the vertical lanes remain stable from Campaign through every Idea. */
.presentation-viewer-open .presentation-viewer-modal .stack-card:hover,
.presentation-viewer-open .presentation-viewer-modal .stack-card:hover img,
.presentation-viewer-open .presentation-viewer-modal .stack-card.rare-card:hover::after {
  transform: none !important;
  filter: none !important;
}
.presentation-viewer-open .presentation-viewer-modal .stack-card.rare-card:hover::after {
  opacity: 0 !important;
  animation: none !important;
}
body.game-overlay-open.presentation-viewer-open #campaign-hover-portal {
  display: block !important;
}
.presentation-viewer-hover-portal {
  z-index: 22000 !important;
}


@media (min-width: 1050px) {
  .match-multiplayer-241.match-players-4 .match-main-120 {
    grid-template-rows: minmax(200px, 1.20fr) minmax(218px, 1fr) minmax(236px, .90fr) 44px 12px !important;
  }
  .match-multiplayer-241.match-players-3 .match-main-120 {
    grid-template-rows: minmax(190px, 1.05fr) minmax(230px, 1.08fr) minmax(236px, .94fr) 44px 12px !important;
  }
  .match-multiplayer-241.match-players-2 .match-main-120 {
    grid-template-rows: minmax(176px, .86fr) minmax(248px, 1.18fr) minmax(236px, 1fr) 44px 12px !important;
  }
}

/* At genuinely short wide-table viewports, the resource cards need a little
   more guaranteed vertical room than 2.3's original compact Hand track. */
@media (min-width: 1050px) and (min-aspect-ratio: 8/5) {
  .match-multiplayer-241 .private-hand-panel {
    min-height: 236px !important;
  }
}

@media (max-width: 760px) {
  .match-multiplayer-241 .private-hand-workspace .hand-card-shell {
    min-width: 22px;
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.4.2 — RESOURCE CONTAINMENT + VIEWER HOVER HARDENING   */
/* ========================================================================== */

/* 2.4.1 increased the Hand track, but the 1.3 responsive system still gave
   the workspace height:calc(100% - 48px). That percentage was being measured
   against the grid track before the heading / allowances / waiting copy had
   taken their own space, so the physical Deck and Discard could still fall
   through the bottom edge. In 2.4.2 the Hand is content-sized again: the pile
   cards participate in normal layout and the grid track grows when required. */
.match-multiplayer-242 .private-hand-panel {
  height: auto !important;
  min-height: 270px !important;
  box-sizing: border-box;
  padding-bottom: 14px !important;
}
.match-multiplayer-242 .private-hand-workspace {
  height: auto !important;
  min-height: 170px !important;
  align-items: start !important;
  box-sizing: border-box;
}
.match-multiplayer-242 .private-hand-resources {
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
  padding-bottom: 1px;
}

/* Reserve the real content height in the center-column grid instead of asking
   the resource cards to visually overflow a shorter Hand row. If this makes a
   short laptop viewport scroll a little, that is preferable to game pieces
   crossing module boundaries. */
@media (min-width: 1050px) {
  .match-multiplayer-242.match-players-4 .match-main-120 {
    grid-template-rows: minmax(188px, 1.12fr) minmax(208px, .98fr) minmax(270px, 1.02fr) 44px 12px !important;
  }
  .match-multiplayer-242.match-players-3 .match-main-120 {
    grid-template-rows: minmax(182px, 1.02fr) minmax(220px, 1.04fr) minmax(270px, 1.04fr) 44px 12px !important;
  }
  .match-multiplayer-242.match-players-2 .match-main-120 {
    grid-template-rows: minmax(170px, .82fr) minmax(236px, 1.10fr) minmax(270px, 1.08fr) 44px 12px !important;
  }
}

/* The full-screen viewer uses the JS portal exclusively. Generic overlay
   rules from the base game intentionally suppress hover portals; these more
   specific declarations guarantee the read-only Presentation viewer is the
   one modal where Campaign magnification remains enabled. */
body.game-overlay-open.presentation-viewer-open #campaign-hover-portal.presentation-viewer-hover-portal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 22000 !important;
}
.presentation-viewer-open .presentation-viewer-modal .stack-cards[data-campaign-hover-stack="true"] {
  cursor: ns-resize;
  touch-action: none;
}
.presentation-viewer-open .presentation-viewer-modal .stack-card,
.presentation-viewer-open .presentation-viewer-modal .stack-card img {
  pointer-events: auto !important;
}

@media (max-width: 1049px) {
  .match-multiplayer-242 .private-hand-panel {
    min-height: 270px !important;
  }
}

/* ========================================================================== */
/* MULTIPLAYER ALPHA 2.5 — RELEASE CANDIDATE POLISH                           */
/* ========================================================================== */

/* RC polish: PRIVATE TO YOU is a status chip, not flowing text. Use an actual
   centering layout so the label sits optically and mathematically centered in
   its outline at every browser zoom / font-rendering combination. */
.match-multiplayer-250 .private-lock {
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  min-height: 28px;
  padding: 0 9px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap;
  align-self: start;
}

/* RC polish: each Deck / Discard shell now receives exactly enough horizontal
   room for one resting Hand-size card plus its 5px side padding and borders.
   Earlier builds sized the two-column rail a few pixels too narrowly, which
   made the fixed-width dashed Discard outline appear off-center even though it
   had margin:auto. */
.match-multiplayer-250 .private-hand-workspace {
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--hand-rest-card-width) + var(--hand-rest-card-width) + 34px) !important;
}
.match-multiplayer-250 .private-hand-resources {
  justify-items: stretch !important;
}
.match-multiplayer-250 .private-hand-resources .hand-resource-pile {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  box-sizing: border-box !important;
}
.match-multiplayer-250 .private-hand-resources .hand-resource-pile > .eyebrow,
.match-multiplayer-250 .private-hand-resources .hand-pile-count {
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
}
.match-multiplayer-250 .private-hand-resources .pile-empty,
.match-multiplayer-250 .private-hand-resources .pile-top-card,
.match-multiplayer-250 .private-hand-resources .hand-deck-stack {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* When the Hand/resource workspace collapses to one column, don't preserve the
   desktop rail width. Keep the two physical piles together and centered at the
   right edge exactly as 2.4 established. */
@media (max-width: 760px) {
  .match-multiplayer-250 .private-hand-workspace {
    grid-template-columns: 1fr !important;
  }
  .match-multiplayer-250 .private-hand-resources {
    width: calc(var(--hand-rest-card-width) + var(--hand-rest-card-width) + 34px) !important;
    max-width: 100%;
    justify-self: end;
  }
}

/* ========================================================================== */
/* ALPHA 3.0 — SOLO PLAY / COMPUTER AGENCY                                   */
/* ========================================================================== */

.site-redesign-130 .solo-mode-card {
  margin: 0 0 18px;
  border: 1px solid rgba(25,22,20,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 34px rgba(74,55,44,.07);
  backdrop-filter: blur(12px);
  padding: clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.28fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: start;
}
.site-redesign-130 .solo-mode-copy h2 {
  margin: 7px 0 8px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: .98;
  letter-spacing: -.035em;
}
.site-redesign-130 .solo-mode-copy p {
  margin: 0;
  max-width: 420px;
  color: #6f6862;
  font-size: 13px;
  line-height: 1.5;
}
.site-redesign-130 .solo-mode-controls .field:first-child { margin-top: 0; }
.site-redesign-130 .solo-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.site-redesign-130 .solo-difficulty-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.site-redesign-130 .solo-difficulty-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site-redesign-130 .solo-difficulty-option span {
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(25,22,20,.14);
  border-radius: 5px;
  background: rgba(255,255,255,.52);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.site-redesign-130 .solo-difficulty-option strong {
  color: #171512;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.site-redesign-130 .solo-difficulty-option small {
  color: #746d66;
  font-size: 9px;
  line-height: 1.25;
}
.site-redesign-130 .solo-difficulty-option:hover span {
  transform: translateY(-1px);
  background: rgba(255,255,255,.78);
}
.site-redesign-130 .solo-difficulty-option input:checked + span {
  border-color: #171512;
  background: #171512;
  box-shadow: 0 6px 16px rgba(23,21,18,.14);
}
.site-redesign-130 .solo-difficulty-option input:checked + span strong,
.site-redesign-130 .solo-difficulty-option input:checked + span small { color: #fff; }
.site-redesign-130 .multiplayer-entry-grid { margin-top: 0; }

.computer-agency-chip {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  margin-top: 8px;
  padding: 0 7px;
  border: 1px solid rgba(25,22,20,.18);
  border-radius: 3px;
  background: rgba(255,255,255,.55);
  color: #4e4842;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agency-card.computer-agency .computer-agency-chip { margin-bottom: 1px; }

.match-alpha-300 .computer-agency-chip {
  margin-top: 5px;
  border-color: rgba(15,15,14,.16);
  background: rgba(253,247,244,.78);
  color: #383431;
}
.match-alpha-300 .computer-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0 7px;
  color: #69625d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.match-alpha-300 .computer-thinking::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67C18B;
  box-shadow: 0 0 0 0 rgba(103,193,139,.35);
  animation: computer-thinking-pulse 1.25s ease-out infinite;
}
@keyframes computer-thinking-pulse {
  0% { box-shadow: 0 0 0 0 rgba(103,193,139,.42); opacity: .72; }
  60% { box-shadow: 0 0 0 6px rgba(103,193,139,0); opacity: 1; }
  100% { box-shadow: 0 0 0 6px rgba(103,193,139,0); opacity: .72; }
}

@media (max-width: 820px) {
  .site-redesign-130 .solo-mode-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-redesign-130 .solo-difficulty-grid { grid-template-columns: 1fr; }
  .site-redesign-130 .solo-difficulty-option span { min-height: 54px; }
}