:root {
  color-scheme: light;
  font-family: ui-monospace, "SFMono-Regular", "PingFang SC", "Microsoft YaHei", monospace;
  --ink: #342436;
  --deep: #663c45;
  --cream: #fff4ce;
  --gold: #f2b84b;
  --orange: #dd6b3d;
  --mint: #58a885;
  --blue: #5c85aa;
  --shadow: 0 4px 0 #55343d;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f7d984; color: var(--ink); }
body { min-height: 100dvh; overflow-x: hidden; touch-action: manipulation; }
button, input { font: inherit; touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }

.pixel-sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, #74b9c5 0 20%, #f7d984 20% 62%, #b9674f 62% 100%);
}
.pixel-sky::before {
  content: ""; position: absolute; inset: 17% 0 auto; height: 48%; opacity: .34;
  background: repeating-linear-gradient(90deg, transparent 0 34px, #fff3c8 34px 52px, transparent 52px 86px);
  clip-path: polygon(0 54%, 8% 37%, 17% 51%, 27% 29%, 39% 52%, 50% 22%, 62% 48%, 73% 32%, 86% 53%, 94% 39%, 100% 50%, 100% 100%, 0 100%);
}

#app { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); }
.screen { display: grid; gap: 10px; align-content: start; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { margin: 0; letter-spacing: .14em; font-size: clamp(30px, 9vw, 46px); text-shadow: 3px 3px 0 #fff0ba; }
.subtitle { margin: -7px 0 6px; font-size: 12px; letter-spacing: .18em; color: var(--deep); }
.panel {
  background: color-mix(in srgb, var(--cream) 94%, transparent); border: 3px solid var(--ink);
  border-radius: 6px; padding: 14px; box-shadow: var(--shadow);
}
.panel-title { margin: 0 0 10px; font-size: 15px; letter-spacing: .08em; }
.hero { text-align: center; padding: 22px 18px; }
.hero p { margin: 10px auto 0; max-width: 280px; line-height: 1.65; font-size: 13px; }
.form { display: grid; gap: 11px; }
.field { display: grid; gap: 6px; text-align: left; font-size: 12px; }
input { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); background: #fffaf0; border: 3px solid var(--ink); border-radius: 4px; outline: none; }
input:focus { box-shadow: 0 0 0 3px #f2b84b; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { min-height: 48px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 4px; color: var(--ink); background: #fff5d7; box-shadow: 0 3px 0 #55343d; cursor: pointer; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #55343d; }
.btn.primary { background: var(--gold); font-weight: 900; }
.btn.danger { background: #ef9674; }
.btn.small { min-height: 36px; padding: 6px 9px; font-size: 12px; }
.btn:disabled { opacity: .45; filter: grayscale(.5); cursor: default; }
.wide { grid-column: 1 / -1; width: 100%; }
.room-code { font-size: 30px; letter-spacing: .18em; font-weight: 900; }
.muted { color: #785e60; font-size: 12px; }
.status-chip { padding: 6px 9px; background: #fff4ce; border: 2px solid var(--ink); border-radius: 99px; font-size: 11px; }

.reward-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.reward { position: relative; min-width: 0; padding: 9px 3px 7px; text-align: center; background: #fff4ce; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 0 2px 0 #6c3f43; }
.reward strong { display: block; font-size: 23px; }
.reward span { font-size: 9px; }
.reward.active { background: var(--gold); transform: translateY(-3px); }
.reward.done { opacity: .48; }
.pot { text-align: center; margin-top: 9px; font-weight: 900; color: #9b3d34; }

.seats { display: grid; grid-template-columns: 1fr; gap: 8px; }
.seat {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head meta" "used used";
  gap: 8px;
  padding: 9px 11px;
  background: #ffefc6;
  border: 3px solid var(--ink);
  border-radius: 5px;
  box-shadow: 0 3px 0 #75464a;
}
.seat.me { background: #bfe0ca; }
.seat.offline { opacity: .55; }
.seat-head { grid-area: head; display: flex; align-items: center; gap: 7px; min-width: 0; }
.avatar { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--blue); border: 2px solid var(--ink); }
.seat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: 13px; }
.seat-meta { grid-area: meta; display: flex; justify-content: space-between; align-items: center; gap: 5px; font-size: 10px; }
.used-card-rail {
  grid-area: used;
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 40px;
}
.used-card-stack { display: flex; align-items: center; min-width: 0; }
.used-card-stack .mini-used-card + .mini-used-card { margin-left: -2px; }
.rail-rivet { flex: 0 0 auto; }
.last-card { float: right; padding: 2px 6px; background: #fff; border: 2px solid var(--ink); font-weight: 900; }

.seat-score-actions { position: relative; }
.takeover-button { position: relative; }
.takeover-button::before {
  content: "";
  position: absolute;
  inset: -10px -5px;
}

.seats[data-count="5"],
.seats[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.seats[data-count="5"] .seat,
.seats[data-count="6"] .seat { padding: 8px; gap: 6px; }
.seats[data-count="5"] .used-card-rail,
.seats[data-count="6"] .used-card-rail { min-height: 26px; margin-left: 34px; gap: 4px; }

.hand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.card { aspect-ratio: .68; min-width: 0; padding: 4px; display: grid; place-items: center; font-size: clamp(22px, 8vw, 36px); font-weight: 950; color: var(--ink); background: #fff4ce; border: 3px solid var(--ink); border-radius: 5px; box-shadow: 0 4px 0 #674049; cursor: pointer; }
.card[data-card="9"] { background: #ef9674; }
.card.selected { background: var(--gold); transform: translateY(-7px); }
.card.used-card { opacity: .25; filter: grayscale(1); cursor: default; box-shadow: none; }
.lock-note { min-height: 20px; text-align: center; font-size: 12px; }
.result-grid { display: grid; gap: 9px; }
.play-row { display: flex; align-items: center; justify-content: space-between; padding: 9px; border: 2px solid var(--ink); background: #fff8df; }
.played-card { width: 38px; height: 44px; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; font-size: 22px; font-weight: 900; }
.played-card.cancelled { text-decoration: line-through; opacity: .5; }
.winner { background: #bfe0ca; }
.nine-alert { background: #ef9674; border: 3px solid var(--ink); padding: 12px; text-align: center; box-shadow: var(--shadow); }
.final-hands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.final-card { text-align: center; padding: 9px 5px; background: #fff4ce; border: 3px solid var(--ink); }
.final-card strong { display: block; margin-top: 5px; font-size: 31px; }
.final-card.nine { background: #ef9674; animation: pulse 1s steps(2) infinite; }
.ranking { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; padding: 10px; border: 2px solid var(--ink); background: #fff8df; }
.rank-row.rank-first { background: var(--gold); }

.icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 3px solid var(--ink); background: #fff4ce; box-shadow: 0 3px 0 #55343d; }
.drawer { display: none; }
.drawer.open { display: grid; gap: 9px; }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 2px dashed #b78b68; }
#toast { position: fixed; z-index: 30; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 120px); max-width: 88vw; padding: 10px 14px; color: white; background: #342436; border: 3px solid #fff4ce; transition: transform .2s steps(3); }
#toast.show { transform: translate(-50%, 0); }
#orientation-warning { display: none; }
@keyframes pulse { 50% { transform: translateY(-3px); } }

@media (orientation: landscape) and (max-height: 600px) {
  #app { display: none; }
  #orientation-warning { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 10px; text-align: center; background: #f7d984; color: var(--ink); }
  #orientation-warning strong { font-size: 24px; }
}
@media (min-width: 430px) { #app { padding-inline: 16px; } }
@media (max-width: 370px) { #app { padding-inline: 9px; } .panel { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }