.mtgsim-container {
  max-width: 1200px;
}

.changelog-entry {
  text-align: left;
}

.changelog-entry h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-transform: none;
}

.changelog-date {
  font-size: 0.75rem;
  color: rgba(240, 230, 255, 0.5);
  font-weight: normal;
}

.changelog-section-name {
  font-size: 0.8rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.changelog-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 8px 0;
}

.changelog-list li {
  padding: 3px 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.changelog-prose {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 6px 0;
}

.mtgsim-auth-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(240, 230, 255, 0.6);
}

.mtgsim-auth-bar a {
  color: var(--accent);
  text-decoration: none;
}

/* Role-based name colours in the auth bar */
.auth-name { font-weight: 600; }
.auth-name--owner      { color: #e8b4ff; text-shadow: 0 0 8px rgba(232, 180, 255, 0.5); }
.auth-name--archmage   { color: #ffd700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
.auth-name--deckbuilder { color: #a0c8ff; }
.auth-name--playtester  { color: #80e8a0; }

.catalog-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-toolbar input,
.catalog-toolbar select {
  background: var(--main-bg);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
}

.catalog-toolbar input {
  flex: 1;
  min-width: 200px;
}

.catalog-meta {
  font-size: 0.8rem;
  color: rgba(240, 230, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.mtg-card-tile {
  position: relative;
  background-color: var(--card-bg);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mtg-card-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 0 15px var(--accent-transparent);
}

.mtg-card-tile img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.03);
}

.mtg-zoomable {
  cursor: zoom-in;
}

.mtg-card-tile .mtg-card-noart {
  width: 100%;
  aspect-ratio: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(240, 230, 255, 0.4);
  padding: 8px;
}

.mtg-card-tile-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mtg-card-name {
  font-size: 0.85rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-blurb {
  font-size: 0.85rem;
  color: rgba(240, 230, 255, 0.65);
  line-height: 1.5;
}

.pack-wallet {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin: 8px 0;
}

.pack-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.pack-toolbar select,
.pack-toolbar input {
  background: var(--main-bg);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
}

.pack-toolbar input {
  flex: 1;
  min-width: 200px;
}

.pack-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pack-open-free {
  opacity: 0.8;
}

.pack-error {
  color: #ff8080;
}

.pack-reveal {
  min-height: 20px;
  margin-bottom: 24px;
}

.pack-reveal-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  color: var(--accent);
  margin: 8px 0;
}

.pack-collection-heading {
  margin-top: 28px;
}

.pack-card-set {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(240, 230, 255, 0.5);
}

.pack-collection-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pack-sell-row {
  display: flex;
  justify-content: center;
}

.pack-sell-btn {
  width: 100%;
  font-size: 0.75rem;
  padding: 4px 6px;
}

.pack-sell-noop {
  font-size: 0.7rem;
  color: rgba(240, 230, 255, 0.35);
  text-align: center;
}

.mtg-card-tile.pack-rarity-uncommon { border-color: #a8c4d8; }
.mtg-card-tile.pack-rarity-rare { border-color: #d8b84a; }
.mtg-card-tile.pack-rarity-mythic { border-color: #ff9a4d; box-shadow: 0 0 18px 2px rgba(255, 140, 60, 0.45); }

.pack-qty-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(5, 5, 10, 0.8);
  color: var(--text-color);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 0.7rem;
}

.pack-foil-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #d8b84a, #e8b4ff, #a0c8ff);
  color: #05050a;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 1;
}

.pack-art-wrap {
  position: relative;
  display: block;
}

.pack-foil-star {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 1;
  font-size: 0.9rem;
  color: #ffe27a;
  text-shadow: 0 0 4px rgba(255, 210, 90, 0.9), 0 0 10px rgba(255, 180, 60, 0.6);
  pointer-events: none;
}

/* CSS-generated foil sheen, applied whenever card.foil is true - real card
   photography doesn't reliably look shiny on its own even for an actual
   foil printing, so this is what makes "foil" show up consistently instead
   of depending on how glossy that one photo happened to come out. */
.is-foil::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* repeating-linear-gradient (not a plain one) so the pattern truly
     continues past its own 100% mark instead of holding solid at the last
     stop - moving background-position by exactly one background-size's
     worth (220%, matching below) then lines up perfectly with the start,
     so the loop has no visible seam/jump. */
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0%, rgba(255, 255, 255, 0.05) 8%,
    rgba(255, 90, 190, 0.35) 20%, rgba(255, 210, 90, 0.35) 32%,
    rgba(120, 255, 170, 0.35) 44%, rgba(90, 190, 255, 0.35) 56%,
    rgba(210, 120, 255, 0.35) 68%, rgba(255, 255, 255, 0.05) 82%, transparent 100%
  );
  background-size: 220% 220%;
  mix-blend-mode: overlay;
  animation: foil-shimmer 3.5s linear infinite;
}

@keyframes foil-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 220% 220%; }
}

.pack-progress {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(240, 230, 255, 0.6);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pack-flip-stage {
  display: flex;
  justify-content: center;
  perspective: 1200px;
  margin: 12px 0;
  cursor: pointer;
}

.pack-flip-card {
  position: relative;
  width: min(70vw, 260px);
  aspect-ratio: 5 / 7;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1);
  transform-style: preserve-3d;
}

.pack-flip-card.is-flipped {
  transform: rotateY(180deg);
}

.pack-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--card-radius);
  border: var(--thin-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-flip-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-flip-back {
  background: radial-gradient(circle at center, rgba(120, 60, 160, 0.4), rgba(10, 8, 20, 0.95));
}

.pack-flip-crest {
  font-size: 3rem;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent-transparent);
}

