:root {
  color-scheme: light;
  --paper: #f2f0e7;
  --white: #faf8ef;
  --ink: #192d26;
  --muted: #5f6a5d;
  --jade: #1a483a;
  --felt: #174438;
  --light-felt: #e7ead7;
  --line: #dcded1;
  --gold: #e7cb85;
  --red: #a23a2d;
  --serif: "Instrument Serif", Georgia, serif;
  font: 15px "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #b96b3c;
  outline-offset: 4px;
}
button { color: inherit; }
.topbar { border-bottom: 1px solid var(--line); }
.top-inner, .shell { max-width: 1440px; margin: auto; padding-inline: clamp(18px, 4vw, 64px); }
.top-inner { min-height: 76px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; }
.brand { color: inherit; text-decoration: none; display: inline-flex; width: fit-content; align-items: center; gap: 11px; font: 30px/1 var(--serif); white-space: nowrap; }
.brand-tile {
  width: 26px; height: 32px; border: 1px solid #204436; border-radius: 5px;
  display: grid; grid-template-columns: repeat(2, 1fr); align-content: center; gap: 3px;
  padding: 5px; background: #e3e7d8; box-shadow: 0 2px 0 #1d4536; transform: rotate(-8deg);
}
.brand-tile i { width: 5px; height: 5px; border: 1px solid #245e47; border-radius: 50%; justify-self: center; }
.brand-tile i:first-child { grid-column: span 2; border-color: #aa5544; }
.top-inner nav { display: flex; justify-content: center; gap: 23px; align-self: stretch; }
.nav-button { background: none; border: 0; padding: 4px 3px 0; position: relative; color: var(--muted); font-weight: 600; font-size: 14px; }
.nav-button.active { color: var(--jade); }
.nav-button.active::after { content: ""; height: 2px; background: var(--jade); position: absolute; inset: auto 2px -1px; }
.outline, .ink-button { border-radius: 8px; padding: 10px 15px; border: 1px solid #cfd4c5; font-weight: 700; background: transparent; white-space: nowrap; }
.outline:hover { background: #e7e9de; }
.outline.small { justify-self: end; font-size: 13px; }
.tune { margin-right: 5px; font-size: 16px; }
.ink-button { color: #fff9e8; background: #224c3c; border-color: #224c3c; }
.ink-button:hover { background: #2d624c; }
.ink-button span { display: inline-block; margin-right: 4px; font-size: 16px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 30px 0 24px; }
h1, h2, h3, p { margin: 0; }
h1 { font: 400 clamp(46px, 6vw, 72px)/.98 var(--serif); letter-spacing: -.025em; }
.page-heading p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.heading-dot { padding: 0 4px; color: #78836b; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(270px, 24vw, 326px); gap: 20px; align-items: start; }
.board {
  min-height: 586px; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto auto minmax(162px, 1fr) auto;
  padding: 19px 24px 17px; color: var(--light-felt);
  background-color: var(--felt);
  background-image: radial-gradient(ellipse at 50% 41%, #285c48 0%, transparent 73%),
    repeating-linear-gradient(128deg, #ffffff06 0 1px, transparent 1px 4px);
  border: 1px solid #143c30; border-radius: 22px;
  box-shadow: inset 0 0 45px #102f27b5, 0 7px 12px #20302719;
}
.board::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid #b4c0a237; border-radius: 16px;
  pointer-events: none; z-index: -1;
}
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.board-tag, .board-wall { display: inline-flex; gap: 7px; align-items: center; }
.board-tag { border: 1px solid #e0e6c935; padding: 6px 9px; border-radius: 6px; background: #1031268c; }
.board-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.board-wall { font-variant-numeric: tabular-nums; }
.wall-icon { font-size: 15px; color: #e5cd92; }
.opponents { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-top: 21px; min-height: 114px; }
.seat { min-width: 0; }
.seat + .seat { text-align: right; }
.seat-title, .own-title { display: inline-flex; gap: 8px; align-items: center; }
.seat-name { color: #f4efd9; font-weight: 700; font-size: 14px; }
.seat-description { color: #c4d3bb; font-size: 11px; }
.wind {
  width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 28px;
  color: #e2e9cf; border: 1px solid #b8cfaa61; border-radius: 7px;
  font: 600 15px/1 "PingFang TC", "Noto Sans CJK TC", serif;
}
.wind.you { background: var(--gold); color: #2e3c26; border-color: var(--gold); }
.tile-backs { display: flex; gap: 3px; margin: 8px 0 6px; }
.seat + .seat .tile-backs, .seat + .seat .exposure { justify-content: flex-end; }
.seat + .seat .seat-title { flex-direction: row-reverse; }
.back {
  width: clamp(8px, 1.2vw, 15px); height: 22px; border-radius: 3px;
  background: linear-gradient(#4e7761, #3f6954); border: 1px solid #b5c8a855;
  box-shadow: 0 2px 0 #173a2e; position: relative;
}
.back::after { content: ""; position: absolute; inset: 3px 2px; border: 1px solid #abc4a246; border-radius: 1px; }
.exposure { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.set { display: inline-flex; gap: 2px; }
.river {
  align-self: center; margin: 12px auto 20px; width: min(100%, 570px);
  padding: 13px 16px; border-radius: 16px; border: 1px solid #afc7a238;
  background: #173d3268;
}
.river-title { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: #e5ead1; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.river-title span:last-child { color: #c6d8bc; font-weight: 400; font-size: 11px; }
.river-row { min-height: 33px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; }
.river-row + .river-row { border-top: 1px solid #dbe8c31b; padding-top: 4px; margin-top: 4px; }
.river-name { color: #d4e1c8; font-size: 11px; }
.river-tiles { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-bottom: 3px; }
.river-empty { color: #b8ccad; font-size: 15px; padding-left: 5px; }
.felt-empty { color: #dbe4cd; padding: 15px 0; text-align: center; }
.rack-area { border-top: 1px solid #d7e5be3d; padding-top: 13px; }
.rack-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 10px; }
.rack-header .exposure { justify-content: flex-end; }
.rack {
  min-height: 85px; padding: 9px 8px 12px; display: flex; justify-content: center; align-items: center;
  gap: clamp(3px, .5vw, 7px); border-radius: 11px; background: #0f302797;
  border: 1px solid #6c8d7350; border-bottom-color: #90a88a66;
  box-shadow: inset 0 2px 7px #102b24b5;
}
.tile {
  --tw: clamp(28px, 4vw, 51px); --th: calc(var(--tw) * 1.29);
  display: inline-grid; place-items: center; flex: 0 1 var(--tw); width: var(--tw); min-width: 0; height: var(--th);
  position: relative; border: 1px solid #ded1a9; border-radius: 7px; padding: 2px;
  background: linear-gradient(151deg, #fffbed, #ede6ce);
  color: #20493a; box-shadow: 0 4px 0 #bcab7a, 0 5px 3px #061d17a8, inset 0 0 0 2px #fff9e5;
  vertical-align: middle; font-weight: 700;
}
.tile.compact { --tw: 21px; --th: 26px; flex: 0 0 var(--tw); border-radius: 4px; padding: 1px; box-shadow: 0 2px 0 #b6a679, inset 0 0 0 1px #fff9e5; }
.river .tile.compact { --tw: 23px; --th: 27px; }
.tile.latest { outline: 1px solid #f0cb71; outline-offset: 2px; }
.tile.playable { transition: transform .14s ease, background .14s ease; }
.tile.playable:hover, .tile.selected { transform: translateY(-5px); background: #fffae7; }
.tile.selected { outline: 2px solid #f2d180; outline-offset: 2px; }
.tile-glyph { font: 600 clamp(17px, 2.6vw, 34px)/1 "PingFang TC", "Hiragino Sans", "Noto Sans CJK TC", serif; }
.compact .tile-glyph { font-size: 13px; }
.tile-glyph.red { color: #a6382e; }
.tile-glyph.blue { color: #2e5078; }
.white-dragon { border: 1px solid #35618b; box-shadow: inset 0 0 0 2px #f6edd8, inset 0 0 0 3px #35618b; width: 58%; height: 71%; border-radius: 2px; }
.compact .white-dragon { box-shadow: inset 0 0 0 1px #f6edd8, inset 0 0 0 2px #35618b; }
.pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; width: 87%; height: 82%; }
.pip { grid-area: var(--row) / var(--col); width: 83%; aspect-ratio: 1; border: 1.5px solid #2e644f; border-radius: 50%; background: radial-gradient(circle, #2e644f 0 26%, transparent 32%); }
.pip.red { border-color: #a73d32; background: radial-gradient(circle, #a73d32 0 26%, transparent 32%); }
.pip.blue { border-color: #2e5477; background: radial-gradient(circle, #2e5477 0 26%, transparent 32%); }
.compact .pip { border-width: 1px; }
.pips.one { display: grid; grid-template: 1fr / 1fr; width: 60%; height: auto; aspect-ratio: 1; }
.pips.one .pip { width: 94%; border-width: 2px; box-shadow: inset 0 0 0 1px #b1473d; background: radial-gradient(circle, #a73d32 0 25%, #f6edd8 28% 43%, #28644e 46% 58%, #f6edd8 61%); }
.compact .pips.one .pip { border-width: 1px; box-shadow: none; }
.bonus-face { display: grid; place-items: center; line-height: 1; font-size: 10px; }
.bonus-face b { font-size: 16px; color: #9c4732; font-weight: 500; }
.controls { min-height: 48px; margin-top: 9px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.prompt { font-size: 12px; color: #dfebd3; flex: 1 1 175px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.action-button {
  border: 1px solid #b9cbb67a; border-radius: 7px; background: #295243;
  color: #f4f2dc; padding: 8px 11px; font-size: 12px; font-weight: 700;
}
.action-button:hover { background: #3a6954; }
.action-button.primary { background: var(--gold); border-color: var(--gold); color: #2b3925; }
.action-button.primary:hover { background: #f4dca4; }
.board button:focus-visible { outline-color: #fff1c4; }
.hand-card { min-height: 586px; display: flex; flex-direction: column; background: var(--white); border: 1px solid #dadbce; border-radius: 16px; box-shadow: 0 3px 10px #30382b0b; overflow: hidden; }
.card-head { padding: 18px 17px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head h2, .sheet h2 { font: 400 31px/1 var(--serif); }
.seed-label { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-tabs { display: flex; gap: 18px; padding-inline: 17px; border-bottom: 1px solid var(--line); }
.card-tab { position: relative; padding: 8px 0 11px; background: transparent; border: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.card-tab.active { color: var(--jade); }
.card-tab.active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--jade); }
.review-dot { display: inline-block; height: 6px; width: 6px; background: #387452; border-radius: 50%; vertical-align: middle; margin-left: 3px; }
.card-body { flex: 1; min-height: 240px; max-height: 436px; overflow: auto; scrollbar-width: thin; padding: 6px 17px; }
.activity { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 9px; min-height: 42px; border-bottom: 1px solid #e9e8dc; }
.activity:last-child { border: 0; }
.activity .wind { width: 24px; height: 24px; color: #335843; border: 1px solid #d3decd; background: #e8eee2; font-size: 12px; }
.activity .wind.you { background: #e9ddba; border-color: #dfd0a6; }
.activity strong { font-weight: 700; }
.activity p { font-size: 12px; line-height: 1.35; }
.activity p span { color: var(--muted); }
.activity small { display: block; font-size: 10px; color: #64725f; margin-top: 1px; }
.rail-footer { margin-top: auto; border-top: 1px solid var(--line); padding: 13px 17px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.rail-footer b { color: var(--ink); }
.empty { color: var(--muted); font-size: 13px; padding-block: 15px; line-height: 1.55; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 1px 24px; color: var(--muted); font-size: 12px; }
.text-button { border: 0; background: none; padding: 3px; text-decoration: underline; text-underline-offset: 3px; }
.result { padding: 12px 0 9px; border-bottom: 1px solid var(--line); }
.result h3 { font: 400 27px/1 var(--serif); margin-bottom: 5px; }
.result p { color: var(--muted); font-size: 12px; }
.net-row, .payment { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gain { color: #216342; }
.loss { color: #9d332c; }
.payment small { display: block; color: var(--muted); }
.result-group { padding-top: 12px; }
.result-group h4 { margin: 0; font-size: 12px; }
.review-entry { padding: 9px 0; border-bottom: 1px solid var(--line); }
.review-entry summary { font-size: 12px; cursor: pointer; }
.grade { display: inline-block; padding: 2px 5px; border-radius: 4px; background: #e6ecdf; color: #24583e; font-weight: 700; margin-inline: 2px 3px; }
.grade.brilliant, .grade.great { background: #d5ebec; color: #14586a; }
.grade.mistake, .grade.inaccuracy { background: #f1e6ca; color: #6f4e17; }
.grade.blunder { background: #f3dcd5; color: #963b2e; }
.review-entry p { padding: 6px 0 0 13px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.sheet { width: min(500px, calc(100% - 28px)); max-height: min(85dvh, 760px); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 0; box-shadow: 0 22px 70px #112e284c; }
.sheet::backdrop { background: #10271eb3; }
.sheet form { display: flex; flex-direction: column; max-height: min(85dvh - 4px, 756px); }
.sheet-head, .sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 21px; }
.sheet-head { border-bottom: 1px solid var(--line); }
.sheet-footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.sheet-body { padding: 16px 21px; overflow: auto; }
.icon-button { font-size: 24px; line-height: 1; border: 0; background: transparent; padding: 2px 5px; }
.sheet label { display: block; font-size: 13px; font-weight: 700; }
.sheet select, .sheet input[type="number"] { display: block; width: 100%; margin: 5px 0 12px; padding: 8px; border-radius: 6px; border: 1px solid #bfcabc; background: #fffdf5; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }
.rules-intro { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.rule-group { padding: 8px 0; border-top: 1px solid var(--line); }
.rule-group summary { cursor: pointer; padding: 4px 0 7px; font-weight: 700; }
.sheet label.check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-weight: 500; }
.sheet input[type="checkbox"] { accent-color: var(--jade); width: 15px; height: 15px; }
.error, .form-error { color: #8a2921; font-size: 13px; padding-bottom: 8px; }
.benchmark-card { background: var(--white); border: 1px solid var(--line); border-radius: 15px; padding: 22px; margin-bottom: 15px; }
.benchmark-card h2 { font: 400 32px/1 var(--serif); margin-bottom: 8px; }
.benchmark-card p { font-size: 13px; color: var(--muted); }
.benchmark-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.benchmark-table th, .benchmark-table td { text-align: right; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.benchmark-table th:first-child, .benchmark-table td:first-child { text-align: left; }
.benchmark-table th { color: var(--muted); font-size: 11px; }
.benchmark-table td strong { font-size: 16px; }
@media (max-width: 980px) {
  .layout { gap: 12px; grid-template-columns: minmax(0, 1fr) 252px; }
  .board { padding-inline: 15px; }
  .tile { --tw: clamp(22px, 4.2vw, 46px); }
  .rack { gap: 3px; }
}
@media (max-width: 740px) {
  .top-inner { min-height: 61px; grid-template-columns: auto 1fr auto; gap: 7px; }
  .top-inner nav { gap: 11px; }
  .nav-button { font-size: 12px; }
  .brand { font-size: 25px; gap: 7px; }
  .brand-tile { width: 20px; height: 26px; padding: 3px; }
  .outline.small { padding: 6px 7px; font-size: 11px; }
  .tune { margin: 0; font-size: 11px; }
  .page-heading { margin: 23px 0 17px; }
  .page-heading p { font-size: 12px; margin-top: 7px; }
  .page-heading .ink-button { padding: 7px 9px; font-size: 12px; }
  .layout { grid-template-columns: 1fr; }
  .board { min-height: 490px; }
  .hand-card { min-height: 265px; }
  .card-body { min-height: 110px; max-height: 325px; }
  .tile { --tw: clamp(25px, 6vw, 42px); }
  .rack { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .top-inner, .shell { padding-inline: 12px; }
  h1 { font-size: 42px; }
  .board { padding: 13px 12px; border-radius: 16px; }
  .board::before { inset: 5px; border-radius: 12px; }
  .board-top { padding-inline: 3px; }
  .rack .tile { --tw: clamp(30px, 8.9vw, 36px); border-radius: 5px; flex: 0 0 var(--tw); }
  .rack .tile-glyph { font-size: 22px; }
  .rack { min-height: 64px; padding: 8px 6px 11px; gap: 7px 5px; }
  .rack:has(> :nth-child(8)) { display: grid; grid-template-columns: repeat(7, auto); }
  .river { padding-inline: 7px; margin-block: 6px 12px; }
  .river-row { grid-template-columns: 39px 1fr; gap: 2px; }
  .opponents { min-height: 103px; gap: 8px; margin-top: 15px; }
  .seat-name { font-size: 12px; }
  .seat-title { gap: 4px; }
  .seat-description { font-size: 10px; }
  .back { height: 19px; gap: 2px; }
  .tile-backs { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}