/* Mahjong Garden player: the pavilion floor, tiles, toolbar and the finish sheet. */
.player{padding:6px 0 24px}
.pl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:10px}
.pl-head h1{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0 0 .15em}
.pl-head p{margin:0;color:var(--ink-soft);font-size:.96rem}
.pick{display:flex;gap:8px;align-items:center}
.pick .tab{position:relative;display:block;padding:8px 14px;border-radius:16px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);min-width:128px}
.pick .tab b{display:block;font-size:.98rem}
.pick .tab small{color:var(--ink-soft);font-size:.82rem}
.pick .tab.on{box-shadow:inset 0 0 0 2px var(--pond)}
.pick .tab .done{position:absolute;top:6px;right:10px;color:var(--fern-ink);font-weight:800}
.pick .step{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pick .step svg{width:20px;height:20px}
.dealsel select{font:600 1rem var(--font);color:var(--ink);background:var(--paper);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;min-height:44px;padding:0 14px}
.pl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.pl-bar[hidden]{display:none}
.pl-stats{display:flex;gap:16px;margin:0;padding:0;list-style:none;color:var(--ink-soft);font-size:.92rem}
.pl-stats b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pl-tools{display:flex;gap:6px}
.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:0;background:var(--paper);color:var(--ink);font:600 .95rem var(--font);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;touch-action:manipulation}
.tool:hover{background:var(--stone-2)}
.tool:disabled{opacity:.45;cursor:default}
.tool svg{width:19px;height:19px;flex:none}
.tool[aria-pressed="true"]{background:var(--pond-lt);box-shadow:inset 0 0 0 1.5px var(--pond)}
/* the pavilion floor: a quiet lattice under the tiles */
.stage{position:relative;border-radius:26px;padding:14px;min-height:260px;background:var(--floor);
  background-image:repeating-linear-gradient(45deg,var(--floor-line) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,var(--floor-line) 0 1px,transparent 1px 22px);outline:none}
.stage:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.pl-status{min-height:1.6em;margin:10px 4px 0;font-size:.98rem}
.pl-status[data-kind="hint"]{color:var(--pond-ink);font-weight:600}
.pl-note{color:var(--ink-soft);font-size:.9rem;margin:6px 4px 0}
.pl-msg{display:grid;place-items:center;text-align:center;min-height:240px;padding:20px}
.pl-loading{text-align:center;color:var(--ink-soft);padding:80px 0}
.pl-again{display:flex;justify-content:center;padding:12px 0 4px}
.player.is-empty .stage{background:var(--paper)}
@media (max-width:640px){
  .player{padding-top:0}
  .pl-head{gap:8px}
  .pl-head p{font-size:.88rem}
  .pick{width:100%}
  .pick .tab{flex:1;min-width:0;padding:6px 10px}
  .pick .tab small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pl-tools{width:100%}
  .tool{flex:1;justify-content:center;padding:0 6px;font-size:.88rem;gap:4px}
  .tool span.long{display:none}
  .stage{padding:6px;border-radius:18px;margin:0 -8px}
}