.pack-flip-front {
  transform: rotateY(180deg);
}

.pack-flip-caption {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(240, 230, 255, 0.7);
  min-height: 2.4em;
  line-height: 1.5;
}

.pack-mythic-label {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #ff8a3d, #ffd76a, #ff8a3d);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mythic-shimmer 2s linear infinite;
}

@keyframes mythic-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes mythic-glow {
  0%, 100% { box-shadow: 0 0 20px 4px rgba(255, 140, 60, 0.5), 0 0 45px 10px rgba(255, 140, 60, 0.2); }
  50% { box-shadow: 0 0 34px 9px rgba(255, 176, 102, 0.85), 0 0 75px 18px rgba(255, 140, 60, 0.4); }
}

.pack-flip-card.is-mythic {
  animation: mythic-glow 1.6s ease-in-out infinite;
  border-radius: var(--card-radius);
}

.pack-flip-card.is-mythic .pack-flip-face {
  border-color: #ffb066;
}

.pack-card-price {
  font-size: 0.75rem;
  color: #ffd76a;
  font-weight: 600;
}

.mtg-card-tile.pack-unowned {
  opacity: 0.55;
}

.mtg-card-tile.pack-unowned img {
  filter: grayscale(0.85);
}

.mtg-card-tile.pack-unowned:hover {
  opacity: 0.85;
}

.pack-unowned-label {
  color: rgba(240, 230, 255, 0.4);
  font-weight: 400;
  font-style: italic;
}

.mtg-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  padding: 24px;
}

.mtg-lightbox-overlay.hidden {
  display: none;
}

.mtg-lightbox-overlay img {
  max-width: min(90vw, 500px);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.printings-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 24px;
}

.printings-modal.hidden {
  display: none;
}

.printings-modal-inner {
  background: var(--card-bg);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  max-width: min(94vw, 800px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.printings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: var(--thin-border);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.printings-modal-search {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 180, 255, 0.2);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.8rem;
  padding: 5px 10px;
  outline: none;
  width: 180px;
  text-transform: none;
  letter-spacing: 0;
}

.printings-modal-search::placeholder {
  color: rgba(240, 230, 255, 0.3);
}

.printings-modal-search:focus {
  border-color: rgba(200, 180, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
}

.printings-modal-close {
  background: none;
  border: none;
  color: rgba(240, 230, 255, 0.5);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  line-height: 1;
}

.printings-modal-close:hover {
  color: var(--text-color);
}

.printings-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}

.printing-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.printing-tile img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
}

