/* Full-bleed pixel casino floor on a canvas; HUD floats in the corners;
   each game opens as a wood-rimmed felt table over the dimmed floor. */
@font-face{font-family:Cubic11;src:url(fonts/Cubic_11.woff2) format("woff2");font-display:swap}
:root{
  color-scheme:dark;
  --ink:#1a0f1c; --panel:#2a1630; --wood:#7a4520; --wood-l:#a8683a; --wood-d:#3b1f0f;
  --felt:#12704a; --felt-d:#0b5234; --gold:#f2c14e; --gold-d:#9c6a1a; --cream:#fff3d6; --dim:#d9c3cf;
  --red:#d6344a; --blue:#3d7be0; --green:#3fbf6f;
  --f:Cubic11,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  /* pixel-stepped corners: knock a 4px square out of each corner */
  --step:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--cream);font:16px/1.4 var(--f);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#world,#fx{position:fixed;left:0;top:0;image-rendering:pixelated}
#fx{pointer-events:none;z-index:8}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(8,2,12,.55) 100%)}

button{font:16px/1.2 var(--f);color:var(--ink);background:var(--gold);border:4px solid var(--ink);padding:10px 16px;cursor:pointer;clip-path:var(--step);
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.28),inset 4px 4px 0 rgba(255,255,255,.35);touch-action:manipulation}
button:active{transform:translateY(2px);box-shadow:inset 4px 4px 0 rgba(0,0,0,.28)}
button:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:-7px}
button.sm{font-size:14px;padding:8px 10px}
button.go{background:var(--green);min-width:132px;font-size:18px}
button.danger{background:var(--red);color:var(--cream)}

/* ---------- HUD ---------- */
#ui{position:fixed;inset:0;z-index:6;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
#hud{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#hud>*,#pad>*{pointer-events:auto}
.chipbox{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border:4px solid var(--ink);clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--gold-d);font-size:24px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.coin{width:18px;height:18px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);box-shadow:inset -3px -3px 0 var(--gold-d),inset 2px 2px 0 #fff8}
#chipv.bump{animation:bump .3s steps(3)}
.hbtns{display:flex;gap:6px}
#toast{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:max-content;max-width:min(460px,calc(100% - 32px));
  background:var(--panel);border:4px solid var(--ink);clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--gold-d);padding:10px 14px;text-align:center}
#pad{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px}
.playing #pad{visibility:hidden}
#prompt{grid-column:2;animation:hop .6s steps(2) infinite}
kbd{font:inherit;background:var(--ink);color:var(--gold);padding:2px 7px;margin-right:8px}
#stick{justify-self:start;width:116px;height:116px;border-radius:50%;background:rgba(26,15,28,.55);border:4px solid var(--gold-d);display:grid;place-items:center;visibility:hidden}
#stick i{width:48px;height:48px;border-radius:50%;background:var(--gold);border:4px solid var(--ink);box-shadow:inset -4px -4px 0 var(--gold-d);pointer-events:none}
#act{grid-column:3;justify-self:end;width:76px;height:76px;border-radius:50%;clip-path:none;font-size:24px;background:var(--red);color:var(--cream);visibility:hidden}
.touch #stick,.touch #act{visibility:visible}
@media (hover:none),(pointer:coarse){#stick,#act{visibility:visible}}
.playing #stick,.playing #act{visibility:hidden}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:9;display:grid;place-items:center;text-align:center;padding:24px;background:rgba(14,6,20,.74)}
#splash h1{margin:0;font:400 clamp(36px,10vw,72px)/1.2 var(--f);color:var(--gold);text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--ink)}
#splash .en{margin:0 0 8px;font-size:clamp(12px,3vw,24px);letter-spacing:.3em;color:var(--dim)}
#splash .tag{margin:20px 0 28px;color:var(--cream)}
#splash button{font-size:24px;padding:14px 28px;animation:hop .8s steps(2) infinite}

/* ---------- game table ---------- */
#modal{position:fixed;inset:0;z-index:5;background:rgba(10,4,14,.66);display:grid;place-items:center;
  padding:calc(62px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
#modal[data-g=baccarat]{--felt:#8a2238;--felt-d:#6a1629} #modal[data-g=dragon]{--felt:#0f6a66;--felt-d:#0a4e4b}
#modal[data-g=holdem]{--felt:#1e4f9f;--felt-d:#163c7c} #modal[data-g=sicbo]{--felt:#6a2a80;--felt-d:#4e1c60}
#modal[data-g=slots],#modal[data-g=keno]{--felt:#3f2a5c;--felt-d:#2c1c44} #modal[data-g=wheel]{--felt:#7a3a1c;--felt-d:#5a2812}
#modal[data-g=profile],#modal[data-g=cashier],#modal[data-g=map]{--felt:#33203c;--felt-d:#24152c}
#panel{position:relative;width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;gap:8px;padding:8px;border:4px solid var(--ink);clip-path:var(--step);
  background:var(--wood) repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.13) 6px 8px);box-shadow:inset 4px 4px 0 var(--wood-l),inset -4px -4px 0 var(--wood-d);animation:pop .16s steps(4)}
