/* Tui 對 web client — responsive, reuses the Godot skin art. Assets are served
   from the repo root (/default_skin, /mobile_skin, /assets), so this file — at
   /web-client/css/ — reaches them with a root-absolute url(). */

:root {
  --gold: #f0d488;
  --gold-dim: #c0ab7d;
  --accent: #ffe27a;
  --cream: #f5ead0;
  --bg-dark: #120c06;
  --panel: rgba(18, 12, 6, 0.85);
  --border: #7a5a2a;
  --green: #2f6d4f;
  --green-lit: #3a8a63;
  --red: #e57373;
  --good: #7ddc8f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, "Noto Sans", "Microsoft JhengHei", sans-serif;
  color: var(--cream);
  background: var(--bg-dark);
}

body {
  background-image: linear-gradient(rgba(18,12,6,0.55), rgba(18,12,6,0.75)), url('/mobile_skin/background.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Each screen fills the viewport and centres its content; the inner wrapper is
   scaled by js/fit.js to fit, so there's never a scrollbar. */
.screen {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- buttons */
.btn {
  font: inherit;
  font-size: 1.05rem;
  color: var(--cream);
  background: linear-gradient(#3a2a12, #241708);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.7em 1.2em;
  cursor: pointer;
  transition: filter 0.12s, transform 0.05s;
}
.btn:hover:not(:disabled) { filter: brightness(1.2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary {
  color: #fff;
  background:
    linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.2)),
    var(--green);
  border-color: #1f4f39;
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: var(--green-lit); filter: none; }

/* ---------------------------------------------------------------- landing */
/* Full-bleed cover art with the two choices overlaid near the bottom. The art
   already carries the title/tagline, so the screen adds only the buttons.
   Desktop art by default; the portrait cover kicks in on narrow/tall viewports. */
.landing {
  padding: 0;
  position: relative;
  /* contain (not cover) so the whole cover — title included — is always visible;
     anchored to the bottom so the buttons overlay the art, letterbox goes up top. */
  background-image: url('/desktop_cover.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (max-aspect-ratio: 3/4) {
  .landing { background-image: url('/mobile_cover.png'); }
}
.landing-actions {
  position: absolute;
  bottom: 5dvh;
  left: 0;
  right: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 24px;
}
.landing-actions .btn { font-size: 1.2rem; padding: 0.8em 1.8em; }

/* ---------------------------------------------------------------- about */
.about { padding: 24px; }
.about-panel {
  width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 4vw, 40px);
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 22px;
}
.about-body {
  overflow-y: auto;
  line-height: 1.55;
  color: var(--cream);
}
.about-body h1 { color: var(--gold); font-size: 1.9rem; margin: 0 0 0.4em; }
.about-body h2 { color: var(--accent); font-size: 1.35rem; margin: 1.1em 0 0.35em; }
.about-body h3 { color: var(--gold-dim); font-size: 1.1rem; margin: 1em 0 0.3em; }
.about-body p { margin: 0.6em 0; }
.about-body ul { margin: 0.5em 0; padding-left: 1.4em; }
.about-body li { margin: 0.25em 0; }
.about-body a { color: var(--accent); }
.about-body code { background: rgba(0,0,0,0.35); padding: 0.05em 0.35em; border-radius: 5px; }
.about-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.about-body blockquote {
  margin: 0.8em 0;
  padding: 0.4em 0 0.4em 1em;
  border-left: 3px solid var(--border);
  color: var(--gold-dim);
  font-style: italic;
}
.about-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- settings */
.settings-panel { gap: 24px; }
.settings-title { margin: 0; text-align: center; color: var(--gold); font-size: 1.9rem; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  font-size: 1.1rem;
}
.settings-row > span { flex: 1; }
.settings-row .field { flex: 2; width: auto; }
.settings-toggle { width: 28px; height: 28px; accent-color: var(--green); cursor: pointer; }
.settings-slider { flex: 2; accent-color: var(--green); cursor: pointer; }
#settings-done-btn { align-self: center; min-width: 200px; }
.name-row { display: flex; gap: 10px; }
.name-row .field { flex: 1; }

.chip {
  font: inherit;
  color: var(--gold);
  background: rgba(30, 18, 8, 0.9);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.5em 0.9em;
  cursor: pointer;
}
.chip:hover:not(:disabled) { color: var(--accent); }
.chip:disabled { opacity: 0.45; cursor: default; }

.field {
  font: inherit;
  font-size: 1.05rem;
  color: var(--cream);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65em 0.8em;
  width: 100%;
}
.field::placeholder { color: #8a7a58; }

/* ---------------------------------------------------------------- lobby */
.lobby-panel {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 4vw, 44px);
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 26px;
}
.app-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  color: var(--gold);
  letter-spacing: 2px;
}
.google-row { display: flex; align-items: center; gap: 14px; justify-content: center; }
.self-avatar { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.status { min-height: 1.2em; text-align: center; color: var(--red); }
.menu { display: flex; flex-direction: column; gap: 16px; }
/* Each of the four groups (account, join, create, practice) is its own card so
   the separation between them is unmistakable. */
.menu-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}
.section-title {
  margin: 0 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(122, 90, 42, 0.5);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}
.join-row { display: flex; gap: 10px; }
.join-row .field { flex: 1; }

/* Browsable open-room list — grows with the rooms, but caps at ~6 rows and
   scrolls beyond that so the lobby doesn't stretch without limit. */
.room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 22rem;
  overflow-y: auto;
}
.room-list::-webkit-scrollbar { width: 8px; }
.room-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.7em 0.9em;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.room-row:hover, .room-row:focus-visible {
  background: rgba(240, 212, 136, 0.12);
  border-color: var(--gold);
  outline: none;
}
.room-row-name { font-size: 1.1rem; font-weight: 600; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row-meta { font-size: 0.95rem; color: var(--gold-dim); white-space: nowrap; }
.room-list-empty { font-size: 0.95rem; color: var(--gold-dim); text-align: center; padding: 0.4em 0; }
.hands-row { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.hands-row span { white-space: nowrap; }
.hands-row .field { width: auto; flex: 1; }
.waiting { display: flex; flex-direction: column; gap: 12px; }
.room-code { text-align: center; font-size: 1.8rem; color: var(--gold); font-weight: 600; }
.hint { text-align: center; color: var(--gold-dim); }
.seats { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; }
.seat-avatar {
  width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none;
  background: rgba(0,0,0,0.4);
}
.seat-avatar.placeholder { display: grid; place-items: center; color: var(--gold-dim); font-weight: 700; }

/* ---------------------------------------------------------------- game */
/* #game is a .screen (full-viewport flex centre). Its content lives in
   .game-inner, which js/fit.js scales down to fit the viewport. */
.game-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  padding: 2px clamp(8px, 3vw, 20px);
}
.top-bar { display: flex; align-items: center; gap: 10px; }
.title-plaque {
  flex: 1;
  text-align: center;
  font-size: clamp(1.2rem, 4.5vw, 1.9rem);
  color: var(--gold);
  letter-spacing: 1px;
  padding: 0.35em 0;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: rgba(30, 18, 8, 0.7);
}
.badge {
  color: var(--gold-dim);
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
  min-width: 96px;
}

.stakes-banner {
  align-self: center;
  background: #b3261e;
  border: 3px solid var(--accent);
  border-radius: 16px;
  color: #fff2cf;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.5em 1.1em;
  text-shadow: 0 2px 4px #3a0d0a;
}

.rows { display: flex; flex-direction: column; gap: 10px; }
.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.35)),
    rgba(40, 26, 12, 0.55);
}
.player-row.turn { border-color: var(--accent); }
.player-row.winner { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,226,122,0.5); }
.avatar {
  width: clamp(52px, 14vw, 78px); height: clamp(52px, 14vw, 78px);
  border-radius: 12px; object-fit: cover; flex: none;
  background: linear-gradient(#2f6d4f, #244f3b);
  display: grid; place-items: center; color: #cfe8da; font-weight: 700; font-size: 1.6rem;
}
.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 1.15rem; color: var(--gold); }
.p-name .arrow { color: var(--accent); }
/* Small static position badge (1–4) in front of the name. */
.pos-num {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: rgba(240, 212, 136, 0.16);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}
.p-stat { color: var(--gold-dim); font-size: 0.95rem; }
.p-stat.placed { color: var(--accent); }
.p-score { font-size: 0.95rem; }
.p-score.pos { color: var(--good); }
.p-score.neg { color: var(--red); }
/* Fixed height so a row is the same height whether its play area shows a bid
   token (bidding) or the revealed played pieces + label (trick complete). */
