/* 第 4 輪：HUD、小視窗遊戲、商店、結算 */
.coin { display:inline-block; width:1em; height:1em; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff6b0 0, #ffd23a 45%, #e8a010 100%); border:2px solid #c98a00; vertical-align:-0.15em; position:relative; box-shadow:0 1px 2px rgba(120,70,0,.35); }
.coin::after { content:''; position:absolute; inset:22%; border-radius:50%; border:1.5px solid rgba(160,100,0,.55); }

/* ---- HUD */
#prog { position:absolute; left:50%; top:calc(10px + env(safe-area-inset-top)); transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:5px 8px 5px 6px; background:var(--panel); border:1px solid var(--line); border-radius:999px; box-shadow:0 3px 12px var(--shadow); backdrop-filter:blur(6px); z-index:4; white-space:nowrap; }
#prog.lowz { z-index:1; }
.pg-lv { display:flex; align-items:center; gap:7px; }
.pg-lv > b { background:linear-gradient(135deg,#ffb02e,#ff7f4f); color:#fff; font-size:14px; padding:3px 11px; border-radius:999px; text-shadow:0 1px 1px rgba(120,50,0,.4); }
.pg-lv.bump > b { animation:bump .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 0% { transform:scale(1); } 30% { transform:scale(1.5) rotate(-6deg); } 100% { transform:scale(1); } }
.pg-bar { position:relative; display:block; width:112px; height:16px; border-radius:8px; background:rgba(74,58,92,.16); overflow:hidden; }
.pg-bar i { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#7fd9b0,#4fc7a4); border-radius:8px; transition:width .7s cubic-bezier(.3,1.2,.4,1); }
.pg-bar em { position:absolute; inset:0; font-style:normal; font-size:11px; font-weight:800; text-align:center; line-height:16px; color:#2d4a45; text-shadow:0 0 3px #fff, 0 0 3px #fff; }
.pg-coin { display:flex; align-items:center; gap:5px; font-size:15px; font-weight:800; padding:2px 10px 2px 8px; background:#fff7dc; border-radius:999px; border:1px solid rgba(200,140,0,.35); }
.pg-coin .coin { width:16px; height:16px; }
#statBtn { padding:3px 11px; font-size:13px; font-weight:700; }
#progGuest { font-size:12px; padding:2px 8px; color:var(--tx); }
#statcard { position:absolute; left:50%; top:calc(56px + env(safe-area-inset-top)); transform:translateX(-50%); width:min(330px, calc(100vw - 20px)); background:var(--card); border:1px solid var(--line); border-top:4px solid var(--acc); border-radius:16px; padding:12px 14px; box-shadow:0 10px 30px var(--shadow); z-index:5; }
.sc-head { display:flex; justify-content:space-between; align-items:center; font-size:17px; } .sc-head span { background:var(--acc); color:var(--acc-tx); font-weight:800; border-radius:999px; padding:1px 10px; font-size:13px; }
.sc-sub { font-size:12px; opacity:.75; margin:2px 0 8px; }
.sc-row { display:grid; grid-template-columns:56px 1fr 30px; align-items:center; gap:6px; margin:6px 0; font-size:14px; font-weight:700; }
.sc-row .bar { height:12px; border-radius:6px; background:rgba(74,58,92,.14); overflow:hidden; } .sc-row .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb347,#ff7f4f); border-radius:6px; }
.sc-row:nth-of-type(2) .bar i { background:linear-gradient(90deg,#7fb2ff,#5b8def); } .sc-row:nth-of-type(3) .bar i { background:linear-gradient(90deg,#ffd23a,#ffb02e); }
.sc-row small { grid-column:2 / 4; font-size:11px; font-weight:500; opacity:.7; margin-top:-3px; }
.sc-note { font-size:11px; opacity:.7; margin:6px 0; line-height:1.5; }
@media (max-width:700px) {
  #prog { top:calc(10px + 44px + env(safe-area-inset-top)); left:auto; right:8px; transform:none; gap:6px; padding:4px 6px; }
  .pg-bar { width:70px; } .pg-lv > b { font-size:12px; padding:2px 8px; }
  #statcard { top:calc(10px + 90px + env(safe-area-inset-top)); left:auto; right:8px; transform:none; }
}
#fxlayer { position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.fxpop { position:fixed; transform:translate(-50%,-50%); font-weight:900; font-size:22px; color:#e8a010; text-shadow:0 2px 0 #fff, 0 0 8px #fff; animation:fxup 1.3s ease-out forwards; white-space:nowrap; }
.fxpop.loss { color:#e8553a; } .fxpop.exp { color:#2f9a6e; font-size:18px; } .fxpop .coin { width:20px; height:20px; }
@keyframes fxup { 0% { opacity:0; transform:translate(-50%,-20%) scale(.6); } 15% { opacity:1; transform:translate(-50%,-70%) scale(1.25); } 100% { opacity:0; transform:translate(-50%,-260%) scale(1); } }
.coin.fly { position:fixed; width:22px; height:22px; }
.lvup { position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); text-align:center; animation:lvin .6s cubic-bezier(.34,1.56,.64,1), lvout .5s 2s forwards; }
.lvup-in { background:linear-gradient(135deg,#ffcf4a,#ff9a3d); border:4px solid #fff; border-radius:28px; padding:14px 38px 16px; box-shadow:0 12px 40px rgba(180,90,0,.5); color:#fff; text-shadow:0 2px 0 rgba(150,70,0,.5); }
.lvup small { display:block; letter-spacing:.3em; font-size:14px; font-weight:800; } .lvup b { display:block; font-size:56px; line-height:1.1; } .lvup em { font-style:normal; font-size:18px; font-weight:800; }
@keyframes lvin { 0% { transform:translate(-50%,-50%) scale(.2) rotate(-12deg); opacity:0; } 100% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; } }
@keyframes lvout { to { opacity:0; transform:translate(-50%,-90%) scale(.9); } }
.conf { position:absolute; left:50%; top:50%; width:10px; height:14px; border-radius:2px; animation:conf 1.4s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes conf { 0% { transform:translate(0,0) rotate(0); opacity:1; } 100% { transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0; } }

/* ---- 小視窗 */
#gwin { position:fixed; inset:0; z-index:14; background:rgba(40,30,60,.5); display:flex; align-items:center; justify-content:center; padding:8px; touch-action:none; }
.gw-card { width:min(760px, 100%); max-height:100%; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-top:5px solid var(--acc); border-radius:22px; box-shadow:0 18px 60px rgba(40,20,60,.45); position:relative; overflow:hidden; }
.gw-card header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px 18px; }
.gw-card h2 { margin:0; font-size:20px; color:var(--title); }
#gwClose { width:36px; height:36px; padding:0; border-radius:50%; font-size:16px; font-weight:800; }
.gw-body { overflow-y:auto; padding:4px 16px 16px; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.gw-lead { margin:6px 0 10px; line-height:1.6; font-size:15px; }
.gw-note { font-size:12px; opacity:.78; line-height:1.55; margin:8px 0; }
.gw-hint { text-align:center; font-size:13px; opacity:.8; margin:0 0 6px; }
.gw-guest { background:#fff2d6; border:1px dashed #e8a010; color:#6a4a10; border-radius:12px; padding:8px 12px; font-size:13px; line-height:1.55; margin:6px 0 10px; }
.gw-guest.big { font-size:15px; text-align:center; padding:12px; } .gw-guest.bad { background:#ffe6e2; border-color:#e8553a; color:#7a2a20; }
.gw-cards { display:grid; gap:10px; }
.gw-card-act { display:flex; gap:12px; align-items:center; text-align:left; padding:10px 14px; border-radius:18px; background:#fff; border:2px solid var(--line); border-left:8px solid var(--c, var(--acc)); box-shadow:0 2px 8px var(--shadow); width:100%; }
.gw-card-act:hover { transform:translateY(-2px); border-color:var(--c, var(--acc)); }
.gw-card-act .ic svg, .gw-intro .ic svg, .gw-result .ic svg { width:92px; height:58px; display:block; }
.gw-card-act .tx { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .gw-card-act b { font-size:17px; color:var(--tx); } .gw-card-act small { font-size:13px; line-height:1.45; color:var(--tx); opacity:.8; white-space:normal; } .gw-card-act em { font-size:12px; font-style:normal; color:#2f9a6e; font-weight:700; }
.gw-intro, .gw-result { text-align:center; } .gw-intro h3, .gw-result h3 { margin:4px 0 6px; font-size:22px; } .gw-intro .ic svg, .gw-result .ic svg { margin:0 auto; width:130px; height:80px; }
.gw-row { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin:10px 0 0; }
.gw-btn { padding:9px 20px; font-weight:800; font-size:15px; border-radius:999px; background:#fff; color:var(--tx); touch-action:manipulation; } .gw-btn.big { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); padding:11px 30px; font-size:17px; } .gw-btn.big.on, .gw-btn.on { outline:3px solid #4a3a5c; }
.gw-btn.sm { padding:4px 12px; font-size:13px; } .gw-btn.arrow { min-width:58px; padding:12px 16px; font-size:20px; } .gw-btn.dis { opacity:.55; } .gw-btn:disabled { opacity:.45; cursor:not-allowed; } .gw-btn.back { margin:0 0 6px; padding:4px 14px; font-size:13px; }
.gw-stage { margin:4px 0 0; } .gw-stage canvas { display:block; width:100%; max-height:calc(100vh - 230px); object-fit:contain; border-radius:16px; background:#fff; touch-action:none; box-shadow:inset 0 0 0 2px var(--line); }
.gw-row.actrow .gw-btn.big { min-width:min(70vw, 280px); padding:16px 30px; font-size:22px; } .gw-row.pad { gap:8px; } .gw-row.pad .gw-btn { flex:1; max-width:90px; }
.gw-count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:92px; font-weight:900; color:#fff; text-shadow:0 4px 0 var(--acc), 0 0 30px rgba(0,0,0,.35); background:rgba(40,30,60,.28); pointer-events:none; -webkit-text-stroke:3px #ff9a3d; } .gw-count.pop { animation:cnt .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes cnt { 0% { transform:scale(2.2); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.sum { font-size:15px; margin:4px 0 8px; opacity:.9; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:8px 0; } .chip { font-weight:900; font-size:18px; padding:6px 14px; border-radius:999px; background:#fff; border:2px solid var(--line); animation:chip .5s cubic-bezier(.34,1.56,.64,1) backwards; } .chip:nth-child(2) { animation-delay:.12s; } .chip:nth-child(3) { animation-delay:.24s; } .chip:nth-child(4) { animation-delay:.36s; }
@keyframes chip { 0% { transform:scale(.3); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.chip.exp { color:#2f9a6e; border-color:#7fd9b0; } .chip.gold { color:#b8860b; border-color:#ffd23a; background:#fff7dc; } .chip.stat { color:#d8661e; border-color:#ffb347; } .chip.none { opacity:.7; font-size:14px; }
.lvbar { display:flex; align-items:center; gap:8px; justify-content:center; margin:8px 0; } .lvbar b { background:linear-gradient(135deg,#ffb02e,#ff7f4f); color:#fff; border-radius:999px; padding:2px 11px; } .lvbar .bar { width:200px; height:14px; background:rgba(74,58,92,.15); border-radius:7px; overflow:hidden; } .lvbar .bar i { display:block; height:100%; background:linear-gradient(90deg,#7fd9b0,#4fc7a4); transition:width .8s; }
.paytable { gap:6px 10px; font-size:12px; } .paytable .pt { display:flex; align-items:center; gap:1px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:3px 8px; } .paytable .pt b { margin-left:6px; color:#c8433a; font-size:13px; } .paytable .pt span { margin-left:4px; }

/* ---- 商店 */
.gw-tabs { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:2px 0 6px; } .gw-tabs button { padding:6px 14px; font-size:14px; font-weight:700; } .gw-tabs button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); }
.gw-coins { margin-left:auto; display:flex; gap:5px; align-items:center; background:#fff7dc; border:1px solid rgba(200,140,0,.35); border-radius:999px; padding:3px 12px; font-size:16px; font-weight:900; }
.gw-sec { margin:12px 0 6px; font-size:14px; opacity:.85; }
.gw-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; }
.gw-item { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; background:#fff; border:2px solid var(--line); border-radius:16px; padding:8px 6px 8px; } .gw-item b { font-size:14px; } .gw-item small { font-size:11px; opacity:.7; }
.gw-item .act { display:flex; gap:4px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:5px; } .gw-item .gw-btn { padding:5px 12px; font-size:14px; } .gw-item .gw-btn .coin { width:14px; height:14px; margin-right:4px; vertical-align:-0.2em; }
.tagok { font-size:12px; font-weight:800; color:#2f9a6e; background:#e6f8ee; border-radius:999px; padding:3px 9px; }
.gw-toast { position:sticky; bottom:0; margin-top:10px; background:#4a3a5c; color:#fff; border-radius:999px; padding:8px 16px; font-size:14px; text-align:center; animation:chip .4s; }
@media (max-width:640px) {
  .gw-card { border-radius:16px; } .gw-body { padding:2px 10px 12px; } .gw-card-act .ic svg { width:64px; height:44px; } .gw-card-act small { font-size:12px; }
  .gw-stage canvas { max-height:calc(100vh - 290px); } .gw-count { font-size:72px; }
}

/* ---- 捏角色：商店道具 */
.cr-opt { position:relative; flex-wrap:wrap; }
.cr-opt .lk { position:absolute; right:4px; top:3px; font-style:normal; font-size:10px; font-weight:800; background:#fff7dc; color:#8a6000; border-radius:999px; padding:0 6px 0 4px; border:1px solid rgba(200,140,0,.4); line-height:15px; }
.cr-opt .lk .coin { width:9px; height:9px; margin-right:2px; vertical-align:-0.1em; border-width:1.5px; }
.cr-opt .lk.own { background:#e6f8ee; color:#2f7a54; border-color:rgba(60,160,100,.4); padding:0 6px; }
.cr-opt.locked { opacity:.82; border-style:dashed; }
.cr-opt.locked > span::before { content:''; display:inline-block; width:10px; height:8px; margin-right:3px; border-radius:2px; background:#9b8fb5; vertical-align:-1px; }
.cr-tabs button.haslock::after { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#ff6f8a; margin-left:5px; vertical-align:2px; }
.cr-buy { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; background:#fff7dc; border:1px solid rgba(200,140,0,.4); border-radius:14px; padding:6px 10px; }
.cr-buy .coin { width:13px; height:13px; } .cr-buy button { padding:6px 16px; font-weight:800; background:var(--acc); color:var(--acc-tx); border-color:var(--acc); flex:none; } .cr-buy button:disabled { opacity:.5; }
/* ---- 頭上等級 */
.lv { display:inline-block; font-style:normal; font-size:10px; font-weight:900; color:#fff; background:linear-gradient(135deg,#ffb02e,#ff7f4f); border-radius:999px; padding:0 6px; margin-right:4px; line-height:15px; text-shadow:0 1px 1px rgba(120,50,0,.4); vertical-align:1px; }
#nameplate .lv { font-size:11px; line-height:16px; }
.rbub.glyph span { font-size:30px; line-height:1; font-weight:900; text-shadow:0 2px 0 #fff, 0 0 6px #fff; display:inline-block; padding:0 4px; }
.rbub.big.glyph span { font-size:42px; }
.grid.hem button { font-size:22px; font-weight:900; line-height:1; padding:6px 0; }
.pc-stats { display:grid; grid-template-columns:44px 1fr 26px; gap:3px 6px; align-items:center; font-size:12px; font-weight:700; margin:6px 0; background:rgba(255,255,255,.6); border-radius:10px; padding:6px 8px; }
.pc-stats .bar { height:8px; background:rgba(74,58,92,.14); border-radius:4px; overflow:hidden; } .pc-stats .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb347,#ff7f4f); }
.pc-lv { display:inline-block; font-size:12px; font-weight:900; color:#fff; background:linear-gradient(135deg,#ffb02e,#ff7f4f); border-radius:999px; padding:1px 9px; margin-left:6px; }

/* ---- 第 14 輪 C 線：台灣夜市遊戲 */
.nm-cards .gw-card-act { border-left-width:10px; }
.nm-intro .nm-banner { display:block; width:100%; max-width:640px; height:auto; margin:0 auto 6px; border-radius:16px; box-shadow:inset 0 0 0 2px var(--line); }
.nm-fee b { font-size:15px; color:#b8860b; }
.nm-board { margin:12px auto 0; max-width:420px; text-align:left; background:#fff; border:2px solid var(--line); border-radius:16px; padding:8px 12px; }
.nm-board-h { display:flex; align-items:center; justify-content:space-between; gap:8px; } .nm-board-h b { font-size:14px; }
.nm-board ol { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px; font-size:14px; }
.nm-board li { display:flex; gap:8px; align-items:center; padding:2px 6px; border-radius:8px; } .nm-board li.me { background:#fff7dc; font-weight:800; }
.nm-board .rk { width:24px; text-align:center; font-weight:900; color:#b8860b; } .nm-board .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nm-board .sc { font-weight:900; }
.nm-score { font-size:20px; font-weight:900; } .nm-score.win { color:#2f9a6e; }
.nm-bets { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:10px 0 4px; }
.nm-bet { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 2px 4px; border-radius:14px; background:#fff; border:2px solid var(--line); touch-action:manipulation; min-height:74px; }
.nm-bet .e { font-size:26px; line-height:1.15; } .nm-bet .e i { font-style:normal; font-weight:900; color:#e8353a; font-size:20px; } .nm-bet[data-sym="bar"] .e i { color:#222; font-size:16px; }
.nm-bet .n { font-size:12px; font-weight:700; } .nm-bet .m { font-size:11px; opacity:.7; } .nm-bet .c { position:absolute; right:4px; top:2px; font-size:10px; color:#e8553a; letter-spacing:-1px; }
.nm-bet.on { border-color:#f2b52e; background:#fff7dc; box-shadow:0 0 0 2px #f2b52e inset; } .nm-bet:disabled { opacity:.6; }
.nm-mario-info { text-align:center; font-size:14px; font-weight:800; margin:4px 0; color:#7a5a10; }
@media (max-width:640px) { .nm-bet { min-height:64px; } .nm-bet .e { font-size:22px; } .nm-bets { gap:6px; } }
.nm-wait { min-height:260px; display:flex; align-items:center; justify-content:center; }
.nm-win .gw-stage canvas { width:auto; max-width:100%; height:auto; margin:0 auto; max-height:max(230px, calc(100vh - 250px)); }
.nm-win .gw-row.actrow .gw-btn.big { min-width:min(70vw, 240px); padding:12px 26px; font-size:20px; }
@media (max-width:640px) { .nm-win .gw-stage canvas { max-height:max(230px, calc(100vh - 300px)); } }

/* Mobile fixed close bar must leave scroll space after the last night-market card. */
@media (max-width: 699px) {
  body.mui #gwin .gw-body:has(.nm-cards) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  body.mui #gwin .nm-cards { padding-bottom: 24px; }
}