:root {
  color-scheme: light;
  --ink:#17291f; --paper:#f4f2e7; --ivory:#fffdf4; --line:#283c32;
  --green:#215e43; --mint:#dceadc; --felt:#94b597; --felt-light:#b4cbb0;
  --forest:#244733; --accent:#dcf0a2; --muted:#53665a;
  font-family:"Bricolage Grotesque","Yu Gothic UI","Hiragino Sans",Meiryo,sans-serif;
  background:var(--paper); color:var(--ink);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
button { font:inherit; color:inherit; }
button:not(:disabled) { cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:3px solid #2b704c; outline-offset:3px; }
.shell { max-width:1440px; margin:auto; padding:0 clamp(14px,3.8vw,58px) 42px; }
.masthead { display:flex; align-items:center; justify-content:space-between; min-height:75px; border-bottom:2px solid var(--ink); gap:10px; }
.brand { text-decoration:none; display:inline-flex; gap:11px; align-items:center; font-weight:900; letter-spacing:.03em; font-size:1.12rem; }
.logo { border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink); width:31px; height:34px; display:grid; place-items:center; border-radius:7px; background:var(--mint); font-family:serif; font-weight:800; }
.tools { display:flex; gap:9px; }
.control { background:var(--ivory); border:2px solid var(--ink); border-radius:100px; padding:8px 16px; font-weight:800; box-shadow:0 3px 0 var(--ink); transition:background .14s,transform .14s; }
.control:hover { background:var(--mint); }
.control:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.control.round { width:40px; height:40px; padding:0; font-size:1.14rem; }
.control.primary { background:var(--accent); }
.control.primary:hover { background:#cbe585; }
.welcome { display:grid; grid-template-columns:1fr .92fr; align-items:stretch; gap:clamp(25px,5vw,72px); max-width:1050px; margin:clamp(30px,8vw,102px) auto 10px; }
.welcome-copy { align-self:center; }
.matchup { display:flex; align-items:center; width:max-content; gap:8px; font-size:.84rem; margin:0 0 14px; }
.matchup b { display:grid; place-items:center; width:28px; height:29px; border:1.5px solid var(--ink); border-radius:5px; background:var(--mint); }
.matchup b:first-of-type { background:var(--accent); }
.versus { font-size:.73rem; margin:0 3px; color:var(--muted); }
.welcome h1 { margin:0 0 24px; font-size:clamp(2rem,5vw,3.6rem); font-weight:900; letter-spacing:.05em; line-height:1.2; }
.welcome h2,.wall h2 { font-size:1.07rem; margin:0; }
.guide { list-style:none; margin:9px 0 22px; padding:0; display:grid; gap:9px; font-size:.95rem; }
.guide li { padding-left:18px; position:relative; }
.guide li::before { content:""; width:7px; height:7px; background:var(--green); border-radius:2px; position:absolute; left:1px; top:.53em; transform:rotate(45deg); }
.start { min-width:min(100%,280px); padding:12px 22px; display:flex; justify-content:space-between; align-items:center; font-size:1.04rem; }
.start span { font-size:1.2rem; }
.welcome-art { min-height:360px; border:2px solid var(--ink); border-radius:27px; background:var(--mint); box-shadow:5px 6px 0 var(--ink); display:grid; place-items:center; position:relative; overflow:hidden; }
.art-inner { width:72%; aspect-ratio:1; background:var(--forest); border:2px solid var(--ink); border-radius:16px; rotate:-11deg; box-shadow:5px 6px 0 #a1b796; display:grid; grid-template-columns:1fr 1fr; align-content:center; justify-items:center; gap:10px; padding:15%; }
.art-honor { width:clamp(37px,5vw,73px); aspect-ratio:.76; display:grid; place-items:center; border:2px solid var(--ink); background:var(--ivory); border-radius:9px; box-shadow:0 5px 0 #acbf92; font:800 clamp(1.4rem,4vw,3rem)/1 serif; }
.art-east { background:var(--accent); }
.art-corner { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--ink); position:absolute; }
.corner-nw { left:20px; top:20px; }.corner-ne {right:20px; top:20px}.corner-sw {left:20px; bottom:20px}.corner-se {right:20px; bottom:20px}
.status { display:flex; align-items:center; gap:11px; margin:22px 0 15px; min-height:45px; }
.status h1 { font-size:clamp(1rem,2.3vw,1.36rem); line-height:1.3; margin:0; flex:1; }
.status-seat { font-family:serif; font-weight:800; width:37px; height:37px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:8px; background:var(--accent); flex:none; }
.layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:17px; align-items:start; }
.board { container-type:inline-size; padding:12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"west west west" "north felt south" "east east east"; gap:8px; background:var(--felt); border:2px solid var(--ink); border-radius:19px; box-shadow:0 4px 0 var(--ink); }
.seat {
  --hand-width:min(6.25cqi,33px);
  --hand-height:calc(var(--hand-width) * 1.34);
  --hand-gap:min(.48cqi,3px);
  --draw-gap:min(.95cqi,6px);
  --rotation:0deg;
  min-width:0; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
}
.seat.east { grid-area:east; flex-direction:column-reverse; }
.seat.west { grid-area:west; --rotation:180deg; }
.seat.north { grid-area:north; --rotation:90deg; }
.seat.south { grid-area:south; --rotation:-90deg; }
.seat-name { display:flex; align-items:center; gap:5px; font-size:.74rem; font-weight:800; white-space:nowrap; }
.seat-name b { background:var(--ivory); border:1px solid var(--ink); border-radius:5px; padding:1px 5px; font:800 1rem serif; }
.seat.current .seat-name b { background:var(--accent); box-shadow:0 2px 0 var(--ink); }
.hand { display:flex; gap:var(--hand-gap); align-items:center; justify-content:center; min-height:var(--hand-height); }
.hand-slot { width:var(--hand-width); height:var(--hand-height); flex:none; position:relative; }
.hand-slot .tile { position:absolute; top:50%; left:50%; translate:-50% -50%; width:var(--hand-width); height:var(--hand-height); rotate:var(--rotation); }
.drawn-slot { margin-inline-start:var(--draw-gap); }
.west .hand { flex-direction:row-reverse; }
.west .drawn-slot { margin-inline:0 var(--draw-gap); }
.north .hand,.south .hand {
  flex-direction:column;
  min-height:calc(14 * var(--hand-width) + 13 * var(--hand-gap) + var(--draw-gap));
}
.south .hand { flex-direction:column-reverse; }
.north .hand-slot,.south .hand-slot { width:var(--hand-height); height:var(--hand-width); }
.north .drawn-slot,.south .drawn-slot { margin-inline-start:0; margin-block-start:var(--draw-gap); }
.south .drawn-slot { margin-block:0 var(--draw-gap); }
.felt { grid-area:felt; min-width:0; display:grid; grid-template-rows:1fr auto; background:var(--felt-light); border:1.5px solid #43664d; border-radius:14px; padding:9px; }
.rivers { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; }
.river { border:1px solid #819c82; min-width:0; padding:3px; display:flex; flex-direction:column; gap:2px; border-radius:5px; }
.river small {font:700 .64rem serif;color:#305340}
.river-tiles { display:flex; align-content:flex-start; flex-wrap:wrap; gap:1px; }
.round-name { font-weight:800; color:#2c553d; font-size:.7rem; margin:5px auto 0; }
.wall { min-width:0; background:var(--ivory); border:2px solid var(--ink); border-radius:18px; box-shadow:0 4px 0 var(--ink); padding:15px; }
.wall-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #a7b1a3; padding-bottom:9px; }
.remaining { font-variant-numeric:tabular-nums; font-size:.82rem; }
.remaining b { font-size:1.14rem; padding-right:2px; }
.wall-groups { display:grid; gap:13px; padding-top:13px; }
.wall-row { display:grid; grid-template-columns:repeat(9,minmax(0,49px)); gap:4px; justify-content:center; }
.tile { container-type:inline-size; padding:0; user-select:none; position:relative; min-width:0; flex:none; border:1px solid #2f4136; background:#fffcf0; border-radius:4px; color:#17291f; width:25px; height:35px; display:inline-grid; place-items:center; box-shadow:0 2px 0 #587b58; vertical-align:middle; }
.tile .face { pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font:800 78cqi/1 serif; }
.tile.man .face { font-size:58cqi; gap:0; }
.tile.man .suitmark { font-size:.87em; }
.tile.man .suitmark,.tile.red .face { color:#a33228; }
.tile.green .face { color:#226648; }
.tile.blank .face { border:max(1px,5cqi) solid #315168; border-radius:2px; width:61%; height:58%; }
.tile .pattern {
  display:grid; width:81%; height:81%; gap:0;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  place-items:center;
}
.pip { width:85%; height:84%; max-width:95%; max-height:95%; color:#274b62; background:currentColor; }
.pip.ink-2 { color:#b13c2d; }.pip.ink-3 { color:#25664a; }
.pin .pip { height:auto; aspect-ratio:1; max-width:min(52cqi,calc(97cqi / var(--rows))); border-radius:50%; }
.pin .pip::after { content:""; display:block; width:38%; aspect-ratio:1; border-radius:50%; background:#fff9e9; margin:auto; position:relative; top:50%; transform:translateY(-50%); }
.sou .pip { width:27%; border-radius:999px; }
.sou .face.bird { width:84%; height:74%; display:block; position:relative; }
.bird::before,.bird::after { content:""; position:absolute; inset:0; }
.bird::before { background:#226648; clip-path:polygon(83% 15%,100% 23%,83% 29%,77% 40%,78% 60%,63% 76%,48% 81%,35% 95%,25% 91%,34% 77%,4% 66%,42% 62%,17% 39%,51% 48%,62% 27%,65% 15%,74% 10%); }
.bird::after { background:#b13c2d; clip-path:polygon(52% 50%,68% 44%,61% 64%,44% 73%,49% 60%,33% 45%); }
.tile .count { display:grid; place-items:center; box-sizing:border-box; min-width:12px; line-height:1; padding:2px; position:absolute; right:0; bottom:0; font:800 .65rem/1 system-ui; color:#183b28; background:#d9e8d0; border-top-left-radius:4px; }
.wall .tile { aspect-ratio:.7; width:100%; height:auto; min-height:38px; }
.wall .tile .face { margin-top:-11%; max-height:73%; }
.wall .tile:disabled { cursor:default; }
.wall .tile.empty { background:#e9ede3; color:#65746a; box-shadow:none; opacity:.65; }
.tile:enabled:hover { background:var(--accent); box-shadow:0 3px 0 var(--ink); transform:translateY(-2px); }
.tile:enabled:active { transform:translateY(1px); }
.hand .drawn { border-color:#496438; background:#edf5ce; }
.river .tile { width:17px; height:22px; box-shadow:none; border-radius:3px; }
.river .tile.latest { border:2px solid #294e34; background:var(--accent); }
.error { background:#ffeee5; color:#722d22; border:1px solid #a04738; padding:13px; border-radius:7px; }
dialog { width:min(460px,calc(100% - 28px)); background:var(--ivory); color:var(--ink); padding:24px; border:2px solid var(--ink); border-radius:17px; box-shadow:5px 6px 0 var(--ink); }
dialog::backdrop { background:#182c22aa; }
dialog h2 { margin:0 0 12px; font-size:1.25rem; }
.detail { color:var(--muted); font-size:.87rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; }
@media(max-width:800px) {
  .layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:680px) {
  .masthead { min-height:60px; }.welcome { grid-template-columns:1fr; gap:26px; margin-top:34px; }.welcome-art { grid-row:2; min-height:auto; aspect-ratio:1.55; }.art-inner { width:56%; padding:11%; }
  .board { padding:7px; gap:5px; }.felt { padding:4px; }.seat-name { gap:3px; font-size:.62rem; }.seat-name b { padding:1px 3px; }
  .river .tile { width:13px; height:18px; }.river { padding:2px; }.rivers { gap:3px; }
  .status { margin:16px 0 12px; }.wall { padding:11px; }.wall-row {gap:3px}
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {transition:none!important;scroll-behavior:auto!important} }