*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0e1238;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;padding:0}
.app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;overflow:hidden;padding:max(2px,env(safe-area-inset-top)) 0 0;
  background:radial-gradient(ellipse at 50% 12%,#3a4aa8 0,#232a78 38%,#12154a 80%)}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:linear-gradient(90deg,transparent 8%,rgba(120,140,255,.18) 8% 18%,transparent 18% 82%,rgba(120,140,255,.18) 82% 92%,transparent 92%),radial-gradient(circle at 50% 30%,rgba(255,255,255,.12),transparent 40%)}
.app>*{position:relative}

/* top */
.top{flex:none;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 8px}
.tl,.tr{display:flex;gap:6px;align-items:center;min-width:104px}
.tr{justify-content:flex-end}
.title{font-size:19px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.6);letter-spacing:.3px}
.ib{width:28px;height:28px;border-radius:50%;background:rgba(210,215,255,.28);border:1.5px solid rgba(255,255,255,.45);font-size:13px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center}
.ping{font-size:9px;color:#9fe8a0;font-weight:700}.ping.slow{color:#ffcf6a}.ping.bad{color:#ff7a7a}

/* arena: king | blue cards | VS | red cards | queen */
.arena{flex:none;display:flex;align-items:center;justify-content:center;gap:2px;padding:2px 4px 0;height:clamp(96px,17vh,132px)}
.char{flex:none;font-size:clamp(40px,8.5vh,62px);line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));transition:transform .3s}
.char.win{animation:cb .5s infinite alternate;filter:drop-shadow(0 0 12px #ffd34d)}
@keyframes cb{to{transform:translateY(-6px) scale(1.1)}}
.hand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;max-width:120px}
.cards{display:flex;justify-content:center;padding:4px 5px;border-radius:7px;background:rgba(10,14,50,.55);border:2px solid rgba(255,255,255,.18);transition:box-shadow .3s,border-color .3s}
.hand.win .cards{border-color:#ffe27a;box-shadow:0 0 14px 3px rgba(255,220,100,.85)}
.htype{height:16px;margin-top:3px;font-size:11px;font-weight:800;color:#ffe9a8;text-shadow:0 1px 2px #000;text-transform:uppercase;letter-spacing:.5px}
.mid{flex:none;width:clamp(46px,13vw,62px);display:flex;flex-direction:column;align-items:center;gap:4px}
.vs{font-size:clamp(20px,4.4vh,30px);font-weight:900;font-style:italic;background:linear-gradient(180deg,#8ad0ff,#e0305a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.timer{width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#555a70,#15182a);border:3px solid #cfd3e8;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,3.6vh,22px);font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.timer.hot{color:#ff5a4a;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}
/* playing cards drawn in CSS */
.pcard{position:relative;width:clamp(26px,7.4vw,36px);aspect-ratio:5/7;margin-left:-4px;border-radius:4px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.55);color:#111;font-weight:900;overflow:hidden;transform-style:preserve-3d}
.pcard:first-child{margin-left:0}
.pcard.red{color:#d4162b}
.pcard b{position:absolute;left:3px;top:1px;font-size:clamp(11px,2.4vh,15px);line-height:1}
.pcard i{position:absolute;left:3px;top:clamp(12px,2.6vh,16px);font-style:normal;font-size:clamp(9px,1.9vh,12px);line-height:1}
.pcard .big{position:absolute;right:2px;bottom:0;font-size:clamp(17px,3.8vh,26px);line-height:1}
.pcard.back{background:repeating-linear-gradient(45deg,#e0243a 0 5px,#c01428 5px 10px);border:2px solid #fff}
.pcard.back b,.pcard.back i,.pcard.back .big{display:none}
.pcard.flip{animation:flip .45s ease-out both}
@keyframes flip{0%{transform:rotateY(90deg) scale(.9)}100%{transform:none}}

/* history dots */
.dotsrow{flex:none;display:flex;align-items:center;gap:6px;margin:4px 10px 0}
.dots{flex:1;display:flex;gap:clamp(3px,1.2vw,6px);align-items:center;height:26px;padding:0 8px;border-radius:13px;background:rgba(8,10,40,.6);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.dots i{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.5)}
.dots i.b{background:radial-gradient(circle at 35% 30%,#8ac0ff,#1a54c8)}.dots i.r{background:radial-gradient(circle at 35% 30%,#ff8a8a,#c4141c)}
.dots i.sp{outline:2px solid #ffe27a}
.trend{flex:none;width:44px;height:26px;border-radius:7px;background:linear-gradient(180deg,#ff7a5a,#d0301c);border:1.5px solid #ffd0c0;font-size:15px;font-weight:900}

/* board */
.board{flex:1;min-height:0;margin:6px 8px 0;padding:4px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:1.15fr 1fr;gap:3px;border-radius:14px;background:linear-gradient(180deg,#d9a73a,#8a5a10);box-shadow:0 4px 12px rgba(0,0,0,.6),inset 0 0 0 2px #ffe18a}
.area{position:relative;overflow:hidden;border-radius:7px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:3px;transition:filter .2s}
.area:active{filter:brightness(1.25)}
.area.blue{grid-column:1/6;background:linear-gradient(180deg,#3a7ae8,#1a44a8);border-radius:9px 4px 4px 4px}
.area.red{grid-column:6/11;background:linear-gradient(180deg,#e85a4a,#a01a14);border-radius:4px 9px 4px 4px}
.area.green{grid-column:span 2;background:linear-gradient(180deg,#34b060,#127a34)}
.pot{position:relative;z-index:3;font-size:clamp(10px,1.9vh,13px);color:#fff;text-shadow:0 1px 2px #000;font-weight:600;letter-spacing:.3px}
.pot b{font-weight:700}
.nm{position:relative;z-index:1;margin-top:clamp(2px,1vh,10px);font-size:clamp(14px,3.4vh,22px);font-weight:900;color:rgba(0,0,0,.42);letter-spacing:1px}
.area.green .nm{font-size:clamp(9px,1.9vh,13px);margin-top:2px}
.od{position:relative;z-index:1;font-size:clamp(11px,2.2vh,15px);font-weight:800;color:rgba(0,0,0,.38)}
.area.green .od{font-size:clamp(10px,1.9vh,13px)}
.pile{position:absolute;inset:0;z-index:2;pointer-events:none}
.gc{position:absolute;width:21px;height:21px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#f2b21a 55%,#b87400);border:1.5px solid #8a5200;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#8a5200;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.gc::after{content:"$"}
.gc.land{animation:land .25s ease-out}
@keyframes land{0%{transform:scale(1.7);opacity:.4}100%{transform:none;opacity:1}}
.fly{position:fixed;width:21px;height:21px;border-radius:50%;pointer-events:none;z-index:40;background:radial-gradient(circle at 35% 30%,#fff3a0,#f2b21a 55%,#b87400);border:1.5px solid #8a5200;box-shadow:0 2px 4px rgba(0,0,0,.6)}
.area.win{box-shadow:inset 0 0 0 3px #fff3b0,0 0 14px 3px #ffd34d;animation:winp .45s infinite alternate;z-index:3}
@keyframes winp{from{filter:brightness(1)}to{filter:brightness(1.35)}}
.area.lose .pile{opacity:.25;transition:opacity .6s}
.area.closed{filter:saturate(.9)}

/* footer */
.foot{flex:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plb{flex:none;width:34px;height:34px;border-radius:9px;background:linear-gradient(180deg,#e8c25a,#9a6a14);border:2px solid #ffe9a0;font-size:17px}
.bal{flex:1;display:flex;align-items:center;gap:4px;height:28px;padding:0 10px 0 4px;border-radius:14px;background:rgba(0,0,0,.55);border:1.5px solid #6a7ad8;font-size:13px;font-weight:800;min-width:0;overflow:hidden}
.bal b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coin{flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#f2b21a 55%,#b87400);border:1.5px solid #8a5200}
.rep{flex:none;height:28px;padding:0 9px;border-radius:7px;background:linear-gradient(180deg,#8a92b8,#4a5280);border:1.5px solid #cfd3e8;font-size:11px;font-weight:800;color:#e8ecff}
.rep:disabled{opacity:.5}
.chips{flex:1 1 100%;order:5;display:flex;justify-content:space-around;gap:4px;align-items:center;min-width:0;margin-top:5px}
.chip{flex:none;width:clamp(38px,12vw,50px);height:clamp(38px,12vw,50px);border-radius:50%;font-size:clamp(10px,2.4vw,13px);font-weight:900;color:#fff;text-shadow:0 1px 2px #000;border:3px dashed rgba(255,255,255,.85);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.2);transition:transform .15s}
.chip.on{transform:translateY(-6px) scale(1.18);box-shadow:0 0 0 3px #ffe27a,0 0 14px 4px rgba(255,226,122,.9),0 6px 8px rgba(0,0,0,.6)}
.ch10{background:radial-gradient(circle,#4aa8ff,#1a4fc8)}.ch100{background:radial-gradient(circle,#4ad07a,#0f8a3a)}.ch500{background:radial-gradient(circle,#b07aff,#5a24b8)}.ch1000{background:radial-gradient(circle,#6a8aff,#2a3ab8)}.ch10k{background:radial-gradient(circle,#a05ad8,#4a1a88)}

/* messages */
.banner{position:fixed;left:0;right:0;top:36%;z-index:44;text-align:center;font-size:clamp(26px,6.4vh,42px);font-weight:900;font-style:italic;color:#ffe27a;-webkit-text-stroke:1.5px #7a3a00;text-shadow:0 4px 0 #6a2a00,0 0 16px rgba(255,210,70,.9);animation:bn 2.4s ease-out forwards;pointer-events:none}
.banner.blue{color:#8ac4ff;-webkit-text-stroke:1.5px #0a2a78;text-shadow:0 4px 0 #0a2060,0 0 16px rgba(90,160,255,.9)}
.banner.red{color:#ff9a8a;-webkit-text-stroke:1.5px #780a0a;text-shadow:0 4px 0 #600a0a,0 0 16px rgba(255,100,80,.9)}
.banner small{display:block;font-size:.42em;-webkit-text-stroke:0;color:#fff;font-style:normal;text-shadow:0 2px 3px #000}
@keyframes bn{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.15);opacity:1}25%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(3,4,24,.6)}
.overlay[hidden]{display:none}
.card{width:min(90vw,380px);max-height:84vh;overflow:auto;border-radius:12px;border:2px solid #8a96e8;background:linear-gradient(180deg,#2a3290,#161a5a);box-shadow:0 0 22px rgba(0,0,0,.7);padding:12px 14px 14px;position:relative;animation:popin .25s ease-out}
@keyframes popin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.card h2{margin:0 0 8px;text-align:center;font-size:19px;font-weight:700}
.card p,.card li{font-size:12.5px;line-height:1.5;color:#e8ecff}
.card ol{margin:0;padding-left:20px}
.card .btn{display:block;margin:10px auto 0;min-width:90px;padding:7px 18px;border-radius:18px;font-weight:900;color:#3a1a00;background:linear-gradient(180deg,#ffe28a,#e0a020);border:2px solid #fff3b0}
.card .x{position:absolute;right:6px;top:4px;width:26px;height:26px;border-radius:50%;background:#0e1238;color:#fff;font-size:15px}
.card table{width:100%;border-collapse:collapse;font-size:12px;text-align:center}
.card td{padding:5px 3px;border-top:1px solid rgba(255,255,255,.12)}
.card .dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:4px}
.card .dot.b{background:#2a6ae8}.card .dot.r{background:#e0302a}
.rk{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(255,255,255,.12)}
.rk img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #cfd3ff;background:#0e1238}
.rk b{flex:1;font-size:12px;text-align:left}
.toast{position:fixed;left:50%;bottom:26%;transform:translateX(-50%);max-width:80vw;padding:8px 16px;border-radius:18px;background:rgba(0,0,0,.85);border:1px solid #8a96e8;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;text-align:center}
.toast.show{opacity:1}
#fx{position:fixed;inset:0;pointer-events:none;z-index:35}

/* splash (like the original loading screen) */
.splash{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(ellipse at 50% 40%,#3a4aa8 0,#161a5a 60%,#0a0c30);transition:opacity .45s}
.splash.hide{opacity:0;pointer-events:none}
.sp-title{font-size:30px;font-weight:800;text-shadow:0 3px 6px rgba(0,0,0,.7)}
.sp-icon{position:relative;width:150px;height:150px;border-radius:30px;background:linear-gradient(135deg,#2a62d8 50%,#d8302a 50%);border:6px solid #f2b21a;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.sp-icon span{position:absolute;width:62px;height:88px;border-radius:7px;background:#fff;color:#111;font-size:26px;font-weight:900;padding:4px;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.sp-icon .c1{left:12px;top:30px;transform:rotate(-16deg)}.sp-icon .c2{left:44px;top:22px;color:#d4162b}.sp-icon .c3{left:76px;top:30px;transform:rotate(16deg)}
.sp-bar{position:absolute;left:8%;right:8%;bottom:9%;height:30px;border-radius:15px;background:#5a3a0a;border:3px solid #f2b21a;overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,#4ad8a0 0 10px,#2ab07a 10px 20px);transition:width .2s}
.sp-bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;text-shadow:0 1px 2px #000}
@media (max-height:600px){.top{height:34px}.arena{height:clamp(86px,16vh,110px)}.dotsrow{margin-top:2px}.board{margin-top:4px}.foot{padding-top:4px}}