.printing-tile:hover img {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-transparent);
}

.printing-tile.selected img {
  border-color: var(--success-color);
  box-shadow: 0 0 10px var(--success-color);
}

.printing-tile-meta {
  font-size: 0.65rem;
  color: rgba(240, 230, 255, 0.55);
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Battle-row tiles stay small (many need to fit on screen), so hovering any
   of them shows a bigger, easier-to-read floating copy instead - separate
   from the click-to-enlarge lightbox (which is for browsing outside a game)
   so it doesn't interfere with click-to-play/click-to-target. */
.mtg-hover-preview {
  position: fixed;
  z-index: 900;
  pointer-events: none;
}

.mtg-hover-preview.hidden {
  display: none;
}

.mtg-hover-preview img {
  width: 260px;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.mtg-unsupported-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: var(--error-color);
  color: white;
  font-size: 0.65rem;
  font-weight: bold;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
}

.mtg-unsupported-card {
  opacity: 0.85;
}

.mtg-card-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  align-self: flex-start;
}

.mtg-card-status.supported {
  color: var(--success-color);
  background: rgba(46, 213, 115, 0.12);
}

.mtg-card-status.unsupported {
  color: var(--warning-color);
  background: rgba(255, 165, 2, 0.12);
}

.catalog-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.catalog-pagination button {
  background: var(--card-bg);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;
}

.catalog-pagination button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.catalog-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.card label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(240, 230, 255, 0.7);
}

.card select,
.card textarea,
.card input[type="text"] {
  width: 100%;
  background: var(--main-bg);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 8px;
  font-family: inherit;
  font-size: 0.9rem;
}

.card button {
  background: var(--accent-transparent);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 10px;
}

.import-lines {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
}

.import-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: var(--thin-border);
  font-size: 0.85rem;
}

.legality-issues {
  margin-top: 12px;
  text-align: left;
}

.legality-issue {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.legality-issue.error {
  background: rgba(255, 71, 87, 0.12);
  color: var(--error-color);
}

.legality-issue.warning {
  background: rgba(255, 165, 2, 0.12);
  color: var(--warning-color);
}

.legality-issue.ok {
  background: rgba(46, 213, 115, 0.12);
  color: var(--success-color);
}

.deck-row, .precon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: var(--thin-border);
  text-align: left;
}

.deck-card-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.deck-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 6px 0 10px;
}

.deck-card-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.deck-card-tile img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.deck-card-tile .deck-card-noart {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 63 / 88;
  padding: 6px;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(240, 230, 255, 0.6);
}

.deck-card-qty {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(8, 6, 4, 0.85);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
}

.deck-card-tile .deck-art-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(8, 6, 4, 0.75);
}

.deck-card-tile.mtg-unsupported-card::after {
  content: 'not yet supported';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.6rem;
  text-align: center;
  padding: 2px 4px;
}

.deck-section-label {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-top: 8px;
  display: block;
}

.deck-art-btn {
  background: none;
  border: 1px solid rgba(240, 230, 255, 0.2);
  border-radius: 3px;
  color: rgba(240, 230, 255, 0.45);
  font-size: 0.6rem;
  font-family: inherit;
  padding: 1px 5px;
  cursor: pointer;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.deck-art-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.deck-view {
  text-align: left;
  font-size: 0.85rem;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--card-radius);
  line-height: 1.6;
}

.precon-name {
  font-size: 0.95rem;
}

.precon-meta {
  font-size: 0.75rem;
  color: rgba(240, 230, 255, 0.6);
  margin-top: 2px;
}

/* ══════════════════════════════════════════
   GAME BOARD — full-screen overlay layout
   ══════════════════════════════════════════ */

#game-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: radial-gradient(ellipse at 50% 30%, #221610 0%, #1c130f 70%);
  display: grid;
  grid-template-rows: 1fr auto 1fr 160px;
  overflow: hidden;
}

/* ── Zone containers ── */

#opponent-zone {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 6px;
  gap: 6px;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 154, 68, 0.15);
}

#player-zone {
  display: flex;
  flex-direction: column-reverse;
  padding: 6px 16px 10px;
  gap: 6px;
  overflow: hidden;
  border-top: 1px solid rgba(201, 154, 68, 0.15);
}

