@layer base, layout, components, responsive;
@layer base {
  :root { color-scheme: light; --bg:#f4f5f7; --surface:#fff; --ink:#242b33; --muted:#737983; --line:#e8eaee; --red:#b8312b; --red-dark:#962721; --red-light:#fcf0ed; --gold:#997239; --serif:"Songti SC","STSong","Noto Serif CJK SC",serif; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; color:var(--ink); background:var(--bg); }
  * { box-sizing:border-box; }
  body { margin:0; }
  button,input,select { font:inherit; }
  button { cursor:pointer; }
  button:disabled { cursor:not-allowed; opacity:.48; }
  button,input,a { -webkit-tap-highlight-color:transparent; }
  button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #cc847b; outline-offset:4px; }
  h1,h2,h3,p { margin:0; }
  h1,h2,h3 { font-weight:600; }
  a { color:var(--red); }
  svg { width:20px; height:20px; flex-shrink:0; }
  [hidden] { display:none !important; }
}
@layer layout {
  .shell { max-width:1280px; margin:0 auto; padding:0 40px; }
  .header { height:96px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #e0e3e8; }
  .brand { display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--ink); }
  .brand-mark { width:40px; height:40px; background:var(--red); color:white; display:grid; place-items:center; border-radius:12px; }
  .brand-mark svg { width:26px; height:26px; }
  .brand-name { font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:3px; }
  .brand-subtitle { font-size:13px; color:var(--muted); margin-left:8px; padding-left:17px; border-left:1px solid #d8dce2; letter-spacing:2px; }
  .header-actions,.inline { display:flex; align-items:center; gap:12px; }
  .community-strip { display:flex; justify-content:flex-end; padding-top:14px; }
  .site-presence { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .site-presence .status-dot { background:#60896e; }
  .site-presence.unavailable .status-dot { background:#a3a8af; }
  .community-strip + main > .intro { margin-top:16px; }
  .intro { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin:36px 0 25px; }
  .eyebrow { font-size:12px; letter-spacing:3px; color:var(--red); font-weight:600; margin-bottom:12px; }
  h1 { font-family:var(--serif); font-size:36px; line-height:1.4; letter-spacing:2px; }
  .subtitle { color:var(--muted); font-size:14px; line-height:1.8; margin-top:9px; }
  .home-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr); gap:24px; align-items:stretch; }
  .game-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
  .game-main { min-width:0; display:grid; gap:20px; }
  .game-sidebar { display:grid; gap:20px; min-width:0; }
  .panel { border:1px solid var(--line); border-radius:20px; background:var(--surface); overflow:hidden; }
  .panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 24px 18px; }
  .panel-head h2 { font-size:17px; }
  .panel-body { padding:0 24px 24px; }
  .footer { display:flex; justify-content:space-between; gap:16px; color:#91969e; font-size:12px; padding:28px 0; letter-spacing:1px; }
  .initial-loading { text-align:center; padding:25vh 24px; color:var(--muted); }
}
@layer components {
  .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:11px 19px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fff; font-weight:500; font-size:14px; transition:background .18s,transform .18s; text-decoration:none; }
  .button:hover:not(:disabled) { background:#f5f6f8; }
  .button:active:not(:disabled) { transform:translateY(1px); }
  .button.primary { color:#fff; background:var(--red); border-color:var(--red); }
  .button.primary:hover:not(:disabled) { background:var(--red-dark); }
  .button.soft { color:var(--red); background:var(--red-light); border-color:transparent; }
  .button.quiet { border-color:transparent; background:transparent; color:var(--muted); }
  .button.small { min-height:34px; padding:6px 11px; font-size:13px; }
  .button.wide { width:100%; }
  .button.danger { color:var(--red); }
  .badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:6px 10px; background:#f1f3f5; color:#6d737d; border-radius:6px; white-space:nowrap; }
  .badge.red { background:var(--red-light); color:var(--red); }
  .badge.green { background:#edf5f0; color:#407154; }
  .badge.gold { background:#f7f1e6; color:var(--gold); }
  .status-dot { width:6px; height:6px; background:currentColor; border-radius:50%; }
  .entry { padding:30px; }
  .entry h2 { font-family:var(--serif); font-size:25px; margin-bottom:8px; }
  .tabs { display:flex; gap:4px; background:#f3f4f6; padding:5px; border-radius:11px; margin:24px 0; }
  .tab { flex:1; border:0; background:none; padding:10px; color:var(--muted); border-radius:8px; font-size:14px; }
  .tab[aria-selected="true"] { color:var(--ink); background:white; box-shadow:0 2px 5px #252b3310; font-weight:600; }
  .field { display:block; margin-bottom:19px; }
  .field > span { display:block; font-size:14px; font-weight:500; margin-bottom:9px; }
  input { min-width:0; width:100%; background:#fff; border:1px solid #dce0e5; color:var(--ink); border-radius:9px; padding:12px 14px; min-height:46px; }
  input::placeholder { color:#a0a5ad; }
  .hint { color:var(--muted); font-size:13px; line-height:1.8; }
  .error { color:var(--red); padding:11px 0; font-size:14px; line-height:1.6; }
  .entry .hint { margin-top:15px; text-align:center; }
  .showcase { display:flex; flex-direction:column; min-height:450px; }
  .showcase-top { background:#f9f9fa; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px 28px; border-bottom:1px solid var(--line); }
  .showcase-title { font-family:var(--serif); font-size:25px; letter-spacing:5px; margin:24px 0 9px; }
  .showcase .dice-row { gap:12px; }
  .rules-strip { display:grid; grid-template-columns:repeat(3,1fr); padding:23px 12px; row-gap:24px; }
  .rule-summary { text-align:center; }
  .rule-summary b { font-size:15px; font-weight:600; display:block; margin-bottom:6px; }
  .rule-summary span { font-size:12px; color:var(--muted); }
  .room-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .room-code { font-size:20px; font-weight:600; letter-spacing:4px; font-variant-numeric:tabular-nums; }
  .room-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .play-table { text-align:center; position:relative; padding:26px 26px 30px; min-height:375px; display:flex; align-items:center; flex-direction:column; background:linear-gradient(180deg,#fff,#fcfcfd); }
  .table-heading { display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px; }
  .turn-label { font-size:14px; color:var(--muted); }
  .table-center { width:100%; padding:30px 0 25px; }
  .result-title { min-height:44px; font-family:var(--serif); font-size:32px; letter-spacing:3px; color:var(--red); margin-bottom:7px; }
  .result-description { min-height:25px; color:var(--muted); font-size:14px; line-height:1.8; }
  .dice-row { display:flex; justify-content:center; align-items:center; gap:16px; padding:28px 0; }
  .die { width:66px; aspect-ratio:1; background:linear-gradient(145deg,#fff,#f7f7f7); border:1px solid #e3e4e7; border-radius:14px; padding:13px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px; box-shadow:0 4px 0 #e8e9ec,0 10px 18px #252b3309; flex-shrink:0; }
  .pip { border-radius:50%; background:#343b45; }
  .die.red .pip { background:var(--red); }
  .die .empty { visibility:hidden; }
  .die.mini { width:24px; padding:4px; gap:1px; border-radius:5px; box-shadow:none; }
  .die.mini .pip { min-width:0; }
  .rolling .die { animation:tumble .3s infinite alternate ease-in-out; }
  .rolling .die:nth-child(2n) { animation-delay:-.12s; }
  .rolling .die:nth-child(3n) { animation-delay:-.22s; }
  @keyframes tumble { from { transform:translateY(2px) rotate(-12deg); } to { transform:translateY(-12px) rotate(14deg); } }
  .roll-button { min-width:220px; min-height:52px; font-size:16px; letter-spacing:2px; }
  .play-bottom { margin-top:13px; font-size:12px; color:var(--muted); }
  .pool-total { font-size:13px; color:var(--muted); }
  .pool-total strong { color:var(--red); font-size:19px; font-weight:600; margin:0 3px; }
  .prize-list { padding:0 22px; }
  .prize-row { display:flex; gap:12px; align-items:center; padding:17px 0; border-bottom:1px solid #f0f1f4; }
  .prize-row:last-child { border:0; }
  .prize-icon { width:38px; height:42px; border-radius:9px; display:grid; place-items:center; font-family:var(--serif); color:var(--gold); background:#f7f3eb; font-size:20px; }
  .prize-row:first-child .prize-icon { background:var(--red-light); color:var(--red); }
  .prize-info { flex:1; min-width:0; }
  .prize-info b { font-size:15px; font-weight:600; }
  .prize-info p { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.5; }
  .prize-count { text-align:right; font-variant-numeric:tabular-nums; }
  .prize-count strong { font-size:23px; font-weight:500; }
  .prize-count span { color:#989da5; font-size:12px; }
  .prize-row.depleted { opacity:.46; }
  .pool-footer { border-top:1px solid var(--line); margin-top:10px; padding:17px 22px; font-size:12px; line-height:1.8; color:var(--muted); }
  .players { display:flex; gap:10px; flex-wrap:wrap; padding:0 24px 24px; }
  .player { position:relative; border:1px solid var(--line); border-radius:12px; min-width:115px; flex:1; padding:14px 12px; display:flex; gap:10px; align-items:center; }
  .player.current { background:var(--red-light); border-color:#e9bbb5; }
  .avatar { width:33px; height:33px; background:#edf0f4; color:#747f8d; border-radius:50%; display:grid; place-items:center; flex-shrink:0; font-size:14px; }
  .current .avatar { background:var(--red); color:white; }
  .player-name { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
  .player-meta { font-size:12px; color:var(--muted); margin-top:4px; }
  .turn-caption { font-size:12px; color:var(--red); }
  .history { padding:0 24px 10px; max-height:345px; overflow:auto; }
  .history-item { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid #f0f1f4; }
  .history-index { width:28px; font-size:12px; color:#a0a6ae; font-variant-numeric:tabular-nums; flex-shrink:0; }
  .history-content { min-width:0; flex:1; }
  .history-content p { font-size:14px; overflow-wrap:anywhere; }
  .history-content small { color:var(--muted); font-size:12px; display:block; margin-top:5px; }
  .mini-dice { display:flex; gap:4px; }
  .history-result { font-size:13px; color:var(--red); text-align:right; min-width:65px; }
  .empty-state { padding:22px 0 32px; text-align:center; font-size:14px; color:#949aa3; line-height:1.8; }
  .settings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
  .settings-grid .field { margin:0; }
  .settings-grid input { text-align:center; }
  .settings-note { background:#f5f6f8; padding:13px 15px; font-size:13px; color:var(--muted); line-height:1.8; border-radius:10px; margin:20px 0; }
  .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
  dialog { border:1px solid var(--line); border-radius:20px; padding:28px; width:calc(100% - 32px); max-width:520px; color:var(--ink); max-height:88dvh; }
  dialog::backdrop { background:#20273255; backdrop-filter:blur(3px); }
  .modal-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
  .modal-heading h2 { font-family:var(--serif); font-size:25px; }
  .close-button { border:0; background:#f5f6f8; width:32px; height:32px; border-radius:50%; font-size:20px; color:var(--muted); }
  .rule-detail { display:grid; grid-template-columns:60px 1fr; gap:14px; font-size:14px; line-height:1.8; padding:13px 0; border-bottom:1px solid var(--line); }
  .rule-detail b { color:var(--red); }
  .rule-detail span { color:#626973; }
  .connection-banner { border:1px solid #e9d4a3; background:#fffaec; color:#866625; padding:12px 16px; border-radius:10px; margin-top:20px; font-size:14px; }
  .score-table { width:100%; border-collapse:collapse; font-size:14px; }
  .score-table th { text-align:left; font-weight:500; font-size:12px; color:var(--muted); }
  .score-table th,.score-table td { padding:13px 8px; border-bottom:1px solid var(--line); }
  .score-table td:last-child { line-height:1.8; }
  .champion { margin:12px 22px; padding:15px; border:1px solid #e9dfcb; border-radius:12px; background:#fffcf7; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .champion b { font-size:14px; overflow-wrap:anywhere; }
  .champion > span:not(.badge),.champion p { font-size:12px; color:var(--gold); }
  .champion p { width:100%; line-height:1.7; }
  .host-controls { border-top:1px solid var(--line); padding:12px 20px; display:grid; gap:8px; }
  .mode-field { padding:0; border:0; margin:0; }
  .mode-field legend { font-size:14px; font-weight:600; margin-bottom:12px; }
  .mode-option { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); padding:13px; margin-bottom:10px; border-radius:10px; cursor:pointer; }
  .mode-option:has(input:checked) { background:var(--red-light); border-color:#e5b7b2; }
  .mode-option input { accent-color:var(--red); width:17px; height:17px; min-height:0; margin:3px 0 0; flex-shrink:0; }
  .mode-option b { display:block; font-size:14px; font-weight:500; }
  .mode-option small { display:block; font-size:12px; color:var(--muted); margin-top:5px; line-height:1.7; }
  .text-button { display:block; border:0; background:transparent; padding:5px 0 0; color:var(--red); font-size:13px; }
  input[readonly] { background:#f4f5f7; color:var(--muted); }
  .history-note { padding:10px 24px 20px; }
  .awards-panel .panel-head { padding-bottom:8px; }
  .awards-caption { padding:0 24px 15px; font-size:12px; color:var(--muted); line-height:1.7; }
  .awards-list { padding:0 24px 8px; max-height:410px; overflow:auto; overscroll-behavior:contain; }
  .award-player { padding:15px 0; border-top:1px solid var(--line); }
  .award-player-heading { display:flex; gap:9px; align-items:center; }
  .award-player .avatar { width:28px; height:28px; font-size:12px; }
  .award-player-name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; font-weight:500; }
  .award-player-name small { font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }
  .award-total { flex-shrink:0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .award-total b { font-size:16px; font-weight:500; color:var(--ink); }
  .award-tags { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0 37px; }
  .award-tag { display:inline-flex; gap:6px; align-items:center; font-size:12px; color:#636b76; background:#f3f4f6; border-radius:6px; padding:5px 8px; }
  .award-tag b { font-weight:500; font-variant-numeric:tabular-nums; }
  .award-tag.champion-tag { color:var(--red); background:var(--red-light); }
  .award-empty { font-size:12px; line-height:1.8; color:#9399a2; }
  #toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,15px); border-radius:10px; background:#252b33; color:white; padding:13px 21px; font-size:14px; box-shadow:0 5px 25px #242b3326; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:20; max-width:calc(100% - 32px); width:max-content; }
  #toast.show { opacity:1; transform:translate(-50%,0); }
}
@layer responsive {
  @media (max-width:760px) { .sound-label { display:none; } .sound-toggle { width:40px; padding:9px; } .rules-button { padding:9px 8px; font-size:13px; gap:6px; } .header { gap:10px; } .game-sidebar { gap:16px; } .awards-caption { padding-left:20px; padding-right:20px; } .awards-list { padding-left:20px; padding-right:20px; max-height:340px; } }
  @media (max-width:1000px) { .shell { padding:0 24px; } .game-grid { grid-template-columns:minmax(0,1fr) 295px; gap:16px; } .dice-row { gap:10px; } .die { width:56px; padding:10px; } .home-grid { grid-template-columns:1fr 1fr; } .showcase .dice-row { gap:8px; } .showcase .die { width:47px; padding:9px; gap:3px; } .mini-dice { gap:2px; } .history-item { flex-wrap:wrap; } }
  @media (max-width:760px) { .shell { padding:0 18px; } .header { height:77px; } .brand-subtitle { display:none; } .brand-name { font-size:25px; } .header-actions { gap:0; } .intro { margin:25px 0 20px; align-items:flex-start; flex-direction:column; gap:14px; } h1 { font-size:30px; } .home-grid,.game-grid { grid-template-columns:1fr; gap:16px; } .entry { grid-row:1; padding:24px; } .showcase { min-height:0; } .showcase-top { padding:24px; } .showcase-title { margin-top:10px; font-size:22px; } .showcase .dice-row { padding:13px 0; gap:12px; } .rules-strip { padding:22px 12px; } .game-main { display:contents; } .play-table { grid-row:1; min-height:350px; padding:20px 16px 25px; } .game-grid > aside { grid-row:2; } .game-main > .players-panel { grid-row:3; } .game-main > .history-panel { grid-row:4; } .prize-list { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; } .prize-row { padding:13px 0; } .prize-info p { font-size:12px; } .prize-icon { width:30px; height:36px; font-size:18px; } .prize-count strong { font-size:21px; } .panel-head { padding:20px 20px 16px; } .room-heading h1 { font-size:28px; } .room-code { font-size:19px; } .table-center { padding:24px 0 17px; } .dice-row { gap:11px; } .die { width:48px; padding:9px; gap:3px; border-radius:11px; } .result-title { font-size:29px; } .pool-footer { padding:13px 20px; } .footer { font-size:12px; letter-spacing:0; flex-wrap:wrap; } }
  @media (max-width:390px) { .shell { padding:0 12px; } .die { width:42px; padding:8px; } .dice-row { gap:8px; } .play-table .die { width:calc((100% - 40px) / 6); max-width:42px; padding:6px; } .prize-list { padding:0 16px; column-gap:16px; } .prize-row { gap:8px; } .prize-icon { display:none; } .showcase .die { width:calc((100% - 40px) / 6); max-width:42px; padding:6px; gap:2px; } .showcase .dice-row { width:100%; gap:8px; } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
}