:root{
  --cream:#F3E6C4; --paper:#FBF6EA; --floor:#8A5A3B; --dark:#3A2418; --tom:#6F7F95; --muzzle:#EFE3C8;
  --jerry:#C98A4B; --teal:#4E9A92; --red:#C8453A; --green:#6E9B4A; --sky:#A9CFE0; --ink:#231A14;
  --disp:'Baloo 2', 'Nunito', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
  --B:600px; --u:calc(var(--B) / 12.2);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#6b4429;color:var(--ink);font-family:var(--body);font-weight:700;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
img{user-select:none;-webkit-user-drag:none}
.hidden{display:none!important}
#app{position:fixed;inset:0;overflow:hidden}
#bg{position:absolute;inset:0;background:url(img/bg_table.webp) center/cover no-repeat}
@media (orientation:portrait){#bg{background-image:url(img/bg_table_tall.webp)}}
.paper{background:var(--paper) url(img/paper.webp) center/300px}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:8px;padding:6px 10px;z-index:30;pointer-events:none}
#topbar>*{pointer-events:auto}
.roundbtn{width:34px;height:34px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--disp);font-size:20px;line-height:1;box-shadow:0 2px 0 var(--ink)}
.roundbtn img{width:26px;height:26px}
#btnHelp{margin-left:auto}
#lang{display:flex;align-items:center;background:var(--paper);border:2.5px solid var(--ink);border-radius:10px;padding:1px 6px;font-family:var(--disp);font-size:16px;box-shadow:0 2px 0 var(--ink)}
#lang button{padding:2px 5px;border-radius:6px;opacity:.55}
#lang button.on{opacity:1;background:var(--cream);color:var(--red)}
#lang span{opacity:.5}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;padding:52px 14px 14px;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.screen.wall{background:url(img/bg_wall.webp) center bottom/cover no-repeat}
@media (orientation:portrait){.screen.wall{background-image:url(img/bg_wall_tall.webp)}}
.titleCard{position:relative;width:min(560px,92vw);aspect-ratio:1005/507}
.titleCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ttxt{position:absolute;left:15%;right:13%;top:47%;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.95;text-align:center}
.ttxt b{font-family:var(--disp);font-weight:800;color:var(--red);font-size:calc(var(--tw,560px) * .092);-webkit-text-stroke:calc(var(--tw,560px) * .005) var(--ink);paint-order:stroke fill;text-shadow:0 calc(var(--tw,560px)*.006) 0 var(--ink);letter-spacing:.01em;white-space:nowrap}
.ttxt i{font-style:normal;font-family:var(--disp);font-weight:800;color:var(--red);font-size:calc(var(--tw,560px) * .058);-webkit-text-stroke:calc(var(--tw,560px)*.003) var(--ink);paint-order:stroke fill;margin-top:.25em;white-space:nowrap}
.menuTitle{display:flex;flex-direction:column;align-items:center;margin-top:-8px}
.menuTitle .titleCard{--tw:min(560px,92vw)}
.sub{margin:-8px 0 0;font-size:15px;text-align:center;background:rgba(251,246,234,.85);padding:4px 12px;border-radius:10px}
.modes{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%;max-width:980px}
.mode{flex:1 1 240px;max-width:300px;background:var(--paper) url(img/paper.webp) center/300px;border:3px solid var(--ink);border-radius:14px;padding:8px 8px 10px;box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;align-items:center;transition:transform .12s}
.mode img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.mode b{font-family:var(--disp);font-size:24px;margin-top:6px;line-height:1.1}
.mode small{font-size:13px;opacity:.8}
.mode:hover{transform:translateY(-3px) rotate(-.6deg)}
.mode:active,.sign:active,.act:active,.diff:active{transform:scale(1.06,.9) translateY(2px)}
.note{background:rgba(251,246,234,.92);border:2px solid var(--ink);border-radius:10px;padding:6px 12px;text-align:center;max-width:520px;margin:0}
@media (max-width:640px){
  .modes{gap:10px}
  .mode{flex:1 1 100%;max-width:440px;display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:12px;text-align:left;align-items:center;padding:6px}
  .mode img{width:100%;grid-row:1/5;grid-column:1}
  .mode b{font-size:22px;margin:0;grid-column:2;grid-row:2}
  .mode small{grid-column:2;grid-row:3}
  .diffs{gap:8px}
  .diff{width:min(200px,30vw);padding:5px}
  .diff b{font-size:20px}
}
.ribbonTitle{margin:0;position:relative;font-family:var(--disp);font-weight:800;font-size:28px;padding:8px 54px 16px;background:url(img/ribbon.webp) center/100% 100% no-repeat;min-width:300px;text-align:center}
.diffs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.diff{width:min(200px,29vw);display:flex;flex-direction:column;align-items:center;background:var(--paper) url(img/paper.webp) center/300px;border:3px solid var(--ink);border-radius:14px;padding:8px;box-shadow:0 4px 0 var(--ink);opacity:.75;transition:transform .12s}
.diff.on{opacity:1;background-color:#fff7d6;outline:4px solid var(--red);transform:translateY(-3px)}
.diff .frame{width:100%;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:var(--sky);overflow:hidden;display:block}
.diff .frame img{width:100%;height:100%;object-fit:cover}
.diff b{font-family:var(--disp);font-size:24px;line-height:1.1;margin-top:4px}
.diff small{font-size:12px}
.optRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;background:rgba(251,246,234,.92);border:2.5px solid var(--ink);border-radius:12px;padding:6px 12px}
.seg{display:flex;gap:4px}
.seg button{min-width:40px;height:34px;padding:0 8px;border:2px solid var(--ink);border-radius:8px;background:var(--cream);font-family:var(--disp);font-size:17px}
.seg button.on{background:var(--red);color:var(--paper)}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sign{min-width:130px;height:54px;padding:0 22px;background:url(img/sign_blank.webp) center/100% 100% no-repeat;font-family:var(--disp);font-weight:800;font-size:19px;color:var(--ink);transition:transform .1s;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 0 rgba(35,26,20,.5))}
.sign.go{font-size:22px;min-width:170px;color:var(--red)}
.sign.wide{min-width:260px}
.sign[disabled]{filter:grayscale(1) opacity(.55)}
.seats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px}
.seatCard{width:112px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 3px 0 var(--ink)}
.seatCard .pf{width:70px;height:70px;border-radius:50%;border:2.5px solid var(--ink);overflow:hidden}
.seatCard .pf img{width:100%;height:100%;object-fit:cover}
.seatCard b{font-family:var(--disp);font-size:18px;line-height:1}
.seatCard .who{font-size:12px;border:2px solid var(--ink);border-radius:8px;padding:1px 8px;background:var(--cream)}
.seatCard.off{opacity:.4}
.seatCard .who.cpu{background:var(--sky)}
.chalk{position:relative;width:min(460px,92vw);aspect-ratio:4/3}
.chalk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.chalkTxt{position:absolute;left:14%;right:14%;top:16%;bottom:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f4f1e6;font-family:var(--disp);text-align:center;line-height:1.15;text-shadow:0 0 2px rgba(255,255,255,.4)}
.chalkTxt small{font-size:15px;opacity:.85}
.chalkTxt b{font-size:clamp(20px,6vw,34px);letter-spacing:.04em;word-break:break-all}
.chalkTxt span{font-size:13px;opacity:.8;word-break:break-all;font-family:var(--body)}
.present{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.present div{background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:3px 10px;display:flex;align-items:center;gap:6px}
.present img{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}

/* ---------- game layout ---------- */
#scrGame{padding:48px 10px 10px;display:grid;grid-template-columns:auto auto;gap:14px;align-items:start;justify-content:center;overflow:hidden}
#boardCol{display:flex;flex-direction:column;align-items:center;gap:10px}
#boardWrap{position:relative;width:var(--B);height:var(--B);overflow:hidden;border-radius:6px;touch-action:none}
#boardZoom{width:100%;height:100%;transform-origin:0 0}
#zoomBtns{position:absolute;right:calc(var(--u)*1.8);bottom:calc(var(--u)*1.8);display:none;flex-direction:column;gap:6px;z-index:6}
#zoomBtns button{width:34px;height:34px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);font-family:var(--disp);font-size:22px;line-height:1}
#side{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 58px);min-width:0;width:min(340px,100%)}
#turnRibbon{position:relative;height:66px;display:flex;align-items:center;justify-content:center}
#turnRibbon img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
#turnRibbon div{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:-8px}
#turnRibbon small{font-family:var(--disp);font-size:15px}
#turnRibbon b{font-family:var(--disp);font-weight:800;font-size:25px}
#turnRibbon.flip{animation:ribbonCurl .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ribbonCurl{0%{transform:rotateX(80deg) scale(.8)}100%{transform:none}}
#news{background:rgba(251,246,234,.94);border:2.5px solid var(--ink);border-radius:10px;padding:5px 10px;font-size:14px;min-height:34px;line-height:1.25}
#playerCards{display:flex;flex-direction:column;gap:8px;overflow:auto;padding:2px 4px 6px}
.pcard{position:relative;display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;background:var(--paper) url(img/paper.webp) center/300px;border:3px solid var(--ink);border-radius:12px;padding:6px 8px;box-shadow:0 3px 0 var(--ink);flex:none}
.pcard.cur{outline:4px solid #e6b43c;outline-offset:-1px;background-color:#fff7d6}
.pcard .pf{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);overflow:hidden;background:var(--pc)}
.pcard .pf img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pcard .nm{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.pcard .nm small{font-family:var(--body);font-size:11px;font-weight:800;border:1.5px solid var(--ink);border-radius:6px;padding:0 4px;background:var(--cream)}
.pcard .cash{display:flex;align-items:center;gap:4px;font-family:var(--disp);font-size:21px;line-height:1.1}
.pcard .cash img{width:26px;height:20px;object-fit:contain}
.pcard .deeds{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;align-items:center}
.pcard .deeds i{width:11px;height:15px;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);display:block;position:relative;overflow:hidden}
.pcard .deeds i::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--bc)}
.pcard .deeds i.m{opacity:.4}
.pcard .deeds em{font-style:normal;font-size:12px;display:flex;align-items:center;gap:2px;margin-left:4px}
.pcard .deeds em img{width:16px;height:16px}
.pcard .tag{position:absolute;right:-3px;top:8px;width:12px;height:30px;background:var(--pc);border:2px solid var(--ink);border-right:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,50% 80%)}
.pcard.out{filter:grayscale(.85);opacity:.7}
.pcard .jailb{font-size:11px;border:1.5px solid var(--ink);border-radius:6px;padding:0 4px;background:#d9d2bf}
.pcard .float{position:absolute;right:10px;top:4px;font-family:var(--disp);font-size:20px;pointer-events:none;animation:floatUp 1.1s ease-out forwards}
.float.plus{color:var(--green)} .float.minus{color:var(--red)}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-22px)}}

#actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:var(--B)}
.act{position:relative;flex:1 1 0;min-width:0;max-width:130px;height:62px;background:url(img/sign_blank.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:14px;line-height:1;padding:2px 6px 5px;transition:transform .1s;filter:drop-shadow(0 3px 0 rgba(35,26,20,.45))}
.act img{height:26px;width:auto;margin-bottom:1px}
.act span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.act[disabled]{filter:grayscale(1) brightness(1.05) opacity(.45);cursor:default}
.act.hot{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}10%{transform:rotate(-3deg) scale(1.05)}20%{transform:rotate(3deg) scale(1.05)}30%{transform:none}}

/* ---------- board ---------- */
#board{position:relative;width:var(--B);height:var(--B);display:grid;grid-template-columns:1.6fr repeat(9,1fr) 1.6fr;grid-template-rows:1.6fr repeat(9,1fr) 1.6fr;background:var(--dark);border:calc(var(--u)*.06) solid var(--ink);gap:calc(var(--u)*.025);padding:calc(var(--u)*.025);box-shadow:0 10px 30px rgba(35,26,20,.5)}
.sp{position:relative;background:var(--paper);overflow:hidden;display:flex;align-items:center;cursor:pointer}
.sp .band{position:absolute;background:var(--bc);overflow:hidden}
.sp .band::after{content:"";position:absolute;inset:0;background:url(img/paper.webp) center/120px;mix-blend-mode:multiply;opacity:.75}
.sp .vg{object-fit:contain}
.sp .nm{font-family:var(--disp);font-weight:700;line-height:1.02;text-align:center;font-size:calc(var(--u)*.185);color:var(--ink);overflow-wrap:anywhere}
.sp .pr{font-family:var(--body);font-weight:800;font-size:calc(var(--u)*.2);line-height:1}
.sp.special .nm{color:var(--red)}
/* bottom row: band on top, stacked */
.sp.bot,.sp.top{flex-direction:column;justify-content:flex-start;padding:calc(var(--u)*.25) calc(var(--u)*.03) calc(var(--u)*.05)}
.sp.bot .band,.sp.top .band{left:0;right:0;top:0;height:calc(var(--u)*.24)}
.sp.bot .vg,.sp.top .vg{width:calc(var(--u)*.86);height:calc(var(--u)*.7);margin:calc(var(--u)*.03) 0}
.sp.bot .nm,.sp.top .nm{flex:1;display:flex;align-items:center}
.sp.special.bot,.sp.special.top{padding-top:calc(var(--u)*.05)}
.sp.special.bot .vg,.sp.special.top .vg{width:calc(var(--u)*.95);height:calc(var(--u)*.85)}
/* side columns: band outer, row */
.sp.lft,.sp.rgt{flex-direction:row;padding:calc(var(--u)*.03) calc(var(--u)*.02)}
.sp.lft .nm,.sp.rgt .nm{font-size:calc(var(--u)*.175)}
.sp.lft{padding-left:calc(var(--u)*.26)}
.sp.rgt{padding-right:calc(var(--u)*.26);flex-direction:row-reverse}
.sp.lft .band{left:0;top:0;bottom:0;width:calc(var(--u)*.24)}
.sp.rgt .band{right:0;top:0;bottom:0;width:calc(var(--u)*.24)}
.sp.lft .vg,.sp.rgt .vg{width:calc(var(--u)*.52);height:calc(var(--u)*.8);flex:none}
.sp.lft .txt,.sp.rgt .txt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.06);min-width:0}
.sp.special.lft,.sp.special.rgt{padding-left:calc(var(--u)*.05);padding-right:calc(var(--u)*.05)}
.sp.special.lft .vg,.sp.special.rgt .vg{width:calc(var(--u)*.8)}
.sp.corner{padding:0;display:block}
.sp.corner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp.corner .cl{position:absolute;left:4%;right:4%;text-align:center;font-family:var(--disp);font-weight:800;font-size:calc(var(--u)*.24);line-height:1;color:var(--ink);background:rgba(251,246,234,.9);border:calc(var(--u)*.03) solid var(--ink);border-radius:calc(var(--u)*.1);padding:calc(var(--u)*.04) calc(var(--u)*.03)}
.sp.corner .cl.t{top:4%} .sp.corner .cl.b{bottom:4%}
.sp.corner .cl.b.v{right:auto;left:3%;width:auto;padding:calc(var(--u)*.03) calc(var(--u)*.06)}
.sp.corner .cl small{display:block;font-size:.72em;font-family:var(--body);font-weight:800}
.sp .own{position:absolute;width:calc(var(--u)*.22);height:calc(var(--u)*.34);background:var(--pc);border:calc(var(--u)*.03) solid var(--ink);z-index:2;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.sp.bot .own{right:calc(var(--u)*.04);bottom:calc(var(--u)*-.03)}
.sp.top .own{right:calc(var(--u)*.04);top:auto;bottom:calc(var(--u)*-.03)}
.sp.lft .own{right:calc(var(--u)*.03);top:calc(var(--u)*-.03)}
.sp.rgt .own{left:calc(var(--u)*.03);top:calc(var(--u)*-.03)}
.sp .hs{position:absolute;display:flex;gap:0;z-index:3;pointer-events:none}
.sp.bot .hs,.sp.top .hs{left:0;right:0;top:calc(var(--u)*-.06);justify-content:center}
.sp.lft .hs{left:calc(var(--u)*-.04);top:0;bottom:0;flex-direction:column;justify-content:center}
.sp.rgt .hs{right:calc(var(--u)*-.04);top:0;bottom:0;flex-direction:column;justify-content:center}
.sp .hs img{width:calc(var(--u)*.27);height:calc(var(--u)*.27);filter:drop-shadow(0 1px 0 var(--ink))}
.sp .hs img.hotel{width:calc(var(--u)*.38);height:calc(var(--u)*.38)}
.sp .hs img.plop{animation:plop .7s cubic-bezier(.3,1.8,.5,1)}
@keyframes plop{0%{transform:translateY(-200%) scale(.6,1.4)}45%{transform:translateY(0) scale(1.4,.6)}70%{transform:scale(.9,1.15)}100%{transform:none}}
.sp.mort::before{content:"";position:absolute;inset:0;background:rgba(58,36,24,.45);z-index:2}
.sp.mort::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:calc(var(--u)*.6);color:var(--paper);z-index:2;transform:rotate(-15deg);text-shadow:0 0 2px var(--ink)}
.sp.hl{box-shadow:inset 0 0 0 calc(var(--u)*.06) #e6b43c}
.sp.land{animation:landGlow 1s ease-out}
@keyframes landGlow{0%{box-shadow:inset 0 0 0 calc(var(--u)*.1) #ffd54a}100%{box-shadow:inset 0 0 0 0 #ffd54a}}

#center{grid-row:2/11;grid-column:2/11;position:relative;background:url(img/board_center.webp) center/cover;overflow:hidden}
.boardTitle{position:absolute;left:50%;top:4%;width:76%;transform:translateX(-50%) rotate(-3deg);--tw:calc(var(--B) * .55)}
.deck{position:absolute;width:24%;aspect-ratio:3/4;top:46%}
.deck img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(calc(var(--u)*.05) calc(var(--u)*.08) 0 rgba(35,26,20,.4))}
.deck span{position:absolute;left:8%;right:8%;top:16%;text-align:center;font-family:var(--disp);font-weight:800;font-size:calc(var(--u)*.3);line-height:1;color:var(--paper);-webkit-text-stroke:calc(var(--u)*.025) var(--ink);paint-order:stroke fill}
.deck.chest span{color:var(--paper)}
.deck.chance{left:18%;transform:rotate(-6deg)}
.deck.chest{right:18%;transform:rotate(5deg)}
.deck.pulse{animation:deckPulse .5s}
@keyframes deckPulse{50%{transform:scale(1.12) rotate(0)}}
#dice{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.die{position:absolute;width:calc(var(--u)*.95);height:calc(var(--u)*.95);left:40%;top:80%;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(calc(var(--u)*.04) calc(var(--u)*.07) 0 rgba(35,26,20,.45))}
#die1{left:52%;top:78%}
#bubble{position:absolute;left:8%;right:8%;bottom:28%;top:auto;text-align:center;font-family:var(--disp);font-weight:800;font-size:calc(var(--u)*.36);line-height:1.05;background:var(--paper);border:calc(var(--u)*.05) solid var(--ink);border-radius:calc(var(--u)*.25);padding:calc(var(--u)*.12) calc(var(--u)*.2);box-shadow:0 calc(var(--u)*.06) 0 var(--ink);z-index:4;animation:pop .35s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:none}}

#tokens,#fx{position:absolute;inset:0;pointer-events:none}
.tok{position:absolute;width:calc(var(--u)*.7);height:calc(var(--u)*.94);left:0;top:0;margin-left:calc(var(--u)*-.35);margin-top:calc(var(--u)*-.9);z-index:5;transform-origin:50% 100%}
.tok img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(var(--u)*.04) 0 rgba(35,26,20,.35))}
.tok::before{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:16%;border-radius:50%;background:rgba(35,26,20,.35);filter:blur(1px)}
.tok.cur{z-index:7}
.tok.cur::after{content:"";position:absolute;left:50%;top:calc(var(--u)*-.28);width:calc(var(--u)*.22);height:calc(var(--u)*.22);margin-left:calc(var(--u)*-.11);background:var(--pc);border:calc(var(--u)*.035) solid var(--ink);clip-path:polygon(0 0,100% 0,50% 100%);animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(calc(var(--u)*-.08))}}
.fxImg{position:absolute;pointer-events:none;z-index:9}
.coin{position:absolute;font-family:var(--disp);font-weight:800;color:var(--green);font-size:calc(var(--u)*.4);-webkit-text-stroke:calc(var(--u)*.02) var(--ink);paint-order:stroke fill;z-index:10}

/* ---------- modal ---------- */
#modal{position:absolute;inset:0;background:rgba(35,26,20,.45);display:flex;align-items:center;justify-content:center;z-index:40;padding:12px}
#modalBox{background:var(--paper) url(img/paper.webp) center/300px;border:3.5px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);padding:14px;max-width:min(560px,100%);max-height:100%;overflow:auto;width:100%;animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
#modalBox h3{margin:0 0 8px;font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.1;text-align:center}
#modalBox p{margin:6px 0;font-size:15px;line-height:1.35}
.deed{border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper);max-width:300px;margin:0 auto}
.deed .hd{background:var(--bc);padding:8px;text-align:center;position:relative;border-bottom:3px solid var(--ink)}
.deed .hd::after{content:"";position:absolute;inset:0;background:url(img/paper.webp) center/120px;mix-blend-mode:multiply;opacity:.7}
.deed .hd small{position:relative;z-index:1;display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.deed .hd b{position:relative;z-index:1;font-family:var(--disp);font-weight:800;font-size:24px;line-height:1}
.deed .vgBig{display:block;width:120px;height:110px;object-fit:contain;margin:6px auto 0}
.deed table{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0}
.deed td{padding:2px 10px}
.deed td:last-child{text-align:right;font-family:var(--disp);font-size:16px}
.deed .foot{font-size:13px;padding:4px 10px 8px;border-top:2px dashed rgba(35,26,20,.3);text-align:center}
.mbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.mbtn{min-width:110px;height:48px;padding:0 16px;background:url(img/sign_blank.webp) center/100% 100% no-repeat;font-family:var(--disp);font-weight:800;font-size:17px;filter:drop-shadow(0 3px 0 rgba(35,26,20,.45));transition:transform .1s}
.mbtn:active{transform:scale(1.06,.9)}
.mbtn[disabled]{filter:grayscale(1) opacity(.45)}
.mbtn.red{color:var(--red)}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;border:2px solid var(--ink);border-radius:8px;padding:4px 6px;background:rgba(255,255,255,.5)}
.mrow .c{width:10px;height:100%;min-height:30px;background:var(--bc);border-radius:3px}
.mrow .n{font-family:var(--disp);font-size:16px;line-height:1.05}
.mrow .n small{display:block;font-family:var(--body);font-size:12px;opacity:.8}
.mrow .b{display:flex;gap:4px}
.sbtn{height:32px;padding:0 9px;border:2px solid var(--ink);border-radius:8px;background:var(--cream);font-family:var(--disp);font-size:14px;line-height:1;white-space:nowrap}
.sbtn[disabled]{opacity:.35}
.sbtn.on{background:var(--teal);color:var(--paper)}
.trade{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tradeHead{width:100%;aspect-ratio:16/6;object-fit:cover;border-radius:10px;border:2.5px solid var(--ink);margin-bottom:6px;object-position:50% 40%}
.tcol{border:2.5px solid var(--ink);border-radius:10px;padding:6px;background:rgba(255,255,255,.45);min-width:0}
.tcol h4{margin:0 0 4px;font-family:var(--disp);font-size:17px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.tcol h4 img{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:var(--pc)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{border:2px solid var(--ink);border-radius:7px;padding:2px 6px 2px 4px;font-size:12px;background:var(--paper);display:flex;align-items:center;gap:4px;line-height:1.1;text-align:left}
.chip i{width:8px;height:16px;background:var(--bc);border-radius:2px;flex:none}
.chip.on{background:#ffe9a8;outline:2px solid var(--red)}
.chip[disabled]{opacity:.35}
.cashpick{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;flex-wrap:wrap}
.cashpick b{font-family:var(--disp);font-size:18px;min-width:54px;text-align:center}
.partners{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.partners button{border:2.5px solid var(--ink);border-radius:50%;width:46px;height:46px;overflow:hidden;background:var(--pc);opacity:.5}
.partners button.on{opacity:1;outline:3px solid var(--red)}
.partners img{width:100%;height:100%;object-fit:cover}
.auc{text-align:center}
.auc .bidBig{font-family:var(--disp);font-weight:800;font-size:54px;line-height:1;color:var(--red);margin:6px 0 0}
.auc .bidWho{font-size:15px;min-height:20px}
.auc .bidders{display:flex;gap:6px;justify-content:center;margin:8px 0}
.auc .bidders div{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);overflow:hidden;background:var(--pc);opacity:.35}
.auc .bidders div.in{opacity:1}
.auc .bidders div.now{outline:3px solid #e6b43c;transform:scale(1.12)}
.auc .bidders img{width:100%;height:100%;object-fit:cover}
.mini{display:flex;align-items:center;gap:10px;justify-content:center}
.mini img{width:70px;height:64px;object-fit:contain}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--ink);border-radius:10px;padding:8px 12px;margin:6px 0;background:rgba(255,255,255,.5);font-size:16px;width:100%}
.toggle i{width:46px;height:26px;border-radius:13px;background:#cbbf9f;border:2px solid var(--ink);position:relative;flex:none;font-style:normal}
.toggle i::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);top:2px;left:2px;transition:left .15s}
.toggle.on i{background:var(--teal)}
.toggle.on i::after{left:22px}

/* ---------- card show ---------- */
#cardShow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:45;background:rgba(35,26,20,.3);perspective:900px}
.bigCard{width:min(330px,82vw);aspect-ratio:3/4;position:relative;transform-style:preserve-3d;animation:cardIn .55s cubic-bezier(.3,1.5,.5,1) both}
.bigCard .back,.bigCard .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px}
.bigCard .back{background:center/100% 100% no-repeat}
.bigCard .face{transform:rotateY(180deg);background:var(--paper) url(img/paper.webp) center/300px;border:4px solid var(--ink);display:flex;flex-direction:column;align-items:center;padding:14px;gap:8px;box-shadow:0 6px 0 var(--ink)}
.bigCard .face .h{width:100%;text-align:center;font-family:var(--disp);font-weight:800;font-size:26px;color:var(--paper);background:var(--red);border:3px solid var(--ink);border-radius:10px;padding:2px;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.bigCard.chest .face .h{background:#E1B43C}
.bigCard .face img{width:46%;aspect-ratio:1;object-fit:contain}
.bigCard .face p{font-size:clamp(16px,4.6vw,20px);text-align:center;line-height:1.25;margin:0;flex:1;display:flex;align-items:center}
.bigCard .face small{font-size:12px;opacity:.7}
.bigCard.flipped{animation:none;transform:rotateY(180deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.bigCard.away{transition:transform .25s ease-in,opacity .25s;transform:rotateY(180deg) translateY(-60vh) scale(.4) rotate(20deg);opacity:0}
@keyframes cardIn{0%{transform:translateY(40vh) scale(.3) rotate(-25deg)}100%{transform:none}}

/* ---------- iris ---------- */
#iris{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at var(--cx,50%) var(--cy,45%),transparent 0 var(--r,150vmax),#120c08 calc(var(--r,150vmax) + 1px))}
#irisInner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
#irisImg{width:min(220px,48vmin);aspect-ratio:1;border-radius:50%;border:4px solid var(--ink);background:var(--sky);object-fit:cover}
#irisEnd{font-family:var(--disp);font-weight:800;font-size:clamp(40px,10vmin,72px);color:var(--paper);line-height:1;letter-spacing:.06em;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--red)}
#irisWho{margin:0;font-family:var(--disp);font-size:22px;color:var(--paper)}

#toast{position:absolute;left:50%;top:50px;transform:translateX(-50%);background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;padding:8px 16px;z-index:70;font-size:15px;box-shadow:0 3px 0 var(--ink);max-width:90vw;text-align:center}

/* ---------- portrait / narrow ---------- */
body.portrait #scrGame{display:flex;flex-direction:column;align-items:center;padding:46px 6px 8px;gap:6px;overflow:auto}
body.portrait #boardCol{gap:6px;width:100%}
body.portrait #side{width:100%;max-height:none;order:-0}
body.portrait #zoomBtns{display:flex}
body.portrait #turnRibbon{height:50px;max-width:300px;width:80%;margin:0 auto}
body.portrait #turnRibbon b{font-size:20px} body.portrait #turnRibbon small{font-size:12px}
body.portrait #news{font-size:13px;min-height:0;padding:4px 8px}
body.portrait #playerCards{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;gap:6px}
body.portrait .pcard{width:186px;scroll-snap-align:start;grid-template-columns:46px 1fr;gap:6px;padding:5px 6px}
body.portrait .pcard .pf{width:46px;height:46px}
body.portrait .pcard .nm{font-size:16px}
body.portrait .pcard .cash{font-size:17px}
body.portrait #actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%}
body.portrait .act{max-width:none;height:52px;font-size:12.5px}
body.portrait .act img{height:21px}
body.portrait #side{display:contents}
body.portrait #turnRibbon{order:1} body.portrait #news{order:2;width:100%} body.portrait #playerCards{order:3;width:100%} body.portrait #boardCol{order:0}
body.portrait #actions{order:4;position:sticky;bottom:0}
body.portrait #boardCol #actions{order:9}

#irisInner.pre>*:not(#irisImg){opacity:0}
#irisInner>*{transition:opacity .3s}
@media (max-width:640px){.diffs{gap:6px;flex-wrap:nowrap}.diff{width:31vw;padding:5px}.diff b{font-size:20px}.diff small{font-size:11px}}