/* Royal 賭場共用外觀。色票是變數：<html data-theme="noir"> 切回黑金，預設是土耳藍金。 */
:root{
  --bg:#021214;--panel:#0b3a3d;--panel2:#126066;--line:#e0ad2a88;
  --felt:#0f9a9c;--felt2:#075a5e;--accent:#3ff0dc;
  --gold:#ffd24a;--gold2:#e0ad2a;--goldd:#8a6410;
  --goldgrad:linear-gradient(135deg,#8a5e08,#ffe27a 26%,#e0a81c 50%,#fff3b8 68%,#9a6a0a);
  --ink:#fff8e4;--mute:#9fbab6;--win:#ffe08a;--lose:#ff9a8a;
  --chip10:#efe6cf;--chip50:#b3261e;--chip100:#1a1a1a;--chip500:#c9a227;
}
:root[data-theme="noir"]{
  --bg:#0b0b0e;--panel:#15151b;--panel2:#1c1c24;--line:#3a3220;
  --felt:#14503a;--felt2:#0c2f23;--accent:#c9a227;--mute:#9b9585;--win:#6fe08a;--lose:#ff7b6b;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:18px/1.6 "Noto Sans TC",system-ui,sans-serif;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,#ffffff14,transparent 70%),radial-gradient(ellipse at top,var(--panel2) 0,var(--bg) 62%) fixed;min-height:100vh}
a{color:var(--gold)}
/* 金框：細漸層邊 */
.gilt{border:2px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--goldgrad) border-box;border-radius:14px}
/* 頂部列 */
#rc-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 20px;background:#031516ee;border-bottom:2px solid transparent;border-image:var(--goldgrad) 1;backdrop-filter:blur(6px)}
#rc-bar .title{font:900 24px "Noto Serif TC",serif;letter-spacing:.06em;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
#rc-bar .bal{font:700 22px "Noto Serif TC",serif;color:var(--gold)}
#rc-bar .stat{color:var(--mute);font-size:14px;flex:1 1 300px;line-height:1.4}
#rc-bar .stat b{color:var(--ink);font-weight:500}
/* 鍵帽按鈕 */
button{font:inherit;cursor:pointer;color:var(--ink);padding:7px 18px;min-height:44px;border-radius:12px;border:1px solid var(--gold2);
  background:linear-gradient(#1c4f53,#0e3a3d);box-shadow:0 4px 0 #04191a,inset 0 1px 0 #ffffff30;transition:transform .06s,box-shadow .06s}
button:hover:not(:disabled){filter:brightness(1.15)}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #04191a,inset 0 1px 0 #ffffff30}
button:disabled{opacity:.4;cursor:default}
button.go{font-weight:700;color:#2a1c00;background:linear-gradient(#ffe9a0,#d9ae36);border-color:#fff1b0;box-shadow:0 4px 0 #6b4f0c,inset 0 1px 0 #fff}
button.go:active:not(:disabled){box-shadow:0 1px 0 #6b4f0c}
button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);box-shadow:0 4px 0 #04191a,0 0 12px #f6d56a55,inset 0 1px 0 #ffffff30}
kbd{display:inline-block;margin-left:8px;min-width:1.5em;padding:0 6px;border-radius:5px;border:1px solid #ffffff55;background:#0006;font:600 12px/1.6 ui-monospace,monospace;color:var(--mute)}
button.go kbd{color:#5a4210;border-color:#5a421055;background:#fff6}
main{max-width:1200px;margin:0 auto;padding:20px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
/* 籌碼：邊紋＋面額色 */
.chip{--c:var(--chip10);width:60px;height:60px;border-radius:50%;padding:0;font:700 17px "Noto Serif TC",serif;color:#111;border:0;min-height:0;
  background:radial-gradient(circle,var(--c) 0 52%,transparent 53%),repeating-conic-gradient(#fff 0 14deg,var(--c) 14deg 30deg);
  box-shadow:0 4px 0 #000a,0 0 0 2px #0006,inset 0 0 0 3px #ffffff40}
.chip[data-v="50"]{--c:var(--chip50);color:#fff}.chip[data-v="100"]{--c:var(--chip100);color:var(--gold)}.chip[data-v="500"]{--c:var(--chip500);color:#2a1c00}
.chip[data-v="10"][aria-pressed=true]{color:#111}.chip[data-v="50"][aria-pressed=true]{color:#fff}.chip[data-v="100"][aria-pressed=true]{color:var(--gold)}.chip[data-v="500"][aria-pressed=true]{color:#2a1c00}
.chip[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:3px;transform:translateY(-4px)}
.msg{margin-top:14px;min-height:1.6em;font:700 22px "Noto Serif TC",serif}
.msg.win{color:var(--win);text-shadow:0 0 14px #f6d56a66}.msg.lose{color:var(--lose)}
/* 絨布桌面 */
.felt{position:relative;border-radius:20px;padding:18px 22px;border:2px solid transparent;
  background:radial-gradient(ellipse at 50% 30%,#ffffff0d,transparent 60%),radial-gradient(ellipse at center,var(--felt),var(--felt2)) padding-box,var(--goldgrad) border-box;
  box-shadow:inset 0 0 80px #000a,0 10px 40px #000a}
/* 撲克牌：真的 pip 排列 */
.pc{--w:78px;position:relative;width:var(--w);height:calc(var(--w)*1.4);border-radius:8px;background:#fbf6e9;color:#1a1a1a;box-shadow:0 3px 0 #0007,0 8px 14px #0005;font-family:"Noto Serif TC",Georgia,serif;flex:none;transform-style:preserve-3d;animation:deal .6s cubic-bezier(.2,.7,.3,1) both}
.pc.red{color:#b3261e}
.pc .ix{position:absolute;left:5px;top:3px;font-weight:700;font-size:calc(var(--w)*.21);line-height:1;text-align:center}
.pc .ix i{display:block;font-style:normal;font-size:.8em}
.pc .ix.br{left:auto;right:5px;top:auto;bottom:3px;transform:rotate(180deg)}
.pc .pip{position:absolute;font-size:calc(var(--w)*.21);line-height:1;transform:translate(-50%,-50%)}
.pc .pip.fl{transform:translate(-50%,-50%) rotate(180deg)}
.pc .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--w)*.6)}
.pc.face{background:#fbf6e9}
.pc.face::before{content:"";position:absolute;inset:16% 18%;border:1.5px solid currentColor;border-radius:4px;opacity:.5}
.pc.back{background:repeating-linear-gradient(45deg,#7a1f1f 0 5px,#5a1515 5px 10px);border:4px solid #fbf6e9;color:transparent}
.pc.back .ix,.pc.back .pip,.pc.back .big{display:none}
@keyframes deal{0%{transform:perspective(900px) translate(38vw,-34vh) rotateZ(-40deg) rotateY(180deg);opacity:0}12%{opacity:1}70%{transform:perspective(900px) translate(0,-6px) rotateZ(2deg) rotateY(10deg)}100%{transform:perspective(900px)}}
.pc::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:repeating-linear-gradient(45deg,#7a1f1f 0 5px,#5a1515 5px 10px);border:4px solid #fbf6e9;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden}
.pc.reveal{animation:flip .55s cubic-bezier(.3,.7,.3,1) both}
@keyframes flip{0%{transform:perspective(900px) rotateY(180deg) translateY(-10px)}100%{transform:perspective(900px)}}
@media (prefers-reduced-motion:reduce){.pc,.pc.reveal{animation:none}}
/* 骰子：真的點數 */
.die{--s:84px;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.18);background:linear-gradient(145deg,#fffaf0,#e6dcc0);box-shadow:0 5px 0 #8a7a4a,0 10px 16px #0007;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:calc(var(--s)*.14);gap:2px}
.die i{width:78%;height:78%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 35%,#444,#000)}
.die[data-n="1"] i,.die[data-n="4"] i{background:radial-gradient(circle at 35% 35%,#e0443a,#8a1010)}
.die.roll{animation:tumble .14s infinite}
@keyframes tumble{25%{transform:rotate(14deg) translateY(-8px)}75%{transform:rotate(-12deg) translateY(-3px)}}
/* 透視鏡、說明抽屜 */
#help{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:#000a;padding:16px}
#help.on{display:flex}
#help .box{max-width:520px;width:100%;padding:22px 26px}
#help h2{margin:0 0 8px;font:900 26px "Noto Serif TC",serif;color:var(--gold)}
#help ol{margin:8px 0;padding-left:1.3em}#help li{margin:6px 0}
#toast{font:inherit;color:inherit;cursor:pointer;position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;padding:10px 20px;border-radius:999px;background:var(--panel2);border:1px solid var(--gold2);display:none}
#toast.on{display:block}
.note{color:var(--mute);font-size:15px}
/* 2K：整頁等比放大，主畫面吃滿中央（不是手機骨架搬上桌機） */
@media (min-width:1800px){body{zoom:1.4;min-height:calc(100vh/1.4)}main{max-width:1560px}}
@media (max-width:640px){#rc-bar{position:static;padding:8px 12px;gap:6px 10px}#rc-bar button{padding:4px 12px}#rc-bar .stat{flex-basis:100%;order:9;font-size:12px}body{font-size:16px}main{padding:12px}.chip{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 特效：籌碼飛行、餘額滾動、大獎 */
.fx-coin{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50%;pointer-events:none;z-index:60;
  background:radial-gradient(circle at 35% 30%,#fff7c8,#ffd24a 42%,#b07a0c 75%);box-shadow:0 0 10px #ffd24aaa,inset 0 0 0 2px #fff4}
.fx-coin.chip{background:radial-gradient(circle,#fff8e4 0 32%,#b3261e 33% 60%,#fff8e4 61% 66%,#b3261e 67%);box-shadow:0 2px 6px #0008}
.fx-coin.rain{width:30px;height:30px}
#rc-wallet .bal{transition:text-shadow .3s,color .3s}
#rc-wallet .bal.up{color:#fff3b0;text-shadow:0 0 14px #ffd24a,0 0 28px #ffd24a88}
#rc-wallet .bal.down{color:var(--lose)}
#fx-big{position:fixed;inset:0;z-index:59;display:grid;place-content:center;justify-items:center;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,#ffd24a40,transparent 60%)}
#fx-big b{font:900 clamp(56px,11vw,170px)/1 "Noto Serif TC",serif;letter-spacing:.06em;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px #ffd24aaa) drop-shadow(0 6px 0 #6b4f0c)}
#fx-big span{font:800 clamp(28px,4vw,60px) "Noto Serif TC",serif;color:#fff3b0;text-shadow:0 0 18px #ffd24a}
#fx-big.on{animation:bigwin 2.2s ease-out forwards}
#fx-big.on b{animation:bigpop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes bigwin{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes bigpop{from{transform:scale(.2) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){#fx-big,.fx-coin{display:none}}

/* 3D 骰子 */
.die.die3{background:none;box-shadow:none;display:block;position:relative;padding:0;border-radius:0;perspective:calc(var(--s)*7)}
.die3::after{content:"";position:absolute;left:8%;right:8%;bottom:-16%;height:16%;border-radius:50%;background:#000a;filter:blur(7px);z-index:-1}
.die3 .cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg) rotateZ(var(--rz)) rotateX(var(--rx)) rotateY(var(--ry))}
.die3 .f{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:calc(var(--s)*.08);border-radius:calc(var(--s)*.16);
  background:linear-gradient(145deg,#fffdf6,#efe4c6 70%,#d9caa0);box-shadow:inset 0 0 0 1px #0002,inset 0 calc(var(--s)*-.05) calc(var(--s)*.1) #0002;backface-visibility:hidden}
.die3 .f[data-n="1"] i,.die3 .f[data-n="4"] i{background:radial-gradient(circle at 35% 35%,#e0443a,#8a1010)}
.die3 .f1{transform:translateZ(calc(var(--s)/2))}.die3 .f6{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.die3 .f3{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}.die3 .f4{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.die3 .f2{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}.die3 .f5{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.die3 .cube.spin{animation:dspin .5s linear infinite}
.die3 .cube.land{animation:dland .95s cubic-bezier(.15,.8,.3,1)}
.die3.rolling{animation:dhop .3s ease-in-out infinite alternate}
.die3.landing{animation:dbounce .95s ease-out}
@keyframes dspin{to{transform:rotateX(-16deg) rotateZ(calc(var(--rz) + 360deg)) rotateX(calc(var(--rx) + 360deg)) rotateY(calc(var(--ry) + 720deg))}}
@keyframes dland{from{transform:rotateX(-16deg) rotateZ(calc(var(--rz) + 260deg)) rotateX(calc(var(--rx) + 720deg)) rotateY(calc(var(--ry) + 540deg))}}
@keyframes dhop{to{transform:translateY(calc(var(--s)*-.35))}}
@keyframes dbounce{0%{transform:translateY(calc(var(--s)*-.6))}35%{transform:translateY(0)}55%{transform:translateY(calc(var(--s)*-.15))}75%{transform:translateY(0)}88%{transform:translateY(calc(var(--s)*-.04))}}
@media (prefers-reduced-motion:reduce){.die3 .cube,.die3{animation:none!important}}

/* ── 標準版面第一號 primary-left ── */
#rc-bar .sp{flex:1}
#rc-wallet{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:10px 20px}
#rc-wallet .wl{display:flex;gap:14px;align-items:center}
#rc-wallet .bal{font:700 26px "Noto Serif TC",serif;color:var(--gold)}
#rc-wallet .stat{color:var(--mute);font-size:14px;line-height:1.4}#rc-wallet .stat b{color:var(--ink);font-weight:500}
html.std,html.std body{height:100%;overflow:hidden}
html.std body{zoom:normal!important;min-height:0!important}
#rc-std{--u:calc(100vh / 1440);display:grid;grid-template-columns:min(calc(100vh - 40px),calc(100vw - 60px - 1100 * var(--u))) 1fr;gap:20px;padding:20px;height:100vh;box-sizing:border-box}
#rc-pw{position:relative;overflow:hidden;aspect-ratio:1;align-self:start;border-radius:20px;border:2px solid transparent;
  background:radial-gradient(ellipse at 50% 30%,#ffffff14,transparent 60%) padding-box,radial-gradient(ellipse at center,var(--felt),var(--felt2)) padding-box,var(--goldgrad) border-box}
#rc-pw::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 120px #000a;pointer-events:none;z-index:1}   /* 暗角蓋在最上層，畫布區才不會亮一塊 */
#rc-pw .in{display:flex;flex-direction:column;justify-content:center;gap:16px}
#rc-pw .in>.felt,#rc-pw .in>.wrap{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;background:none;border:0;box-shadow:none}
#rc-side{display:grid;grid-template-rows:max(48px,calc(100 * var(--u))) 1fr 1fr;gap:20px;min-height:0}
#rc-std #rc-bar{position:static;border:2px solid transparent;border-image:none;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--goldgrad) border-box;border-radius:16px;flex-wrap:nowrap;padding:0 20px}
#rc-std .pan{position:relative;overflow:hidden;padding:20px;border-radius:16px;border:2px solid transparent;background:linear-gradient(var(--panel),#062628) padding-box,var(--goldgrad) border-box}
#rc-std .in{position:absolute;left:0;top:0;transform-origin:0 0}
#rc-std .in>*:first-child{margin-top:0}
#rc-std #rc-wallet{padding:0 0 12px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
#rc-std canvas{display:block;width:100%;max-width:100%;touch-action:manipulation}
#rc-std .stat:not(#rc-wallet .stat){font-size:13px;color:var(--mute);padding:8px 0}
#rc-std .machine{max-width:none!important;margin:0!important}
#rc-std.phone{grid-template-columns:1fr;grid-template-rows:auto min(calc(100vw - 40px),44vh) minmax(0,.8fr) minmax(0,1.2fr);gap:12px;padding:12px 20px}
#rc-std.phone #rc-side{display:contents}
#rc-std.phone #rc-pw{order:2;justify-self:center;height:100%;width:auto}
#rc-std.phone #rc-bar{order:1;min-height:48px;padding:0 12px;gap:8px}
#rc-std.phone #rc-bar .title{font-size:20px}
#rc-std.phone #rc-info{order:3}#rc-std.phone #rc-ctl{order:4}
#rc-std.phone .pan{padding:12px}

/* 快捷列：主視窗底部一條（觸控裝置沒有鍵盤就不顯示） */
#rc-pw{container-type:size;padding-bottom:9.5%}   /* % 以主視窗寬為準；cqw 在容器自己身上會抓到外層 */
#rc-hint{z-index:2;position:absolute;left:2.8cqw;right:2.8cqw;bottom:1.4cqw;height:6.4cqw;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.4cqw 1.6cqw;
  padding:0 1.4cqw;border-radius:1.2cqw;background:#020c0dd9;border:1px solid var(--line);font-size:1.25cqw;color:var(--ink);overflow:hidden}
#rc-hint span{white-space:nowrap;display:inline-flex;align-items:center;gap:.5cqw}#rc-hint span.off{opacity:.38}
#rc-hint kbd{margin:0;min-width:1.8em;text-align:center;font-size:1em;padding:0 .45em;color:var(--gold);border-color:var(--gold2);background:#0008}
#rc-std button kbd{display:none}
@media (hover:none),(pointer:coarse){#rc-hint{display:none}#rc-pw{padding-bottom:0}}

/* 疊籌碼（牌桌押注區共用）：RC.stack(金額) 產生 */
.stk{position:relative;width:100px;height:0}
.sc{position:absolute;left:0;width:100px;height:44px;border-radius:50%;background:var(--c);
  box-shadow:0 7px 0 -1px var(--c2),0 7px 0 1px #0006,inset 0 0 0 6px var(--c2),inset 0 0 0 9px #fff8,inset 0 0 0 16px var(--c);
  display:flex;align-items:center;justify-content:center;font:800 15px ui-monospace,monospace;color:#fff;text-shadow:0 1px 2px #000}
.sc.v10{--c:#f4efe2;--c2:#3b7bd6;color:#1a1a1a;text-shadow:none}.sc.v50{--c:#c8202f;--c2:#f4efe2}.sc.v100{--c:#1b1b1e;--c2:#e0ad2a}.sc.v500{--c:#7b2fbf;--c2:#ffd24a}