:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  color: #192f3b;
  background: #f5f1e9;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #eaa654; outline-offset: 3px; }

.shell { max-width: 1120px; margin: 0 auto; padding: 18px 16px 38px; }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; background: #192f3b; color: #fff; font-size: 24px; font-weight: 900; transform: rotate(-7deg); flex: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(23px, 4vw, 32px); line-height: 1.15; margin-bottom: 4px; letter-spacing: .04em; }
h2 { font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 16px; margin-bottom: 9px; }
.subtitle, .muted { color: #63727a; }
.subtitle { margin: 0; font-size: 13px; }
.demo-badge { padding: 7px 10px; border-radius: 999px; background: #fff0d5; border: 1px solid #eccd95; color: #82530f; font-size: 12px; font-weight: 800; white-space: nowrap; }
.notice { border-left: 4px solid #d79335; padding: 10px 13px; background: #fff7e9; border-radius: 8px; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.notice.error { border-color: #cb5b4b; background: #fff0ee; color: #852e27; }
.notice.success { border-color: #4c9580; background: #e7f6ed; color: #285b4b; }
.panel { background: #fffdfa; border: 1px solid #e2ded4; border-radius: 17px; padding: 18px; box-shadow: 0 4px 18px #263f4b0c; }
.panel + .panel, .panel + .grid, .grid + .panel { margin-top: 16px; }
.hero { padding: 28px; background: #192f3b; color: white; border-radius: 20px; }
.hero h2 { font-size: clamp(25px, 5vw, 38px); max-width: 650px; }
.hero p { color: #d0dadd; line-height: 1.7; max-width: 650px; }
.stack { display: grid; gap: 12px; }
.form-row { display: flex; gap: 9px; flex-wrap: wrap; }
.form-row input { flex: 1 1 220px; }
input[type="text"] { min-height: 45px; min-width: 0; border: 1px solid #bfc9c9; background: #fff; border-radius: 10px; padding: 10px 13px; color: #192f3b; }
.button { border: 0; border-radius: 10px; background: #d97843; color: #fff; font-weight: 800; min-height: 44px; padding: 10px 17px; transition: transform .12s, filter .12s; }
.button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.button.secondary { background: #e5ecec; color: #1c3e4a; }
.button.ghost { background: transparent; border: 1px solid #b9c7c8; color: #294653; }
.button.small { min-height: 35px; font-size: 13px; padding: 7px 12px; }
.button.danger { background: #ba5b4d; }
.mini-note { color: #64747b; font-size: 12px; line-height: 1.6; }
.room-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.room-code { font-size: 13px; color: #63727a; }
.room-code strong { font-size: 17px; color: #192f3b; letter-spacing: .1em; }
.link-field { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.link-field input { flex: 1 1 250px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: #e8efed; font-size: 12px; font-weight: 700; }
.pill.orange { background: #fce8d8; color: #9d542b; }
.pill.green { background: #dcefe7; color: #296650; }
.pill.gray { color: #6a7378; background: #edf0f0; }
.status-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.status-main { font-size: clamp(18px, 4vw, 24px); font-weight: 900; }
.status-sub { color: #607079; font-size: 13px; line-height: 1.5; }
.grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-head small { color: #63727a; }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tile { position: relative; min-height: 85px; border: 1px solid #d5d9d3; background: #f8faf7; border-radius: 11px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; color: #193542; text-align: left; }
.tile.boss { background: #fff3dd; border-color: #e3c88c; }
.tile.target { border: 2px solid #db7b3e; background: #fff3e9; box-shadow: 0 0 0 2px #f5d5bd inset; }
.tile.target:hover, .loot-chip.target:hover { transform: translateY(-2px); }
.tile:disabled, .loot-chip:disabled { opacity: 1; cursor: default; }
.tile-number { font-size: 25px; font-weight: 900; line-height: 1; }
.tile-label { font-size: 11px; color: #728087; }
.alibi { font-size: 12px; color: #806438; letter-spacing: .06em; white-space: nowrap; }
.tile.empty { justify-content: center; align-items: center; border-style: dashed; background: #fafaf7; color: #9aa5a2; font-size: 12px; }
.player-list { display: grid; gap: 9px; }
.player { border: 1px solid #dfe5e0; border-radius: 12px; padding: 11px; background: #fff; }
.player.active { border-color: #dfa069; background: #fff9f2; }
.player.me { box-shadow: 3px 0 #5c9a8b inset; }
.player-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.player-name { font-weight: 900; }
.player-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.loot-row { display: flex; flex-wrap: wrap; gap: 5px; min-height: 27px; align-items: center; }
.loot-chip { background: #edf1eb; border: 1px solid #d7dfd4; border-radius: 7px; color: #24434b; font-size: 12px; font-weight: 800; padding: 5px 7px; min-height: 28px; }
.loot-chip.boss { background: #fff0d1; border-color: #e2c58b; }
.loot-chip.target { background: #fff1e8; border: 2px solid #d97843; }
.loot-chip.selected { background: #d97843; color: #fff; border-color: #d97843; }
.subline { color: #63727a; font-size: 12px; line-height: 1.5; margin-top: 6px; }
.hand-panel { position: relative; }
.hand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.card { min-height: 106px; padding: 10px 7px; border-radius: 12px; border: 2px solid #d4dcd9; background: linear-gradient(160deg, #f7faf7, #e8f1ef); color: #173747; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.card strong { font-size: clamp(20px, 5vw, 34px); line-height: 1.1; }
.card span { font-size: 11px; line-height: 1.35; font-weight: 800; }
.card.selected { border-color: #da7740; background: linear-gradient(160deg, #fff3df, #fce0c8); transform: translateY(-3px); box-shadow: 0 5px 12px #9d592342; }
.card:disabled { opacity: .64; }
.card.boss { background: linear-gradient(160deg, #fff8df, #f9dfae); }
.card.dog { background: linear-gradient(160deg, #f1ecfc, #ded3f3); }
.card.greedy { background: linear-gradient(160deg, #fcefe6, #f8d4bf); }
.action-line { background: #eef4f1; border-radius: 10px; padding: 12px; margin-top: 12px; color: #294b52; font-size: 13px; line-height: 1.55; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pending { background: #fff3df; border-color: #e7c58d; }
.pending h2 { color: #784923; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: #4e626a; }
.log-list li { padding-left: 10px; border-left: 2px solid #d9e0dd; line-height: 1.55; }
.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { border-bottom: 1px solid #e4e7e1; text-align: left; padding: 10px 7px; }
.score-table tr.winner { background: #ecf6ed; font-weight: 900; }
.score-table td.number { text-align: right; font-variant-numeric: tabular-nums; }
.rules summary { font-weight: 800; cursor: pointer; }
.rules p, .rules li { font-size: 13px; color: #536871; line-height: 1.65; }
.rules ol { padding-left: 21px; margin-bottom: 0; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #bfd0cc; border-top-color: #337463; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .masthead { align-items: center; }
  .panel { padding: 15px; }
  .hero { padding: 23px 18px; }
  .hand-panel { margin-bottom: 0; }
  .hand-grid { gap: 5px; }
  .card { min-height: 91px; padding: 8px 3px; }
  .card span { font-size: 10px; }
  .tile { min-height: 76px; }
}

@media (max-width: 390px) {
  .shell { padding-inline: 10px; }
  .mark { width: 38px; height: 38px; }
  .demo-badge { font-size: 10px; padding: 5px 7px; }
}