/* Page chrome is separate from table geometry, so decorative changes cannot hide game controls. */
body { color:var(--ui-text); background:var(--ui-page); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--ui-gold); outline-offset:3px; }
#home { overflow:auto; padding:calc(24px + var(--safe-t)) 20px calc(30px + var(--safe-b)); background:radial-gradient(ellipse at 20% 0%,var(--ui-glow),transparent 70%),var(--ui-page); }
#home .home-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,410px); max-width:1060px; gap:64px; width:100%; align-items:center; }
#home .home-intro { min-width:0; padding:0; }
#home .brand-kicker { font-size:11px; letter-spacing:2px; color:var(--ui-gold-light); }
#home h1 { font-size:clamp(34px,4.3vw,54px); line-height:1.22; letter-spacing:2px; margin:18px 0 12px; color:var(--ui-text); }
#home h1>span { color:var(--ui-gold-light); }
#home .sub { color:var(--ui-dim); font-size:14px; line-height:1.7; }
#home .home-art { height:195px; margin:16px 0; }
#home .art-card { width:110px; height:152px; top:18px; }
#home .art-card>span { font-size:56px; }
#home .home-social { display:flex; gap:12px; color:var(--ui-text); margin:18px 0; }
#home .home-social small { color:var(--ui-dim); }
#home .panel { background:var(--ui-panel); color:var(--ui-ink); border:1px solid var(--ui-border); border-top:3px solid var(--ui-gold); border-radius:24px; padding:26px; box-shadow:var(--sh-3); }
#home .panel h2 { color:var(--ui-ink); font-size:24px; margin:6px 0; }
#home .panel .eyebrow { color:var(--ui-gold-ink); }
#home .panel-heading p { color:var(--ui-muted); font-size:13px; margin-bottom:18px; }
#home .field-label { font-size:13px; color:var(--ui-ink); margin:14px 0 7px; }
#home .field-label>span { color:var(--ui-muted); font-size:11px; }
#home .ipt { background:var(--ui-raised); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:12px; height:48px; font-size:16px; }
#home .ipt::placeholder { color:var(--ui-muted); opacity:.7; }
#home .join-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,1.05fr); gap:10px; }
#home .join-row .code { width:100%; letter-spacing:7px; }
#home .btn { min-height:48px; border-radius:12px; font-size:14px; }
#home .btn.primary,.mask .btn.primary,#game .actions .btn.primary { background:var(--accent-grad); color:#211b0d; border-color:transparent; font-weight:750; box-shadow:0 5px 16px #0002; }
#home .btn.alt { color:var(--ui-ink); border:1px solid var(--ui-border); background:var(--ui-soft); }
#home .create-options { border-color:var(--ui-border); margin-top:20px; padding-top:16px; }
#home .create-options summary { border:1px solid var(--ui-border); color:var(--ui-muted); padding:12px; min-height:44px; border-radius:12px; }
#home .create-options summary strong { color:var(--ui-gold-ink); }
#home .seg button,#home .chips button { background:var(--ui-raised); color:var(--ui-ink); border-color:var(--ui-border); min-height:44px; }
#home .seg button.on,#home .chips button.on { color:var(--ui-gold-ink); border-color:var(--ui-gold); background:var(--accent-soft); }
#home .theme-picker { border-color:var(--ui-border); margin-top:20px; }
#home .theme-label { color:var(--ui-muted); }
#home .theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#home .theme-options button { color:var(--ui-muted); background:var(--ui-soft); border-color:var(--ui-border); min-height:44px; flex-direction:row; }
#home .theme-options button[aria-pressed=true] { color:var(--ui-gold-ink); border-color:var(--ui-gold); }
#home .home-foot { color:var(--ui-muted); flex-wrap:wrap; gap:10px; margin-top:16px; }
#home .home-foot span { border:none; background:none; }
#home .home-foot span+span:before { display:none; }
#home .tip[data-type=error] { color:var(--ui-loss); background:var(--ui-soft); }
.home-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:22px; }
.home-links a { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; border:1px solid #ffffff2a; border-radius:12px; background:#ffffff09; color:var(--ui-text); text-decoration:none; font-size:13px; }
.home-links a:hover { border-color:var(--ui-gold); background:#ffffff15; }
.home-links small { display:block; color:var(--ui-dim); }
.theme-dot.jade { background:#237d60; } .theme-dot.noir { background:#242b31; } .theme-dot.royal { background:#1c4f92; } .theme-dot.aurora { background:linear-gradient(135deg,#5ee7ff,#b57bff); }
#game .topbar { border-bottom:1px solid #ffffff12; }
#game .room-code { color:var(--ui-text); border:1px solid #ffffff20; border-radius:20px; padding:4px 10px; background:#ffffff08; }
#game .round-info,#game .selection-hint,#game .mc-ct { color:var(--ui-dim); }
#game .felt { border-radius:26px; background:radial-gradient(ellipse at 50% 38%,var(--ui-felt),var(--ui-felt-edge)); box-shadow:inset 0 0 0 1px var(--accent-line),inset 0 0 64px #001a1730; }
#game .seat { padding:0; background:transparent; border:1px solid transparent; box-shadow:none; }
#game .seat .av { overflow:visible; border-radius:10px; }
#game .seat .av>svg { border-radius:10px; }
#game .seat .host-tag { position:static; grid-column:2; grid-row:3; justify-self:start; margin-top:2px; line-height:15px; padding:0 5px; font-size:9px; }
#game .seat .nm { color:var(--ui-text); }
#game .seat .sc { color:var(--ui-dim); }
#game .seat.turn .av { box-shadow:0 0 0 2px var(--ui-gold),0 0 14px var(--accent-line); }
#game .seat .dl { background:var(--ui-gold-light); color:#30260d; }
#game .dl-cards { grid-row:4; }
#game .me-chip { flex-wrap:wrap; row-gap:4px; }
#game .mc-host { position:static; flex:none; order:3; background:var(--ui-gold-light); color:#30260d; padding:1px 5px; font-size:10px; line-height:16px; border-radius:4px; }
#game .mc-nm { max-width:100px; }
#game .mc-ct { order:4; }
#game .mc-identity { order:5; }
#game .player-bar { min-height:38px; }
#game .actions .btn { min-height:44px; border-radius:12px; font-size:14px; border:1px solid #ffffff26; background:#ffffff10; color:var(--ui-text); }
#game .actions .btn:disabled { opacity:.45; box-shadow:none; }
#game.my-turn .action-panel { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); border-radius:16px; }
#game .front-play.beat { outline:1px solid var(--accent-line); outline-offset:3px; }
#game .prev-area { padding:4px; border-radius:10px; }
.mask .result-box { background:var(--ui-panel); color:var(--ui-ink); border:1px solid var(--ui-border); border-top:3px solid var(--ui-gold); border-radius:24px; box-shadow:var(--sh-3); }
.mask h2,.mask .result-box h2 { color:var(--ui-ink); }
.mask .eyebrow,.mask .rr-badge,.mask .rr-crown { color:var(--ui-gold-ink); }
.mask .result-note { color:var(--ui-muted); border-color:var(--ui-border); }
.mask .result-row { background:var(--ui-raised); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:12px; }
.mask .result-row.ll,.mask .result-row.top { border-color:var(--accent-line); background:var(--accent-soft); }
.mask .rr-name,.mask .rr-score { color:var(--ui-ink); }
.mask .rr-score.up { color:var(--ui-win); } .mask .rr-score.down { color:var(--ui-loss); }
.mask .rr-rank,.mask .rr-cards,.mask .rr-badge.poor { color:var(--ui-muted); }
.mask .btn { color:var(--ui-ink); background:var(--ui-soft); border:1px solid var(--ui-border); border-radius:10px; min-height:44px; }
.mask .result-actions { gap:8px; }
.mask .btn.primary { color:#241d0d; }
.mask .btn.danger { color:var(--ui-loss); border-color:var(--ui-loss); }
@media(max-width:759px) {
  #home .home-box { grid-template-columns:minmax(0,1fr); max-width:440px; gap:22px; }
  #home h1 { font-size:32px; margin:12px 0 8px; letter-spacing:1px; }
  #home h1>span { display:inline; margin-left:6px; }
  #home .home-art,#home .home-social { display:none; }
  #home .home-links { margin-top:16px; }
  #home .panel { padding:22px; }
}
@media(orientation:landscape) and (max-height:540px) {
  #home .home-box { grid-template-columns:minmax(230px,1fr) minmax(320px,1fr); max-width:1000px; gap:26px; align-items:start; }
  #home .home-art,#home .home-social { display:none; }
  #game .actions .btn { min-height:38px; font-size:12px; padding:0 10px; }
  .mask .result-box { max-height:calc(100dvh - 20px); padding:16px; }
  .mask .btn { min-height:40px; }
}
#home .home-box { grid-template-areas:'intro entry' 'space entry'; gap:20px 64px; align-items:start; }
#home .home-intro { grid-area:intro; }
#home .panel { grid-area:entry; }
#home .home-space { grid-area:space; min-width:0; }
#home .home-space-heading { display:flex; align-items:center; gap:12px; margin:8px 0 12px; color:var(--ui-dim); font-size:12px; }
#home .home-space-heading::after { content:''; height:1px; flex:1; background:#ffffff20; }
#home .home-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:0; }
#home .home-links a { min-height:76px; justify-content:flex-start; padding:12px; gap:10px; border-radius:15px; text-align:left; transition:background .16s,border-color .16s; }
#home .home-links a>span:nth-child(2) { min-width:0; flex:1; }
#home .home-links strong { display:block; font-size:13px; font-weight:650; }
#home .home-links small { font-size:11px; line-height:1.5; margin-top:4px; }
#home .home-link-icon { display:grid; place-items:center; width:32px; height:36px; flex:none; color:var(--ui-gold-light); background:var(--accent-soft); border-radius:10px; font-size:22px; }
#home .home-link-arrow { color:var(--ui-dim); font-size:14px; }
#home .sub>span { font-size:12px; }
#home .home-art { height:145px; margin:12px 0; }
#home .art-card { width:88px; height:122px; top:4px; }
#home .art-card>span { font-size:44px; bottom:12px; }
#home .art-card b { font-size:20px; top:9px; left:10px; }
#home .art-card small { font-size:16px; }
#home .home-social { margin:10px 0 0; }
#home .field-help { font-size:11px; color:var(--ui-muted); line-height:1.6; margin-top:7px; }
#home .home-guide { border-top:1px solid var(--ui-border); margin-top:18px; padding-top:12px; color:var(--ui-muted); font-size:12px; }
#home .home-guide summary { min-height:36px; display:flex; align-items:center; gap:8px; color:var(--ui-ink); list-style:none; }
#home .home-guide summary::after { content:'＋'; margin-left:auto; color:var(--ui-gold-ink); }
#home .home-guide[open] summary::after { content:'−'; }
#home .home-guide ol { padding:8px 0 0 20px; line-height:1.9; }
#home .home-guide p { margin-top:10px; line-height:1.7; }
/* 规则速查：折叠面板里的条目式说明，沿用入座说明的排版，只补列表与强调色 */
#home .rules-quick ul { padding:4px 0 0 20px; line-height:1.9; }
#home .rules-quick li b { color:var(--ui-ink); }
#home .rules-quick .rules-note { margin-top:12px; color:var(--ui-gold-ink); font-size:11px; }
#home .home-theme-current { margin-left:auto; font-size:10px; color:var(--ui-gold-ink); }
#home .theme-label { display:flex; align-items:center; gap:8px; }
#home .home-theme-picker { margin-top:12px; padding-top:10px; }
#home .home-theme-picker summary { list-style:none; min-height:36px; margin-bottom:0; cursor:pointer; }
#home .home-theme-picker summary::-webkit-details-marker { display:none; }
#home .home-theme-picker[open] .theme-options { margin-top:10px; }
#home .home-theme-picker[open] summary>span:last-child { transform:rotate(45deg); }
#home .tip:empty { display:none; }
#home .tip:not(:empty) { margin:0 0 16px; padding:10px 12px; border:1px solid var(--ui-border); border-left:3px solid var(--ui-gold); border-radius:10px; color:var(--ui-ink); background:var(--ui-soft); font-size:12px; line-height:1.6; }
#home .tip[data-type=error] { border-left-color:var(--ui-loss); background:color-mix(in srgb,var(--ui-loss) 9%,var(--ui-panel)); color:var(--ui-loss); }
#home input[aria-invalid=true] { border-color:var(--ui-loss); background:color-mix(in srgb,var(--ui-loss) 6%,var(--ui-raised)); }
#home #btnNetworkRetry { width:100%; margin-top:10px; color:var(--ui-ink); background:var(--ui-soft); border:1px solid var(--ui-border); }
@media(max-width:759px) {
  #home { padding-inline:16px; align-items:flex-start; }
  #home .home-box { gap:0; max-width:480px; grid-template-areas:'intro' 'entry' 'space'; }
  #home .home-intro { display:block; }
  #home .home-space { margin-top:26px; }
  #home .brand-kicker { order:0; margin-bottom:12px; }
  #home h1 { order:1; margin:0 0 8px; font-size:30px; }
  #home .sub { order:2; margin-bottom:22px; font-size:13px; }
  #home .sub>span { display:none; }
  #home .panel { order:3; width:100%; padding:22px 20px; }
  #home .home-space-heading { margin:0 0 12px; }
  #home .home-links { order:5; margin:0; gap:8px; }
  #home .home-links a { min-height:76px; padding:10px; gap:7px; }
  #home .home-link-arrow { display:none; }
  #home .home-links small { font-size:10px; }
  #home .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home .home-foot { gap:8px; font-size:10px; }
}
@media(min-width:760px) and (max-height:780px) {
  #home .home-art { display:none; }
  #home .home-box { align-items:start; }
  #home .home-intro { padding-top:12px; }
}
@media(orientation:landscape) and (max-height:540px) {
  #home .home-box { gap:24px; }
  #home .home-space { margin-top:0; }
  #home .home-social { display:none; }
  #home .home-links a { min-height:64px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { #home .panel,.mask .result-box,#game .felt { background:Canvas; color:CanvasText; } button:focus-visible,a:focus-visible { outline-color:Highlight; } }