/* 翠羽寶池 — 版面：整個舞台固定 1280×720，用 transform 等比縮放；手機直拿時整個轉 90 度 */
:root {
  --gold: #ffd36a;
  --gold-2: #ffbf3a;
  --gold-3: #c27a0a;
  --teal: #29e3c8;
  --violet: #c07bff;
  --rose: #ff5d7a;
  --ink: #e8fff9;
  --muted: #9fc8c0;
  --panel: rgba(4, 26, 30, 0.82);
  --line: rgba(255, 211, 106, 0.55);
  --num: "Russo One", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #02090c; color: var(--ink); font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }

#stage { position: fixed; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; background: #04161f; }
#pond, #rigLayer, #pondFront { position: absolute; inset: 0; width: 1280px; height: 720px; display: block; }
#rigLayer, #pondFront { pointer-events: none; }

/* ---------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button, #hud a { pointer-events: auto; }
.hud-left { position: absolute; left: 16px; top: 12px; display: flex; gap: 12px; align-items: center; }
.credits { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.credits span { font-size: 11px; color: var(--muted); }
.credits b { font: 22px var(--num); color: var(--gold); min-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.credits b.bump { animation: bump 0.3s ease-out; }
.hud-right { position: absolute; right: 16px; top: 12px; display: flex; gap: 8px; }
.hbtn { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 14px; }
.hbtn.icon { width: 40px; padding: 0; font-size: 17px; }
a.hbtn { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }

#lockHint { position: absolute; left: 14px; bottom: 10px; font-size: 11px; color: rgba(220, 255, 245, 0.6); text-shadow: 0 1px 2px #000; pointer-events: none; }
.afk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.afk-tile { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 26, 30, 0.6); }
.afk-tile img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; }
.afk-tile b { font-size: 14px; }
.afk-tile small { font-size: 11px; color: var(--muted); }
.afk-tile.on { border-color: var(--teal); background: rgba(41, 227, 200, 0.18); box-shadow: 0 0 10px rgba(41, 227, 200, 0.45); }
.afk-tile.on small::before { content: '已勾選・'; color: var(--gold); }
.afk-count { font-size: 12px; color: var(--muted); }
.afk-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hbtn.primary { background: linear-gradient(#ffe27a, #f0a020); color: #3a1a00; border-color: #fff1b0; }
#testBadge { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); height: 32px; padding: 0 16px; border-radius: 99px; border: 1px solid #ffb3c8; background: rgba(120, 10, 50, 0.85); color: #ffe4ee; font-weight: 900; font-size: 14px; letter-spacing: 0.08em; box-shadow: 0 0 14px rgba(255, 90, 140, 0.55); pointer-events: auto; }

.bet-ctrl { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 300px; height: 40px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.bbtn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, #3b8f88, #0b3236); font-size: 24px; font-weight: 900; line-height: 1; color: var(--gold); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
.bbtn:hover { transform: scale(1.04); }
.bbtn:active { transform: scale(0.94); }
/* 押注牌：砲座正下方，只壓到砲座最下緣 */
.bet { width: 116px; height: 32px; margin-bottom: -4px; border: 9px solid transparent; border-image: url(../art/ui/hud_slot.webp) 40 fill / 9px stretch; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.bet span { font-size: 10px; color: var(--muted); white-space: nowrap; }
/* 三重：押注牌變橘金發光，數字是每發實際扣的分數 */
.bet.triple { filter: drop-shadow(0 0 8px rgba(255, 170, 60, 0.95)); }
.bet.triple span { color: #ffd36a; font-weight: 700; }
.bet b { font: 17px var(--num); background: linear-gradient(#fff6c8, var(--gold) 45%, #d98a10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1200); }
.bet.triple b { background-image: linear-gradient(#fff2b0, #ff9a2e 55%, #e2570f); }

/* 按鈕框：steamBU 的 button.png（九宮格，色相轉成寶池青） */
.weapon-ctrl { position: absolute; bottom: 6px; display: flex; gap: 10px; }
.weapon-ctrl.left { right: calc(50% + 160px); }
.weapon-ctrl.right { left: calc(50% + 160px); }
.side-ctrl { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 10px; align-items: flex-end; }
.tbtn { min-width: 82px; height: 44px; padding: 0 12px; border: 12px solid transparent; border-image: url(../art/ui/button.webp) 40 fill / 12px stretch; background: none; font-weight: 900; font-size: 16px; letter-spacing: 0.08em; color: #d9fff6; text-shadow: 0 2px 0 #022024; line-height: 20px; transition: transform 0.08s, filter 0.15s; }
.tbtn:hover { transform: scale(1.04); }
.tbtn:active { transform: scale(0.94); border-image-source: url(../art/ui/button_pressed.webp); }
/* 開著的按鈕：整顆亮金色、呼吸發光，字也換成「自動中」這種（使用者：原本只亮一點點，看不出有開） */
.tbtn.on, .tbtn.on:active { border: 2px solid #fff1b0; border-image: none; border-radius: 12px; padding: 0 22px; background: linear-gradient(#ffe27a, #f0a020); color: #3a1a00; text-shadow: none; animation: tbtnOn 1.1s ease-in-out infinite; }
@keyframes tbtnOn { 0%, 100% { box-shadow: 0 0 8px rgba(255, 205, 90, 0.75); } 50% { box-shadow: 0 0 20px rgba(255, 220, 120, 1); } }
.tbtn.primary { border: 1px solid #fff1b0; border-radius: 14px; background: linear-gradient(#ffe27a, #f0a020); color: #3a1a00; text-shadow: none; }
.tbtn.big { height: 54px; padding: 0 34px; font-size: 19px; }
#bladeHint { position: absolute; left: 50%; bottom: 258px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 26px 10px; border-radius: 16px; background: linear-gradient(rgba(10, 60, 90, 0.9), rgba(4, 24, 40, 0.9)); border: 2px solid #bff2ff; box-shadow: 0 0 24px rgba(140, 230, 255, 0.75); pointer-events: none; animation: bladeHint 0.9s ease-in-out infinite; }
#bladeHint b { font-size: 28px; font-weight: 900; letter-spacing: 0.18em; color: #eafcff; text-shadow: 0 0 12px #7fe0ff, 0 2px 0 #032038; }
#bladeHint span { font-size: 17px; font-weight: 800; color: #ffe9a0; letter-spacing: 0.1em; }
#bladeHint em { font-style: normal; font-size: 12px; color: #a9d8e6; }
@keyframes bladeHint { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }
#bladeTally { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); min-width: 320px; padding: 12px 26px 14px; border-radius: 18px; background: linear-gradient(rgba(10, 60, 90, 0.92), rgba(4, 24, 40, 0.92)); border: 2px solid #bff2ff; box-shadow: 0 0 30px rgba(140, 230, 255, 0.7); text-align: center; pointer-events: none; animation: tallyIn 0.35s ease-out; transition: opacity 0.45s; }
#bladeTally.out { opacity: 0; }
#bladeTally b { display: block; margin-bottom: 4px; font-size: 24px; font-weight: 900; letter-spacing: 0.24em; color: #eafcff; text-shadow: 0 0 12px #7fe0ff, 0 2px 0 #032038; }
#bladeTally p { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; font-size: 17px; font-weight: 800; line-height: 1.8; color: #cfeff8; }
#bladeTally em { font: 24px var(--num); font-style: normal; color: #ffe9a0; }
#bladeTally .sum { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(191, 242, 255, 0.4); }
#bladeTally .sum em { font-size: 38px; color: var(--gold); text-shadow: 0 3px 0 #4a2200; }
@keyframes tallyIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.tbtn small { display: block; font-size: 10px; font-weight: 700; line-height: 1; }
.credits b { transform-origin: 70% 50%; }

#toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 99px; background: rgba(40, 6, 16, 0.85); border: 1px solid var(--rose); font-weight: 700; pointer-events: auto; }
#toast.good { background: rgba(6, 44, 40, 0.9); border-color: var(--gold); color: #ffe9b0; }

#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; pointer-events: none; }
#banner.show { animation: banner var(--banner-ms, 1.6s) ease-out forwards; }
#banner h1 { font-size: 64px; font-weight: 900; letter-spacing: 0.1em; background: linear-gradient(#fffbe0, var(--gold-2) 50%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #4a2200) drop-shadow(0 0 22px rgba(255, 200, 80, 0.6)); }
#banner p { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: 0.2em; text-shadow: 0 2px 6px #000; }
#banner.small h1 { font-size: 40px; }

/* ---------- 疊層：翻翻樂、輪盤、龍門 */
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(20, 6, 40, 0.72), rgba(0, 0, 0, 0.88)); }
.ov-card { position: relative; width: 640px; max-height: 700px; padding: 14px 24px 16px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(40, 12, 70, 0.96), rgba(10, 4, 24, 0.96)); border: 2px solid var(--gold); box-shadow: 0 0 60px rgba(192, 123, 255, 0.45); }
.ov-title { font-size: 34px; font-weight: 900; letter-spacing: 0.16em; background: linear-gradient(#fffbe0, var(--gold-2) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-sub { margin-top: 4px; font-size: 14px; color: #e0c8ff; }
.ov-total { margin-top: 8px; font-size: 13px; color: var(--muted); }
.ov-total b { display: block; font: 34px var(--num); color: var(--gold); text-shadow: 0 3px 0 #4a2200; }
.ov-hint { margin-top: 8px; min-height: 1.3em; font-size: 14px; color: #ffe9b0; }

.flip-grid { margin: 12px auto 0; display: grid; grid-template-columns: repeat(3, 104px); gap: 10px; justify-content: center; perspective: 900px; }
.flip-card { position: relative; width: 104px; height: 124px; border: 0; background: none; transform-style: preserve-3d; transition: transform 0.45s; }
.flip-card.open { transform: rotateY(180deg); }
.flip-card > i { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.flip-card .back { background: center / 100% 100% no-repeat; }
.flip-card .front { transform: rotateY(180deg); background: linear-gradient(#fff6d8, #ffd36a); border: 3px solid #b37400; font: 30px var(--num); color: #5a2a00; font-style: normal; }
.flip-card.win .front { background: linear-gradient(#fff, #7dffd8); border-color: #13a387; box-shadow: 0 0 22px #5dffc8; color: #04463a; animation: bump 0.4s ease-out; }
.flip-card.lose .front { filter: grayscale(0.7) brightness(0.75); }
.flip-card .front.with-art { background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: 0; }
.flip-card.win .front.with-art { background-color: transparent; color: #04463a; filter: drop-shadow(0 0 8px #5dffc8); }

.wheel-wrap { position: relative; width: 340px; height: 340px; margin: 14px auto 0; }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--gold); box-shadow: 0 0 30px rgba(255, 211, 106, 0.55); transition: transform 2.2s cubic-bezier(.15, .85, .25, 1); }
.wheel span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font: 22px var(--num); color: #fff; text-shadow: 0 2px 0 #000; }
.wheel span b { position: absolute; left: -40px; top: -142px; width: 80px; text-align: center; font-weight: 400; text-shadow: 0 0 4px #000, 0 0 2px #000, 0 2px 0 #000; }
.wheel span b.out { font: 900 18px "Noto Sans TC", sans-serif; color: #ffd0dc; }
/* 正式圖：數字往內收到格子裡（金邊內緣約在半徑 136） */
.wheel.art span { font-size: 20px; }
.wheel.art span b { top: -126px; }
.wheel.art span b.out { font-size: 17px; }
.wheel-pin { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 34px solid var(--rose); filter: drop-shadow(0 3px 2px #000); }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #e8a020 60%, #8a5200); border: 3px solid #fff1b0; }
.outs { margin-top: 10px; display: flex; gap: 10px; justify-content: center; }
.outs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rose); }
.outs i.on { background: var(--rose); box-shadow: 0 0 10px var(--rose); }

.gates { margin: 22px auto 0; display: flex; gap: 10px; justify-content: center; align-items: flex-end; }
.gate { width: 82px; text-align: center; }
.gate .arch { height: 110px; border: 5px solid #8a5200; border-bottom: 0; border-radius: 41px 41px 0 0; background: linear-gradient(rgba(255, 90, 60, 0.25), rgba(255, 211, 106, 0.05)); position: relative; transition: background 0.3s, box-shadow 0.3s; }
.gate:nth-child(n) .arch { height: calc(80px + var(--i) * 12px); }
.gate.pass .arch { background: linear-gradient(rgba(255, 211, 106, 0.9), rgba(255, 90, 60, 0.35)); box-shadow: 0 0 22px var(--gold); border-color: var(--gold); }
.gate.stop .arch { filter: grayscale(0.8) brightness(0.6); }
.gate b { display: block; margin-top: 6px; font: 20px var(--num); color: var(--gold); min-height: 1.2em; }
.gate small { display: block; font-size: 11px; color: var(--muted); }
.gate-fx { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ---------- 河豚、財神 */
#bonus { position: absolute; inset: 0; }
#bonusCanvas { position: absolute; inset: 0; width: 1280px; height: 720px; }
.bonus-hud { position: absolute; inset: 0; pointer-events: none; }
.bonus-hud button { pointer-events: auto; }
.bonus-title { position: absolute; left: 24px; top: 18px; font-size: 30px; font-weight: 900; letter-spacing: 0.14em; color: #fff; text-shadow: 0 0 14px var(--rose), 0 3px 0 #000; }
.bonus-mult { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); font: 64px var(--num); color: #7dff5d; text-shadow: 0 0 18px rgba(80, 255, 80, 0.6), 0 4px 0 #0a3a00; opacity: 0; }
.bonus-mult.show { animation: multPop 1.1s ease-out forwards; }
.bonus-total { position: absolute; right: 24px; top: 18px; text-align: right; padding: 8px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.bonus-total span { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.3em; }
.bonus-total b { font: 36px var(--num); color: var(--gold); font-variant-numeric: tabular-nums; }
.bonus-total em { display: block; font-style: normal; font-size: 13px; color: #ffe9b0; }
.bonus-ctrl { position: absolute; right: 24px; bottom: 18px; display: flex; gap: 10px; }
.bonus-win { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(40, 10, 60, 0.6), rgba(0, 0, 0, 0.85)); }
.win-title { font: 110px var(--num); letter-spacing: 0.06em; background: linear-gradient(#fffbe0, var(--gold-2) 50%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #4a2200) drop-shadow(0 0 30px rgba(255, 200, 80, 0.7)); animation: bump 0.6s ease-out; }
.win-sub { font-size: 18px; letter-spacing: 0.2em; color: #e8fff9; }
.win-amount { margin: 8px 0 22px; font: 64px var(--num); color: var(--gold); text-shadow: 0 4px 0 #4a2200; }

#peacockFrame { position: absolute; inset: 0; width: 1280px; height: 720px; border: 0; background: #04161f; }

/* ---------- 圖鑑、示範 */
#panel { position: absolute; right: 16px; top: 58px; bottom: 76px; width: 470px; display: flex; flex-direction: column; border-radius: 18px; background: rgba(4, 22, 28, 0.96); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); pointer-events: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px 18px; }
.panel-head h2 { font-size: 19px; color: var(--gold); }
.panel-body { padding: 0 18px 16px; overflow-y: auto; font-size: 13px; line-height: 1.6; touch-action: pan-y; }
.panel-body h3 { margin: 12px 0 4px; font-size: 14px; color: var(--teal); }
.panel-body p { color: #cfe9e3; }
.panel-body table { width: 100%; border-collapse: collapse; }
.panel-body td, .panel-body th { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; }
.panel-body th { color: var(--muted); font-weight: 600; }
.panel-body td.n { font-family: var(--num); color: var(--gold); text-align: right; }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.demo-grid .hbtn { height: 40px; }

#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; letter-spacing: 0.2em; background: #04161f; color: var(--gold); }
#loading.done { display: none; }

@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes breathe { 50% { filter: brightness(1.35); } }
@keyframes banner { 0% { opacity: 0; transform: scale(1.6); } 14% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes multPop { 0% { opacity: 0; transform: translateX(-50%) scale(0.4); } 18% { opacity: 1; transform: translateX(-50%) scale(1.25); } 30% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px); } }