@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --ink:#05050b; --panel:rgba(8,10,18,.82); --cyan:#00ffc6; --cyan2:#74ffe1;
  --magenta:#ff00e6; --gold:#ffd93d; --red:#ff365e; --muted:#81919b;
  --edge:rgba(0,255,198,.28); --glow:0 0 24px rgba(0,255,198,.28);
  color-scheme:dark; font-family:Rajdhani,"Noto Sans TC",sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; width:100%; height:100%; overflow:hidden; background:#020207; color:#effffa; }
button { font:inherit; color:inherit; }
button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
button:disabled { opacity:.32; filter:grayscale(.7); cursor:not-allowed !important; transform:none !important; }
[hidden] { display:none !important; }

.game { position:relative; isolation:isolate; width:100%; height:100dvh; min-height:620px; max-width:720px; margin:auto; overflow:hidden; background:#070710; display:grid; grid-template-rows:auto 1fr auto; transition:background .5s ease; }
.world { position:absolute; inset:0; z-index:-3; overflow:hidden; background:radial-gradient(circle at 50% 28%,rgba(0,255,198,.1),transparent 28%),linear-gradient(#090912,#020207); }
.horizon { position:absolute; inset:0; opacity:.5; background:linear-gradient(90deg,transparent 49.8%,rgba(0,255,198,.22) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,0,230,.12) 50%,transparent 50.2%); background-size:56px 56px; mask-image:linear-gradient(to bottom,transparent 5%,black 40%,transparent 76%); transform:perspective(400px) rotateX(58deg) scale(1.6) translateY(9%); }
.grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(30deg,var(--edge) 12%,transparent 12.5%,transparent 87%,var(--edge) 87.5%,var(--edge)),linear-gradient(150deg,var(--edge) 12%,transparent 12.5%,transparent 87%,var(--edge) 87.5%,var(--edge)),linear-gradient(30deg,var(--edge) 12%,transparent 12.5%,transparent 87%,var(--edge) 87.5%,var(--edge)),linear-gradient(150deg,var(--edge) 12%,transparent 12.5%,transparent 87%,var(--edge) 87.5%,var(--edge)); background-size:64px 112px; background-position:0 0,0 0,32px 56px,32px 56px; animation:gridPulse 4s ease-in-out infinite; }
.scanlines { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.16; background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.04) 4px); }
.orb { position:absolute; width:240px; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.13; animation:drift 9s ease-in-out infinite alternate; }
.orb-a { background:var(--cyan); left:-130px; top:20%; }.orb-b { background:var(--magenta); right:-140px; bottom:12%; animation-delay:-4s; }
#vfx-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:20; pointer-events:none; }

.topbar { min-height:76px; padding:calc(12px + env(safe-area-inset-top)) 16px 8px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; border-bottom:1px solid rgba(0,255,198,.18); background:linear-gradient(180deg,rgba(2,2,7,.98),rgba(7,7,15,.78)); z-index:6; }
.table-id { min-width:0; padding:6px 8px; text-align:left; border:0; border-left:2px solid var(--cyan); background:transparent; cursor:pointer; }
.table-id span,.table-id strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table-id span { color:var(--cyan); font:700 10px Orbitron,sans-serif; letter-spacing:.12em; }
.table-id strong { font-size:13px; letter-spacing:.05em; }.table-id i { position:absolute; opacity:.6; }
.brand { display:flex; align-items:center; gap:5px; font-family:Orbitron,sans-serif; letter-spacing:.07em; filter:drop-shadow(0 0 10px rgba(0,255,198,.5)); }
.brand span { font-weight:700; font-size:17px; }.brand b { color:var(--magenta); font-size:24px; }
.wallet { min-width:0; text-align:right; }.wallet small { display:block; color:var(--muted); font:600 9px Orbitron,sans-serif; letter-spacing:.16em; }.wallet strong { font:700 clamp(15px,4vw,21px) Orbitron,sans-serif; }.currency { color:var(--gold); margin-right:4px; }

