/* MagicAIl Table — styles: playmats and the language switch.
   The styles are split into files in their old order (build 71, before: one style.css); index.html loads them in
   this order, so later rules still win over earlier ones. */

/* ---------- Playmats: a card's art in each player's box ---------- */

/* Positioned first in the box; everything else in the box is positioned too, so it lies above the picture. */
.zones { position: relative; }
.zones > .life,
.zones > .hand,
.zones > .zone-piles,
.zones > .card-total { position: relative; }

.playmat {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: center 30% / cover no-repeat;
  /* A little darker, so the numbers and cards in the box stay readable. 1px blur smooths the JPEG blocks. */
  filter: blur(1px) brightness(0.5);
  clip-path: inset(0 round var(--radius));
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

.playmat.ready { opacity: 1; }

/* Soft scanlines over the picture (own layer, so the blur doesn't smear them): one soft line every 6 px. */
.playmat-lines {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: repeating-linear-gradient(to bottom, transparent 0 3.5px, rgba(0, 0, 0, 0.26) 4.75px, transparent 6px);
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

.playmat.ready + .playmat-lines { opacity: 1; }

/* The card name (or "Playmat"), small in the box's top right corner: a click opens the little window. */
.playmat-name {
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 2;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
  border: none;
  background: none;
  font: 10px/12px var(--font-body);
  color: rgba(232, 226, 210, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.playmat-name:hover,
.playmat-name:focus-visible { color: var(--gold); text-decoration: underline; }

.playmat-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.playmat-menu-name { font-weight: 600; text-align: center; }
.playmat-menu-row { display: flex; gap: 8px; justify-content: center; }
.playmat-menu .btn-copy:disabled { opacity: 0.4; cursor: default; }

/* Artist and copyright of the playmat's art (Scryfall's rule for art crops): small, bottom right of the box. */
.playmat-credit {
  position: absolute;
  right: 8px;
  bottom: 1px;
  z-index: 2;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 9px/11px var(--font-body);
  color: rgba(232, 226, 210, 0.65);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.playmat-credit:empty { display: none; }
.playmat-menu-artist { font-size: 12px; color: var(--muted); margin-top: -6px; }
.playmat-menu-artist:empty { display: none; }

/* Fan Content Policy notice under the side panel during the game. */
.legal-note {
  margin: 6px 4px 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.8;
}

.legal-note a { color: inherit; }

/* ---------- Language switch: DE / EN as text (flags stand for countries, not languages) ---------- */

.masthead { position: relative; }
.masthead .lang-switch { position: absolute; top: 0; right: 0; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.lang-btn {
  padding: 3px 9px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 12px var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--gold); color: #1a1408; }
.lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* In the game: in the turn bar, right before the "i" button. */
.lang-switch-bar { margin-left: auto; align-self: center; flex: none; }
.lang-switch-bar + .home-wrap { margin-left: 8px; }
.home-wrap + .info-toggle { margin-left: 8px; }
/* Full screen button: between the house and the "i", looks like the house. */
.fullscreen-btn { flex: none; align-self: center; margin-left: 8px; }
.fullscreen-btn + .info-toggle { margin-left: 8px; }
.fullscreen-btn[hidden] { display: none; }
.fullscreen-btn .fs-exit,
.fullscreen-btn[aria-pressed="true"] .fs-enter { display: none; }
.fullscreen-btn[aria-pressed="true"] .fs-exit { display: block; }

/* "Next turn" in the turn bar, right after the phase. */
.next-turn-wrap { position: relative; flex: none; align-self: center; display: flex; }
.next-turn-wrap[hidden] { display: none; }

.next-turn-btn {
  padding: 3px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.next-turn-btn:hover,
.next-turn-btn[aria-expanded="true"] { background: var(--gold); color: #1a1408; }

/* The house in the turn bar: back to the main menu, after a short question. */
.home-wrap { position: relative; flex: none; align-self: center; display: flex; }

.home-btn {
  display: grid;
  place-items: center;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--muted);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.home-btn:hover,
.home-btn[aria-expanded="true"] { color: var(--text); border-color: var(--gold); }

/* Fixed (placed under the house by js/dialogs.js): the turn bar cuts off anything that sticks out of it. */
.home-confirm {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(260px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  animation: fade-in 0.15s ease-out;
}

.home-confirm[hidden] { display: none; }
.home-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.home-yes { background: var(--gold); color: #1a1408; }

/* Narrow screens: the switch sits above the title instead of on top of it. */
@media (max-width: 620px) {
  .masthead .lang-switch { position: static; display: flex; width: max-content; margin: 0 0 8px auto; }
}

/* Playmats switched off (PLAYMATS_ENABLED = false in js/core.js): no picture, scanlines, name, credit or menu. */
.no-playmats .playmat,
.no-playmats .playmat-lines,
.no-playmats .playmat-name,
.no-playmats .playmat-credit,
.no-playmats .playmat-menu { display: none !important; }