: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; }
.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(300px, 68%); 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: 100%;
  margin-top: 0;
  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; }
}