.p-play { flex: none; min-width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; }

/* bid token in a player's play area (bidding phase) */
.bid-token {
  position: relative; width: 74px; height: 74px;
  display: grid; place-items: center;
}
.bid-token img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bid-token .val {
  position: relative; font-size: 2.4rem; font-weight: 800;
  color: #fff2cf; text-shadow: 0 0 6px #241606, 0 2px 3px #241606;
}
.bid-token.empty { filter: brightness(0.6) grayscale(0.4); }
.bid-token.empty .val { color: var(--gold-dim); font-size: 1.8rem; }

/* played pieces in a trick */
.play-pieces { display: flex; gap: 4px; flex-direction: column; align-items: center; }
.play-pieces .pcs { display: flex; gap: 4px; }
.play-ann { font-size: 0.85rem; color: var(--gold-dim); }
.play-ann.win { color: var(--good); font-weight: 700; }
.play-ann.dump { color: var(--red); }

/* pieces */
.piece { width: 58px; height: 58px; object-fit: contain; }
.piece.sm { width: 40px; height: 40px; }

/* Fixed height so the layout doesn't shift between steps where advice is or
   isn't shown (the panel just toggles visibility — see game.js _renderReco). */
.reco-panel {
  border: 2px solid var(--border);
  border-radius: 16px;
  background: rgba(30, 18, 8, 0.7);
  padding: 6px 16px;
  text-align: center;
  color: var(--cream);
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Reserved height so bidding turn / winner-announcement / play-call messages
   across steps keep the same vertical footprint. */
.center-msg {
  align-self: center;
  color: var(--accent);
  font-size: 1.2rem;
  padding: 0.3em 1em;
  min-height: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(30, 18, 8, 0.6);
}

.hand-tray {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)),
    rgba(30, 18, 8, 0.5);
  min-height: 78px;
}
.hand-piece {
  border: none; background: none; padding: 4px; cursor: pointer;
  border-radius: 10px; line-height: 0;
}
.hand-piece img { width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px); object-fit: contain; }
.hand-piece.selected { background: rgba(255, 226, 122, 0.25); outline: 2px solid var(--accent); }
.hand-piece:disabled { cursor: default; }

