:root {
  --ink: #f7f4e8;
  --muted: rgba(236, 245, 239, 0.62);
  --gold: #d8b66a;
  --gold-bright: #f1d58e;
  --red: #c73b38;
  --table: #0b4439;
  --table-deep: #062e29;
  --panel: rgba(2, 23, 21, 0.72);
  --card-size-adjust: 0px;
  --table-tint: rgba(255,255,255,0);
  --ui-contrast: 1;
  --table-saturation: 1;
  --hand-spacing: .61;
  --hand-overlap: -24px;
  --selection-lift: 1;
  --selection-lift-offset: -20px;
  --hand-top-room: 8px;
  --hand-clearance: 0px;
  --motion-hero: .7s;
  --motion-deal: .36s;
  --motion-play: .22s;
  --motion-float-card: 5s;
  --motion-float-one: 7s;
  --motion-float-two: 8s;
  --motion-float-three: 9s;
  --motion-aurora: 24s;
  --motion-transition: .25s;
  --card-w: clamp(calc(42px + var(--card-size-adjust)), calc(4.45vw + var(--card-size-adjust)), calc(66px + var(--card-size-adjust)));
  --card-h: calc(var(--card-w) * 1.42);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 105, 88, 0.3), transparent 34%),
    linear-gradient(145deg, #071815, #020a09 72%);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

.view-hidden { display:none !important; }
.home-screen,.game-shell { filter:contrast(var(--ui-contrast)); }

.home-screen { position:relative; min-height:100vh; min-height:100dvh; overflow:hidden; display:grid; grid-template-rows:82px 1fr 38px; background:radial-gradient(circle at 68% 42%,rgba(22,108,87,.32),transparent 30%),radial-gradient(circle at 20% 0,rgba(147,101,39,.14),transparent 28%),linear-gradient(145deg,#071b17,#020b09 68%); isolation:isolate; }
.home-screen::before { content:""; position:absolute; inset:82px 5vw 38px; z-index:-2; border:1px solid rgba(216,182,106,.16); border-radius:46% 54% 48% 52%; transform:rotate(-3deg); }
.home-aurora { position:absolute; z-index:-3; width:64vw; height:64vw; right:-18vw; top:-22vw; border-radius:50%; background:conic-gradient(from 30deg,rgba(216,182,106,.1),rgba(38,153,126,.13),transparent 65%); filter:blur(24px); animation:aurora-spin var(--motion-aurora) linear infinite; }
.home-nav { display:flex; align-items:center; justify-content:space-between; padding:0 max(clamp(20px,5vw,76px),env(safe-area-inset-right,0px)) 0 max(clamp(20px,5vw,76px),env(safe-area-inset-left,0px)); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(1,13,11,.52); backdrop-filter:blur(16px); }
.home-nav .brand h1 { font-size:21px; }
.home-nav-actions { display:flex; align-items:center; gap:10px; }
.ghost-link { padding:8px 12px; color:var(--muted); border:1px solid rgba(255,255,255,.12); border-radius:8px; font-size:11px; text-decoration:none; transition:.18s ease; }
.hero-panel { width:min(1180px,calc(100vw - 48px)); margin:auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); align-items:center; gap:clamp(42px,7vw,100px); padding:48px 0; }
.announcement-hidden .hero-panel { grid-template-columns:minmax(0,800px); justify-content:center; }
.hero-copy { animation:hero-enter var(--motion-hero) cubic-bezier(.2,.8,.2,1) both; }
.hero-kicker { margin:0 0 15px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:5px; }
.hero-copy h2 { max-width:700px; margin:0; font-family:"Songti SC","Noto Serif SC",serif; font-size:clamp(42px,6vw,78px); font-weight:800; line-height:1.04; letter-spacing:2px; }
.hero-copy h2 em { display:block; color:var(--gold-bright); font-style:normal; text-shadow:0 8px 36px rgba(216,182,106,.16); }
.hero-description { max-width:590px; margin:24px 0 30px; color:var(--muted); font-size:13px; line-height:1.9; }
.home-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:650px; }
.home-actions button { color:var(--ink); border-radius:12px; cursor:pointer; transition:transform .2s ease,border-color .2s ease,filter .2s ease; }
.home-primary,.home-secondary { min-height:84px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:12px 18px; text-align:left; border:1px solid rgba(216,182,106,.34); background:linear-gradient(135deg,rgba(216,182,106,.18),rgba(12,61,51,.84)); box-shadow:0 14px 30px rgba(0,0,0,.2); }
.home-secondary { border-color:rgba(106,204,184,.26); background:linear-gradient(135deg,rgba(42,125,107,.22),rgba(3,35,30,.85)); }
.home-actions .action-index { color:rgba(241,213,142,.58); font-family:Georgia,serif; font-size:12px; }
.home-actions b { display:block; margin-bottom:5px; font-size:15px; letter-spacing:1px; }
.home-actions small { color:var(--muted); font-size:10px; }
.home-actions button > i { color:var(--gold-bright); font-size:23px; font-style:normal; }
.home-compact { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); }
.home-compact span { color:var(--gold); }
.announcement-card { position:relative; max-width:360px; padding:25px; border:1px solid rgba(216,182,106,.26); border-radius:18px; background:linear-gradient(155deg,rgba(14,67,56,.82),rgba(2,23,20,.92)); box-shadow:0 28px 70px rgba(0,0,0,.34); backdrop-filter:blur(16px); animation:card-float var(--motion-float-card) ease-in-out infinite; }
.announcement-card::before { content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid rgba(255,255,255,.055); border-radius:13px; }
.announcement-head { display:flex; justify-content:space-between; color:var(--gold); font-size:9px; letter-spacing:2px; }
.announcement-head time { color:var(--muted); letter-spacing:1px; }
.announcement-icon { width:54px; height:54px; display:grid; place-items:center; margin:28px 0 18px; color:#193629; background:linear-gradient(145deg,#f1d58e,#a77933); border-radius:15px; font-family:Georgia,serif; font-size:22px; box-shadow:0 9px 25px rgba(0,0,0,.3); animation:badge-breathe calc(var(--motion-float-card) * 1.4) ease-in-out infinite; }
.announcement-card h3 { margin:0 0 10px; font-family:"Songti SC","Noto Serif SC",serif; font-size:21px; }
.announcement-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.announcement-tags { display:flex; gap:6px; margin-top:20px; }
.announcement-tags span { padding:4px 7px; color:#bce8df; border:1px solid rgba(111,216,195,.2); border-radius:10px; font-size:8px; letter-spacing:1px; }
.home-footer { display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,76px); color:rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.06); font-size:9px; letter-spacing:1px; }
.server-ready { display:flex; align-items:center; gap:7px; }
.server-ready i { width:6px; height:6px; border-radius:50%; background:#5ee0c5; box-shadow:0 0 9px #5ee0c5; animation:pulse 1.4s infinite; }
.floating-card { position:absolute; z-index:-1; width:76px; height:108px; padding:9px; color:#1b1d19; background:#f5f0df; border:1px solid #fff; border-radius:9px; box-shadow:0 22px 40px rgba(0,0,0,.25); font:700 20px Georgia,serif; opacity:.13; }
.floating-card span { display:block; margin-top:6px; font-size:28px; }
.floating-card.red { color:#a52c2a; }
.card-one { left:5vw; top:30%; transform:rotate(-18deg); animation:float-one var(--motion-float-one) ease-in-out infinite; }
.card-two { right:4vw; bottom:8%; transform:rotate(16deg); animation:float-two var(--motion-float-two) ease-in-out infinite; }
.card-three { left:46%; top:11%; transform:rotate(8deg); animation:float-two var(--motion-float-three) ease-in-out infinite reverse; }

button { font: inherit; }
button:focus-visible, .card:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.game-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 78px minmax(630px, 1fr) 34px; }

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 48px);
  padding-right:max(clamp(18px,3vw,48px),env(safe-area-inset-right,0px));
  padding-left:max(clamp(18px,3vw,48px),env(safe-area-inset-left,0px));
  background: rgba(2, 17, 15, 0.9);
  border-bottom: 1px solid rgba(216, 182, 106, 0.22);
  box-shadow: 0 10px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center;
  border: 1px solid rgba(241,213,142,.6); border-radius: 12px;
  background: linear-gradient(145deg, #d7b76f, #8b6129);
  color: #102a22; font-family: "Songti SC", "Noto Serif SC", serif; font-weight: 900; font-size: 24px;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 5px 16px rgba(0,0,0,.28);
}
.brand h1 { margin: 0; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 22px; letter-spacing: 5px; }
.brand p { margin: 1px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 2px; }

.round-meta { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.round-meta div { display: flex; align-items: baseline; gap: 5px; white-space:nowrap; }
.round-meta strong { color: var(--ink); font-size: 22px; font-weight: 700; }
.round-meta .level-rank { color: var(--gold-bright); font-family: Georgia, serif; font-size: 27px; }
.round-meta i { width: 1px; height: 24px; background: rgba(255,255,255,.16); }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-button, .new-game-button {
  height: 44px; display:inline-flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.14); color: var(--ink);
  background: rgba(255,255,255,.055); border-radius: 8px; cursor: pointer;
  transition: .18s ease;
}
.control-icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-button { position:relative; width:44px; flex-shrink:0; padding:11px; }
.icon-button.off { opacity:.58; }
.icon-button.off::after { content:""; position:absolute; width:24px; height:2px; left:9px; top:20px; border:1px solid rgba(2,17,15,.85); border-radius:2px; background:currentColor; transform:rotate(-42deg); }
.icon-button[aria-pressed="true"] { color:var(--gold-bright); background:rgba(216,182,106,.1); border-color:rgba(216,182,106,.38); }
.new-game-button { gap:8px; padding:0 15px; margin-left:5px; color:var(--gold-bright); white-space:nowrap; flex-shrink:0; }
.icon-button:disabled, .new-game-button:disabled { opacity:.35; cursor:not-allowed; }

.table-wrap {
  position: relative; min-height: 630px; overflow: hidden;
  isolation: isolate;
}
.table-wrap::after {
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(var(--table-tint),var(--table-tint)),radial-gradient(ellipse at center,rgba(34,111,89,.72) 0%,rgba(10,70,58,.9) 48%,rgba(3,39,34,.98) 100%);
  filter:saturate(var(--table-saturation));
}
.table-wrap::before {
  content: ""; position: absolute; inset: 16px; z-index: -1;
  border: 1px solid rgba(216, 182, 106, .2); border-radius: 46% / 38%;
  box-shadow: inset 0 0 80px rgba(0,0,0,.26), 0 0 0 9px rgba(2, 22, 19, .2);
}
.table-grain { position:absolute; inset:0; opacity:.13; pointer-events:none; z-index:-1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }

.team-badge { position: absolute; left: 25px; padding: 4px 9px; font-size: 10px; letter-spacing: 2px; border-radius: 3px; writing-mode: vertical-rl; }
.team-us { top: 35%; color: #cbeee8; background: rgba(47,147,128,.16); border: 1px solid rgba(110,211,192,.26); }
.team-them { top: 48%; color: #e9c5bc; background: rgba(162,68,51,.14); border: 1px solid rgba(214,122,104,.22); }

.match-score { position:absolute; z-index:3; top:22px; right:clamp(24px,4vw,62px); display:flex; align-items:center; gap:13px; padding:8px 13px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(2,29,25,.42); backdrop-filter:blur(5px); }
.match-score > i { width:1px; height:29px; background:rgba(255,255,255,.12); }
.score-team { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 7px; color:var(--muted); font-size:9px; }
.score-team strong { grid-row:1 / 3; grid-column:2; color:#e4ddd0; font-family:Georgia,serif; font-size:23px; }
.score-team small { color:rgba(255,255,255,.58); font-size:9px; }
.score-team.ours strong { color:var(--gold-bright); }

.player { position: absolute; display: flex; align-items: center; gap: 10px; z-index: 3; transition: filter .2s; }
.player::after { content:""; position:absolute; inset:-8px; border:1px solid transparent; border-radius: 15px; pointer-events:none; }
.player.active::after { border-color: rgba(241,213,142,.52); box-shadow: 0 0 22px rgba(220,181,95,.16), inset 0 0 16px rgba(220,181,95,.06); }
.player.active .avatar { animation:turn-glow 1.35s ease-in-out infinite; }
.player.finished { filter: saturate(.4); }
.avatar-wrap { position: relative; }
.avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 19px; border: 2px solid rgba(255,255,255,.25); box-shadow: 0 7px 14px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.25); }
.avatar-red { background: linear-gradient(145deg, #c95c48, #7f2929); }
.avatar-amber { background: linear-gradient(145deg, #bb7c3d, #69501f); }
.avatar-cyan { background: linear-gradient(145deg, #2e968c, #285f66); }
.avatar-violet { background: linear-gradient(145deg, #756399, #413b6e); }
.partner-dot { position:absolute; width:11px; height:11px; right:-2px; bottom:1px; border:2px solid #0c4a3e; border-radius:50%; background:#5ee0c5; }
.player.dealer .avatar { box-shadow:0 0 0 2px var(--gold), 0 7px 14px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.25); }
.player.dealer .avatar::after { content:"先"; position:absolute; right:-8px; bottom:-6px; width:20px; height:20px; display:grid; place-items:center; font-size:9px; font-weight:800; color:#382713; background:var(--gold); border:2px solid #18483d; border-radius:50%; }
.player .avatar { position:relative; }
.player-copy { min-width: 76px; }
.name-line { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.name-line strong { font-size:14px; letter-spacing:1px; }
.name-line span { color: var(--gold-bright); border:1px solid rgba(216,182,106,.28); border-radius:3px; padding:1px 4px; font-size:9px; }
.card-count { display:flex; align-items:center; gap:4px; margin-top:5px; color:var(--muted); font-size:11px; }
.card-count i { width:8px; height:11px; border:1px solid rgba(255,255,255,.45); border-radius:1px; transform:rotate(-7deg); }
.turn-pill { display:none; position:absolute; white-space:nowrap; padding:4px 10px; border-radius:10px; background:var(--gold); color:#2c2110; font-size:10px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.player.active .turn-pill { display:block; }
.player-top { top: 22px; left: 50%; transform: translateX(-50%); }
.player-top .turn-pill { left: calc(100% + 15px); }
.player-left { left: clamp(32px, 6vw, 90px); top: 37%; flex-direction:column; text-align:center; }
.player-left .turn-pill { left: calc(100% + 8px); top:10px; }
.player-right { right: clamp(32px, 6vw, 90px); top: 37%; flex-direction:column; text-align:center; }
.player-right .turn-pill { right: calc(100% + 8px); top:10px; }
.player-you { left: clamp(26px, 7vw, 110px); bottom: 88px; }

.opponent-hand { position:absolute; display:flex; z-index:1; opacity:.8; }
.opponent-hand .card-back { width:27px; height:39px; margin-left:-19px; border-radius:4px; border:1px solid #d6c89f; background:repeating-linear-gradient(45deg, #892d2d 0 3px, #692020 3px 6px); box-shadow:0 3px 7px rgba(0,0,0,.22); }
.opponent-hand .card-back:first-child { margin-left:0; }
.opponent-top { top:88px; left:50%; transform:translateX(-50%); }
.opponent-left { top:54%; left:30px; transform:rotate(90deg); transform-origin:left center; }
.opponent-right { top:54%; right:30px; transform:rotate(-90deg); transform-origin:right center; }

.trick-zone { position:absolute; z-index:2; left:50%; top:39%; transform:translate(-50%,-50%); width:min(64vw, 650px); min-height:155px; text-align:center; }
.status-message { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; color:#e9f5ee; font-size:12px; letter-spacing:1px; background:rgba(2,29,25,.52); border:1px solid rgba(255,255,255,.11); border-radius:18px; backdrop-filter:blur(6px); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 9px var(--gold); }
.played-by { height:24px; margin-top:12px; color:var(--muted); font-size:11px; letter-spacing:1px; }
.played-cards { display:flex; justify-content:center; min-height:82px; padding-left:30px; }
.played-cards .card { --card-w:calc(54px + var(--card-size-adjust)); margin-left:-22px; pointer-events:none; animation:deal-in var(--motion-play) ease both; }
.played-cards .card:first-child { margin-left:0; }
.combo-label { display:inline-block; min-height:23px; margin-top:6px; padding:3px 10px; color:var(--gold-bright); font-size:11px; border-radius:10px; background:rgba(4,30,26,.38); }

.action-area { position:absolute; bottom:calc(142px + var(--hand-clearance)); left:50%; transform:translateX(-50%); z-index:8; text-align:center; }
.selection-tip { min-height:20px; margin:0 0 7px; color:rgba(255,255,255,.55); font-size:11px; line-height:1.45; }
.selection-tip.error { color:#ffaaa0; }
.selection-tip.advice { color:#b9ddd5; }
.selection-tip.valid { color:#dff7df; }
.selection-tip.power { color:var(--gold-bright); font-weight:700; text-shadow:0 0 12px rgba(216,182,106,.35); }
.action-buttons { display:flex; gap:10px; }
.game-button { min-width:88px; height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 16px; border-radius:9px; cursor:pointer; font-weight:600; font-size:13px; letter-spacing:1px; transition:.16s ease; }
.game-button .control-icon { width:17px; height:17px; }
.game-button span { white-space:nowrap; }
.game-button.secondary { color:var(--ink); background:rgba(2,29,25,.76); border:1px solid rgba(255,255,255,.22); }
.game-button.primary { color:#2c2110; background:linear-gradient(180deg,#f0d795,#cda75c); border:1px solid #f8e3a9; box-shadow:0 6px 15px rgba(15,15,5,.27), inset 0 1px rgba(255,255,255,.5); }
.game-button.primary.power { color:#fff4d2; background:linear-gradient(180deg,#a83b31,#6f211f); border-color:#e5a468; box-shadow:0 0 18px rgba(196,70,48,.3), inset 0 1px rgba(255,255,255,.2); }
.game-button:disabled { opacity:.35; cursor:not-allowed; }
.game-button:active:not(:disabled) { transform:translateY(1px); filter:brightness(.96); }

.hand-scroll { position:absolute; left:18%; right:2%; bottom:15px; height:calc(117px + var(--hand-top-room)); z-index:7; overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(216,182,106,.45) transparent; }
.hand { min-width:max-content; height:calc(106px + var(--hand-top-room)); display:flex; align-items:flex-end; padding:14px 34px 0 16px; }
.card.deal-card { animation:hand-deal var(--motion-deal) cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--card-index) * 16ms); }
.card {
  position:relative; flex:0 0 var(--card-w); width:var(--card-w); height:var(--card-h); margin-left:var(--hand-overlap);
  border:1px solid #d9d6ca; border-radius:clamp(5px,.55vw,8px); color:#171916; background:linear-gradient(135deg,#fff 0%,#f5f2e8 100%);
  box-shadow:-2px 5px 9px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.7);
  cursor:pointer; user-select:none; touch-action:manipulation; transform:translateY(0); transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.card:first-child { margin-left:0; }
.card.selected { transform:translateY(var(--selection-lift-offset)); box-shadow:-2px 8px 14px rgba(0,0,0,.34), 0 0 0 2px var(--gold-bright); }
.card:disabled { cursor:default; filter:saturate(.72) brightness(.94); }
.card.red { color:#b52927; }
.card.level-card { border-color:#c79a45; background:linear-gradient(135deg,#fffdf6,#f4ead4); }
.card.level-card::after { content:"级"; position:absolute; left:5px; right:auto; bottom:5px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#35250f; background:linear-gradient(145deg,#f3d98f,#bf9450); font-size:9px; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.22); }
.card.wild::after { content:"配"; color:#fff8db; background:#bd3330; }
.card-corner { position:absolute; top:5px; left:6px; display:flex; flex-direction:column; align-items:center; line-height:.9; font-family:Georgia,serif; font-weight:700; font-size:clamp(14px,1.45vw,20px); }
.card-suit { margin-top:4px; font-size:.75em; }
.card-center { position:absolute; inset:20% 8% 10%; display:grid; place-items:center; font-size:clamp(28px,3.1vw,46px); opacity:.9; }
.card-joker .card-corner { top:6px; font-size:clamp(8px,.75vw,11px); line-height:1.05; writing-mode:vertical-rl; letter-spacing:1px; }
.card-joker .card-center { font-family:"Songti SC","Noto Serif SC",serif; font-size:clamp(22px,2.3vw,34px); }
.card-joker.joker-big { border-color:#d3aa5d; background:linear-gradient(135deg,#fffdf3,#f5e7c7); box-shadow:-2px 5px 9px rgba(0,0,0,.28), inset 0 0 0 2px rgba(218,174,91,.2); }

.game-footer { display:flex; justify-content:space-between; align-items:center; padding:0 max(clamp(18px,3vw,48px),env(safe-area-inset-right,0px)) 0 max(clamp(18px,3vw,48px),env(safe-area-inset-left,0px)); color:rgba(255,255,255,.62); background:#030b0a; font-size:11px; letter-spacing:1px; }
.game-footer span { display:flex; align-items:center; gap:6px; }
.online-dot { width:6px; height:6px; border-radius:50%; background:#53c8a4; box-shadow:0 0 7px #53c8a4; }
.version-tag { padding:1px 5px; color:rgba(241,213,142,.72); border:1px solid rgba(216,182,106,.2); border-radius:8px; font-size:8px; letter-spacing:.5px; }

.modal { width:min(560px,calc(100vw - 30px)); max-height:calc(100vh - 30px); max-height:calc(100dvh - 30px); overflow:auto; padding:0; color:var(--ink); background:linear-gradient(145deg,#123e36,#082a25); border:1px solid rgba(216,182,106,.5); border-radius:16px; box-shadow:0 25px 80px rgba(0,0,0,.6); }
.modal[open] { animation:modal-enter var(--motion-transition) cubic-bezier(.2,.8,.2,1) both; }
.modal::backdrop { background:rgba(0,8,7,.78); backdrop-filter:blur(5px); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; padding:25px 28px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.modal-head span, .eyebrow { color:var(--gold); font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.modal h2 { margin:4px 0 0; font-family:"Songti SC","Noto Serif SC",serif; font-size:25px; }
.modal-head button { min-width:44px; min-height:44px; padding:0; color:rgba(255,255,255,.7); background:none; border:0; font-size:29px; line-height:1; cursor:pointer; }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:24px 28px; }
.rules-grid article { display:flex; gap:12px; }
.rules-grid b { flex:0 0 28px; color:rgba(216,182,106,.5); font-family:Georgia,serif; font-size:20px; }
.rules-grid h3 { margin:0 0 5px; font-size:14px; }
.rules-grid p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.rules-note { margin:-5px 28px 22px; padding:10px 12px; color:var(--muted); background:rgba(0,0,0,.14); border-left:2px solid var(--gold); border-radius:4px; font-size:11px; line-height:1.65; }
.rules-note strong { color:var(--gold-bright); }
.modal-confirm { display:block; margin:0 auto 25px; min-width:130px; }
.restart-modal { text-align:center; padding:30px; }
.restart-modal > p:not(.eyebrow) { margin:12px 0 24px; color:var(--muted); font-size:13px; line-height:1.7; }
.modal-actions { display:flex; justify-content:center; gap:10px; }
.result-modal { text-align:center; padding:30px; }
.result-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid var(--gold); border-radius:50%; color:#26311f; background:linear-gradient(145deg,#f1d58e,#ac7f34); font-family:"Songti SC","Noto Serif SC",serif; font-size:27px; box-shadow:0 0 35px rgba(216,182,106,.22); }
.result-modal > p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.ranking { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:23px 0; }
.rank-item { min-width:0; padding:12px 8px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(0,0,0,.12); font-size:12px; }
.rank-item b { display:block; margin-bottom:5px; color:var(--gold-bright); font-family:Georgia,serif; font-size:18px; }

.toast { position:fixed; z-index:20; left:50%; top:95px; width:max-content; max-width:calc(100vw - 24px); transform:translate(-50%,-15px); padding:9px 16px; color:#fff; background:rgba(20,70,61,.96); border:1px solid rgba(154,223,207,.35); border-radius:7px; font-size:12px; text-align:center; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.toast.success { background:rgba(27,91,65,.96); border-color:rgba(151,235,183,.4); }
.toast.error { background:rgba(116,28,25,.96); border-color:rgba(255,170,160,.35); }
.toast.show { opacity:1; transform:translate(-50%,0); }

.settings-modal { width:min(1040px,calc(100vw - 30px)); }
.settings-modal::backdrop { background:rgba(0,8,7,.55); backdrop-filter:blur(2px); }
.settings-tabs { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:12px 26px; background:rgba(5,34,29,.96); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.settings-tabs button { min-width:0; min-height:40px; padding:7px 10px; overflow-wrap:anywhere; color:var(--muted); border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.035); cursor:pointer; font-size:11px; }
.settings-tabs button.active { color:var(--gold-bright); border-color:rgba(216,182,106,.45); background:rgba(216,182,106,.12); }
.settings-tabs button:focus-visible { outline:3px solid var(--gold-bright); outline-offset:2px; }
.settings-grid { padding:18px 26px 24px; }
.settings-section { display:none; padding:17px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(0,0,0,.12); }
.settings-section.active { display:block; animation:settings-panel-in var(--motion-transition) ease both; }
.settings-section h3 { margin:0 0 14px; color:var(--gold-bright); font-size:12px; letter-spacing:2px; }
.setting-toggle,.range-setting,.select-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:50px; color:var(--ink); border-top:1px solid rgba(255,255,255,.07); font-size:11px; }
.settings-section > label:first-of-type { border-top:0; }
.setting-toggle b { display:block; font-size:12px; }
.setting-toggle small { color:var(--muted); font-size:9px; }
.setting-toggle input { position:absolute; opacity:0; }
.setting-toggle > i { position:relative; flex:0 0 38px; height:21px; border-radius:12px; background:rgba(255,255,255,.14); transition:.2s ease; }
.setting-toggle > i::after { content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; border-radius:50%; background:#d8dedb; transition:.2s ease; }
.setting-toggle input:checked + i { background:#b58b42; }
.setting-toggle input:checked + i::after { transform:translateX(17px); background:#fff4d2; }
.setting-toggle input:focus-visible + i { outline:3px solid var(--gold-bright); outline-offset:3px; }
.range-setting > span { min-width:118px; display:flex; flex-direction:column; gap:4px; }
.range-setting b { font-size:11px; font-weight:500; }
.range-setting input { width:52%; min-width:130px; accent-color:var(--gold); cursor:pointer; }
.range-value { width:max-content; padding:2px 6px; color:var(--gold-bright); border-radius:5px; background:rgba(216,182,106,.1); font:10px Georgia,serif; }
.select-setting select,.lan-connect input { min-height:38px; padding:0 10px; color:var(--ink); border:1px solid rgba(255,255,255,.16); border-radius:7px; background:#092e28; }
.audio-preview { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 2px; color:#d6f3ec; border:1px solid rgba(122,211,193,.22); border-radius:8px; background:rgba(36,113,96,.14); cursor:pointer; font-size:11px; transition:var(--motion-transition) ease; }
.audio-preview span { color:var(--gold-bright); font-size:16px; }
.audio-preview:disabled { opacity:.38; cursor:not-allowed; }
.gameplay-section.active { display:grid; grid-template-columns:1fr 1fr; column-gap:26px; }
.gameplay-section h3 { grid-column:1 / -1; }
.about-section p { color:var(--muted); font-size:11px; }
.about-links { display:flex; flex-wrap:wrap; gap:7px; }
.about-links a { padding:7px 10px; color:#c9ece4; border:1px solid rgba(122,211,193,.18); border-radius:7px; background:rgba(36,113,96,.13); font-size:10px; text-decoration:none; }
.settings-actions { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 26px max(13px,env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.09); background:rgba(4,30,26,.96); backdrop-filter:blur(12px); }
.settings-actions small { color:var(--muted); font-size:9px; }

.tutorial-modal { width:min(620px,calc(100vw - 30px)); overflow:auto; }
.tutorial-progress { display:flex; gap:6px; padding:18px 28px 0; }
.tutorial-progress i { height:3px; flex:1; border-radius:2px; background:rgba(255,255,255,.12); transition:var(--motion-transition) ease; }
.tutorial-progress i.active { background:var(--gold); box-shadow:0 0 10px rgba(216,182,106,.4); }
.tutorial-slides { min-height:360px; position:relative; overflow:hidden; }
.tutorial-slide { position:absolute; inset:0; padding:24px 34px; text-align:center; opacity:0; transform:translateX(30px); pointer-events:none; transition:var(--motion-transition) ease; }
.tutorial-slide.active { opacity:1; transform:none; pointer-events:auto; }
.tutorial-slide > b { color:rgba(216,182,106,.45); font-family:Georgia,serif; font-size:12px; letter-spacing:2px; }
.tutorial-slide h3 { margin:17px 0 8px; font-family:"Songti SC","Noto Serif SC",serif; font-size:23px; }
.tutorial-slide p { max-width:470px; margin:auto; color:var(--muted); font-size:12px; line-height:1.8; }
.tutorial-visual { height:165px; display:grid; place-items:center; margin-top:10px; color:var(--gold-bright); border:1px solid rgba(216,182,106,.14); border-radius:16px; background:radial-gradient(circle,rgba(38,121,102,.3),rgba(0,0,0,.09)); font-family:"Songti SC",serif; font-size:31px; }
.teams-visual { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; padding:25px 30%; font-size:12px; }
.teams-visual span { width:62px; height:45px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.06); }
.card-visual { color:#c94b47; font:700 48px Georgia,serif; }
.win-visual { width:165px; margin:10px auto 0; border-radius:50%; }
.tutorial-actions { display:flex; align-items:center; justify-content:space-between; padding:0 28px 24px; }
.tutorial-actions span { color:var(--muted); font-size:10px; }

.lan-modal { width:min(680px,calc(100vw - 30px)); }
.lan-connect,.lan-lobby { padding:25px 28px 30px; }
.lan-connect > label,.lan-choice label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:10px; }
.lan-connect > label input { width:100%; }
.lan-choice { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:end; gap:10px; margin-top:18px; }
.lan-choice > i { align-self:center; color:var(--muted); font-size:9px; font-style:normal; }
.room-code-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid rgba(216,182,106,.2); border-radius:10px; background:rgba(0,0,0,.14); }
.room-code-card span { color:var(--muted); font-size:10px; }
.room-code-card strong { color:var(--gold-bright); font:700 25px Georgia,serif; letter-spacing:5px; }
.room-code-card button { margin-left:auto; padding:7px 11px; color:var(--ink); border:1px solid rgba(255,255,255,.15); border-radius:6px; background:rgba(255,255,255,.06); cursor:pointer; }
.lan-address { color:var(--muted); font-size:10px; line-height:1.7; }
.lan-players { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; }
.lan-player { display:flex; align-items:center; gap:9px; padding:11px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(0,0,0,.1); font-size:11px; }
.lan-player i { width:28px; height:28px; display:grid; place-items:center; color:#183429; border-radius:8px; background:var(--gold); font-style:normal; }
.lan-player small { margin-left:auto; color:var(--muted); }
.lan-status { min-height:18px; color:#b9ddd5; font-size:10px; }
.lan-lobby-actions { display:grid; grid-template-columns:auto 1fr; gap:10px; }
.lan-start { width:100%; }

@keyframes deal-in { from { opacity:0; transform:translateY(-9px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes pulse { 50% { box-shadow:0 0 14px var(--gold); } }
@keyframes aurora-spin { to { transform:rotate(360deg); } }
@keyframes hero-enter { from { transform:translateY(18px); } }
@keyframes card-float { 50% { transform:translateY(-9px) rotate(.5deg); } }
@keyframes float-one { 50% { transform:translate(14px,-16px) rotate(-12deg); } }
@keyframes float-two { 50% { transform:translate(-10px,-18px) rotate(11deg); } }
@keyframes hand-deal { from { opacity:0; transform:translateY(38px) rotate(4deg); } }
@keyframes settings-panel-in { from { opacity:0; transform:translateY(7px); } }
@keyframes modal-enter { from { opacity:0; transform:translateY(14px) scale(.975); } }
@keyframes turn-glow { 50% { filter:brightness(1.12); box-shadow:0 0 0 3px rgba(241,213,142,.2),0 9px 22px rgba(0,0,0,.3); } }
@keyframes badge-breathe { 50% { filter:brightness(1.08); box-shadow:0 12px 32px rgba(216,182,106,.18); } }
.status-dot.thinking { animation:pulse .8s infinite; }

@media (hover:hover) and (pointer:fine) {
  .home-actions button:hover { transform:translateY(-3px); border-color:rgba(241,213,142,.65); filter:brightness(1.06); }
  .ghost-link:hover,.about-links a:hover { color:var(--gold-bright); border-color:rgba(216,182,106,.45); }
  .icon-button:hover, .new-game-button:hover { background:rgba(255,255,255,.12); border-color:rgba(216,182,106,.5); }
  .audio-preview:hover:not(:disabled) { color:var(--gold-bright); border-color:rgba(216,182,106,.48); transform:translateY(-1px); }
  .game-button.secondary:hover:not(:disabled) { border-color:rgba(241,213,142,.7); background:rgba(15,65,55,.88); }
  .game-button.primary:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); }
  .card:hover:not(:disabled) { transform:translateY(-8px); filter:brightness(1.04); }
  .card.selected:hover:not(:disabled) { transform:translateY(calc(var(--selection-lift-offset) - 2px)); }
}

@media (max-width: 760px) {
  .home-screen { grid-template-rows:68px 1fr 30px; overflow:auto; }
  .home-nav { padding:0 14px; }
  .hero-panel { width:calc(100vw - 28px); grid-template-columns:1fr; gap:28px; padding:35px 0; }
  .hero-copy h2 { font-size:clamp(38px,12vw,58px); }
  .announcement-card { max-width:none; }
  .floating-card { display:none; }
  .settings-tabs { padding-inline:17px; }
  .settings-grid { padding:14px 17px 17px; }
  .gameplay-section.active { display:block; }
  :root { --card-w:calc(48px + var(--card-size-adjust)); }
  .game-shell { grid-template-rows:66px minmax(570px,1fr) 28px; grid-template-rows:66px minmax(570px,calc(100dvh - 94px)) 28px; }
  .topbar { grid-template-columns:1fr auto 1fr; padding:0 13px; padding-right:max(13px,env(safe-area-inset-right,0px)); padding-left:max(13px,env(safe-area-inset-left,0px)); }
  .brand p, .round-meta i, .round-meta div:first-child { display:none; }
  .brand-mark { width:38px; height:38px; }
  .round-meta { position:static; transform:none; justify-self:center; }
  .new-game-button { width:44px; padding:0; margin-left:0; }
  .new-game-button .button-label { display:none; }
  .table-wrap::before { inset:8px; border-radius:35% / 18%; }
  .table-wrap { min-height:570px; }
  .player-left { left:12px; top:35%; }
  .player-right { right:12px; top:35%; }
  .player-copy { min-width:55px; }
  .player-you { left:12px; bottom:128px; }
  .opponent-left, .opponent-right { display:none; }
  .trick-zone { top:36%; width:72vw; }
  .played-cards .card { --card-w:calc(45px + var(--card-size-adjust)); margin-left:-19px; }
  .action-area { bottom:calc(151px + var(--hand-clearance)); }
  .game-button { height:44px; }
  .hand-scroll { left:2%; right:2%; bottom:16px; }
  body.expanded-hand .hand-scroll { left:22%; }
  body.expanded-hand .player-you .player-copy { display:none; }
  .team-badge { display:none; }
  .match-score { top:12px; right:10px; gap:8px; padding:7px 9px; transform:scale(.88); transform-origin:top right; }
  .score-team small { display:none; }
  .rules-grid { grid-template-columns:1fr; }
  .game-footer #footer-tip { display:none; }
}

@media (max-width:520px) {
  .home-nav .brand p,.ghost-link { display:none; }
  .home-actions { grid-template-columns:1fr 1fr; }
  .home-primary,.home-secondary { grid-column:1 / -1; }
  .hero-description { margin-top:18px; }
  .announcement-card { padding:20px; }
  .settings-actions { align-items:flex-start; padding-inline:17px; }
  .range-setting { align-items:flex-start; flex-direction:column; gap:8px; padding:9px 0; }
  .range-setting input { width:100%; }
  .lan-choice { grid-template-columns:1fr 1fr; }
  .lan-choice > i { display:none; }
  .lan-choice label { grid-column:1 / -1; }
  .lan-players { grid-template-columns:1fr; }
  .tutorial-slides { min-height:385px; }
  .tutorial-slide { padding:20px; }
  .teams-visual { padding:25px 20%; }
  .topbar { padding:0 9px; padding-right:max(9px,env(safe-area-inset-right,0px)); padding-left:max(9px,env(safe-area-inset-left,0px)); }
  .topbar .brand { display:none; }
  .header-actions { gap:3px; }
  #sound-button,#music-button { display:none; }
  .icon-button, .new-game-button { width:44px; height:44px; }
  .round-meta { gap:0; font-size:11px; }
  .action-area { right:8px; right:max(8px,env(safe-area-inset-right,0px)); left:auto; width:224px; transform:none; }
  .action-buttons { gap:6px; }
  .game-button { flex:1; min-width:0; height:44px; gap:5px; padding:0 6px; }
  .ranking { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:360px) {
  .player-you .player-copy { display:none; }
  .match-score { display:none; }
  .trick-zone { top:135px; transform:translateX(-50%); }
}

@media (max-height:600px) and (min-width:761px) {
  .home-screen { overflow:auto; }
  .hero-panel { padding:28px 0; }
}

@media (max-height: 740px) and (min-width:761px) {
  .game-shell { grid-template-rows:66px minmax(506px,calc(100dvh - 94px)) 28px; }
  .table-wrap { min-height:506px; }
  .player-top { top:12px; }
  .opponent-top { top:75px; }
  .trick-zone { top:23%; transform:translateX(-50%); }
  .action-area { bottom:calc(128px + var(--hand-clearance)); }
  .hand-scroll { height:calc(105px + var(--hand-top-room)); }
  .player-you { bottom:72px; }
  body.expanded-hand .action-area { right:16px; bottom:12px; left:auto; transform:none; }
  body.expanded-hand .hand-scroll { right:40%; left:9%; }
  body.expanded-hand .player-you { left:20px; bottom:22px; }
  body.expanded-hand .player-you .player-copy { display:none; }
}

@media (max-height:650px) and (max-width:760px) {
  :root { --card-w:calc(44px + var(--card-size-adjust)); }
  .game-shell { grid-template-rows:60px minmax(484px,calc(100dvh - 84px)) 24px; }
  .table-wrap { min-height:484px; }
  .player-top { top:8px; }
  .opponent-top { top:65px; }
  .match-score { top:8px; }
  .trick-zone { top:115px; min-height:110px; transform:translateX(-50%); }
  .played-by { height:16px; margin-top:4px; }
  .played-cards { min-height:60px; }
  .played-cards .card { --card-w:calc(40px + var(--card-size-adjust)); }
  .combo-label { min-height:19px; margin-top:0; }
  .action-area { bottom:calc(103px + var(--hand-clearance)); }
  .selection-tip { margin-bottom:4px; }
  .player-you { bottom:84px; }
  .hand-scroll { bottom:4px; height:calc(94px + var(--hand-top-room)); }
  .hand { height:calc(86px + var(--hand-top-room)); padding-top:10px; }
}

@media (max-height:500px) and (min-width:761px) {
  .game-shell { grid-template-rows:56px minmax(310px,calc(100dvh - 80px)) 24px; }
  .topbar { padding:0 24px; padding-right:max(24px,env(safe-area-inset-right,0px)); padding-left:max(24px,env(safe-area-inset-left,0px)); }
  .brand-mark { width:36px; height:36px; }
  .brand p { display:none; }
  .table-wrap { min-height:310px; }
  .table-wrap::before { inset:8px; }
  .team-badge { display:none; }
  .match-score { top:8px; right:24px; transform:scale(.85); transform-origin:top right; }
  .player-top { top:4px; }
  .opponent-top { top:58px; }
  .opponent-left, .opponent-right { display:none; }
  .player-left, .player-right { top:35%; }
  .trick-zone { top:86px; width:45vw; min-height:100px; transform:translateX(-50%); }
  .played-by { height:15px; margin-top:3px; }
  .played-cards { min-height:48px; }
  .played-cards .card { --card-w:calc(38px + var(--card-size-adjust)); margin-left:-15px; }
  .combo-label { min-height:19px; margin-top:0; }
  .action-area { right:16px; right:max(16px,env(safe-area-inset-right,0px)); bottom:12px; left:auto; transform:none; }
  .selection-tip { margin-bottom:4px; }
  .player-you { left:20px; bottom:22px; }
  .player-you .player-copy { display:none; }
  .hand-scroll { right:40%; bottom:4px; left:9%; height:calc(92px + var(--hand-top-room)); }
  .hand { height:calc(85px + var(--hand-top-room)); padding-top:10px; }
}

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

body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }