:root {
  --felt: #0e3b2c;
  --felt-2: #12503b;
  --felt-3: #1a6a4e;
  --ink: #f3efe2;
  --muted: #a9c4b6;
  --gold: #e6b84a;
  --red: #c0262d;
  --ivory: #f7f1e1;
  --tile-back: #177a52;
  --card: rgba(0, 0, 0, .22);
  --line: rgba(255, 255, 255, .12);
  --w: min(46px, calc((100vw - 62px) / 15.3));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 30%, var(--felt-3), var(--felt) 70%) fixed, var(--felt);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
h1, h2 { margin: 0 0 .4em; line-height: 1.2; }
h2 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.loading { text-align: center; padding: 30vh 16px; color: var(--muted); }

/* ---------- buttons & inputs */
.btn {
  appearance: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .1); color: var(--ink);
  padding: 9px 14px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; touch-action: manipulation;
}
.btn:hover { background: rgba(255, 255, 255, .17); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--gold); color: #1d1a10; border-color: transparent; }
.btn.primary:hover { background: #f1c75f; }
.btn.win { background: var(--red); border-color: transparent; color: #fff; font-size: 1.05rem; animation: pulse 1.2s infinite; }
.btn.ghost { background: transparent; }
.btn.tiny { padding: 4px 10px; min-height: 30px; font-size: .82rem; border-radius: 8px; }
.btn.float { position: fixed; right: 16px; bottom: 16px; z-index: 20; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(192, 38, 45, .35); } }
input, select {
  width: 100%; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .25); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; min-height: 44px;
}
select option { color: #111; }
label { font-size: .85rem; color: var(--muted); }
.code-in { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; font-size: 1.2rem; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.row-btns select { width: auto; margin: 0; }
.tag { font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); margin-left: 4px; font-weight: 600; vertical-align: middle; }
.tag.me { background: var(--gold); color: #1d1a10; }
.tag.off { background: #7a3b2c; }
.tag.deal { background: var(--red); color: #fff; margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.center-text { text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50;
  background: #1e1e1e; color: #fff; padding: 10px 16px; border-radius: 10px; max-width: calc(100vw - 32px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

/* ---------- tiles */
.tile {
  --tw: var(--w);
  display: inline-block; width: var(--tw); height: calc(var(--tw) * 1.36); flex: none;
  background: linear-gradient(#fffaf0, var(--ivory) 70%, #e9e0c8);
  border-radius: calc(var(--tw) * .14);
  box-shadow: 0 calc(var(--tw) * .07) 0 var(--tile-back), 0 calc(var(--tw) * .1) calc(var(--tw) * .12) rgba(0, 0, 0, .45);
  margin: 0 1px calc(var(--tw) * .08); position: relative; vertical-align: bottom;
}
.tile svg { width: 100%; height: 100%; display: block; }
.tile.back { background: linear-gradient(135deg, #24a06e, var(--tile-back)); box-shadow: 0 calc(var(--tw) * .07) 0 #0c4d33, 0 calc(var(--tw) * .1) calc(var(--tw) * .12) rgba(0, 0, 0, .45); }
.tile.sm { --tw: 28px; }
.tile.xs { --tw: 18px; margin: 0 0 3px; }
.tile.lg { --tw: 52px; }
.tile.flower { filter: saturate(1.15); }
.tile.last { outline: 2px solid var(--gold); outline-offset: 1px; }
.meld { display: inline-flex; margin-right: 6px; gap: 0; }
.meld .tile { margin-left: 0; margin-right: 0; }

/* ---------- home */
.home { max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; display: grid; gap: 14px; }
.brand { text-align: center; padding: 10px 0 4px; }
.brand-tiles { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.brand-tiles .tile { --tw: 46px; }
.brand h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); letter-spacing: .02em; }
.sub { color: var(--muted); margin: 0; }
.home-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-grid .btn { width: 100%; justify-content: center; }
.rules summary { cursor: pointer; font-weight: 700; }
.rules p { margin: .7em 0; }
.fan-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0; }
.fan-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fan-table .num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--gold); }
.fan-table .total td { font-weight: 800; border-bottom: none; }

/* ---------- lobby */
.lobby { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 14px; }
.big-code { font-size: 3rem; font-weight: 800; letter-spacing: .25em; color: var(--gold); margin: 4px 0 6px; padding-left: .25em; }
.seats { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.seats li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .06); border-radius: 10px; }
.seats li .btn { margin-left: auto; }
.seat-wind { font-weight: 800; color: var(--gold); width: 1.4em; text-align: center; }

/* ---------- game */
.game { max-width: 1240px; margin: 0 auto; padding: 8px 10px 18px; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 4px 2px 8px; flex-wrap: wrap; }
.topbar .logo { font-weight: 800; color: var(--gold); font-size: 1.15rem; }
.topbar .spacer { flex: 1; }
.game > .rules { margin-bottom: 8px; }

.table {
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "left top right" "center center center" "me me me";
}
.pos-left { grid-area: left; } .pos-top { grid-area: top; } .pos-right { grid-area: right; }
.center { grid-area: center; } .me { grid-area: me; }
@media (min-width: 900px) {
  .table {
    grid-template-columns: minmax(200px, 1fr) minmax(340px, 1.5fr) minmax(200px, 1fr);
    grid-template-areas: "left top right" "left center right" "me me me";
  }
  .tile.xs { --tw: 22px; }
}

.opp, .center, .me { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; min-width: 0; }
.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(230, 184, 74, .25); }
.seat-head { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 6px; }
.wind-badge { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .14); font-weight: 800; }
.wind-badge.dealer { background: var(--gold); color: #1d1a10; }
.pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.score { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); padding-left: 6px; }
.score.neg { color: #ff8f86; }
.seat-head .tag { flex: none; }
.opp-hand, .opp-melds { display: flex; flex-wrap: wrap; gap: 0 1px; margin-bottom: 4px; }
.opp-hand .tile.back { --tw: 12px; }
@media (min-width: 900px) { .opp-hand .tile.back { --tw: 16px; } }
.opp-melds .meld { margin-right: 4px; }
.discards { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 4px; background: rgba(0, 0, 0, .15); border-radius: 8px; min-height: 30px; align-content: flex-start; }
.thinking { font-size: .78rem; color: var(--gold); margin-top: 4px; animation: blink 1.4s infinite; }
.opp .btn.tiny { margin-top: 6px; }
@keyframes blink { 50% { opacity: .45; } }

.center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; }
.round { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: baseline; font-size: .88rem; color: var(--muted); }
.round-wind { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.wall { color: var(--gold); font-weight: 700; }
.last { min-height: 76px; display: grid; place-items: center; }
.last-tile { display: flex; align-items: center; gap: 10px; text-align: left; font-size: .85rem; }
.status { font-weight: 700; font-size: 1rem; }
.status.mine { color: var(--gold); }

.me-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.me-top .seat-head { margin: 0; flex: 1 1 200px; }
.me-melds { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; }
.discards.mine { margin: 8px 0 4px; }
.hand { display: flex; justify-content: center; align-items: flex-end; padding: 18px 0 6px; min-height: calc(var(--w) * 1.36 + 30px); }
.hand .tile { margin: 0 1px; transition: transform .12s; }
.hand.active .tile { cursor: pointer; }
.hand.active .tile:hover { transform: translateY(-4px); }
.hand .tile.sel { transform: translateY(-14px) !important; box-shadow: 0 3px 0 var(--tile-back), 0 0 0 2px var(--gold), 0 8px 14px rgba(0, 0, 0, .5); }
.hand .tile.drawn { margin-left: calc(var(--w) * .45); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 42px; }
.mini-set { display: inline-flex; }

.log { margin-top: 8px; max-height: 260px; overflow: auto; font-size: .88rem; }
.log ol { margin: 0; padding-left: 0; list-style: none; }
.log li { padding: 3px 0; border-bottom: 1px solid var(--line); }

/* ---------- result modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; z-index: 30; overflow: auto; }
.modal { background: #133f30; border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.modal h2 { color: var(--gold); font-size: 1.35rem; }
.pay { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; font-weight: 700; }
.pay .pos { color: #8fe3a8; } .pay .neg { color: #ff8f86; }
.reveal { display: grid; gap: 8px; margin: 10px 0 14px; }
.reveal-row { background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px; }
.reveal-row.winner { outline: 2px solid var(--gold); }
.reveal-name { display: flex; font-weight: 700; margin-bottom: 4px; }
.reveal-tiles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1px; }

@media (max-width: 600px) {
  .hide-sm { display: none; }
  .opp { padding: 6px; }
  .seat-head { gap: 3px; }
  .wind-badge { width: 20px; height: 20px; font-size: .8rem; }
  .pname { font-size: .85rem; }
  .score { font-size: .85rem; }
  .tile.xs { --tw: 14px; margin-bottom: 2px; }
  .opp-hand .tile.back { --tw: 8px; }
  .tile.lg { --tw: 44px; }
  .discards { padding: 3px; min-height: 22px; }
  .last { min-height: 62px; }
  .center { gap: 4px; padding: 8px; }
  .topbar { gap: 6px; }
  .topbar .btn.tiny { padding: 3px 8px; min-height: 28px; }
  .hand { padding-top: 14px; }
  .seat-head .tag:not(.deal) { display: none; }
}