:root {
  --bg: #f4efe6;
  --ink: #23302c;
  --accent: #1f5c4d;
  --accent2: #b15d79;
  --felt: #1e6b55;
  --felt-dark: #154e3e;
  --card: #fffdf8;
  --line: #d9cfbd;
  --gold: #edc66c;
  --t: clamp(24px, min(3.6vw, 5.4vh), 52px); /* hand tile width */
  --s: calc(var(--t) * 0.62); /* small tile width */
  font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
button, .button, select, input {
  font: inherit;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.45em 0.9em;
  color: var(--ink);
}
button, .button { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.6; cursor: default; }
button.primary, .button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
button.big { font-size: 1.15em; padding: 0.7em 1.6em; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--accent); color: #fff; gap: 1rem; flex-wrap: wrap; }
.topbar .brand { color: #fff; font-weight: 800; text-decoration: none; font-size: 1.15rem; }
.topbar .brand span { font-weight: 400; font-size: 0.85em; opacity: 0.85; }
.topbar nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.topbar nav button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); padding: 0.3em 0.7em; }
main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0.8rem; }
footer { display: flex; gap: 1.2rem; justify-content: center; padding: 0.8rem; font-size: 0.9rem; flex-wrap: wrap; }
.loading { text-align: center; padding: 3rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.hero { text-align: center; max-width: 900px; margin: 0 auto; }
.title-cast { width: 100%; max-height: 42vh; object-fit: cover; object-position: center 20%; border-radius: 10px; }
.row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; align-items: center; margin: 0.6rem 0; }
.small { font-size: 0.88rem; color: #5d6a65; }
.welcome { font-size: 1.15rem; font-weight: 700; }
.welcome small, td small { font-weight: 400; margin-left: 0.3em; color: var(--accent2); }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: #fff; }
.card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.waiting b { font-size: 1.6em; color: var(--accent); }
.code b { font-size: 2em; letter-spacing: 0.15em; color: var(--accent); }
.members { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; max-width: 480px; margin: 1rem auto; }
.members li { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; background: #fff; }
.members li.empty { color: #8a948f; border-style: dashed; }
#notice { display: none; position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: #2b3532; color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; z-index: 50; max-width: 92vw; }
dialog { border: 1px solid var(--line); border-radius: 14px; max-width: min(720px, 94vw); width: 100%; padding: 1.2rem 1.4rem; }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog .close { position: absolute; right: 0.6rem; top: 0.6rem; border: 0; font-size: 1.3rem; background: transparent; }
dialog label { display: flex; gap: 0.6rem; align-items: center; margin: 0.6rem 0; }
.ranking, .delta { border-collapse: collapse; width: 100%; }
.ranking td, .ranking th, .delta td { border-bottom: 1px solid var(--line); padding: 0.35rem 0.5rem; text-align: left; }
tr.me { background: #fff4d6; }
.code-box { width: 100%; min-height: 4.5em; font-family: ui-monospace, monospace; }
.achievements li small { color: #7b8682; margin-left: 0.3em; }
.sales { text-align: center; margin: 1rem auto; max-width: 720px; }
.rules { max-width: 860px; margin: 1rem auto; line-height: 1.75; }
.queen-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.queen-pick { border: 2px solid var(--line); border-radius: 12px; padding: 0.4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; background: #fff; }
.queen-pick.on { border-color: var(--accent); background: #eef7f3; }
.queen-pick input { display: none; }
.queen-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 8px; }

/* ===== table ===== */
.table-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.table-bar .spacer { flex: 1; }
.mq-root { position: relative; }
.mq-table {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.6fr) minmax(120px, 1fr);
  grid-template-areas: "top top top" "left center right" "me me me";
  gap: 0.4rem;
  background: radial-gradient(circle at 50% 40%, var(--felt), var(--felt-dark));
  border-radius: 16px;
  padding: 0.6rem;
  color: #fff;
}
.tile { width: var(--t); height: calc(var(--t) * 4 / 3); display: inline-block; vertical-align: bottom; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)); user-select: none; }
.tile.small { width: var(--s); height: calc(var(--s) * 4 / 3); }
.tile.tiny { width: calc(var(--s) * 0.75); height: calc(var(--s)); }
.mq-seat { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 12px; position: relative; min-width: 0; }
.mq-seat.active, .me-info.active { box-shadow: 0 0 0 3px var(--gold); background: rgba(255, 255, 255, 0.08); }
.seat-top { grid-area: top; justify-content: center; padding: 0.15rem 0.5rem; }
.seat-top .portrait { width: clamp(48px, 8vh, 84px); }
.seat-left { grid-area: left; flex-direction: column; justify-content: center; }
.seat-right { grid-area: right; flex-direction: column; justify-content: center; }
.seat-bottom { display: none; }
.mq-seat .info, .me-info { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.seat-top .info { align-items: flex-start; }
.wind { background: #fff; color: var(--felt-dark); border-radius: 6px; padding: 0 0.35em; font-weight: 800; }
.dealer .wind, .me-info .wind { box-shadow: 0 0 0 2px var(--gold); }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.info small, .me-info small { color: var(--gold); }
.backs, .melds { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; max-width: 100%; }
.seat-left .backs, .seat-right .backs { max-width: calc(var(--s) * 7); }
.melds { gap: 6px; }
.meld { display: inline-flex; gap: 1px; align-items: flex-end; }
.tile.called { transform: rotate(90deg); margin: 0 calc(var(--s) * 0.17); }
.portrait { width: clamp(56px, min(8vw, 12vh), 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #f6e8ee; border: 3px solid rgba(255, 255, 255, 0.7); flex: none; transition: box-shadow 0.2s; }
.portrait.small { width: 56px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait.speaking { box-shadow: 0 0 0 4px var(--gold), 0 0 18px var(--gold); }
.avatar { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.2em; font-weight: 800; background: #dfeae5; color: var(--felt-dark); }
.bubble { position: absolute; top: -0.4rem; right: 0.2rem; background: #fff; color: #b5363c; font-weight: 900; font-size: 1.4rem; border-radius: 12px; padding: 0.1em 0.5em; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); animation: pop 0.25s ease-out; z-index: 5; }
@keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }
.mq-center {
  grid-area: center;
  --rw: calc(var(--s) * 6 + 5px); /* river width: 6 tiles */
  --rh: calc(var(--s) * 4 / 3 * 4 + 3px); /* river depth: 4 rows */
  display: grid;
  grid-template-columns: var(--rh) var(--rw) var(--rh);
  grid-template-rows: var(--rh) var(--rw) var(--rh);
  grid-template-areas: ". rtop ." "rleft info rright" ". rbottom .";
  justify-content: center;
  align-content: center;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 0.4rem;
  position: relative;
}
.river { display: grid; grid-template-columns: repeat(6, var(--s)); grid-auto-rows: calc(var(--s) * 4 / 3); gap: 1px; width: var(--rw); height: var(--rh); align-content: start; }
.river-bottom { grid-area: rbottom; }
.river-top { grid-area: rtop; transform: rotate(180deg); }
.river-right, .river-left { align-self: center; justify-self: center; }
.river-right { grid-area: rright; transform: rotate(-90deg); }
.river-left { grid-area: rleft; transform: rotate(90deg); }
.tile.sideways { transform: rotate(90deg) scale(0.85); }
.tile.claimed { opacity: 0.3; }
.tile.last { outline: 3px solid var(--gold); border-radius: 4px; }
.mq-info { grid-area: info; align-self: center; text-align: center; background: rgba(0, 0, 0, 0.35); padding: 0.4rem; border-radius: 10px; font-size: 0.85rem; margin: 6px; }
.mq-info .round { font-size: 1.15rem; font-weight: 800; }
.dora { display: flex; gap: 2px; align-items: center; justify-content: center; margin-top: 0.2rem; flex-wrap: wrap; }
.dora span { font-size: 0.8rem; margin-right: 0.3rem; }
.calling { color: var(--gold); margin-top: 0.2rem; }
.mq-me { grid-area: me; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; }
.me-top { display: flex; gap: 1rem; align-items: center; }
.me-info { flex-direction: row; gap: 0.5rem; padding: 0.2rem 0.6rem; border-radius: 10px; position: relative; }
.waits { display: flex; align-items: center; gap: 2px; font-size: 0.85rem; background: rgba(0, 0, 0, 0.25); padding: 0.15rem 0.5rem; border-radius: 8px; }
.waits.furiten { color: #ffb3b3; }
.hand-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hand { display: flex; gap: 2px; align-items: flex-end; }
.hand .tile.drawn { margin-left: calc(var(--t) * 0.35); }
.hand .tile.playable { cursor: pointer; transition: transform 0.08s; }
.hand .tile.playable:hover, .hand .tile.playable:focus { transform: translateY(-12px); outline: none; }
.hand .tile.blocked { filter: brightness(0.6); }
.hand .tile.reachable { box-shadow: 0 0 0 3px var(--gold); border-radius: 5px; }
.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 2.6rem; }
.actions button { background: #fff8e8; font-weight: 800; font-size: 1.05rem; }
.actions button.win { background: #c23d42; color: #fff; border-color: #c23d42; animation: glow 1s infinite alternate; }
.actions button.active { background: var(--gold); }
.actions button.pass { background: #e8eeec; font-weight: 600; }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(237, 198, 108, 0.9); } to { box-shadow: 0 0 0 8px rgba(237, 198, 108, 0); } }
.actions .hint { margin: 0; font-size: 0.85rem; opacity: 0.85; width: 100%; text-align: center; }
.resume { margin-top: 0.2rem; }
.mq-timer { width: min(420px, 80%); height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; position: relative; overflow: visible; }
.mq-timer i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 4px; transition: width 0.25s linear; }
.mq-timer span { position: absolute; right: -3.2em; top: -0.55em; font-size: 0.8rem; }
.mq-waiting { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.mq-members { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; width: min(760px, 100%); }
.mq-members li { background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 0.8rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.mq-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); border-radius: 16px; z-index: 20; padding: 1rem; }
.mq-overlay[hidden] { display: none; }
.mq-card { background: var(--card); color: var(--ink); border-radius: 14px; padding: 1rem 1.4rem; max-width: 640px; width: 100%; max-height: 100%; overflow: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); text-align: center; }
.mq-card h2 { margin: 0.2rem 0 0.6rem; }
.result-head { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.result-portrait { width: 110px; height: 110px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid var(--gold); }
.yaku { text-align: left; margin: 0; padding-left: 1.2rem; }
.points { font-size: 1.3rem; font-weight: 800; color: #b5363c; margin: 0.4rem; }
.result-hand { display: flex; gap: 1px; justify-content: center; flex-wrap: wrap; margin: 0.4rem 0; }
.result-hand .meldtile { margin-left: 3px; }
.mq-card .dora { color: var(--ink); }
.delta td.plus { color: #1b7a52; font-weight: 700; }
.delta td.minus { color: #b5363c; font-weight: 700; }
.mq-card button { margin-top: 0.8rem; }
@media (max-width: 760px) {
  :root { --t: clamp(20px, 6.6vw, 40px); }
  .mq-table { grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "left right" "center center" "me me"; }
  .portrait { width: 52px; }
  .seat-left, .seat-right { flex-direction: row; }
  .queen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mq-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hand .tile.drawn { margin-left: 4px; }
}