:root{
  --felt:#0f3f34;--felt-d:#07221d;--jade:#1f7a5c;--jade-d:#145442;
  --ivory:#f7f0e1;--ivory-2:#e8dcc1;--edge:#d6c7a2;
  --ink:#1b2a2a;--ver:#c2412d;--gold:#c9a24a;--gold-2:#ead08a;
  --txt:#efe8d6;--muted:#a3bbb0;--line:rgba(234,208,138,.18);
  --tw:50px;--mw:26px;--rw:27px;
  --sans:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--txt);font:14px/1.45 var(--sans);
  background:radial-gradient(ellipse 80% 70% at 50% 42%,#1a5d4e 0%,var(--felt) 45%,var(--felt-d) 100%) fixed;
  padding-bottom:env(safe-area-inset-bottom)}
button,select{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:8px max(12px,env(safe-area-inset-left));border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(5,22,18,.75),rgba(5,22,18,.35))}
.brand{display:flex;align-items:center;gap:8px}
.brand h1{margin:0;font:700 18px/1.1 var(--serif);letter-spacing:.06em;color:var(--gold-2)}
.brand h1 span{margin-left:8px;font:500 12px var(--sans);color:var(--muted);letter-spacing:.02em}
.tools{display:flex;align-items:center;gap:6px}
.tbtn{min-height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);cursor:pointer}
.tbtn:hover{border-color:var(--gold)}
.tbtn.primary{background:linear-gradient(#dcbb68,#b48934);color:#2a1a05;border-color:#f0dca0;font-weight:700}
select.tbtn{padding:0 6px;background:#0d3029}
.switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:36px;padding:0 4px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.knob{width:34px;height:20px;border-radius:10px;background:rgba(255,255,255,.15);position:relative;transition:.2s}
.knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ivory);transition:.2s}
.switch input:checked+.knob{background:var(--gold)}
.switch input:checked+.knob::after{left:16px}
.switch input:focus-visible+.knob{outline:2px solid #fff;outline-offset:2px}

/* table */
.table{display:grid;gap:10px;padding:10px;max-width:1320px;margin:0 auto;
  grid-template-columns:minmax(170px,1fr) minmax(340px,2fr) minmax(170px,1fr);
  grid-template-areas:"left top right" "left center right" "me me me"}
.seat-left{grid-area:left}.seat-top{grid-area:top}.seat-right{grid-area:right}
.center{grid-area:center}.me{grid-area:me}
.seat,.me,.center{border:1px solid var(--line);border-radius:14px;background:rgba(3,18,15,.22);
  padding:8px;min-width:0;transition:box-shadow .25s,border-color .25s}
.seat.active,.me.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(201,162,74,.28)}
.seat{display:flex;flex-direction:column;gap:6px}

.seat-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:24px}
.nm{font-weight:700}
.nm small{margin-left:4px;font-weight:400;color:var(--muted);font-size:11px}
.score{margin-left:auto;font:700 15px var(--sans);font-variant-numeric:tabular-nums}
.pos{color:#8fe0a9}.neg{color:#ff9c86}
.turn-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.active .turn-dot{background:var(--gold-2);box-shadow:0 0 8px var(--gold-2);animation:pulse 1.2s infinite}
.tag{font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;line-height:16px}
.tag.dealer{background:var(--ver);color:#fff}
.tag.win{background:rgba(201,162,74,.22);color:var(--gold-2);border:1px solid rgba(201,162,74,.5)}
.tag.lock{background:rgba(255,255,255,.1);color:var(--muted)}
.tag.pig{background:#6b2a1f;color:#ffd2c7}

.opp-hand{display:flex;flex-wrap:wrap;gap:2px;align-items:center;--w:calc(var(--rw)*.62)}
.opp-hand .tile{--w:calc(var(--rw)*.62)}
.opp-hand.shown .tile{--w:var(--mw)}
.cnt{margin-left:6px;font-size:12px;color:var(--muted)}
.melds{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.melds:empty{display:none}
.meld,.wins{display:inline-flex;align-items:flex-end;gap:1px;position:relative;padding-bottom:13px}
.meld .tile,.wins .tile{--w:var(--mw)}
.meld em,.wins em{position:absolute;bottom:0;left:0;right:0;text-align:center;font:600 10px/12px var(--sans);font-style:normal;color:var(--gold-2)}
.wins{padding:2px 3px 13px;border-radius:6px;background:rgba(194,65,45,.18);border:1px solid rgba(194,65,45,.45)}
.river{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;min-height:calc(var(--rw)*1.36)}
.river .tile{--w:var(--rw)}

/* tiles */
.tile{--w:var(--tw);position:relative;display:inline-flex;flex:none;width:var(--w);height:calc(var(--w)*1.36);
  border-radius:calc(var(--w)*.14);border:1px solid var(--edge);
  background:linear-gradient(170deg,#fffcf3 0%,var(--ivory) 55%,var(--ivory-2) 100%);
  box-shadow:0 calc(var(--w)*.05) 0 #cdbb92,0 calc(var(--w)*.1) 0 var(--jade),0 calc(var(--w)*.1 + 2px) 5px rgba(0,0,0,.4);
  margin-bottom:calc(var(--w)*.1)}
.tile svg{width:88%;height:88%;margin:auto;display:block}
.tile::after{content:"";position:absolute;left:24%;right:24%;bottom:5%;height:max(2px,calc(var(--w)*.05));border-radius:2px;opacity:.75}
.tile[data-suit="0"]::after{background:var(--ver)}
.tile[data-suit="1"]::after{background:#1d7a4f}
.tile[data-suit="2"]::after{background:#1f5fa8}
.tile.back{background:linear-gradient(150deg,#34a07c,var(--jade) 50%,var(--jade-d));border-color:#0f4635;
  box-shadow:0 calc(var(--w)*.08) 0 #e5d8b8,0 2px 4px rgba(0,0,0,.35)}
.tile.back::after{display:none}
.tile.inline{--w:20px;vertical-align:middle;margin:0 2px 2px}
.tile.last{box-shadow:0 0 0 2px var(--ver),0 calc(var(--w)*.1) 0 var(--jade),0 0 12px rgba(194,65,45,.7);animation:pop .35s ease-out}
.tile.won{border-color:#e0b25a}

/* center */
.center{display:flex;align-items:center;gap:14px;padding:10px 14px}
.compass{position:relative;flex:none;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,#0b2f27 0 52%,#14493c 53% 100%);border:2px solid rgba(201,162,74,.45)}
.wall{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wall b{font:700 30px/1 var(--sans);color:var(--gold-2);font-variant-numeric:tabular-nums}
.wall small{font-size:11px;color:var(--muted)}
.cm{position:absolute;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font:700 12px var(--serif);background:#0b2f27;border:1px solid var(--line);color:var(--muted)}
.cm.s2{top:-6px;left:calc(50% - 13px)}.cm.s0{bottom:-6px;left:calc(50% - 13px)}
.cm.s3{left:-6px;top:calc(50% - 13px)}.cm.s1{right:-6px;top:calc(50% - 13px)}
.cm.on{background:var(--gold);color:#2a1a05;border-color:var(--gold-2);box-shadow:0 0 12px var(--gold)}
.cinfo{min-width:0;display:flex;flex-direction:column;gap:4px}
.phase{font:700 18px/1.3 var(--serif);color:var(--ivory)}
.meta{font-size:12px;color:var(--muted)}
.reason{font-size:13px;color:var(--gold-2);min-height:1.4em}

/* me */
.me{display:flex;flex-direction:column;gap:8px}
.me-top{display:flex;flex-direction:column;gap:6px}
.controls{display:flex;flex-direction:column;gap:6px}
.coach{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;padding:6px 10px;border-radius:10px;
  background:rgba(201,162,74,.1);border:1px dashed rgba(201,162,74,.5)}
.coach small{flex-basis:100%;color:var(--muted);font-size:11px}
.coach-tag{font-size:11px;font-weight:700;padding:0 6px;border-radius:5px;background:var(--gold);color:#2a1a05}
.actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:44px}
.prompt{margin:0;font-size:13px}
.prompt b{color:var(--gold-2)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.btn{min-height:44px;min-width:64px;padding:0 16px;border-radius:11px;border:1px solid rgba(234,208,138,.45);
  background:rgba(8,30,25,.7);font-weight:700;cursor:pointer;transition:transform .1s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.primary{background:linear-gradient(#e2c16f,#b48934);color:#2a1a05;border-color:#f0dca0}
.btn.win{background:linear-gradient(#dc5a40,#a52d1c);color:#fff7e8;border-color:#f19a85;min-width:84px}
.btn.gold{border-color:var(--gold);color:var(--gold-2)}
.btn:focus-visible,.tbtn:focus-visible,.ht:focus-visible{outline:3px solid #fff;outline-offset:2px}

.hand-row{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:wrap}
.hand{display:flex;align-items:flex-end;gap:3px;padding-top:calc(var(--tw)*.42);flex-wrap:nowrap}
.ht{padding:0;cursor:pointer;transition:transform .14s ease,box-shadow .14s}
.ht:hover{transform:translateY(-3px)}
.ht.sel{transform:translateY(calc(var(--tw)*-.32));border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold-2),0 calc(var(--w)*.1) 0 var(--jade),0 8px 16px rgba(0,0,0,.45)}
.ht.drawn::before{content:"摸";position:absolute;top:calc(var(--tw)*-.36);left:50%;transform:translateX(-50%);
  font:700 10px/14px var(--sans);padding:0 4px;border-radius:4px;background:var(--ver);color:#fff;white-space:nowrap}
.ht.sel.drawn::before{display:none}
.ht.hint{outline:2px dashed var(--gold-2);outline-offset:2px}
.ht.off{filter:saturate(.45) brightness(.78);cursor:not-allowed}
.ht.dim{opacity:.5}
.gap{width:calc(var(--tw)*.3);flex:none}

.foot{text-align:center;font-size:11px;color:var(--muted);margin:2px 0 14px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  max-width:min(92vw,520px);padding:10px 16px;border-radius:12px;background:#2a1410;border:1px solid var(--ver);
  color:#ffe6dc;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.info{background:#0c2b25;border-color:var(--gold)}

/* dialogs */
.dlg{width:min(760px,94vw);max-height:88dvh;padding:0;border:none;border-radius:16px;
  background:#f8f1e2;color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(2,12,10,.66)}
.dlg[open]{display:flex;flex-direction:column}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #e2d5b6;margin:0}
.dlg-head h2{margin:0;font:700 19px var(--serif);color:#7a2a1c}
.x{width:40px;height:40px;border:none;background:transparent;font-size:24px;cursor:pointer;border-radius:8px}
.x:hover{background:#efe4cc}
.dlg-body{overflow:auto;padding:4px 20px 18px;line-height:1.75}
.dlg-body h3{font:700 15px var(--serif);color:#7a2a1c;margin:16px 0 6px;border-left:3px solid var(--ver);padding-left:8px}
.dlg-body a{color:#1f5fa8}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 18px;border-top:1px solid #e2d5b6}
.dlg-foot form{margin:0}
.dlg .btn{background:#fff;color:var(--ink);border-color:#cdbb92}
.dlg .btn.primary{background:linear-gradient(#e2c16f,#b48934);color:#2a1a05}
.scores{width:100%;border-collapse:collapse;font-size:14px}
.scores th,.scores td{padding:6px 8px;border-bottom:1px solid #e6dabf;text-align:left}
.scores th small{margin-left:4px;color:#7d8a83;font-weight:400}
.scores .pos{color:#1d7a4f}.scores .neg{color:#b3261e}
.list{margin:0;padding-left:18px;font-size:13px}
.list li{margin:3px 0}
.list .muted,.dlg .muted{color:#7d8a83}
.log{max-height:260px;overflow:auto}
.rv-hand h4{margin:8px 0 4px;font-size:13px}
.rv-hand .tiles{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;--mw:24px}
.rv-hand .tile{--w:24px}
details summary{cursor:pointer;margin-top:14px;font-weight:700;color:#7a2a1c}

@keyframes pulse{50%{opacity:.35}}
@keyframes pop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* tablet */
@media (max-width:1000px){
  :root{--tw:min(50px,calc((100vw - 110px)/14.6));--rw:23px;--mw:22px}
  .table{grid-template-columns:minmax(130px,1fr) minmax(260px,1.6fr) minmax(130px,1fr)}
}

/* phone */
@media (max-width:640px){
  :root{--tw:min(46px,calc((100vw - 64px)/14));--rw:15px;--mw:15px}
  body{font-size:13px}
  .bar{padding:6px 8px;gap:4px}
  .brand img{width:22px;height:22px}
  .brand h1{font-size:15px}
  .brand h1 span{display:none}
  .tools{gap:4px}
  .tbtn{min-height:34px;padding:0 9px}
  .table{gap:6px;padding:6px;grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:"left top right" "center center center" "me me me"}
  .seat{padding:5px;gap:4px;border-radius:10px}
  .seat-head{gap:3px}
  .nm{font-size:12px}.nm small{display:none}
  .score{font-size:13px}
  .tag{font-size:10px;padding:0 4px}
  .opp-hand .tile.back{display:none}
  .cnt{margin:0}
  .melds{gap:3px}
  .meld,.wins{padding-bottom:11px}
  .meld em,.wins em{font-size:9px;line-height:10px}
  .center{padding:6px 10px;gap:10px}
  .compass{width:64px;height:64px}
  .wall b{font-size:18px}.wall small{font-size:9px}
  .cm{width:18px;height:18px;font-size:9px}
  .cm.s2{top:-5px;left:calc(50% - 9px)}.cm.s0{bottom:-5px;left:calc(50% - 9px)}
  .cm.s3{left:-5px;top:calc(50% - 9px)}.cm.s1{right:-5px;top:calc(50% - 9px)}
  .phase{font-size:15px}
  .reason{font-size:12px}
  .me{padding:6px;gap:6px;border-radius:10px}
  .me .river{--rw:17px}
  .me .river .tile{--w:17px}
  .hand-row{flex-direction:column;align-items:center;gap:4px}
  .melds .tile{--w:17px}
  .hand{gap:2px}
  .gap{width:4px}
  .ht.drawn::before{font-size:9px;line-height:12px;padding:0 2px}
  .btn{min-height:44px;padding:0 12px;min-width:56px}
  .actions{gap:6px}
  .btns{margin-left:0;width:100%;justify-content:flex-end}
  .dlg-body{padding:4px 14px 14px}
}

/* Phone integration: retain all 13/14 tiles with usable touch targets. */
@media (max-width:480px){
  .hand{
    --tw:min(44px,calc((100vw - 64px)/7));
    display:grid;
    grid-template-columns:repeat(7,var(--tw));
    gap:18px 6px;
    padding-top:16px;
    padding-bottom:4px;
  }
  .hand .gap{display:none}
  .ht.drawn{outline:2px solid var(--gold);outline-offset:1px}
}

/* ==========================================================================
   BLOODFLOW iPhone mobile patch (append after existing style.css)
   Scope: iPhone Safari / Home Screen only. Every rule is inside a narrow or
   short-landscape media query, so desktop (>1000px, normal height) is untouched.
   ========================================================================== */

/* A. Shared touch + safe-area layer: narrow phones and short landscape */
@media (max-width:759px), (orientation:landscape) and (max-height:500px){
  /* Safe areas on all four sides; right uses its own inset (base rule reused left) */
  .bar{
    padding-top:max(6px,env(safe-area-inset-top));
    padding-right:max(8px,env(safe-area-inset-right));
    padding-left:max(8px,env(safe-area-inset-left));
  }
  .table{
    padding-right:max(6px,env(safe-area-inset-right));
    padding-left:max(6px,env(safe-area-inset-left));
  }
  .table>*{min-width:0;max-width:100%}
  .foot{
    padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
    margin-bottom:max(14px,env(safe-area-inset-bottom));
  }

  /* Toolbar, toggle and select: 44px touch targets */
  .tbtn{min-height:44px;min-width:44px;padding:0 10px;touch-action:manipulation}
  select.tbtn{font-size:16px;padding:0 8px} /* 16px stops iOS focus zoom */
  .switch{min-height:44px;min-width:44px;padding:0 6px;touch-action:manipulation}

  /* Response buttons and modal close */
  .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .x{width:44px;height:44px;touch-action:manipulation}

  /* Hand tiles: fast taps, no double-tap zoom, no long-press callout */
  .hand{touch-action:manipulation}
  .ht{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;user-select:none;
  }

  /* Public win strips wrap instead of forcing overflow */
  .meld,.wins{max-width:100%}
  .wins{flex-wrap:wrap}
  .melds{max-width:100%;min-width:0}
  .river{min-width:0;max-width:100%}

  /* Opponent meld/win history: bounded, scrollable, still fully readable */
  .seat .melds{
    max-height:118px;overflow-y:auto;overscroll-behavior:contain;
    align-content:flex-start;padding-right:2px;
  }
  /* Own melds/wins: bounded so many repeated wins never bury the hand */
  .me .melds{
    width:100%;justify-content:center;align-content:flex-start;
    max-height:132px;overflow-y:auto;overscroll-behavior:contain;
  }

  /* Dialogs: inset-aware, dynamic viewport, 44px close */
  .dlg{
    width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width:760px;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .dlg-head{padding:6px 8px 6px 14px}
  .dlg-foot{flex-wrap:wrap;padding:8px 14px}
  .dlg-body{overscroll-behavior:contain}

  .toast{
    max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

/* B. Narrow portrait (and narrow landscape such as 667x375): grid hand */
@media (max-width:759px){
  .table{gap:6px;padding-top:6px;padding-bottom:6px}
  .me{padding:6px;gap:6px}
  .hand-row{flex-direction:column;align-items:center;gap:6px}

  /* 7 columns, tile width 44..52px; overrides the old <=480 and 481..640 rules */
  .me .hand{
    --tw:clamp(44px,calc((100vw - 52px - env(safe-area-inset-left) - env(safe-area-inset-right))/7),52px);
    display:grid;
    grid-template-columns:repeat(7,var(--tw));
    justify-content:center;
    gap:18px 4px;
    padding-top:18px;
    padding-bottom:4px;
    flex-wrap:initial;
  }
  .me .hand .gap{display:none}
  /* Drawn tile pinned to the last column so it keeps a visual gap when its
     row is not full; gold outline + 摸 badge stay as the cue */
  .me .hand .ht.drawn{grid-column:-2 / -1;outline:2px solid var(--gold);outline-offset:1px}
  .me .hand .ht.hint{outline:2px dashed var(--gold-2);outline-offset:2px}
  .me .hand .ht:focus-visible{outline:3px solid #fff;outline-offset:2px}

  .btns{margin-left:0;width:100%;justify-content:flex-end}
  .prompt{flex:1 1 100%}
}

/* Phone grid columns must not shrink: minmax(0,1fr) instead of 1fr */
@media (max-width:640px){
  .table{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* C. Very narrow (320px class): 6 columns keep >=44px */
@media (max-width:359px){
  .me .hand{
    --tw:clamp(44px,calc((100vw - 48px - env(safe-area-inset-left) - env(safe-area-inset-right))/6),48px);
    grid-template-columns:repeat(6,var(--tw));
    column-gap:4px;
  }
}

/* D. Toolbar wraps under the brand on small portrait phones */
@media (max-width:480px){
  .bar{row-gap:4px}
  .tools{width:100%;flex-wrap:wrap;justify-content:space-between;gap:4px}
}

/* E. Short landscape (667x375, 844x390, 932x430): compact chrome */
@media (orientation:landscape) and (max-height:500px){
  .bar{padding-bottom:4px}
  .brand h1{font-size:15px}
  .brand h1 span{display:none}
  .seat{padding:5px;gap:4px}
  .center{padding:6px 10px;gap:10px}
  .compass{width:72px;height:72px}
  .wall b{font-size:20px}.wall small{font-size:9px}
  .cm{width:20px;height:20px;font-size:10px}
  .cm.s2{top:-5px;left:calc(50% - 10px)}.cm.s0{bottom:-5px;left:calc(50% - 10px)}
  .cm.s3{left:-5px;top:calc(50% - 10px)}.cm.s1{right:-5px;top:calc(50% - 10px)}
  .phase{font-size:15px}
  .seat .river .tile{--w:17px}
  .seat .river{min-height:calc(17px*1.36)}
  .seat .melds .tile{--w:17px}
  .seat .melds{max-height:96px}
}

/* F. Wide short landscape: one 44px row fits (14*44 + gaps + drawn gap) */
@media (orientation:landscape) and (max-height:500px) and (min-width:760px){
  .me .hand{--tw:44px;display:flex;flex-wrap:nowrap;gap:3px;padding-top:18px}
  .me .hand .gap{display:block;width:12px}
  .hand-row{gap:8px}
  .me .melds{width:auto;max-width:100%}
}

/* G. Touch devices: no sticky hover lift after a tap (selection lift kept) */
@media (hover:none) and (max-width:759px), (hover:none) and (orientation:landscape) and (max-height:500px){
  .ht:not(.sel):hover{transform:none}
  .tbtn:hover{border-color:var(--line)}
  .tbtn.primary:hover{border-color:#f0dca0}
}

/* Measured integration correction: short narrow landscape keeps actions and
   all hand rows reachable together after long public records accumulate. */
@media (orientation:landscape) and (max-height:500px) and (max-width:759px){
  .me .hand{--tw:44px;row-gap:16px}
  .me .melds{max-height:96px}
  .me .river{max-height:72px;overflow-y:auto;overscroll-behavior:contain}
  .seat .river{max-height:132px;overflow-y:auto;overscroll-behavior:contain}
}

/* ==========================================================================
   BLOODFLOW table redesign: append after style.css, mobile-patch.css and the
   short-narrow-landscape correction. Desktop first (>=1001px). Rules below
   1001px are visual only (color/material) and never change sizes, so the
   tested iPhone tile/target/inset rules stay in force.
   ========================================================================== */

/* ---------- 1. Global material (no geometry changes) ---------- */
:root{
  --rail:#2b241e;--rail-hi:#4a3d31;--rail-d:#16110d;
  --felt-1:#237a62;--felt-2:#165a48;--felt-3:#0b3a2f;
  --plaque:rgba(6,20,16,.58);
}
body{
  background:radial-gradient(ellipse 95% 75% at 50% 38%,#1c3a32 0%,#121d1a 55%,#0a0e0d 100%) fixed;
}
.table{
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%,var(--felt-1) 0%,var(--felt-2) 48%,var(--felt-3) 100%);
  border-radius:18px;
}
.tile{
  border-color:#d8c9a4;
  background:linear-gradient(172deg,#fffdf7 0%,#f7efdd 56%,#e7d9b9 100%);
  box-shadow:
    0 calc(var(--w)*.05) 0 #d3c197,
    0 calc(var(--w)*.11) 0 #1b6c52,
    0 calc(var(--w)*.11 + 2px) 6px rgba(0,0,0,.45);
}
.tile.back{
  background:linear-gradient(155deg,#3aa983 0%,#1f7a5c 52%,#125241 100%);
  border-color:#0e4333;
  box-shadow:0 calc(var(--w)*.08) 0 #e6d9b9,0 2px 5px rgba(0,0,0,.4);
}
.tile.last{
  box-shadow:0 0 0 2px var(--ver),0 calc(var(--w)*.11) 0 #1b6c52,0 0 14px rgba(194,65,45,.75);
}
.ht.off{filter:grayscale(.6) brightness(.66) contrast(.92)}
.ht.off:hover{transform:none}
.wins{background:rgba(194,65,45,.2);border-color:rgba(226,110,88,.55)}
.tbtn{background:rgba(255,255,255,.045);border-color:rgba(234,208,138,.24)}
select.tbtn{background:#10261f}
.btn{background:rgba(10,26,22,.82);border-color:rgba(234,208,138,.5)}
.btn:hover:not(:disabled){border-color:var(--gold-2)}
.dlg{border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px #d8c9a4}
.dlg-head{background:linear-gradient(#fbf6ea,#f3e9d3)}
.foot{opacity:.7}

/* ---------- 2. Desktop table (>=1001px) ---------- */
@media (min-width:1001px){
  :root{
    --tw:min(60px,calc((100vw - 240px)/15.2));
    --rw:28px;--mw:26px;
  }
  body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

  /* header: quiet strip aligned with the table */
  .bar{
    border-bottom:none;background:transparent;
    padding:10px max(20px,calc((100% - 1400px)/2 + 18px)) 4px;
  }
  .brand h1{font-size:20px}
  .tbtn{min-height:38px;padding:0 14px}
  .switch{min-height:38px}

  /* the tabletop: felt inside a warm charcoal rail */
  .table{
    flex:1 0 auto;
    width:min(1400px,calc(100% - 32px));max-width:none;
    margin:6px auto 0;
    padding:16px 22px 0;
    gap:10px 18px;
    grid-template-columns:minmax(230px,1fr) minmax(440px,1.7fr) minmax(230px,1fr);
    grid-template-rows:auto minmax(220px,1fr) auto;
    grid-template-areas:"top top top" "left center right" "me me me";
    border:14px solid var(--rail);
    border-radius:34px;
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.3),
      inset 0 0 90px rgba(0,0,0,.42),
      inset 0 2px 0 rgba(255,255,255,.04),
      0 0 0 1px var(--rail-hi),
      0 0 0 4px var(--rail-d),
      0 22px 55px rgba(0,0,0,.6);
  }

  /* seats lose their cards; info lives on a small plaque */
  .seat,.me,.center{border:none;background:transparent;border-radius:0;padding:0;box-shadow:none}
  .seat.active,.me.active{box-shadow:none}
  .seat-head{
    width:fit-content;min-width:190px;min-height:30px;
    padding:3px 12px;border-radius:999px;
    background:var(--plaque);border:1px solid rgba(234,208,138,.16);
    transition:box-shadow .25s,border-color .25s;
  }
  .seat.active>.seat-head,.me.active #meHead{
    border-color:var(--gold);
    box-shadow:0 0 0 1px var(--gold),0 0 20px rgba(201,162,74,.4);
  }
  .nm{font-size:14px}
  .score{font-size:16px}

  /* public rivers: faint inlaid zones */
  .river{
    padding:4px;border-radius:8px;
    background:rgba(0,0,0,.12);
    box-shadow:inset 0 0 0 1px rgba(234,208,138,.07);
    overscroll-behavior:contain;
  }
  .seat .melds{
    max-height:calc(var(--mw)*1.46*2 + 34px);
    overflow-y:auto;overscroll-behavior:contain;align-content:flex-start;
  }
  .meld,.wins{max-width:100%}
  .wins{flex-wrap:wrap}

  /* opposite seat */
  .seat-top{flex-direction:column;align-items:center;gap:8px}
  .seat-top .opp-hand{justify-content:center;flex-wrap:nowrap}
  .seat-top .opp-hand .tile.back{--w:24px}
  .seat-top .melds{justify-content:center}
  .seat-top .river{
    width:min(100%,calc(var(--rw)*14 + 36px));
    max-height:calc((var(--rw)*1.46 + 2px)*3 + 10px);
    overflow-y:auto;
  }

  /* left / right seats: side-on wall of backs, river toward the center */
  .seat-left,.seat-right{
    display:grid;align-self:center;align-content:start;
    grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;
  }
  .seat-left{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "hand river" "hand melds"}
  .seat-right{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "river hand" "melds hand"}
  .seat-left>.seat-head{grid-area:head;justify-self:start}
  .seat-right>.seat-head{grid-area:head;justify-self:end}
  .seat-left>.opp-hand,.seat-right>.opp-hand{
    grid-area:hand;align-self:start;
    flex-direction:column;flex-wrap:nowrap;align-items:center;gap:1px;
  }
  .seat-left>.river,.seat-right>.river{
    grid-area:river;align-self:start;
    max-height:calc((var(--rw)*1.46 + 2px)*5 + 10px);overflow-y:auto;
  }
  .seat-left>.melds,.seat-right>.melds{grid-area:melds}
  .seat-left .opp-hand .tile.back,.seat-right .opp-hand .tile.back{
    width:30px;height:14px;margin:0;border-radius:3px;
  }
  .seat-left .opp-hand .tile.back{margin-left:4px;box-shadow:-4px 0 0 #e6d9b9,-4px 2px 4px rgba(0,0,0,.4)}
  .seat-right .opp-hand .tile.back{margin-right:4px;box-shadow:4px 0 0 #e6d9b9,4px 2px 4px rgba(0,0,0,.4)}
  .seat-left .cnt,.seat-right .cnt{margin:4px 0 0;white-space:nowrap}
  /* final reveal: faces laid out in rows */
  .seat-left:has(>.opp-hand.shown),.seat-right:has(>.opp-hand.shown){
    grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "hand" "river" "melds";
  }
  .opp-hand.shown{flex-direction:row!important;flex-wrap:wrap!important}

  /* center: the single focus for phase and turn */
  .center{
    align-self:center;justify-content:center;gap:24px;padding:12px;
    background:radial-gradient(closest-side,rgba(3,18,14,.42),rgba(3,18,14,0));
  }
  .compass{
    width:156px;height:156px;
    background:radial-gradient(circle,#0b2c25 0 50%,#123f34 51% 100%);
    border:2px solid rgba(201,162,74,.55);
    box-shadow:inset 0 0 18px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);
  }
  .wall b{font-size:40px}
  .wall small{font-size:12px}
  .cm{width:32px;height:32px;font-size:14px}
  .cm.s2{top:-8px;left:calc(50% - 16px)}.cm.s0{bottom:-8px;left:calc(50% - 16px)}
  .cm.s3{left:-8px;top:calc(50% - 16px)}.cm.s1{right:-8px;top:calc(50% - 16px)}
  .cinfo{max-width:330px}
  .phase{font-size:24px}
  .reason{font-size:14px}
  .cinfo .meta{overflow-wrap:anywhere}

  /* own seat: river, then plaque + actions, then hand on the rail */
  .me{
    display:grid;gap:8px 16px;align-items:center;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"river river" "head actions" "coach coach" "hand hand";
  }
  .me-top,.controls{display:contents}
  #meHead{grid-area:head;justify-self:start}
  #meRiver{
    grid-area:river;justify-self:center;
    width:min(100%,calc(var(--rw)*16 + 40px));
    max-height:calc((var(--rw)*1.46 + 2px)*3 + 10px);overflow-y:auto;
  }
  #coach{grid-area:coach;justify-self:center;max-width:820px;padding:4px 10px}
  #actions{grid-area:actions;justify-content:flex-end;gap:8px 14px;min-height:44px}
  .prompt{max-width:460px;text-align:right;font-size:14px}
  .btns{margin-left:0;flex-wrap:wrap;justify-content:flex-end}
  .btn{min-height:44px;min-width:72px;font-size:15px}

  .hand-row{
    grid-area:hand;
    flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 26px;
    margin:2px -22px 0;padding:6px 22px 16px;border-radius:20px 20px 0 0;
    background:linear-gradient(180deg,rgba(43,36,30,0) 0%,rgba(43,36,30,.5) 62%,var(--rail) 100%);
  }
  .me .melds{
    max-width:min(46%,600px);max-height:calc(34px*1.46*2 + 34px);
    overflow-y:auto;overscroll-behavior:contain;align-content:flex-end;gap:8px;
  }
  .me .melds .tile{--w:34px}
  .hand{gap:4px;padding-top:calc(var(--tw)*.44);flex-wrap:nowrap}
  .hand .gap{width:calc(var(--tw)*.36)}
  .ht{transition:transform .14s ease,box-shadow .14s,filter .14s}
  .ht:hover{transform:none}
  .ht:not(.off):not(.sel):hover{transform:translateY(-6px)}
  .ht.drawn::before{font-size:11px;line-height:15px;padding:0 5px}

  .foot{margin:8px 0 12px}
}

/* ---------- 3. Desktop with limited height (e.g. 1280x800) ---------- */
@media (min-width:1001px) and (max-height:860px){
  :root{--tw:min(54px,calc((100vw - 240px)/15.2));--rw:24px;--mw:23px}
  .bar{padding-top:6px;padding-bottom:2px}
  .table{padding-top:10px;gap:6px 14px;grid-template-rows:auto minmax(200px,1fr) auto}
  .seat-top .river,#meRiver{max-height:calc((var(--rw)*1.46 + 2px)*2 + 10px)}
  .seat-left>.river,.seat-right>.river{max-height:calc((var(--rw)*1.46 + 2px)*4 + 10px)}
  .seat-left .opp-hand .tile.back,.seat-right .opp-hand .tile.back{height:11px}
  .compass{width:126px;height:126px}
  .wall b{font-size:32px}
  .phase{font-size:21px}
  .me .melds .tile{--w:30px}
  .hand-row{padding-bottom:12px}
  .foot{margin:4px 0 8px}
}

/* ==========================================================================
   BLOODFLOW final feedback layer: append after gui-patch.css.
   Adds: #postWinAuto status row, .toast.hu, settlement hero in #reviewDlg,
   dialog scroll hardening. No changes to table/tile geometry.
   ========================================================================== */

/* ---------- 1. Post-win auto status (owner-controlled) ---------- */
#postWinAuto{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  min-width:0;padding:4px 4px 4px 14px;border-radius:999px;
  background:rgba(6,20,16,.58);border:1px dashed rgba(234,208,138,.42);
  font-size:13px;color:var(--gold-2);
}
#postWinAuto[hidden]{display:none!important}
#postWinAuto::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 8px rgba(234,208,138,.7);
}
#postWinAuto [data-act="toggle-postwin-auto"]{
  min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(234,208,138,.5);background:rgba(10,26,22,.85);
  color:var(--txt);font-weight:700;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#postWinAuto [data-act="toggle-postwin-auto"]:hover{border-color:var(--gold-2)}
#postWinAuto [data-act="toggle-postwin-auto"]:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Desktop: own named row between actions and coach, right-aligned under the
   legal buttons so it never shares their flex row. */
@media (min-width:1001px){
  .me{grid-template-areas:"river river" "head actions" "auto auto" "coach coach" "hand hand"}
  #postWinAuto{grid-area:auto;justify-self:end}
}
/* Mobile / narrow: simple full-width row in the controls column */
@media (max-width:1000px){
  #postWinAuto{justify-content:space-between;border-radius:12px;width:100%}
}

/* ---------- 2. Light per-胡 toast ---------- */
.toast.hu{
  background:linear-gradient(180deg,#2c2416,#1b160e);
  border:1px solid var(--gold);color:var(--gold-2);
  font-weight:700;font-size:15px;padding:10px 18px 10px 22px;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(201,162,74,.25);
}
.toast.hu::before{
  content:"";position:absolute;left:9px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--ver);
}

/* ---------- 3. Dialog scroll hardening (all sizes) ---------- */
.dlg{overflow:hidden}
.dlg-head,.dlg-foot{flex:none}
.dlg-body{flex:1 1 auto;min-height:0;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.x{min-width:44px;min-height:44px}
.dlg-foot .btn{min-height:44px}
@media (min-width:1001px){#reviewDlg{width:min(840px,92vw)}}

/* ---------- 4. Settlement hero ---------- */
.rs{margin:10px 0 18px;min-width:0;line-height:1.5}
.rs *{min-width:0}
.rs-hero{
  position:relative;padding:18px 22px 16px;border-radius:14px;text-align:center;color:var(--txt);
  background:radial-gradient(ellipse 90% 120% at 50% 0%,#237a62 0%,#165a48 50%,#0b3a2f 100%);
  border:1px solid #0e4333;box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
.rs-kicker{margin:0;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.dlg-body .rs-title{
  margin:4px 0 2px;padding:0;border:none;
  font:700 30px/1.2 var(--serif);letter-spacing:.08em;color:var(--ivory);
}
.rs-sub{margin:0 0 12px;font-size:14px;color:var(--ivory-2);overflow-wrap:anywhere}
.rs-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px}
.rs-stat{display:flex;flex-direction:column;align-items:center}
.rs-stat span{font-size:12px;color:var(--muted)}
.rs-stat b{font:700 22px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ivory)}
.rs-stat.rs-net b{font-size:34px}
.rs-hero .pos{color:#9be6b4}.rs-hero .neg{color:#ffb4a3}
.rs-tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:12px}
.rs-tile{--w:30px}

/* earned first / tied first only */
.rs[data-outcome="win"] .rs-hero,.rs[data-outcome="tie"] .rs-hero{
  border-color:var(--gold);
  box-shadow:inset 0 0 40px rgba(0,0,0,.3),0 0 0 1px var(--gold),0 0 26px rgba(201,162,74,.45);
}
.rs[data-outcome="win"] .rs-title,.rs[data-outcome="tie"] .rs-title{
  color:var(--gold-2);text-shadow:0 0 18px rgba(234,208,138,.45);
}
.rs[data-outcome="win"] .rs-hero{animation:rs-rise .5s ease-out both,rs-glow 2.4s ease-in-out .5s 2}
.rs[data-outcome="tie"] .rs-hero{animation:rs-rise .5s ease-out both}
@keyframes rs-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rs-glow{50%{box-shadow:inset 0 0 40px rgba(0,0,0,.3),0 0 0 1px var(--gold-2),0 0 40px rgba(234,208,138,.6)}}
@media (prefers-reduced-motion:reduce){.rs-hero{animation:none!important}}

/* detail cards */
.rs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:12px}
.rs-card{padding:10px 14px;border-radius:12px;background:#fffaf0;border:1px solid #e2d5b6}
.rs-card h4{margin:0 0 6px;font:700 14px var(--serif);color:#7a2a1c}
.rs-note{margin:0 0 6px;font-size:12px;color:#7d8a83}
.rs-inc{list-style:none;margin:0;padding:0}
.rs-inc li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed #e6dabf}
.rs-inc li:last-child{border-bottom:none}
.rs-inc b,.rs-ledger-n{font-variant-numeric:tabular-nums;color:#1d7a4f}
.rs-ledger{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 8px;margin:0 -8px;
  border-radius:8px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;
}
.rs-ledger:hover{background:#f3e9d3}
.rs-ledger:focus-visible{outline:3px solid #1f5fa8;outline-offset:1px}
.rs-ledger-n{font:700 22px var(--sans)}
.rs-ledger small{display:block;color:#7d8a83;font-size:12px}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px}
.rs-chip{font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:#efe4cc;color:var(--ink)}
.rs-chip.warn{background:#6b2a1f;color:#ffd2c7}
.rs-chip.ok{background:#d9eee2;color:#145442}

/* compact standings row */
.rs-rank{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rs-rank li{
  display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:10px;
  background:#f3e9d3;font-size:13px;text-align:center;overflow-wrap:anywhere;
}
.rs-rank li.me{background:#fff;box-shadow:0 0 0 2px var(--gold)}
.rs-rank .r{font-size:11px;color:#7d8a83}
.rs-rank .s{font:700 16px var(--sans);font-variant-numeric:tabular-nums}
.rs-rank .s.pos{color:#1d7a4f}.rs-rank .s.neg{color:#b3261e}

@media (max-width:640px){
  .rs-hero{padding:14px 12px 12px}
  .dlg-body .rs-title{font-size:24px}
  .rs-stat.rs-net b{font-size:28px}
  .rs-stats{gap:6px 18px}
  .rs-tile{--w:24px}
  .rs-rank{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:500px){
  .rs-hero{padding:10px 14px}
  .dlg-body .rs-title{font-size:22px}
  .rs-sub{margin-bottom:6px}
}

/* ==========================================================================
   BLOODFLOW dingque layer: append after gui-feedback.css.
   Styles only: suit-choice buttons in #actions, missing-suit badges,
   ruleset/legacy labels. No text is injected; all labels come from app.
   Suit IDs: 0 万 (vermilion), 1 条 (green), 2 筒 (blue), matching tile underlines.
   ========================================================================== */

/* ---------- 1. Choice row inside the existing action region ---------- */
#actions:has([data-act="dingque"]){
  padding:8px 10px;border-radius:14px;
  background:rgba(6,20,16,.5);border:1px solid rgba(234,208,138,.28);
}
#actions:has([data-act="dingque"]) .prompt b{color:var(--gold-2)}
#actions .btns:has([data-act="dingque"]){
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}

.btn[data-act="dingque"]{
  --suit:var(--gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;min-width:0;padding:6px 14px 6px 10px;
  border-radius:12px;border:1px solid rgba(234,208,138,.42);
  background:linear-gradient(180deg,rgba(22,40,34,.95),rgba(10,24,20,.95));
  color:var(--txt);font-size:15px;line-height:1.25;text-align:left;
  white-space:normal;overflow-wrap:anywhere;
  box-shadow:inset 0 -3px 0 var(--suit),0 3px 8px rgba(0,0,0,.35);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,border-color .12s,box-shadow .12s;
}
.btn[data-act="dingque"][data-suit="0"]{--suit:var(--ver)}
.btn[data-act="dingque"][data-suit="1"]{--suit:#1d7a4f}
.btn[data-act="dingque"][data-suit="2"]{--suit:#1f5fa8}

/* miniature ivory tile motif */
.btn[data-act="dingque"]::before{
  content:"";flex:none;width:24px;height:32px;border-radius:4px;
  border:1px solid var(--edge);
  background-color:var(--ivory);
  box-shadow:0 2px 0 #cdbb92,0 4px 0 var(--jade),0 5px 5px rgba(0,0,0,.4);
  display:grid;place-items:center;
  font:700 16px/1 var(--serif);color:var(--suit);
}
.btn[data-act="dingque"][data-suit="0"]::before{content:"万"}
.btn[data-act="dingque"][data-suit="1"]::before{
  background-image:
    linear-gradient(var(--suit),var(--suit)),
    linear-gradient(var(--suit),var(--suit));
  background-size:4px 20px,4px 20px;
  background-position:7px 5px,13px 5px;
  background-repeat:no-repeat;
}
.btn[data-act="dingque"][data-suit="2"]::before{
  background-image:radial-gradient(circle,var(--ivory) 0 3px,var(--suit) 3.5px 7px,transparent 7.5px);
}

.btn[data-act="dingque"]:hover:not(:disabled):not([aria-disabled="true"]){
  border-color:var(--gold-2);transform:translateY(-2px);
  box-shadow:inset 0 -3px 0 var(--suit),0 0 0 1px var(--gold),0 6px 14px rgba(0,0,0,.4);
}
.btn[data-act="dingque"]:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px)}
.btn[data-act="dingque"]:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn[data-act="dingque"][aria-pressed="true"]{
  border-color:var(--gold);
  box-shadow:inset 0 -3px 0 var(--suit),0 0 0 2px var(--gold-2);
}
.btn[data-act="dingque"]:disabled,
.btn[data-act="dingque"][aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.4);
}

/* desktop: wider options under the prompt, right-anchored near the hand */
@media (min-width:1001px){
  #actions:has([data-act="dingque"]){justify-content:flex-end}
  #actions .btns:has([data-act="dingque"]){grid-template-columns:repeat(3,minmax(132px,1fr))}
}

/* phones and short landscape: full-width three-up row, compact */
@media (max-width:1000px),(orientation:landscape) and (max-height:500px){
  #actions:has([data-act="dingque"]){padding:6px}
  #actions .btns:has([data-act="dingque"]){width:100%;gap:6px}
  .btn[data-act="dingque"]{min-height:52px;padding:4px 8px 4px 6px;gap:6px;font-size:13px}
  .btn[data-act="dingque"]::before{width:20px;height:27px;font-size:14px}
  .btn[data-act="dingque"][data-suit="1"]::before{background-size:3px 17px,3px 17px;background-position:6px 4px,11px 4px}
  .btn[data-act="dingque"][data-suit="2"]::before{background-image:radial-gradient(circle,var(--ivory) 0 2.5px,var(--suit) 3px 6px,transparent 6.5px)}
}
@media (max-width:359px){
  .btn[data-act="dingque"]{flex-direction:column;gap:3px;text-align:center;font-size:12px;padding:4px}
  .btn[data-act="dingque"]::before{width:18px;height:24px;font-size:13px}
}

/* ---------- 2. Missing-suit badges in seat heads ---------- */
.missing-suit,.tag.missing,.missing-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;line-height:16px;padding:1px 7px;border-radius:6px;
  background:rgba(255,255,255,.1);color:var(--ivory-2);
  border:1px solid rgba(234,208,138,.3);white-space:nowrap;
}
/* revealed suit colors (only outside the dingque phase) */
.table:not([data-phase="dingque"]) :is(.missing-suit,.tag.missing,.missing-badge)[data-suit="0"]{background:var(--ver);border-color:#e47a64;color:#fff}
.table:not([data-phase="dingque"]) :is(.missing-suit,.tag.missing,.missing-badge)[data-suit="1"]{background:#1d7a4f;border-color:#4fb184;color:#fff}
.table:not([data-phase="dingque"]) :is(.missing-suit,.tag.missing,.missing-badge)[data-suit="2"]{background:#1f5fa8;border-color:#5d93d3;color:#fff}

/* during dingque: always neutral, never suit-colored, whatever attributes exist */
.table[data-phase="dingque"] :is(.missing-suit,.tag.missing,.missing-badge){
  background:rgba(255,255,255,.08)!important;border-color:rgba(234,208,138,.3)!important;color:var(--muted)!important;
}
.table[data-phase="dingque"] :is(.missing-suit,.tag.missing,.missing-badge):is(.chosen,[data-chosen="true"],[data-state="chosen"]){
  color:var(--gold-2)!important;border-color:rgba(234,208,138,.6)!important;
}
.table[data-phase="dingque"] :is(.missing-suit,.tag.missing,.missing-badge):is(.chosen,[data-chosen="true"],[data-state="chosen"])::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-2);
}
.dlg :is(.missing-suit,.tag.missing,.missing-badge){border-color:#cdbb92}

/* ---------- 3. Ruleset / legacy labels (style only, no injected text) ---------- */
.ruleset-badge,.legacy-round{
  display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.ruleset-badge{background:rgba(201,162,74,.16);color:var(--gold-2);border:1px solid rgba(201,162,74,.45)}
.legacy-round{background:rgba(255,255,255,.06);color:var(--muted);border:1px dashed rgba(163,187,176,.55)}
.dlg .ruleset-badge{background:#f3e9d3;color:#7a2a1c;border-color:#cdbb92}
.dlg .legacy-round{background:#efe4cc;color:#5c6a63;border-color:#b9ab89}

/* ---------- 4. Phase focus ---------- */
.table[data-phase="dingque"] .center .phase{color:var(--gold-2)}
@media (prefers-reduced-motion:reduce){
  .btn[data-act="dingque"]{transition:none}
  .btn[data-act="dingque"]:hover{transform:none}
}

/* ==========================================================================
   BLOODFLOW public counts layer: append after gui-dingque.css.
   Selectors limited to #tileKnowledge, #publicCounts and .pc-*.
   Both elements are siblings of #hand inside .hand-row, so no .me grid
   change is needed: they wrap onto their own line below the hand.
   ========================================================================== */

/* ---------- own selection knowledge line (owner text unchanged) ---------- */
#tileKnowledge{
  min-width:0;min-height:20px;margin:0;
  font-size:12px;line-height:1.4;color:var(--muted);
  overflow-wrap:anywhere;text-align:center;
}

/* ---------- folded counter ---------- */
#publicCounts{
  min-width:0;max-width:100%;border-radius:12px;color:var(--txt);
  background:rgba(6,20,16,.55);border:1px solid rgba(234,208,138,.24);
}
#publicCounts[open]{border-color:rgba(234,208,138,.42)}
.pc-sum{
  list-style:none;display:flex;align-items:center;gap:8px;
  min-height:44px;padding:0 14px;border-radius:12px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
.pc-sum::-webkit-details-marker{display:none}
.pc-sum::after{
  content:"";flex:none;width:7px;height:7px;margin-left:auto;
  border-right:2px solid var(--gold-2);border-bottom:2px solid var(--gold-2);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;
}
#publicCounts[open]>.pc-sum::after{transform:translateY(2px) rotate(-135deg)}
.pc-sum:hover{background:rgba(255,255,255,.04)}
.pc-sum:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pc-sum-t{font-weight:700;font-size:13px;color:var(--gold-2);white-space:nowrap}
.pc-sum-h{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.pc-body{padding:0 12px 10px;min-width:0}
.pc-note{margin:0 0 8px;font-size:12px;line-height:1.45;color:var(--ivory-2)}
.pc-rows{display:flex;flex-direction:column;gap:6px}
.pc-list{
  list-style:none;margin:0;padding:0;min-width:0;
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;
}
.pc-cell{
  min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 0 2px;border-radius:6px;background:rgba(247,240,225,.05);
}
.pc-tile{--w:28px}
.pc-n{
  font:600 11px/1.2 var(--sans);font-variant-numeric:tabular-nums;
  color:var(--ivory-2);white-space:nowrap;letter-spacing:-.02em;
}
/* zero unseen: subdued; 3-4 unseen: emphasized */
.pc-cell[data-unseen="0"]{background:transparent}
.pc-cell[data-unseen="0"] .pc-tile{opacity:.35;filter:grayscale(.8)}
.pc-cell[data-unseen="0"] .pc-n{color:var(--muted);opacity:.75;font-weight:400}
.pc-cell[data-unseen="3"] .pc-n,.pc-cell[data-unseen="4"] .pc-n{color:var(--gold-2);font-weight:700}
.pc-cell[data-unseen="4"]{background:rgba(201,162,74,.1)}

/* ---------- desktop: knowledge line + folded summary share one row ---------- */
@media (min-width:1001px){
  #tileKnowledge{flex:1 1 calc(100% - 260px);align-self:center;font-size:13px}
  #publicCounts{flex:0 1 auto;align-self:center}
  #publicCounts[open]{flex:1 1 100%;width:100%;max-width:820px;margin-inline:auto}
}
@media (min-width:1001px) and (max-height:860px){
  .pc-tile{--w:24px}
  .pc-rows{gap:4px}
}

/* ---------- phones and short landscape: simple full-width flow ---------- */
@media (max-width:1000px),(orientation:landscape) and (max-height:500px){
  #tileKnowledge,#publicCounts{flex:0 0 auto;width:100%;max-width:100%;align-self:stretch}
  #publicCounts[open]{margin-inline:0}
  .pc-body{padding:0 8px 8px}
  .pc-tile{--w:24px}
}
@media (max-width:480px){
  .pc-list{gap:2px}
  .pc-tile{--w:22px}
  .pc-n{font-size:9.5px}
}
@media (max-width:359px){
  .pc-sum{padding:0 10px}
  .pc-tile{--w:20px}
  .pc-n{font-size:9px}
}
@media (orientation:landscape) and (max-height:500px){
  .pc-body{max-height:60dvh;overflow-y:auto;overscroll-behavior:contain}
  .pc-tile{--w:22px}
}

@media (prefers-reduced-motion:reduce){
  .pc-sum::after{transition:none}
}

/* Functional integration: quiet music controls use the existing Opus toolbar. */
.bgm-volume{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);min-width:0}
#bgmVolume{width:72px;max-width:100%;height:44px;margin:0;accent-color:var(--gold);touch-action:pan-x}
#bgmToggle{min-height:44px;min-width:44px}
#bgmToggle::before{content:"♪";margin-right:5px}
#bgmToggle[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2)}
@media (max-width:1000px){.tools{max-width:100%;flex-wrap:wrap}.bgm-volume{font-size:0}#bgmVolume{width:70px}}
/* Avoid the table's .me grid-area applying to the settlement standings. */
.rs-rank li.rs-me{background:#fff;box-shadow:0 0 0 2px var(--gold)}
/* A zero-net tied round has no earned first-place celebration. */
.rs[data-outcome="tie"] .rs-hero{border-color:#0e4333;box-shadow:inset 0 0 40px rgba(0,0,0,.35);animation:none}
.rs[data-outcome="tie"] .rs-title{color:var(--ivory);text-shadow:none}

/* Integration: respect semantic visibility for optional controls. */
[hidden]{display:none!important}

/* Action sound controls share the existing compact music control layout. */
#sfxVolume{width:72px;max-width:100%;height:44px;margin:0;accent-color:var(--gold);touch-action:pan-x}
#sfxToggle{min-height:44px;min-width:44px}
#sfxToggle[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2)}
/* ==========================================================================
   BLOODFLOW beans + counts panel layer: append after gui-counts.css.
   Selectors: .bui-*, .pui-*, body.pui-docked, #publicCounts (hidden).
   ========================================================================== */

/* old folded counter replaced by the panel */
#publicCounts{display:none!important}

/* ---------- toolbar buttons (inherit .tbtn sizes, 44px on phones) ---------- */
.bui-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bui-coin{flex:none;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f4dc95,#b48934 70%);box-shadow:inset 0 0 0 1px #7a5a1c}
.bui-btn-n{font-weight:700;color:var(--gold-2)}
.pui-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-2);background:rgba(201,162,74,.14)}
@media (max-width:480px){.bui-btn-t{display:none}}

/* ---------- chooser dialog ---------- */
.bui-dlg{width:min(660px,94vw)}
.bui-body{display:flex;flex-direction:column;gap:12px;padding-top:12px;line-height:1.55}
.bui-body:focus{outline:none}
.bui-wallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
  padding:12px 16px;border-radius:12px;color:var(--txt);
  background:radial-gradient(ellipse 90% 140% at 50% 0%,#237a62,#165a48 55%,#0b3a2f)}
.bui-wallet.bui-off{background:#efe4cc;color:var(--ink)}
.bui-wallet p{margin:0}
.bui-bal{display:flex;align-items:baseline;gap:6px}
.bui-bal small{color:var(--muted);font-size:12px}
.bui-bal b{font:700 30px/1.1 var(--sans);color:var(--gold-2);font-variant-numeric:tabular-nums}
.bui-stats{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--ivory-2)}
.bui-stats b{font-variant-numeric:tabular-nums}
.bui-wallet .pos{color:#9be6b4}.bui-wallet .neg{color:#ffb4a3}
.bui-err{margin:0;padding:8px 12px;border-radius:10px;background:#fbe3dc;color:#8a2416;border:1px solid #e9a493;overflow-wrap:anywhere}
.bui-busy{margin:0;font-size:13px;color:#5c6a63}

.bui-round{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--gold);
  box-shadow:0 0 0 1px rgba(201,162,74,.35)}
.bui-round-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bui-round-h b{font:700 15px var(--serif);color:#7a2a1c;overflow-wrap:anywhere}
.bui-pill{font-size:12px;padding:1px 9px;border-radius:999px;background:#efe4cc;color:var(--ink)}
.bui-note,.bui-foot{margin:4px 0 0;font-size:12px;color:#5c6a63}
.bui-foot{margin:0;color:#7d8a83}
.bui-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dlg .btn.bui-warn{border-color:#c2412d;color:#a52d1c}
.dlg .btn.bui-danger{background:linear-gradient(#cf4a33,#a52d1c);color:#fff7e8;border-color:#8a2416}
.bui-confirm{margin-top:8px;padding:8px 12px;border-radius:10px;background:#fbe3dc;border:1px solid #e9a493}
.bui-confirm p{margin:0;font-weight:700;color:#8a2416}

.bui-tables{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bui-table{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;
  padding:10px 12px;border-radius:12px;background:#fffaf0;border:1px solid #e2d5b6}
.bui-table[data-off]{background:#f3ecdc}
.bui-table[data-off] .bui-tname{color:#7d8a83}
.bui-tinfo{min-width:0}
.bui-tname{font:700 15px var(--serif);color:#7a2a1c;overflow-wrap:anywhere}
.bui-terms{margin:2px 0 0;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.bui-strat{margin:4px 0 0;font-size:12px;color:#5c6a63;overflow-wrap:anywhere}
.bui-strat span{display:inline-block;margin-right:6px;padding:0 7px;border-radius:5px;background:#d9eee2;color:#145442;font-weight:700}
.bui-why{margin:4px 0 0;font-size:12px;color:#8a2416}
.bui-supply{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:12px;
  background:#f3e9d3;border:1px dashed #cdbb92}
.bui-supply p{flex:1 1 220px;margin:0;font-size:13px}
.dlg .btn.gold{border-color:var(--gold);color:#7a5a1c}
.bui-dlg .btn:disabled{opacity:.5}

@media (max-width:480px){
  .bui-table{grid-template-columns:minmax(0,1fr)}
  .bui-table .btn{width:100%}
  .bui-bal b{font-size:26px}
}

/* ---------- settlement strip in #reviewBody, below .rs ---------- */
.bui-settle{margin:-6px 0 18px;padding:10px 14px;border-radius:12px;background:#fffaf0;border:1px solid #e2d5b6;min-width:0}
.bui-settle[data-type="abandoned"]{border-color:#e9a493;background:#fdf1ec}
.bui-settle[data-type="cancelled"]{background:#f3ecdc}
.bui-s-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.bui-s-h b{font:700 15px var(--serif);color:#7a2a1c}
.bui-s-h span{font-size:12px;color:#7d8a83;overflow-wrap:anywhere}
.bui-s-flow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px}
.bui-s-flow span{display:flex;flex-direction:column}
.bui-s-flow small{font-size:11px;color:#7d8a83}
.bui-s-flow b{font:700 18px/1.25 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.bui-s-flow b.pos{color:#1d7a4f}.bui-s-flow b.neg{color:#b3261e}
.bui-s-flow i{font-style:normal;font-weight:700;color:#7d8a83;padding-bottom:2px}
.bui-s-note{margin:6px 0 0;font-size:12px;color:#5c6a63}
.bui-s-cap{color:#8a2416}

/* ---------- counts panel: floating card (default) ---------- */
.pui-panel{position:fixed;z-index:16;top:72px;
  right:max(8px,env(safe-area-inset-right));
  width:min(300px,calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(100dvh - 96px);
  display:flex;flex-direction:column;overflow:hidden;color:var(--txt);
  background:linear-gradient(180deg,#183a31,#0f2622);border:1px solid rgba(234,208,138,.42);
  border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.pui-panel[hidden]{display:none!important}
.pui-probe{position:absolute;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.pui-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 4px 0 14px;border-bottom:1px solid var(--line)}
.pui-title{margin:0;font:700 15px var(--serif);color:var(--gold-2)}
.pui-title small{margin-left:8px;font:400 11px var(--sans);color:var(--muted)}
.pui-x{width:44px;height:44px;border:none;border-radius:10px;background:transparent;color:var(--ivory-2);
  font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pui-x:hover{background:rgba(255,255,255,.06)}
.pui-x:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.pui-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:8px 10px 10px}
.pui-note{margin:0 0 8px;font-size:12px;line-height:1.45;color:var(--ivory-2)}
.pui-empty{margin:8px 0;font-size:13px;color:var(--muted)}

.pui-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto repeat(9,auto);grid-auto-flow:column;gap:3px 6px}
.pui-suit{--s:var(--gold);text-align:center;font:700 13px/1.6 var(--serif);color:var(--ivory-2);
  border-bottom:2px solid var(--s);margin-bottom:2px}
.pui-suit[data-suit="0"]{--s:var(--ver)}
.pui-suit[data-suit="1"]{--s:#1d7a4f}
.pui-suit[data-suit="2"]{--s:#1f5fa8}
.pui-cell{min-width:0;display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:6px;background:rgba(247,240,225,.05)}
.pui-tile{--w:22px}
.pui-n{font:600 12px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ivory-2);white-space:nowrap}
.pui-cell[data-unseen="0"]{background:transparent}
.pui-cell[data-unseen="0"] .pui-tile{opacity:.35;filter:grayscale(.8)}
.pui-cell[data-unseen="0"] .pui-n{color:var(--muted);font-weight:400;opacity:.8}
.pui-cell[data-unseen="3"] .pui-n,.pui-cell[data-unseen="4"] .pui-n{color:var(--gold-2);font-weight:700}
.pui-cell[data-unseen="4"]{background:rgba(201,162,74,.12)}

@media (max-width:359px){
  .pui-cell{gap:4px;padding:2px}
  .pui-tile{--w:18px}
  .pui-n{font-size:11px}
}

/* ---------- wide desktop: docked sidebar, table narrowed only while open ---------- */
@media (min-width:1500px){
  body.pui-docked{padding-right:296px;--tw:min(60px,calc((100vw - 536px)/15.2))}
  body.pui-docked .pui-panel{top:0;bottom:0;right:0;width:296px;max-height:none;
    border-radius:0;border-width:0 0 0 1px;box-shadow:-10px 0 30px rgba(0,0,0,.4);
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  body.pui-docked .pui-tile{--w:24px}
}
@media (min-width:1500px) and (max-height:860px){
  body.pui-docked{--tw:min(54px,calc((100vw - 536px)/15.2))}
}

/* Finite-pool amendment: append after bean-ui.css. */

/* new toolbar controls: 44px everywhere; header wraps instead of overflowing */
.bui-btn,.pui-btn{min-height:44px;min-width:44px}
.bar .tools{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;min-width:0;max-width:100%}

/* table terms as compact key/value chips */
.bui-kv{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0}
.bui-kv div{display:flex;align-items:baseline;gap:4px}
.bui-kv dt{font-size:12px;color:#5c6a63}
.bui-kv dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.bui-kv dd small{margin-left:4px;font-weight:400;font-size:11px;color:#7d8a83}
.bui-guard{margin:0;padding:6px 10px;border-radius:8px;background:#f3e9d3;color:#5c6a63}
.bui-round .bui-guard{margin-top:6px}

/* settlement: theoretical vs actual */
.bui-s-flow .bui-s-raw{color:#7d8a83;text-decoration:line-through;text-decoration-thickness:1px}
.bui-pool{margin-top:8px}
.bui-pool summary{display:flex;align-items:center;min-height:44px;margin:0;cursor:pointer;
  font-weight:700;color:#7a2a1c;touch-action:manipulation}
.bui-pool summary:focus-visible{outline:3px solid #1f5fa8;outline-offset:2px;border-radius:6px}
.bui-pool-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bui-pool-t{width:100%;min-width:440px;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.bui-pool-t th,.bui-pool-t td{padding:5px 6px;border-bottom:1px solid #e6dabf;text-align:right;white-space:nowrap}
.bui-pool-t th:first-child,.bui-pool-t td:last-child{text-align:left}
.bui-pool-t thead th{font-weight:600;color:#7d8a83}
.bui-pool-t .pos{color:#1d7a4f}.bui-pool-t .neg{color:#b3261e}
.bui-pool-self{background:#fff}
.bui-flag{display:inline-block;margin-right:4px;padding:0 6px;border-radius:5px;background:#fbe3dc;color:#8a2416;font-size:11px}

/* ==========================================================================
   BLOODFLOW desktop viewport layer: append after current style.css.
   Desktop only (>=1001px). Consumes --bf-bar-h / --bf-foot-h measured by
   public-counts-ui.js (presentation only). No overflow:hidden on body,
   no global transform.
   ========================================================================== */
@media (min-width:1001px){
  :root{
    --bf-bar-h:60px;--bf-foot-h:30px;
    --bf-avail:calc(100vh - var(--bf-bar-h) - var(--bf-foot-h) - 14px);
    --bf-table-max:1440px;
    --bf-pc-w:300px;
  }
  @supports (height:100dvh){
    :root{--bf-avail:calc(100dvh - var(--bf-bar-h) - var(--bf-foot-h) - 14px)}
  }

  /* header: compact controls so it wraps less on resized windows */
  .bar{padding-left:max(16px,calc((100% - var(--bf-table-max))/2 + 16px));
       padding-right:max(16px,calc((100% - var(--bf-table-max))/2 + 16px))}
  .bar .tools{gap:6px}

  /* table: bounded, centered in usable area, never stretched to full height */
  .table{
    flex:0 0 auto;
    width:min(var(--bf-table-max),calc(100% - 32px));
    height:max(540px,min(950px,var(--bf-avail)));
    margin:auto auto;
    padding:12px 20px 0;
    grid-template-columns:minmax(150px,1fr) minmax(0,1.7fr) minmax(150px,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    container-type:inline-size;
    container-name:bftable;
  }
  .foot{margin:6px 0 8px}

  /* scrollable public zones instead of clipping */
  .seat-top{min-height:0}
  .seat-left,.seat-right{
    align-self:stretch;align-content:center;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  }
  .seat-left>.river,.seat-right>.river,.seat-top .river,#meRiver{min-height:0;scrollbar-width:thin}
  .center{min-width:0;min-height:0;overflow:auto;flex-wrap:wrap;align-content:center}
  .cinfo{min-width:min(160px,100%);flex:1 1 160px}
  .seat-head{min-width:0;max-width:100%}

  /* own hand: size from table width and available height, 40..60px */
  .me{min-width:0}
  .me .hand{
    --tw:clamp(40px,min(calc((100cqi - 72px)/15.8),calc(var(--bf-avail)*.068)),60px);
  }
  .me .melds{max-height:calc(30px*1.46*2 + 30px)}
  .me .melds .tile{--w:min(34px,calc(var(--bf-avail)*.036))}
  .hand-row{gap:8px 20px;padding-bottom:10px}
  .btn{min-height:44px}
}

/* medium-wide: shrink side columns before own hand */
@media (min-width:1001px) and (max-width:1399px){
  :root{--rw:23px;--mw:22px}
  .table{gap:8px 12px;padding:10px 14px 0}
  .seat-left .opp-hand .tile.back,.seat-right .opp-hand .tile.back{width:24px}
  .compass{width:110px;height:110px}
  .wall b{font-size:28px}
  .phase{font-size:19px}
  .bgm-volume{font-size:0;gap:0}
  #bgmVolume,#sfxVolume{width:60px}
  .brand h1 span{display:none}
}

/* short desktop windows (1720x720, 1536x700, 1366x768, 1200x675, 1024x640) */
@media (min-width:1001px) and (max-height:800px){
  :root{--rw:21px;--mw:20px}
  .bar{padding-top:4px;padding-bottom:2px}
  .tbtn{min-height:34px}
  .bui-btn,.pui-btn,#bgmToggle,#sfxToggle{min-height:36px}
  #bgmVolume,#sfxVolume{height:34px}
  .table{padding-top:8px;gap:4px 12px;border-width:10px;border-radius:24px}
  .seat-top{gap:4px}
  .seat-top .opp-hand .tile.back{--w:18px}
  .seat-top .river,#meRiver{max-height:calc((var(--rw)*1.46 + 2px)*2 + 8px)}
  .seat-left>.river,.seat-right>.river{max-height:calc((var(--rw)*1.46 + 2px)*3 + 8px)}
  .seat-left .opp-hand .tile.back,.seat-right .opp-hand .tile.back{height:9px}
  .seat-head{min-height:26px;padding:1px 10px}
  .compass{width:92px;height:92px}
  .wall b{font-size:24px}
  .cm{width:24px;height:24px;font-size:11px}
  .cm.s2{top:-6px;left:calc(50% - 12px)}.cm.s0{bottom:-6px;left:calc(50% - 12px)}
  .cm.s3{left:-6px;top:calc(50% - 12px)}.cm.s1{right:-6px;top:calc(50% - 12px)}
  .phase{font-size:17px}
  .reason{font-size:12px}
  .me{gap:4px 12px}
  #coach{padding:2px 8px;font-size:12px}
  .hand-row{padding:2px 22px 6px;gap:4px 16px}
  .me .melds{max-height:calc(26px*1.46 + 22px)}
  .foot{margin:2px 0 4px}
}
@media (min-width:1001px) and (max-height:680px){
  #meRiver{max-height:calc(var(--rw)*1.46 + 10px)}
  .seat-top .river{max-height:calc(var(--rw)*1.46 + 10px)}
  #tileKnowledge{min-height:0;font-size:12px}
}

/* counts sidebar: adjacent dock or reserved column (positioned by JS) */
@media (min-width:1001px){
  body.pui-docked{padding-right:0;--tw:initial}
  body.pui-reserve{padding-right:calc(var(--bf-pc-w) + 16px)}
  body.pui-reserve .bar{padding-right:16px}
  .pui-panel.pui-side{
    width:var(--bf-pc-w);right:auto;bottom:auto;
    border-radius:14px;border-width:1px;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
  }
  .pui-panel.pui-side .pui-tile{--w:24px}
}

/* Measured desktop integration: match the narrower tabletop inset. */
@media (min-width:1001px) and (max-width:1399px){
  .hand-row{margin-inline:-14px;padding-inline:14px}
}