:root{--ivory:#F1E8D0;--gold:#C6A45B;--bronze:#8D7444;--navy:#273545;--night:#101C2D;--ruby:#B92F51;--wine:#672D49;--jade:#4F7467;--deep:#24483F;--ink:#292F31;--paper:#F5F0E4;
 --serif:'Noto Serif CJK JP','Hiragino Mincho ProN','Yu Mincho',serif;--cw:clamp(44px,5.4vw,76px)}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--paper);font-family:'Noto Sans CJK JP','Hiragino Sans',sans-serif;color:var(--ink)}
#bg{position:fixed;inset:0;background:url(assets/art/dragon.jpg) center/cover no-repeat;transition:background-image .6s}#bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#0000 30%,#0007)}
.screen{position:fixed;inset:0;display:none}.screen.on{display:flex}
.btn{font:inherit;cursor:pointer;border:1px solid var(--gold);background:linear-gradient(180deg,#2c3d50,var(--night));color:var(--ivory);padding:14px 22px;border-radius:12px;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.08em;box-shadow:0 6px 18px #101c2d55,inset 0 1px 0 #ffffff22;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s}
.btn small{font-size:11px;font-weight:500;letter-spacing:.05em;opacity:.75;font-family:sans-serif}.btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.btn.primary{background:linear-gradient(180deg,#cf4566,var(--ruby) 55%,var(--wine));border-color:#e7c77f}
.btn.ghost{background:#f5f0e4cc;color:var(--ink);border-color:var(--bronze);box-shadow:none}.btn.sm{padding:6px 14px;font-size:14px}
#top{flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}
.brand{text-align:center;display:flex;flex-direction:column;align-items:center}
.seal{width:58px;height:58px;border-radius:8px;background:var(--ruby);color:var(--ivory);font:900 36px/58px var(--serif);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ruby)}
h1{font:900 clamp(38px,6vw,64px)/1.1 var(--serif);letter-spacing:.12em;margin-top:10px;color:var(--night);text-shadow:0 2px 0 #f5f0e4}
h1 small{display:block;font-size:14px;letter-spacing:.5em;color:var(--bronze);margin-top:6px}
.lead{font-family:var(--serif);color:var(--navy);margin-top:6px}
.card-fan{position:relative;height:110px;width:300px}.card-fan .c{position:absolute;left:50%;bottom:0;width:70px;transform-origin:50% 140%}
.panel{background:#f5f0e4e6;border:1px solid var(--gold);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;width:min(420px,94vw);box-shadow:0 20px 50px #101c2d33;backdrop-filter:blur(3px)}
.name{display:flex;flex-direction:column;font-size:12px;color:var(--bronze);gap:4px}.name input{font:700 18px var(--serif);padding:8px 12px;border:1px solid var(--bronze);border-radius:8px;background:#fffaf0}
.practice{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--bronze);padding-top:14px}
.seg{display:flex;align-items:center;gap:6px}.seg span{font-size:13px;color:var(--bronze);margin-right:4px}
.seg button{flex:1;font:700 16px var(--serif);padding:8px;border-radius:8px;border:1px solid var(--bronze);background:#fffaf0;color:var(--ink);cursor:pointer}.seg button.sel{background:var(--deep);color:var(--ivory);border-color:var(--gold)}
.fine{font-size:11px;color:#686A65;text-align:center;line-height:1.6}
#wait{align-items:center;justify-content:center}.waitbox{background:#f5f0e4ee;border:1px solid var(--gold);border-radius:18px;padding:28px;width:min(420px,92vw);text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.waitbox h2{font:900 28px var(--serif);letter-spacing:.3em}
.spin3d{perspective:600px;height:130px}.tile{width:80px;height:112px;position:relative;transform-style:preserve-3d;animation:spin 2.4s linear infinite}
.tile .f{position:absolute;inset:0;backface-visibility:hidden}.tile .back{transform:rotateY(180deg)}
@keyframes spin{to{transform:rotateY(360deg)}}
#roomList{list-style:none;width:100%;display:flex;flex-direction:column;gap:6px}#roomList li{background:#fffaf0;border:1px solid #DAD1BF;border-radius:8px;padding:8px;font-family:var(--serif);font-weight:700;display:flex;justify-content:space-between}
#roomList li em{font-style:normal;font-size:12px;color:var(--jade)}
/* game */
#game{flex-direction:column}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;z-index:30}
#hudInfo{font:700 14px var(--serif);background:#101c2dcc;color:var(--ivory);padding:6px 12px;border-radius:20px;border:1px solid var(--gold)}
#stage{position:absolute;inset:0;overflow:hidden}
.felt-wrap{position:absolute;left:50%;bottom:20%;width:min(1100px,96vw);height:min(58vh,560px);transform:translateX(-50%);perspective:900px;perspective-origin:50% 0%}
.felt{position:absolute;inset:0;transform:rotateX(48deg);transform-origin:50% 100%;border-radius:18% 18% 8% 8%/22% 22% 10% 10%;background:radial-gradient(ellipse at 50% 45%,var(--f1),var(--f2) 62%,var(--f3));box-shadow:0 0 0 18px #0c0c0e,0 0 0 20px #3a3a3e,0 0 0 21px var(--gold),0 40px 60px #101c2d88,inset 0 0 80px #0008}
.rail{position:absolute;inset:16px;border-radius:18% 18% 8% 8%/22% 22% 10% 10%;border:2px solid #c6a45b66}
.center{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;gap:26px;align-items:center}
.deck{position:relative;width:calc(var(--cw)*.9);height:calc(var(--cw)*1.26)}.deckstack{position:absolute;inset:0;border-radius:6px;box-shadow:2px 2px 0 #8D7444,4px 4px 0 #672D49,6px 6px 0 #8D7444,8px 9px 14px #0008}
#deckN{position:absolute;bottom:-24px;white-space:nowrap;font-size:13px!important;left:0;right:0;text-align:center;color:var(--ivory);font:700 15px var(--serif)}
.dora{display:flex;flex-direction:column;align-items:center;color:var(--gold);font:700 14px var(--serif);gap:4px}
.mini{width:calc(var(--cw)*.8)}.kyo{display:flex;flex-direction:column;gap:6px;color:var(--ivory);font:700 14px var(--serif)}.kyo span{display:flex;align-items:center;gap:6px}
.chip{width:24px;height:24px;filter:drop-shadow(0 2px 2px #0006)}
.c{display:block;filter:drop-shadow(0 2px 2px #0005)}.c svg{display:block;width:100%;height:auto}
#seats .seat{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:5;transition:transform .35s}
.seat .char{width:clamp(110px,13vw,190px);aspect-ratio:1;background-size:contain;background-repeat:no-repeat;background-position:50% 100%;transition:transform .35s ease;filter:drop-shadow(0 10px 10px #101c2d55)}
.seat.act .char{animation:bob 1.2s ease-in-out infinite}.seat.reach .char{transform:translateY(14px) scale(1.04) rotate(-4deg)}.seat.toss .char{transform:translateY(10px) rotate(5deg)}
@keyframes bob{50%{transform:translateY(-6px)}}
.seat .stand{display:flex;margin-top:-26px;gap:0}.seat .stand .c{width:calc(var(--cw)*.62);margin-left:calc(var(--cw)*-.18)}
.seat[data-pos=left] .stand,.seat[data-pos=right] .stand{transform:scale(.85)}
.plate{display:flex;gap:8px;align-items:center;background:#101c2de6;color:var(--ivory);border:1px solid var(--gold);border-radius:22px;padding:4px 12px 4px 6px;font:700 14px var(--serif);margin-top:6px;white-space:nowrap}
.plate .tag{font-size:11px;padding:1px 6px;border-radius:6px;background:var(--ruby)}.plate .tag.oya{background:var(--gold);color:var(--night)}.plate.act{box-shadow:0 0 0 2px var(--gold),0 0 18px var(--gold)}
.seat[data-pos=top]{left:50%;top:9%;transform:translateX(-50%)}.seat[data-pos=left]{left:3%;top:30%}.seat[data-pos=right]{right:3%;top:30%}
#me{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;z-index:20;padding-bottom:max(10px,env(safe-area-inset-bottom))}
#hand{position:relative;height:calc(var(--cw)*2.1);width:min(760px,98vw)}
#hand .c{position:absolute;bottom:0;left:50%;width:calc(var(--cw)*1.25);transform-origin:50% 160%;cursor:pointer;transition:transform .18s}
#hand .c.drawn{filter:drop-shadow(0 0 8px var(--gold))}#hand.can .c:hover{margin-bottom:18px}
#hand .c.kan{opacity:.9}
#actions{display:flex;gap:10px;min-height:46px;margin-top:4px}#actions .btn{padding:8px 22px;font-size:18px}
#myPlate{position:absolute;left:12px;bottom:calc(var(--cw)*1.4);}
#banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font:900 clamp(40px,8vw,90px) var(--serif);color:var(--ivory);text-shadow:0 0 0 #000,0 4px 0 var(--wine),0 0 30px var(--ruby);opacity:0;pointer-events:none;z-index:40;letter-spacing:.2em;transition:.3s}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fly{position:absolute;z-index:35;pointer-events:none}
#modal{position:absolute;inset:0;background:#101c2d99;display:flex;align-items:center;justify-content:center;z-index:50}#modal.hidden{display:none}
.mbox img{width:84px!important}.mbox{gap:8px!important;background:var(--paper);border:2px solid var(--gold);border-radius:18px;padding:22px;width:min(560px,94vw);max-height:90vh;overflow:auto;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;box-shadow:0 30px 80px #000a}
.mbox h3{font:900 30px var(--serif);letter-spacing:.2em;color:var(--wine)}.mbox .row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.mbox .row .c{width:46px}
.mbox table{border-collapse:collapse;font-family:var(--serif);width:100%}.mbox td{padding:4px 8px;border-bottom:1px dashed #DAD1BF}.mbox td:last-child{text-align:right;font-weight:700}
.dice{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.die{width:46px;height:46px;border-radius:10px;background:linear-gradient(145deg,#fffdf6,#efe4cc);border:2px solid var(--ink);box-shadow:0 2px 0 #00000055,inset 0 -3px 5px #0000001f;display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;margin:3px;box-sizing:border-box}.die i{width:100%;height:100%;border-radius:50%;background:transparent}.die i.on{background:radial-gradient(circle at 35% 30%,#555,#111 70%)}.die[data-v="1"] i.on{background:radial-gradient(circle at 35% 30%,#e8566e,#a3142e 70%)}
@media (max-width:600px){:root{--cw:42px}.felt-wrap{bottom:24%;height:46vh;width:106vw}.seat .char{width:92px}.seat[data-pos=top]{top:7%}.seat[data-pos=left]{left:-2%;top:26%}.seat[data-pos=right]{right:-2%;top:26%}
 .center{gap:12px}#myPlate{position:static;margin-bottom:4px}.plate{font-size:12px}.seat .stand .c{width:30px;margin-left:-10px}}

@media (max-width:600px){.mbox{padding:14px}.mbox h3{font-size:24px}.mbox .row .c{width:34px}}

#ponds{position:absolute;left:50%;bottom:20%;width:min(1100px,96vw);height:min(58vh,560px);transform:translateX(-50%);pointer-events:none;z-index:6}
.pond{position:absolute;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-content:flex-start;--pw:clamp(34px,3.4vw,46px)}
.pond .c{width:var(--pw);filter:drop-shadow(0 3px 3px #0007)}.pond .c.riichi{transform:rotate(90deg);margin:0 calc(var(--pw)*.2)}
.pond[data-pos=top]{left:31%;width:38%;top:31%}.pond[data-pos=bottom]{left:28%;width:44%;bottom:3%;align-content:flex-end}
.pond[data-pos=left]{left:9%;width:21%;top:46%}.pond[data-pos=right]{right:9%;width:21%;top:46%}
.center{top:60%}
@media (max-width:600px){#ponds{bottom:24%;height:46vh;width:106vw}.pond{--pw:27px;gap:3px}.pond[data-pos=left]{left:5%;width:27%;top:42%}.pond[data-pos=right]{right:5%;width:27%;top:42%}.pond[data-pos=top]{top:38%;left:30%;width:40%}.pond[data-pos=bottom]{left:22%;width:56%}}

.stack{width:clamp(30px,3vw,42px);filter:drop-shadow(0 3px 3px #0006)}.seat .stk{position:absolute;right:-34px;bottom:34px}.seat[data-pos=right] .stk{right:auto;left:-30px}
.score{font:900 20px var(--serif);color:var(--ivory);background:#101c2de6;border:2px solid var(--gold);border-radius:8px;padding:2px 22px;margin-top:4px;letter-spacing:.08em}
.mystk{position:absolute;right:max(14px,6vw);bottom:24px}.mystk .stack{width:clamp(38px,4vw,52px)}
.slot{position:absolute;left:max(14px,4vw);bottom:20px;width:calc(var(--cw)*.95);aspect-ratio:100/140;border:2px dashed var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 12px var(--serif);color:var(--bronze);background:#f5f0e488}
.slot svg{width:100%;display:block}
.stick{flex-basis:100%;height:12px;position:relative}.stick::before{content:'';position:absolute;left:50%;top:0;width:56px;height:7px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,#F1E8D0 0 44%,#B92F51 44% 56%,#F1E8D0 56%);border:1px solid #8D7444;box-shadow:0 2px 3px #0006}
.bubble{position:absolute;z-index:45;transform:translate(-20%,-100%);background:#fffaf0;border:2.5px solid var(--ink);border-radius:20px;padding:6px 16px;font:900 22px var(--serif);color:var(--wine);box-shadow:0 6px 14px #0004;animation:pop .25s ease-out;transition:opacity .35s;white-space:nowrap}
.bubble::after{content:'';position:absolute;left:22px;bottom:-16px;border:7px solid transparent;border-top:9px solid var(--ink)}.bubble.out{opacity:0}
@keyframes pop{from{transform:translate(-20%,-100%) scale(.4)}}
@media (max-width:600px){.slot{width:34px;bottom:14px;left:8px}.mystk{right:8px;bottom:12px}.score{font-size:16px;padding:1px 16px}.seat .stk{right:-22px}.stack{width:26px}.bubble{font-size:16px}}

/* v4: felt colors, hud, dragon fx, chip throw */
:root,body[data-felt=wine]{--f1:#8a2a40;--f2:#5e1a2c;--f3:#3a0f1b}
body[data-felt=green]{--f1:#3b6b5c;--f2:#24483F;--f3:#16302a}
body[data-felt=navy]{--f1:#34507a;--f2:#1d2f4d;--f3:#101a2e}
body[data-felt=teal]{--f1:#2f7a7a;--f2:#1a4f52;--f3:#0e3033}
.hudr{display:flex;gap:8px}

#dragonFx{position:absolute;inset:0;z-index:48;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center}
#dragonFx .dimg{position:absolute;inset:0;background:url(assets/art/dragon.jpg) center/cover;transform:scale(1.4) rotate(-6deg);filter:brightness(1.4) saturate(1.3)}
#dragonFx.go{animation:dfx .9s ease-out forwards}#dragonFx.go .dimg{animation:dzoom .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes dfx{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes dzoom{to{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}}
.mbox.dragon{background:linear-gradient(#101010cc,#101010e6),url(assets/art/dragon.jpg) center/cover;color:var(--ivory);border-color:#e7c77f}
.mbox.dragon h3{color:#ffd77a;text-shadow:0 2px 0 #7a1020,0 0 20px #b92f51}.mbox.dragon td{border-bottom-color:#c6a45b55}.mbox.dragon .fine{color:#d8cfb8}
.mbox.dragon .quip{font:700 15px var(--serif);color:#ffd77a;font-style:italic}
.tchip{position:absolute;z-index:46;width:28px;height:28px;pointer-events:none}.tchip svg{width:100%;height:100%}
.kanfx{position:absolute;z-index:47;font:900 22px var(--serif);color:#ffd77a;text-shadow:0 2px 0 #000;pointer-events:none;animation:kanfx .5s ease-out forwards}
@keyframes kanfx{from{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-140%) scale(1.3);opacity:0}}
.seat.hit .char{animation:hit .35s ease-out}@keyframes hit{30%{transform:translateY(8px) scaleY(.9) rotate(-3deg)}}

/* v6: background + table picker */
body[data-felt=midnight]{--f1:#34465c;--f2:#273545;--f3:#101C2D}
body[data-felt=jade]{--f1:#3d6a5a;--f2:#24483F;--f3:#142b26}
body[data-felt=copper]{--f1:#2f5866;--f2:#203D4A;--f3:#11232b}
body[data-felt=plum]{--f1:#6d4574;--f2:#4a2c50;--f3:#2a1830}
body{--acc:#C6A45B}body[data-felt=jade]{--acc:#CCAA6A}body[data-felt=copper]{--acc:#B77C5C}body[data-felt=plum]{--acc:#B7A06E}
.felt{box-shadow:0 0 0 18px #0c0c0e,0 0 0 20px #3a3a3e,0 0 0 21px var(--acc),0 40px 60px #101c2d88,inset 0 0 80px #0008}
.seg button.sel{background:var(--f2,var(--deep));border-color:var(--acc)}
.btn.primary{border-color:var(--acc)}
.optH{font:700 12px var(--serif);color:var(--bronze);letter-spacing:.2em;margin:2px 0 6px}
.optRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.optRow.tb{grid-template-columns:repeat(5,1fr);gap:6px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 4px 6px;border:1.5px solid #c9b98f;border-radius:10px;background:#fffaf0;cursor:pointer;transition:.15s;font:inherit;color:var(--ink)}
.opt b{font:700 11px var(--serif);white-space:nowrap;letter-spacing:-.02em}
.opt:hover{transform:translateY(-1px);box-shadow:0 4px 10px #0002}
.opt.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 4px 12px #0003;background:#fff}
.opt.sel::after{content:'✓';position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;font:900 11px/18px sans-serif;text-align:center}
.thumb{display:block;width:100%;aspect-ratio:16/10;border-radius:6px;background:center/cover}
.sw{display:block;width:40px;height:28px;border-radius:50%/60%;background:radial-gradient(ellipse at 50% 40%,var(--c),color-mix(in srgb,var(--c),#000 55%));box-shadow:0 0 0 3px #0c0c0e,0 0 0 4px #3a3a3e,0 0 0 5px var(--g)}
.optRow.tb .opt{padding-top:9px}.optRow.tb b{font-size:10px}
#settings{position:absolute;inset:0;background:#101c2d99;display:flex;align-items:center;justify-content:center;z-index:60}#settings.hidden{display:none}
.sbox{background:#f5f0e4;border:1px solid var(--acc);border-radius:18px;padding:18px;width:min(440px,94vw);display:flex;flex-direction:column;gap:6px;box-shadow:0 20px 50px #0006}
.sbox h3{font:900 20px var(--serif);letter-spacing:.2em;color:var(--wine);text-align:center;margin-bottom:6px}
.optRow.tb .opt{min-width:0;padding:8px 2px 5px}.optRow.tb b{font-size:9px;white-space:nowrap;letter-spacing:-.08em;text-align:center;line-height:1.2;display:block;max-width:100%;overflow:visible}
@media (max-width:600px){.sw{width:34px;height:24px}.hudr .btn.sm{white-space:nowrap}}

/* v8 dense ponds: overlapped grid so a full wall's discards always fit */
.pond{display:grid!important;grid-template-columns:repeat(var(--cols,8),calc(var(--pw)*.66));grid-auto-rows:calc(var(--pw)*.9);gap:0!important;justify-content:center;padding-right:calc(var(--pw)*.34);padding-bottom:calc(var(--pw)*.5)}
.pond[data-pos=bottom]{align-content:end;padding-bottom:calc(var(--pw)*.8)}
.pond .c{width:var(--pw);position:relative;margin:0!important}
.pond .c.riichi{transform:rotate(-12deg) translateY(-2px);z-index:2;filter:drop-shadow(0 0 0 #E8C770) drop-shadow(0 0 4px #E8C770) drop-shadow(0 3px 3px #0008)}
.pond .c.last{z-index:3;filter:drop-shadow(0 0 3px #fff8) drop-shadow(0 4px 5px #000a)}
.pond .stick{position:absolute;top:-10px;left:50%;transform:translateX(-50%)}
#ponds{z-index:6}.center{z-index:7}
@media (max-width:600px){.pond{--pw:26px}.pond[data-pos=top]{top:33%;left:20%;width:60%}.pond[data-pos=bottom]{left:20%;width:60%;bottom:4%}
 .pond[data-pos=left]{left:3%;width:30%;top:36%}.pond[data-pos=right]{right:3%;width:30%;top:36%}}
@media (min-width:601px){.pond[data-pos=bottom]{bottom:14%;padding-bottom:0}.pond[data-pos=left]{left:17%;width:19%;top:40%}.pond[data-pos=right]{right:17%;width:19%;top:40%}}

/* v9: PC hand/pond separation (>16 discards dense) + result wrap */
.rk span{display:inline-block}
.pond.dense{grid-auto-rows:calc(var(--pw)*.62)}
@media (min-width:601px){.felt-wrap,#ponds{bottom:24%}#hand{height:calc(var(--cw)*1.9)}.pond[data-pos=bottom]{bottom:9%}.pond[data-pos=top]{top:35%}.pond.dense{--pw:38px}}

/* v11: bigger own hand + dora marker */
#hand{--hw:calc(var(--cw)*1.42);height:calc(var(--hw)*1.5)}
#hand .c{width:var(--hw);transform-origin:50% 130%}
@media (max-width:600px){#hand{--hw:min(64px,15vw);height:calc(var(--hw)*1.52);width:100vw}}
@media (min-width:601px){#hand{height:calc(var(--hw)*1.5)}.felt-wrap,#ponds{bottom:27.5%}}
.c.isdora{position:relative}
.c.isdora::before{content:'';position:absolute;inset:0;border-radius:8%/6%;box-shadow:inset 0 0 0 2px #E8C770,0 0 6px 1px #E8C770cc;pointer-events:none;z-index:1}
.c.isdora::after{content:'ドラ';position:absolute;top:-7px;left:-3px;z-index:2;font:900 10px/1 var(--serif);letter-spacing:.02em;color:#2a1608;padding:2px 3px 2px;border-radius:4px;
 background:linear-gradient(160deg,#FFF1B8,#E8C770 45%,#B88A2E);box-shadow:0 0 0 1px #6b4a12,0 1px 3px #0009;pointer-events:none;white-space:nowrap}
#hand .c.isdora::after{font-size:12px;padding:3px 4px;top:-15px;left:2px}
.pond .c.isdora::after{font-size:8px;padding:1px 2px;top:-5px;left:-3px}
.pond .c.isdora{z-index:2}
.mbox .row .c.isdora::after{font-size:9px}
/* v12: opponent discards larger + less overlap; dora marker stays inside own visible area (no raising) */
.c.isdora{isolation:isolate;z-index:auto!important}
.c.isdora::before{box-shadow:inset 0 0 0 2px #E8C770,inset 0 0 8px 1px #E8C77088!important;z-index:1}
.c.isdora::after{top:2%!important;left:5%!important;right:auto;font-size:8px!important;padding:1px 2px!important;z-index:2}
#hand .c.isdora::after{font-size:11px!important;padding:2px 3px!important;top:3%!important;left:30%!important}
.pond .c.isdora{z-index:auto!important}
.pond.opp{grid-template-columns:repeat(var(--cols,8),calc(var(--pw)*.8))!important;grid-auto-rows:calc(var(--pw)*1.4 + 2px)!important;padding-right:calc(var(--pw)*.2)}
.pond.opp .c.riichi{z-index:auto}
.pond .c.last{z-index:auto}
.pond .c.last::before{content:'';position:absolute;inset:-2px;border-radius:10%;box-shadow:0 0 0 2px #fff,0 0 8px 2px #fffa;pointer-events:none}
@media (max-width:600px){
 .pond.opp{--pw:34px}.pond.opp[data-pos=left],.pond.opp[data-pos=right]{--pw:30px}
 .pond[data-pos=top]{top:29%;left:4%;width:92%}
 .pond[data-pos=left]{left:1%;width:31%;top:32%}.pond[data-pos=right]{right:1%;width:31%;top:32%}
 .pond[data-pos=bottom]{--pw:24px}}
@media (min-width:601px){.pond.opp,.pond.opp.dense{--pw:50px}.pond[data-pos=top]{top:22%}.pond[data-pos=left]{left:12%;width:26%;top:26%}.pond[data-pos=right]{right:12%;width:26%;top:26%}}
.pond .c.isdora::after{font-size:7px!important;line-height:1!important;padding:0 2px!important}
@media (min-width:601px){.pond.opp[data-pos=top]{--pw:40px;top:42%;left:10%;width:80%}}
.mbox .row .c.isdora::after{left:auto!important;right:4%!important;top:3%!important;font-size:8px!important}
/* v15 riichi dances / smug / fallen */
.seat .char{transform-origin:50% 100%;will-change:transform}
.seat.dance .char{animation:var(--dn,dz-bob) var(--dd,.9s) ease-in-out infinite}
.seat.wdance .char{animation-duration:calc(var(--dd,.9s)*.6);filter:drop-shadow(0 0 10px #ffd77a) drop-shadow(0 10px 10px #101c2d55)}
.seat.wdance{--amp:2}
.seat[data-char=d03]{--dn:dz-bob;--dd:.8s}.seat[data-char=d05]{--dn:dz-hop;--dd:.7s}.seat[data-char=d07]{--dn:dz-sway;--dd:1.4s}
.seat[data-char=d10]{--dn:dz-wiggle;--dd:.5s}.seat[data-char=d11]{--dn:dz-waddle;--dd:.7s}.seat[data-char=d13]{--dn:dz-squash;--dd:.6s}
.seat[data-char=d15]{--dn:dz-shuffle;--dd:1.1s}.seat[data-char=d16]{--dn:dz-nod;--dd:.55s}.seat[data-char=d19]{--dn:dz-spin;--dd:1.2s}
.seat[data-char=d27]{--dn:dz-float;--dd:1.6s}.seat[data-char=d30]{--dn:dz-headbang;--dd:.45s}.seat[data-char=d32]{--dn:dz-strut;--dd:.9s}
@keyframes dz-bob{50%{transform:translateY(calc(-6px*var(--amp,1)))}}
@keyframes dz-hop{0%,100%{transform:none}30%{transform:translateY(calc(-14px*var(--amp,1))) scaleY(1.04)}60%{transform:scale(1.06,.94)}}
@keyframes dz-sway{0%,100%{transform:rotate(calc(-5deg*var(--amp,1)))}50%{transform:rotate(calc(5deg*var(--amp,1)))}}
@keyframes dz-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(calc(-7deg*var(--amp,1)))}75%{transform:rotate(calc(7deg*var(--amp,1)))}}
@keyframes dz-waddle{0%,100%{transform:translateX(calc(-5px*var(--amp,1))) rotate(-4deg)}50%{transform:translateX(calc(5px*var(--amp,1))) rotate(4deg)}}
@keyframes dz-squash{0%,100%{transform:none}50%{transform:scale(calc(1 + .08*var(--amp,1)),calc(1 - .08*var(--amp,1)))}}
@keyframes dz-shuffle{0%,100%{transform:translateX(0)}25%{transform:translateX(calc(-8px*var(--amp,1)))}75%{transform:translateX(calc(8px*var(--amp,1)))}}
@keyframes dz-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(calc(6deg*var(--amp,1))) translateY(3px)}}
@keyframes dz-spin{0%,100%{transform:rotate(calc(-8deg*var(--amp,1))) scaleX(1)}50%{transform:rotate(calc(8deg*var(--amp,1))) scaleX(-1)}}
@keyframes dz-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(calc(-10px*var(--amp,1))) scale(1.03,.97)}}
@keyframes dz-headbang{0%,100%{transform:rotate(0)}50%{transform:rotate(calc(-10deg*var(--amp,1))) translateY(4px)}}
@keyframes dz-strut{0%,100%{transform:translateY(0) rotate(-3deg)}25%{transform:translateY(calc(-8px*var(--amp,1))) rotate(0)}50%{transform:translateY(0) rotate(3deg)}75%{transform:translateY(calc(-8px*var(--amp,1))) rotate(0)}}
.seat.smug .char{animation:smug .7s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes smug{0%{transform:none}60%{transform:scale(1.6) rotate(-10deg)}100%{transform:scale(1.5) rotate(-8deg) translateY(-4px)}}
.seat.fallen .char{animation:fall .6s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes fall{0%{transform:none}30%{transform:rotate(-8deg)}100%{transform:perspective(500px) rotateX(-72deg) translateY(6px);filter:brightness(.75) drop-shadow(0 4px 4px #0006)}}
.smugwrap{display:flex;justify-content:center;height:130px;align-items:flex-end}
.smugimg{width:110px;transform-origin:50% 100%;animation:smug .7s cubic-bezier(.2,1.4,.4,1) forwards;filter:drop-shadow(0 8px 8px #0005)}
@media (max-width:600px){.smugwrap{height:110px}.smugimg{width:84px}}
@media (prefers-reduced-motion:reduce){.seat.dance .char{animation-duration:calc(var(--dd,.9s)*3)}.seat.smug .char,.smugimg,.seat.fallen .char{animation-duration:.01s}}
.yakupop{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:44;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;transition:opacity .3s}
.yakupop.out{opacity:0}
.yp{font:900 clamp(30px,4.4vw,56px) var(--serif);color:var(--ivory);letter-spacing:.08em;white-space:nowrap;text-shadow:0 3px 0 var(--wine),0 0 0 #000,0 0 18px #000c,0 0 2px #000;animation:ypop .26s cubic-bezier(.2,1.6,.4,1) both}
.yp small{font-size:.5em;margin-left:.4em;color:var(--gold)}
.yp.pts{color:#ffd77a;font-size:clamp(40px,6vw,76px)}.yp.ban{font-size:clamp(24px,3.2vw,40px)}.yp.ban b{color:#ffd77a}
@keyframes ypop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}

/* v16: fall = rigid 2D topple onto own discard pile (no rotateX squash), drawn above ponds/center */
#seats .seat.fallen{z-index:30}
.seat.fallen .char{animation:fall16 .6s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes fall16{0%{transform:none}30%{transform:rotate(calc(var(--fr,90deg)*-.1))}100%{transform:translate(var(--fx,0px),var(--fy,0px)) rotate(var(--fr,90deg));filter:brightness(.85) drop-shadow(0 6px 6px #0008)}}

/* v17 3D prototype (only with ?3d → html.cm3d). Default v16 look unchanged. */
.sh3d,.char>i{display:none}
.cm3d #seats .seat{perspective:600px;perspective-origin:50% 30%}
.cm3d .seat .char{position:relative;transform-style:preserve-3d;filter:none}
.cm3d .char>i{display:block;position:absolute;inset:0;background:inherit;background-size:contain;background-repeat:no-repeat;background-position:50% 100%;filter:brightness(.35) saturate(.6);pointer-events:none}
.cm3d .char>.ex1{transform:translateZ(-3px)}.cm3d .char>.ex2{transform:translateZ(-6px)}.cm3d .char>.ex3{transform:translateZ(-9px);filter:brightness(.2)}
.cm3d .char>b{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:50% 100%;transform:translateZ(1px);opacity:0;pointer-events:none}.cm3d .char>b.on{opacity:1;z-index:2;transition:opacity .13s linear}.cm3d .char>b.old{opacity:1;z-index:1}.cm3d .char:has(b){background-size:0 0}.cm3d .char:not(:has(b))::after{content:'';position:absolute;inset:0;background:inherit;background-size:contain;background-repeat:no-repeat;background-position:50% 100%;transform:translateZ(1px)}
.cm3d .sh3d{display:block;position:absolute;left:50%;top:calc(var(--chw,110px)*.9);width:calc(var(--chw,110px)*.7);height:calc(var(--chw,110px)*.16);transform:translateX(-50%);border-radius:50%;background:radial-gradient(#000a,#0000 70%);pointer-events:none;z-index:-1}
.cm3d .seat .char{--chw:clamp(110px,13vw,190px)}
.cm3d .seat{--chw:clamp(110px,13vw,190px)}
@media (max-width:600px){.cm3d .seat{--chw:92px}}
/* dance: body twist + bounce + tilt toward camera, no squash */
.cm3d .seat.dance .char{animation:d3 var(--dd,.9s) ease-in-out infinite}
.cm3d .seat.dance .sh3d{animation:sh3 var(--dd,.9s) ease-in-out infinite}
@keyframes d3{0%,100%{transform:rotateY(calc(-28deg*var(--amp,1))) rotateX(6deg) translateY(0)}25%{transform:rotateY(0) rotateX(12deg) translateY(calc(-12px*var(--amp,1))) translateZ(20px)}50%{transform:rotateY(calc(28deg*var(--amp,1))) rotateX(6deg) translateY(0)}75%{transform:rotateY(0) rotateX(12deg) translateY(calc(-12px*var(--amp,1))) translateZ(20px)}}
@keyframes sh3{0%,50%,100%{transform:translateX(-50%) scale(1);opacity:1}25%,75%{transform:translateX(-50%) scale(.7);opacity:.55}}
.cm3d .seat.wdance{--amp:1.8}
.cm3d .seat.wdance .char>b,.cm3d .seat.wdance .char::after{filter:drop-shadow(0 0 8px #ffd77a) drop-shadow(0 0 3px #ffd77a)}
/* win: 1.5x with 3D lean back, looking down */
.cm3d .seat.smug .char{animation:smug3 .7s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes smug3{0%{transform:none}60%{transform:scale(1.6) rotateY(-24deg) rotateX(-14deg)}100%{transform:scale(1.5) rotateY(-18deg) rotateX(-12deg) rotateZ(-5deg)}}
.cm3d .seat.smug .sh3d{transform:translateX(-50%) scale(1.5)}
/* ron fall: toward pond (2D aim from v16) + forward topple into depth */
.cm3d .seat.fallen .char{animation:fall3 .7s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes fall3{0%{transform:none}30%{transform:rotateX(12deg) rotateZ(calc(var(--fr,90deg)*-.08))}100%{transform:translate(var(--fx,0px),var(--fy,0px)) rotateZ(var(--fr,90deg)) rotateY(calc(var(--fr,90deg)*-.4)) rotateX(10deg)}}
.cm3d .seat.fallen .sh3d{opacity:0}
.cm3d .seat.fallen .char>b,.cm3d .seat.fallen .char::after{filter:drop-shadow(0 8px 6px #000a)}
.cm3d .seat.dance:not(.flat3) .char{animation-name:d3p}
@keyframes d3p{0%,50%,100%{transform:rotateX(6deg) translateY(0)}25%,75%{transform:rotateX(10deg) translateY(calc(-12px*var(--amp,1))) translateZ(16px)}}

/* v19: solid 3D fall onto own discards — extruded thickness, lays into the table plane (rotateX), impact squash, floor shadow */
.cm3d .seat.fallen .char{animation:fall19 .8s cubic-bezier(.5,0,.75,.35) forwards;transform-origin:50% 100%}
.cm3d .seat.fallen .char>.ex1{transform:translateZ(-5px)}.cm3d .seat.fallen .char>.ex2{transform:translateZ(-10px)}.cm3d .seat.fallen .char>.ex3{transform:translateZ(-15px)}
.cm3d .seat.fallen .char::before{content:'';position:absolute;left:8%;right:8%;bottom:-4%;height:22%;border-radius:50%;background:radial-gradient(#000c,#0000 70%);transform:translateZ(-18px) scale(1.25,1.6);opacity:0;animation:fsh19 .8s ease-in forwards;pointer-events:none}
@keyframes fall19{
 0%{transform:none}
 25%{transform:rotateX(16deg) rotateZ(calc(var(--fr,90deg)*-.07))}
 70%{transform:translate(var(--fx,0px),var(--fy,0px)) rotateZ(var(--fr,90deg)) rotateX(24deg) scale(1,1)}
 82%{transform:translate(var(--fx,0px),calc(var(--fy,0px) - 7px)) rotateZ(var(--fr,90deg)) rotateX(16deg) scale(.9,1.08)}
 100%{transform:translate(var(--fx,0px),var(--fy,0px)) rotateZ(var(--fr,90deg)) rotateX(20deg) scale(.95,1.02)}}
@keyframes fsh19{0%,60%{opacity:0}100%{opacity:1}}
.cm3d .seat.fallen .char>b,.cm3d .seat.fallen .char::after{filter:brightness(.92) drop-shadow(0 14px 8px #000b)}
#hand .c.ng{filter:brightness(.45) grayscale(.5);cursor:not-allowed}
/* v20 riichi declaration card: always sideways (90°) + red リーチ badge, player and CPUs, whole hand */
.pond .c.riichi,.pond.opp .c.riichi{transform:rotate(90deg)!important;margin:0 calc(var(--pw)*.22)!important;position:relative;z-index:3!important;filter:drop-shadow(0 0 0 #D8273F) drop-shadow(0 0 3px #FF4A5E) drop-shadow(0 3px 3px #0008)!important;animation:none!important}
.pond .c.riichi.riichi::after{content:'リーチ'!important;position:absolute;left:0;top:50%;transform:translate(-50%,-50%) rotate(-90deg);background:#D8273F;color:#fff;font:900 clamp(7px,calc(var(--pw)*.24),10px)/1.1 system-ui,sans-serif;padding:2px 4px;border-radius:4px;border:1.5px solid #fff;white-space:nowrap;box-shadow:0 1px 3px #0009;pointer-events:none}
/* v20 winner's hand revealed face-up at the call, enlarged */
.winReveal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);z-index:60;background:#0b1a14e6;border:2px solid #E8C770;border-radius:14px;padding:8px 10px 10px;box-shadow:0 8px 30px #000c;animation:wrIn .35s ease-out forwards;pointer-events:none;max-width:96vw}
.winReveal.wrFocus::after{content:"タップで次へ";display:block;text-align:center;color:#FFE9A8aa;font:600 11px system-ui;margin-top:6px}
.winReveal.pos-bottom{top:62%}.winReveal.pos-top{top:34%}
.winReveal .wrT{color:#FFE9A8;font:900 16px/1.2 system-ui,sans-serif;text-align:center;margin-bottom:6px;letter-spacing:.1em}
.winReveal .wrH{display:flex;gap:3px;align-items:flex-end;justify-content:center}
.winReveal .c{width:clamp(30px,9vw,62px);filter:drop-shadow(0 3px 3px #0009)}
.winReveal .wrGap{width:8px}
.winReveal .c.wrWin{transform:translateY(-8px) scale(1.12);outline:3px solid #FF4A5E;border-radius:8%;box-shadow:0 0 14px 4px #FF4A5Ecc}
@keyframes wrIn{to{transform:translate(-50%,-50%) scale(1.05)}}
/* v21 opponent discards: no overlap (cell = card width + gap); riichi sideways card gets its own 2-cell slot so it never covers neighbours */
.pond.opp{grid-template-columns:repeat(var(--cols,8),calc(var(--pw) + 3px))!important;column-gap:0!important;row-gap:3px!important;padding-right:0!important}
.pond.opp .c.riichi{grid-column:span 2;justify-self:center;margin:0!important}
.pond:not(.opp) .c.riichi{grid-column:span 2;justify-self:center;margin:0!important}
@media (max-width:600px){
 .pond.opp[data-pos=left],.pond.opp[data-pos=right]{--pw:27px;width:34%;top:32%}
 .pond.opp[data-pos=left]{left:4%}.pond.opp[data-pos=right]{right:4%}
 .pond[data-pos=bottom]{--pw:25px;grid-template-columns:repeat(var(--cols,8),calc(var(--pw) + 2px))!important;grid-auto-rows:calc(var(--pw)*1.4 + 2px)!important;padding-right:0!important}}
/* v22: every pond (own + opponents, PC + phone) uses non-overlapping cells; sideways riichi card gets a 2-cell slot with clear space all round */
.pond,.pond.dense,.pond.opp{grid-template-columns:repeat(var(--cols,8),calc(var(--pw) + 4px))!important;grid-auto-rows:calc(var(--pw)*1.4 + 4px)!important;column-gap:0!important;row-gap:0!important;padding:0!important}
.pond .c{justify-self:center;align-self:center}
.pond .c.riichi,.pond.opp .c.riichi{grid-column:span 2!important;justify-self:center!important;align-self:center!important;margin:0!important}
@media (min-width:601px){.pond[data-pos=bottom],.pond.dense[data-pos=bottom]{--pw:36px}}
/* v22 対局スタート banner */
.startfx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:80;pointer-events:none;background:radial-gradient(ellipse at center,#0009 0,#0000 70%)}
.startfx .sfx-in{text-align:center;padding:14px 46px;border-top:3px solid #E8C770;border-bottom:3px solid #E8C770;background:linear-gradient(90deg,#0000,#672D49ee 20%,#672D49ee 80%,#0000);animation:sfxIn .5s cubic-bezier(.2,1.4,.4,1) both}
.startfx small{display:block;color:#E8C770;font:700 clamp(11px,2.6vw,16px)/1.4 system-ui,sans-serif;letter-spacing:.4em}
.startfx b{display:block;color:#FFF3D0;font:900 clamp(34px,9vw,72px)/1.1 'Noto Serif JP',serif;letter-spacing:.12em;text-shadow:0 0 18px #E8C770,0 3px 0 #0008}
.startfx.out{transition:opacity .35s;opacity:0}
@keyframes sfxIn{0%{transform:scale(2.2);opacity:0;filter:blur(6px)}100%{transform:scale(1);opacity:1;filter:none}}
@media (max-width:600px){.pond.opp[data-pos=left],.pond.opp[data-pos=right]{--pw:23px!important;top:31%}.pond.opp[data-pos=left]{left:2%}.pond.opp[data-pos=right]{right:2%;left:auto}}
.optRow.bgmRow{flex-wrap:wrap;gap:6px}.optRow.bgmRow .optBgm{padding:6px 10px;min-width:0}.optRow.bgmRow .optBgm b{font-size:12px}
/* v24: lobby panel transparent so background art shows */
#top .panel,#top .panel.picker,#top .picker{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
#top .panel label,#top .panel .optH,#top .panel .practice>span,#top .panel .lbl,#top .panel .seglabel{color:#fff8e6!important;text-shadow:0 1px 2px #000,0 0 6px #000c}
#top .panel input{background:#fffaf0f2}
#top .panel hr,#top .panel .sep{border-color:#f5e3b480}
#top .panel .seg>span,#top .panel .fine,#top .panel .name{color:#fff8e6!important;text-shadow:0 1px 2px #000,0 0 6px #000c}
#hand .c.rdraw{box-shadow:0 0 0 3px #E8C770,0 0 14px #E8C770aa;border-radius:8%;z-index:5}
#top .brand h1,#top .brand h1 small,#top .brand .lead,#top>p,#top .foot{color:#fff8e6!important;text-shadow:0 2px 3px #000,0 0 10px #000d!important}
/* v25 title: fan sits above the title, never overlaps text */
#top .card-fan{flex:0 0 auto;height:118px;width:280px;margin:4px 0 14px;z-index:0}
#top .card-fan .c{width:66px;filter:drop-shadow(0 4px 6px #0007)}
#top .brand{position:relative;z-index:1}
#top .brand .seal{display:none}
#top .brand h1{margin-top:0}
#top .brand .lead{display:inline-block;margin-top:10px;padding:5px 16px;border-radius:999px;background:#1a0f0a8c;backdrop-filter:blur(3px);letter-spacing:.06em;font-size:15px}
@media (max-width:480px){#top .card-fan{height:96px;width:230px}#top .card-fan .c{width:54px}#top .brand .lead{font-size:12.5px;padding:4px 12px}}
#top{justify-content:flex-start!important;padding-top:max(26px,env(safe-area-inset-top))!important}
/* v26: bottom-left drawn-card slot removed (overlapped name) */
#slot,.slot{display:none!important}
/* v27: winning-hand reveal (any winner, CPU included) shown big and centred before yaku list */
.winReveal.wrFocus{top:46%!important;left:50%!important;transform:translate(-50%,-50%) scale(1)!important;z-index:95;animation:none;padding:12px 14px 14px}
.winReveal.wrFocus .wrT{font-size:20px}
@media (max-width:600px){.winReveal.wrFocus .c{width:clamp(26px,10.5vw,44px)}}
/* v27 turn clock / time bank */
.clock{display:none}
.clock.on{display:flex;position:absolute;right:max(70px,8vw);bottom:calc(100% + 6px);align-items:center;gap:6px;padding:4px 12px 6px;border-radius:999px;background:#0b1a14e6;border:1.5px solid #E8C770;color:#FFE9A8;font:700 12px/1 var(--serif);z-index:40;overflow:hidden;box-shadow:0 3px 10px #0008}
.clock b{font:900 18px/1 system-ui,sans-serif;min-width:22px;text-align:center}
.clock small{opacity:.8;font-size:11px}
.clock i{position:absolute;left:0;bottom:0;height:3px;background:#E8C770;transition:width .2s linear}
.clock.bank{border-color:#FF4A5E;color:#fff;background:#4a0d18ee;animation:clkPulse 1s infinite}
.clock.bank i{background:#FF4A5E}
@keyframes clkPulse{50%{box-shadow:0 0 14px 3px #FF4A5Eaa}}
@media (max-width:600px){.clock.on{right:8px;font-size:11px;padding:3px 9px 5px}.clock b{font-size:15px}}
/* v27 furiten notice (shown only after choosing a furiten riichi discard) */
#actions .furiten{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:min(520px,92vw);padding:8px 14px;border-radius:12px;background:#4a0d18f0;border:2px solid #FF4A5E;color:#fff;box-shadow:0 0 14px #FF4A5E88;animation:clkPulse 1s 2}
#actions .furiten b{font:900 22px/1 var(--serif);letter-spacing:.3em;color:#FFD0D6}
#actions .furiten span{font:600 12.5px/1.5 system-ui,sans-serif;text-align:center}
#actions{flex-wrap:wrap;justify-content:center}
/* v27: dora display 1.4x */
#doraCard.mini{width:calc(var(--cw)*.8*1.4)!important}

/* v28: cycling China backgrounds (time of day / weather / season) */
#bg.cycling{background:#1b2230!important}
#bg .cyc{position:absolute;inset:-9%;background:center/cover no-repeat;opacity:0;will-change:opacity,transform;animation-name:cyc;animation-timing-function:linear;animation-iteration-count:infinite;display:none}
#bg.cycling .cyc{display:block}
#bg::after{z-index:2}
@keyframes cyc{0%{opacity:0;transform:scale(1.16) translate3d(-4.5%,1.6%,0)}4%{opacity:1}10%{opacity:1}14%{opacity:0;transform:scale(1.02) translate3d(4.5%,-1.6%,0)}100%{opacity:0;transform:scale(1.02) translate3d(4.5%,-1.6%,0)}}
#bg .cyc>i{position:absolute;inset:0;pointer-events:none}
#bg .fx-rain>i{background:repeating-linear-gradient(105deg,#fff0 0 9px,#ffffff26 9px 10px,#fff0 10px 23px);background-size:160px 160px;animation:rain .7s linear infinite;opacity:.55}
@keyframes rain{to{background-position:-40px 160px}}
#bg .fx-snow>i{background-image:radial-gradient(2px 2px at 20px 30px,#fffd 50%,#0000),radial-gradient(3px 3px at 90px 110px,#fffc 50%,#0000),radial-gradient(2px 2px at 150px 60px,#fffb 50%,#0000),radial-gradient(2.5px 2.5px at 60px 170px,#fffc 50%,#0000);background-size:200px 200px;animation:snow 9s linear infinite;opacity:.8}
@keyframes snow{to{background-position:40px 400px,-30px 400px,20px 400px,-10px 400px}}
#bg .fx-storm>i{background:#e8ecff;opacity:0;animation:flash 9s linear infinite;mix-blend-mode:screen}
@keyframes flash{0%,62%,64.5%,66%,100%{opacity:0}63%{opacity:.22}65%{opacity:.14}}

/* v28.1: characters stay visible on bright/pale cycling backgrounds (hedgehog blended into dawn scenes) */
.cm3d .seat .char>b{filter:drop-shadow(0 0 1.5px #1a1208e6) drop-shadow(0 0 6px #0008) drop-shadow(0 8px 8px #0007)}
.seat:not(.flat3) .char{isolation:isolate}
/* v29b: yaku list — han value clearly separated from ドラN */
.yakupop .yp small{margin-left:.7em;padding-left:.5em;border-left:2px solid #E8C77066}
/* v29b: records + 手裏剣トランプ overlays */
.xov{position:fixed;inset:0;z-index:300;background:#05090fcc;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif;color:#F1E8D0}
.xclose{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid #E8C77088;background:#101C2Dcc;color:#FFE9A8;font-size:24px;cursor:pointer;z-index:5}
.rec .xbox{position:relative;width:min(760px,94vw);max-height:90vh;overflow:auto;background:linear-gradient(#162636,#0d1824);border:2px solid #C6A45B;border-radius:16px;padding:18px 18px 22px;box-shadow:0 20px 60px #000c}
.rec h2{margin:0 0 12px;font:900 26px var(--serif,serif);color:#FFE9A8;letter-spacing:.2em}.rec h3{margin:18px 0 6px;color:#E8C770;font-size:15px;border-bottom:1px solid #C6A45B55;padding-bottom:4px}
.rec .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.rec .stats div{background:#0b1a14;border:1px solid #C6A45B44;border-radius:10px;padding:7px 9px}
.rec .stats small{display:block;font-size:11px;color:#c9b98f}.rec .stats b{font-size:19px;color:#FFE9A8}
.rec table{width:100%;border-collapse:collapse;font-size:13px}.rec td{padding:5px 6px;border-bottom:1px solid #ffffff12}.rec .fine{color:#a9a08a;font-size:11.5px}
.rec .xlog{list-style:none;margin:0;padding:0;font-size:13px;max-height:220px;overflow:auto}.rec .xlog li{padding:4px 2px;border-bottom:1px solid #ffffff10}.rec .pos{color:#7fe0a6}.rec .neg{color:#ff7d8f}
.shk{background:#04070c}
.shkArena{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#3a1f2c 0%,#160d18 55%,#05070b 100%)}
.shkSky{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff05 0 2px,transparent 2px 60px);animation:shkSky 8s linear infinite}@keyframes shkSky{to{background-position:240px 0}}
.shkHud{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;z-index:4;width:min(640px,80vw);justify-content:space-between}
.shkHud .hp{display:flex;gap:4px;align-items:center;font-size:13px;font-weight:700}.shkHud .hp span{margin-right:4px;max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shkHud .hp i{width:16px;height:16px;border-radius:50%;background:#E8C770;box-shadow:0 0 8px #E8C770aa;transition:.2s}.shkHud .hp i.x{background:#3a2b2b;box-shadow:none}
.shkHud .tmr{font:900 34px/1 var(--serif,serif);color:#FFE9A8;min-width:52px;text-align:center;text-shadow:0 2px 10px #000}.shkHud .tmr.low{color:#ff6b7f;animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.15)}}
.shkTable{position:absolute;left:50%;top:15%;width:min(420px,70vw);margin-left:calc(min(420px,70vw)/-2);height:34%;transition:transform .08s linear}
.shkTable .felt{position:absolute;left:0;right:0;bottom:0;height:34%;border-radius:50% 50% 14px 14px/40% 40% 14px 14px;background:linear-gradient(#8a2c48,#4d1a2c);border:3px solid #C6A45B;box-shadow:0 14px 26px #000a,inset 0 4px 18px #0007}
.shkTable .opp{position:absolute;left:50%;bottom:22%;width:46%;transform:translateX(-50%);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.shkTable .opp img,.shkMe img{width:100%;display:block;filter:drop-shadow(0 0 2px #000) drop-shadow(0 8px 10px #000a)}
.shkTable .opp.dl{transform:translateX(-125%) rotate(-12deg)}.shkTable .opp.dr{transform:translateX(25%) rotate(12deg)}.shkTable .opp.dc{transform:translateX(-50%) translateY(45%) scaleY(.7)}
.shkMe{position:absolute;left:50%;bottom:15%;width:min(200px,38vw);transform:translateX(-50%);transition:transform .2s cubic-bezier(.3,1.6,.5,1);z-index:2}
.shkMe.dl{transform:translateX(-150%) rotate(-14deg)}.shkMe.dr{transform:translateX(50%) rotate(14deg)}.shkMe.dc{transform:translateX(-50%) translateY(38%) scaleY(.62)}
.shkMe.thr img,.opp.thr img{animation:thr .2s}@keyframes thr{50%{transform:translateY(-8%) rotate(-6deg)}}
.hit img{animation:hitk .45s}@keyframes hitk{0%,100%{filter:none}20%,60%{filter:brightness(2.4) sepia(1) hue-rotate(-40deg) saturate(5)}40%{transform:translateX(-6%)}80%{transform:translateX(6%)}}
.shkCard{position:absolute;left:0;top:0;width:clamp(34px,7vw,52px);z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px #fff6) drop-shadow(0 6px 6px #000a)}.shkCard svg{width:100%;display:block}
.shkCard.ace{filter:drop-shadow(0 0 10px #ffd86b) drop-shadow(0 6px 8px #000a)}.shkCard.miss{opacity:0;transition:opacity .3s}
.shkBoom{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(#fff 0,#ffd86b 25%,#ff4a5e55 55%,transparent 70%);animation:boom .6s ease-out forwards;z-index:4;pointer-events:none}@keyframes boom{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}
.shkCtl{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:18px;z-index:4}
.shkCtl .btn{min-width:130px;padding:14px 18px;font-size:18px}
.shkMsg{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#05090fd9;text-align:center;padding:20px}
.shkMsg.hide{display:none}.shkMsg h2{font:900 clamp(30px,7vw,52px) var(--serif,serif);margin:0;color:#FFE9A8;letter-spacing:.15em;text-shadow:0 0 24px #E8C77088}.shkMsg h2.lose{color:#ff8a9a}.shkMsg p{max-width:420px;line-height:1.7}
.xentry{display:flex;gap:8px;margin-top:8px}.xentry .btn{flex:1}

/* v29b: loser falls FORWARD in place (true 3D: perspective + rotateX toward the viewer), thud bounce, ground shadow that spreads on the floor */
html .seat.fallen{perspective:340px;perspective-origin:50% -30%}
html .seat.fallen .char,html.cm3d .seat.fallen .char{transform-origin:50% 100%!important;animation:fall29 .75s cubic-bezier(.55,0,.85,.35) forwards!important}
@keyframes fall29{
 0%{transform:none}
 20%{transform:rotateX(-7deg) translateY(-3px)}
 72%{transform:rotateX(-64deg)}
 82%{transform:rotateX(-55deg)}
 91%{transform:rotateX(-63deg)}
 100%{transform:rotateX(-60deg)}}
html .seat.fallen .char>b,html.cm3d .seat.fallen .char>b,html.cm3d .seat.fallen .char::after{filter:brightness(.82) drop-shadow(0 -2px 3px #0007)!important}
html .seat.fallen .sh3d{opacity:0!important}
html .seat.fallen .char::before,html.cm3d .seat.fallen .char::before{display:none!important}
html .seat.fallen .char>[class^=ex]{display:none!important}
html .seat .gsh29{position:absolute;width:110px;height:30px;margin:-15px 0 0 -55px;border-radius:50%;background:radial-gradient(ellipse,#000d 0%,#0009 40%,#0000 70%);pointer-events:none;z-index:-1;transform-origin:50% 30%;animation:fsh29 .75s ease-in forwards}
@keyframes fsh29{0%{opacity:.35;transform:scale(.55,.4)}70%{opacity:.6;transform:translateY(10px) scale(1.1,1.8)}100%{opacity:.95;transform:translateY(14px) scale(1.25,2.3)}}
.seat.thud{animation:thud29 .35s ease-out}
@keyframes thud29{0%{translate:0 0}30%{translate:0 5px}60%{translate:0 -1px}100%{translate:0 0}}

/* v29c: brief tilt, then swap to a dedicated fallen (face-down) 3D image with its own ground shadow */
html .seat.fallen .char,html.cm3d .seat.fallen .char{animation:tilt29c .38s cubic-bezier(.5,0,.9,.5) forwards!important}
@keyframes tilt29c{0%{transform:none}100%{transform:rotateX(-38deg) translateY(4px)}}
html .seat.fallen.down .char{visibility:hidden!important}
.seat .fallImg{position:absolute;transform:translate(-50%,-78%);pointer-events:none;z-index:2;animation:land29c .38s cubic-bezier(.3,1.6,.5,1) both}
@keyframes land29c{0%{transform:translate(-50%,-78%) scale(.9,1.25);opacity:.4}45%{transform:translate(-50%,-78%) scale(1.08,.88);opacity:1}100%{transform:translate(-50%,-78%) scale(1,1)}}
/* v29d: モーダルのボタンは常に見える位置に固定（短い画面で「次局へ/やめる」が下に隠れない） */
.mbox .mbtn{position:sticky;bottom:-22px;width:100%;padding:10px 0 6px;margin-top:auto;background:linear-gradient(#0000,var(--paper) 30%);flex-shrink:0}
.mbox.dragon .mbtn{background:linear-gradient(#0000,#101010f0 30%)}
@media (max-width:600px){.mbox .mbtn{bottom:-14px}}

/* v29e: 勝利画面にドラ／裏ドラ（ヒット枚数つき） */
.mbox .doraRow{display:flex;gap:22px;justify-content:center;align-items:flex-start;margin:2px 0}
.mbox .dr{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px}
.mbox .dr>span{font:900 13px var(--serif);letter-spacing:.18em;color:#ffd77a;text-shadow:0 1px 0 #7a1020}
.mbox .dr .c{position:static!important;transform:none!important;width:46px;margin:0}
.mbox .dr>b{font:700 12px var(--serif);color:#d8cfb8}.mbox .dr>b.hit{color:#ffd77a}
.mbox .dr.ura .c{animation:uraFlip29e .7s .15s both}
@keyframes uraFlip29e{0%{transform:rotateY(90deg) scale(.8)!important;opacity:0}100%{transform:none!important;opacity:1}}

/* v29e compact: ドラ列を手牌のすぐ下へ。小さい画面は横並びで低く */
.mbox .doraRow{margin:6px 0 2px;gap:14px}
@media (max-width:600px){.mbox .doraRow{gap:8px}.mbox .dr{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:5px;min-width:0;flex:1;max-width:48%;background:#0003;border:1px solid #e8c77044;border-radius:10px;padding:4px 6px}
.mbox .dr>span{flex:0 0 100%;text-align:center;font-size:12px;letter-spacing:.1em}.mbox .dr .c{width:30px}.mbox .dr>b{font-size:11px;align-self:center}}

/* v29e: the in-play background moves. Slow Ken-Burns drift for fixed backgrounds, a stronger drift for 巡る中国,
   plus drifting mist and rising lantern sparks. All transform-only (GPU), pointer-events none, below the vignette. */
#bg .kb{position:absolute;inset:-9%;background:center/cover no-repeat;will-change:transform;animation:kb29e 26s ease-in-out infinite alternate;pointer-events:none}
#bg.cycling .kb{display:none}
@keyframes kb29e{from{transform:scale(1.02) translate3d(-3.5%,1.2%,0)}to{transform:scale(1.14) translate3d(3.5%,-1.6%,0)}}
#bg .amb{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
#bg .amb i{position:absolute;pointer-events:none;will-change:transform}
#bg .mist{left:-30%;top:8%;width:160%;height:46%;background:radial-gradient(ellipse at 30% 50%,#fff3 0,#fff0 62%),radial-gradient(ellipse at 72% 40%,#ffe9c433 0,#fff0 58%);animation:mist29e 30s ease-in-out infinite alternate;opacity:.9}
#bg .mist.m2{top:48%;height:40%;background:radial-gradient(ellipse at 60% 50%,#cfe4ff2e 0,#fff0 60%),radial-gradient(ellipse at 20% 40%,#fff2 0,#fff0 55%);animation-duration:38s;animation-direction:alternate-reverse}
@keyframes mist29e{from{transform:translate3d(-9%,0,0)}to{transform:translate3d(9%,3%,0)}}
#bg .spark{left:0;right:0;top:0;height:calc(100% + 960px);background-image:radial-gradient(2.5px 2.5px at 30px 40px,#ffd98bf0 55%,#0000),radial-gradient(2px 2px at 140px 160px,#ffc86bd0 55%,#0000),radial-gradient(3px 3px at 210px 90px,#fff0c8e0 55%,#0000),radial-gradient(2px 2px at 80px 210px,#ffb35ad0 55%,#0000);background-size:240px 240px;opacity:.7;animation:rise29e 44s linear infinite}
#bg .spark.s2{background-size:180px 180px;opacity:.45;animation-duration:30s;animation-name:rise29f}
@keyframes rise29e{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-960px,0)}}
@keyframes rise29f{from{transform:translate3d(0,-720px,0)}to{transform:translate3d(0,0,0)}}
/* Reduce Motion: keep it alive but 4x slower and with less travel, no sparks */
@media (prefers-reduced-motion:reduce){#bg .kb{animation-duration:80s}#bg .spark{display:none}#bg .mist{animation-duration:90s}#bg .mist.m2{animation-duration:110s}#bg .cyc>i{animation:none}}
@media (max-width:600px){#bg .kb{animation-duration:30s}#bg .spark.s2{display:none}}

/* v29g hotfix: the top / waiting screens scroll vertically on touch devices (content grew past the viewport in v29e/f); #bg stays position:fixed behind. */
#top,#wait{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 28px))!important;justify-content:flex-start!important}
#top>*,#wait>*{flex-shrink:0}
#top .card-fan,#top .brand,#top .panel{touch-action:pan-y}

/* v29g: top-page fan = J Q K + sideways Ace (riichi style), centred as a group */
#top .card-fan{--cw:66px}
@media (max-width:480px){#top .card-fan{--cw:54px}}
#top .card-fan .fanJ{left:calc(50% - var(--cw)*.62 - 9px)}
#top .card-fan .fanA{left:calc(50% + var(--cw)*1.18 - 9px);transform:translateX(-50%) rotate(90deg);transform-origin:50% 50%;bottom:calc(var(--cw)*-.2)}

/* v29h: dice spin in place */
.dice .dcol{text-align:center;font-size:14px}
.die.spin{animation:dieSpin .42s linear infinite;will-change:transform}
@keyframes dieSpin{to{transform:rotate(360deg)}}
.die.land{animation:dieLand .28s ease-out}
@keyframes dieLand{0%{transform:rotate(14deg) scale(1.14)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.die.spin{animation-duration:1.2s}}

/* v29h: cross-link to ソロポーカー */
.xlinkSP{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 16px;min-height:58px;border-radius:12px;text-decoration:none;color:var(--ivory)!important;border:1px solid var(--gold);background:linear-gradient(180deg,#5a3a24,#3a2314);box-shadow:0 0 0 1px #0008,0 4px 10px #0006}
.xlinkSP:active{filter:brightness(1.12)}
.xlinkSP .xi{flex:0 0 auto;width:54px;height:40px}
.xlinkSP .xt{flex:1;display:grid;gap:2px;line-height:1.25;text-align:left}
.xlinkSP .xt b{font:900 18px var(--serif);letter-spacing:.1em;color:#FFE9A8}
.xlinkSP .xt small{font-size:11.5px;color:#f1e8d0cc}
.xlinkSP .xg{flex:0 0 auto;font-size:24px;color:var(--gold)}

/* v30: online lobby / invite / toast */
.waitbox .invite{width:100%;display:grid;gap:6px;text-align:left}.waitbox .invite small{font-size:12px;color:var(--bronze)}
.waitbox .invite input,.joinbox input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--bronze);border-radius:8px;background:#fffaf0;font:600 13px system-ui,sans-serif;color:var(--ink)}
.invbtn{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.invbtn .btn{flex:1;min-width:120px}
#roomList li.empty{opacity:.55;border-style:dashed}#roomList li.empty em{color:var(--bronze)}
#btnInvite{margin-top:0}
.xtoast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,12px);max-width:min(92vw,420px);padding:10px 16px;border-radius:12px;background:#101c2df2;color:#fff8e6;border:1px solid var(--gold);font:600 14px/1.5 system-ui,sans-serif;z-index:900;opacity:0;pointer-events:none;transition:.25s}.xtoast.on{opacity:1;transform:translate(-50%,0)}
.joinbox{background:var(--paper,#f5f0e4);color:var(--ink,#222);border:2px solid var(--gold);border-radius:18px;padding:24px;width:min(420px,92vw);display:grid;gap:12px;text-align:center}.joinbox h2{font:900 26px var(--serif);letter-spacing:.2em;color:var(--wine,#8a2a40);margin:0}.joinbox label{display:grid;gap:4px;text-align:left;font-size:13px}

/* v30: compact top screen + illustrated entry tiles + guide */
#top{overflow-y:auto;overflow-x:hidden;gap:10px;padding:14px 20px calc(20px + env(safe-area-inset-bottom))}
#top .card-fan{margin-top:auto;height:96px;margin-bottom:6px}
#top .panel{margin-bottom:auto;gap:8px;padding:10px 16px}
#top .panel .btn{padding:9px 16px;font-size:19px}
#top .panel .btn small{font-size:11.5px}
#top .brand h1{font-size:clamp(34px,9vw,52px)}
.xentry{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.xtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px 8px;border-radius:14px;border:1px solid var(--gold);background:linear-gradient(180deg,#3b2a3a,#1d1626);color:var(--ivory);font-family:var(--serif);cursor:pointer;box-shadow:0 0 0 1px #0008,0 4px 10px #0006;min-width:0}
#btnShk.xtile{background:linear-gradient(180deg,#27384a,#121c2a)}
.xtile:active{filter:brightness(1.15)}
.xtile .xart{display:block;width:74px;height:50px}.xtile .xart svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px #0008)}
.xtile b{font:900 17px/1.25 var(--serif);letter-spacing:.06em;color:#FFE9A8;white-space:nowrap}
.xtile small{font:600 11px/1.3 system-ui,sans-serif;color:#f1e8d0cc;white-space:nowrap}
@media(max-width:340px){.xtile b{font-size:15px;letter-spacing:.02em}.xtile small{font-size:10px}.xtile .xart{width:62px;height:42px}}
.xlinkSP.xguide{width:100%;font:inherit;cursor:pointer;margin-top:0;min-height:50px;padding:6px 16px;background:linear-gradient(180deg,#3b4d3f,#223127)}
.xlinkSP .xi svg{width:100%;height:100%;display:block}
.hudr .hico{padding:3px 5px;width:38px;height:30px;display:inline-flex;align-items:center;justify-content:center}.hudr .hico svg{width:100%;height:100%}
.hudr .btn.sm{padding:6px 9px;font-size:13px}.hudr .btn.sm.hico{padding:2px 4px}
/* guide */
.gov{z-index:400}
.gbox{position:relative;width:min(560px,96vw);height:min(92vh,92dvh);display:flex;flex-direction:column;background:linear-gradient(#162636,#0d1824);border:2px solid #C6A45B;border-radius:16px;box-shadow:0 20px 60px #000c;overflow:hidden}
.gtabs{display:flex;gap:6px;padding:12px 56px 8px 12px}
.gtabs button{flex:1;padding:9px 4px;border-radius:10px;border:1px solid #C6A45B88;background:#101C2D;color:#F1E8D0;font:800 15px var(--serif);letter-spacing:.06em;cursor:pointer}
.gtabs button.on{background:linear-gradient(#cf4566,#8a2a40);border-color:#FFE9A8;color:#fff}
.gbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 10px;font:500 15px/1.75 system-ui,'Noto Sans CJK JP',sans-serif}
.gbody h3{font:900 21px var(--serif);color:#FFE9A8;letter-spacing:.08em;margin:2px 0 8px}
.gbody h4{font:900 17px var(--serif);color:#FFE9A8;letter-spacing:.06em;margin:4px 0 6px}
.gbody h4.gh{margin:18px 0 8px;padding-bottom:4px;border-bottom:1px solid #C6A45B77}
.gsn{font-size:12px;color:#C6A45B;letter-spacing:.1em}
.gimg{margin:6px 0 10px;text-align:center}.gimg img{max-width:100%;max-height:400px;height:auto;width:auto;border-radius:12px;border:1px solid #C6A45B88;box-shadow:0 4px 14px #000a}
.gl{padding-left:1.3em;display:grid;gap:6px;margin:6px 0}.gtxt p{margin:6px 0}
.gnote{font-size:13px;color:#f1e8d0b3;margin:6px 0}
.gform{padding:8px 10px;background:#0a121c;border:1px dashed #C6A45B99;border-radius:10px;margin:6px 0;color:#FFE9A8}
.gcard1,.gy{background:#0f1c2b;border:1px solid #C6A45B55;border-radius:12px;padding:10px 12px;margin:8px 0}
.gyh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.gyh b{font:900 18px var(--serif);color:#FFE9A8}.gyh span{font:800 14px system-ui;color:#fff;background:#8a2a40;border-radius:999px;padding:1px 10px;white-space:nowrap}
.gy p{margin:4px 0}
.gex{margin-top:6px;padding:8px;background:#071019;border-radius:10px;overflow-x:auto}.gex small{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:#f1e8d0d9}
.grow{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.gplus{color:#C6A45B;font-weight:900;padding:0 3px}
.gt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:30px;height:40px;border-radius:5px;background:#fffaf0;border:1px solid #C6A45B;font-style:normal;line-height:1;box-shadow:0 1px 2px #0008}
.gt b{font:900 17px/1 system-ui,sans-serif}.gt u{text-decoration:none;font:700 10px/1 var(--serif);margin-top:2px}
.gt.w{box-shadow:0 0 0 2px #FFE9A8,0 0 8px #FFE9A8}.gkan{display:inline-flex;gap:1px;margin-right:5px;padding-right:5px;border-right:1px solid #C6A45B}
.gtbl{overflow-x:auto}.gtbl table{border-collapse:collapse;width:100%;font-size:15px;text-align:center}.gtbl th,.gtbl td{border:1px solid #C6A45B44;padding:6px 4px}.gtbl th{background:#1b2d42;color:#FFE9A8;font-weight:800;white-space:nowrap}.gtbl td{font-variant-numeric:tabular-nums}
.gnav{display:flex;align-items:center;gap:6px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #C6A45B55;background:#0a121c}
.gnav .btn.sm{padding:9px 12px;font-size:14px;min-width:64px}.gnav .btn[disabled]{opacity:.35}
.gdots{flex:1;display:flex;gap:5px;justify-content:center}.gdots i{width:7px;height:7px;border-radius:50%;background:#f1e8d033}.gdots i.on{background:#FFE9A8}
.gjump{display:grid;gap:10px;margin-top:10px}.gjump button{padding:12px;border-radius:12px;border:1px solid #C6A45B;background:#1b2d42;color:#FFE9A8;font:800 16px var(--serif);cursor:pointer}
#hudInfo{white-space:nowrap;font-size:13px;padding:5px 10px}
.hudr{gap:4px}
.hudr .btn.sm.hico{width:34px;height:30px;padding:2px 3px;background:#101c2de6;border:1px solid #C6A45B}
.hudr .btn.sm{padding:6px 8px;font-size:12.5px;white-space:nowrap}.hudr .btn.sm.hico{padding:2px 3px}
@media(max-width:430px){.hud{padding:8px 6px;gap:4px}.hudr .btn.sm.bgmBtn{font-size:0;padding:6px 10px}.hudr .btn.sm.bgmBtn::before{content:'\266A';font-size:16px;line-height:1}}
@media(max-width:340px){#hudInfo{font-size:11px;padding:4px 7px}.hudr .btn.sm.hico{width:28px;height:26px}.hudr .btn.sm{padding:5px 6px;font-size:12px}.hudr .btn.sm.bgmBtn{padding:5px 8px}}
@media(max-width:360px){.gt{width:25px;height:35px}.gt b{font-size:15px}.grow{gap:2px}.gkan{margin-right:3px;padding-right:3px}}
.gnav .btn.sm{white-space:nowrap;min-width:0;padding:9px 11px}.gbox{max-width:100%}.gbody{overflow-x:hidden}
@media(max-width:360px){.gdots{display:none}.gnav{justify-content:space-between}.gnav .btn.sm{padding:9px 10px}.gtabs{gap:4px;padding-right:48px}.gtabs button{font-size:14px;letter-spacing:0}}
/* v31: 「一人で遊ぶ」(紫) をタイトル直下へ / チュートリアルボタンを目立たせる */
#top .solo{width:calc(min(420px,94vw) - 32px);display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;margin:2px 0 0}
#top .solo .btn.solobtn{width:100%;background:linear-gradient(180deg,#9b6bd6,#6d3fb3 55%,#4d2a85);border-color:#e7c77f;color:#fff;padding:10px 16px;font-size:21px;box-shadow:0 6px 18px #2a124d66,inset 0 1px 0 #ffffff55}
#top .solo .btn.solobtn small{display:block;font-size:11.5px;font-weight:700;opacity:.9;letter-spacing:.06em}
#top .solo .btn.solobtn:active{filter:brightness(1.12)}
#top .solo .seg{padding:0 4px}
#top .solo .seg>span{color:#fff8e6;text-shadow:0 1px 2px #000,0 0 6px #000c;font-size:12.5px}
#top .solo .seg button{padding:5px 8px;font-size:15px}
.xlinkSP.xguide{border-color:#f0d58b;background:linear-gradient(180deg,#4a6a52,#2a4231);box-shadow:0 0 0 2px #f0d58b44,0 4px 12px #0006}
.xlinkSP.xguide .xt b{font-size:17px;letter-spacing:.06em}
/* v33: 手裏剣トランプ CPUの強さ C/B/A */
.shkMsg .shkLv{width:min(320px,86vw);margin:4px 0 6px}
.shkMsg .shkLv span{color:#E8C770;font-weight:700;white-space:nowrap}
.shkMsg .shkLv button{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:6px 4px}
.shkMsg .shkLv button small{font:600 11px system-ui,sans-serif;opacity:.85;margin-top:3px}
.shkHud .lvTag{font:700 10px/1.4 system-ui,sans-serif;padding:0 5px;border:1px solid #E8C770;border-radius:6px;color:#FFE9A8;margin-right:4px;white-space:nowrap}
.shkHud .lvTag:empty{display:none}

/* v34 (2026-10-28) win result: the winner's character no longer grows up over 「ロン和了／ツモ和了」 (modal-only animation ends at scale 1, image sized by height inside its own box) */
.mbox .smugwrap{height:112px;flex-shrink:0;align-items:flex-end;margin:-2px 0 -2px}
.mbox .smugimg{width:auto!important;height:100px;max-width:150px;object-fit:contain;transform-origin:50% 100%;animation:smugM .7s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes smugM{0%{transform:scale(.7)}60%{transform:scale(1.08) rotate(-8deg)}100%{transform:scale(1) rotate(-6deg)}}
@media (max-width:600px){.mbox .smugwrap{height:96px}.mbox .smugimg{height:86px}}
@media (max-height:700px){.mbox .smugwrap{height:80px}.mbox .smugimg{height:72px}}
/* v34 yaku voice readout: semi-transparent dark rounded panel behind the text, above the seat plates */
.yakupop{z-index:49;background:rgba(0,0,0,.55);border:1px solid #e8c77055;border-radius:18px;padding:14px 22px 16px;box-shadow:0 12px 40px #0008;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);max-width:94vw;box-sizing:border-box}
.yakupop:empty{display:none}

/* v35 (2026-10-28) 手裏剣トランプ layout
   1) the counter: the global game-table rule `.felt{inset:0;transform:rotateX(48deg)}` leaked in (top:0 won over bottom:0), so the counter floated at the top of the table
      and the opponent stood below it. Now the counter is the front edge of the table and the opponent stands behind it, lower ~1/3 hidden.
      All character images are 360x360 with the feet at ~98.6% height, so one offset works for every character (the jellyfish just shows its head higher). */
/* 2) HUD: kept clear of the × button (40px at right:12px) on both sides, names on line 1, life circles (+CPU tag) on line 2 */
.shkHud{left:62px;right:62px;width:auto;max-width:640px;margin:0 auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.shkHud .hp{flex-wrap:wrap;min-width:0;row-gap:3px;gap:4px}
.shkHud .hp span{flex:0 0 100%;max-width:100%;margin:0;line-height:1.2}
.shkHud .hp.me{justify-content:flex-end}.shkHud .hp.me span{text-align:right}
.shkHud .hp i{width:14px;height:14px;flex:0 0 auto}
.shkHud .hp .lvTag{order:9;margin:0 0 0 4px}
.shkHud .tmr{min-width:44px}
/* v35 tune (counter rules removed in v36; HUD + jellyfish lift kept). The jellyfish (d27) art starts 24% down its canvas, so lift it with translate (composes with the throw animation) */
.shkTable .opp img[src*="/d27."]{translate:0 -20%}
@media (max-width:420px){.shkHud .hp i{width:12px;height:12px}.shkHud .hp{gap:3px}.shkHud .hp .lvTag{font-size:9px;padding:0 3px;margin-left:3px}}
/* v36 (2026-10-28) 手裏剣トランプ: the card-mahjong felt (rotateX perspective, theme colours, gold rim) sits BETWEEN the two players.
   v35's flat counter (transform:none) is removed. The opponent stands behind the far edge as a flat sibling drawn under the felt (z1 < z2),
   so the table top hides its lower part. The table box keeps its width, so the sway and the hit area are unchanged; only the felt is wider.
   Card rows on the felt: far = opponent's face-down hand, near = my hand. */
.shkTable{top:6%;height:58%;perspective:800px;perspective-origin:50% 0%}
.shkTable .felt{left:-16%;right:-16%;bottom:0;top:auto;height:60%;z-index:2;transform:rotateX(48deg);transform-origin:50% 100%;border:0;border-radius:18% 18% 8% 8%/22% 22% 10% 10%;background:radial-gradient(ellipse at 50% 45%,var(--f1),var(--f2) 62%,var(--f3));box-shadow:0 0 0 9px #0c0c0e,0 0 0 10px #3a3a3e,0 0 0 11px var(--acc,var(--gold)),0 30px 40px #000a,inset 0 0 60px #0008}
.shkTable .felt:empty::before,.shkTable .felt:empty::after{content:"";position:absolute;left:24%;right:24%;height:15%;background-size:calc(100%/9) 100%;background-repeat:repeat-x;filter:drop-shadow(0 2px 2px #0008)}
.shkTable .felt:empty::before{top:9%;background-image:linear-gradient(90deg,#1d2f4d 0 6%,#2c4673 6% 82%,transparent 82%);border-radius:2px}
.shkTable .felt:empty::after{bottom:10%;inset-inline:22%;height:17%;background-image:linear-gradient(90deg,#F5F0E4 0 84%,transparent 84%)}
.shkTable .opp{z-index:1;width:46%;bottom:44%}

/* v37: 手裏剣トランプ 各自52枚 — 左端に裏向きの山（残り枚数）＋表向き8枚。投げると卓の表カードが持ち上がって飛ぶ。52枚投げ切り→5秒カウントダウン */
.shkTable .felt{container-type:size}
.shkT{position:absolute;inset:0;--cw:min(8.6cqw,30cqh*.714)}
.shkT .side{position:absolute;left:3%;right:3%;display:flex;align-items:center;gap:2.2cqw}
.shkT .side.s-opp{top:11%}.shkT .side.s-me{bottom:9%}
.shkT .up{display:flex;gap:.7cqw;flex:1;justify-content:center}
.shkT .tc{position:relative;flex:none;width:var(--cw);aspect-ratio:100/140;filter:drop-shadow(0 .8cqh .6cqh #0009)}
.shkT .tc svg{display:block;width:100%;height:100%}
.shkT .tc.gone{visibility:hidden}
.shkT .tc.deal{animation:shkDeal .3s ease-out}
@keyframes shkDeal{from{opacity:0;translate:-60% 0;scale:.9}to{opacity:1;translate:0 0;scale:1}}
.shkT .pile{position:relative;flex:none;width:calc(var(--cw)*1.05);aspect-ratio:100/140;border-radius:9%/6.5%;background:#1d2f4d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect x='6' y='6' width='88' height='128' rx='6' fill='none' stroke='%23E8C770' stroke-width='3'/%3E%3Crect x='12' y='12' width='76' height='116' rx='4' fill='%232c4673'/%3E%3Cpath d='M50 30 L70 70 L50 110 L30 70Z' fill='none' stroke='%23E8C770' stroke-width='2.5'/%3E%3C/svg%3E") center/100% 100%;
  box-shadow:1px 1px 0 #0c1522,2px 2px 0 #E8C77099,3px 3px 0 #1d2f4d,4px 4px 0 #E8C77099,5px 5px 0 #1d2f4d,6px 6px 0 #E8C77099,7px 7px 0 #1d2f4d,8px 8px 6px #000a}
.shkT .pile[data-n="some"]{box-shadow:1px 1px 0 #0c1522,2px 2px 0 #E8C77099,3px 3px 0 #1d2f4d,4px 4px 5px #000a}
.shkT .pile[data-n="few"]{box-shadow:1px 1px 0 #0c1522,2px 2px 4px #000a}
.shkT .pile[data-n="0"]{background:none;box-shadow:inset 0 0 0 2px #E8C77066}
.shkT .pile b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:70%;padding:3% 6%;border-radius:999px;background:#0c0c0ee6;border:1px solid #E8C770;color:#FFE9A8;font:900 calc(var(--cw)*.42)/1.1 var(--serif,serif);text-align:center}
.shkT .pile[data-n="few"] b,.shkT .pile[data-n="0"] b{color:#ff8fa0;border-color:#ff6b7f}
.shkLift{position:absolute;z-index:3;pointer-events:none;aspect-ratio:100/140;filter:drop-shadow(0 0 6px #fff6) drop-shadow(0 6px 6px #000a)}
.shkLift svg{display:block;width:100%;height:auto}
.shkFin{position:absolute;left:50%;top:71%;white-space:nowrap;transform:translate(-50%,-50%);z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 18px;border-radius:14px;background:#0c0c0ecc;border:1px solid #ff6b7f;color:#FFE9A8;text-shadow:0 2px 8px #000}
.shkFin span{font:800 13px/1.3 system-ui,sans-serif;letter-spacing:.06em}
.shkFin b{font:900 40px/1 var(--serif,serif);color:#ff6b7f;animation:pulse .5s infinite alternate}
.shkFin.hide{display:none}
.shkMsg .shkThrown{font-size:12px;opacity:.85}

/* v39 (2026-10-28) 手裏剣 決着シーン: 負けた側はうつ伏せ（assets/fallen の既存絵）、勝った側はジャンプ。約2秒後に結果。一人用・対人戦共通 */
.shkEnd .shkCtl{opacity:0;pointer-events:none;transition:opacity .25s}
.shkEnd .shkCard,.shkEnd .shkLift{display:none}
.shkArena [data-end]{transition:none}
.shkArena .shkTable .opp[data-end="down"]{z-index:3}
.shkArena [data-end="down"] img{width:128%;max-width:none;margin-left:-14%;transform-origin:50% 100%;animation:shkFallDown .55s cubic-bezier(.5,0,.8,.4) both}
@keyframes shkFallDown{0%{transform:translateY(-45%) rotate(-28deg) scale(.82);opacity:.5}65%{transform:translateY(6%) rotate(3deg) scale(1.02,.96);opacity:1}82%{transform:translateY(-3%) rotate(-1deg)}100%{transform:none}}
.shkArena [data-end="down"]::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-4%;height:16%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#d9c9a866,transparent 70%);animation:shkDust .7s ease-out .4s both;pointer-events:none}
@keyframes shkDust{0%{transform:scale(.3);opacity:0}40%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.shkArena [data-end="joy"] img{transform-origin:50% 100%;animation:shkJoy .5s cubic-bezier(.33,0,.4,1) infinite}
@keyframes shkJoy{0%,100%{transform:translateY(0) scale(1.08,.9)}18%{transform:translateY(-6%) scale(.95,1.07)}50%{transform:translateY(-34%) scale(1,1.02) rotate(-6deg)}70%{transform:translateY(-22%) rotate(5deg)}90%{transform:translateY(0) scale(1.06,.93)}}
@media (prefers-reduced-motion:reduce){.shkArena [data-end] img{animation-duration:.01s;animation-iteration-count:1}}