#panel header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 4px}
h2{margin:0;font:400 24px/1.2 var(--f);color:var(--gold);text-shadow:2px 2px 0 var(--ink)}
h2 small{font-size:12px;color:var(--cream);margin-left:10px;letter-spacing:.15em;opacity:.8}
h3{margin:4px 0 0;font:400 16px var(--f);color:var(--gold)}
#felt{min-height:0;overflow-y:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:12px;padding:14px;border:4px solid var(--ink);
  background:var(--felt) radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px) 0 0/6px 6px;box-shadow:inset 0 0 0 4px var(--felt-d)}
#host{display:flex;gap:12px;align-items:flex-end}
#hostc{flex:none;width:78px;height:120px;margin:-8px 0 -14px;image-rendering:pixelated}
#say{flex:1;min-width:0;margin:0 0 14px;min-height:3.6em;padding:10px 12px;background:var(--cream);color:var(--ink);border:4px solid var(--ink);clip-path:var(--step);line-height:1.5}
.win{color:var(--gold)}.lose{color:#ff9aa8}
#say .win{color:#0a7a3c}#say .lose{color:#b3202f}
#mbody{display:flex;flex-direction:column;gap:12px}
#banner{position:absolute;left:50%;top:42%;z-index:4;pointer-events:none;white-space:nowrap;font-size:36px;line-height:1;padding:12px 22px;background:var(--ink);color:var(--gold);border:4px solid var(--gold);clip-path:var(--step);animation:banner 1.6s steps(16) forwards}
#banner.lose{color:#ff9aa8;border-color:var(--red)}
.acts,.bets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.lbl{color:var(--dim)} .lbl b,.who b{font-weight:400;font-size:18px;color:var(--gold);margin-left:6px}
.chip{--c:var(--red);width:50px;height:50px;padding:0;border-radius:50%;clip-path:none;border:3px solid var(--ink);font-size:12px;color:#fff;text-shadow:1px 1px 0 var(--ink);
  background:radial-gradient(circle,var(--c) 0 54%,transparent 55%),repeating-conic-gradient(var(--cream) 0 22.5deg,var(--c) 0 45deg);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),0 4px 0 var(--ink)}
