/* The palette is the app's own, copied from app/src/main/res/values/colors.xml so the two clients
   look like the same game. Kept as custom properties so the real table can reuse them. */

:root {
  --felt-center: #126762;
  --felt-mid: #0b4b47;
  --felt-edge: #073331;
  --room-bg: #05191a;
  --brass: #c79a4b;
  --on-felt: #f6ecd2;
  --on-felt-muted: #9fbdb7;
  --hud-panel: rgba(5, 34, 32, 0.72);
  --hud-stroke: rgba(246, 236, 210, 0.2);
  --parchment: #fbefd3;
  --panel: #fffbf2;
  --ink: #3e2a1a;
  --ink-muted: #8a7355;
  --gold: #f4b62b;
  --gold-deep: #d89a18;
  --gold-on: #5a2c00;
  --danger: #d8443b;

  --radius-panel: 14px;
  --radius-pill: 999px;
  --space-s: 8px;
  --space-m: 14px;
  --space-l: 22px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--on-felt);
  background:
    radial-gradient(circle at 50% 32%, var(--felt-center), var(--felt-mid) 46%, var(--felt-edge) 78%),
    var(--room-bg);
  background-attachment: fixed;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m) 96px;
}

.title {
  margin: 0 0 var(--space-m);
  font-size: 1.5rem;
  text-align: center;
  color: var(--parchment);
}

h2 {
  margin: 0 0 var(--space-s);
  font-size: 1rem;
  color: var(--parchment);
}

/* A panel of the lobby. Deliberately not called .card: that name belongs to the playing cards */
.panel {
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: var(--radius-panel);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
  backdrop-filter: blur(4px);
}

label,
.label {
  display: block;
  margin: var(--space-s) 0 4px;
  font-size: 0.8rem;
  color: var(--on-felt-muted);
}

input,
select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hud-stroke);
  border-radius: 10px;
}

.row {
  display: flex;
  gap: var(--space-m);
}

.row > * {
  flex: 1;
}

.button {
  display: block;
  width: 100%;
  margin-top: var(--space-m);
  padding: 13px 16px;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.button:disabled {
  opacity: 0.5;
  cursor: default;
}

.button-gold {
  color: var(--gold-on);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}

.button-soft {
  color: var(--on-felt);
  background: rgba(246, 236, 210, 0.1);
  border: 1px solid var(--hud-stroke);
}

.chip {
  font: inherit;
  color: var(--ink);
  background: var(--parchment);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  margin: 0 6px 6px 0;
  cursor: pointer;
}

.chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.status {
  margin: 0 0 var(--space-m);
  font-size: 0.85rem;
  color: var(--on-felt-muted);
  text-align: center;
}

.status-error {
  color: var(--danger);
}

.banner {
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-m);
  font-size: 0.8rem;
  color: var(--gold-on);
  background: var(--gold);
  border-radius: 10px;
}

.room-code {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  color: var(--parchment);
}

.player-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.player {
  display: flex;
  gap: 10px;
  padding: 5px 0;
}

.player.host {
  color: var(--gold);
}

/* The table */

.table {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.table-banner {
  padding: var(--space-s) var(--space-m);
  font-size: 0.8rem;
  color: var(--gold-on);
  background: var(--gold);
  border-radius: 10px;
  text-align: center;
}

.table-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 34px;
}

.match-indicator {
  font-size: 0.8rem;
  color: var(--on-felt-muted);
}

.trump-corner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.78rem;
  color: var(--on-felt-muted);
}

.card-trump {
  height: 66px;
}

.deck-left {
  padding: 2px 8px;
  color: var(--on-felt);
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: var(--radius-pill);
}

.call-info {
  flex-basis: 100%;
  text-align: right;
  color: var(--gold);
}

.seats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 6px 10px;
  font-size: 0.78rem;
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: 12px;
}

.seat-turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(244, 182, 43, 0.28);
}

.seat-gone {
  opacity: 0.45;
}

.seat-caller .seat-name::after {
  content: ' ★';
  color: var(--gold);
}

.seat-partner .seat-name::after {
  content: ' ◆';
  color: var(--brass);
}

.seat-name {
  font-weight: 600;
  color: var(--on-felt);
}

.seat-cards,
.seat-points {
  color: var(--on-felt-muted);
}

.trick {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  align-items: flex-end;
  min-height: 132px;
  padding: var(--space-s);
}

.trick-taken {
  opacity: 0.55;
  transition: opacity 220ms ease;
}

.trick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.trick-card .card {
  height: 96px;
}

.trick-owner {
  font-size: 0.7rem;
  color: var(--on-felt-muted);
}

/* A card is sized by its HEIGHT and never by its width: every deck has its own proportions
   (trevisane 230x560, napoletane 450x743, francesi 400x600) and the inline aspect-ratio turns
   the height into the right width. Fixing the width instead would make the narrow deck tower
   over the others and squash the wide ones.
   No width here either: a `width: 100%` would win over the per context rules above by source
   order and stretch the card across its flex parent */
.card {
  position: relative;
  flex: 0 0 auto;
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: a box that ever disagrees with the artwork letterboxes by a hairline
     instead of silently cropping the top off a king */
  object-fit: contain;
}

.card-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--ink);
}

/* The back of a card, for the decks whose own back was never scanned: the trevisane one is a
   real image like its faces, and only the other two land here. The Android table draws the same
   fallback in PlayingCardView.drawBack() - deep red, gold rule, inner frame, diagonal lattice,
   central medallion - so the two clients show the same deck.
   --back-inset is set per card by the table, because the inner frame is inset by a share of the
   card's WIDTH on all four sides and the decks are not the same shape */
