:root {
  color-scheme: dark;
  --felt-light:#2b915b;
  --felt:#197146;
  --felt-dark:#0b4831;
  --surface:rgba(5, 20, 14, .78);
  --surface-soft:rgba(8, 29, 20, .66);
  --line:rgba(255, 244, 214, .18);
  --gold:#ffc93c;
  --gold-dark:#a66a00;
  --blue:#65d2ff;
  --red:#e2413e;
  --text:#fff8ea;
  --muted:rgba(255, 248, 234, .72);
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 18px 40px rgba(0, 0, 0, .32);
  --touch:44px;
  --card-width:64px;
  --font-display:"ZCOOL XiaoWei","Noto Sans SC",serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100dvh; overflow-x:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,201,60,.12), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(43,145,91,.35), transparent 28%),
    linear-gradient(165deg, #0a2a1c 0%, #072017 48%, #04150f 100%);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px; line-height:1.5;
}

button {
  min-height:var(--touch); border:0; border-radius:14px; padding:12px 18px;
  background:rgba(9, 33, 23, .78); color:var(--text); font-weight:800; cursor:pointer;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
button:hover:not(:disabled):not(.card) { background:rgba(13, 44, 30, .9); }
button:active:not(:disabled):not(.card) { transform:scale(.97); }
button.primary {
  background:linear-gradient(180deg,#ffd35c,#f8ab21);
  color:#3d2200;
  box-shadow:0 12px 26px rgba(248, 171, 33, .28), inset 0 -3px 0 rgba(114, 61, 0, .34);
}
button.primary:hover:not(:disabled) { background:linear-gradient(180deg,#ffdf78,#ffb62f); }
button.ghost {
  background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:700;
}
button.ghost:hover:not(:disabled) { color:var(--text); border-color:rgba(255,201,60,.4); background:rgba(255,248,234,.06); }
button.ghost.compact { min-height:34px; padding:6px 12px; font-size:12px; border-radius:999px; }
button:disabled { opacity:.38; cursor:not-allowed; transform:none; }
:is(button,input,select,[tabindex]):focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

.panel {
  display:none; max-width:760px; margin:auto;
  padding:calc(16px + env(safe-area-inset-top)) 14px calc(110px + env(safe-area-inset-bottom));
}
.panel.active { display:block; }
h1,h2,h3 { margin:.2em 0; }
h1 {
  font-family:var(--font-display);
  font-size:clamp(56px,16vw,78px); color:var(--gold); text-align:center;
  letter-spacing:.08em;
  text-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 40px rgba(255,201,60,.18);
  animation:brand-in .7s cubic-bezier(.2,.8,.2,1) both;
}
label,input,select { display:block; width:100%; }
label { margin:14px 0 6px; color:var(--muted); font-size:13px; }
input,select {
  min-height:var(--touch); border:1px solid var(--line); background:var(--surface-soft);
  color:#fff; padding:13px; border-radius:12px; font:inherit;
}
input::placeholder { color:rgba(255,248,234,.45); }

#login {
  width:100%; max-width:430px; padding-left:18px; padding-right:18px; padding-top:8dvh;
}
.login-hero { text-align:center; margin-bottom:8px; }
.brand-mark {
  margin:0 0 6px; color:rgba(255,201,60,.72); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  animation:fade-up .55s ease both;
}
.login-lead {
  margin:0 auto 4px; max-width:22em; color:var(--muted); font-size:14px; line-height:1.45;
  animation:fade-up .65s ease .08s both;
}
#login button { width:100%; margin-top:16px; }
#login .ghost { margin-top:12px; }
.join-row { display:grid; grid-template-columns:1fr 104px; gap:10px; margin-top:12px; }
#lobby button { display:block; width:100%; margin-top:10px; }
#lobby .ghost.compact { width:auto; margin:0; }
.rounds-setting { max-width:280px; margin:12px auto 0; }
.rounds-setting label { text-align:center; }
.muted { color:var(--muted); font-size:13px; text-align:center; }
header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.back { width:42px; padding:10px 0; }
.header-right { display:flex; align-items:center; gap:8px; pointer-events:auto; }
.rules-fab { pointer-events:auto; }

.avatar {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,248,234,.16);
  border:2px solid rgba(255,248,234,.32); font-size:13px; font-weight:900;
}
.player-card {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border:1px solid var(--line); padding:12px;
  border-radius:var(--radius); margin:8px 0; box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.player-card.emperor { border-color:rgba(255,201,60,.7); box-shadow:0 0 22px rgba(255,201,60,.18); }
.player-card.turn { border-color:rgba(101,210,255,.72); box-shadow:0 0 26px rgba(101,210,255,.22); transform:translateY(-2px); }
.player-card.finished { opacity:.66; }

#table { padding:0; max-width:none; }
#table.active {
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.1), transparent 36%),
    radial-gradient(circle at 50% 48%, var(--felt-light), var(--felt) 44%, var(--felt-dark));
  box-shadow:inset 0 0 120px rgba(0,0,0,.5);
}
.table-header {
  position:relative; z-index:5; align-items:flex-start;
  padding:calc(10px + env(safe-area-inset-top)) 12px 0;
  pointer-events:none;
}
.room-tag,.phase-pill {
  display:inline-flex; align-items:center; min-height:28px; padding:4px 11px;
  border:1px solid var(--line); border-radius:99px;
  background:rgba(5,20,14,.58); color:var(--text);
  font-size:12px; font-weight:700;
}
.phase-pill { color:var(--gold); border-color:rgba(255,201,60,.38); }
.table-stage {
  position:relative; flex:1; min-height:0;
  padding:8px calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
}
.table-seats {
  position:absolute; inset:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.seat-card {
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  transform:translate(-50%,-50%);
  width:min(34vw,136px); height:154px; flex-direction:column; align-items:center; gap:5px;
  padding:8px 8px 7px; text-align:center; z-index:1;
}
.seat-card.turn { z-index:2; transform:translate(-50%,-52%); border-color:rgba(255,201,60,.74); }
.seat-card .avatar {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,248,234,.16);
  border:2px solid rgba(255,248,234,.32); font-size:13px; font-weight:900; letter-spacing:.04em;
}
.seat-card.turn .avatar {
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,201,60,.22), 0 0 18px rgba(255,201,60,.48);
  animation:turn-glow 1.8s ease-in-out infinite;
}
.avatar-row { display:flex; align-items:center; gap:7px; justify-content:center; }
.seat-card .avatar-row strong {
  max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; line-height:1.2;
}
.seat-card small { color:var(--muted); font-size:10px; line-height:1.2; }
.tags { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.tag {
  font-size:10px; padding:2px 6px; border-radius:99px;
  background:rgba(255,248,234,.13); white-space:nowrap;
}
.tag.gold { background:var(--gold); color:#371f00; }
.tag.blue { background:var(--blue); color:#01222e; }
.tag.offline { background:rgba(226,65,62,.22); color:#ffc8c2; }

.play-area {
  width:100%; height:54px; margin-top:2px;
  display:grid; align-content:center; justify-items:center;
  overflow:hidden;
}
.play-stack { display:flex; align-items:center; }
.played-cards {
  display:flex; align-items:center; justify-content:center;
  min-width:42px; max-width:100%; overflow:hidden;
}
.play-summary {
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10px; line-height:1.2;
}
.mini-card {
  width:var(--mini-width,28px); height:calc(var(--mini-width,28px) * 1.4);
  margin-left:-8px; border:1px solid rgba(43,55,76,.24); border-radius:4px;
  background:linear-gradient(180deg,#fff,#f4ecdb);
  color:#182f4a; font-size:9px; line-height:1; font-weight:900;
  display:grid; grid-template-rows:auto auto; align-content:center; justify-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  animation:mini-card-in .28s cubic-bezier(.2,.8,.2,1) both;
}
.mini-card b { font-size:10px; }
.mini-card small { font-size:9px; line-height:1; }
.mini-card:first-child { margin-left:0; }
.mini-card.red { color:var(--red); }
.mini-card.joker {
  width:27px; background:linear-gradient(180deg,#fff7d9,#ffd981);
  color:#7a3c00;
}
.pass-badge {
  padding:2px 8px; border-radius:99px;
  background:rgba(226,65,62,.16); border:1px solid rgba(226,65,62,.38);
  color:#ffc8c2; font-size:10px; font-weight:900;
}

.hand-zone {
  flex:0 0 auto; position:relative; z-index:3;
  padding:4px 12px 8px; margin-bottom:96px;
}
#hand { position:relative; min-height:194px; padding-top:24px; }
.card {
  position:absolute; left:var(--x,0); top:calc(var(--y,0px) + 24px);
  width:var(--card-width); height:94px;
  border-radius:11px; border:1px solid rgba(48,66,92,.22);
  background:linear-gradient(165deg,#fff 0%,#f9f4e7 64%,#ecdfc4 100%);
  color:#183148; text-align:left; padding:5px 6px; font-weight:900;
  box-shadow:0 7px 14px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.72);
  user-select:none;
  transition:left .16s ease, top .16s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card.red { color:#d4233a; }
.card.selected {
  transform:translateY(-25px);
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 16px 28px rgba(255,201,60,.2);
}
.card.selected.valid {
  border-color:#4ade80;
  box-shadow:0 0 0 2px #4ade80, 0 16px 28px rgba(74,222,128,.22);
}
.card.selected.invalid {
  border-color:var(--red);
  box-shadow:0 0 0 2px var(--red), 0 16px 28px rgba(226,65,62,.24);
}
.card:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.card.joker {
  width:72px; background:linear-gradient(165deg,#fff7d9,#ffd981);
  color:#7a3c00; border-color:rgba(122,60,0,.24);
}
.card .corner {
  display:flex; flex-direction:column; line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,.56);
}
.card .corner b { font-size:15px; }
.card .corner i { font-style:normal; font-size:15px; }
.card .face {
  position:absolute; right:7px; bottom:5px; font-size:26px; opacity:.76;
}
.card.joker .face { font-size:32px; opacity:1; }

.action-hint { min-height:22px; margin:6px 2px 0; color:var(--text); font-size:14px; font-weight:700; text-align:center; }
.series-score { min-height:20px; margin:2px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.actions {
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:grid; grid-template-columns:1fr 1fr 2fr; gap:10px;
  padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background:linear-gradient(transparent,rgba(2,14,9,.94) 48%);
}
.actions button { min-height:54px; border-radius:99px; font-size:16px; }
#passButton:not(:disabled) {
  background:#fff; color:#d03330;
  border:3px solid #d03330;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}
#passButton:not(:disabled):hover { background:#fff3f2; color:#b52724; }
#playButton:not(:disabled) { animation:ready-pulse 1.6s ease-in-out infinite; }

.hidden { display:none !important; }
#modal {
  position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px;
  background:rgba(1,12,7,.72); backdrop-filter:blur(5px);
}
.modal-card {
  width:min(94vw,440px); max-height:78dvh; overflow:auto;
  background:linear-gradient(180deg,rgba(8,35,24,.98),rgba(5,22,15,.98));
  border:1px solid rgba(255,201,60,.26); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow); animation:modal-in .24s cubic-bezier(.2,.8,.2,1) both;
}
#modalTitle { color:var(--gold); }
#modalBody { display:grid; gap:8px; margin:12px 0; }
.choice {
  text-align:left; background:rgba(255,248,234,.1); min-height:48px; font-weight:700;
}
.choice:hover:not(:disabled) { background:rgba(255,248,234,.18); }
.choice.active { outline:2px solid var(--gold); }
.round-result { margin:0; color:var(--gold); font-size:24px; font-weight:900; text-align:center; }
.round-result.draw { color:var(--blue); }
.score-board {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-soft);
  font-weight:800; text-align:center;
}
.score-board small { color:var(--muted); font-weight:500; }

#log {
  position:fixed; top:calc(58px + env(safe-area-inset-top)); right:12px; z-index:4;
  display:none; width:min(280px,30vw); max-height:152px; overflow:auto;
  color:rgba(255,248,234,.82); font-size:11px; line-height:1.45;
  background:rgba(3,17,11,.66); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px; scrollbar-width:thin; pointer-events:none;
}

.connection {
  position:fixed; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:20;
  padding:8px 12px; border-radius:99px; background:rgba(10,22,33,.92); border:1px solid var(--line);
  color:var(--text); font-size:13px; box-shadow:var(--shadow);
}
.toast {
  position:fixed; left:50%; bottom:calc(108px + env(safe-area-inset-bottom)); z-index:25;
  transform:translateX(-50%);
  padding:10px 16px; border-radius:999px;
  background:rgba(5,22,15,.94); border:1px solid rgba(255,201,60,.35);
  color:var(--gold); font-size:13px; font-weight:800; box-shadow:var(--shadow);
  animation:fade-up .28s ease both;
}
.rotate-gate {
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:24px; background:rgba(2,12,8,.92); backdrop-filter:blur(8px);
}
.rotate-card {
  width:min(92vw,360px); text-align:center;
  background:linear-gradient(180deg,rgba(8,35,24,.98),rgba(5,22,15,.98));
  border:1px solid rgba(255,201,60,.28); border-radius:var(--radius-lg);
  padding:28px 22px; box-shadow:var(--shadow);
}
.rotate-icon {
  width:72px; height:72px; margin:0 auto 12px; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(255,201,60,.12); border:1px solid rgba(255,201,60,.28);
  animation:rotate-nudge 1.6s ease-in-out infinite;
}
.phone-shape {
  width:22px; height:36px; border:2px solid var(--gold); border-radius:5px;
  box-shadow:inset 0 -4px 0 rgba(255,201,60,.35);
}
.rotate-card h2 { color:var(--gold); font-family:var(--font-display); margin:0 0 8px; }
.rotate-card p { margin:0 0 16px; color:var(--muted); }
.rotate-card .primary { width:100%; }
.rotate-card .muted { margin-top:14px; margin-bottom:0; }
.rules-panel { text-align:left; }
.rules-order {
  margin:0 0 10px; padding:10px 12px; border-radius:12px;
  background:rgba(255,201,60,.1); border:1px solid rgba(255,201,60,.28);
  color:var(--gold); font-weight:800; line-height:1.45;
}
.rules-panel ul { margin:0; padding-left:1.1em; display:grid; gap:8px; color:var(--muted); font-size:13px; }
.rules-panel strong { color:var(--text); }

@media (max-width:360px) {
  .actions { grid-template-columns:1fr 1fr; }
  .actions #playButton { grid-column:1 / -1; }
  .seat-card { width:min(44vw,128px); height:146px; }
  .play-area { height:50px; }
  #hand { height:186px; }
}
@media (min-width:720px) {
  :root { --card-width:72px; }
  .seat-card { width:min(22vw,148px); height:162px; }
  .play-area { height:58px; }
  #hand { height:206px; }
  .card .face { font-size:30px; }
}
@media (min-width:900px) {
  #log { display:block; }
}

@keyframes turn-glow {
  0%,100% { box-shadow:0 0 0 2px rgba(255,201,60,.22), 0 0 14px rgba(255,201,60,.32); }
  50% { box-shadow:0 0 0 4px rgba(255,201,60,.2), 0 0 24px rgba(255,201,60,.54); }
}
@keyframes ready-pulse {
  0%,100% { box-shadow:0 12px 26px rgba(248,171,33,.26), inset 0 -3px 0 rgba(114,61,0,.34); }
  50% { box-shadow:0 12px 36px rgba(248,171,33,.44), inset 0 -3px 0 rgba(114,61,0,.34); }
}
@keyframes mini-card-in {
  from { opacity:0; transform:translateY(10px) scale(.88); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes modal-in {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes brand-in {
  from { opacity:0; transform:translateY(18px) scale(.94); letter-spacing:.2em; }
  to { opacity:1; transform:translateY(0) scale(1); letter-spacing:.08em; }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes rotate-nudge {
  0%,100% { transform:rotate(-18deg); }
  50% { transform:rotate(72deg); }
}

@media (orientation: landscape) and (max-height: 480px) {
  .seat-card { width:min(22vw,120px); height:118px; padding:6px; }
  .seat-card .avatar { width:28px; height:28px; font-size:11px; }
  .play-area { height:40px; }
  .hand-zone { margin-bottom:78px; padding-top:0; }
  #hand { min-height:110px; padding-top:14px; }
  .card { height:78px; width:54px; }
  .card.joker { width:60px; }
  .card .face { font-size:20px; }
  .actions {
    padding:8px calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }
  .actions button { min-height:44px; font-size:14px; }
  .action-hint { font-size:12px; min-height:18px; }
  .series-score { font-size:10px; }
  .table-header { padding-top:calc(6px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}