:root{--felt:#14532d;--felt2:#166534;--ink:#fff;--tile:46px;--sm:30px;--xs:22px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--felt);color:var(--ink);font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:18px;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none}
body.big{font-size:20px}
main{max-width:640px;margin:0 auto;padding:env(safe-area-inset-top) 8px calc(env(safe-area-inset-bottom) + 8px)}
h1{font-size:1.6em;text-align:center;margin:24px 0 12px}h2{text-align:center}h3{margin:18px 0 6px}
.card{background:rgba(0,0,0,.25);padding:12px;border-radius:12px;line-height:1.5}
.sub{text-align:center;opacity:.85;font-size:.85em}
.menu{margin-top:16px}
button.act{font-size:1.15em;min-height:56px;padding:8px 16px;margin:5px 4px;border-radius:14px;border:0;background:#f4f1e6;color:#222;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.35)}
button.act:active{transform:translateY(2px);box-shadow:none}
button.wide{display:block;width:calc(100% - 8px)}
.blue{background:#1d4ed8!important;color:#fff!important}.gold{background:#facc15!important;color:#3b2a00!important}.red{background:#dc2626!important;color:#fff!important}.gray{background:#6b7280!important;color:#fff!important}
button.mini{font-size:.85em;padding:6px 12px;border-radius:10px;border:0;background:rgba(255,255,255,.2);color:#fff}
.ok{color:#a7f3d0;font-weight:700}.warn{color:#fecaca;font-weight:700}
.tile{display:inline-block;vertical-align:middle;line-height:0;position:relative}
.tile .tsvg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 0 #8a7f5f)}
.tile.lg{width:var(--tile);margin:2px 1px;transition:transform .12s}
.tile.sm{width:var(--sm);margin:1px}.tile.xs{width:var(--xs);margin:0 1px}
.tile.rot{transform:rotate(90deg);margin:0 5px}
.tile.gone{opacity:.35}.tile.tg{opacity:.85}
.tile.dim{opacity:.55}
.tile.sel{transform:translateY(-14px)}
.tile.recd::after{content:"★";position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:#facc15;font-size:16px;line-height:1;text-shadow:0 1px 2px #000}
.tile.drawn{margin-left:6px}
.gap{display:inline-block;width:6px}
.bar{display:flex;justify-content:space-between;align-items:center;padding:6px 2px;font-size:.95em}
.bar2{padding:2px;font-size:.85em}
.opp{background:rgba(0,0,0,.18);border-radius:10px;padding:4px 6px;margin:4px 0;position:relative;min-height:56px}
.opp.cur{outline:2px solid #facc15}
.who{display:flex;gap:6px;align-items:center;font-size:.9em;flex-wrap:wrap}
.who .icon{font-size:1.3em}.who .pt{font-weight:700;margin-left:auto}.who .lbl{opacity:.6;font-size:.8em}
.rb{background:#dc2626;color:#fff;border-radius:6px;padding:0 6px;font-size:.8em;font-weight:700}
.river{line-height:0;margin-top:2px}.river.mine{min-height:36px}
.melds{text-align:right}.meld{display:inline-block;margin-left:6px}
#me{background:rgba(0,0,0,.12);border-radius:10px;padding:4px 6px;margin-top:6px;position:relative}
#myInfo{font-size:.95em}#myInfo .pt{font-weight:700}
#hint{min-height:1.6em;font-size:.95em;margin-top:4px;line-height:1.8}
#hint small{font-size:.75em;margin-right:6px}
.rec{background:#facc15;color:#3b2a00;border-radius:8px;padding:0 8px;font-weight:700}
#hand{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;padding:18px 0 4px;min-height:calc(var(--tile)*1.4 + 22px)}
#prompt{text-align:center;min-height:1.4em;font-size:.95em}
#actions{display:flex;flex-wrap:wrap;justify-content:center;min-height:66px}
#actions .act{flex:1 1 30%;font-size:1.3em}
.bubble{position:absolute;right:8px;top:-6px;background:#fff;color:#111;font-weight:800;padding:6px 12px;border-radius:14px;animation:pop .25s ease-out;z-index:5;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.bubble.big{font-size:1.3em}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.banner{position:fixed;left:0;right:0;top:40%;text-align:center;font-size:2.2em;font-weight:800;background:rgba(0,0,0,.6);padding:16px;animation:pop .3s;z-index:20}
.overlay{position:fixed;inset:0;background:rgba(5,30,15,.94);overflow:auto;padding:calc(env(safe-area-inset-top) + 12px) 12px 24px;z-index:30;text-align:center}
.winTitle{font-size:3em;font-weight:900;color:#facc15;text-shadow:0 3px 0 #7c2d12;animation:pop .4s}
.winTitle.huge{font-size:4em;animation:pop .4s,glow 1s infinite alternate}
@keyframes glow{from{text-shadow:0 0 6px #fde68a}to{text-shadow:0 0 26px #f59e0b}}
.overlay .who{justify-content:center;font-size:1.1em;margin:6px 0}
.rhand{margin:8px 0}.dora{font-size:.9em}
ul.yaku{list-style:none;padding:0;margin:10px auto;max-width:360px;text-align:left}
ul.yaku li{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.2);padding:4px 2px;font-size:1.1em}
.pts{font-size:1.2em;margin:8px}.pts .big{font-size:2em;font-weight:900;color:#fde68a}
table.delta{margin:10px auto;border-collapse:collapse;min-width:280px}
table.delta td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.2);text-align:left}
.plus{color:#86efac;font-weight:700}.minus{color:#fca5a5;font-weight:700}
.set{padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.2)}.set>span{display:block;margin-bottom:6px;font-weight:700}
.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{flex:1 1 auto;min-height:48px;font-size:1em;border-radius:12px;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff}.seg button.on{background:#facc15;color:#3b2a00;border-color:#facc15;font-weight:800}
ul.achs,ul.hist{list-style:none;padding:0}ul.achs li{padding:4px 0;opacity:.55}ul.achs li.got{opacity:1}
.ach{font-size:1.1em;color:#fde68a}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.cf{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall 2.5s linear forwards}
@keyframes fall{to{top:110vh;transform:rotate(720deg)}}
#toasts{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 90px);display:flex;flex-direction:column;align-items:center;z-index:50;pointer-events:none}
.toast{background:rgba(0,0,0,.85);padding:10px 16px;border-radius:12px;margin:4px;font-weight:700;animation:pop .25s}
@media (min-width:430px){:root{--tile:50px}}
body.big{--tile:calc((min(100vw,640px) - 40px)/7.4);--sm:34px;--xs:24px}
@media (orientation:landscape) and (max-height:500px){body.big{--tile:44px}}
/* ===== 卓（4人の上から見た麻雀卓） ===== */
#game{margin:0 -8px}
#table{display:flex;flex-direction:column;align-items:center}
#board{position:relative;width:var(--S);height:var(--S);margin:4px auto 0;border-radius:14px;
  background:radial-gradient(circle at 50% 50%,#1f7a44 0,#17663a 55%,#0f4d2b 100%);box-shadow:inset 0 0 0 6px #5b3a1e,inset 0 0 0 9px #3d2712,0 4px 14px rgba(0,0,0,.5);overflow:hidden}
.center{position:absolute;left:50%;top:50%;width:var(--C);height:var(--C);transform:translate(-50%,-50%);background:#0b2e1b;border-radius:10px;box-shadow:0 0 0 2px #3f7d59}
.cinfo{position:absolute;inset:calc(var(--tw)*1.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:calc(var(--tw)*.55);line-height:1.2;text-align:center}
.cinfo b{font-size:1.15em;color:#fde68a}
.tile.di{width:calc(var(--tw)*.8);margin:0 1px}
.side{position:absolute;left:0;top:50%;width:var(--S);height:calc(var(--S)/2);transform-origin:50% 0;pointer-events:none}
.s1{transform:rotate(-90deg)}.s2{transform:rotate(180deg)}.s3{transform:rotate(90deg)}
.slabel{position:absolute;top:calc(var(--C)/2 - var(--tw)*1.0);left:50%;transform:translateX(-50%);font-size:calc(var(--tw)*.55);font-weight:700;white-space:nowrap;padding:0 6px;border-radius:6px;color:#d1fae5}
.slabel.cur{background:#facc15;color:#3b2a00;box-shadow:0 0 10px #facc15}
.stick{display:inline-block;width:calc(var(--tw)*1.2);height:4px;background:#fff;border-radius:2px;vertical-align:middle;box-shadow:inset 0 0 0 1.5px #fff;position:relative}
.stick::after{content:"";position:absolute;left:45%;top:0;width:4px;height:4px;border-radius:50%;background:#dc2626}
.rvw{position:absolute;top:calc(var(--C)/2 + 3px);left:50%;transform:translateX(-50%);width:calc(var(--tw)*6.4);display:flex;flex-wrap:wrap;align-content:flex-start;line-height:0}
.tile.rv{width:var(--tw);margin:0}
.tile.rv .tsvg,.tile.bk .tsvg,.tile.ml .tsvg,.tile.di .tsvg{filter:none}
.tile.rv.rot{transform:rotate(90deg);margin:0 calc(var(--tw)*.17)}
.tile.rv.new{animation:dropin .32s ease-out}
@keyframes dropin{from{translate:0 calc(var(--tw)*3);scale:1.5;opacity:.2}to{translate:0 0;scale:1;opacity:1}}
.hbar{position:absolute;bottom:calc(var(--tw)*.25);left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;white-space:nowrap;line-height:0}
.tile.bk{width:calc(var(--tw)*.72);margin:0}
.tile.bk.dr{margin-left:4px;animation:drawin .3s ease-out}
@keyframes drawin{from{translate:0 -100%;opacity:0}}
.tile.ml{width:calc(var(--tw)*.78);margin:0}
.hbar .meld{margin-left:5px}
.badge{position:absolute;width:calc((var(--S) - var(--C))/2 - var(--tw)*2.2);max-width:120px;display:flex;flex-direction:column;align-items:center;padding:3px 2px;border-radius:10px;background:rgba(0,0,0,.35);font-size:calc(var(--tw)*.62);line-height:1.15;text-align:center;z-index:3}
.badge .icon{font-size:1.6em}.badge .nm{font-weight:700}.badge .pt{font-weight:800;color:#fde68a}
.badge.cur{outline:3px solid #facc15;box-shadow:0 0 12px #facc15}
.b0{right:8px;bottom:8px}.b1{right:8px;top:8px}.b2{left:8px;top:8px}.b3{left:8px;bottom:8px}
.badge .bubble{right:auto;left:50%;top:auto;bottom:100%;transform:translateX(-50%);white-space:nowrap}
.b1 .bubble,.b2 .bubble{bottom:auto;top:100%}
.tile.lg.drawn.anim{animation:drawin .3s ease-out}
#panel{width:100%;max-width:640px;padding:0 8px}
#me{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
#me #quitBtn{margin-left:auto}#me #myMelds{flex-basis:100%;text-align:right}#me #hint{flex-basis:100%}
#hand{padding-top:16px}
body.land #table{flex-direction:row;align-items:flex-start;justify-content:center;gap:8px;height:100vh}
body.land #panel{flex:1;max-width:none;height:100vh;overflow:auto}
body.land #board{margin:4px 0 0}
body.land main{max-width:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body.land #hand{padding-top:12px;min-height:0}body.land #actions{min-height:0}