* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --felt-1:#14532d;
  --felt-2:#0e4524;
  --felt-3:#072c16;
  --frame-1:#5a3a1e;
  --frame-2:#3c2612;
  --tint:#f2ead8;
  --sub:#ffd9a0;

  --back-1:#3d6b8f;
  --back-2:#274a68;
  --back-edge:#1d3a52;

  --tile-w: clamp(30px, 9.5vw, 58px);
  --tile-h: calc(var(--tile-w) * 1.42);

  --gold:#d4af37;
}

html,body { height:100%; overflow:hidden; }
body {
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--felt);
  color:var(--tint);
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}

#app { position:fixed; inset:0; }

#table {
  position:absolute; inset:0;
  touch-action:none;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--felt-1) 0%, var(--felt-2) 45%, var(--felt-3) 100%);
  display:grid;
  grid-template-columns: 24% 1fr 24%;
  grid-template-rows: minmax(44px,9vh) auto 1fr minmax(150px,31vh);
  grid-template-areas:
    "topbar topbar topbar"
    "top    top    top"
    "left   center right"
    "myzone myzone myzone";
}
#table::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 10px var(--frame-2), inset 0 0 0 13px var(--frame-1), inset 0 0 60px rgba(0,0,0,.55);
}

#topbar {
  grid-area:topbar; display:flex; align-items:center; gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 2px calc(28px + env(safe-area-inset-left));
  font-size:13px; z-index:46; position:relative;
}
.wind-chip {
  display:inline-block; min-width:26px; text-align:center; white-space:nowrap; flex-shrink:0;
  padding:3px 8px; border-radius:8px; font-weight:700; font-size:14px;
  background:linear-gradient(#3f8f5c,#2c6b42); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
#roundinfo { display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; }
#round-lines { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
#round-num { opacity:.85; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#round-num .round-wind-txt { color:var(--gold); font-weight:800; font-size:14px; }
.radio-now { display:inline-flex; align-items:center; gap:5px; font-size:13px; opacity:.92;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.radio-ico {
  flex:0 0 auto; display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(#3f8f5c,#2c6b42); border:1px solid rgba(255,255,255,.3);
  font-size:12px; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.radio-txtwrap { display:flex; flex:1 1 auto; min-width:0; overflow:hidden; }
.radio-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#round-num.mq, .radio-txt.mq {
  width:max-content;
  animation: topbar-marquee 20s linear infinite;
}
.radio-txt.mq { flex:0 0 auto; }
@keyframes topbar-marquee {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(0); }
  50%  { transform: translateX(var(--mq-shift)); }
  65%  { transform: translateX(var(--mq-shift)); }
  100% { transform: translateX(0); }
}

#top-btns { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
#menu-wrap { position:relative; flex-shrink:0; margin-right:8px; }
.top-btn {
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
  font-size:22px; color:#fff; cursor:pointer; flex-shrink:0;
  padding:0; line-height:1;
}
.top-btn:active { transform:scale(.92); }
.top-btn.active { background:rgba(255,215,106,.16); border-color:rgba(255,215,106,.45); }
#menu-panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:55;
  min-width:200px; padding:6px;
  display:flex; flex-direction:column; gap:4px;
  background:rgba(10,20,14,.97); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.menu-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:none; border-radius:10px;
  background:transparent; color:#f2ead8; font-family:inherit; font-size:14px; font-weight:600;
  text-align:left; cursor:pointer; white-space:nowrap;
}
.menu-item:hover { background:rgba(255,255,255,.08); }
.menu-item:active { background:rgba(255,255,255,.14); }
.menu-item .mi-ico { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.menu-item.danger { color:#ffb3a6; }
.menu-item.danger:hover { background:rgba(180,50,30,.28); }

.zone { position:relative; min-height:0; }
.side { display:flex; align-items:center; justify-content:center; }

#zone-top   { grid-area:top;    padding:2px 8px 18px; }
#zone-left  { grid-area:left;   padding:0 12px 4px calc(8px + env(safe-area-inset-left)); }
#zone-right { grid-area:right;  padding:0 calc(8px + env(safe-area-inset-right)) 4px 12px; }
#center     { grid-area:center; position:relative; }
#myzone     { grid-area:myzone; display:flex; flex-direction:column; justify-content:flex-end; padding:0 6px calc(176px + env(safe-area-inset-bottom)); z-index:6; position:relative; }

.pzone { position:relative; display:flex; flex-direction:column; gap:3px; }
.pzone .phead {
  display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:4px 9px; width:max-content; max-width:100%;
}
.pzone .phead .phead-row { display:flex; align-items:center; gap:6px; }
.pzone .pname { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pzone .pava { font-size:15px; line-height:1; }
.pzone .pchips { color:var(--gold); font-weight:700; }
.pzone .pwind { color:var(--sub); font-size:12px; }
.pzone .pdealer { color:var(--gold); line-height:1; }
.pzone .flowers-row { display:flex; gap:2px; }
.pzone .flowers-row .tile { width:calc(var(--tile-w)*.48); height:calc(var(--tile-h)*.48); border-radius:4px;
  font-size:calc(var(--tile-w)*.23); }

.turn-glow { outline:2px solid var(--gold); outline-offset:2px; border-radius:12px;
  animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{outline-color:var(--gold);} 50%{outline-color:rgba(212,175,55,.25);} }

.backs { display:flex; gap:2px; align-items:center; }
.backs .back {
  width:calc(var(--tile-w) * .55 * var(--side-scale, 1)); height:calc(var(--tile-h) * .55 * var(--side-scale, 1)); flex:0 0 auto;
  border-radius:4px;
  background:linear-gradient(160deg,var(--back-1),var(--back-2));
  border:1px solid var(--back-edge); box-shadow:0 1px 2px rgba(0,0,0,.4);
  position:relative;
}
.backs .back::after {
  content:""; position:absolute; inset:2px; border-radius:3px;
  border:1px solid rgba(255,255,255,.22);
  background:var(--back-pattern, repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 3px, transparent 3px 7px));
}
/* Concealed-kong face-down tiles are SVG backs (Tiles.el(-1)): keep their
   fill and edges on the selected back theme like the CSS .back tiles. */
#bk stop { stop-color: var(--back-1); }
#bk stop:last-child { stop-color: var(--back-2); }
.back-face .bk-outer { fill: var(--back-edge); }
.back-face .bk-edge { stroke: var(--back-edge); }
.hand-badge {
  font-size:10px; font-weight:700; color:#ffe9b8; white-space:nowrap;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15);
  border-radius:999px; padding:1px 6px; margin-right:3px;
}
.side .backs { flex-direction:column; gap:0; }
.side .backs .back { transform:rotate(90deg); }
.side .backs .back { margin-top:calc((var(--tile-w) - var(--tile-h)) * .55 * var(--side-scale, 1)); }
.side .backs .back:first-of-type { margin-top:0; }
.side .backs .hand-badge { margin-right:0; margin-bottom:4px; }
.side .pzone .phead,
#zone-top .pzone .phead {
  position:fixed; top:calc(max(44px, 9vh)); z-index:4;
  gap:6px; padding:5px 9px; font-size:15px;
  background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.3);
  cursor:pointer;
}
.side .pzone .phead .pava,
#zone-top .pzone .phead .pava { font-size:21px; line-height:1; }
.side .pzone .phead .pwind,
#zone-top .pzone .phead .pwind { font-size:14px; }
.side .pzone .phead .pchips,
#zone-top .pzone .phead .pchips { font-size:15px; }
#zone-left .pzone .phead  { left:calc(36px + env(safe-area-inset-left)); }
#zone-top .pzone .phead   { left:50%; transform:translateX(-50%); }
#zone-right .pzone .phead { right:calc(36px + env(safe-area-inset-right)); }
@media (max-width: 599px) {
  .side .pzone .phead .pname,
  #zone-top .pzone .phead .pname { display:none; }
  #topbar { gap:6px; }
  .lang-btn { padding:6px 10px; font-size:12px; }
  #top-btns { gap:4px; }
  .top-btn { width:38px; height:38px; font-size:19px; }
}
@media (prefers-reduced-motion: reduce) {
  #round-num.mq, .radio-txt.mq { animation:none; }
}
@media (min-width: 600px) {
  .side .pzone .phead .pname,
  #zone-top .pzone .phead .pname { display:inline-block; max-width:60px; }
}
#zone-top .pzone { padding-top:56px; align-items:center; }
#zone-top .backs { gap:1px; }
#zone-top .backs .back {
  width:calc(var(--tile-w) * .47 * var(--side-scale, 1));
  height:calc(var(--tile-h) * .47 * var(--side-scale, 1));
}

.discards .last { box-shadow:0 0 0 2px var(--gold), 0 3px 6px rgba(0,0,0,.5); transform:translateY(-2px); }

.melds { display:flex; gap:4px; align-items:center; }
.melds .meld { display:flex; }
.meld.concealed .tile { filter:brightness(.72) saturate(.7); }
.melds .meld .tile { width:calc(var(--tile-w)*.48); height:calc(var(--tile-h)*.48); border-radius:4px;
  font-size:calc(var(--tile-w)*.23); }
.side .melds { flex-direction:column; }
#zone-top .melds { justify-content:center; gap:6px; }
#zone-top .melds .meld .tile { transform:rotate(180deg); }
#zone-top .melds .meld { gap:2px; }
#zone-top .top-stack { display:flex; align-items:center; justify-content:center; gap:10px; }
#zone-top .top-stack .melds { margin-top:0; }
#zone-top .pzone .top-stack { margin-top:12px; }
.side .pzone { width:100%; align-self:stretch; }
.side-stack { display:flex; flex-direction:column; align-items:center; gap:8px; }
.side .pzone .side-stack,
.side .pzone .backs,
.side .pzone .reveal { position:absolute; top:44%; transform:translateY(-50%); }
.side .pzone .backs,
.side .pzone .reveal { left:50%; transform:translate(-50%,-50%); z-index:1; }
#zone-left .pzone .backs,
#zone-left .pzone .reveal { left:calc(50% - 12px); }
#zone-right .pzone .backs,
#zone-right .pzone .reveal { left:calc(50% + 12px); }
.side .pzone .side-stack { z-index:2; }
#zone-left .pzone .side-stack { right:0; }
#zone-right .pzone .side-stack { left:0; }
.side .melds .meld { flex-direction:column; }
.side .melds .meld .tile { transform:rotate(90deg); }
#zone-right .pzone .melds .meld .tile { transform:rotate(270deg); }
.side .melds .meld .tile + .tile { margin-top:calc((var(--tile-w) - var(--tile-h)) * .48 + 2px); }
.side .flowers-row { flex-direction:column; }
.side .flowers-row .tile { transform:rotate(90deg); }
.side .flowers-row .tile + .tile { margin-top:calc((var(--tile-w) - var(--tile-h)) * .48); }
#zone-top .flowers-row .tile { transform:rotate(180deg); }
#zone-right .pzone .flowers-row .tile { transform:rotate(270deg); }
.side .pzone .backs { top:42%; }
.side .pzone .reveal { top:42%; }

/* One golden frame around the whole central zone so the discard/wall area
   reads as its own region, distinct from the melds of the surrounding
   players (which sit outside it and carry no gold outline). */
#center { position:relative; overflow:hidden; border:2px solid rgba(212,175,55,.6); border-radius:16px; box-shadow:0 0 0 1px rgba(212,175,55,.18), 0 0 22px rgba(212,175,55,.12), inset 0 0 22px rgba(0,0,0,.14); }
#wall-deck {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; justify-content:center; align-items:center;
}

