:root {
  color-scheme: dark;
  font-family: "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  color: #f2f3eb;
  background: #121815;
  --muted: #aebbb0;
  --gold: #f6cc77;
  --line: #38473e;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1050px; margin: auto; padding: 32px clamp(14px, 4vw, 48px); }
header, .status, .results-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
header { margin-bottom: 20px; }
h1 { font-size: clamp(24px, 4vw, 35px); margin: 0; letter-spacing: .025em; }
h2 { font-size: 17px; margin: 0; }
p { margin: 0; }
button, input { font: inherit; }
button:not(.tile), input {
  border: 1px solid #52655a; border-radius: 7px; padding: 7px 12px; color: inherit; background: #26352c;
}
button { cursor: pointer; }
button:not(.tile):hover { background: #394d40; }
:focus-visible { outline: 2px solid #fff1be; outline-offset: 3px; }
.modes { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; }
.modes button { border-color: transparent; background: transparent; }
.modes button[aria-pressed="true"] { background: var(--gold); color: #251d10; font-weight: 700; }
.table {
  background: radial-gradient(ellipse at 50% 15%, #24523f, #183c30 78%);
  border: 1px solid #426353; border-radius: 14px; padding: clamp(13px, 3vw, 26px);
}
.status strong { font-size: 21px; }
#turn { margin-left: 12px; color: #cedad0; font-size: 14px; }
.hand {
  --gap: clamp(1px, .55vw, 7px);
  --draw-gap: clamp(3px, 1vw, 14px);
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 54px)) calc(var(--draw-gap) - var(--gap)) minmax(0, 54px);
  align-items: end;
  gap: var(--gap);
  margin: 24px 0 14px;
}
.tile {
  --tile-size: 27px;
  width: var(--tile-size);
  aspect-ratio: 3 / 4;
  flex: none;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 9%;
  background: #fffdf4;
  vertical-align: middle;
}
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.hand .tile { width: 100%; min-width: 0; }
.hand button:hover { transform: translateY(-3px); }
.hand .best { box-shadow: 0 0 0 2px var(--gold); }
.hand .best:focus-visible { outline: 3px solid white; }
.hand .draw { grid-column: 15; }
#hint { min-height: 1.5em; color: #ecf2ea; font-size: 14px; }
.river { margin-top: 18px; padding-top: 12px; border-top: 1px solid #ffffff27; }
.river h2 { font-size: 13px; color: #cad8ce; margin-bottom: 8px; }
.tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.river .tile { --tile-size: 21px; }
.panel { background: #1d2821; border: 1px solid var(--line); border-radius: 11px; margin-top: 14px; padding: 14px clamp(10px, 2.6vw, 22px); }
#summary, #previous-summary { color: var(--muted); font-size: 14px; margin-top: 3px; }
#previous-result { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
#previous-result[hidden] { display: none; }
#score { color: var(--gold); font-size: 27px; }
.result-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 7px 0; }
.result-row:first-child { margin-top: 10px; }
.result-row:last-child { padding-bottom: 0; }
.choice, .effective { display: inline-flex; gap: 4px; align-items: center; }
.effective { font-size: 12px; color: var(--muted); }
.effective .tile { --tile-size: 20px; }
.optimal > strong { color: var(--gold); }
summary { cursor: pointer; }
form { margin-top: 10px; }
label, footer { color: var(--muted); font-size: 13px; }
.form-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
input { min-width: 0; flex: 1 1 180px; }
#notation-error { color: #ffb5a5; font-size: 14px; }
#notation-error:not(:empty) { margin-top: 6px; }
footer { margin-top: 14px; }
footer a { color: var(--gold); }