/* Reserve the height of the tallest controls state (the bid section) and centre
   whatever's shown, so the hand tray above and the board keep their positions
   whether we're bidding, playing, or revealing a completed trick. */
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  min-height: 96px;
}
.bid-section { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.bid-label { text-align: center; color: var(--gold); font-size: 1.1rem; }
.bid-tokens { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bid-chip {
  position: relative; width: 52px; height: 52px; border: none; background: none;
  cursor: pointer; display: grid; place-items: center; color: var(--gold-dim);
  font-size: 1.4rem; font-weight: 700;
}
.bid-chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bid-chip .n { position: relative; }
.bid-chip.filled .n { color: #3a2810; }
.bid-buttons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.controls .btn.primary, #confirm-bid-btn { min-width: 200px; }

/* ranking help overlay */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.65);
  display: grid; place-items: center;
  padding: 20px;
}
.how-to-play-btn { width: 100%; margin: 12px 0 2px; font-size: 0.95rem; }
.ranking-panel {
  background: #2a1c0e;
  border: 3px solid var(--border);
  border-radius: 16px;
  padding: 14px 18px;
  width: min(300px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.ranking-panel h2 { margin: 0 0 8px; text-align: center; color: var(--gold); font-size: 1.15rem; }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.rank-dots { width: 46px; text-align: right; font-size: 0.62rem; letter-spacing: 1px; }
.rank-dots.left { text-align: left; }
.rank-red { color: #e53e3e; font-size: 1.35rem; }
.rank-black { color: #90a4ae; font-size: 1.35rem; }
.rank-ann { margin-left: auto; color: var(--gold); font-size: 0.85rem; }
.rank-divider { height: 1px; background: rgba(255,255,255,0.25); margin: 5px 0; }
.rank-desc {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--gold-dim);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
}

/* last-game trick log overlay */
.game-log-panel-wrap {
  display: flex; flex-direction: column; gap: 10px;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
}
.game-log-panel {
  background: #2a1c0e;
  border: 3px solid var(--border);
  border-radius: 16px;
  padding: 14px 18px;
  overflow-y: auto;
}
.game-log-title { margin: 0 0 10px; text-align: center; color: var(--gold); font-size: 1.15rem; }
.game-log-empty { text-align: center; color: var(--gold-dim); }
.game-log-hand { margin-bottom: 12px; }
.game-log-hand-title {
  margin: 0 0 6px; color: var(--accent); font-size: 0.95rem;
  border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.game-log-trick { margin: 0 0 8px; padding-left: 6px; }
.game-log-trick-head { color: var(--gold-dim); font-size: 0.78rem; margin-bottom: 3px; }
.game-log-play { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-size: 0.85rem; }
.game-log-play.winner { color: var(--gold); font-weight: 600; }
.game-log-who { min-width: 68px; }
.game-log-pieces { display: inline-flex; align-items: center; gap: 2px; }
.game-log-pieces .log-piece { height: 22px; width: auto; }
.game-log-ann { margin-left: auto; color: var(--gold-dim); font-size: 0.72rem; }
.game-log-panel-wrap .btn.primary { align-self: center; min-width: 160px; }

/* -------------------------------------------------------- wide screens */
@media (min-width: 900px) {
  .game-inner { max-width: 1040px; }
  .rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hand-tray { min-height: 96px; }
  .reco-panel { font-size: 1.1rem; }
}