/* 遊戲畫面：貼底的牌桌面板（拉霸、百家樂、21 點、骰寶、手足球共用） */
#modal.game { align-items:flex-end; background:linear-gradient(#0000 22%, #000d 58%); padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
#modal.game .box { width:min(440px,100%); padding:0; text-align:center; overflow:hidden; border:1px solid #ffd16699; border-radius:22px;
  background:linear-gradient(180deg,#34143f 0%,#1d0a26 100%); box-shadow:0 -6px 40px #000c, inset 0 1px 0 #ffffff22; }
.g-head { display:flex; align-items:center; gap:10px; padding:12px 12px 10px 16px; background:linear-gradient(180deg,#4a1c58,#34143f); border-bottom:1px solid #ffd16644; text-align:left; }
.g-head .t { flex:1; min-width:0; }
.g-head .t b { display:block; font-size:19px; font-weight:900; color:var(--gold); letter-spacing:.08em; }
.g-head .t small { display:block; font-size:11.5px; color:#ffffffb0; margin-top:2px; line-height:1.45; }
.g-bal { flex:none; background:#0007; border:1px solid #ffd16655; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; color:#fffc; white-space:nowrap; }
.g-bal b { color:var(--gold); font-variant-numeric:tabular-nums; margin-left:3px; }
.g-x { flex:none; width:34px; height:34px; border-radius:50%; border:0; background:#ffffff1f; color:#fff; font-size:20px; font-weight:700; font-family:inherit; line-height:1; }
.g-body { padding:12px 12px 14px; }
.felt { position:relative; border-radius:16px; padding:12px 10px; border:2px solid #d4a24a; box-shadow:inset 0 0 0 3px #0003, inset 0 0 34px #0008;
  background:radial-gradient(120% 90% at 50% 0%,#1f9a6b 0%,#0f6b4c 55%,#084232 100%); }
.felt.red { background:radial-gradient(120% 90% at 50% 0%,#b3283a 0%,#7d1424 55%,#4d0a16 100%); }
.felt.dark { background:radial-gradient(120% 90% at 50% 0%,#3b2a66 0%,#22163f 60%,#150c29 100%); }
#res { min-height:26px; margin:9px 0 4px; font-weight:900; font-size:16px; color:var(--gold); letter-spacing:.04em; }
#res.win { animation:g-pop .45s; text-shadow:0 0 14px #ffd166aa; } #res.lose { color:#ffffffa8; font-weight:700; }
@keyframes g-pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.18); } 100% { transform:scale(1); opacity:1; } }

/* 籌碼 */
.chipsel { display:flex; justify-content:center; align-items:center; gap:10px; margin:6px 0 10px; }
.chipsel span { font-size:12px; color:#ffffff99; }
.ck { width:48px; height:48px; border-radius:50%; border:0; padding:0; font-family:inherit; font-weight:900; font-size:13px; color:#fff; position:relative;
  background:#2f6fdb; box-shadow:0 3px 0 #0007, inset 0 0 0 4px #ffffff, inset 0 0 0 6px #2f6fdb; opacity:.62; transition:transform .15s, opacity .15s; }
.ck::after { content:''; position:absolute; inset:9px; border-radius:50%; border:1.5px dashed #ffffffaa; }
.ck[data-v="100"] { background:#d43a4a; box-shadow:0 3px 0 #0007, inset 0 0 0 4px #fff, inset 0 0 0 6px #d43a4a; }
.ck[data-v="500"] { background:#7a3fd1; box-shadow:0 3px 0 #0007, inset 0 0 0 4px #fff, inset 0 0 0 6px #7a3fd1; }
.ck[data-v="1000"] { background:#1b1b22; box-shadow:0 3px 0 #0007, inset 0 0 0 4px #ffd166, inset 0 0 0 6px #1b1b22; color:#ffd166; font-size:12px; }
.ck.on { opacity:1; transform:translateY(-5px) scale(1.08); }

/* 按鈕 */
.g-acts { display:flex; gap:8px; justify-content:center; }
.gb { flex:1; min-width:0; border:0; border-radius:14px; font-family:inherit; font-weight:900; font-size:17px; padding:12px 6px; color:#fff; background:#ffffff22;
  box-shadow:0 4px 0 #0006; line-height:1.2; transition:transform .08s, filter .15s; }
.gb small { display:block; font-size:11px; font-weight:700; opacity:.85; margin-top:2px; }
.gb:active { transform:translateY(3px); box-shadow:0 1px 0 #0006; }
.gb:disabled { filter:grayscale(.7) brightness(.6); }
.gb.gold { background:linear-gradient(180deg,#ffe08a,#f5b021); color:#2a1503; box-shadow:0 4px 0 #a86a00; }
.gb.blue { background:linear-gradient(180deg,#4a9cf0,#2466c4); box-shadow:0 4px 0 #153f80; }
.gb.redb { background:linear-gradient(180deg,#f0606a,#c22a3a); box-shadow:0 4px 0 #7a1420; }
.gb.green { background:linear-gradient(180deg,#4fc46a,#23893f); box-shadow:0 4px 0 #125225; }
.gb.ghost { flex:0 0 auto; padding:12px 16px; font-size:14px; }

/* 撲克牌 */
.hand { display:flex; justify-content:center; align-items:center; min-height:70px; gap:5px; flex-wrap:nowrap; }
.cd { position:relative; flex:none; width:46px; height:64px; border-radius:7px; background:linear-gradient(160deg,#fff,#f1eee6); color:#16131c; font-style:normal;
  box-shadow:0 3px 6px #0008; animation:g-deal .32s ease-out both; }
.cd b { position:absolute; left:5px; top:3px; font-size:15px; font-weight:900; line-height:1.1; letter-spacing:-.04em; }
.cd i { position:absolute; left:0; right:0; bottom:5px; font-style:normal; font-size:27px; line-height:1; text-align:center; }
.cd.red { color:#cf1626; }
.cd.back { background:repeating-linear-gradient(45deg,#8a1626 0 5px,#a81e30 5px 10px); border:3px solid #fff; }
.hand.many .cd { margin-left:-14px; } .hand.many .cd:first-child { margin-left:0; }
@keyframes g-deal { from { transform:translate(40px,-46px) rotate(18deg); opacity:0; } }
.pts { display:inline-block; min-width:44px; margin-top:6px; padding:2px 10px; border-radius:999px; background:#0007; font-size:13px; font-weight:800; color:#fff; min-height:22px; }
.pts:empty { visibility:hidden; }

/* 拉霸 */
.slot { background:linear-gradient(180deg,#5a1a6e,#2c0c3a); border:2px solid #ffd166; border-radius:18px; padding:10px; box-shadow:inset 0 0 0 3px #0004, 0 0 22px #ff4fd855; }
.slot .lights { display:flex; justify-content:space-between; padding:0 6px 8px; }
.slot .lights u { width:9px; height:9px; border-radius:50%; background:#ffd166; box-shadow:0 0 8px #ffd166; animation:g-blink 1s infinite; }
.slot .lights u:nth-child(even) { animation-delay:.5s; background:#ff7ad9; box-shadow:0 0 8px #ff7ad9; }
@keyframes g-blink { 50% { opacity:.25; } }
.reels { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0; padding:7px; background:#12061a; border-radius:12px; }
.reels::after { content:''; position:absolute; left:2px; right:2px; top:50%; height:2px; margin-top:-1px; background:#ff3355; box-shadow:0 0 8px #ff3355; opacity:.75; pointer-events:none; }
.reel { height:168px; overflow:hidden; border-radius:9px; background:linear-gradient(180deg,#cfc8bb 0%,#fff 22%,#fff 78%,#cfc8bb 100%); }
.reel .strip { will-change:transform; }
.reel .sym { height:56px; display:flex; align-items:center; justify-content:center; }
.reel .sym svg { width:46px; height:46px; display:block; }
.reels.hit .reel { animation:g-hit .5s 3; }
@keyframes g-hit { 50% { box-shadow:0 0 0 3px #ffd166, 0 0 18px #ffd166; } }
.pay { display:flex; justify-content:center; gap:12px; margin-top:8px; font-size:11.5px; color:#ffffffc0; }
.pay b { color:var(--gold); }

/* 百家樂 */
.bac { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.bac > div { border-radius:12px; padding:8px 4px 9px; background:#00000038; border:1.5px solid #ffffff22; transition:box-shadow .3s, border-color .3s; }
.bac > div.won { border-color:#ffd166; box-shadow:0 0 18px #ffd16688, inset 0 0 18px #ffd16622; }
.bac .side { display:inline-block; font-weight:900; font-size:15px; padding:1px 14px; border-radius:999px; margin-bottom:6px; color:#fff; }
.side.pl { background:#2466c4; } .side.bk { background:#c22a3a; }
.road { display:flex; gap:4px; justify-content:center; margin-top:9px; min-height:16px; }
.road i { width:16px; height:16px; border-radius:50%; font-style:normal; font-size:10px; font-weight:900; line-height:16px; color:#fff; }
.road .p { background:#2f7fd1; } .road .b { background:#d43a4a; } .road .t { background:#2f9e44; }

/* 21 點 */
.bj .row { margin:2px 0; } .bj .who { font-size:12px; font-weight:800; color:#ffffffb8; letter-spacing:.2em; margin-bottom:4px; }
.bj hr { border:0; border-top:1px dashed #ffffff33; margin:8px 20px; }

/* 骰寶 */
.dice { display:flex; justify-content:center; gap:12px; padding:4px 0 8px; }
.die { width:54px; height:54px; border-radius:11px; background:linear-gradient(150deg,#fff,#e8e4da); box-shadow:0 4px 0 #b9b2a3, 0 7px 10px #0007; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:7px; gap:1px; }
.die u { border-radius:50%; } .die u.on { background:#1b1a22; } .die.one u.on, .die.four u.on { background:#cf1626; }
.dice.roll .die { animation:g-roll .22s infinite; } .dice.roll .die:nth-child(2) { animation-delay:.07s; } .dice.roll .die:nth-child(3) { animation-delay:.14s; }
@keyframes g-roll { 0% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-12px) rotate(22deg); } 100% { transform:translateY(0) rotate(0); } }
.sum { font-size:13px; font-weight:800; color:#fff; min-height:20px; }
.bets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:8px; }
.bet { position:relative; border:1.5px solid #ffd16688; border-radius:11px; background:#00000040; color:#fff; font-family:inherit; padding:8px 2px 7px; font-weight:900; font-size:19px; line-height:1.15; }
.bet small { display:block; font-size:10.5px; font-weight:700; color:#ffffffb0; margin-top:2px; }
.bet.wide { grid-column:1 / -1; font-size:16px; padding:7px 2px; } .bet.wide small { display:inline; margin-left:8px; }
.bet em { position:absolute; right:-4px; top:-7px; min-width:30px; padding:2px 6px; border-radius:999px; background:var(--gold); color:#2a1503; font-style:normal; font-size:11px; font-weight:900; box-shadow:0 2px 0 #a86a00; }
.bet.hit { border-color:#ffd166; background:#ffd16633; box-shadow:0 0 14px #ffd16688; }

/* 手足球 */
.fb-score { display:flex; justify-content:center; align-items:center; gap:14px; font-weight:900; font-size:15px; margin-bottom:8px; }
.fb-score b { font-size:26px; font-variant-numeric:tabular-nums; min-width:22px; }
.fb-score .me { color:#7cc4ff; } .fb-score .ai { color:#ff8a8a; }
#fb { display:block; height:min(400px,46vh); width:auto; max-width:100%; margin:0 auto; border-radius:12px; border:3px solid #6b4423; box-shadow:0 6px 16px #0009; touch-action:none; }
@media (max-height:700px) { .reel { height:138px; } .reel .sym { height:46px; } .reel .sym svg { width:38px; height:38px; } .cd { width:40px; height:56px; } .hand { min-height:60px; } }

/* 老虎機「竹林天降」：6×5 盤面 */
.tg-wrap { position:relative; border-radius:16px; padding:8px; border:2px solid #d4a24a; background:radial-gradient(120% 90% at 50% 0%,#1f6b3f 0%,#0f4226 55%,#08281a 100%); box-shadow:inset 0 0 0 3px #0003, inset 0 0 30px #0008; }
.tg { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.tg-col { display:grid; grid-template-rows:repeat(5,auto); gap:4px; min-width:0; }
.tg-cell { aspect-ratio:1; border-radius:9px; background:#ffffff14; display:flex; align-items:center; justify-content:center; transition:opacity .2s, transform .2s; }
.tg-cell svg { width:84%; height:84%; display:block; filter:drop-shadow(0 2px 2px #0007); }
.tg-cell.drop { animation:tg-drop .34s cubic-bezier(.3,1.3,.6,1) both; }
@keyframes tg-drop { from { transform:translateY(-360%); opacity:0; } 60% { opacity:1; } }
.tg-cell.win { background:#ffd16655; box-shadow:0 0 0 2px #ffd166, 0 0 14px #ffd166; animation:tg-pulse .3s 2; }
@keyframes tg-pulse { 50% { transform:scale(1.14); } }
.tg-cell.gone { opacity:0; transform:scale(.3); }
.tg-cell.orb.glow, .tg-cell.sc.glow { background:#ffb70355; box-shadow:0 0 0 2px #fff6c8, 0 0 18px #ffb703; animation:tg-pulse .35s 3; }
.tg-free { display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; margin:0 0 6px; padding:5px 10px; border-radius:999px; background:#000a; border:1px solid #ffd16688; font-size:12px; font-weight:700; color:#fffc; }
.tg-free b { color:var(--gold); font-variant-numeric:tabular-nums; }
#tres { min-height:24px; margin:8px 0 2px; font-weight:900; font-size:14.5px; color:var(--gold); line-height:1.5; }
#tres.win { text-shadow:0 0 12px #ffd166aa; } #tres.lose { color:#ffffffa8; font-weight:700; }
.tg-rule { margin-top:8px; font-size:11.5px; color:#ffffffb0; line-height:1.5; }
.tg-link { border:0; background:none; color:var(--gold); font:inherit; font-weight:800; text-decoration:underline; padding:0; }
.tg-pay { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; text-align:left; font-size:11.5px; font-weight:700; color:#fff; }
.tg-pay > div { display:flex; align-items:center; gap:6px; } .tg-pay i { width:22px; height:22px; flex:none; } .tg-pay i svg { width:100%; height:100%; } .tg-pay span { color:#ffe08a; white-space:nowrap; }
.tg-pay .note { grid-column:1 / -1; color:#ffffffb0; font-weight:500; }
#tbuy small, #tspin small { font-size:10.5px; }
@media (max-height:720px) { .tg-cell { border-radius:7px; } .tg { gap:3px; } .tg-col { gap:3px; } .tg-wrap { padding:6px; } }

/* 老虎機兩側的小熊貓：平常輕輕晃，丟倍數球時舉手，中獎時跳一下 */
.tg-stage { display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:74px; margin:-2px 0 4px; }
.tg-panda { flex:none; width:74px; height:74px; animation:tg-idle 2.6s ease-in-out infinite; transform-origin:50% 100%; }
.tg-panda.r { animation-delay:-1.3s; } .tg-panda.r svg { transform:scaleX(-1); }
.tg-panda svg { width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 3px 3px #0008); }
.tg-panda .arm { transform-box:fill-box; transform-origin:50% 88%; transform:rotate(128deg); transition:transform .25s; }
.tg-panda.throw .arm { animation:tg-throw .62s ease-out; }
@keyframes tg-throw { 0% { transform:rotate(128deg); } 28% { transform:rotate(-38deg); } 46% { transform:rotate(24deg); } 100% { transform:rotate(128deg); } }
@keyframes tg-idle { 50% { transform:rotate(-2.5deg) translateY(-1.5px); } }
.tg-panda.yay { animation:tg-yay .5s ease-out; } @keyframes tg-yay { 30% { transform:translateY(-12px) scale(1.06); } 60% { transform:translateY(0) scale(.97); } }
.tg-mid { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; padding-bottom:4px; }
.tg-mid .tg-free { margin:0; width:100%; justify-content:center; gap:4px 10px; padding:4px 8px; font-size:11px; border-radius:12px; }
.tg-tip { font-size:11px; color:#ffffff99; font-weight:700; } .tg-stage.free .tg-tip { display:none; }
.tg-stage.free .tg-panda svg { filter:drop-shadow(0 0 8px #ffd166) drop-shadow(0 3px 3px #0008); }
.tg-cell.pend { opacity:0; } .tg-cell.land { animation:tg-land .3s ease-out; } @keyframes tg-land { 0% { transform:scale(1.35); } 60% { transform:scale(.9); } }
.tg-fly { position:absolute; left:0; top:0; z-index:3; pointer-events:none; display:flex; align-items:center; justify-content:center; will-change:transform; }
.tg-fly svg { width:84%; height:84%; filter:drop-shadow(0 0 8px #ffb703); }
@media (max-height:720px) { .tg-stage { height:50px; } .tg-panda { width:50px; height:50px; } .tg-tip { display:none; } #modal.game .g-head .t small { display:none; } .tg-rule { display:none; } }
@media (prefers-reduced-motion: reduce) { .tg-panda { animation:none; } }

/* 百家樂補牌：第三張打橫，放在前兩張的上方（國際牌桌的擺法） */
.bac .hand { flex-wrap:wrap; align-content:flex-end; min-height:118px; }
.bac .hand::before { content:''; flex-basis:100%; height:0; order:-1; }
.bac .hand .cd:nth-child(3) { order:-2; transform:rotate(90deg); margin:-9px 0 -7px; }
@media (max-height:700px) { .bac .hand { min-height:102px; } .bac .hand .cd:nth-child(3) { margin:-8px 0 -6px; } }