#game-midrow {
  display: grid;
  grid-template-columns: 180px 1fr 230px;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(8, 4, 2, 0.4);
  border-top: 1px solid rgba(201, 154, 68, 0.12);
  border-bottom: 1px solid rgba(201, 154, 68, 0.12);
  align-items: start;
}

#hand-row {
  display: flex;
  align-items: flex-end;
  padding: 10px 16px 14px;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(201, 154, 68, 0.2);
}

/* ── Player info bars ── */

.player-info-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 2px 0;
}

.player-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.player-life {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 600;
  line-height: 1;
}

.player-life-label {
  font-size: 0.58rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 2px;
}

.player-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
}

.mana-pool-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.mana-pip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: bold;
  flex-shrink: 0;
  overflow: hidden;
}

.mana-pip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Sits over the letter fallback; if the remote SVG 404s/fails to load,
     the browser just shows nothing here and the letter behind it stays visible. */
}

.mana-pip.W { background: #f0e8d0; color: #4a3820; }
.mana-pip.U { background: #1a5fa0; color: #fff; }
.mana-pip.B { background: #18101e; color: #b8a8c8; border: 1px solid rgba(255,255,255,0.2); }
.mana-pip.R { background: #b03018; color: #fff; }
.mana-pip.G { background: #1e6828; color: #fff; }
.mana-pip.C { background: #707080; color: #fff; }

/* ── Battlefield rows ── */

.battlefield-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  flex: 1;
  min-height: 60px;
  overflow: hidden;
}

/* ── Battle cards (battlefield) ── */

.mtg-battle-card {
  position: relative;
  width: 80px;
  height: 112px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(201, 154, 68, 0.18);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  background: rgba(44, 29, 22, 0.85);
  flex-shrink: 0;
}

.mtg-battle-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mtg-battle-card .mtg-card-noart {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  text-align: center;
  padding: 4px;
  color: rgba(240, 224, 200, 0.6);
  line-height: 1.3;
}

.mtg-battle-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  z-index: 10;
}

.mtg-battle-card.tapped {
  transform: rotate(90deg) translateX(16px);
  margin-right: 36px; /* compensate for the extra width after rotation so cards don't overlap */
}

.mtg-battle-card.tapped:hover {
  transform: rotate(90deg) translateX(16px) translateY(-6px);
}

/* Land row sits below non-land permanents, separated by a subtle line */
.land-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(201, 154, 68, 0.12);
  align-items: flex-start;
}

/* Opponent's lands render FIRST (see game.js's renderOpponentZone) so they
   sit at the outer edge of the table, mirrored against the player's own
   lands at the bottom - the divider line flips to the other edge to match. */
.land-row--opponent {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 154, 68, 0.12);
}

.mtg-battle-card.selected {
  border-color: var(--success-color);
  box-shadow: 0 0 12px var(--success-color);
}

.mtg-battle-card.playable {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(201,154,68,0.55);
  animation: mtg-playable-pulse 1.6s ease-in-out infinite;
}

@keyframes mtg-playable-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(201,154,68,0.45); }
  50% { box-shadow: 0 0 16px rgba(201,154,68,0.85); }
}

.mtg-battle-card.face-down {
  background: repeating-linear-gradient(45deg, rgba(0,80,140,0.2), rgba(0,80,140,0.2) 6px, rgba(0,0,0,0.25) 6px, rgba(0,0,0,0.25) 12px);
}

.mtg-battle-card.valid-target {
  border-color: var(--success-color);
  box-shadow: 0 0 14px rgba(131,167,101,0.7);
  animation: target-pulse 1s ease-in-out infinite;
}

@keyframes target-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(131,167,101,0.5); }
  50% { box-shadow: 0 0 20px rgba(131,167,101,0.9); }
}

/* Makes it unmistakable what's attacking, especially for the defending
   player deciding how to block - a red pulsing glow visible at a glance,
   not just an incidental tap rotation (which vigilant attackers don't even
   show). */