#wall-count {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:6px;
  align-self:center; margin-bottom:8px;
  color:#ffe9b8; font-size:13px; font-weight:700; white-space:nowrap;
  background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.3);
  border-radius:10px; padding:4px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
#wall-count:empty { display:none; }
#wall-count .wc-back {
  width:16px; height:22px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(160deg,var(--back-1),var(--back-2));
  border:1px solid var(--back-edge); box-shadow:0 1px 2px rgba(0,0,0,.4);
  position:relative;
}
#wall-count .wc-back::after {
  content:""; position:absolute; inset:2px; border-radius:2px;
  border:1px solid rgba(255,255,255,.22);
  background:var(--back-pattern, repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 3px, transparent 3px 7px));
}

.me-won {
  align-self:center; margin-bottom:8px;
  color:#ffe9b8; font-size:13px; font-weight:700; white-space:nowrap;
  background:rgba(0,0,0,.55); border:2px solid var(--gold);
  border-radius:10px; padding:4px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 10px rgba(212,175,55,.45);
}
.me-won.hidden { display:none; }
#hand.won .tile .face { box-shadow:0 0 8px rgba(212,175,55,.55); }
#action-bar .btn.won { border-color:var(--gold); color:#ffe9b8; }

#discard-river {
  position:absolute; top:8px; left:8px; z-index:3;
  display:flex; flex-wrap:wrap; align-content:flex-start;
  gap:6px 2px;
  width:calc(100% - 16px);
}
#discard-river .tile { width:min(calc(var(--tile-w) * .6), calc((100% - 18px) / 10)); height:auto; aspect-ratio:48/68;
  border-radius:4px; box-shadow:0 2px 3px rgba(0,0,0,.35); }

#hand-row { position:relative; display:flex; align-items:flex-end; gap:8px; }
#lobby-screen:not(.hidden) ~ #table #hand-row { display:none; }
#hand {
  position:relative; display:flex; flex:1; justify-content:center; align-items:flex-end;
  gap:2px; z-index:3;
  margin:0 12px;
  padding:7px 10px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
}
#hand .tile {
  position:relative; flex:1 1 0; min-width:0; max-width:var(--tile-w);
  aspect-ratio:48/68; height:auto;
  transform:rotateX(7deg); transform-origin:50% 100%;
  transition:transform .12s ease;
  cursor:pointer;
}
#hand .tile.drawn { margin-left:8px; }
#hand .tile.drawn.sel { transform:rotateX(7deg) translateY(-14px); z-index:5; }
#hand .tile.sel { transform:rotateX(7deg) translateY(-14px); z-index:5; }
#hand .tile.sel .face { box-shadow:0 6px 14px rgba(0,0,0,.5), 0 0 0 2.5px var(--gold); }
#hand .tile.discarding,
#hand .tile.drawn.sel.discarding {
  transition:transform .22s ease-in, opacity .22s;
  transform:translateY(-46px) translateX(8px) rotate(5deg) scale(.94);
  opacity:0;
}
#hand .tile.new { animation:dealIn .2s ease-out backwards; }
@keyframes dealIn { from { transform:translateY(-40px) scale(1.2); opacity:0; } to { transform:none; opacity:1; } }
#me-flowers .tile.new { animation:dealIn .2s ease-out backwards; }
.backs.dealing .back { animation:dealBack .22s ease-out backwards; }
@keyframes dealBack {
  from { translate:0 -18px; scale:.85; opacity:0; }
  to   { translate:0 0;    scale:1;    opacity:1; }
}

#me-top-row { position:relative; z-index:2; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-end; gap:4px 12px; min-width:0; margin-bottom:7px; }
#me-melds { display:flex; flex-wrap:nowrap; justify-content:center; gap:12px; align-items:flex-end; min-width:0; }
#me-melds .meld { display:flex; min-width:0; }
#me-melds .meld .tile { width:var(--tile-w); height:auto; aspect-ratio:48/68; border-radius:7px; min-width:0; }
#me-flowers { display:flex; flex-wrap:nowrap; gap:3px; align-items:flex-end; min-width:0; }
#me-flowers .tile { width:var(--tile-w); height:auto; aspect-ratio:48/68; border-radius:7px; min-width:0; }