.card-back {
  background: linear-gradient(to bottom right, #a33029 0%, #7e1f1c 55%, #5a1312 100%);
  border: 1px solid #f0dca8;
}

.card-back::before {
  content: '';
  position: absolute;
  inset: var(--back-inset, 6%) 10%;
  border: 1px solid rgba(240, 220, 168, 0.4);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(240, 220, 168, 0.2) 6px 7px),
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(240, 220, 168, 0.2) 6px 7px);
}

.card-back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(240, 220, 168, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.13));
}

/* The face down cards at an opponent's seat: a short fan, however many they hold */
.seat-hand {
  display: flex;
  align-items: center;
  margin: 3px 0 1px;
}

/* Height kept in step with SeatCardHeight in table.js, which derives the fan overlap from it */
.seat-card {
  height: 30px;
  border-radius: 3px;
}

/* The medallion and lattice are noise at this size: the shape and the red are the whole message */
.seat-card::before,
.seat-card::after {
  display: none;
}

.table-description {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.92rem;
  text-align: center;
  color: var(--parchment);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.chip.selected {
  color: var(--gold-on);
  background: var(--gold);
  font-weight: 600;
}

.hand-wrapper {
  position: relative;
}

/* No wrapping: a hand that goes to a second row reads as two hands. The gap is set by the table,
   and turns negative so the cards overlap when there are too many to sit side by side */
.hand {
  display: flex;
  gap: var(--hand-gap, 6px);
  justify-content: center;
  flex-wrap: nowrap;
  /* Safety net for a screen too narrow even for the tightest readable overlap: scroll rather than
     clip. The vertical padding keeps the lift of a hovered or selected card from being cut off,
     since a box that scrolls in one direction clips in the other */
  overflow-x: auto;
  padding: 16px 0 6px;
  scrollbar-width: none;
}

.hand::before {
  content: attr(data-score);
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.72rem;
  color: var(--on-felt-muted);
}

.hand-card {
  height: 118px;
  cursor: default;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.hand-card.playable {
  cursor: pointer;
}

.hand-card.playable:hover {
  transform: translateY(-6px);
  /* Overlapping cards are stacked in order, so the one being pointed at has to come forward */
  z-index: 2;
}

.hand-card.dimmed {
  opacity: 0.42;
}

.hand-card.selected {
  transform: translateY(-12px);
  box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.results {
  padding: var(--space-m);
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: var(--radius-panel);
}

.results h3 {
  margin: 0 0 var(--space-s);
  font-size: 0.95rem;
  color: var(--parchment);
}

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.88rem;
  color: var(--on-felt-muted);
}

.result-row.mine {
  color: var(--gold);
  font-weight: 600;
}

.leave-button {
  margin-top: var(--space-s);
}

@media (min-width: 480px) {
  .hand-card {
    height: 138px;
  }

  .trick-card .card {
    height: 112px;
  }
}

/* Chat overlay */

.chat {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.chat > * {
  pointer-events: auto;
}

.chat-flash {
  position: absolute;
  top: var(--space-l);
  left: 50%;
  transform: translateX(-50%);
  max-width: 88vw;
  padding: 9px 16px;
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

.chat-bubble {
  position: absolute;
  right: var(--space-m);
  bottom: var(--space-m);
  width: 54px;
  height: 54px;
  font-size: 24px;
  color: var(--on-felt);
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  padding: 1px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-on);
  background: var(--gold);
  border-radius: var(--radius-pill);
}

.chat-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-m);
  background: var(--hud-panel);
  border-top: 1px solid var(--hud-stroke);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  backdrop-filter: blur(8px);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--on-felt-muted);
}

.chat-close {
  font-size: 1rem;
  color: var(--on-felt);
  background: none;
  border: 0;
  cursor: pointer;
}

.chat-scroll {
  max-height: 30vh;
  overflow-y: auto;
  margin-top: 6px;
}

.chat-line {
  margin: 3px 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.chat-empty {
  margin: 6px 0;
  font-size: 0.8rem;
  color: var(--on-felt-muted);
}

.chat-emotes {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-top: var(--space-s);
  scrollbar-width: none;
}

.chat-emotes .chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-compose {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}

.chat-compose .button {
  width: auto;
  margin: 0;
  padding: 10px 16px;
}

.notices {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.notice {
  margin: 0;
  padding: 8px 16px;
  font-size: 0.85rem;
  background: var(--hud-panel);
  border: 1px solid var(--hud-stroke);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* Statistics. The tables scroll inside their own box: a phone is narrower than five columns of
   numbers, and the page itself must never scroll sideways */

.stats-table-scroll {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  white-space: nowrap;
}

.stats-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-felt-muted);
  padding: 0 var(--space-m) 6px 0;
}

.stats-table td {
  padding: 6px var(--space-m) 6px 0;
  border-top: 1px solid var(--hud-stroke);
}

.stats-game + .stats-game {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hud-stroke);
}

.stats-game-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 0.9rem;
  color: var(--on-felt-muted);
}

.stats-standings {
  margin: 6px 0 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
}

.stats-standings li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 2px 0;
}

.stats-bot {
  color: var(--on-felt-muted);
  font-style: italic;
}

.stats-hint {
  margin: 0 0 var(--space-s);
  font-size: 0.8rem;
  color: var(--on-felt-muted);
}