.mtg-battle-card.is-attacking {
  border-color: var(--error-color);
  box-shadow: 0 0 16px rgba(200,60,60,0.75);
  animation: attacking-pulse 1.1s ease-in-out infinite;
}

@keyframes attacking-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(200,60,60,0.55); }
  50% { box-shadow: 0 0 22px rgba(200,60,60,0.95); }
}

.mtg-battle-card.is-blocking {
  border-color: var(--success-color);
  box-shadow: 0 0 12px rgba(131,167,101,0.6);
}

.mtg-flip-peek-btn {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(8, 6, 4, 0.85);
  color: var(--text-color);
  border: 1px solid rgba(201, 154, 68, 0.4);
  font-size: 0.7rem;
  line-height: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
}

.mtg-flip-peek-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mtg-attacking-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--error-color);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}

.mtg-pt {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(8, 6, 4, 0.88);
  color: var(--text-color);
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
}

.mtg-damage {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--error-color);
  color: white;
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
}

.mtg-commander-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--accent);
  color: #1c130f;
  font-size: 0.5rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.mtg-loyalty {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #2c5fa0;
  color: white;
  font-size: 0.8rem;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 4px;
  border-radius: 50%;
  font-weight: bold;
}

.mtg-counters {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(8, 6, 4, 0.88);
  color: var(--accent);
  font-size: 0.58rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
  max-width: calc(100% - 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtg-suspend-counter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8, 6, 4, 0.9);
  color: var(--accent);
  font-size: 0.52rem;
  text-align: center;
  padding: 2px;
}

.mtg-unsupported-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.35);
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Hand cards ── */

.hand-card {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(201, 154, 68, 0.22);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  background: rgba(44, 29, 22, 0.92);
  flex-shrink: 0;
}

.hand-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hand-card .mtg-card-noart {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  text-align: center;
  padding: 6px;
  color: rgba(240, 224, 200, 0.7);
  line-height: 1.3;
}

.hand-card:hover {
  transform: translateY(-26px) scale(1.06);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(0,0,0,0.75), 0 0 22px rgba(201,154,68,0.35);
  z-index: 20;
}

.hand-card.selected {
  border-color: var(--success-color);
  box-shadow: 0 0 16px var(--success-color);
  transform: translateY(-18px);
}

.hand-card.playable {
  border-color: rgba(201,154,68,0.7);
  box-shadow: 0 0 12px rgba(201,154,68,0.45);
  animation: hand-playable-pulse 1.9s ease-in-out infinite;
}

@keyframes hand-playable-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(201,154,68,0.35); }
  50% { box-shadow: 0 0 22px rgba(201,154,68,0.75); }
}

/* ── Midrow: stack zone ── */

#stack-zone {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(201,154,68,0.12);
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 60px;
}

.stack-zone-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 5px;
}