.chip.c50{--c:var(--blue)}.chip.c100{--c:#241a2c}.chip.c500{--c:#7a3fb0}.chip.c1000{--c:var(--gold-d)}
.chip.clr{background:var(--panel);color:var(--cream)}
.chip.on{outline:4px solid var(--gold);outline-offset:2px}
.duo{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-start}
.duo>*{min-width:0}
.seat{display:flex;flex-direction:column;gap:6px;align-items:center}
.duo>.seat{flex:1 1 220px}
.who{color:var(--dim)}
.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:80px}
.card{position:relative;flex:none;width:56px;height:80px;background:#fffaf0;color:var(--ink);border:4px solid var(--ink);clip-path:var(--step);box-shadow:inset -4px -4px 0 rgba(0,0,0,.14)}
.card b{position:absolute;left:4px;top:3px;font-weight:400;font-size:12px;line-height:1.05;text-align:center}
.card i{position:absolute;inset:0;display:grid;place-items:center;padding-top:12px;font-style:normal;font-size:30px;line-height:1}
.card.red{color:#c22b3f}
.card.face i{inset:22px 7px 7px 17px;padding:0;font-size:24px;background:rgba(242,193,78,.4);box-shadow:0 0 0 2px currentColor}
.card.back{background:#8a1f33 repeating-linear-gradient(45deg,transparent 0 4px,rgba(255,255,255,.2) 4px 6px);box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 6px #8a1f33}
.card.slot{background:rgba(0,0,0,.2);border:3px dashed rgba(255,255,255,.3);box-shadow:none;clip-path:none}
.card.new{animation:deal .25s steps(5)}
.card.flip{animation:flip .22s steps(4)}
.hold{background:none;border:0;padding:0;box-shadow:none;clip-path:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--cream)}
.hold:disabled{filter:none;opacity:1;cursor:default}
.hold em{font-style:normal;font-size:12px;background:var(--gold);color:var(--ink);padding:1px 6px;visibility:hidden}
.hold.on em{visibility:visible}.hold.on .card{transform:translateY(-6px)}
.pk>div:first-child{flex:1 1 320px;display:flex;flex-direction:column;gap:12px}
table{border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
td,th{padding:4px 8px;text-align:right;border-bottom:2px solid rgba(0,0,0,.25)}
td:first-child,th:first-child{text-align:left}
th{color:var(--dim);font-weight:400}
.pay{background:rgba(0,0,0,.3);border:4px solid var(--ink)}
.pay .hit{background:var(--gold);color:var(--ink)}
.pay img{width:22px;height:22px;image-rendering:pixelated;vertical-align:middle}
.stat{width:100%}
.side{display:flex;flex-direction:column;align-items:center;min-width:92px;background:var(--panel);color:var(--cream);font-size:24px}
.side small{font-size:12px;color:var(--dim)}
.side.on{background:var(--gold);color:var(--ink)}.side.on small{color:var(--ink)}

/* multi-spot betting layouts (roulette, sic bo, big wheel) */
.board{display:grid;gap:3px;background:var(--ink);padding:3px;border:4px solid var(--ink);grid-template-columns:repeat(14,minmax(0,1fr))}
.sp{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 0;min-height:36px;font-size:14px;line-height:1.1;color:var(--cream);
  background:var(--felt-d);border:0;clip-path:none;box-shadow:inset 0 0 0 2px rgba(242,193,78,.35)}
.sp small{font-size:12px;color:var(--gold)}
.sp.r,.sp.red{background:#c22b3f}.sp.b,.sp.black{background:#1a141e}.sp.g{background:#1fa35a}
.sp.zero{grid-row:1/span 3;grid-column:1}
.sp i{position:absolute;right:0;top:0;z-index:1;min-width:20px;height:20px;padding:0 2px;border-radius:50%;font-style:normal;font-size:12px;line-height:16px;background:var(--gold);color:var(--ink);border:2px solid var(--ink)}
.sp i:empty{display:none}
.sp.hitn{box-shadow:inset 0 0 0 4px var(--gold);z-index:2;animation:hop .4s steps(2) 6}
.w6{grid-template-columns:repeat(7,minmax(0,1fr))}
.w6 .sp{min-height:54px;font-size:18px;text-shadow:1px 1px 0 var(--ink)}
.wheelbox{display:flex;flex-direction:column;align-items:center;gap:8px}
#wheel{width:200px;height:200px}#w6c{width:230px;height:230px}
.rres{font-size:24px;min-height:36px}
.rres b,.hist i{font-weight:400;font-style:normal;padding:4px 10px;border:3px solid var(--ink);color:var(--cream)}
.hist{display:flex;gap:3px;font-size:12px;min-height:26px}.hist i{padding:2px 4px;border-width:2px}
.r{background:#c22b3f}.b{background:#1a141e}.g{background:#1fa35a}
.bside{flex:1 1 330px;display:flex;flex-direction:column;gap:10px}
.dice{display:flex;gap:10px;justify-content:center}
.die{display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;width:54px;height:54px;padding:7px;background:#fffaf0;border:4px solid var(--ink);clip-path:var(--step);box-shadow:inset -4px -4px 0 rgba(0,0,0,.18)}
.die i.p{background:var(--ink)}.die.red i.p{background:#c22b3f}
.die.sm{width:26px;height:26px;padding:3px;gap:1px;border-width:2px;clip-path:none;box-shadow:none}
.dice.shake .die{animation:shake .16s steps(2) infinite}

/* slots */
.slotm{flex:1 1 300px;display:flex;flex-direction:column;gap:12px;align-items:center}
.cab{padding:10px;background:#b0203a;border:4px solid var(--ink);clip-path:var(--step);box-shadow:inset 4px 4px 0 #e0566c,inset -4px -4px 0 #7a1226}
.cab .lamp{display:flex;justify-content:space-between;margin-bottom:8px}
.cab .lamp i{width:10px;height:10px;background:var(--gold);border:2px solid var(--ink);animation:blink 1s steps(2) infinite}
.cab .lamp i:nth-child(odd){animation-delay:.5s}
.reels{position:relative;display:flex;gap:6px;padding:8px;background:var(--ink);border:4px solid var(--gold-d)}
.reels::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--red);opacity:.75}
.reel{display:flex;flex-direction:column;background:#fffaf0;box-shadow:inset 0 10px 0 rgba(0,0,0,.12),inset 0 -10px 0 rgba(0,0,0,.12)}
.reel img{width:72px;height:60px;object-fit:contain;image-rendering:pixelated}

/* race + keno */
#track{align-self:center;width:100%;max-width:640px;image-rendering:pixelated;border:4px solid var(--ink)}
.horses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hs{display:flex;align-items:center;gap:6px;padding:8px;background:var(--panel);color:var(--cream);font-size:14px;text-align:left}
.hs i{flex:none;width:22px;height:22px;display:grid;place-items:center;font-style:normal;color:var(--ink);border:2px solid var(--ink)}
.hs small{margin-left:auto;color:var(--gold);font-size:14px}
.hs.on{background:var(--gold);color:var(--ink)}.hs.on small{color:var(--ink)}
.kgrid{flex:1 1 300px;max-width:460px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.kn{padding:0;min-height:40px;background:var(--felt-d);color:var(--cream)}
.kn.on{background:var(--gold);color:var(--ink)}.kn.out{background:var(--blue);color:#fff}.kn.hit{background:var(--green);animation:hop .4s steps(2) 4}

/* profile / map */
.name{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--dim)}
input{font:16px var(--f);background:var(--ink);color:var(--cream);border:4px solid var(--gold-d);padding:8px 10px;width:190px;-webkit-user-select:text;user-select:text}
.log{display:flex;flex-direction:column;font-size:14px;font-variant-numeric:tabular-nums;max-height:190px;overflow-y:auto;touch-action:pan-y;background:rgba(0,0,0,.3);border:4px solid var(--ink)}
.log div{display:grid;grid-template-columns:52px 1fr 1fr 84px;gap:6px;padding:5px 8px;border-bottom:2px solid rgba(0,0,0,.25)}
.log span:last-child{text-align:right}
.big{margin:0;text-align:center;font-size:18px}.big b{font-weight:400;color:var(--gold)}
.sub{margin:0;text-align:center;color:var(--dim);font-size:14px}
.mapbox{position:relative;align-self:center;width:100%;max-width:672px;border:4px solid var(--ink)}
.mapbox canvas{display:block;width:100%;image-rendering:pixelated}
.mapbox span{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:12px;line-height:1.3;color:var(--cream);text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink);width:30%}
.mapbox span b{display:block;font-weight:400;font-size:16px;color:var(--gold)}
#mapme{position:absolute;width:12px;height:12px;margin:-6px;background:var(--red);border:2px solid #fff;animation:blink .6s steps(2) infinite}

@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes deal{from{transform:translate(50px,-70px) rotate(18deg);opacity:0}}
@keyframes flip{from{transform:scaleX(0)}}
@keyframes hop{50%{transform:translateY(-3px)}}
@keyframes bump{50%{transform:scale(1.25);color:var(--cream)}}
@keyframes blink{50%{opacity:.25}}
@keyframes shake{50%{transform:translate(2px,-3px) rotate(8deg)}}
@keyframes banner{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}12%{transform:translate(-50%,-50%) scale(1.2);opacity:1}22%,78%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}
@media (max-width:520px){
  .card{width:48px;height:70px}.card i{font-size:24px}.card.face i{inset:20px 6px 6px 14px;font-size:18px}
  .sp{font-size:12px;min-height:32px}.chip{width:44px;height:44px}.reel img{width:60px;height:50px}
  h2{font-size:18px}h2 small{display:none}.die{width:46px;height:46px}.horses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:560px){#hostc{width:52px;height:80px;margin-bottom:-10px}#say{min-height:0;margin-bottom:8px}#felt{padding:10px;gap:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}