/* ---------- shared board (MahjongBoard) themed for the garden ---------- */
.mj{display:flex;flex-direction:column;align-items:center;gap:8px;user-select:none;-webkit-user-select:none}
.mj-bar{display:flex;gap:8px;justify-content:center}
.mj-bar button{border:0;border-radius:999px;min-height:44px;padding:8px 16px;font:600 .95rem var(--font);background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;gap:7px;cursor:pointer;touch-action:manipulation}
.mj-bar button svg{width:19px;height:19px}
.mj-bar button[hidden]{display:none}
.mj-bar:not(:has(button:not([hidden]))){display:none}
.mj-bar button.go{background:var(--pond);color:#fff;box-shadow:none}
:root[data-theme="dark"] .mj-bar button.go{color:#0E1C20}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mj-bar button.go{color:#0E1C20}}
.mj-bar button[aria-pressed="true"]{background:var(--pond-lt);box-shadow:inset 0 0 0 1.5px var(--pond)}
.mj-scroll{width:100%;display:flex;justify-content:center;border-radius:18px}
.mj-scroll.zoom{overflow:auto;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);justify-content:flex-start;overscroll-behavior:contain}
.mj-svg{display:block;width:100%;height:auto;max-height:max(320px,calc(100vh - 290px));max-height:max(320px,calc(100dvh - 290px));touch-action:manipulation;font-family:var(--font);overflow:visible}
.mj-scroll.zoom .mj-svg{max-height:none;max-width:none;width:auto;flex:none;touch-action:pan-x pan-y}
.mj-t{cursor:pointer;transition:transform .14s ease-out}
.mj-t .sh{fill:rgba(16,32,30,.16)}
.mj-t .base{fill:var(--tile-base)}
.mj-t .side{fill:var(--tile-side)}
.mj-t .face{stroke:var(--tile-edge);stroke-width:1}
.mj-t .dim{fill:#1D2B2C;opacity:0;transition:opacity .15s}
.mj-t.blocked .dim{opacity:.16}
.mj-t.blocked{cursor:default}
.mj-t .ring{fill:none;stroke-width:4;opacity:0}
.mj-t.sel .ring{opacity:1;stroke:var(--sel)}
.mj-t.sel .face{fill:#FFF1CC}
.mj-t.hint .ring{opacity:1;stroke:var(--pond);stroke-dasharray:9 6;animation:mghint 1.2s linear infinite}
.mj-t.cur .ring{opacity:1;stroke:var(--focus);stroke-dasharray:none}
.mj-t.sel.cur .ring{stroke:var(--sel)}
.mj-t.lift{transform:translate(0,-4px)}
.mj-t.gone{opacity:0;transform:translate(0,-12px);transition:opacity .22s ease-in,transform .22s ease-in}
.mj-t.nope{animation:mgnope .3s ease-in-out}
@keyframes mghint{to{stroke-dashoffset:-30}}
@keyframes mgnope{25%{transform:translate(-3px,0)}75%{transform:translate(3px,0)}}
:root[data-motion="reduce"] .mj-t,:root[data-motion="reduce"] .mj-t .dim{transition:none}
:root[data-motion="reduce"] .mj-t.lift{transform:none}
:root[data-motion="reduce"] .mj-t.hint .ring{animation:none}

/* ---------- finish sheet ---------- */
.sheet-bg{position:fixed;inset:0;z-index:70;background:rgba(14,24,26,.45);display:grid;place-items:end center;padding:12px}
.sheet-bg[hidden]{display:none}
.sheet{width:min(460px,100%);max-height:calc(100vh - 24px);overflow:auto;background:var(--paper);border-radius:26px;padding:22px 20px 18px;box-shadow:var(--shadow)}
@media (min-width:641px){.sheet-bg{place-items:center}}
.sheet h2{font-size:1.7rem;margin:0}
.sheet-sub{color:var(--ink-soft);margin:.2em 0 12px}
.reveal{margin:0 0 12px;text-align:center}
.reveal .vig{width:100%;height:auto;border-radius:14px}
.reveal figcaption{margin-top:6px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.facts div{background:var(--stone);border-radius:14px;padding:8px 10px}
.facts dt{font-size:.82rem;color:var(--ink-soft)}
.facts dd{margin:0;font-weight:800;font-size:1.15rem}
.sheet-note{color:var(--ink-soft);font-size:.95rem}
.seal-line{display:flex;align-items:center;gap:10px;color:var(--pond-ink);font-weight:600}
.seal-line .seal{width:48px;height:48px;flex:none}
.sheet-acts{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Mahjong Connect board (src/connect-board.js) ---------- */
.cx-ring{fill:none;stroke:var(--tile-edge);stroke-width:2;stroke-dasharray:6 8;opacity:.7}
.cx-bed{fill:var(--paper);opacity:.55}
.cx-hole{fill:var(--tile-edge);opacity:.5}
.cx-t{cursor:pointer;transition:transform .14s ease-out}
.cx-t .base{fill:var(--tile-base)}
.cx-t .face{stroke:var(--tile-edge);stroke-width:1}
.cx-t .ring{fill:none;stroke-width:4;opacity:0}
.cx-t.sel .ring{opacity:1;stroke:var(--sel)}
.cx-t.sel .face{fill:#FFF1CC}
.cx-t.hint .ring{opacity:1;stroke:var(--pond);stroke-dasharray:9 6;animation:mghint 1.2s linear infinite}
.cx-t.cur .ring{opacity:1;stroke:var(--focus);stroke-dasharray:none}
.cx-t.sel.cur .ring{stroke:var(--sel)}
.cx-t.lift{transform:translate(0,-4px)}
.cx-t.gone{opacity:0;transform:scale(.9);transform-origin:center;transform-box:fill-box;transition:opacity .25s ease-in,transform .25s ease-in}
.cx-path{fill:none;stroke:var(--pond);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .45s ease-out}
.cx-path.on{opacity:.9;transition:none}
.cx-path.hint{stroke-dasharray:12 10;animation:mghint 1.2s linear infinite}
:root[data-motion="reduce"] .cx-t{transition:none}
:root[data-motion="reduce"] .cx-t.lift{transform:none}
:root[data-motion="reduce"] .cx-path{animation:none;transition:none}
@media (max-width:640px){.pick .tab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}