/* Base reset */
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: felt square with four discard ponds in the middle, opponents above it, your hand below; coach panel beside it on wide screens */
:root{
  --ink:#0d1613; --ink-2:#131f1b; --panel:#17241f; --panel-2:#1d2d27; --line:#2b3e36;
  --felt:#215443; --felt-deep:#163b2f; --felt-core:#0f2a22;
  --text:#e7eee9; --muted:#97aba1;
  --gold:#e3b54d; --gold-ink:#2a1d04;
  --ivory:#fcf8ee; --ivory-2:#eae1cb;
  --back:#d88a2c; --back-2:#b06614;
  --t-red:#c3302a; --t-blue:#22479a; --t-green:#16704a; --t-ink:#1c1c20;
  --warn:#e8735f; --ok:#73c69c;
  --f-tile:"Shippori Mincho B1","Noto Serif SC","Songti SC",serif;
  --f-head:"Noto Serif SC","Songti SC","STSong",serif;
  --f-ui:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{background:var(--ink);color:var(--text)}
/* Default tile width. Containers (hand, ponds, dora, melds) override --w and their tiles inherit it. */
:root{--w:30px}
body{font-family:var(--f-ui);font-size:14px;line-height:1.55;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Phone: one column in reading order (table, coach, log + settings, rules).
   Medium: table with coach, log and settings on the right; rules below.
   Wide: coach on the left, table in the middle, log and settings on the right; rules below. */
.app{--gut:16px;max-width:1480px;margin:0 auto;padding-block:14px 40px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "game" "coach" "side" "refs"}
.top{grid-area:top}.game{grid-area:game}.coachcol{grid-area:coach;min-width:0}.side{grid-area:side}.refs{grid-area:refs}
@media (min-width:900px) and (orientation:landscape){.stage{--pwh:calc((100svh - 390px)/18.8)}}
@media (min-width:900px){
  .app{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto 1fr auto;grid-template-areas:"top top" "game coach" "game side" "refs refs"}
  .side{align-self:start}
}
@media (min-width:1240px){
  .app{grid-template-columns:300px minmax(0,1fr) 290px;grid-template-rows:auto 1fr auto;grid-template-areas:"top top top" "coach game side" "refs refs refs";gap:16px 20px}
  .coachcol{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto;border-radius:14px}
  .log ol{max-height:260px}
}

/* header */
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.seal{width:40px;height:40px;border-radius:8px;background:var(--t-red);color:#fff3e6;font:900 24px/40px var(--f-head);text-align:center;flex:none}
.brand h1{margin:0;font:900 22px/1.2 var(--f-head);letter-spacing:.04em;text-wrap:balance}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.status{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-variant-numeric:tabular-nums}
.stat{display:flex;flex-direction:column;gap:2px}
.stat small{color:var(--muted);font-size:11px;letter-spacing:.08em}
.stat b{font:700 16px/1.1 var(--f-ui)}
.stat .dora{display:flex;gap:3px;--w:22px}

/* game column */
.game{container-type:inline-size;min-width:0}
.stage{grid-template-columns:minmax(0,1fr);--pw:clamp(14px,min(calc((100cqi - 30px)/18.9),var(--pwh,99px)),28px);--tw:min(44px,calc((100cqi - 14px)/15.2));display:grid;gap:12px}

/* opponent plates */
.opps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.plate{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:grid;gap:6px;min-width:0;position:relative;transition:border-color .2s,box-shadow .2s}
.plate.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.ph{display:flex;align-items:center;gap:6px;min-width:0}
.wb{width:22px;height:22px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font:800 14px/20px var(--f-tile);text-align:center;flex:none}
.wb.dealer{background:var(--t-red);border-color:var(--t-red);color:#fff}
.nm{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sc{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.pb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:14px}
.backs{display:flex;gap:1px;min-width:0;overflow:hidden}
.backs i{flex:0 1 6px;min-width:3px;height:10px;border-radius:1.5px;background:linear-gradient(var(--back),var(--back-2))}
.lv{font-size:10.5px;font-weight:700;line-height:16px;padding:0 5px;border-radius:4px;flex:none;border:1px solid var(--line);color:var(--muted)}
.lv-easy{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.lv-hard{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.shint{margin:-4px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.rtag{font-size:11px;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:4px;padding:0 5px;line-height:16px}
.ftag{font-size:11px;font-weight:700;color:#fff;background:var(--warn);border-radius:4px;padding:0 5px;line-height:16px}
.pm{display:flex;flex-wrap:wrap;gap:4px;min-height:0}
.pm:empty{display:none}

/* table */
.tablewrap{display:flex;justify-content:center}
.square{width:calc(var(--pw)*18.8 + 24px);height:calc(var(--pw)*18.8 + 24px);position:relative;border-radius:18px;background:radial-gradient(circle at 50% 46%,var(--felt) 0%,var(--felt-deep) 78%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 50px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.pond{--w:var(--pw);position:absolute;left:50%;top:50%;width:calc(var(--pw)*6.4 + 8px);display:flex;flex-wrap:wrap;gap:3px 1px;align-content:flex-start;transform-origin:0 0;transform:rotate(var(--r)) translate(-50%,calc(var(--pw)*3.45))}
.center{position:absolute;left:50%;top:50%;width:calc(var(--pw)*6.2);height:calc(var(--pw)*6.2);transform:translate(-50%,-50%);background:var(--felt-core);border-radius:12px;border:1px solid rgba(255,255,255,.07)}
.seat{position:absolute;left:50%;top:50%;transform-origin:0 0;transform:rotate(var(--r)) translate(-50%,calc(var(--pw)*1.7));display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:calc(var(--pw)*.58);font-variant-numeric:tabular-nums;color:var(--muted);padding:1px 4px;border-radius:4px}
.seat b{font:800 calc(var(--pw)*.72)/1 var(--f-tile);color:var(--text)}
.seat.dealer b{color:#ff8a7a}
.seat.on{background:var(--gold);color:var(--gold-ink)}
.seat.on b{color:var(--gold-ink)}
.stick{display:inline-block;width:calc(var(--pw)*1.2);height:3px;border-radius:2px;background:#f4f1ea;position:relative}
.stick::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--t-red)}
.mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.mid b{font:900 calc(var(--pw)*.8)/1.1 var(--f-head)}
.mid span{font-size:calc(var(--pw)*.55);color:var(--muted);font-variant-numeric:tabular-nums}

/* tiles */
.tile{width:var(--w);height:calc(var(--w)*1.36);position:relative;flex:none;border-radius:calc(var(--w)*.13);background:linear-gradient(170deg,var(--ivory) 55%,var(--ivory-2));box-shadow:inset 0 -1px 0 rgba(0,0,0,.08),0 calc(var(--w)*.07) 0 var(--back),0 calc(var(--w)*.07 + 2px) 4px rgba(0,0,0,.35);margin-bottom:calc(var(--w)*.07)}
.tile .face{position:absolute;inset:7% 9% 9%;display:flex;align-items:center;justify-content:center}
.tile svg{width:100%;height:100%;display:block}
.tile.back{background:linear-gradient(170deg,var(--back),var(--back-2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 calc(var(--w)*.07) 0 #ece3cd,0 calc(var(--w)*.07 + 2px) 4px rgba(0,0,0,.35)}
.mf{display:flex;flex-direction:column;align-items:center;line-height:.95;font-family:var(--f-tile);font-weight:800}
.mf .n{font-size:calc(var(--w)*.46);color:var(--t-ink)}
.mf .s{font-size:calc(var(--w)*.48);color:var(--t-red)}
.mf.red .n{color:var(--t-red)}
.hf{font:800 calc(var(--w)*.7)/1 var(--f-tile);color:var(--t-ink)}
.hf.h32{color:var(--t-green)} .hf.h33{color:var(--t-red)}
.haku{width:70%;height:78%;border:calc(var(--w)*.06) solid #4a72c4;border-radius:calc(var(--w)*.08)}
.tile.yoko{transform:rotate(-90deg);margin-left:calc(var(--w)*.18);margin-right:calc(var(--w)*.18)}
.tile.gone{opacity:.32}
.tile.last{outline:2px solid var(--gold);outline-offset:1px}
.tile.dora::before{content:"";position:absolute;right:2px;top:2px;width:0;height:0;border-left:calc(var(--w)*.2) solid transparent;border-top:calc(var(--w)*.2) solid var(--gold);border-radius:0 2px 0 0;z-index:1}
.mini{--w:14px}
.chip{--w:22px}
.xs{--w:17px}
.m{--w:30px}
.meld{display:flex;align-items:flex-end;gap:1px}
.pond .tile.fresh{animation:drop .22s ease-out}
@keyframes drop{from{transform:translateY(-30%);opacity:0}to{transform:none;opacity:1}}
.pond .tile.yoko.fresh{animation:none}

/* my area */
.me{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;justify-content:center;font-size:13px;color:var(--muted)}
.mebar b{color:var(--text);font-variant-numeric:tabular-nums}
.actions{min-height:48px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;text-align:center}
.amsg{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px}
.amsg b{color:var(--text)}
.btn{font:700 15px/1 var(--f-ui);padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:42px}
.btn:hover{border-color:var(--muted)}
.btn.gold{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.btn.win{background:var(--t-red);color:#fff;border-color:transparent;font-size:17px;padding:11px 24px}
.btn.ghost{background:transparent}
.btn .tile{--w:16px}
.handrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:12px 16px}
.hand{--w:var(--tw);display:flex;gap:2px;align-items:flex-end;padding-top:14px}
.hand .tile{cursor:pointer;transition:transform .12s ease}
.hand .tile:hover{transform:translateY(-6%)}
.hand .tile.sel{transform:translateY(-30%);box-shadow:0 0 0 2px var(--gold),0 calc(var(--w)*.07) 0 var(--back),0 6px 10px rgba(0,0,0,.45)}
.hand .tile.drawn{margin-left:calc(var(--w)*.4)}
.hand .tile.dim{filter:brightness(.45) saturate(.6);cursor:not-allowed}
.hand .tile.rec::after{content:"";position:absolute;left:50%;bottom:calc(var(--w)*-.32);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--gold)}
.mymelds{display:flex;flex-wrap:wrap;gap:6px;--w:calc(var(--tw)*.82)}
.mymelds .tile{--w:calc(var(--tw)*.82)}

/* side column */
.side{display:grid;gap:14px;align-content:start;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.card h2{margin:0;font:900 16px/1.3 var(--f-head);letter-spacing:.03em}
.chead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tag{font-size:12px;color:var(--muted)}
.big{font:900 26px/1.2 var(--f-head);margin:2px 0 4px}
.big.tenpai{color:var(--gold)}
.note{color:var(--muted);font-size:13px;margin:4px 0 10px}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent}
.crow+.crow{margin-top:4px}
.crow.best{background:var(--panel-2)}
.crow.sel{border-color:var(--gold)}
.cl{font-size:13px}
.cl b{font-weight:700}
.ct{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px}
.ct .cnt{font-size:11px;color:var(--muted);align-self:flex-end;margin:0 4px 0 1px}
.wait{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.wait:first-of-type{border-top:0}
.wait .wl{font-size:13px}
.wait .wl small{color:var(--muted)}
.noyaku{color:var(--warn)}
.safe{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.safe h3,.coach h3{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:3px}
.log ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:13px;color:var(--muted);max-height:180px;overflow:auto}
.log li:first-child{color:var(--text)}
.settings{display:grid;gap:10px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.srow select{max-width:58%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text);font:inherit}
.srow input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold)}
.refs{display:grid;gap:14px;align-items:start}
@media (min-width:900px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ref summary{cursor:pointer;font:900 16px/1.3 var(--f-head);list-style:none;display:flex;justify-content:space-between;align-items:center}
.ref summary::-webkit-details-marker{display:none}
.ref summary::after{content:"＋";color:var(--muted);font-family:var(--f-ui)}
.ref[open] summary::after{content:"－"}
.ref ol{padding-left:1.2em;margin:10px 0 0;display:grid;gap:8px;font-size:13.5px}
.ref ol b{color:var(--gold)}
.ytable{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.ytable th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:6px 4px;border-bottom:1px solid var(--line)}
.ytable td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.ytable td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gold)}
.ytable tr.grp td{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;padding-top:12px}
.tbl-wrap{overflow-x:auto}

/* modal */
.modal{position:fixed;inset:0;background:rgba(5,10,8,.72);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:50;overflow:auto}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:640px;width:100%;display:grid;gap:14px;max-height:100%;overflow:auto}
.mkind{display:inline-block;font:900 13px/1 var(--f-head);letter-spacing:.2em;color:var(--gold-ink);background:var(--gold);padding:5px 8px;border-radius:5px}
.mkind.draw{background:var(--muted)}
.mbox h2{margin:6px 0 0;font:900 24px/1.25 var(--f-head)}
.mhand{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;--w:clamp(18px,6vw,30px)}
.mhand .tile{--w:clamp(18px,6vw,30px)}
.mhand .gap{width:10px}
.mhand .win{outline:2px solid var(--t-red);outline-offset:1px}
.mdora{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted)}
.mdora div{display:flex;align-items:center;gap:6px}
.myaku{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 16px}
.myaku li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:5px 0;font-size:14px}
.myaku b{color:var(--gold);font-variant-numeric:tabular-nums}
.mtotal{font:900 22px/1.3 var(--f-head)}
.mtotal small{display:block;font:500 13px/1.4 var(--f-ui);color:var(--muted)}
.deltas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.deltas div{background:var(--panel-2);border-radius:10px;padding:8px;text-align:center;font-variant-numeric:tabular-nums}
.deltas small{display:block;color:var(--muted);font-size:12px}
.deltas .up{color:var(--ok)} .deltas .dn{color:var(--warn)}
.mrow{display:grid;gap:6px}
.mrow + .mrow{border-top:1px solid var(--line);padding-top:10px}
.rank{display:grid;gap:6px}
.rank div{display:flex;gap:12px;align-items:center;background:var(--panel-2);padding:10px 12px;border-radius:10px;font-variant-numeric:tabular-nums}
.rank b{font:900 20px/1 var(--f-head);width:26px;color:var(--gold)}
.rank span:last-child{margin-left:auto;font-weight:700}
@media (prefers-reduced-motion:reduce){.pond .tile.fresh{animation:none}.hand .tile{transition:none}}
@media (max-width:520px){
  .app{--gut:10px;gap:12px;padding-top:10px}
  .btn{padding:10px 14px;font-size:14px}.btn.win{font-size:16px}
  .brand h1{font-size:19px}.brand p{display:none}.seal{width:34px;height:34px;font-size:20px;line-height:34px}
  .top{gap:8px 14px}.status{gap:6px 12px}.stat b{font-size:14px}.stat .dora{--w:18px}
  /* Opponent plates: score drops to its own line so name, level and score never overflow. */
  .opps{gap:6px}.plate{padding:6px 8px;gap:4px}
  .ph{flex-wrap:wrap;row-gap:2px}.sc{order:9;flex-basis:100%;margin-left:0}
  .card{padding:12px 14px}
}