.table { min-height:0; display:grid; grid-template-rows:minmax(125px,1fr) minmax(122px,.85fr) minmax(125px,1fr); padding:8px 18px 4px; gap:2px; position:relative; z-index:2; }
.hand { min-height:0; display:flex; flex-direction:column; justify-content:center; }
.hand-head { display:flex; align-items:center; justify-content:center; gap:9px; color:#9eabb4; font:600 10px Orbitron,sans-serif; letter-spacing:.13em; margin-bottom:8px; }
.score { min-width:33px; height:22px; display:grid; place-items:center; padding:0 7px; border:1px solid rgba(255,0,230,.55); border-radius:4px; color:#ff81f2; box-shadow:0 0 12px rgba(255,0,230,.16); background:rgba(255,0,230,.08); font-size:12px; }
.score.cyan { border-color:rgba(0,255,198,.55); color:var(--cyan); box-shadow:0 0 12px rgba(0,255,198,.16); background:rgba(0,255,198,.07); }
.cards { display:flex; justify-content:center; align-items:center; min-height:96px; padding-left:10px; }
.card { position:relative; width:clamp(61px,16.5vw,84px); aspect-ratio:5/7; flex:0 0 auto; margin-left:-10px; border-radius:8px; color:var(--cyan2); background:linear-gradient(145deg,rgba(24,38,48,.96),rgba(7,10,18,.98)); border:1px solid rgba(0,255,198,.65); box-shadow:inset 0 0 18px rgba(0,255,198,.08),0 0 18px rgba(0,255,198,.16); transform-origin:center 130%; overflow:hidden; animation:cardIn .38s cubic-bezier(.18,.85,.25,1.18) both; }
.card:nth-child(2){transform:rotate(1.6deg)}.card:nth-child(3){transform:rotate(-1.2deg)}.card:nth-child(4){transform:rotate(2.1deg)}
.dealer-hand .card { border-color:rgba(255,0,230,.55); color:#ff89f3; box-shadow:inset 0 0 18px rgba(255,0,230,.07),0 0 18px rgba(255,0,230,.12); }
.card::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom,transparent 0,transparent 4px,rgba(255,255,255,.055) 5px); opacity:.45; }
.card .corner { position:absolute; left:8px; top:6px; font:700 17px Orbitron,sans-serif; line-height:1; }.card .corner small { display:block; margin-top:3px; font-size:13px; text-align:center; }
.card .pip { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(28px,8vw,44px); text-shadow:0 0 15px currentColor; }
.card.red { color:#ff4fd8; border-color:rgba(255,0,230,.75); }.card.hidden-card { border-color:rgba(255,217,61,.55); background:linear-gradient(145deg,#161727,#080810); }
.card.hidden-card::before { content:"21"; position:absolute; inset:10px; display:grid; place-items:center; border:1px solid rgba(0,255,198,.35); color:rgba(0,255,198,.75); font:700 22px Orbitron,sans-serif; background:repeating-linear-gradient(60deg,transparent 0,transparent 9px,rgba(255,0,230,.12) 10px); text-shadow:0 0 12px var(--cyan); }

.arena { position:relative; display:grid; place-items:center; align-content:center; min-height:0; }
.bet-zone { width:118px; height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:1px dashed rgba(0,255,198,.5); background:radial-gradient(circle,rgba(0,255,198,.1),transparent 67%); position:relative; transition:.2s ease; }
.bet-zone.drag-active { transform:scale(1.12); border-color:var(--gold); box-shadow:0 0 28px rgba(255,217,61,.22); }
.target-ring { position:absolute; inset:7px; border:1px solid rgba(0,255,198,.18); border-radius:50%; animation:ring 2.2s linear infinite; }
.bet-zone small { z-index:1; color:var(--muted); font:600 8px Orbitron,sans-serif; letter-spacing:.12em; }.bet-zone strong { z-index:1; margin-top:4px; font:700 19px Orbitron,sans-serif; }
.status { position:absolute; bottom:0; width:100%; text-align:center; color:#a9b8be; font-size:12px; letter-spacing:.07em; }
.shoe { position:absolute; right:0; top:50%; transform:translateY(-50%); display:grid; gap:2px; color:#68747d; text-align:right; font:600 8px Orbitron,sans-serif; }.shoe b { color:#aab6bc; font-size:11px; }
.result-banner { position:absolute; inset:0; z-index:4; margin:auto; width:min(92%,380px); height:90px; text-align:center; padding:12px; background:linear-gradient(90deg,transparent,rgba(4,9,14,.94) 12%,rgba(4,9,14,.94) 88%,transparent); border-block:1px solid var(--cyan); box-shadow:0 0 35px rgba(0,255,198,.18); animation:resultIn .34s ease both; }
.result-banner small,.result-banner strong,.result-banner span { display:block; }.result-banner small { color:var(--muted); font:600 8px Orbitron,sans-serif; letter-spacing:.2em; }.result-banner strong { margin:3px 0; color:var(--cyan); font:800 clamp(24px,7vw,36px) Orbitron,sans-serif; letter-spacing:.08em; text-shadow:0 0 22px currentColor; }.result-banner span { color:#d5e2e5; font-size:12px; }
.result-banner.loss { border-color:var(--red); }.result-banner.loss strong { color:var(--red); }.result-banner.push { border-color:var(--gold); }.result-banner.push strong { color:var(--gold); }

.control-island { position:relative; z-index:7; padding:7px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(0,255,198,.25); background:linear-gradient(180deg,rgba(7,9,16,.88),rgba(3,3,8,.98)); box-shadow:0 -18px 35px rgba(0,0,0,.36); }
.readouts { min-height:23px; display:flex; align-items:center; gap:12px; color:#718089; font:600 8px Orbitron,sans-serif; letter-spacing:.08em; }.readouts b { color:#c8d7da; }.readouts .icon-button:first-of-type { margin-left:auto; }
.icon-button { height:22px; min-width:26px; padding:0 6px; border:1px solid rgba(129,145,155,.3); border-radius:3px; background:rgba(255,255,255,.025); color:#8e9da5; font:600 8px Orbitron,sans-serif; cursor:pointer; }
.control-panel { min-height:94px; }
.chip-row { display:flex; justify-content:center; gap:clamp(8px,3.2vw,20px); margin:5px 0 8px; }
.chip { position:relative; width:clamp(48px,13vw,62px); aspect-ratio:1; border-radius:50%; border:2px solid var(--cyan); background:radial-gradient(circle,#14212a 35%,#080b11 36% 49%,#193840 50% 56%,#080b11 57%); color:var(--cyan2); box-shadow:inset 0 0 12px rgba(0,255,198,.2),0 0 15px rgba(0,255,198,.14); cursor:grab; touch-action:none; user-select:none; transition:.16s ease; }
.chip::after { content:""; position:absolute; inset:5px; border:1px dashed currentColor; border-radius:50%; opacity:.5; }.chip small,.chip b { position:relative; z-index:2; display:block; }.chip small { font:600 7px Orbitron,sans-serif; opacity:.65; }.chip b { font:700 clamp(11px,3vw,15px) Orbitron,sans-serif; }.chip:hover { transform:translateY(-3px); filter:brightness(1.2); }.chip:active { cursor:grabbing; transform:scale(.94); }
.chip-25 { color:#8ea5af; border-color:#8ea5af; }.chip-100{color:var(--cyan);border-color:var(--cyan)}.chip-500{color:var(--magenta);border-color:var(--magenta);background:radial-gradient(circle,#28142c 35%,#0b0710 36% 49%,#482044 50% 56%,#0b0710 57%)}.chip-1000{color:var(--gold);border-color:var(--gold);background:radial-gradient(circle,#292511 35%,#0d0b05 36% 49%,#4b4118 50% 56%,#0d0b05 57%)}
.bet-actions { display:grid; grid-template-columns:70px 70px 1fr; gap:8px; }
.mini-action,.secondary-action,.primary-action { min-height:40px; border:1px solid rgba(0,255,198,.38); border-radius:5px; background:rgba(0,255,198,.06); cursor:pointer; letter-spacing:.08em; transition:.16s ease; }
.mini-action { color:#91a2aa; font-weight:700; }.mini-action:hover,.secondary-action:hover { background:rgba(0,255,198,.12); border-color:var(--cyan); }
.primary-action { position:relative; overflow:hidden; color:#04100d; background:var(--cyan); border-color:var(--cyan); font:800 15px Orbitron,sans-serif; box-shadow:0 0 18px rgba(0,255,198,.24); }
.primary-action::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.45),transparent 65%); transform:translateX(-120%); transition:.4s; }.primary-action:hover::after { transform:translateX(120%); }.primary-action span,.secondary-action span { margin-left:7px; font:700 10px Rajdhani,sans-serif; opacity:.72; }
.play-controls { grid-template-columns:1fr 1.3fr 1.3fr 1fr; gap:7px; align-items:stretch; padding-top:12px; }.play-controls:not([hidden]) { display:grid; }
.secondary-action { color:#a7b7bd; background:rgba(255,255,255,.025); font:700 10px Orbitron,sans-serif; }.secondary-action b,.secondary-action span { display:block; margin:0; }.secondary-action span { margin-top:4px; }
.primary-action.split { font-size:18px; }.primary-action.split b,.primary-action.split span { display:block; margin:0; }.primary-action.split span { margin-top:4px; font-size:8px; }.primary-action.magenta { background:var(--magenta); border-color:var(--magenta); box-shadow:0 0 18px rgba(255,0,230,.23); }
.resolve-controls { padding-top:13px; }.wide { width:100%; min-height:56px; }.resolve-controls .primary-action { height:58px; }

.overlay { position:absolute; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(2,2,7,.82); backdrop-filter:blur(11px); }
.intro-overlay { background:radial-gradient(circle at 50% 35%,rgba(0,255,198,.12),transparent 34%),rgba(2,2,7,.91); }
.boot-card,.modal-card { width:min(100%,440px); position:relative; padding:30px 26px; border:1px solid rgba(0,255,198,.35); background:linear-gradient(145deg,rgba(15,20,27,.94),rgba(5,5,11,.98)); box-shadow:var(--glow),inset 0 0 35px rgba(0,255,198,.035); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }
.eyebrow { color:var(--cyan); font:600 9px Orbitron,sans-serif; letter-spacing:.18em; }.boot-card h1 { margin:16px 0 0; font:800 clamp(42px,14vw,72px) Orbitron,sans-serif; letter-spacing:.03em; line-height:1; text-shadow:0 0 28px rgba(0,255,198,.38); }.boot-card h1 span { color:#f0fffc; }.boot-card h1 b { color:var(--magenta); margin-left:10px; }.boot-card>p { margin:9px 0 25px; color:#bac8cb; font-size:17px; letter-spacing:.15em; }.boot-card>p i { display:block; color:#65747c; font:600 9px Orbitron,sans-serif; margin-top:5px; }
.boot-lines { display:grid; gap:7px; color:#65747c; font:600 9px Orbitron,sans-serif; }.boot-lines span::before { content:"> "; color:var(--cyan); }.loader { height:3px; margin:18px 0; background:#171b21; overflow:hidden; }.loader i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--magenta)); transform-origin:left; animation:load 1.25s ease both; box-shadow:0 0 12px var(--cyan); }
.enter-button { width:100%; height:56px; border:1px solid var(--cyan); color:#020906; background:var(--cyan); font:800 15px Orbitron,sans-serif; cursor:pointer; box-shadow:0 0 24px rgba(0,255,198,.28); }.enter-button span { margin-left:8px; font:700 12px Rajdhani,sans-serif; }.boot-card>small { display:block; margin-top:14px; color:#596770; text-align:center; font-size:10px; }
.modal-overlay { z-index:60; }.modal-card h2 { margin:9px 0 20px; font:700 24px Orbitron,sans-serif; }.close-modal { position:absolute; right:15px; top:13px; width:32px; height:32px; border:1px solid rgba(255,255,255,.12); background:transparent; color:#8e9da4; font-size:21px; cursor:pointer; }
.rule-grid { display:grid; gap:9px; }.rule-grid article { display:grid; grid-template-columns:32px 1fr; gap:9px; align-items:start; padding:9px; border-left:1px solid rgba(0,255,198,.25); background:rgba(255,255,255,.02); }.rule-grid article b { color:var(--cyan); font:700 12px Orbitron,sans-serif; }.rule-grid p { margin:0; color:#b4c0c4; font-size:13px; line-height:1.45; }.shortcuts { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }.shortcuts span { padding:5px 7px; border:1px solid rgba(255,255,255,.09); color:#798991; font-size:9px; }
.table-list { display:grid; gap:9px; }.table-option { display:grid; grid-template-columns:47px 1fr auto; align-items:center; gap:10px; padding:11px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); text-align:left; cursor:pointer; }.table-option .lv { color:var(--cyan); font:700 11px Orbitron,sans-serif; }.table-option strong,.table-option small { display:block; }.table-option small { color:#6f7d84; margin-top:2px; }.table-option .lock { color:var(--gold); font:600 9px Orbitron,sans-serif; }.table-option.active { border-color:var(--cyan); background:rgba(0,255,198,.08); }.table-option.locked { opacity:.46; cursor:not-allowed; }
.gameover-card { text-align:center; }.error-mark { width:58px; height:58px; margin:0 auto 15px; display:grid; place-items:center; border:1px solid var(--red); border-radius:50%; color:var(--red); font:800 30px Orbitron,sans-serif; box-shadow:0 0 25px rgba(255,54,94,.2); }.danger { color:var(--red); }.gameover-card p { color:#9babb1; line-height:1.5; }.gameover-card .primary-action,.gameover-card .secondary-action { margin-top:10px; height:52px; }
.toast { position:absolute; z-index:80; left:50%; top:88px; transform:translateX(-50%); width:max-content; max-width:85%; padding:8px 14px; border:1px solid rgba(255,217,61,.45); border-radius:4px; color:var(--gold); background:rgba(9,9,15,.94); box-shadow:0 0 20px rgba(255,217,61,.14); font-size:12px; text-align:center; animation:toastIn .2s ease both; }
.drag-ghost { position:absolute; z-index:90; width:54px; height:54px; margin:-27px 0 0 -27px; border:2px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); background:#141008; box-shadow:0 0 20px rgba(255,217,61,.4); pointer-events:none; font:700 12px Orbitron,sans-serif; }

.theme-lv2 { --edge:rgba(255,0,230,.35); }.theme-lv2 .world { background:radial-gradient(circle at 30% 20%,rgba(255,0,230,.18),transparent 28%),radial-gradient(circle at 70% 40%,rgba(0,255,198,.13),transparent 32%),linear-gradient(#100716,#030209); }
.theme-lv3 .world { background:radial-gradient(circle at 50% 38%,rgba(90,140,255,.22),transparent 32%),linear-gradient(#050c21,#01030a); }.theme-lv3 { --cyan:#66b9ff; --cyan2:#b9dcff; --edge:rgba(102,185,255,.36); }
.theme-lv4 .world { background:radial-gradient(circle at 50% 42%,rgba(255,217,61,.2),transparent 28%),linear-gradient(#171004,#030201); }.theme-lv4 { --cyan:#ffd93d; --cyan2:#fff0a3; --edge:rgba(255,217,61,.38); }
.game.glitching { animation:glitch .16s steps(2) 3; }.game.flash::before { content:""; position:absolute; inset:0; z-index:40; pointer-events:none; background:rgba(0,255,198,.18); animation:flash .5s ease both; }

@keyframes gridPulse{50%{opacity:.35;transform:translateY(2px)}}@keyframes drift{to{transform:translate(30px,-25px) scale(1.15)}}@keyframes ring{to{transform:rotate(360deg)}}
@keyframes cardIn{from{opacity:0;translate:0 -70px;scale:.72;rotate:-8deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes resultIn{from{opacity:0;transform:scaleX(.65)}to{opacity:1;transform:scaleX(1)}}@keyframes load{from{transform:scaleX(0)}}@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}}
@keyframes flash{from{opacity:1}to{opacity:0}}@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(4px,-2px);filter:hue-rotate(25deg)}50%{transform:translate(-3px,2px)}100%{transform:translate(0)}}

@media (min-width:721px) {
  body { background:radial-gradient(circle at 50% 35%,#101029,#020207 62%); }
  .game { height:min(100dvh,980px); border-inline:1px solid rgba(0,255,198,.13); box-shadow:0 0 70px rgba(0,0,0,.85),0 0 80px rgba(0,255,198,.06); }
}
@media (max-height:730px) {
  .game { min-height:560px; }.topbar{min-height:58px;padding-top:8px}.table{grid-template-rows:1fr .72fr 1fr;padding-top:3px}.cards{min-height:76px}.card{width:56px}.control-panel{min-height:81px}.chip{width:44px}.chip-row{margin:3px 0 5px}.play-controls{padding-top:7px}.hand-head{margin-bottom:4px}.boot-card{padding:22px}.boot-card h1{font-size:44px}.boot-card>p{margin-bottom:14px}
}
@media (max-width:390px) {
  .topbar{padding-inline:10px}.table{padding-inline:10px}.control-island{padding-inline:9px}.play-controls{gap:4px}.secondary-action{font-size:8px}.readouts{gap:7px}.cards{padding-left:7px}.card{margin-left:-7px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }