:root{
  --paper:#f7f0e3;--paper2:#efe4cf;--paper3:#e6d8bd;
  --ink:#3b3127;--ink2:#6e6150;--ink3:#a39580;
  --sage:#a8bf9c;--sage2:#7f9b74;--felt:#cddcc0;--felt2:#b9cdaa;
  --peach:#e8b79c;--brick:#bf5f4a;--teal:#8db7b2;--sky:#9fbfd6;--gold:#c8a25e;--lav:#b7a8cc;
  --hand:"LXGW WenKai TC","Kaiti TC","STKaiti","DFKai-SB",serif;
  --wob:14px 6px 12px 5px/6px 12px 5px 14px;
  --wob2:255px 12px 225px 12px/12px 225px 12px 255px;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2a241d;overflow:hidden}
body.portbody,html:has(body.portbody){background:#efe4cf}
#safe{position:fixed;left:0;top:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);visibility:hidden;pointer-events:none}
body{position:fixed;inset:0;font-family:var(--hand);color:var(--ink);user-select:none}
#stage{position:absolute;left:0;top:0;transform-origin:0 0!important;flex:none;width:var(--W,800px);height:var(--H,600px);transform-origin:center;overflow:hidden;background:var(--paper);box-shadow:0 0 50px rgba(0,0,0,.5)}
.scr{position:absolute;inset:0;display:none;background-size:cover;background-position:center}
.bgscr{overflow:hidden}
.bgscr:before{content:"";position:absolute;inset:-40px;background:var(--bg) center/cover;filter:blur(18px) saturate(.9);opacity:.9}
.art{position:absolute;top:0;left:50%;width:calc(var(--H,600px)*4/3);height:var(--H,600px);margin-left:calc(var(--H,600px)*-2/3);background:var(--bg) center/cover}
#stage.wide .art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.inner{position:absolute;inset:0}
.scr.on{display:block}
/* paper surfaces */
.paper{background:var(--tex),linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--ink);border-radius:var(--wob);box-shadow:3px 4px 0 rgba(59,49,39,.18)}
.btn{font-family:var(--hand);font-size:19px;color:var(--ink);background:var(--tex),var(--paper);border:2px solid var(--ink);border-radius:var(--wob2);padding:5px 18px;cursor:pointer;box-shadow:2px 3px 0 rgba(59,49,39,.25);transition:transform .08s,background .15s;letter-spacing:2px}
.btn:hover{background:var(--tex),#fff7e8;transform:translateY(-1px) rotate(-.5deg)}
.btn:active{transform:translateY(2px);box-shadow:1px 1px 0 rgba(59,49,39,.25)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.red{background:var(--tex),var(--brick);color:#fff8ee;border-color:#5a2a1e}
.btn.sm{font-size:15px;padding:2px 12px;letter-spacing:1px}
.ink-u{background:linear-gradient(transparent 62%,rgba(232,183,156,.7) 62%,rgba(232,183,156,.7) 90%,transparent 90%)}

/* ---------- title ---------- */
#title{--bg:url(../assets/cg_title.webp)}
#logo{position:absolute;left:50%;top:40px;transform:translateX(-50%) rotate(-2deg);text-align:center;padding:14px 46px 16px;background:var(--tex),rgba(247,240,227,.88);border:2.5px solid var(--ink);border-radius:var(--wob)}
#logo h1{margin:0;font-size:96px;line-height:1;letter-spacing:14px;font-weight:700;color:var(--ink)}
#logo .seal{position:absolute;right:-22px;bottom:-16px;width:58px;height:58px;background:var(--brick);color:#fff4e6;font-size:13px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;border-radius:6px 9px 5px 8px;transform:rotate(8deg);box-shadow:inset 0 0 0 3px #f7e3d0,inset 0 0 0 4px var(--brick);font-family:Georgia,serif;font-weight:700}
#logo .en{font-size:15px;letter-spacing:10px;color:var(--ink2);margin-top:4px}
#tBtns{position:absolute;left:50%;top:222px;transform:translateX(-50%);display:flex;gap:16px;align-items:center}
#tBtns .btn{width:210px;font-size:21px}

/* ---------- create ---------- */
#create{--bg:url(../assets/bg_intro.webp)}
#create:after{content:"";position:absolute;inset:0;background:rgba(247,240,227,.55);backdrop-filter:blur(3px)}
.panel{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:580px;padding:20px 28px 22px}
.ptitle{font-size:30px;text-align:center;margin:0 0 12px;letter-spacing:6px;font-weight:700}
.field{display:flex;align-items:center;gap:10px;margin:10px 0}
.field>label{width:110px;font-size:19px;color:var(--ink2)}
.in{font-family:var(--hand);font-size:20px;color:var(--ink);background:transparent;border:0;border-bottom:2px dashed var(--ink2);padding:2px 6px;outline:none}
input.in{flex:1}
select.in{cursor:pointer}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.opt{padding:6px 4px;text-align:center;cursor:pointer;border:2px solid var(--ink3);border-radius:var(--wob2);font-size:18px;background:rgba(255,255,255,.35)}
.opt small{display:block;color:var(--ink2);font-size:12px;margin-top:1px}
.opt svg{width:30px;height:30px;display:block;margin:0 auto 2px}
.opt.sel{border-color:var(--ink);background:rgba(232,183,156,.45);transform:rotate(-1deg)}
.center{text-align:center;margin-top:14px;display:flex;gap:12px;justify-content:center}
.srow{display:grid;grid-template-columns:56px 1fr 40px;gap:8px;align-items:center;margin:7px 0;font-size:18px}

/* ---------- dialogue ---------- */
.dlg{position:absolute;display:flex;gap:14px;align-items:flex-start;padding:12px 16px 14px;min-height:96px;font-size:19px;line-height:1.6}
.dlg .who{display:block;color:var(--brick);font-weight:700;font-size:17px;letter-spacing:2px}
.face{flex:none;width:92px;height:92px;border:2px solid var(--ink);border-radius:var(--wob);background:#fbf5ea center/cover;box-shadow:2px 2px 0 rgba(59,49,39,.2)}
.next{position:absolute;right:14px;bottom:6px;color:var(--ink2);font-size:14px;animation:bob 1.2s infinite}
@keyframes bob{50%{transform:translateY(3px);opacity:.5}}

/* ---------- street ---------- */
.hot{position:absolute;cursor:pointer;border:2.5px dashed transparent;border-radius:var(--wob);transition:border-color .15s,background .15s}
.hot:hover,.hot.tap{border-color:rgba(59,49,39,.75);background:rgba(255,248,232,.18)}
.sign{position:absolute;display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-weight:700;color:var(--ink);pointer-events:none;letter-spacing:3px;white-space:nowrap}
.sign.v{writing-mode:vertical-rl;letter-spacing:2px}
.lock{position:absolute;pointer-events:none;font-size:13px;padding:1px 8px;background:var(--tex),var(--paper);border:1.5px solid var(--ink);border-radius:var(--wob2);color:var(--ink2);transform:rotate(-3deg)}
#tip{position:absolute;display:none;min-width:180px;max-width:240px;padding:10px 14px;font-size:16px;line-height:1.55;pointer-events:none;z-index:15}
#tip h4{margin:0 0 4px;font-size:20px;letter-spacing:2px}
#tip .g{color:var(--sage2)}#tip .g:before{content:"・"}
#tip .t{color:var(--ink2);border-top:1px dashed var(--ink3);margin-top:4px;padding-top:3px}
#tip .no{color:var(--brick)}
.arrow{position:absolute;top:38%;width:46px;height:64px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:30px;z-index:5}
.pageName{position:absolute;left:50%;top:10px;transform:translateX(-50%) rotate(-1deg);padding:3px 20px;font-size:19px;letter-spacing:4px;z-index:5}

/* ---------- table ---------- */
#table{background:var(--tex),radial-gradient(ellipse at 50% 40%,#d9e6cc,var(--felt) 55%,var(--felt2))}
#table:after{content:"";position:absolute;inset:6px 6px 96px;border:2px solid rgba(59,49,39,.35);border-radius:22px 30px 26px 34px/30px 22px 34px 26px;pointer-events:none}
.zone{position:absolute;border:2px solid var(--ink);border-radius:var(--wob);display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;background:rgba(255,252,242,.28);transition:background .15s}
.zone:hover,.zone.drop{background:rgba(255,250,235,.6)}
.zone.win{background:rgba(232,183,156,.55);box-shadow:0 0 0 3px var(--brick)}
.zone .big{font-weight:700;color:var(--brick);font-size:60px;line-height:1}
.zone .sub{color:var(--ink2);font-size:15px;margin-top:2px}
.zone .pay{position:absolute;right:6px;bottom:1px;font-size:12px;color:var(--ink2)}
.stack{position:absolute;left:5px;top:5px;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.stack .amt{font-size:12px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--wob2);padding:0 5px;margin-top:2px}
.chip{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink);border:2px solid var(--ink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),1px 2px 0 rgba(59,49,39,.3);font-family:Georgia,serif}
.c100{background:var(--sky)}.c500{background:var(--lav)}.c1000{background:var(--peach)}.c5000{background:var(--sage)}.c10000{background:var(--gold)}
.stack .chip{width:22px;height:22px;font-size:0;margin-top:-15px}.stack .chip:first-child{margin-top:0}
#cupWrap{position:absolute;left:315px;top:122px;width:170px;height:170px}
#plate{position:absolute;inset:0;border-radius:50%;background:var(--tex),radial-gradient(circle at 45% 40%,#fbf6ea,#e9dcc2);border:2.5px solid var(--ink);box-shadow:3px 4px 0 rgba(59,49,39,.2)}
#dice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;padding:44px}
#cup{position:absolute;inset:-4px;border-radius:50%;background:var(--tex),radial-gradient(circle at 38% 32%,#e7a08a,var(--brick) 55%,#9c4636);border:2.5px solid var(--ink);box-shadow:3px 5px 0 rgba(59,49,39,.25);transition:transform .7s cubic-bezier(.5,-.3,.4,1.3),opacity .6s}
#cup:before{content:"";position:absolute;inset:16px;border-radius:50%;border:1.5px dashed rgba(255,245,230,.6)}
#cup:after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4dfae,var(--gold));border:2px solid var(--ink)}
#cup.open{transform:translate(130px,-100px) rotate(20deg);opacity:0}
#cup.shake{animation:shake .45s 2}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,3px) rotate(-6deg)}50%{transform:translate(6px,-3px) rotate(5deg)}75%{transform:translate(-4px,-2px) rotate(-3deg)}}
#tmsg{position:absolute;left:220px;width:360px;top:300px;text-align:center;font-size:19px;min-height:26px}
#tbtns{position:absolute;left:220px;width:360px;top:334px;display:flex;gap:10px;justify-content:center}
#hint{position:absolute;left:496px;top:120px;width:112px;display:none;padding:7px 9px;font-size:14px;line-height:1.45;z-index:5}
.ghost{position:fixed;z-index:99;pointer-events:none;transform:translate(-50%,-50%) scale(1.12)}

/* ---------- ability ---------- */
#abil{position:absolute;right:10px;bottom:100px;display:none;padding:10px 12px;z-index:20;width:300px}
#abil h4{margin:0 0 6px;font-size:18px;letter-spacing:3px}
.arow{display:grid;grid-template-columns:44px repeat(4,1fr);gap:5px;align-items:center;margin:4px 0}
.arow b{font-size:16px;color:var(--ink2)}
.slot{height:44px;border:1.5px dashed var(--ink3);border-radius:var(--wob);display:flex;align-items:center;justify-content:center}
.slot.has{border:2px solid var(--ink);background:rgba(255,255,255,.55);cursor:pointer}
.slot.has svg{width:28px;height:28px}
.slot.na{opacity:.35;cursor:not-allowed}
.slot.has:not(.na):hover{background:rgba(232,183,156,.5)}
.slot.pick{background:rgba(232,183,156,.7)!important;transform:rotate(-3deg)}
#abilInfo{font-size:14px;line-height:1.5;margin-top:6px;min-height:42px;color:var(--ink2)}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;bottom:0;height:92px;display:none;align-items:center;gap:10px;padding:6px 10px 6px;z-index:10;background:var(--tex),linear-gradient(180deg,rgba(247,240,227,.96),rgba(239,228,207,.98))}
#hud:before{content:"";position:absolute;left:0;right:0;top:-6px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M0 6 Q15 2 30 6 T60 6 T90 5 T120 6' fill='none' stroke='%233b3127' stroke-width='2'/%3E%3C/svg%3E") repeat-x}
#hud .face{width:76px;height:76px}
.stats{display:grid;grid-template-columns:auto 78px auto 78px;gap:5px 7px;align-items:center}
.stats b{font-size:15px;font-weight:700;color:var(--ink2);white-space:nowrap}
.bar{position:relative;height:13px;border:1.5px solid var(--ink);border-radius:8px 4px 7px 5px;background:rgba(255,255,255,.5);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;opacity:.9}
.bar em{position:absolute;inset:0;font-size:10px;font-style:normal;line-height:11px;text-align:center;color:var(--ink);font-family:Georgia,serif}
.hbs{display:flex;gap:6px}
.hb{width:48px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-size:15px;border:2px solid var(--ink);border-radius:var(--wob);background:var(--tex),var(--paper);box-shadow:2px 2px 0 rgba(59,49,39,.2)}
.hb:hover{background:var(--tex),#fff6e6;transform:rotate(-2deg)}
.hb svg{width:30px;height:30px}
.hr{flex:1;display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0}
.tag{font-size:15px;padding:2px 8px;text-align:center;border:1.5px solid var(--ink);border-radius:var(--wob2);background:rgba(255,255,255,.45);white-space:nowrap}
.tag b{color:var(--brick)}
#chips{display:none;flex-direction:row;gap:3px;align-items:center;justify-content:flex-end}
#chips .chip{cursor:grab;flex:none}
#chips .chip.sel{transform:translateY(-4px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 0 0 3px var(--brick)}

/* ---------- modal / fade / toast ---------- */
#modal{position:absolute;right:30px;top:40px;width:400px;padding:16px 20px 18px;display:none;z-index:30}
#modal h3{margin:0 0 8px;font-size:24px;text-align:center;letter-spacing:5px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 4px;border-bottom:1.5px dashed var(--ink3);font-size:17px}
.row small{color:var(--ink2);font-size:13px;display:block}
#fade{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .6s;z-index:50;display:flex;align-items:center;justify-content:center;font-size:28px;letter-spacing:4px}
#fade.on{opacity:1;pointer-events:auto}
#toast{position:absolute;left:50%;top:20%;transform:translateX(-50%) rotate(-1deg);padding:5px 18px;font-size:18px;display:none;z-index:40;white-space:nowrap}
#rot{display:none;position:fixed;inset:0;background:var(--paper);color:var(--ink);font-family:var(--hand);font-size:22px;align-items:center;justify-content:center;text-align:center;z-index:200;padding:20px}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){#rot{display:flex}}

/* ===== Phase 1 additions ===== */
#scene .dlg{left:24px;right:24px;bottom:20px}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.choices .btn{text-align:left;font-size:17px;letter-spacing:1px}
.cardTitle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tex),var(--paper);z-index:2}
.cardTitle h2{font-size:46px;margin:0;letter-spacing:12px}
.cardTitle p{font-size:18px;color:var(--ink2);margin:10px 0 0;letter-spacing:4px}
.limit{position:absolute;transform:translateX(-50%);font-size:14px;color:var(--ink2);white-space:nowrap}
/* roulette */
#roul{background:var(--tex),radial-gradient(ellipse at 30% 40%,#d9e6cc,var(--felt) 55%,var(--felt2))}
#roul:after{content:"";position:absolute;inset:6px 6px 96px;border:2px solid rgba(59,49,39,.35);border-radius:22px 30px 26px 34px/30px 22px 34px 26px;pointer-events:none}
#wheelWrap{position:absolute;left:18px;top:40px;width:230px;height:230px}
#wheel{width:100%;height:100%;transition:transform 3.2s cubic-bezier(.15,.7,.2,1)}
#ballMark{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid var(--ink)}
#rgrid{position:absolute;left:262px;top:22px;width:520px}
.rc{position:absolute;display:flex;align-items:center;justify-content:center;border:1.6px solid var(--ink);font-size:16px;cursor:pointer;font-family:Georgia,serif;font-weight:700;border-radius:5px 8px 6px 7px/7px 5px 8px 6px;background:rgba(255,252,242,.35)}
.rc:hover,.rc.drop{background:rgba(255,250,235,.75)}
.rc.red{color:var(--brick)}.rc.blk{color:var(--ink)}
.rc.red:before{content:"";position:absolute;inset:3px;border-radius:50%;background:rgba(191,95,74,.12)}
.rc.out{font-family:var(--hand);font-size:16px;font-weight:700}
.rc.win{background:rgba(232,183,156,.65);box-shadow:0 0 0 3px var(--brick)}
.rc .stack{left:1px;top:1px}
.rc .stack .chip{width:16px;height:16px;margin-top:-12px}
.rc .stack .amt{font-size:10px;padding:0 3px}
#rmsg{position:absolute;left:18px;width:230px;top:290px;text-align:center;font-size:18px;min-height:26px}
#rbtns{position:absolute;left:18px;width:230px;top:326px;display:flex;gap:8px;justify-content:center}
#rhint{position:absolute;display:none;padding:6px 10px;font-size:15px;line-height:1.45}
#rhint hr{display:none}
#rhint>b{margin-left:10px}
.rlimit{position:absolute;text-align:center;font-size:14px;color:var(--ink2)}
/* slots */
.slotRow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1.5px dashed var(--ink3);font-size:16px}
.slotRow .info{flex:1}
.slotRow small{display:block;color:var(--ink2);font-size:13px}
textarea.code{width:100%;height:70px;font-family:monospace;font-size:11px;border:1.5px solid var(--ink);border-radius:6px;background:rgba(255,255,255,.6);padding:6px;resize:none}
#modal.wide{width:470px;left:50%;right:auto;top:50%;transform:translate(-50%,-50%)}
.debtbar{display:flex;gap:4px;margin-top:4px}
.debtbar span{flex:1;text-align:center;font-size:12px;border:1.2px solid var(--ink3);border-radius:4px;padding:1px 0}
.debtbar span.ok{background:rgba(168,191,156,.6)}.debtbar span.now{border-color:var(--brick);color:var(--brick)}
#rbtns .btn,#tbtns .btn{white-space:nowrap}
#rbtns .btn{padding:4px 12px;letter-spacing:1px}

/* ===== mobile (short landscape) ===== */
#stage.mob .stats{grid-template-columns:auto 86px auto 86px;gap:4px 7px}
#stage.mob .stats b{font-size:17px}
#stage.mob .bar{height:16px}#stage.mob .bar em{font-size:12px;line-height:14px}
#stage.mob .hb{width:56px;height:78px;font-size:16px}
#stage.mob .tag{font-size:17px}
#stage.mob #hud .face{width:78px;height:78px}
#stage.mob #chips .chip{width:44px;height:44px;font-size:13px}
#stage.mob .dlg{font-size:21px;min-height:100px}
#stage.mob .dlg .who{font-size:18px}
#stage.mob .face{width:96px;height:96px}
#stage.mob .btn{font-size:21px}
#stage.mob .btn.sm{font-size:17px}
#stage.mob #tip{font-size:18px;max-width:280px}
#stage.mob .pageName{font-size:21px}
#stage.mob .row{font-size:18px}
#stage.mob #abilInfo{font-size:16px}
#stage.mob #logo h1{font-size:80px}
#stage.mob #tBtns{top:190px}
#stage.mob .panel{transform:translate(-50%,-50%) scale(.86)}
#stage.mob #modal{top:10px;max-height:calc(var(--H) - 110px);overflow:auto}
#stage.mob #modal.wide{top:50%;max-height:calc(var(--H) - 20px)}
#stage.mob #toast{font-size:20px}
#stage.mob #tmsg,#stage.mob #rmsg{font-size:20px}
/* ===== loading & ads ===== */
#loading{background:var(--tex),var(--paper);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:60}
#loading.on{display:flex}
#loading h1{margin:0;font-size:64px;letter-spacing:12px}
#loading .lbar{width:min(420px,60%);height:18px;border:2px solid var(--ink);border-radius:10px 6px 9px 7px;overflow:hidden;background:rgba(255,255,255,.5)}
#loading .lbar i{display:block;height:100%;width:0;background:var(--tex),var(--peach);transition:width .3s}
#loading .lstep{font-size:18px;color:var(--ink2);min-height:26px}
#loading .ltip{font-size:15px;color:var(--ink3);max-width:70%;text-align:center}
.adslot{width:min(468px,70%);height:64px;border:1.5px dashed var(--ink3);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:13px;letter-spacing:2px;background:rgba(255,255,255,.35)}
#fade .adslot{position:absolute;bottom:24px;left:50%;transform:translateX(-50%)}
#stage.mob #loading h1{font-size:54px}
/* ===== card games ===== */
.felt{background:var(--tex),radial-gradient(ellipse at 50% 40%,#d9e6cc,var(--felt) 55%,var(--felt2))}
.felt:after{content:"";position:absolute;inset:6px 6px 96px;border:2px solid rgba(59,49,39,.35);border-radius:22px 30px 26px 34px/30px 22px 34px 26px;pointer-events:none}
#stage{--cw:58px}#stage.mob{--cw:62px}
.card{position:relative;display:inline-block;width:var(--cw);height:calc(var(--cw)*1.4);background:#fffdf6;border:2px solid var(--ink);border-radius:7px 9px 6px 8px;box-shadow:2px 3px 0 rgba(59,49,39,.2);font-family:Georgia,serif;color:var(--ink);margin:0 3px;vertical-align:top;flex:none}
.card.red{color:var(--brick)}
.card .cr{position:absolute;left:4px;top:3px;font-size:calc(var(--cw)*.28);line-height:1.05;font-weight:700;text-align:center}
.card .cs{position:absolute;right:5px;bottom:1px;font-size:calc(var(--cw)*.55);line-height:1}
.card.back{background:repeating-linear-gradient(45deg,#b9cdaa 0 5px,#cddcc0 5px 10px);box-shadow:inset 0 0 0 4px #fffdf6,inset 0 0 0 5px var(--ink),2px 3px 0 rgba(59,49,39,.2)}
.card.mini{--cw:28px;margin:0 -10px 0 0;border-width:1.5px;border-radius:4px}
.card.mini .cr{font-size:9px;left:2px;top:1px}.card.mini .cs{font-size:12px;right:2px}
.glimit{position:absolute;left:16px;top:8px;font-size:14px;color:var(--ink2)}
.gmsg{position:absolute;left:16px;bottom:108px;font-size:19px;max-width:45%}
.gbtns{position:absolute;right:16px;bottom:104px;display:flex;gap:8px}
.gbtns .btn{white-space:nowrap}
.ghint{position:absolute;right:16px;top:30px;width:190px;display:none;padding:7px 10px;font-size:15px;line-height:1.45;z-index:5}
.betc{position:absolute;left:30px;top:38%;width:96px;height:96px;border-radius:50%;border:2.5px dashed var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink2);cursor:pointer;background:rgba(255,252,242,.3)}
.betc.drop{background:rgba(255,250,235,.75)}
.betc .stack{left:50%;top:50%;transform:translate(-50%,-50%);align-items:center}
.betc .stack .chip{width:30px;height:30px}
.betc span{position:absolute;top:-24px;white-space:nowrap}
/* blackjack */
.bjrow{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px}
#bjDW{top:24px}#bjPW{bottom:150px}
.wtag{display:flex;align-items:center;gap:8px;font-size:18px}
.wtag b{font-family:Georgia,serif;color:var(--brick);font-size:20px}
.face.fs{width:38px;height:38px}
.hand{display:flex;justify-content:center;min-height:calc(var(--cw)*1.4)}
#stage.mob #bjDW{top:14px}#stage.mob #bjPW{bottom:142px}
/* big two */
.opp{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}
.opp.side{max-width:160px}
.opp .ocards{display:flex;padding-right:10px}
.opp.side .ocards{flex-wrap:wrap;width:150px;justify-content:center;row-gap:4px}
.oname{font-size:16px;padding:1px 10px;border:1.5px solid var(--ink);border-radius:var(--wob2);background:rgba(255,255,255,.5);white-space:nowrap}
.oname.turn,#b2Me.turn:before{background:var(--peach)}
.oname b{color:var(--brick)}
#b2Pile{position:absolute;left:50%;top:26%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:200px}
.pwho{font-size:16px;color:var(--ink2)}
.pcards{display:flex}
#b2Me{position:absolute;left:0;right:0;bottom:150px;display:flex;justify-content:center}
#b2Hand{position:relative;height:calc(var(--cw)*1.4 + 18px)}
#b2Hand .card{position:absolute;bottom:0;margin:0;cursor:pointer;transition:transform .12s}
#b2Hand .card.up{transform:translateY(-18px)}
#b2BetArea{top:auto;bottom:160px;width:84px;height:84px}
#stage.mob #b2Pile{top:22%}
#stage.mob #b2Me{bottom:144px}
#stage.mob .opp.side{top:24%!important}
#stage.mob .face.fs{width:40px;height:40px}
#stage.mob #tLimit{display:none}

/* =====================================================
   PORTRAIT (phone held upright) — #stage.port
   stage = 400 × var(--H)
   ===================================================== */
#stage.port{--cw:50px}
#spotList{display:none}
#stage.port .bgscr:before{display:none}
#stage.port .bgscr{background:var(--tex),var(--paper)}
#stage.port .art{left:0;margin-left:0;width:400px;height:300px;-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
/* title / create */
#stage.port #title .art{height:300px}
#stage.port #logo{top:236px;padding:10px 34px 12px}
#stage.port #logo h1{font-size:72px}
#stage.port #tBtns{top:440px;flex-direction:column;gap:14px}
#stage.port #tBtns .btn{width:240px;font-size:23px;padding:8px 18px}
#stage.port .panel{width:384px!important;padding:16px 16px 18px;transform:translate(-50%,-50%)}
#stage.port .field{flex-wrap:wrap}
#stage.port .field>label{width:100%;font-size:18px}
#stage.port .opts{grid-template-columns:1fr 1fr}
#stage.port .opt{font-size:19px;padding:8px 4px}
#stage.port .opt small{font-size:13px}
#stage.port .ptitle{font-size:28px}
/* stacked screens: art on top, content below */
#stage.port #scene.on,#stage.port #place.on,#stage.port #street.on{display:flex;flex-direction:column}
#stage.port #scene .art,#stage.port #place .art,#stage.port #street .art{position:relative;flex:none}
#stage.port .dlg{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:-14px 10px 0;font-size:20px;line-height:1.65;min-height:120px;z-index:2}
#stage.port .dlg .face{width:84px;height:84px}
#stage.port .dlg .who{font-size:18px}
#stage.port #scene .next{position:absolute}
#stage.port #placeBtns{position:relative!important;bottom:auto!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding:14px 10px 0}
#stage.port #placeBtns .btn{font-size:20px;padding:10px 6px}
#stage.port .cardTitle h2{font-size:40px}
/* street */
#stage.port #tip{display:none!important}
#stage.port .pageName{top:8px;font-size:19px}
#stage.port .arrow{top:116px;width:40px;height:56px}
#stage.port .sign{transform:scale(.62);transform-origin:center}
#stage.port .lock{font-size:11px}
#stage.port #spotList{display:flex;flex-direction:column;gap:10px;padding:6px 10px 110px;overflow:auto;flex:1}
.spot{padding:10px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.spot b{font-size:21px;letter-spacing:2px}
.spot span{font-size:16px;color:var(--sage2)}
.spot em{font-style:normal;font-size:15px;color:var(--ink2)}
.spot.locked{opacity:.55}.spot.locked em{color:var(--brick)}
.spot:active{transform:translateY(2px)}
/* HUD */
#stage.port #hud{height:92px;gap:8px;padding:8px 8px 10px}
#stage.port #hud .face{width:62px;height:62px;cursor:pointer}
#stage.port #hud .face:after{content:"能力 ▲";position:absolute;margin-top:46px;margin-left:8px;font-size:11px;background:var(--paper);border:1px solid var(--ink);border-radius:6px;padding:0 4px}
#stage.port #hudStats{display:none;position:absolute;left:8px;right:8px;bottom:84px;padding:12px;grid-template-columns:auto 1fr auto 1fr;gap:10px 10px;background:var(--tex),var(--paper);border:2px solid var(--ink);border-radius:var(--wob);box-shadow:3px 4px 0 rgba(59,49,39,.18);z-index:25;bottom:98px!important}
#stage.port #hud.showStats #hudStats{display:grid}
#stage.port #hudStats b{font-size:17px}
#stage.port #hudStats .bar{height:18px}#stage.port #hudStats .bar em{font-size:12px;line-height:16px}
#stage.port .hbs{order:3;gap:5px}
#stage.port .hb{width:52px;height:64px;font-size:15px}
#stage.port .hb svg{width:26px;height:26px}
#stage.port #hudR{order:2;gap:4px}
#stage.port .tag{font-size:14px;padding:2px 6px}
#stage.port #chips{position:absolute;left:0;right:0;bottom:92px;height:60px;justify-content:center!important;gap:10px!important;background:var(--tex),linear-gradient(180deg,rgba(239,228,207,.9),rgba(247,240,227,.98));border-top:1.5px dashed var(--ink3)}
#stage.port #chips .chip{width:46px;height:46px;font-size:13px}
#stage.port #chips .tag{display:none}
/* panels */
#stage.port #abil{left:8px;right:8px;width:auto;bottom:160px}
#stage.port .slot{height:48px}
#stage.port #abilInfo{font-size:16px}
#stage.port #modal,#stage.port #modal.wide{left:8px;right:8px;width:auto;top:14px;transform:none;max-height:calc(var(--H) - 110px);overflow:auto}
#stage.port .row{font-size:17px}
#stage.port #toast{font-size:18px;white-space:normal;max-width:360px;text-align:center}
#stage.port .adslot{width:92%}
/* tables */
#stage.port #table:after,#stage.port #roul:after,#stage.port .felt:after{inset:6px 6px 158px}
#stage.port #tmsg{font-size:18px;text-align:center}
#stage.port #tbtns{justify-content:center}
#stage.port .zone .pay{font-size:11px}
#stage.port .rc.vert{writing-mode:vertical-rl;letter-spacing:2px}
#stage.port #rmsg{font-size:17px;text-align:left}
#stage.port #rbtns{flex-wrap:wrap;justify-content:flex-start}
#stage.port #rhint{font-size:14px}
#stage.port .glimit{left:10px;top:4px}
#stage.port .gmsg{left:10px;right:10px;max-width:none;bottom:210px;text-align:center;font-size:18px}
#stage.port .gbtns{left:8px;right:8px;bottom:162px;justify-content:center;flex-wrap:wrap;gap:6px}
#stage.port .gbtns .btn{padding:5px 12px}
#stage.port .ghint{right:8px;top:24px;width:150px;font-size:14px}
#stage.port .betc{left:50%;top:auto;bottom:250px;transform:translateX(-50%);width:84px;height:84px}
/* blackjack */
#stage.port #bjDW{top:30px}
#stage.port #bjPW{bottom:250px}
#stage.port #bj .betc{bottom:auto;top:44%}
#stage.port .card:not(.mini){--cw:60px}
#stage.port .opp .ocards .card.back{display:none}
#stage.port #bj .betc{top:38%}
/* big two */
#stage.port .opp{top:26px!important;transform:none!important;max-width:124px}
#stage.port #b2Opp3{left:8px!important;right:auto!important}
#stage.port #b2Opp2{left:138px!important;right:auto!important}
#stage.port #b2Opp1{right:8px!important;left:auto!important}
#stage.port .opp .ocards{flex-wrap:wrap;width:124px;justify-content:center;row-gap:3px;padding-right:8px}
#stage.port .oname{font-size:14px;padding:1px 6px}
#stage.port #b2Pile{top:150px}
#stage.port #b2Pile .card{--cw:46px}
#stage.port #b2Me{bottom:240px}
#stage.port #b2Hand .card{--cw:50px}
#stage.port #b2BetArea{top:44%;bottom:auto}
#stage.port .gmsg#b2msg{bottom:210px}
#stage.port #logo,#stage.port .pageName{width:max-content;white-space:nowrap}
#stage.port .hb{width:46px}
#stage.port #hudR{min-width:0;flex:1}
#stage.port #pDate{font-size:12.5px;line-height:1.3;padding:2px 4px}
#stage.port #pDate b{display:block}
#stage.port .tag{font-size:14px}
#dice svg{width:var(--ds,36px);height:var(--ds,36px)}#dice{gap:4px}
#dice{overflow:hidden;border-radius:50%}

/* round 2 */
.adslot{display:none!important}
#stage.port #hud .face{width:72px;height:72px}
#stage.port #hud .face:after{margin-top:56px;margin-left:12px}
#stage.port .hb{width:52px;height:72px;font-size:16px}
#stage.port .hb svg{width:30px;height:30px}
#stage.port .tag{font-size:15px;padding:3px 6px}
#stage.port #pDate{font-size:14px}
.spot.call{border-style:dashed}.spot.call b{color:var(--brick)}
#saving{position:absolute;inset:0;z-index:70;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--tex),var(--paper)}
#saving.on{display:flex}
#saving h2{margin:0;font-size:40px;letter-spacing:10px}
#saving .lbar{width:min(420px,70%);height:18px;border:2px solid var(--ink);border-radius:10px 6px 9px 7px;overflow:hidden;background:rgba(255,255,255,.5)}
#saving .lbar i{display:block;height:100%;width:0;background:var(--tex),var(--sage);transition:width .1s linear}
#saving .lstep{font-size:18px;color:var(--ink2)}
#saving .ltip{font-size:15px;color:var(--ink3);max-width:75%;text-align:center}
#roul:before{content:"";position:absolute;inset:0;background:rgba(247,240,227,.0);pointer-events:none;transition:background .35s;z-index:29}
#roul.spinning:before{background:rgba(247,240,227,.75);pointer-events:auto}
#wheelWrap{transition:left .35s,top .35s,width .35s,height .35s}
#roul.spinning #wheelWrap{left:calc(50% - var(--wbig)/2)!important;top:calc(42% - var(--wbig)/2)!important;width:var(--wbig)!important;height:var(--wbig)!important;z-index:30}
#roul{--wbig:420px}#stage.port #roul{--wbig:360px}#stage.mob #roul{--wbig:330px}
#wheelResult{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:0;pointer-events:none}
#roul.spinning #wheelResult{font-size:0}
#roul.spinning.done #wheelResult{font-size:44px}
#roul.spinning.done #wheelResult{width:82px;height:82px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(232,183,156,.6)}
.betq{position:absolute;left:18px;top:calc(38% + 104px);display:flex;gap:6px}
#b2Q{top:auto;bottom:190px;left:130px;flex-direction:column}
.betq .btn{padding:2px 10px;font-family:Georgia,serif;font-size:15px;letter-spacing:0}
#stage.port .betq{left:calc(50% + 56px);top:auto;bottom:268px;flex-direction:column}
#stage.port #bjQ{top:calc(38% + 14px);bottom:auto}
#stage.port #b2Q{bottom:268px}
#stage.port #b2Q{top:calc(44% + 14px);bottom:auto}
#b2Keys{position:absolute;left:0;right:0;bottom:262px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;z-index:3}
#b2Keys .btn{padding:2px 10px;font-size:15px;letter-spacing:1px}
#stage.mob #b2Keys{bottom:250px}
#stage.port #b2Keys{bottom:412px;padding:0 8px}
#stage.port #b2Keys .btn{font-size:15px;padding:3px 9px}
.gmsg{pointer-events:none}
.art.wip{background:var(--tex),repeating-linear-gradient(135deg,#efe4cf 0 18px,#e9dcc2 18px 36px)!important}
.art.wip:after{content:"插畫加工中……請稍待";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-2deg);font-family:var(--hand);font-size:24px;color:var(--ink2);padding:8px 22px;border:2px dashed var(--ink3);border-radius:var(--wob2);background:rgba(247,240,227,.85);white-space:nowrap}
.bgscr:has(.art.wip):before{background:var(--paper)}

/* ===== 梭哈 ===== */
#stAW{top:22px}#stMW{bottom:150px}
#stPot{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:18px;color:var(--ink2)}
#stPot b{font-family:Georgia,serif;color:var(--brick);font-size:24px}
#stud .betc{top:40%}
#stQ{top:calc(40% + 104px)}
.card.hole{box-shadow:0 0 0 2.5px var(--sage),2px 3px 0 rgba(0,0,0,.15)}
.card.peek{opacity:.82;box-shadow:0 0 0 2.5px var(--peach)}
.duelb{position:absolute;left:16px;top:30px;padding:7px 12px;font-size:15px;line-height:1.5;z-index:6;text-align:left}
.duelb b{font-family:Georgia,serif;color:var(--brick)}
#tourBoard{top:30px}
#stage.port #stAW{top:30px}
#stage.port #stMW{bottom:300px}
#stage.port #stmsg{bottom:262px}
#stage.port #stPot{top:41%}
#stage.port #stud .betc{top:48%;bottom:auto}
#stage.port #stQ{top:calc(48% + 14px);bottom:auto}
#stage.port .duelb{left:auto;right:6px;top:23%;width:140px;font-size:13px;line-height:1.45;padding:5px 8px;text-align:left}
.duelb .tb-opp{display:block}

/* ===== 抓千 ===== */
#catchBox{position:absolute;left:50%;top:27%;transform:translateX(-50%);z-index:30;display:none;flex-direction:column;align-items:center;gap:8px;padding:12px 18px;background:var(--paper);border:2.5px solid var(--brick);border-radius:var(--wob);box-shadow:3px 4px 0 rgba(0,0,0,.18);font-size:17px;max-width:80%;text-align:center;animation:catchPulse .9s ease-in-out infinite alternate}
@keyframes catchPulse{from{box-shadow:3px 4px 0 rgba(0,0,0,.18),0 0 0 0 rgba(180,70,50,.5)}to{box-shadow:3px 4px 0 rgba(0,0,0,.18),0 0 0 10px rgba(180,70,50,0)}}

/* ===== 密碼鎖 ===== */
.pzbox{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);width:min(560px,90%);padding:12px 16px;z-index:3;text-align:center}
#pzDice{display:flex;justify-content:center;gap:14px}
.pzd{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.pzd small{font-size:12px;color:var(--ink3)}
#pzLog{margin-top:8px;font-size:15px;line-height:1.5;max-height:110px;overflow:auto}
#stage.port .pzbox{bottom:110px;width:380px;padding:10px}
#stage.port #pzDice{gap:8px}
.quest{margin-top:6px;padding:8px 12px;border:2px dashed var(--sage);border-radius:var(--wob2);background:rgba(170,190,160,.18);text-align:left}
.quest b{display:block;font-size:17px;font-weight:normal;color:var(--ink)}
.quest small{display:block;margin-top:2px;font-size:15px;color:var(--brick)}

/* 直式：提示框移到左側中段，不擋莊家的牌 */
#stage.port .ghint{left:6px;right:auto;top:23%;width:146px;max-height:34%;overflow:auto;font-size:13px;line-height:1.4;padding:6px 8px}

/* ===== 手感特效 ===== */
#fxLayer{position:absolute;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.fxres{position:absolute;left:50%;top:44%;display:flex;flex-direction:column;align-items:center;padding:8px 30px 10px;background:var(--tex),var(--paper);border:3px solid var(--ink);border-radius:var(--wob);box-shadow:4px 5px 0 rgba(59,49,39,.25);white-space:nowrap}
.fxres small{font-size:20px;letter-spacing:6px;color:var(--ink2)}
.fxres b{font-family:Georgia,serif;font-size:48px;line-height:1.05}
.fxres.win{border-color:#4f7a4c}.fxres.win b{color:#3f7a3f}
.fxres.lose{border-color:var(--brick)}.fxres.lose b{color:var(--brick)}
.fxres.tie b{color:var(--ink2)}
.fxres.big{border-color:#c79a2c;background:var(--tex),linear-gradient(180deg,#fff6d8,#f4dfa0);padding:12px 40px}
.fxres.big small{font-size:26px;color:#a8741a}
.fxres.big b{font-size:62px;color:#b5651d;text-shadow:2px 2px 0 #f7e7b4}
#stage.port .fxres b{font-size:42px}#stage.port .fxres.big b{font-size:52px}
.fxcoin{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c4,#e7b84a 45%,#b8862a);border:2px solid #7a5a1e;box-shadow:1px 2px 0 rgba(0,0,0,.2)}
.fxcoin.gray{background:radial-gradient(circle at 35% 35%,#eee,#b9b2a6 50%,#8a8378);border-color:#6b645a}
.fxspark{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px}
.fxflash{position:absolute;inset:0}
.fxflash.warm{background:radial-gradient(ellipse at 50% 45%,rgba(255,236,170,.45),transparent 65%)}
.fxflash.gold{background:radial-gradient(ellipse at 50% 45%,rgba(255,220,120,.75),rgba(255,236,170,.25) 55%,transparent 80%)}
.fxflash.red{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(170,50,40,.32))}
.fxripple{position:absolute;width:70px;height:70px;border-radius:50%;border:2.5px solid rgba(59,49,39,.45)}
.tag.fxup{animation:fxUp .7s ease-out}.tag.fxdown{animation:fxDown .5s ease-out}
@keyframes fxUp{0%{transform:scale(1)}30%{transform:scale(1.18);background:#eaf3d9;border-color:#4f7a4c}100%{transform:scale(1)}}
@keyframes fxDown{0%{transform:translateX(0)}25%{transform:translateX(-4px);background:#f6dcd4}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
.btn:active{transform:translateY(2px) scale(.96)}
.card{transform-origin:50% 60%}
.rate{position:relative;margin-top:5px;padding:3px 0 6px;border-top:1.5px dashed #a39580;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;font-size:13px;line-height:1.3}
.rate b{font-family:Georgia,serif;font-size:17px}
.rate em{font-style:normal;font-size:12px}
.rate small{flex-basis:100%;font-size:12px;color:var(--ink2)}
.rate i{position:absolute;left:0;bottom:1px;height:3px;border-radius:2px;max-width:calc(100% - 12px);opacity:.7}
.fxlv{position:absolute;left:50%;padding:4px 16px;background:var(--tex),linear-gradient(180deg,#f3f7ea,#e1ecd0);border:2px solid #4f7a4c;border-radius:var(--wob2);box-shadow:2px 3px 0 rgba(59,49,39,.2);font-size:17px;white-space:nowrap;color:var(--ink)}
.fxlv b{color:#3f7a3f;font-family:Georgia,serif;font-size:20px;margin:0 4px}
.fxlv small{font-size:13px;color:var(--ink2)}

/* ===== v11：商店分頁、裝備、長按、結果卡 ===== */
.shtabs{display:flex;gap:6px;justify-content:center;margin:0 0 8px;flex-wrap:wrap}
.shmoney{margin:0 0 6px;text-align:center;font-size:16px;color:var(--ink2)}
.shnote{font-size:13px;color:var(--ink2);margin:8px 0 0;text-align:center}
#modal .btn{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
#modal .btn[disabled]{opacity:.45}
.hint-x{display:block;margin-top:6px;font-size:12px;color:var(--ink3);text-align:right}
.chip.c50000{background:#d9a441}.chip.c100000{background:#c8643c;color:#fffaf0}
.chip.c500000{background:#7a5a9c;color:#fffaf0}
/* v11 新畫面：吃角子、撿紅點、百家樂、德州撲克 */
.gw{position:absolute;left:14px;right:14px;top:40px;bottom:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.gw-row{display:flex;flex-direction:column;align-items:center;gap:4px}
.gw-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.gw-info{padding:8px 12px;font-size:15px;line-height:1.55;max-width:560px;text-align:center}
.gw .wtag{font-size:16px}
.gbet{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gbet .btn{padding:2px 8px;font-size:14px}
#bac,#hold{--cw:50px}
#hold .hand .card{--cw:46px}
.hd-bet{position:relative !important;left:auto !important;top:auto !important;transform:none !important;width:96px;height:96px;margin-top:2px}
.sl-box{padding:14px 18px}
.sl-reels{display:flex;gap:12px}
.sl-reel{width:86px;height:86px;border:2.5px solid var(--ink);border-radius:12px;background:#fffdf6;display:flex;align-items:center;justify-content:center;font-size:44px;font-family:Georgia,serif;font-weight:700;color:var(--ink);box-shadow:2px 3px 0 rgba(59,49,39,.2)}
.sl-reel.win{background:#f2d48c;box-shadow:0 0 0 3px var(--brick)}
.dot-top{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;font-size:17px}
.dot-top span{white-space:nowrap}
.dot-bar{flex:1;height:12px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:rgba(255,252,242,.5)}
.dot-bar i{display:block;height:100%;width:0;background:var(--brick)}
#dotBoard{display:grid;grid-template-columns:repeat(5,52px);gap:6px}
.dcell{width:52px;height:52px;border:2px dashed rgba(59,49,39,.45);border-radius:10px;position:relative;background:rgba(255,252,242,.22)}
.rdot{position:absolute;inset:6px;border-radius:50%;background:var(--brick);border:2px solid var(--ink);box-shadow:inset -4px -4px 0 rgba(0,0,0,.15);animation:dotIn .18s ease-out;cursor:pointer}
.rdot.gone{opacity:0;transform:scale(.6);transition:all .16s}
.rdot.hit{transform:scale(1.4);opacity:0;transition:all .12s}
@keyframes dotIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.bac-zones{display:flex;gap:12px}
.bacz{position:relative;width:118px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:2px}
.bacz b{font-size:24px}
.bacz small{font-size:13px;color:var(--ink2)}
.bacz .stack{left:auto;right:4px;top:4px}
.bacz.win{box-shadow:0 0 0 3px var(--brick)}
#stage.port .gw{top:44px;bottom:214px}
#stage.port .gw-info{font-size:14px}
#stage.port .sl-reel{width:92px;height:92px}

.gearrow{align-items:center}
.gbuy{display:flex;gap:4px;flex-shrink:0}
.gbuy .btn.sm{padding:4px 8px;min-width:0}

/* ===== v12：小瑪莉 ===== */
.gw.mr{flex-direction:row;gap:22px;align-items:center}
.mr-ring{--mc:46px;display:grid;grid-template-columns:repeat(7,var(--mc));grid-template-rows:repeat(7,var(--mc));gap:3px;padding:8px;background:linear-gradient(135deg,#f3e2b8,#e8c98c);border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 4px 0 rgba(59,49,39,.25)}
.mrc{background:#fffdf6;border:1.5px solid var(--ink);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--mc)*.52);line-height:1;transition:background .08s}
.mrc.txt{font-family:Georgia,serif;font-weight:700;font-size:calc(var(--mc)*.34);color:var(--brick)}
.mrc.luck{font-size:calc(var(--mc)*.19);font-weight:700;color:var(--ink2);text-align:center;background:#e9e1cf}
.mrc.lit{background:#ffd34d;box-shadow:0 0 0 3px #e0533a,0 0 12px #ffd34d;transform:scale(1.06);z-index:1}
.mrc.hit{animation:mrHit .25s 5 alternate}
@keyframes mrHit{to{background:#e0533a;color:#fff}}
.mr-center{grid-row:2/7;grid-column:2/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#3b3127;border-radius:10px;margin:4px;color:#ffe9a8}
.mr-led{display:flex;gap:8px;align-items:baseline;font-size:14px}
.mr-led b{font-family:'Courier New',monospace;font-size:22px;color:#ff6a4d;min-width:90px;text-align:right;background:#1d1712;padding:1px 6px;border-radius:4px}
.mr-big{font-size:30px;font-weight:700;color:#ffe9a8;min-height:40px;text-align:center}
.mr-side{display:flex;flex-direction:column;gap:10px;align-items:center}
.mr-panel{display:grid;grid-template-columns:repeat(4,64px);gap:6px}
.mrb{display:flex;flex-direction:column;align-items:center;background:#fffdf6;border:2px solid var(--ink);border-radius:9px;padding:3px 0 5px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.mrb small{font-size:12px;color:var(--brick);font-weight:700}
.mrb b{font-family:'Courier New',monospace;font-size:18px;background:#1d1712;color:#ff6a4d;border-radius:4px;padding:0 6px;min-width:34px;text-align:center}
.mrb span{font-size:24px;line-height:1.2}
.mrb span.txt{font-family:Georgia,serif;font-weight:700;font-size:16px;color:var(--brick);line-height:1.5}
.mrb.on{background:#fbe7b0}
.mrb:active{transform:scale(.94)}
#stage.port .gw.mr{flex-direction:column;gap:10px;top:30px;bottom:236px;justify-content:flex-start}
#stage.port .mr-ring{--mc:47px}
#stage.port .mr-panel{grid-template-columns:repeat(8,44px);gap:3px}
#stage.port .mrb span{font-size:20px}
#stage.port .mrb b{font-size:15px;min-width:26px;padding:0 3px}
#stage.port .mrb span.txt{font-size:13px}
#stage.port #slot .gmsg{bottom:226px;font-size:16px}
#stage.port #slot .gbtns{bottom:150px}
.gbet small{font-size:13px;color:var(--ink2)}

/* ===== v12：撿紅點 ===== */
.gw.pk{gap:8px;justify-content:flex-start;top:32px}
.pk-opp,.pk-mine{display:flex;align-items:center;gap:10px;font-size:15px}
.pk-sc b{font-size:20px;color:var(--brick)}
.pk-backs{display:flex}
.pk-backs i{width:12px;height:20px;margin-right:-4px;border:1.5px solid var(--ink);border-radius:3px;background:repeating-linear-gradient(45deg,#b9cdaa 0 3px,#cddcc0 3px 6px)}
.pk-mid{display:flex;gap:12px;align-items:flex-start;width:100%;justify-content:center}
.pk-deck{display:flex;flex-direction:column;align-items:center;gap:2px;--cw:40px;font-size:12px;color:var(--ink2)}
.pk-table{--cw:42px;display:flex;flex-wrap:wrap;gap:5px 0;max-width:560px;min-height:62px;padding:6px;border:2px dashed rgba(59,49,39,.35);border-radius:12px;justify-content:center;align-content:flex-start;flex:1}
.pk-hand{--cw:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;max-width:720px}
.pk-hand .card{cursor:pointer;transition:transform .12s}
.pk-hand .card.ok{box-shadow:0 0 0 2.5px #6aa35a,2px 3px 0 rgba(59,49,39,.2)}
.pk-hand .card.sel{transform:translateY(-10px);box-shadow:0 0 0 3px var(--brick)}
.pk-table .card.cand{box-shadow:0 0 0 3px #ffb52e,0 0 12px #ffb52e;cursor:pointer;animation:candP .6s infinite alternate}
@keyframes candP{to{transform:translateY(-4px)}}
#stage.port .gw.pk{top:30px;bottom:236px}
#stage.port .pk-table{--cw:40px;max-width:330px}
#stage.port .pk-hand{--cw:50px;max-width:350px}
#stage.port #dot .gmsg{bottom:226px;font-size:15px}
#stage.port #dot .gbtns{bottom:150px}

/* ===== v12：百家樂路單 ===== */
.bac-road{position:absolute;right:12px;top:30px;padding:6px 8px;font-size:12px;z-index:2}
.br-head{display:flex;gap:10px;font-size:14px;margin-bottom:4px;flex-wrap:wrap}
.br-head .bk,.br-bead i.bk{color:#c0392b}.br-head .pl,.br-bead i.pl{color:#2a5d9f}.br-head .tie,.br-bead i.tie{color:#3f7a3f}
.br-wrap{display:flex;gap:10px}
.br-wrap small{display:block;color:var(--ink2);font-size:11px}
.br-bead,.br-big{display:grid;grid-template-rows:repeat(6,15px);gap:1px;background:rgba(59,49,39,.15);padding:1px;border-radius:3px}
.br-bead{grid-template-columns:repeat(8,15px)}
.br-big{grid-template-columns:repeat(14,15px)}
.br-bead i,.br-big i{font-style:normal;background:#fffdf6;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border-radius:2px}
.br-bead i.bk,.br-bead i.pl,.br-bead i.tie{border-radius:50%}
.br-big i.bk{border-radius:50%;box-shadow:inset 0 0 0 2.5px #c0392b;font-size:8px}
.br-big i.pl{border-radius:50%;box-shadow:inset 0 0 0 2.5px #2a5d9f;font-size:8px}
.br-big i.t{background:linear-gradient(135deg,transparent 44%,#3f7a3f 45% 55%,transparent 56%),#fffdf6}
#bac .gw{right:300px}
#stage.port .bac-road{position:absolute;left:8px;right:8px;top:26px;display:flex;flex-direction:column;align-items:center}
#stage.port #bac .gw{top:172px;right:14px;bottom:226px}
#stage.port .br-bead,#stage.port .br-big{grid-template-rows:repeat(6,13px)}
#stage.port .br-bead{grid-template-columns:repeat(8,13px)}
#stage.port .br-big{grid-template-columns:repeat(14,13px)}

/* ===== v12：德州 ===== */
.gw.hd .gw-row{position:relative}
.hd-chip{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;min-width:70px}
.hd-chip i{width:18px;height:18px;border-radius:50%;background:#c0392b;border:2px dashed #fff;box-shadow:0 0 0 1.5px var(--ink)}
.dbtn{display:inline-block;width:20px;height:20px;line-height:18px;border-radius:50%;background:#fffdf6;border:1.5px solid var(--ink);font-size:12px;font-weight:700;text-align:center;vertical-align:1px}
.card.ph{background:rgba(255,252,242,.25);border:2px dashed rgba(59,49,39,.35);box-shadow:none}
#holdPot{font-size:18px}
#stage.port #hold .gbtns{bottom:100px}
#stage.port #hold .gmsg{bottom:196px;font-size:16px}
#stage.port #hold .gw{bottom:250px}

/* ===== v12：地點按鈕太多時（至尊號） ===== */
#stage.port #place.on{overflow-y:auto;padding-bottom:110px}
#stage.port #placeBtns.many{grid-template-columns:1fr 1fr 1fr;gap:8px}
#stage.port #placeBtns.many .btn{font-size:17px;padding:8px 2px}
#placeBtns.many{max-width:760px;margin:0 auto}
#stage:not(.port) #slot .gmsg,#stage:not(.port) #dot .gmsg,#stage:not(.port) #hold .gmsg,#stage:not(.port) #bac .gmsg{bottom:150px;left:16px;right:16px;max-width:none;text-align:center;font-size:17px}
#stage:not(.port) #slot .gw,#stage:not(.port) #dot .gw,#stage:not(.port) #hold .gw{bottom:182px}
#stage:not(.port) #bac .gw{bottom:182px}

/* ===== v13：裝備卡 ===== */
.gtabs{display:flex;gap:6px;justify-content:center;margin:2px 0 10px}
.gtab{flex:1;max-width:130px;border:2px solid var(--gc);background:#fffdf6;color:var(--gc);border-radius:10px;padding:5px 4px;font:700 17px inherit;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.gtab small{font-size:11px;font-weight:400;opacity:.85}
.gtab.on{background:var(--gc);color:#fff}
.glist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding:2px 2px 4px}
.gcard{background:var(--gb);border:2px solid var(--gc);border-left-width:7px;border-radius:10px;padding:7px 10px;text-align:left}
.gc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gc-name{color:var(--gc);font-size:19px}
.gc-grade{background:var(--gc);color:#fff;font-size:11px;padding:1px 6px;border-radius:6px}
.gc-slot{font-size:12px;color:var(--ink2);border:1px solid var(--ink3);border-radius:6px;padding:0 5px}
.gc-ab{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 2px}
.gchip{font-size:12.5px;background:#fffdf6;border:1.5px solid var(--gc,var(--ink3));color:var(--ink);border-radius:20px;padding:0 7px;white-space:nowrap}
.gc-d{font-size:13px;color:var(--ink2);font-style:italic}
.gc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;font-size:13px;color:var(--ink2)}
.gcard.sm .gc-name{font-size:16px}
.gc-cmp{font-size:14px;margin:8px 0 0;color:var(--ink2)}
.eqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.eqslot{border:2px dashed var(--gc);border-radius:10px;padding:5px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px}
.eqslot.has{border-style:solid;background:#fffdf6}
.eqslot small{font-size:12px;color:var(--ink2)}
.eqslot b{color:var(--gc);font-size:15px}
.eqslot .btn{align-self:flex-end;padding:1px 8px;font-size:12px}
.eqempty{color:var(--ink3);font-size:13px}
.rate.guard{border-top:1px dashed var(--ink3);margin-top:4px;padding-top:3px}
.rate.guard b{color:var(--brick)}
.mrpick{font-size:28px;display:inline-block;padding:2px 4px}

/* ===== v13：撿紅點四人 ===== */
#pkOpp{display:flex;gap:8px;justify-content:center;width:100%}
.pk-seat{display:flex;align-items:center;gap:6px;background:rgba(255,252,242,.55);border:2px solid rgba(59,49,39,.3);border-radius:12px;padding:4px 8px 4px 4px;min-width:0;transition:all .2s}
.pk-seat.turn{border-color:var(--brick);background:#fff6e2;box-shadow:0 0 0 3px rgba(192,57,43,.25)}
.pk-face{width:44px;height:44px;border-radius:50%;background:#e8dcc4 center top/cover;border:2px solid var(--ink);flex:none}
.pk-info{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pk-info b{font-size:14px;white-space:nowrap}
.pk-info .pk-sc{font-size:13px;color:var(--brick);font-weight:700}
.pk-backs i{width:9px;height:14px;margin-right:-3px}
.pk-me{display:inline-block;padding:1px 10px;border-radius:10px;border:2px solid rgba(59,49,39,.3);font-weight:700}
.pk-me.turn{border-color:var(--brick);background:#fff6e2}
.pk-reds{display:flex;gap:3px;flex-wrap:wrap}
.pk-reds em{font-style:normal;font-size:12px;color:var(--brick);border:1px solid var(--brick);border-radius:4px;padding:0 3px;background:#fffdf6}
.rc{color:var(--brick)}
#stage.port #pkOpp{gap:4px}
#stage.port .pk-seat{flex-direction:column;padding:4px;gap:2px;flex:1;text-align:center}
#stage.port .pk-info{align-items:center}
#stage.port .pk-face{width:40px;height:40px}
#stage.port .pk-hand{--cw:52px}

/* ===== v13：牌桌質感 ===== */
#hold .gw.hd::before{content:'';position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.18),rgba(0,0,0,.05) 70%);border:3px solid rgba(110,80,50,.35);box-shadow:inset 0 0 0 8px rgba(110,80,50,.12);z-index:-1}
#hold{--cw:56px}
.hd-face{width:52px;height:52px;border-radius:50%;background:#e8dcc4 center top/cover;border:2px solid var(--ink)}
.hd-face.noface{background:radial-gradient(circle at 50% 38%,#3b3127 0 22%,transparent 23%),radial-gradient(ellipse at 50% 100%,#3b3127 0 48%,#e8dcc4 49%)}
.hd-stack{font-size:14px;color:var(--ink2)}
.card.peek{box-shadow:0 0 0 3px #ffb52e,0 0 10px #ffb52e}
#holdPot{background:rgba(255,252,242,.7);border:1.5px solid rgba(59,49,39,.35);border-radius:20px;padding:1px 14px}
.bacz[data-z="pl"]{border-color:#2a5d9f}.bacz[data-z="pl"] b{color:#2a5d9f}
.bacz[data-z="bk"]{border-color:#c0392b}.bacz[data-z="bk"] b{color:#c0392b}
.bacz[data-z="tie"] b{color:#3f7a3f}
.bacz{width:130px;height:96px;border-width:2.5px}
.bacz b{font-size:30px}
#bac{--cw:54px}
#stage.port .bacz{width:108px;height:84px}
#stage.port #hold{--cw:52px}
#stage.port .hd-face{width:44px;height:44px}

/* ===== v16：出牌節奏 ===== */
.flycards{position:absolute;z-index:40;display:flex;pointer-events:none;--cw:46px;filter:drop-shadow(2px 4px 4px rgba(0,0,0,.25))}
.sbub{position:relative;margin-top:4px;background:#fffdf6;border:2px solid var(--ink);border-radius:10px;padding:2px 8px;font-size:13px;line-height:1.35;text-align:center;box-shadow:2px 3px 0 rgba(59,49,39,.18);animation:sbIn .3s ease-out;max-width:150px}
.sbub::before{content:'';position:absolute;left:50%;top:-7px;width:10px;height:10px;background:#fffdf6;border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.sbub.pass{color:var(--ink2);border-style:dashed;font-size:15px;font-weight:700}
.sbub.inline{display:inline-block;margin:0 0 0 6px;max-width:none}
.sbub.inline::before{display:none}
.sbub.me{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin:0 0 6px;white-space:nowrap;max-width:none;z-index:3}
.sbub.me::before{top:auto;bottom:-7px;transform:translateX(-50%) rotate(225deg)}
@keyframes sbIn{from{opacity:0;transform:translateY(-6px) scale(.85)}to{opacity:1}}
.sbub.me{animation:none}
.sb-cards{display:inline-flex;gap:2px;flex-wrap:wrap;justify-content:center}
.sb-cards i{font-style:normal;font-weight:700;font-family:Georgia,serif;background:#fff;border:1px solid var(--ink3);border-radius:3px;padding:0 2px;font-size:12px}
.sb-cards i.r{color:var(--brick)}
.pface{display:inline-block;width:30px;height:30px;border-radius:50%;background:#e8dcc4 center top/cover;border:2px solid var(--ink);vertical-align:middle;margin-right:6px}
.pface.txt{text-align:center;line-height:26px;font-size:15px;font-weight:700;background:#f3e2b8}
.oname.turn,.pk-seat.turn,.pk-me.turn{animation:turnPulse 1s ease-in-out infinite}
@keyframes turnPulse{50%{box-shadow:0 0 0 5px rgba(192,57,43,.35)}}
.oname.turn::after{content:' 思考中…';font-size:12px;color:var(--brick)}
.pk-seat{position:relative;flex-wrap:wrap}
.pk-seat .sbub{flex-basis:100%;margin-top:6px}
#b2Pile .pcards{transition:opacity .15s}
#stage.port .sbub{font-size:11.5px;max-width:118px;padding:1px 5px}
#stage.port .sb-cards i{font-size:11px}

/* ===== v17：賭桌美術 ===== */
/* 籌碼 */
.chip{border:none!important;background-color:transparent!important;background-size:100% 100%!important;background-repeat:no-repeat!important;box-shadow:1px 2px 0 rgba(59,49,39,.28)!important;color:var(--ink)!important;text-shadow:0 0 2px #fffaf0}
.chip.c100{background-image:url(../assets/t/chip_100.webp)}.chip.c500{background-image:url(../assets/t/chip_500.webp)}.chip.c1000{background-image:url(../assets/t/chip_1000.webp)}
.chip.c5000{background-image:url(../assets/t/chip_5000.webp)}.chip.c10000{background-image:url(../assets/t/chip_10000.webp)}.chip.c50000{background-image:url(../assets/t/chip_50000.webp)}
.chip.c100000{background-image:url(../assets/t/chip_100000.webp)}.chip.c500000{background-image:url(../assets/t/chip_500000.webp)}
#chips .chip.sel{box-shadow:0 0 0 3px var(--brick),1px 2px 0 rgba(59,49,39,.28)!important}
/* 骰寶 */
#plate{background:url(../assets/t/dice_plate.webp) center/100% 100% no-repeat!important;border:none!important;box-shadow:2px 4px 6px rgba(59,49,39,.22)!important}
#cup{background:url(../assets/t/dice_cup.webp) center/100% 100% no-repeat!important;border:none!important;box-shadow:3px 6px 8px rgba(59,49,39,.3)!important}
/* 各場地桌布 */
#stage[data-venue] #table,#stage[data-venue] #roul,#stage[data-venue] .felt{background-size:cover!important;background-position:center!important}
#stage[data-venue="night"] #table,#stage[data-venue="night"] #roul,#stage[data-venue="night"] .felt{background-image:url(../assets/t/felt_night.webp)!important}
#stage[data-venue="club"] #table,#stage[data-venue="club"] #roul,#stage[data-venue="club"] .felt{background-image:url(../assets/t/felt_club.webp)!important}
#stage[data-venue="wansheng"] #table,#stage[data-venue="wansheng"] #roul,#stage[data-venue="wansheng"] .felt{background-image:url(../assets/t/felt_wansheng.webp)!important}
#stage[data-venue="harbor"] #table,#stage[data-venue="harbor"] #roul,#stage[data-venue="harbor"] .felt{background-image:url(../assets/t/felt_harbor.webp)!important}
#stage[data-venue="tower"] #table,#stage[data-venue="tower"] #roul,#stage[data-venue="tower"] .felt{background-image:url(../assets/t/felt_tower.webp)!important}
#stage[data-venue="yacht"] #table,#stage[data-venue="yacht"] #roul,#stage[data-venue="yacht"] .felt{background-image:url(../assets/t/felt_yacht.webp)!important}
/* 深色桌布上的字要看得清楚 */
#stage[data-venue="harbor"] .gmsg,#stage[data-venue="yacht"] .gmsg,#stage[data-venue="harbor"] #rmsg,#stage[data-venue="yacht"] #rmsg,#stage[data-venue="harbor"] .glimit,#stage[data-venue="yacht"] .glimit,#stage[data-venue="harbor"] .wtag,#stage[data-venue="yacht"] .wtag,#stage[data-venue="harbor"] #holdPot,#stage[data-venue="yacht"] .rlimit,#stage[data-venue="harbor"] .rlimit{color:#fffaf0;text-shadow:0 1px 2px rgba(0,0,0,.55)}
#stage[data-venue="harbor"] .gmsg b,#stage[data-venue="yacht"] .gmsg b{text-shadow:0 0 3px #fffaf0}
#stage[data-venue="yacht"] #holdPot,#stage[data-venue="harbor"] #holdPot{color:var(--ink);text-shadow:none}
/* 撲克牌 */
.card{background:#fffdf6 linear-gradient(160deg,rgba(255,255,255,.6),rgba(233,220,194,.35))}
.card .cr{display:flex;flex-direction:column;align-items:center;left:3px;top:2px;font-size:calc(var(--cw)*.3);line-height:1}
.card .cr .si{display:block;width:calc(var(--cw)*.22);height:calc(var(--cw)*.22);margin-top:1px;background:center/contain no-repeat}
.card .cs{position:absolute;right:calc(var(--cw)*.08);bottom:calc(var(--cw)*.1);width:calc(var(--cw)*.52);height:calc(var(--cw)*.52);font-size:0;background:center/contain no-repeat}
.s0{background-image:url(../assets/t/suit_c.webp)!important}.s1{background-image:url(../assets/t/suit_d.webp)!important}.s2{background-image:url(../assets/t/suit_h.webp)!important}.s3{background-image:url(../assets/t/suit_s.webp)!important}
.card.back{background:url(../assets/t/card_back.webp) center/cover no-repeat!important;box-shadow:2px 3px 0 rgba(59,49,39,.2)!important}
.card.aceS{background:url(../assets/t/card_a_s.webp) center/cover no-repeat}
.card.aceS .cs{display:none}
.card.face .cf{position:absolute;left:24%;right:12%;top:18%;bottom:30%;border:1.5px solid currentColor;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.42);font-weight:700;background:repeating-linear-gradient(45deg,rgba(192,57,43,.06) 0 3px,transparent 3px 6px)}
.card.face .cs{width:calc(var(--cw)*.36);height:calc(var(--cw)*.36);right:calc(var(--cw)*.06);bottom:calc(var(--cw)*.05)}
.card.mini .cf{display:none}
/* 小瑪莉 */
.mri{width:78%;height:78%;object-fit:contain;display:block;margin:auto}
.mri.bar{position:relative;display:flex;align-items:center;justify-content:center;width:86%;height:86%}
.mri.bar img{width:100%;height:100%;object-fit:contain}
.mri.bar b{position:absolute;font:700 calc(var(--mc,46px)*.3) Georgia,serif;color:var(--brick)}
.mrb .mri{width:30px;height:30px}
.mrb .mri.bar{width:40px;height:30px}.mrb .mri.bar b{font-size:12px}
.mr-big .mri{width:56px;height:56px}
.mr-big .mri.bar{width:80px;height:56px}.mr-big .mri.bar b{font-size:20px}
#slmsg .mri,.ghint .mri,#mPick .mri{display:inline-block;width:26px;height:26px;vertical-align:middle;margin:0}
#slmsg .mri.bar,.ghint .mri.bar{display:inline-flex;width:44px;height:26px}#slmsg .mri.bar b,.ghint .mri.bar b{font-size:11px}
.mrpick .mri{width:40px;height:40px}
.mrpick .mri.bar{width:56px;height:40px}.mrpick .mri.bar b{font-size:14px}

/* v18：人頭牌千手方格 */
.card.face .cf{font-size:0!important;border:none!important;background:center/contain no-repeat!important;left:18%;right:8%;top:14%;bottom:26%}
.card.face[data-r="11"] .cf,.card.face .cf.r11{background-image:url(../assets/t/card_j.webp)!important}
.card.face .cf.r12{background-image:url(../assets/t/card_q.webp)!important}
.card.face .cf.r13{background-image:url(../assets/t/card_k.webp)!important}
#stage[data-venue="tower"] .gmsg,#stage[data-venue="tower"] .glimit,#stage[data-venue="tower"] .wtag,#stage[data-venue="tower"] .duelb,#stage[data-venue="tower"] #stLimit,#stage[data-venue="tower"] .tb-opp{color:#fffaf0;text-shadow:0 1px 2px rgba(0,0,0,.55)}
#stage[data-venue="tower"] .gmsg b{text-shadow:0 0 3px #fffaf0}

/* v19：手機版版面修正 */
#stage.port #hold .gbtns{bottom:168px}
#stage.port #hold .gmsg{bottom:268px}
#stage.port #hold .gw{bottom:300px}
#stage.port #dot .gmsg{bottom:254px}
#stage.port #dot .gw.pk{bottom:290px}
#stage.port .pk-hand{--cw:46px;max-width:360px}
/* 小瑪莉：訊息放進中間的螢幕 */
.mr-center #slmsg{position:static;max-width:none;width:92%;text-align:center;font-size:14px;line-height:1.45;color:#ffe9a8;bottom:auto;left:auto;right:auto;pointer-events:none}
.mr-center #slmsg b{color:#ff8a6d!important}
.mr-center #slmsg .mri{width:20px;height:20px}
/* 人頭牌：圖案避開左上角點數，不放右下大花色 */
.card.face .cs{display:none}
.card.face .cf{left:30%!important;right:5%!important;top:24%!important;bottom:6%!important;background-position:center bottom!important}
.pk-hand{width:100%;flex-wrap:nowrap!important}
#stage.port .pk-hand{flex-wrap:wrap!important}
#stage:not(.port) #hold{--cw:48px}
#stage:not(.port) #hold .gw{top:26px;bottom:178px;gap:4px}
#stage:not(.port) .hd-face{width:38px;height:38px}
#stage:not(.port) #hold .gw-row{gap:8px}
#stage.port .pk-hand{flex-wrap:nowrap!important;--cw:44px}
#stage.port .pk-hand .card{margin:0 1px}
#stage:not(.port) #holdStacks{display:none}
#stage:not(.port) .hd-face{width:32px;height:32px}

/* v20：手機版拿掉牌桌裝飾框線（會壓到標題和按鈕） */
#stage.port #table:after,#stage.port #roul:after,#stage.port .felt:after{display:none}

/* v21：登入、排行榜 */
#acctBadge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:rgba(255,252,242,.85);border:1.5px solid var(--ink);border-radius:20px;padding:3px 4px 3px 12px;font-size:14px;z-index:3}
#acctBadge b{color:var(--brick)}
#stage.port #acctBadge{top:auto;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
#stage.port .rgrid{grid-template-columns:repeat(3,1fr)}
.rgrid .btn{padding:6px 2px;font-size:15px}
.board{max-height:56vh;overflow-y:auto;margin:4px 0 8px;border:1.5px solid var(--ink3);border-radius:8px}
.board table{width:100%;border-collapse:collapse;font-size:15px}
.board th{position:sticky;top:0;background:#efe4cf;font-size:13px;color:var(--ink2);padding:4px}
.board td{padding:5px 6px;border-top:1px dashed var(--ink3)}
.board .rk{text-align:center;width:44px;font-weight:700}
.board .rg{color:var(--ink2);font-size:13px}
.board .mn{text-align:right;color:var(--brick);font-weight:700;white-space:nowrap}
.board tr.me td{background:#fbe7b0}