#tile-defs { position:absolute; width:0; height:0; overflow:hidden; }
.tile { display:inline-block; flex:0 0 auto; }
.tile .face { width:100%; height:100%; display:block; border-radius:7px;
  box-shadow:0 3px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65); }

.btn {
  font-family:inherit; font-size:15px; font-weight:600; color:#fff;
  border:none; border-radius:12px; padding:10px 16px; cursor:pointer;
  background:linear-gradient(#3d9a5f,#257a45);
  box-shadow:0 3px 0 #1a5a31, 0 4px 10px rgba(0,0,0,.35);
  transition:transform .08s;
}
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #1a5a31; }
.btn.primary { background:linear-gradient(#e7c34f,#c99f2e); color:#3a2c05; box-shadow:0 3px 0 #96751f, 0 4px 10px rgba(0,0,0,.35); }
.btn.big { width:100%; font-size:17px; padding:13px; margin-top:10px; }
.btn.small { padding:8px 12px; font-size:13px; }
.btn.danger { background:linear-gradient(#d95c4b,#b23d2e); box-shadow:0 3px 0 #8a2c20, 0 4px 10px rgba(0,0,0,.35); }
.btn.ghost { background:rgba(255,255,255,.14); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn:disabled { opacity:.45; }
.btn .cd { font-size:11px; opacity:.8; margin-left:4px; }

.overlay {
  position:fixed; inset:0; z-index:60;
  background:rgba(4,20,11,.78); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:16px;
  transition:opacity .25s;
}
/* Generic hide: `.hidden` alone removes an element from layout. Overlays
   (`.overlay.hidden`) re-assert `display:grid` below so they still fade in
   and out via opacity instead of popping out of the flow. */
.hidden { display:none; }
.overlay.hidden { display:grid; opacity:0; pointer-events:none; }
#rules-modal { z-index:70; }
#result-banner.hidden,
#turn-timer-wrap.hidden,
#wait-start.hidden,
#menu-panel.hidden,
#react-panel.hidden,
/* display:flex rows with a .hidden class: the flex display rule would
   otherwise override the generic hide (equal specificity, later in the
   sheet), so re-assert display:none here. */
#music-row.hidden,
#table-radio.hidden { display:none; }
.lobby-card {
  width:min(430px, 94vw); max-height:92dvh; overflow-y:auto;
  background:linear-gradient(170deg,#14311f,#0b2414);
  color:#f2ead8; border-radius:22px; padding:26px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 4px #2c4a35;
  text-align:center;
}
.logo { font-size:52px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.lobby-card h1 { font-size:34px; letter-spacing:10px; color:#e8a58f; margin:2px 0 0; font-family:"Kaiti SC","STKaiti","KaiTi",serif; }
.lobby-sub {
  margin:8px 0 14px; font-size:13px; letter-spacing:2px; color:#9fd0ae;
  font-weight:600;
}
.lobby-card .name-row { display:flex; gap:8px; margin-bottom:10px; }
.lobby-card .name-label {
  margin:0 0 4px; color:#b8a888; font-size:12px; letter-spacing:1px;
  text-align:left; font-weight:600;
}
.lobby-card .name-display {
  flex:1; min-width:0; font-size:16px; padding:12px 14px; border-radius:12px;
  border:2px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#f2ead8;
  font-weight:600;
}
.lobby-card .reroll-btn {
  flex:0 0 auto; font-size:18px; padding:8px 14px; border-radius:12px;
  border:2px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.3);
}
.lobby-card .name-title {
  flex:0 0 auto; font-size:14px; font-weight:600; color:#f2ead8; cursor:pointer;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.16);
  border-radius:12px; padding:8px 6px; font-family:inherit;
  box-shadow:0 3px 6px rgba(0,0,0,.3); -webkit-tap-highlight-color:transparent;
}
.lobby-card .name-title option { color:#2b2118; background:#f4ead5; }
.lobby-card .reroll-btn:active { transform:scale(.92); }
.lobby-card .name-stats {
  margin:0; font-size:12px; color:var(--gold); opacity:.9;
  text-align:right; letter-spacing:.3px; min-height:0;
  white-space:nowrap;
}
.name-stats.hidden, .me-stats.hidden { display:none; }
#react-panel .me-stats {
  font-size:12px; color:var(--gold); opacity:.9;
  white-space:nowrap; padding:2px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
}
#lobby-main .btn { width:100%; margin-top:2px; }
#lobby-main #create-btn { margin-top:18px; }
.avatar-picker { display:flex; gap:10px; align-items:center; margin-bottom:12px; text-align:left; }
.avatar-preview {
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-size:32px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.16); flex:0 0 auto;
  box-shadow:0 3px 6px rgba(0,0,0,.3);
}
.avatar-lists { flex:1; min-width:0; }
.avatar-label { font-size:11px; color:#b8a888; margin:2px 0; }
.avatar-row { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:4px; }
.avatar-opt {
  width:40px; height:40px; border-radius:11px; border:2px solid transparent;
  background:rgba(255,255,255,.07); font-size:22px; cursor:pointer; display:grid; place-items:center;
  line-height:1;
}
.avatar-opt.sel { border-color:var(--gold); background:rgba(212,175,55,.18); transform:scale(1.12); }
.avatar-opt.taken { opacity:.28; filter:grayscale(1); pointer-events:none; position:relative; }
.avatar-opt.taken::after { content:"✕"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:18px; color:#c0392b; font-weight:900; opacity:.85; filter:none; }
.mode-picker { margin-bottom:12px; }
.mode-label {
  display:block; margin-bottom:6px; color:rgba(242,234,216,.75); font-size:13px; font-weight:600;
}
.mode-select {
  width:100%; padding:10px 34px 10px 12px; border-radius:12px; border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#f2ead8; font-size:16px; font-weight:600;
  font-family:inherit; cursor:pointer; color-scheme:dark;
}
.room-mode {
  display:inline-block; padding:4px 12px; border-radius:10px; font-size:13px; font-weight:700;
  background:rgba(255,255,255,.09); color:#9fd0ae; border:1px solid rgba(255,255,255,.16); margin-bottom:10px;
}
.rules-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:12px; }
.rtab {
  padding:6px 18px; border-radius:10px; border:2px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07);
  color:#f2ead8; font-size:16px; font-weight:600; font-family:inherit; cursor:pointer;
}
.rtab.active { background:linear-gradient(#e7c34f,#c99f2e); border-color:#96751f; color:#3a2c05; }
.rtab-select { padding-right:26px; color-scheme:dark; }
.rtab-select.active { background:linear-gradient(#e7c34f,#c99f2e); border-color:#96751f; color:#3a2c05; }

.skin-card {
  width:min(400px, 92vw); background:linear-gradient(170deg,#14311f,#0b2414);
  color:#f2ead8; border-radius:22px; padding:24px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 4px #2c4a35; text-align:center;
}
.skin-card h2 { color:#e8a58f; margin-bottom:14px; }
.skin-label { font-size:12px; color:#b8a888; margin:10px 0 6px; text-align:left; }
.skin-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:14px 0 20px; }
.skin-swatch {
  aspect-ratio:1; border-radius:16px; border:3px solid rgba(255,255,255,.22); cursor:pointer;
  position:relative; box-shadow:0 3px 8px rgba(0,0,0,.25);
  transition:transform .1s; -webkit-tap-highlight-color:transparent;
}
.skin-swatch:active { transform:scale(.94); }
.skin-swatch.sel { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.28); }
.skin-swatch.sel::after {
  content:"✓"; position:absolute; top:4px; right:5px; width:19px; height:19px;
  border-radius:50%; background:var(--gold); color:#3a2c05;
  font-size:12px; font-weight:800; line-height:19px; text-align:center;
}
.skin-swatch .lbl {
  position:absolute; left:0; right:0; bottom:6px; font-size:11px; font-weight:700;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.75);
}

.sound-card h2 { margin-bottom:4px; }
.sound-row { display:flex; align-items:center; gap:12px; margin:16px 0 4px; }
.sound-label { font-size:12px; color:#b8a888; width:64px; text-align:left; flex-shrink:0; }
.btn.sound-toggle { width:56px; flex-shrink:0; font-size:24px; }
.btn.sound-toggle.off { opacity:.45; }
.btn.sound-toggle:disabled { cursor:not-allowed; }
.sound-full { font-size:12px; opacity:.75; flex:1; min-width:0; text-align:left; white-space:nowrap; }
.vol-slider { flex:1; min-width:0; accent-color:var(--gold); }

.lobby-top-row {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  margin-bottom:18px;
}
.lobby-top-row .btn { width:auto; margin:0; }
#rules-btn-lobby {
  font-size:14px; font-weight:800; color:#ffe9b8; padding:8px 14px;
  border:2px solid rgba(255,255,255,.25); border-radius:999px; white-space:nowrap;
}

#result-banner {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:30; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  max-width:92%; max-height:calc(100% - 8px);
  text-shadow:0 2px 10px rgba(0,0,0,.85);
  background:rgba(10,20,14,.82); border:1px solid rgba(255,255,255,.22);
  border-radius:18px; padding:18px 26px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  pointer-events:auto;
}
#result-banner .result-scroll {
  overflow-y:auto; min-height:0; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  overscroll-behavior:contain; scrollbar-width:none;
}
/* Scroll-position hints: sticky arrows ride the top/bottom edge of the
   scrolled area while more content sits above/below. The negative margins
   cancel their in-flow footprint, so showing/hiding them never shifts the
   content under them. */
.scroll-hint {
  z-index:5; pointer-events:none; flex:0 0 auto;
  width:34px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  color:#ffd76a; font-size:12px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  margin-left:auto; margin-right:auto;
}
.scroll-hint.up { position:sticky; top:0; margin-bottom:-22px; }
.scroll-hint.down { position:sticky; bottom:0; margin-top:-22px; }
.scroll-hint.hidden { display:none; }
#result-banner .result-title { font-size:32px; font-weight:800; letter-spacing:3px; }
#result-banner .result-title.win { color:#ffd76a; }
#result-banner .result-title.draw { color:#dbe7dd; }
#result-banner .result-sub { font-size:14px; color:#fff; }
#result-banner .pay-line { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:4px; }
#result-banner .pay-pill {
  background:rgba(0,0,0,.3); border-radius:999px; font-size:11px; padding:2px 8px;
  text-shadow:none; white-space:nowrap;
}
#result-banner .pay-pill.neg { color:#ffb3a6; }
#result-banner .pay-pill.pos { color:#9fe8b0; }
#result-banner .result-next, #result-banner #result-countdown { font-size:12px; color:#fff; margin-top:2px; }
#result-banner .result-next-btn {
  pointer-events:auto; margin-top:10px; padding:9px 22px; border:none;
  border-radius:999px; cursor:pointer; font-family:inherit; font-size:14px;
  font-weight:700; color:#3a2c05; background:linear-gradient(#e7c34f,#c99f2e);
  box-shadow:0 3px 0 #96751f, 0 4px 10px rgba(0,0,0,.35); text-shadow:none;
}
#result-banner .result-next-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #96751f; }
#result-banner .result-next-btn:disabled {
  cursor:default; color:#e8e2d2; background:rgba(255,255,255,.14);
  box-shadow:none; transform:none; opacity:.75;
}

.win-tile-line {
  display:flex; align-items:center; gap:10px; margin-top:8px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,215,106,.45);
  border-radius:14px; padding:6px 14px;
}
.win-tile-label { font-size:12px; color:#ffd76a; letter-spacing:1px; white-space:nowrap; }
.win-tile-line .tile.win-tile {
  width:calc(var(--tile-w)*.92); height:calc(var(--tile-h)*.92); border-radius:6px;
  box-shadow:0 0 0 3px rgba(255,215,106,.85), 0 6px 18px rgba(0,0,0,.6);
  animation:win-tile-glow 1.1s ease-in-out infinite;
}
@keyframes win-tile-glow {
  0%, 100% { box-shadow:0 0 0 3px rgba(255,215,106,.85), 0 6px 18px rgba(0,0,0,.6); }
  50% { box-shadow:0 0 0 5px rgba(255,215,106,.45), 0 6px 18px rgba(0,0,0,.6); }
}

#result-banner .fan-table {
  display:flex; flex-direction:column; gap:2px; margin-top:6px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:6px 12px; min-width:190px; text-shadow:none;
}
#result-banner .fan-row { display:flex; justify-content:space-between; gap:18px; font-size:13px; color:#ffe9b8; }
#result-banner .fan-row .fn { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#result-banner .fan-row .fv { font-weight:700; white-space:nowrap; }
#result-banner .fan-row.total { border-top:1px solid rgba(255,255,255,.18); margin-top:2px; padding-top:4px;
  color:#ffd76a; font-weight:800; }
#result-banner .cap-note { font-size:10px; opacity:.75; font-weight:600; }

.profile-card { width:min(320px, 90vw); text-align:center; }
.profile-ava { font-size:46px; line-height:1.2; }
.profile-card h2 { font-size:21px; color:#ffd76a; letter-spacing:1px; word-break:break-all; margin-top:2px; }
.profile-sub { font-size:12px; color:#b8a888; margin:2px 0 10px; }
.profile-row { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:14px;
  padding:8px 12px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; margin-top:6px; }
.profile-row .pl { color:#b8a888; white-space:nowrap; }
.profile-row .pv { font-weight:700; color:#f2ead8; }
.profile-row .pv .gold { color:var(--gold); }
.profile-row .muted { opacity:.65; font-size:11px; font-weight:400; }
.profile-note { font-size:11px; color:#8a7a5a; margin-top:10px; }
#profile-mute { margin-top:12px; }

.table-card { width:min(340px, 92vw); text-align:left; }
#table-sub { text-align:center; }
.table-radio { display:flex; align-items:center; gap:6px; font-size:13px; color:#f2ead8;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:8px 10px; margin-top:10px; }
.radio-skip-btn {
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:14px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.radio-skip-btn:active { transform:scale(.9); }
.radio-skip-btn.voted { background:rgba(212,175,55,.28); border-color:var(--gold); color:#ffd76a; }
.radio-skip-count { flex:0 0 auto; font-size:11px; font-weight:700; color:#9fd0ae; white-space:nowrap; }
.table-players-label { font-size:12px; color:#b8a888; margin:4px 0 6px; text-align:center; }
.table-stats { display:flex; justify-content:center; gap:6px 14px; flex-wrap:wrap;
  font-size:12px; color:#b8a888; margin:0 0 10px; }
.table-stats .table-mode { white-space:nowrap; }
.table-stats .table-mode-cur { color:#ffd76a; font-weight:800; }
.tbl-player { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px; margin-bottom:8px; cursor:pointer; }
.tbl-player:active { background:rgba(255,255,255,.1); }
.tbl-line { font-size:13px; color:#cbbfa8; }
.tbl-head { display:flex; align-items:center; gap:8px; }
.tbl-ava { font-size:20px; line-height:1; }
.tbl-name { font-weight:700; color:#f2ead8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl-wind { flex:0 0 auto; font-size:11px; font-weight:700; color:#ffd76a; background:rgba(255,215,106,.12);
  border-radius:6px; padding:1px 6px; }
.tbl-chips { margin-left:auto; }
.tbl-rec, .tbl-all { margin-top:3px; padding-left:28px; font-size:13px; color:#b8a888; }

#call-banner {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7);
  z-index:28; pointer-events:none; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; transition:opacity .16s ease, transform .22s cubic-bezier(.2,1.6,.4,1);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  padding:14px 28px;
  background:rgba(8,16,11,.82); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; box-shadow:0 10px 34px rgba(0,0,0,.55);
}
#call-banner.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
#call-banner .call-sub {
  font-size:15px; font-weight:700; color:#fff; letter-spacing:1px;
  background:rgba(0,0,0,.45); border-radius:999px; padding:3px 14px;
}
#call-banner .call-title { font-size:38px; font-weight:900; letter-spacing:6px; color:#ffd76a; }
#call-banner .call-tiles { display:flex; gap:4px; margin-top:2px; }
#call-banner .call-tiles .tile {
  width:calc(var(--tile-w)*.62); height:calc(var(--tile-h)*.62); border-radius:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}

#dingque-banner {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:28; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 26px;
  max-width:92vw; max-height:calc(100% - 8px); overflow-y:auto;
  background:rgba(8,16,11,.88); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; box-shadow:0 10px 34px rgba(0,0,0,.55);
}
#dingque-banner.hidden { display:none; }
#dingque-banner .dq-title { font-size:24px; font-weight:800; letter-spacing:2px; color:#ffd76a; line-height:1.1; }
#dingque-banner .dq-sub { font-size:13px; color:#d8c9a8; }
#dingque-banner .dq-timer {
  font-size:30px; font-weight:800; color:#ffd76a; line-height:1;
  margin-top:2px; text-shadow:0 2px 10px rgba(0,0,0,.6);
}
#dingque-banner .dq-hint { font-size:12px; color:#b8a888; max-width:min(72vw, 300px); }
#dingque-banner .dq-suits { display:flex; flex-direction:column; gap:10px; width:100%; }
#dingque-banner .dq-suit {
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:20px; font-weight:800; padding:8px 20px; width:100%;
}
#dingque-banner .dq-suit .dq-tile { width:28px; height:41px; }
#dingque-banner .dq-suit .dq-tile .face { border-radius:4px; }

.void-badge {
  display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  padding:2px 7px; border-radius:999px;
  font-size:11px; font-weight:700; color:#fdf6e3; background:#7a1f12;
  vertical-align:middle;
}
.void-badge .void-tile { width:18px; height:26px; }
.void-badge .void-tile .face { border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.45); }
/* Sichuan: the void badge sits on its own line below the name/chips row
   (the head is a column; the row items live in .phead-row). */
.pzone .phead .void-badge { margin:0; }
#me-void.hidden { display:none; }
/* Sichuan: the player's void badge sits directly above the deck-count pill
   (#wall-count) — centered on it, clear of the counter — instead of the
   react bar. */
#me-void.over-wall {
  position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); z-index:3; margin:0;
  border:1.5px solid rgba(255,215,106,.6);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}

.confetti {
  position:fixed; top:-14px; z-index:44; pointer-events:none;
  width:8px; height:13px; border-radius:2px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform:translateY(108vh) rotate(720deg); opacity:.7; }
}
.tile.fly-ghost {
  position:fixed; z-index:32; pointer-events:none; margin:0;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.result-next { font-size:12px; color:#8a7a5a; margin-top:8px; }
#result-countdown { font-size:13px; color:#1d6b3f; font-weight:700; margin-top:10px; }

#toast {
  position:fixed; top:calc(64px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%) translateY(-20px) scale(.92);
  background:rgba(0,0,0,.92); color:#fff; padding:16px 30px; border-radius:16px;
  font-size:18px; font-weight:600; letter-spacing:.01em; opacity:0; pointer-events:none;
  transition:all .3s cubic-bezier(.2,.8,.2,1); z-index:96;
  max-width:92vw; text-align:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

#conn-overlay {
  z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
}
.conn-box { text-align:center; color:var(--gold); font-weight:700; font-size:16px; }
.conn-spinner {
  width:42px; height:42px; margin:0 auto 14px;
  border:4px solid rgba(212,175,55,.25); border-top-color:var(--gold);
  border-radius:50%; animation:conn-spin 1s linear infinite;
}
@keyframes conn-spin { to { transform:rotate(360deg); } }

/* Join/create in flight: shown while the server round-trip for a join,
   create, or rejoin is outstanding (can take seconds under load). Sits
   under the reconnect overlay so a drop mid-wait surfaces reconnecting.
   Fades in/out with a slight scale so the appear/disappear is smooth. */
#busy-overlay {
  z-index:95; background:rgba(4,20,11,.6); backdrop-filter:blur(2px);
  transition:opacity .3s ease;
}
#busy-overlay .conn-box { transition:transform .3s ease; }
#busy-overlay.hidden .conn-box { transform:scale(.92); }
.busy-text { letter-spacing:1px; }

#loupe {
  position:fixed; z-index:35; pointer-events:none;
  width:clamp(180px, 42vmin, 300px); height:clamp(180px, 42vmin, 300px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,215,106,.85), 0 0 0 9px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.6);
}
#loupe.hidden { display:none; }
#loupe.perma { pointer-events:auto; cursor:grab; touch-action:none; }
#loupe.perma:active { cursor:grabbing; }

/* Server at the hard connection cap: a full-screen notice for refused
   visitors. A slight greyish dim keeps the room list visible behind it but
   blocks taps (the player can look at the tables, not join), with large
   text and a live countdown to the next silent retry. Not a badge. */
#capacity-overlay {
  position:fixed; inset:0; z-index:99;
  display:flex; align-items:flex-start; justify-content:center;
  background:rgba(24,27,25,.55);
  pointer-events:auto; text-align:center;
  padding-top:max(16vh, 96px);
}
.capacity-box { max-width:82vw; }
.capacity-title {
  font-size:clamp(24px, 7vw, 34px); font-weight:800; color:#ffd9a0;
  letter-spacing:1px; text-shadow:0 2px 8px rgba(0,0,0,.85);
  margin:0 0 10px; line-height:1.25;
}
.capacity-sub {
  font-size:15px; color:#f2ead8; opacity:.88; text-shadow:0 1px 5px rgba(0,0,0,.8);
  margin:0 0 16px;
}
.capacity-count {
  font-size:clamp(16px, 4.5vw, 20px); font-weight:700; color:var(--gold);
  letter-spacing:.5px; text-shadow:0 1px 5px rgba(0,0,0,.8);
}
#capacity-overlay.hidden { display:none; }
#loupe-view {
  position:absolute; inset:0; overflow:hidden; border-radius:50%;
  background:rgba(6,16,10,.92);
}
#loupe-view > #table {
  inset:auto; left:0; top:0; transform-origin:0 0;
}

.rules-card {
  position:relative; width:min(460px, 94vw); max-height:92dvh; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  background:linear-gradient(170deg,#14311f,#0b2414); color:#f2ead8;
  border-radius:22px; padding:22px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 4px #2c4a35;
}
.rules-card::-webkit-scrollbar { display:none; }
.rules-x {
  position:absolute; top:10px; right:10px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#e8a58f;
  border:none; font-size:16px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.rules-x:active { transform:scale(.9); }
.rules-card h2 { text-align:center; color:#e8a58f; margin-bottom:12px; }
.leave-card .leave-warn { color:#b8a888; font-size:14px; line-height:1.6; margin:0 0 18px; text-align:center; }
.leave-card .btn { width:100%; margin-top:8px; }
.feedback-card .feedback-sub { color:#b8a888; font-size:14px; line-height:1.6; margin:0 0 14px; text-align:center; }
.feedback-card .feedback-cat,
.feedback-card .feedback-msg {
  width:100%; border-radius:12px; border:1px solid rgba(244,234,213,.25);
  background:rgba(0,0,0,.35); color:#f2ead8; font-size:15px; padding:10px 12px;
  margin-bottom:10px; font-family:inherit; -webkit-appearance:none; appearance:none;
}
.feedback-card .feedback-msg { resize:vertical; min-height:96px; line-height:1.5; }
.feedback-card .feedback-msg::placeholder { color:#8a9a86; }
.feedback-status { text-align:center; color:#9fd0ae; font-size:15px; padding:4px 0; }
.feedback-card .btn { width:100%; margin-top:8px; }
#qr-modal { z-index:75; }
.qr-card { width:min(340px, 92vw); text-align:center; }
.qr-svg {
  margin:6px auto 12px; width:min(232px, 70vw); aspect-ratio:1;
  background:#fff; border-radius:14px; padding:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:grid; place-items:center;
}
.qr-svg svg { width:100%; height:100%; display:block; }
.qr-url {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; color:#9fd0ae; word-break:break-all;
  background:rgba(0,0,0,.35); border:1px solid rgba(244,234,213,.25);
  border-radius:12px; padding:10px 12px; margin:0 0 8px;
  user-select:all; -webkit-user-select:all;
}
.qr-sub { font-size:12.5px; color:#b8a888; line-height:1.55; margin:0 0 6px; }
.qr-card .btn { width:100%; margin-top:8px; }
.rules-body p { font-size:17px; line-height:1.65; margin-bottom:10px; }
.rules-legal {
  display:block; text-align:center; margin-top:12px;
  font-size:12.5px; color:#8fa08a; text-decoration:none;
}
.rules-legal:active { color:#cfd8c4; }
/* Lobby footer: Terms & Privacy (a real link) beside the online brand,
   shown only on the local (LAN) build. */
.lobby-legal-row {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:12px; flex-wrap:wrap;
  font-size:12.5px; color:#8fa08a;
}
.lobby-legal {
  color:#8fa08a; text-decoration:none;
}
.lobby-legal:active { color:#cfd8c4; }
/* maque.club is presented with link styling but is not actually a link
   (the LAN box can't reach it) — so no href, no pointer; link color only,
   no underline. */
.online-link {
  color:#9fd0ae; cursor:default;
}
.online-link.hidden { display:none; }
.rules-body strong { color:#ffd76a; font-weight:700; }
.fan-table { width:100%; border-collapse:collapse; font-size:16px; margin:8px 0 10px; }
.fan-table td { border:1px solid rgba(255,255,255,.16); padding:6px 8px; }
.fan-table td:first-child { white-space:nowrap; font-weight:700; color:#9fd0ae; width:56px; text-align:center; }
.tiny { font-size:12px; color:#8a7a5a; }
.lobby-card h2 { color:#f2ead8; margin-bottom:12px; }
.lobby-card .tiny { color:#b8a888; }
#waiting-screen .tiny { margin-bottom:16px; }

@media (min-width: 900px) {
  :root { --tile-w: 58px; }
  #table { grid-template-columns: 21% 1fr 21%; }
  #myzone { padding-bottom:calc(176px + env(safe-area-inset-bottom)); }
  .pzone .phead { font-size:14px; }
}
@media (max-width: 360px) {
  #action-bar .btn { padding:8px 12px; font-size:14px; min-width:48px; }
}
@media (max-width: 899px) {
  #hand { gap:0; --hand-tile-w: min(var(--tile-w), calc(100% / 14.3)); }
  #hand .tile { flex:0 1 auto; width:var(--hand-tile-w); }
  #hand .tile.drawn { margin-left:2px; }
  body.tw #hand { --hand-tile-w: min(var(--tile-w), calc(100% / 17.3)); }
  #me-melds .meld .tile, #me-flowers .tile { width:min(var(--tile-w), calc((100vw - 20px) / 14.3)); }
  body.tw #me-melds .meld .tile,
  body.tw #me-flowers .tile { width:min(var(--tile-w), calc((100vw - 20px) / 17.3)); }
  .top-btn { width:46px; height:46px; font-size:23px; }
  #action-bar .btn { min-height:42px; }
  .btn { min-height:42px; }
  .mode-select { min-height:42px; }
  .rtab { min-height:40px; }
}
@media (max-height: 720px) and (max-width: 899px) {
  :root { --side-scale: 0.68; }
  .side .pzone .backs { top:42%; }
}
@media (max-width: 700px) {
  #table { grid-template-columns: 20% 1fr 20%; }
}
@media (max-height: 900px) and (min-width: 900px) {
  :root { --side-scale: 0.8; }
}
@media (max-height: 700px) and (min-width: 900px) {
  :root { --side-scale: 0.6; }
}

.games-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:14px 0 14px; }
.games-label { margin:0; color:#b8a888; font-size:12px; letter-spacing:2px; text-align:left; }
/* Lobby layout: the card is a flex column and the games list is the only
   shrinking member, so however many tables are open the list scrolls inside
   itself and the create button below it stays on screen. */
#lobby-screen .lobby-card { display:flex; flex-direction:column; }
#lobby-screen .lobby-card > :not(#lobby-main) { flex-shrink:0; }
#lobby-screen #lobby-main { display:flex; flex-direction:column; min-height:0; }
#lobby-screen #lobby-main > :not(.games-scroll) { flex-shrink:0; }
.games-scroll {
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; scrollbar-width:none;
}
.games-scroll::-webkit-scrollbar { display:none; }
#games-list { display:flex; flex-direction:column; gap:8px; }
.empty-games { color:#b8a888; font-size:13px; padding:14px 0; text-align:center; border:1px dashed rgba(200,180,140,.35); border-radius:12px; }
.game-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:0 0 0 12px; display:flex; flex-direction:row; align-items:center; gap:10px; box-shadow:0 2px 6px rgba(0,0,0,.25); min-height:56px; }
.gc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; padding:6px 10px 6px 0; }
.gc-head { display:flex; align-items:center; gap:6px; }
.gc-name { font-weight:700; color:#f2ead8; font-size:15px; flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-status { font-size:11px; font-weight:600; border-radius:999px; padding:2px 9px; flex-shrink:0; white-space:nowrap; }
.gc-status.waiting { background:#f3e3ae; color:#8a6d1a; }
.gc-status.playing { background:#cde8d3; color:#1d6b3f; }
.gc-status.ended { background:#e3ddd2; color:#7a6a4a; }
.mode-badge { background:#1d6b3f; color:#fdf6e3; font-size:11px; border-radius:999px; padding:2px 9px; flex-shrink:0; }
.mode-badge.tw { background:#7a1f12; }
.gc-seats { display:flex; gap:8px; align-items:center; }
.gc-ava { width:24px; height:24px; border-radius:50%; background:#2c4536; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid rgba(255,255,255,.2); }
.gc-prog { margin-left:auto; font-size:11px; color:#b8a888; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Join is a full-height square strip on the far right of the entry, flush
   against the card's top/bottom/right edges (the card carries no padding
   there; the content keeps its own). #lobby-main .btn forces width:100%,
   so override it here. */
#lobby-main .gc-join {
  flex:0 0 auto; align-self:stretch; width:64px; min-height:0;
  margin:0; padding:0;
  display:grid; place-items:center; font-size:24px; line-height:1;
  border-radius:0 13px 13px 0; box-shadow:none;
}
#lobby-main .gc-join:active { transform:none; }
.gc-join-wait { filter:grayscale(1); opacity:.55; }

.avatar-card { max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.avatar-card h2 { font-size:20px; margin-bottom:0; }
.avatar-card .tiny { margin:2px 0 10px; }
.avatar-card .avatar-picker { margin-bottom:14px; }
.avatar-card .btn { margin-top:8px; }
.avatar-card .btn.primary { margin-top:14px; }
.avatar-btn-row { display:flex; gap:10px; margin-top:14px; }
.avatar-btn-row .btn,
.avatar-btn-row .btn.primary { margin-top:0; }
#avatar-cancel { flex:0 0 25%; }
#avatar-confirm { flex:1; }

.lang-btn {
  font-family:inherit; font-size:14px; font-weight:800; color:#ffe9b8; cursor:pointer;
  background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.35); border-radius:999px;
  padding:8px 16px; user-select:none; -webkit-tap-highlight-color:transparent; flex-shrink:0;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}
#lang-btn-lobby {
  display:inline-block; margin:0; color:#f2ead8;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.25);
}
.lobby-card { position:relative; }

.rules-body h3 { color:#e8a58f; font-size:18px; margin:14px 0 6px; text-align:left; }
.rules-body ul { text-align:left; padding-left:20px; margin-bottom:10px; }
.rules-body li { font-size:16px; line-height:1.6; margin-bottom:4px; }
.rule-tiles { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:6px 0 12px; }
.rt-label { font-size:12px; font-weight:700; color:#b8a888; min-width:76px; text-align:right; flex:0 0 auto; }
.rt-group { display:flex; gap:2px; padding:4px 6px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); border-radius:8px; }
.rt-tile { width:21px; height:30px; border-radius:3px; }
.tile-ref { margin:4px 0 14px; }
.tref-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.tref-label { flex:0 0 86px; font-size:12px; font-weight:700; color:#b8a888; text-align:right; }
.tref-tiles { display:flex; flex-wrap:wrap; gap:4px 6px; }
.tref-cell { display:flex; flex-direction:column; align-items:center; gap:1px; }
.tref-num { font-size:10px; font-weight:700; color:#9fd0ae; line-height:1; }
@media (max-width: 480px) {
  .tref-row { flex-direction:column; align-items:flex-start; gap:3px; }
  .tref-label { text-align:left; }
}

#react-panel {
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:30;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  max-width:96vw; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:8px 12px; backdrop-filter:blur(4px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
#action-bar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
#action-bar .btn { min-width:56px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#action-bar .tile { width:calc(var(--tile-w) * .42); height:calc(var(--tile-h) * .42); }
#action-bar .btn.seq { gap:2px; padding-left:8px; padding-right:8px; min-width:0; }
#action-bar .btn.seq .tile { width:calc(var(--tile-w) * .28); height:calc(var(--tile-h) * .28); }
#action-bar .tile.claim .face { box-shadow:0 0 0 2.5px var(--gold); border-radius:4px; }
#react-emojis { display:flex; justify-content:center; align-items:center; gap:4px; }
.react-opt {
  font-size:24px; background:none; border:none; cursor:pointer; padding:2px 4px;
  transition:transform .1s; -webkit-tap-highlight-color:transparent;
}
.react-opt:active { transform:scale(1.35); }

.fx-emoji {
  position:absolute; left:50%; bottom:32%; z-index:25;
  font-size:52px; line-height:1; pointer-events:none;
  text-shadow:0 0 14px rgba(255,255,255,.55), 0 2px 12px rgba(0,0,0,.6);
  -webkit-text-stroke:1px rgba(0,0,0,.22);
  animation:fxfloat 5s ease-out forwards;
}
/* own reactions pop centered on the hand's top edge (right on the pieces)
   and float upward, clear of the react panel */
.fx-emoji.self { bottom:auto; top:-26px; z-index:25; }
@keyframes fxfloat {
  0%   { transform:translate(-50%, 0) scale(.4); opacity:0; }
  6%   { transform:translate(-50%, -16px) scale(1.35); opacity:1; }
  14%  { transform:translate(-50%, -28px) scale(1); }
  88%  { transform:translate(-50%, -72px) scale(1); opacity:1; }
  100% { transform:translate(-50%, -92px) scale(1.05); opacity:0; }
}

#turn-timer-wrap {
  height:5px; width:100%; margin:5px 0;
  background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden;
}
#turn-timer {
  height:100%; width:0%;
  background:linear-gradient(90deg,#7ee08a,#3d9a5f);
  border-radius:3px; transition:width .3s linear;
}
#turn-timer.urgent { background:#e05a4b; animation:timerflash .5s steps(2) infinite; }
@keyframes timerflash { 50% { opacity:.5; } }

.wait-top-row { display:flex; align-items:center; justify-content:center; gap:10px; margin:4px 0 4px; }
#waiting-mode { color:#b8a888; font-size:13px; }
.wait-humans { color:#ffd76a; font-size:12px; font-weight:700; margin:2px 0 10px; letter-spacing:.5px; }
#waiting-seats { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.wait-seat {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14); border-radius:12px;
  color:#f2ead8;
}
.wait-seat.empty { border-style:dashed; color:#b8a888; justify-content:center; }
.wait-seat.empty, .wait-seat.open { animation:seat-pulse 2.2s ease-in-out infinite; }
@keyframes seat-pulse {
  0%, 100% { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.07); }
  50% { border-color:rgba(212,175,55,.65); background:rgba(212,175,55,.12); }
}
.ws-ava { width:32px; height:32px; border-radius:50%; background:#2c4536; display:grid; place-items:center; font-size:16px; }
.ws-name { font-weight:600; text-align:left; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.you-tag { background:var(--gold); color:#3a2c05; border-radius:8px; padding:2px 8px; font-size:11px; font-weight:700; }
.bot-tag { background:rgba(255,255,255,.14); color:#9fd0ae; border-radius:8px; padding:2px 8px; font-size:11px; }
.wait-hint {
  font-size:13.5px; line-height:1.55; color:#ffe9b8; text-align:left;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.4);
  border-radius:12px; padding:10px 14px; margin:0 0 10px;
}
.wait-btn-row { display:flex; gap:10px; margin-top:12px; }
.wait-btn-row #wait-leave,
.wait-btn-row #wait-start { margin-top:0; }
#wait-leave { flex:0 0 25%; }
#wait-start { flex:1; }
#online-pill {
  margin-left:10px; font-size:11px; font-weight:700; color:#9fd0ae;
  background:rgba(30,132,73,.25); border:1px solid rgba(159,208,174,.35);
  border-radius:999px; padding:2px 9px; vertical-align:middle;
}

.reveal { display:flex; gap:2px; align-items:center; }
.reveal .tile { width:calc(var(--tile-w)*.55); height:calc(var(--tile-h)*.55); border-radius:4px;
  font-size:calc(var(--tile-w)*.26); box-shadow:0 1px 2px rgba(0,0,0,.4); }
.side .reveal { flex-direction:column; }
.side .reveal .tile { transform:rotate(90deg); margin-top:calc((var(--tile-w) - var(--tile-h)) * .55); }
.side .reveal .tile:first-child { margin-top:0; }
#zone-top .reveal .tile { transform:rotate(180deg); }
#zone-right .pzone .reveal .tile { transform:rotate(270deg); }
.pzone.winner .phead {
  border-color:var(--gold); background:rgba(0,0,0,.45);
  box-shadow:0 0 12px rgba(212,175,55,.7);
}
.pzone.winner .backs .back,
.pzone.winner .reveal .tile,
.pzone.winner .melds .tile,
.pzone.winner .flowers-row .tile {
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 7px rgba(212,175,55,.6);
}

/* Landscape / short-viewport phones. Vertical space is scarce, so the whole
   table is re-budgeted: the bottom "my zone" keeps the hand + melds/flowers in
   one compact stack (deck counter pill, melds, hand), and the action/emote bar
   collapses to a single row so it never eats the space or tiles above it. */
@media (max-height: 480px) {
  :root { --tile-w: clamp(18px, 7.6vh, 33px); --side-scale: 0.44; }
  #table { grid-template-rows: 34px auto 1fr minmax(156px, 43vh); }
  #topbar { padding-top:2px; gap:6px; font-size:11px; }
  .wind-chip { min-width:22px; padding:2px 6px; font-size:12px; }
  .lang-btn { padding:4px 10px; font-size:12px; }
  #top-btns { gap:4px; }
  .top-btn { width:34px; height:34px; font-size:18px; border-radius:8px; }
  #menu-panel { max-height:calc(100vh - 60px); overflow-y:auto; }
  .side .pzone .phead,
  #zone-top .pzone .phead { top:36px; }
  #zone-top .pzone { padding-top:46px; }
  /* The bottom stack is packed from the bottom (hand, melds, counter pill),
     so shrink each layer enough that the melds/flowers stay on their own row
     above the hand and never spill up into the discard/wall area. */
  #myzone { padding-bottom:calc(48px + env(safe-area-inset-bottom)); }
  #me-top-row { min-height:0; }
  #me-melds .meld .tile,
  #me-flowers .tile { width:calc(var(--tile-w)*.45) !important; }
  #wall-count { font-size:11px; padding:3px 8px; gap:4px; }
  #wall-count .wc-back { width:12px; height:18px; }
  .side .pzone .backs { top:42%; }
  /* One compact row, kept as a centered pill (not full-width): stats on the
     left, action buttons on the right, emojis + turn timer between. Labels
     never wrap ("Waiting for AI"). */
  #react-panel {
    flex-direction:row; flex-wrap:nowrap; justify-content:center;
    bottom:calc(4px + env(safe-area-inset-bottom));
    padding:4px 12px; gap:4px 8px; border-radius:12px; max-width:96vw;
  }
  #react-panel > #me-stats { order:0; }
  #react-panel > #me-void { order:1; }
  #react-panel > #react-emojis { order:2; }
  #react-panel > #turn-timer-wrap { order:3; }
  #react-panel > #action-bar { order:4; }
  #action-bar { flex:0 1 auto; flex-wrap:nowrap; min-width:0; }
  #action-bar .btn { min-height:32px; padding:5px 9px; font-size:13px; white-space:nowrap; }
  #turn-timer-wrap { flex:0 0 56px; align-self:center; height:4px; margin:0; }
  #react-emojis { gap:2px; }
  .react-opt { font-size:17px; padding:0 2px; }
  /* The center box is short in landscape, so the banners must not be clipped
     by it — float them over the whole table instead. */
  #result-banner, #call-banner, #dingque-banner { position:fixed; }
  #result-banner { max-height:calc(100vh - 16px); }
  /* Discard river: one row, horizontally scrolled to the latest discard (the
     rightmost tile). The centered deck pill sits free of the row so its second
     row never hides behind the frame. */
  #discard-river {
    flex-wrap:nowrap; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-right:8px;
  }
  #discard-river::-webkit-scrollbar { display:none; }
  #discard-river .tile { flex:0 0 auto; width:calc(var(--tile-w)*.8); height:auto; }
  .river-hint {
    position:absolute; top:6px; z-index:4;
    width:20px; height:28px; border-radius:999px;
    display:grid; place-items:center;
    background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
    color:#ffd76a; font-size:11px; line-height:1;
    cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent;
    box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  .river-hint:active { transform:scale(.9); }
  .river-hint.left { left:6px; }
  .river-hint.right { right:6px; }
  .river-hint.hidden { display:none; }

  /* --- Pre-game screens in landscape: go wide and reflow into the horizontal
     space so they fit the short height (portrait keeps the narrow card). --- */
  .lobby-card, .skin-card, .rules-card, .qr-card { max-width:94vw; }

  /* Lobby: compact header + two panes (identity/create left, tables right). */
  #lobby-screen .lobby-card { width:min(920px, 94vw); max-height:94dvh; padding:16px 22px; }
  #lobby-screen .lobby-card .logo { font-size:30px; }
  #lobby-screen .lobby-card h1 { font-size:22px; letter-spacing:7px; }
  #lobby-screen .lobby-sub { font-size:12px; margin:2px 0 8px; }
  #lobby-screen .lobby-top-row { margin-bottom:8px; }
  #lobby-screen .lobby-card > :not(#lobby-main) { flex:0 0 auto; }
  #lobby-screen #lobby-main {
    display:grid; flex:1 1 auto; min-height:0;
    grid-template-columns:minmax(300px, 1fr) 1.5fr;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "name   ghead"
      "namerow gscroll"
      "create  gscroll"
      "legal   gscroll";
    gap:10px 26px; text-align:left;
  }
  #lobby-main .name-label { grid-area:name; align-self:end; }
  #lobby-main .name-row { grid-area:namerow; }
  #lobby-main .name-display { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #lobby-main .games-row { grid-area:ghead; align-self:start; }
  #lobby-main .games-scroll { grid-area:gscroll; min-height:0; }
  #lobby-main #create-btn { grid-area:create; align-self:start; margin-top:0; }
  #lobby-main .lobby-legal-row { grid-area:legal; align-self:end; margin-top:4px; }

  /* Waiting room: seats wrap into a row in the wide card. */
  #waiting-screen .lobby-card { width:min(880px, 94vw); max-height:94dvh; }
  #waiting-seats { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  #waiting-seats .wait-seat { max-width:none; }
  #waiting-screen .lobby-card h2 { font-size:20px; margin-bottom:2px; }
  #waiting-screen .wait-top-row { margin:2px 0; }
  #waiting-screen .wait-humans { margin:2px 0 8px; }
  #waiting-screen .wait-hint { font-size:11.5px; line-height:1.4; padding:6px 10px; margin:0 0 8px; }
  #waiting-screen #wait-qr { margin-top:0; padding:9px; }
  #waiting-screen .wait-btn-row { margin-top:8px; }

  /* Avatar picker: wide card so the grids reflow into more columns. */
  #avatar-dialog .lobby-card.avatar-card { width:min(880px, 94vw); max-height:92dvh; padding:14px 22px; }
  #avatar-dialog .avatar-picker { gap:16px; margin-bottom:10px; }
  #avatar-dialog .avatar-preview { width:48px; height:48px; font-size:26px; }
  #avatar-dialog .avatar-opt { width:34px; height:34px; font-size:18px; border-radius:9px; }
  #avatar-dialog .avatar-row { gap:4px; }
  #avatar-dialog .avatar-card .mode-label { margin:0 0 3px; }
  #avatar-dialog .avatar-card .mode-select { min-height:36px; }
  #avatar-dialog .avatar-card .mode-picker { margin-bottom:6px; }
  #avatar-dialog .avatar-card .btn { margin-top:4px; }
  #avatar-dialog .avatar-card .btn.primary { margin-top:8px; }
  #avatar-dialog .avatar-btn-row { margin-top:8px; }

  /* Skin / sound panels: wide cards, more swatches per row. */
  #skin-panel .skin-card, #sound-panel .skin-card { width:min(640px, 94vw); }
  #skin-panel .skin-grid { grid-template-columns:repeat(6, 1fr); }

  /* Rules modal: wide card (still scrolls for the long text). */
  #rules-modal .rules-card { width:min(900px, 94vw); max-height:94dvh; }

  /* Small dialogs: widen so they read well in landscape. */
  #profile-modal .rules-card, #qr-modal .qr-card { width:min(520px, 92vw); }
  #leave-modal .rules-card, #tablegone-modal .rules-card,
  #table-modal .rules-card, #feedback-modal .rules-card { width:min(620px, 92vw); }
}