.stack-item {
  font-size: 0.74rem;
  color: var(--text-color);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stack-item:last-child { border-bottom: none; }

.stack-empty {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Midrow: turn zone ── */

#turn-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 0 8px;
}

.turn-line {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.step-line {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.priority-line {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.priority-line.your-priority {
  color: var(--success-color);
  font-weight: bold;
}

.mtg-reaction-countdown {
  font-size: 0.65rem;
  color: rgba(240, 224, 200, 0.38);
  font-style: italic;
  min-height: 1em;
}

/* ── Midrow: action zone ── */

#action-zone {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.action-btn {
  background: var(--accent-transparent);
  color: var(--text-color);
  border: 1px solid rgba(201,154,68,0.38);
  border-radius: 5px;
  padding: 7px 12px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
  width: 100%;
}

.action-btn:hover {
  background: rgba(201,154,68,0.3);
  border-color: var(--accent);
}

.action-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.action-btn.primary {
  background: rgba(201,154,68,0.28);
  border-color: var(--accent);
}

.action-btn.danger {
  border-color: rgba(168,70,90,0.5);
  color: rgba(240,200,210,0.85);
}

.pending-trigger-card {
  background: rgba(61,39,30,0.8);
  border: 1px solid rgba(201,154,68,0.3);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.73rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pending-trigger-card .action-btn {
  padding: 3px 8px;
  font-size: 0.62rem;
  width: auto;
}

/* ── Choice panel (replaces all prompt() calls) ── */

.choice-panel-backdrop {
  position: absolute;
  inset: 0;
  z-index: 599;
  background: rgba(0,0,0,0.52);
}

.choice-panel-backdrop.hidden { display: none; }

.choice-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  background: rgba(24, 15, 10, 0.98);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 22px 26px;
  min-width: 270px;
  max-width: 460px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.85), 0 0 28px rgba(201,154,68,0.12);
  text-align: center;
}

.choice-panel.hidden { display: none; }

.graveyard-link {
  cursor: pointer;
  text-decoration: underline dotted;
}

.graveyard-link:hover {
  color: var(--accent);
}

.zone-viewer-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  background: rgba(24, 15, 10, 0.98);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  width: min(90vw, 720px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 44px rgba(0,0,0,0.85), 0 0 28px rgba(201,154,68,0.12);
}

.zone-viewer-modal.hidden { display: none; }

.zone-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.zone-viewer-close {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
}

.zone-viewer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-y: auto;
}

.zone-viewer-empty {
  color: rgba(240, 230, 255, 0.5);
  font-size: 0.85rem;
}

.choice-panel-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.choice-panel-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

.choice-btn {
  background: rgba(61,39,30,0.65);
  border: 1px solid rgba(201,154,68,0.32);
  border-radius: 6px;
  color: var(--text-color);
  padding: 9px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.84rem;
  transition: background 0.14s, border-color 0.14s;
  text-align: left;
}

.choice-btn:hover {
  background: rgba(201,154,68,0.18);
  border-color: var(--accent);
}

.choice-number-input {
  background: var(--card-bg-solid);
  border: 1px solid rgba(201,154,68,0.4);
  border-radius: 5px;
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 8px 12px;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}

.choice-panel-cancel {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--font-body);
}

.choice-panel-cancel:hover { color: var(--text-color); }

/* ── Hint toast ── */

.hint-toast {
  position: absolute;
  bottom: 175px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 590;
  background: rgba(50,32,20,0.96);
  border: 1px solid var(--warning-color);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.78rem;
  color: var(--warning-color);
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint-toast.hidden { display: none; }

/* ── Game log panel (collapsible corner) ── */

.game-log-panel {
  position: absolute;
  bottom: 170px;
  right: 14px;
  z-index: 580;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.log-toggle {
  background: rgba(44,28,18,0.85);
  border: 1px solid rgba(201,154,68,0.28);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 0.62rem;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.log-toggle:hover { color: var(--text-color); border-color: var(--accent); }

.log-entries {
  background: rgba(12,7,4,0.94);
  border: 1px solid rgba(201,154,68,0.18);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
  width: 260px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.log-entries.hidden { display: none; }

.log-entry {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height: 1.4;
}

.log-entry:last-child { border-bottom: none; }

/* ── Seat switcher overlay ── */

.seat-switcher-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 510;
}

.seat-switcher-overlay .card {
  font-size: 0.75rem;
  padding: 8px 12px;
  text-align: left;
}

/* ── Game over overlay ── */

.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-over-box {
  background: rgba(24,15,10,0.98);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 40px 52px;
  text-align: center;
}

.game-over-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.game-over-winner {
  font-size: 1.05rem;
  color: var(--text-color);
  margin-bottom: 22px;
}

/* ── Suspended cards area ── */

.suspended-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.opponent-extra-zone {
  border-top: 1px solid rgba(201, 154, 68, 0.15);
  margin-top: 8px;
  padding-top: 8px;
}

.command-zone-area {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(120, 60, 180, 0.12);
  border: 1px solid rgba(180, 120, 255, 0.25);
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: top;
}

.command-zone-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(180, 140, 255, 0.7);
  white-space: nowrap;
}

.suspended-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 4px;
  flex-basis: 100%;
}

#sync-btn, #force-sync-btn, #precon-sync-btn {
  background: var(--accent-transparent);
  color: var(--text-color);
  border: var(--thin-border);
  border-radius: var(--card-radius);
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  margin-right: 8px;
}