@font-face{font-family:Montserrat;src:url(../assets/fonts/Montserrat.ttf);font-weight:100 900;font-display:swap}
@font-face{font-family:"Titan One";src:url(../assets/fonts/TitanOne.ttf);font-display:swap}
@font-face{font-family:Aladin;src:url(../assets/fonts/Aladin.ttf);font-display:swap}
@font-face{font-family:"Lilita One";src:url(../assets/fonts/LilitaOne.ttf);font-display:swap}
:root{--ui:Montserrat,"Segoe UI",system-ui,sans-serif;--disp:"Titan One",Impact,sans-serif;--green:#ffd800;--hue:0deg}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05070c;font-family:var(--ui);color:#fff;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;padding:0;background:none}
a{color:inherit}
img{-webkit-user-drag:none}
[hidden]{display:none!important}
.gold{display:inline-block;font-family:var(--disp);font-weight:400;letter-spacing:.5px;background:linear-gradient(#fff 30%,#ffe9a0 55%,#ffc53a 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #4a2000) drop-shadow(0 0 1px #4a2000) drop-shadow(0 0 1px #4a2000) drop-shadow(0 4px 5px #000a)}
.pill{background:#000a;border:1px solid #ffffff2e;border-radius:12px;padding:5px 16px}
.pill small{display:block;font-size:10px;letter-spacing:1px;color:#b9c4d0;font-weight:600;line-height:1.2}
.pill b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
button:disabled{filter:grayscale(.7) brightness(.7);cursor:default}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{transform:scale(.2)}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-60% 0}}

/* ================= LOBBY SITE ================= */
#site{position:fixed;inset:0;overflow-y:auto;background:#161616 radial-gradient(ellipse at 50% 0,#2a2a2a,#161616 70%) fixed}
.col{max-width:1200px;margin:0 auto;background:#222;min-height:600px;padding-bottom:30px}

/* member bar */
#ubar{background:#2b2b2b;height:50px;display:flex;justify-content:center;padding:0 12px}
#auth{display:flex;align-items:center;gap:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ubal{display:flex;align-items:center;gap:10px;padding-right:12px;white-space:nowrap;font-size:15px}
.ubal b{min-width:48px;padding:2px 10px;border:1.5px solid #ffd800;border-radius:14px;color:#ffd800;font-weight:500;font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.ubal button{padding:6px 10px;border-radius:14px;background:#ffd800;color:#333;font-size:10px;font-weight:500}
.ubal button:hover{filter:brightness(1.1)}
.ubi{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-left:1px solid #8a8a8a;color:#fff;font:400 15px var(--ui);text-decoration:none;white-space:nowrap}
.ubi:last-child{border-right:1px solid #8a8a8a}
.ubi svg{width:25px;height:25px;flex:none}
.ubi:hover{color:#ffd800}
#auth .nb{margin-left:8px;padding:7px 22px}
@media(max-width:1080px){.ubi{font-size:0;gap:0}.ubal span{display:none}}

/* main header */
#nav{position:sticky;top:0;z-index:5;background:#161616;border-bottom:1px solid #d4af37;display:flex;align-items:center;justify-content:center;gap:26px;height:110px;padding:0 12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.brand img{width:46px;height:46px}
.brand span{font:400 40px var(--disp);letter-spacing:1px;background:linear-gradient(#ffe27a,#ff9a1a 55%,#e8420a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5a1a00);transform:skewX(-8deg)}
#menu{display:flex}
#menu .drop{display:none;position:absolute;left:-206px;top:100%;width:1030px;padding:0 0 10px;background:#5a0a1cf0;box-shadow:0 12px 24px #000a;z-index:9;flex-wrap:wrap;cursor:default}
#menu button:hover .drop{display:flex}
.drop>span{width:128.75px;padding:12px 4px 10px;display:grid;justify-items:center;gap:8px;color:#c8c8c8;font-size:12.5px;cursor:pointer}
#menu .drop img{width:54px;height:54px;transform:none!important}
.drop>span:hover{background:#ffd800;color:#222}
#menu button{position:relative;width:103px;flex:none;padding:6px 0;display:grid;justify-items:center;gap:12px;color:#fff;font:400 14.5px var(--ui);letter-spacing:.2px}
#menu img,#menu svg{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 3px #000a);transition:transform .15s}
#menu button:hover img,#menu button:hover svg{transform:translateY(-3px) scale(1.08)}
#menu button.on,#menu button:hover,#menu button.vip{color:#ffd800}
#menu .dot{position:absolute;top:0;right:24px;min-width:18px;height:18px;border-radius:9px;background:#e8121e;color:#fff;font-size:12px;line-height:18px;text-align:center}
@media(max-width:1180px){.brand span{font-size:30px}#menu button{width:84px;font-size:12.5px}}

/* notice bar */
#ticker{display:flex;align-items:center;gap:16px;height:32px;padding:0 20px;font-size:13px;color:#fff;overflow:hidden}
#ticker .nt{display:flex;align-items:center;gap:12px;flex:none}
#ticker .nt svg{width:20px;height:20px;color:#e8c890}
#ticker .tkw{flex:1;overflow:hidden;white-space:nowrap}
#ticker .tk{display:inline-block;padding-left:100%;animation:marquee 70s linear infinite}
#ticker .tk span{margin-right:48px}
#ticker i{font-style:normal;font-weight:600}
#ticker b{color:#ffd800;font-weight:600}
@keyframes marquee{to{transform:translateX(-100%)}}
#search{flex:none;width:170px;padding:5px 12px;border-radius:14px;border:1px solid #555;background:#1a1a1a;color:#fff;font:inherit;font-size:12.5px;outline:0}
#search:focus{border-color:#ffd800}
#search::placeholder{color:#8a8a8a}

/* banner carousel */
#hero{position:relative;aspect-ratio:1200/410;background:linear-gradient(135deg,#7adfff,#2aa8e8 50%,#7adfff);overflow:hidden}
.slide{position:absolute;inset:3.4% 1.2%;border-radius:0 46px 46px 46px;overflow:hidden;opacity:0;transition:opacity .6s;pointer-events:none;cursor:pointer;container-type:inline-size;
  background:radial-gradient(#ffffff12 1.2px,#0000 1.6px) 0 0/7px 7px,linear-gradient(100deg,#2a3af0,#1a1fc8 45%,#0a0a7a)}
.slide.on{opacity:1;pointer-events:auto}
.slide.kem{background:linear-gradient(90deg,#0000 30%,#0a0a5ae0 58%),url(../assets/img/kemet/background.jpg) 20% 42%/cover}
.slide .art{position:absolute;left:0;top:0;width:44%;height:100%}
.slide .art img{position:absolute;filter:drop-shadow(0 .8cqw 1cqw #0009)}
.slide .art .model{height:132%;left:-47%;top:-3%;filter:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000);mask-image:linear-gradient(90deg,#000 88%,#0000)}
.slide .art .m2{left:-40%;-webkit-mask-image:linear-gradient(90deg,#000 70%,#0000 97%);mask-image:linear-gradient(90deg,#000 70%,#0000 97%)}
.slide .tag{position:absolute;right:0;top:8%;padding:1.3cqw 3.6cqw 1.3cqw 4.4cqw;border-radius:3cqw 0 0 3cqw;background:linear-gradient(#3ac8d8,#1a8aa8);box-shadow:inset 0 0 0 .35cqw #7ae8f0;font:400 2.1cqw var(--disp);letter-spacing:.15cqw;color:#0a1a5a}
.slide .who{position:absolute;left:44.5%;top:8%;display:flex;align-items:center;gap:1.4cqw;padding:.7cqw 2.2cqw;border:.32cqw solid #ff9a1a;border-radius:3cqw;font:400 3cqw var(--disp);letter-spacing:.1cqw;color:#ff8a1a;-webkit-text-stroke:.06cqw #fff;transform:skewX(-8deg)}
.slide .who svg{width:2.6cqw;height:2.6cqw;color:#ffb81a}
.slide .who::before{content:"";order:1;width:.2cqw;height:2cqw;background:#ffb81a}
.slide .who svg{order:2}
.slide h2{position:absolute;left:44.5%;top:35%;margin:0;font:900 4cqw Georgia,"Times New Roman",serif;letter-spacing:.2cqw;color:#fff;white-space:nowrap}
.slide h2 b{color:#ffe21a}
.slide p{position:absolute;left:44.5%;margin:0;font:400 3.2cqw var(--disp);color:#fff;white-space:nowrap}
.slide .l1{top:56%}.slide .l2{top:72%}
#hero .dots{position:absolute;left:50%;bottom:3.6%;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
#hero .dots i{width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer}
#hero .dots i.on{background:#ffa81a}

/* VIP / promotion / support panels */
#panels{display:grid;grid-template-columns:120px 517fr 517fr;gap:23px;margin-top:20px}
.pn{background:#3d3d3d;border-radius:4px 4px 8px 8px;overflow:hidden}
.pn h3{margin:0;padding:6px 0 5px;background:#4a4a4a;text-align:center;font:600 17.5px var(--ui);color:#ffd800}
.pni{display:flex;justify-content:space-around;padding:14px 6px 12px}
.pni button{width:96px;display:grid;justify-items:center;gap:12px;color:#fff;font:400 12.5px/1.15 var(--ui)}
.pni img,.pni svg{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 3px #0009);transition:transform .15s}
.pni button:hover{color:#ffd800}
.pni button:hover img,.pni button:hover svg{transform:translateY(-3px) scale(1.1)}
@media(max-width:900px){#panels{grid-template-columns:1fr}}

/* game sections */
.sh{display:flex;align-items:center;gap:10px;margin:0;padding:26px 20px 12px;font:400 20px var(--ui);color:#ffd800}
.sh svg{width:30px;height:30px;color:#ffd800}
.sh small{font-size:13px;color:#8a8a8a;margin-left:6px}
.tiles{padding:0 20px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px 14px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:780px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
#grid .none{text-align:center;color:#8a8a8a;padding:60px 0}
/* a game's thumbnail: its own backdrop (two colours and a pattern), its symbols, its name in its own lettering; the name and jackpot sit below */
.tile{display:block;min-width:0;text-align:left}
.tile .th{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--c2);container-type:inline-size;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 10px #0007}
.tile:hover .th{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 26px #000b,0 0 0 2px #ffd800;z-index:2}
.tbg{position:absolute;inset:0;--base:radial-gradient(ellipse 80% 95% at 50% 36%,var(--c1),var(--c2));background:var(--base)}
.p-rays{background:radial-gradient(circle at 50% 36%,#fff8,#0000 34%),repeating-conic-gradient(from 4deg at 50% 36%,#ffffff38 0 6deg,#fff0 8deg 18deg,#ffffff38 20deg),var(--base)}
.p-dots{background:radial-gradient(circle at 9% 24%,#ffffff59 0 5cqw,#0000 5.4cqw),radial-gradient(circle at 90% 14%,#ffffff40 0 7cqw,#0000 7.4cqw),radial-gradient(circle at 79% 52%,#ffffff38 0 3.4cqw,#0000 3.8cqw),
  radial-gradient(circle at 21% 60%,#ffffff33 0 2.6cqw,#0000 3cqw),radial-gradient(circle at 34% 9%,#ffffff40 0 2cqw,#0000 2.4cqw),radial-gradient(circle at 66% 7%,#ffffff33 0 1.6cqw,#0000 2cqw),radial-gradient(circle at 50% 36%,#fff7,#0000 36%),var(--base)}
.p-diamonds{background:radial-gradient(circle at 50% 36%,#fff7,#0000 38%),repeating-linear-gradient(45deg,#ffffff24 0 1.2cqw,#0000 1.2cqw 8cqw),repeating-linear-gradient(-45deg,#ffffff24 0 1.2cqw,#0000 1.2cqw 8cqw),var(--base)}
.p-stripes{background:radial-gradient(circle at 50% 36%,#fff7,#0000 38%),repeating-linear-gradient(115deg,#ffffff30 0 5cqw,#0000 5cqw 12cqw),var(--base)}
.p-glow{background:radial-gradient(circle at 50% 34%,#fffc,#fff0 44%),radial-gradient(ellipse at 50% 120%,#000a,#0000 60%),var(--base)}
.p-kemet{background:url(../assets/img/kemet/background.jpg) 50% 30%/cover}
.tile .th::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#0000 52%,#0008);box-shadow:inset 0 0 0 1px #ffffff30;pointer-events:none;z-index:2}
.tile img{position:absolute;filter:drop-shadow(0 .8cqw 1.2cqw #0009)}
.tile .t1{height:62%;left:50%;top:2%;transform:translateX(-50%);z-index:2}
.tile .t2{height:44%;left:10%;top:10%;transform:rotate(-14deg)}
.tile .t3{height:44%;right:10%;top:10%;transform:rotate(14deg)}
.tile .hero{height:118%;top:4%}
.tile .big .t2,.tile .big .t3{height:36%;left:1%;top:15%}
.tile .big .t3{left:auto;right:1%;top:5%}
.tile .dl,.tile .dr{height:58%;left:-7%;bottom:-4%;z-index:1}
.tile .dr{left:auto;right:-7%;transform:scaleX(-1)}
.tile .ka{height:100%;left:50%;top:1%;transform:translateX(-50%);z-index:1}
.tile .kl{width:64%;left:18%;bottom:1%;z-index:3}
.tile .ttl{position:absolute;left:0;right:0;bottom:5%;z-index:3;text-align:center;font:400 10.5cqw/1 var(--disp);white-space:nowrap}
.tile .ttl span{display:block;background:linear-gradient(var(--i1) 22%,var(--i2) 55%,var(--i3) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .5cqw 0 var(--is)) drop-shadow(.3cqw 0 0 var(--is)) drop-shadow(-.3cqw 0 0 var(--is)) drop-shadow(0 -.3cqw 0 var(--is)) drop-shadow(0 .7cqw .8cqw #000b)}
.tile .ttl span+span{font-size:1.25em}
.tile .f-lilita{font-family:"Lilita One",var(--disp);letter-spacing:.02em}
.tile .f-aladin{font-family:Aladin,Georgia,serif;font-size:13.5cqw}
.tile .f-serif{font-family:Georgia,"Times New Roman",serif;font-weight:900}
.tile .f-mont{font-family:var(--ui);font-weight:900;font-style:italic;letter-spacing:-.03em}
.tile .big .ttl{font-size:9cqw;bottom:3%}
.tile .big .f-aladin{font-size:11.5cqw}
.i-gold{--i1:#fff;--i2:#ffe36a;--i3:#ff9d1a;--is:#4a1c00}
.i-ruby{--i1:#fff6a0;--i2:#ff6a2a;--i3:#d0101a;--is:#4a0008}
.i-candy{--i1:#fff;--i2:#ffb0e6;--i3:#ff3aa8;--is:#4a0a5a}
.i-lime{--i1:#fff;--i2:#e6ff5a;--i3:#3ad01a;--is:#0a3a0a}
.i-ice{--i1:#fff;--i2:#a8f0ff;--i3:#2a9aff;--is:#06205a}
.i-sun{--i1:#fff;--i2:#fff06a;--i3:#ffc81a;--is:#3a0a5a}
.tile .badge{position:absolute;left:0;top:0;z-index:4;padding:3px 10px 4px 9px;border-radius:0 0 10px 0;font:800 10px var(--ui);letter-spacing:.5px;color:#fff}
.badge.HOT{background:linear-gradient(#ff8a1a,#e8420a)}
.badge.NEW{background:linear-gradient(#3ed42a,#119a1a)}
.tile .mx{position:absolute;right:3%;top:3%;z-index:4;font:400 9cqw/1 var(--disp);background:linear-gradient(#fff 30%,#ffe21a 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .4cqw 0 #000) drop-shadow(.25cqw 0 0 #000) drop-shadow(-.25cqw 0 0 #000) drop-shadow(0 -.25cqw 0 #000)}
.tile .wm{position:absolute;left:62%;top:4%;z-index:2;transform:rotate(10deg);font:400 11cqw/1 var(--disp);color:#ffe21a;-webkit-text-stroke:.5cqw #3a0a5a;paint-order:stroke fill;filter:drop-shadow(0 .5cqw .5cqw #000a)}
.tile .go{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#000a;opacity:0;transition:opacity .15s}
.tile:hover .go{opacity:1}
.tile .go span{padding:7px 22px;border-radius:24px;background:#ffd800;color:#222;font:800 14px var(--ui);letter-spacing:1px;box-shadow:0 4px 12px #000a}
.tile .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 2px 0;font:500 12.5px var(--ui);color:#eee}
.tile .cap>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .jp{flex:none;font-size:11px;color:#9a9a9a;font-variant-numeric:tabular-nums}
.tile .jp b{color:#ff5a4a;font-weight:600;margin-right:3px}

/* floating side buttons */
#floats{position:fixed;right:24px;top:180px;z-index:6;display:grid;gap:10px}
#floats button{width:50px;height:50px;border-radius:9px;background:linear-gradient(#3a3a3a,#1e1e1e);box-shadow:0 3px 6px #000a,inset 0 1px 0 #555;display:grid;place-items:center;color:#ffd800}
#floats button:hover{filter:brightness(1.3)}
#floats svg{width:28px;height:28px}
#toTop{position:fixed;right:64px;bottom:210px;z-index:6;width:34px;height:34px;border-radius:50%;background:linear-gradient(#ff8a1a,#e8420a);color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px #000a}
#toTop svg{width:18px;height:18px}
@media(max-width:1340px){#floats,#toTop{display:none}}

/* footer */
#foot{padding:40px 16px 26px;background:#1f1f1f;text-align:center}
#foot .marks{max-width:860px;margin:0 auto 22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 34px;color:#8c8c8c}
#foot .marks span{display:inline-flex;flex-direction:column;align-items:center;line-height:1;white-space:nowrap}
#foot .marks small{font:600 8px var(--ui);letter-spacing:3px;margin-top:3px}
.m1{font:800 17px var(--ui);letter-spacing:1px}
.m2{font:400 28px Aladin,serif}
.m3{font:300 15px var(--ui);letter-spacing:4px}
.m4{font:400 24px var(--disp);letter-spacing:2px}
.m5{font:italic 700 20px Georgia,serif}
.m6{font:900 24px var(--ui);letter-spacing:-1px}
.m7{font:italic 900 19px var(--ui);transform:skewX(-8deg)}
.m8{font:400 26px Aladin,serif}
.m9{font:400 26px var(--disp)}
.m10{font:600 15px var(--ui);letter-spacing:3px;border:2px solid #8c8c8c;padding:5px 9px;border-radius:4px}
.m11{font:italic 400 25px Georgia,serif}
.m12{font:italic 900 22px var(--ui);letter-spacing:-1px;transform:skewX(-10deg)}
.m13{font:200 24px var(--ui);letter-spacing:8px}
#foot .cats{font-size:16px;color:#e8e8e8;word-spacing:4px}
#foot .cats a{color:#fff;text-decoration:none}
#foot .cats a:hover{color:#ffd800}
#foot .blurb{margin:14px auto 0;font-size:15px;color:#7a7a7a;line-height:1.35}
#foot .legal{margin:22px 0 0;font-size:12px;color:#666}
#foot .age{display:inline-block;padding:2px 6px;border:1.5px solid #666;border-radius:50%;font-weight:700;margin-right:6px}

/* buttons shared by the site, dialogs and profile */
.nb{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;background:#444;color:#eee;transition:filter .15s}
.nb:hover{filter:brightness(1.15)}
a.nb{text-decoration:none}
.nb.green{background:var(--green);color:#1a1a1a}
.nb.red{background:#b3283a;color:#fff}
.nb.wide{width:100%;justify-content:center;padding:13px;font-weight:700}
.nb svg{width:16px;height:16px}

/* site modal (login / register / cashier / account) */
#sm{position:fixed;inset:0;z-index:50;background:#000b;display:grid;place-items:center;padding:16px;animation:fade .15s;user-select:text}
.card{width:100%;max-width:400px;max-height:100%;overflow:auto;background:#2b2b2b;border:1px solid #4d4d4d;border-radius:14px;padding:22px;box-shadow:0 20px 60px #000}
.card h2{margin:0 0 14px;font-size:20px}
.card h2 svg{width:20px;height:20px;vertical-align:-3px}
.card h3{margin:0 0 8px;font-size:12px;letter-spacing:1px;color:#b4b4b4;text-transform:uppercase}
.card .tabs{display:flex;gap:6px;margin-bottom:16px;background:#1b1b1b;padding:4px;border-radius:10px}
.card .tabs button{flex:1;padding:10px;border-radius:8px;font-weight:700;color:#a8a8a8}
.card .tabs button.on{background:var(--green);color:#1a1a1a}
.card label{display:block;font-size:12px;font-weight:600;color:#b4b4b4;margin-bottom:12px}
.card input{display:block;width:100%;margin-top:5px;padding:12px;border-radius:8px;border:1px solid #4d4d4d;background:#1b1b1b;color:#fff;font:inherit;font-size:15px;outline:0}
.card input:focus,.card select:focus{border-color:var(--green)}
.phone{display:flex;gap:6px;margin-top:5px}
.phone select{flex:none;width:112px;padding:12px 8px;border-radius:8px;border:1px solid #4d4d4d;background:#1b1b1b;color:#fff;font:inherit;font-size:15px;font-weight:600;outline:0}
.phone input{margin-top:0;min-width:0}
.phone .nb{flex:none;padding:10px 14px}
#bindF .err{min-height:0;margin:-6px 0 10px}
.bound{display:flex;justify-content:space-between;align-items:center;margin-top:5px;padding:12px;border-radius:8px;border:1px solid #4d4d4d;background:#1b1b1b;color:#fff;font-size:15px}
.bound span{font-weight:500;color:#d2d2d2;font-variant-numeric:tabular-nums}
.card .err{min-height:18px;font-size:13px;color:#ff6a7a;margin-bottom:8px}
.card .fine{font-size:12px;color:#9a9a9a;line-height:1.5;margin:14px 0 0}
.card .fine a{color:#5ae08a}
.card dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0 0 14px;font-size:14px}
.card dt{color:#b4b4b4}
.card dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.card dl.tx{font-size:12.5px;gap:4px 12px}
.card dd.pos{color:#5ae08a}
.card dd.neg{color:#ff8a8a}
.card .col{display:grid;gap:8px}
.meth,.chips{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.meth button,.chips button{flex:1;padding:10px 6px;border-radius:8px;background:#1b1b1b;border:1px solid #4d4d4d;color:#d2d2d2;font-weight:700;font-size:13px;white-space:nowrap}
.meth button.on{border-color:var(--green);color:#fff;background:#3d3400}
.chips{margin:-4px 0 12px}
.chips button:hover{border-color:var(--green);color:#fff}
.promo{margin:0 0 10px;padding:9px 12px;border-radius:8px;background:linear-gradient(90deg,#7a4a00,#3a2400);border:1px solid #ffc94a88;color:#ffe9a8;font-size:13px;font-weight:700}
.proc{text-align:center;padding:24px 0 4px}
.proc p{color:#d2d2d2;font-size:16px;margin:14px 0 20px}
.proc h2{margin:14px 0 0}
.spinner{width:54px;height:54px;margin:0 auto;border-radius:50%;border:5px solid #3a3a3a;border-top-color:var(--green);animation:rot .8s linear infinite}
.ok{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:36px;font-weight:900;color:#1a1a1a;animation:zoom .3s cubic-bezier(.3,1.7,.6,1)}
.cap{display:flex;gap:8px;margin-top:5px;align-items:stretch}
.cap img{width:170px;height:54px;border-radius:8px;border:1px solid #4d4d4d;cursor:pointer;flex:none}
.cap input{margin-top:0;min-width:0;text-transform:uppercase;letter-spacing:3px;font-weight:700;text-align:center}
.cap input::placeholder{letter-spacing:0;font-weight:400;text-transform:none}
/* login / register: a wide dark panel with a gold rim, the form on the left, the way to the other form on the right, news along the bottom */
.card.auth{position:relative;max-width:900px;padding:30px 92px 24px;border:2px solid #0000;border-radius:4px;background:linear-gradient(#081811,#06120d) padding-box,linear-gradient(120deg,#f0b43a,#1aa898 45%,#f0b43a) border-box}
.auth h2{margin:0 0 22px;text-align:center;font:500 26px var(--ui);color:#ffd800}
.auth .ax{position:absolute;right:18px;top:10px;font:300 44px/1 var(--ui);color:#fff}
.auth .ax:hover{color:#ffd800}
.auth .ag{display:grid;grid-template-columns:1fr 78px 180px;align-items:stretch}
.auth label{font-size:14px;color:#fff;margin-bottom:20px}
.auth label>span{display:flex;align-items:center;gap:8px}
.auth label svg{width:19px;height:19px}
.auth label i{color:#ff3a3a;font-style:normal;margin-left:4px}
.card.auth input{margin-top:8px;padding:9px 10px;border-radius:4px;border:1px solid #c9a24a;background:#030b08;font-size:13.5px}
.card.auth input:focus{border-color:#ffd800;box-shadow:0 0 0 1px #ffd800}
.auth input::placeholder{color:#8a9a92}
.auth .pw{position:relative}
.auth .pw input{padding-right:38px}
.auth .eye{position:absolute;right:8px;top:8px;bottom:0;margin:auto 0;width:20px;height:20px;color:#8a9a92}
.auth .eye svg{width:20px;height:20px}
.auth .eye.on,.auth .eye:hover{color:#ffd800}
.auth .cap{margin-top:8px}
.auth .cap img{border-color:#c9a24a;border-radius:4px}
.card.auth .cap input{margin-top:0}
.auth .err{text-align:center}
.auth .ago{display:block;margin:0 auto;padding:8px 28px;border-radius:5px;border:1px solid #7a7a7a;background:linear-gradient(#5c5c5c,#1c1c1c 55%,#0c0c0c);color:#fff;font:600 14px var(--ui);letter-spacing:.3px;box-shadow:0 2px 4px #000a}
.auth .ago:hover{filter:brightness(1.3)}
.auth .aor{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;gap:8px;font-size:13px;color:#fff}
.auth .aor::before,.auth .aor::after{content:"";width:1px;background:#5a6a62}
.auth aside{display:grid;align-content:center;justify-items:center;gap:14px;text-align:center}
.auth aside h3{margin:0;font:500 13.5px var(--ui);letter-spacing:0;text-transform:none;color:#fff}
.auth aside p{margin:0;font-size:12px;line-height:1.5;color:#b9c8c0}
.auth .anews{margin-top:22px}
.auth .anews h3{margin:0 0 6px;font:500 13.5px var(--ui);letter-spacing:0;text-transform:none;color:#fff}
.auth .anews p{margin:0;padding:6px;border:1px solid #c9a24a;border-radius:4px}
.auth .anews span{display:block;padding:4px 8px;background:#000;font-size:12.5px;color:#fff}
@media(max-width:820px){.card.auth{padding:24px 20px 20px}.auth .ag{grid-template-columns:1fr}.auth .aor{grid-template-rows:none;grid-template-columns:1fr auto 1fr;align-items:center;margin:18px 0 14px}.auth .aor::before,.auth .aor::after{width:auto;height:1px;justify-self:stretch}}

/* profile page */
.pwrap{margin:0;padding:20px;display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;user-select:text}
.pside{background:#2b2b2b;border:1px solid #3f3f3f;border-radius:12px;padding:10px;display:grid;gap:4px;position:sticky;top:84px}
.pid{text-align:center;padding:16px 8px 14px;border-bottom:1px solid #3f3f3f;margin-bottom:6px}
.pid .av{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(135deg,#ffd800,#ff8a1a);color:#222;display:grid;place-items:center;font:400 30px var(--disp)}
.pid b{display:block;font-size:17px}
.pid small{color:#9a9a9a;font-size:12px}
.pside button{padding:11px 14px;border-radius:8px;text-align:left;font-weight:600;font-size:14px;color:#d2d2d2}
.pside button:hover{background:#383838}
.pside button.on{background:var(--green);color:#1a1a1a}
.pside .back{margin-top:6px;border-top:1px solid #3f3f3f;border-radius:0 0 8px 8px;color:#9a9a9a}
.pmain{min-height:420px}
.pmain h1{margin:4px 0 16px;font-size:24px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.stat,.pcard{background:#2b2b2b;border:1px solid #3f3f3f;border-radius:12px;padding:16px 18px}
.stat small{display:block;color:#a8a8a8;font-size:12px;font-weight:600;margin-bottom:6px}
.stat b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.pos{color:#5ae08a}.neg{color:#ff8a8a}
.prow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pcard{margin-bottom:14px;max-width:560px}
.pcard h3{margin:0 0 10px;font-size:15px}
.pcard .fine{font-size:13px;color:#a8a8a8;margin:0 0 12px;line-height:1.5}
.pcard .big{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.pcard label{display:block;font-size:12px;font-weight:600;color:#b4b4b4;margin-bottom:12px}
.pcard input{display:block;width:100%;margin-top:5px;padding:12px;border-radius:8px;border:1px solid #4d4d4d;background:#1b1b1b;color:#fff;font:inherit;font-size:15px;outline:0}
.pcard input:focus,.pcard select:focus{border-color:var(--green)}
.pcard .err{min-height:18px;font-size:13px;color:#ff6a7a;margin:6px 0}
.pcard.danger{border-color:#6a2a34}
.ptable{width:100%;border-collapse:collapse;background:#2b2b2b;border:1px solid #3f3f3f;border-radius:12px;overflow:hidden;font-size:14px}
.ptable th{text-align:left;padding:12px 16px;background:#232323;color:#a8a8a8;font-size:12px;font-weight:600}
.ptable td{padding:11px 16px;border-top:1px solid #393939;font-variant-numeric:tabular-nums}
.ptable th:nth-child(n+3),.ptable td:nth-child(n+3){text-align:right}
.ptable td span{font-weight:700}
.empty{color:#9a9a9a;padding:40px 0;text-align:center}
@media(max-width:760px){.pwrap{grid-template-columns:1fr}.pside{position:static;grid-template-columns:1fr 1fr}.pid{grid-column:1/-1}}
#toast{position:fixed;left:50%;top:84px;transform:translateX(-50%) scale(.8);background:#000e;border:1px solid #ffc94a;padding:10px 22px;border-radius:24px;font-weight:700;font-size:15px;opacity:0;transition:.25s;pointer-events:none;z-index:60;white-space:nowrap}
#toast.on{opacity:1;transform:translateX(-50%) scale(1)}

/* ================= GAME SCREEN ================= */
#gamewrap{position:fixed;inset:0;background:#05030c;overflow:hidden}
#backdrop{position:absolute;inset:-60px;background:url(../assets/img/kemet/background.jpg) center/cover;filter:hue-rotate(var(--hue)) blur(34px) brightness(.4)}
#stage{position:absolute;left:50%;top:0;width:540px;height:960px;transform-origin:top center;overflow:hidden;box-shadow:0 0 80px #000}
#stage.notrans *{transition:none!important}
.bg{position:absolute;inset:-30px;background:url(../assets/img/kemet/background.jpg) 50% 0/auto 100%;filter:hue-rotate(var(--hue)) blur(9px) saturate(1.15) brightness(.62)}
[data-game=kemet] .bg{inset:0;filter:brightness(.9)}
#stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#0006,#0000 22%,#0000 62%,#000c)}
.rbtn{width:46px;height:46px;border-radius:50%;background:#0009;border:2px solid #ffffff55;font-size:20px;font-weight:800;display:grid;place-items:center;transition:transform .08s}
.rbtn:active{transform:translateY(2px)}
.rbtn.on{background:#ffc53a;border-color:#fff;color:#3a1a00}
.rbtn svg{width:24px;height:24px}
.rbtn.sm{width:34px;height:34px;font-size:18px}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;z-index:2}
.btn{flex:1;padding:9px;border-radius:10px;background:#ffffff1f;border:1px solid #fff3;font-weight:700;font-size:13px}
.btn.g{background:#ffc53a;color:#3a1a00;border-color:#fff8}
#top{display:flex;align-items:center;gap:8px;padding:8px 12px 0;height:58px;z-index:3}
#top .sp{flex:1}
#logo{height:78px;display:grid;place-items:center;text-align:center;z-index:2}
#logo .gold{font-size:46px;line-height:1;white-space:nowrap}
#logo .gold.long{font-size:36px}
#logo img{height:168px;filter:drop-shadow(0 6px 10px #000a)}
[data-game=kemet] #logo{height:172px}
[data-game=kemet] #banner{height:40px}
#logo .fsb{font-size:15px;font-weight:700;letter-spacing:1px;color:#fff}
#logo .fsb b{font:400 28px var(--disp);color:#ffe27a;margin:0 6px}
#banner{height:58px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:2}
.ladder{display:flex;gap:4px;padding:5px 16px;border-radius:32px;background:#000a;border:1px solid #ffffff40}
.ladder span{width:92px;text-align:center;font:400 27px var(--disp);color:#8a93ad;transition:.2s}
.ladder span.on{transform:scale(1.3);background:linear-gradient(#fff,#ffd83c 60%,#ff9a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px #ffb800) drop-shadow(0 2px 0 #4a2000)}
.tagl{padding:6px 20px;border-radius:24px;background:#000a;border:1px solid #ffffff40;font-weight:700;letter-spacing:1px;font-size:14px;color:#ffe9a8}
.mctl{display:flex;align-items:center;gap:10px;padding:5px 12px}
.mctl b{font:400 22px var(--disp);color:#fff;margin-right:5px}
.mctl .nx{margin-left:8px;padding-left:14px;border-left:1px solid #ffffff40;color:#8affb0}
#mid{flex:1;display:grid;place-items:center;min-height:0}
#frame{padding:7px;border-radius:18px;background:linear-gradient(#f7dc8a,#c9962a 22%,#7a4a0a 50%,#d9a93a 80%,#6a3c06);box-shadow:0 0 0 2px #2a1200,0 10px 24px #000b}
#board{--t:.32s;position:relative;width:520px;overflow:hidden;border-radius:12px;box-shadow:inset 0 0 30px #000c}
[data-game=kemet] #frame{width:678px;height:457px;margin:0 -69px;padding:96px 0 0 108px;border-radius:0;background:url(../assets/img/kemet/frame_filled.png) 0 0/100% 100%;box-shadow:none;filter:drop-shadow(0 10px 14px #000a)}
[data-game=kemet] #board{width:470px;border-radius:4px;box-shadow:none;background:repeating-linear-gradient(90deg,#0000 0 93px,#ffffff14 93px 94px)}
[data-game=ace] #board{background:repeating-linear-gradient(90deg,#0000 0 103px,#0006 103px 104px),linear-gradient(#0b2f7a,#051642)}
[data-game=prutas] #board{background:repeating-linear-gradient(90deg,#0000 0 85.6px,#fff2 85.6px 86.66px),linear-gradient(#2a0f6ee0,#4a1a8ae0)}
[data-game=swerte] #board{background:repeating-linear-gradient(90deg,#0000 0 101px,#c9962a 101px 104px),linear-gradient(#8f8672,#fffdf4 22%,#fffdf4 78%,#8f8672);box-shadow:inset 0 0 18px #0009}
[data-game=hiyas3] #board{background:repeating-linear-gradient(90deg,#0000 0 128px,#0007 128px 130px),linear-gradient(#063a2c,#021a14)}
[data-game=hiyas3] #board::before{content:"";position:absolute;right:0;top:0;width:25%;height:100%;background:linear-gradient(#ffd24a30,#ff9a0040);border-left:3px solid #ffc94a}
[data-game=hiyas3] #board::after{content:"";position:absolute;right:4px;top:calc(33.33% + 2px);width:calc(25% - 10px);height:calc(33.33% - 4px);border:3px solid #fff6a8;border-radius:14px;box-shadow:0 0 14px #ffb800,inset 0 0 10px #ffb80088;pointer-events:none}
[data-game=kislap] #board{background:repeating-linear-gradient(90deg,#0000 0 73.3px,#fff1 73.3px 74.29px),linear-gradient(#2a0a4ae8,#14042ae8)}
.cell{position:absolute;top:0;transform:translateY(calc(var(--r)*100%));transition:transform var(--t) cubic-bezier(.3,1.2,.6,1);padding:3px}
[data-game=kemet] .cell{padding:1px}
.cell.mdim{opacity:.4}
.sym{position:relative;width:100%;height:100%;transition:filter .25s;container-type:size}
.sym img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
.sym.png img{padding:5%}
[data-game=kemet] .sym.png img{padding:0;transform:scale(1.12)}
.sym.gc::after{content:"";position:absolute;inset:4px;border-radius:10px;background:linear-gradient(115deg,#fff0 35%,#fffc 50%,#fff0 65%);background-size:300% 100%;animation:sheen 2.2s infinite;mix-blend-mode:overlay}
.sym.royal{display:grid;place-items:center}
.sym.royal span{font:400 88cqh/1 Aladin,Georgia,serif;-webkit-text-stroke:.07em #f6cf6a;paint-order:stroke fill;background:linear-gradient(var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .03em 0 #6a3c06) drop-shadow(0 .06em .05em #000c)}
.rJ{--a:#7af0e6;--b:#0e8a9a}.rQ{--a:#d9a0ff;--b:#6a1fb8}.rK{--a:#ff9a8a;--b:#b8121e}.rA{--a:#a8f08a;--b:#1a8a2a}
#board.dim .cell:not(.win) .sym{filter:brightness(.35) saturate(.6)}
[data-game=swerte] #board.dim .cell:not(.win) .sym{filter:opacity(.3)}
.cell.win{z-index:2;opacity:1}
.cell.win .sym{animation:pulse .45s ease-in-out infinite alternate}
.cell.win::after{content:"";position:absolute;inset:1px;border-radius:12px;border:3px solid #fff6a8;box-shadow:0 0 16px 4px #ffb800,inset 0 0 12px #ffb800;animation:blink .45s infinite alternate}
[data-game=prutas] .cell.win::after{border-radius:50%}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes blink{from{opacity:.5}to{opacity:1}}
.cell.pop::after{display:none}
.cell.pop .sym{animation:pop .28s forwards}
@keyframes pop{30%{transform:scale(1.3);filter:brightness(2.5)}100%{transform:scale(0) rotate(30deg);opacity:0}}
.cell.flip .sym{animation:flip .3s}
@keyframes flip{50%{transform:rotateY(90deg) scale(1.15);filter:brightness(2)}}
#winbar{height:54px;display:grid;place-items:center;z-index:2}
#winbar .gold{font-size:30px;line-height:1;white-space:nowrap}
#winbar.bump .gold{animation:bump .3s}
@keyframes bump{40%{transform:scale(1.25)}}
#panel{height:178px;padding:8px 14px 14px;z-index:2;display:grid;grid-template-rows:auto 1fr;gap:8px}
#panel .info{display:flex;justify-content:space-between}
#panel .ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.betbox{display:flex;align-items:center;gap:6px}
.betbox .pill{flex:1;text-align:center;padding:5px 4px}
.side{display:flex;gap:10px;justify-content:flex-end}
.side .rbtn{width:56px;height:56px;font-size:10.5px;letter-spacing:.3px}
#spin{position:relative;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#9af07a,#2fb82a 45%,#0f7a0a 90%);border:4px solid #fff;box-shadow:0 6px 0 #0a4a08,0 12px 18px #000b;display:grid;place-items:center;transition:transform .08s}
#spin:active{transform:translateY(5px);box-shadow:0 1px 0 #0a4a08}
#spin svg{width:66px;height:66px;filter:drop-shadow(0 2px 0 #0a4a00)}
#spin.busy svg{animation:rot .7s linear infinite}
#spin.stop{background:radial-gradient(circle at 35% 28%,#ff9a8a,#e8322a 45%,#8a0a0a 90%);box-shadow:0 6px 0 #5a0808,0 12px 18px #000b}
#spin.stop::after{content:"STOP";position:absolute;font:400 24px var(--disp);letter-spacing:1px;text-shadow:0 2px 0 #5a0000}
#spin.stop svg{opacity:.2}

/* table games */
#act{display:none;height:84px;border-radius:42px;font:400 26px var(--disp);letter-spacing:1px;text-shadow:0 2px 0 #0a4a00;background:linear-gradient(#6ae04a,#1f9a1a);border:4px solid #fff;box-shadow:0 6px 0 #0a4a08,0 10px 16px #000b;transition:transform .08s}
#act:active{transform:translateY(4px)}
#act.cash{background:linear-gradient(#ffe27a,#ffa81a);color:#3a1a00;text-shadow:none;font-size:22px;box-shadow:0 6px 0 #7a4200,0 10px 16px #000b}
#game.tbl #spin,#game.tbl .side,#game.tbl #board{display:none}
#game.tbl #act{display:block}
#game.tbl .ctl{grid-template-columns:200px 1fr}
#table{width:520px;padding:8px;border-radius:12px;background:linear-gradient(#10243a,#0a1428);box-shadow:inset 0 0 30px #000c}
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mt{aspect-ratio:1;border-radius:14px;background:linear-gradient(#5a7cf0,#2a3ab8);box-shadow:inset 0 4px 0 #fff4,inset 0 -6px 0 #0005,0 3px 0 #0008;transition:transform .1s,filter .1s;display:grid;place-items:center}
.mt:hover{filter:brightness(1.2)}
.mt:active{transform:scale(.94)}
.mt.open{background:#0a1430;box-shadow:inset 0 0 14px #000;filter:none}
.mt.boom{background:radial-gradient(#ff7a2a,#7a0a08)}
.mt.ghost{opacity:.4}
.mt img{width:80%;animation:zoom .25s cubic-bezier(.3,1.6,.6,1)}
.ktray{display:flex;justify-content:center;gap:22px;padding:18px;border-radius:12px;background:radial-gradient(#1a7a42,#0a3a1e);box-shadow:inset 0 0 24px #000a;margin-bottom:10px}
.kd{width:104px;height:104px;filter:drop-shadow(0 6px 4px #000a)}
.kd.shake{animation:kshake .16s infinite}
.kd.land{animation:kland .3s cubic-bezier(.3,1.6,.6,1)}
@keyframes kshake{25%{transform:translate(-5px,4px) rotate(-12deg)}50%{transform:translate(4px,-6px) rotate(9deg)}75%{transform:translate(5px,5px) rotate(-6deg)}}
@keyframes kland{from{transform:translateY(-40px) scale(1.2)}}
.kpads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp{position:relative;height:98px;border-radius:12px;background:linear-gradient(var(--c1),var(--c2));border:2px solid #fff5;box-shadow:inset 0 3px 0 #fff4,inset 0 -5px 0 #0003,0 4px 0 #0008;font:400 22px var(--disp);letter-spacing:1px;color:#fff;text-shadow:0 2px 0 #0009;transition:transform .08s}
.kp:active{transform:scale(.96)}
.kp .kbet{position:absolute;right:6px;bottom:6px;padding:2px 10px;border-radius:14px;background:#000c;border:1px solid #ffc94a;font:700 13px var(--ui);text-shadow:none;color:#ffe27a}
.kp .kx{position:absolute;left:8px;top:4px;font-size:20px;color:#fff6a8}
.kp.hit{border-color:#fff6a8;box-shadow:0 0 18px 5px #ffb800,inset 0 4px 0 #fff6;animation:blink .4s infinite alternate}
.kp.miss{filter:brightness(.45) saturate(.6)}
.krow{display:flex;gap:8px;margin-top:10px;align-items:center}
.krow .pill{flex:1;text-align:center;padding:4px}

.kp small{display:block;font:600 11px var(--ui);letter-spacing:.3px;opacity:.9;text-shadow:none;margin-top:3px}
.kd.die{border-radius:20px;background:#fff}
.felt{display:grid;gap:8px;padding:12px;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,#1c8a4c,#0a3a1e);box-shadow:inset 0 0 28px #000a;margin-bottom:10px}
.felt.duo{grid-template-columns:1fr 1fr;direction:rtl}
.felt.duo>*{direction:ltr}
.hand{min-height:150px;text-align:center}
.felt:not(.duo) .hand{min-height:164px}
.hand small{display:inline-block;padding:3px 12px;border-radius:12px;background:#0007;font-weight:700;font-size:12px;letter-spacing:1px;color:#d8f0e0;margin-bottom:8px}
.hand small b{color:#ffe27a;font-size:14px;margin-left:4px}
.cards{display:flex;justify-content:center;height:118px}
.pc{width:86px;height:116px;border-radius:7px;box-shadow:0 4px 8px #0008}
.pc+.pc{margin-left:-38px}
.felt:not(.duo) .pc+.pc{margin-left:-52px}
.pc.deal{animation:deal .32s cubic-bezier(.2,.8,.3,1)}
@keyframes deal{from{transform:translate(120px,-160px) rotate(25deg);opacity:0}}
.bjbtn{display:flex;gap:8px}
.bjbtn .btn{padding:16px 0;font:400 19px var(--disp);letter-spacing:1px;background:#ffffff26}
.bjbtn .btn:not(:disabled){background:linear-gradient(#ffe27a,#ffa81a);color:#3a1a00;border-color:#fff8}
.crhist{display:flex;gap:6px;overflow:hidden;margin-bottom:8px;min-height:26px}
.crhist span{flex:none;padding:4px 10px;border-radius:12px;background:#ffffff14;font-size:12px;font-weight:700;color:#9fb0c8;font-variant-numeric:tabular-nums}
.crhist span.hi{background:#19b36b33;color:#5ae08a}
.crbox{position:relative;border-radius:12px;background:linear-gradient(#0c1830,#060c1c);overflow:hidden}
.crbox canvas{display:block;width:504px;height:330px}
.crm{position:absolute;inset:0;display:grid;place-items:center;font:400 72px var(--disp);color:#fff;text-shadow:0 4px 0 #0008,0 0 30px #ffc53a88;pointer-events:none;font-variant-numeric:tabular-nums}
.crm.dead{color:#ff5a6a;text-shadow:0 4px 0 #0008}

/* overlays inside the stage */
#fx{position:absolute;inset:0;pointer-events:none;z-index:22}
#overlay{position:absolute;inset:0;background:#000c;display:grid;place-items:center;z-index:20;text-align:center;animation:fade .2s;overflow:hidden}
#overlay .burst{position:absolute;width:1100px;height:1100px;left:-280px;top:-70px;border-radius:50%;background:repeating-conic-gradient(#ffd24a33 0 9deg,#0000 9deg 18deg);-webkit-mask:radial-gradient(#000 10%,#0000 65%);mask:radial-gradient(#000 10%,#0000 65%);animation:rot 14s linear infinite}
#overlay .in{position:relative;animation:zoom .4s cubic-bezier(.3,1.7,.6,1)}
#overlay h1{margin:0;font-size:72px;line-height:1;font-weight:400}
#overlay .ovimg{width:500px;filter:drop-shadow(0 8px 14px #000)}
#overlay p{margin:14px 0 4px;font-size:50px}
#overlay small{font-size:16px;font-weight:700;color:#ffe9a8;letter-spacing:1px}
#modal{position:absolute;inset:0;background:#000c;z-index:25;display:grid;place-items:center;padding:18px}
#modal .box{width:100%;max-height:100%;overflow:auto;background:#141826;border:1px solid #ffffff40;border-radius:16px;padding:16px}
#modal h2{margin:0 0 6px;text-align:center}
#modal h2 .gold{font-size:28px}
#modal table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
#modal td,#modal th{padding:3px 8px;border-bottom:1px solid #fff2;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
#modal td:first-child{width:50px;padding:2px}
#modal td:first-child .sym{width:40px;height:44px}
#modal th{color:#ffd98a;font-size:11px;font-weight:700}
#modal ul{padding-left:18px;margin:8px 0;font-size:13.5px;line-height:1.45}
#modal .fine{font-size:12px;color:#aab3c8}
#loader{position:absolute;inset:0;z-index:40;background:#05070c;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center}
#loader .gold{font-size:44px;line-height:1.05;max-width:480px}
#loader img{width:400px}
#loader .bar{width:280px;height:8px;border-radius:8px;background:#ffffff22;overflow:hidden}
#loader .bar i{display:block;height:100%;background:#ffc53a;animation:load 1.05s ease-out forwards}
#loader small{letter-spacing:3px;color:#aab3c8;font-weight:600;font-size:11px}
@keyframes load{from{width:0}to{width:100%}}

/* ================= PERSONAL CENTER MODAL ================= */
.pcm{position:relative;display:grid;grid-template-columns:180px 1fr;width:min(1290px,100%);height:min(620px,100%);background:#fff;color:#222;border-radius:8px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:14px;box-shadow:0 20px 60px #000}
.pcm button{font-family:inherit}
.pcm aside{background:#0b2547;color:#fff;overflow-y:auto}
.pcm aside h2{margin:0;padding:30px 0 26px;text-align:center;font:700 26px/1.2 Arial,sans-serif}
.pcm aside button{display:flex;align-items:center;gap:8px;width:100%;height:50px;padding:0 16px;color:#fff;font-size:17px;text-align:left;white-space:nowrap}
.pcm aside button svg{width:22px;height:22px;flex:none;padding:3px;border:1.5px solid #fff;border-radius:50%}
.pcm aside button:hover{background:#ffffff14}
.pcm aside button.on{background:#e8bd6d}
.pcx{position:absolute;right:18px;top:12px;width:36px;height:36px;font-size:28px;line-height:1;color:#000}
.pcb{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.pch{display:flex;align-items:center;gap:8px;height:58px;padding:0 70px 0 18px;border-bottom:1px solid #e6e6e6;font-size:16px;flex:none}
.pch i{width:5px;height:16px;background:#2fd06a}
.pch .hist{margin-left:auto;display:flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid #c9d2ff;border-radius:18px;color:#4a5ae8;font-size:14px}
.pch .hist svg{width:20px;height:20px}
.pcpad{flex:1;overflow-y:auto;padding:16px}
.pcfoot{display:flex;align-items:center;gap:16px;padding:10px 30px;border-top:1px solid #e6e6e6;flex:none}
.pcm .err{color:#e8222a;font-size:13px}
.redbtn{padding:9px 20px;border-radius:20px;background:#fa2a2a;color:#fff;font-size:14px;font-weight:700;box-shadow:0 3px 8px #fa2a2a55}
.redbtn:hover{filter:brightness(1.1)}
.linebtn{padding:8px 18px;border-radius:20px;border:1.5px solid #fa2a2a;color:#fa2a2a;font-size:14px;font-weight:700}
.pcm .flash{margin:0 0 14px;padding:11px 14px;border-radius:6px;font-weight:700}
.pcm .flash.ok{background:#e8f8ee;border:1px solid #2fd06a;color:#138a42}
.pcm .flash.bad{background:#fff0f0;border:1px solid #fa9a9a;color:#d0121a}
.pcwait{position:absolute;inset:0;background:#fffc;display:grid;place-content:center;justify-items:center;gap:14px;z-index:3;font-size:16px;color:#444}
.pcwait .spinner{border-color:#ddd;border-top-color:#fa2a2a}
/* deposit */
/* deposit methods: a grid of cards; the channels of the chosen one sit in a grey panel below */
.meths{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.meths button,.chs button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:48px;padding:0 8px;background:#fff;border:1px solid #d9dde3;border-radius:3px;font-size:13px;color:#777}
.meths span,.chs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meths button.on{background:#eaf3ff;border-color:#8ab8f0;color:#111}
.meths i,.chs i,.boundc i{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;color:#fff;font:700 22px Arial;font-style:normal;flex:none}
.meths i,.chs i{width:18px;height:18px;border-radius:3px;font-size:11px}
.chs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px;padding:12px 10px;background:#f6f6f6}
.chs button.on{background:#fffdf0;border-color:#f0b400;color:#111}
.chs b{width:7px;height:7px;border-radius:50%;background:#2fd06a;flex:none}
.frow{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}
.frow>label{flex:none;width:130px;padding-top:9px;font-size:14px;white-space:nowrap}
.amts{display:flex;flex-wrap:wrap;gap:16px 6px;flex:1}
.amts button{min-width:66px;height:38px;padding:0 10px;border:1px solid #ffc9c9;border-radius:5px;color:#555;font-size:14px}
.amts button.on,.amts button:hover{border-color:#fa2a2a;color:#fa2a2a}
.amts input{flex:0 0 224px;margin-right:calc(100% - 224px);height:34px;padding:0 12px;border:1px solid #ddd;border-radius:4px;background:#eee;font-size:13px;outline:0}
.amts input:focus{border-color:#fa2a2a;background:#fff}
.lim{margin:0 0 14px 138px;color:#e8121a;font-size:14px}
.promos{flex:1;max-width:500px;display:grid;gap:10px}
.promos label{display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid #ffb0b0;border-radius:6px;background:#fff6f6;cursor:pointer}
.promos label.off{background:#eee;border-color:#e2e2e2;color:#bbb;cursor:default}
.promos input{width:18px;height:18px;accent-color:#fa2a2a;flex:none}
.promos span{flex:1}
.promos b{display:block;font-size:14.5px;letter-spacing:.3px}
.promos small{display:block;font-size:13px;margin-top:2px;opacity:.8}
.promos em{font-style:normal;font-weight:700;align-self:flex-start}
.promos sub{font-size:9px}
.boundc{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #eee;border-radius:6px;box-shadow:0 2px 8px #0001;min-width:330px}
.boundc span{flex:1}
.boundc b,.boundc small{display:block}
.boundc small{color:#777;margin-top:2px}
.avail{padding-top:7px;font-size:17px}
/* records */
.pctabs{display:flex;gap:4px;height:42px;padding:0 70px 0 24px;border-bottom:1px solid #e6e6e6;flex:none}
.pctabs button{padding:0 18px;font-size:14px;color:#555;border-bottom:3px solid #0000}
.pctabs button.on{color:#fa2a2a;border-bottom-color:#fa2a2a}
.pcf{display:flex;align-items:center;gap:16px;padding:10px 16px;flex:none;flex-wrap:wrap;color:#444}
.pcf label{display:flex;align-items:center;gap:6px;cursor:pointer}
.pcf input[type=radio]{width:18px;height:18px;accent-color:#fa2a2a}
.pcf .dt{padding:8px 14px;border-radius:4px;background:#ececec;border:1px solid #ddd;font-size:14px}
.pcf .sel{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid #ddd}
.pcf select{height:34px;padding:0 8px;border:1px solid #ddd;border-radius:4px;font-size:14px}
.pcf .redbtn{padding:9px 28px}
.pct{flex:1;overflow:auto;background:#ededed;position:relative}
.pct table{width:100%;border-collapse:collapse;font-size:12.5px}
.pct th{position:sticky;top:0;background:#f6f6f6;color:#555;font-weight:400;text-align:left;padding:8px 14px;white-space:nowrap}
.pct th:first-child,.pct td:first-child{padding-left:30px}
.pct td{padding:8px 14px;background:#fff;border-bottom:1px solid #eee;white-space:nowrap}
.pct .pos{color:#138a42;font-weight:700}.pct .neg{color:#e8121a;font-weight:700}
.nodata{position:absolute;inset:40px 0 0;display:grid;place-items:center;margin:0;color:#444;font-size:12.5px}
.pctot{display:flex;gap:40px;padding:8px 30px 8px 180px;background:#e2e2e2;font-size:12.5px;color:#444;flex:none}
.pctot b{font-weight:400}
.pnl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 12px;flex:none}
.pnl div,.pcm .box{border:1px solid #eee;border-radius:6px;box-shadow:0 2px 8px #0001;padding:14px 16px;background:#fff}
.pnl small,.pcm .box small{display:block;color:#777;font-size:12.5px;margin-bottom:4px}
.pnl b{font-size:20px}
.pnl .pos{color:#138a42}.pnl .neg{color:#e8121a}
/* account / misc boxes */
.pcm .box h3{margin:0 0 6px;font-size:16px}
.pcm .box p{margin:0 0 12px;color:#666;line-height:1.45}
.pcm .box input,.pcm .box select{display:block;width:100%;height:38px;margin-bottom:10px;padding:0 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;outline:0;background:#fff;color:#222}
.pcm .box input:focus{border-color:#fa2a2a}
.pcm .phone{display:flex;gap:8px;margin:0}
.pcm .phone select{width:110px;flex:none}
.acc{display:flex;align-items:center;gap:14px;padding:4px 4px 18px}
.acc .av{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ffd800,#ff8a1a);display:grid;place-items:center;font:700 28px Arial;color:#222}
.acc b{display:block;font-size:20px}
.acc small{color:#777}
.accbal{margin-left:auto;text-align:right;padding-right:10px}
.accbal b{font-size:24px;color:#e8121a}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stats4 b{font-size:18px}
.cb{margin-bottom:14px}
.cb>b{display:block;font-size:34px;color:#e8121a;margin-bottom:8px}
.pcpad .pct{min-height:140px;border-radius:6px 6px 0 0}
.rw{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.rw .st{display:inline-block;margin:0 10px 0 0;padding:4px 12px;border-radius:12px;background:#eee;color:#888;font-weight:700;font-size:12.5px}
.rw .st.ok{background:#e8f8ee;color:#138a42}
.prog{height:10px;border-radius:5px;background:#eee;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#ffd800,#ff8a1a)}
.msgs{display:grid;gap:10px;align-content:start}
@media(max-width:900px){.pcm{grid-template-columns:60px 1fr}.pcm aside h2{display:none}.pcm aside button{font-size:0;gap:0;justify-content:center;padding:0}.meths,.chs{grid-template-columns:1fr 1fr}.two,.rw,.stats4,.pnl{grid-template-columns:1fr 1fr}}

/* ================= EXTRA SLOT PIECES ================= */
#board{background:repeating-linear-gradient(90deg,#0000 0 calc(var(--cw) - 1px),#ffffff16 calc(var(--cw) - 1px) var(--cw)),linear-gradient(#1c1236ee,#0c0820ee)}
#stage.kbg .bg{inset:0;filter:brightness(.8)}
#stage.kbg .sym.png img{padding:0;transform:scale(1.1)}
.sym.gold2{background:radial-gradient(circle at 35% 30%,#fff3a8,#f0b21a 60%,#b8760a);border-radius:16%;box-shadow:inset 0 0 0 2px #fff6a8,0 2px 5px #0008}
.sym.gold2.gc::after{inset:0;border-radius:16%}
.rM{--a:#ffe27a;--b:#ff7a1a}
.sym.coin b{position:absolute;inset:0;display:grid;place-items:center;font:400 24cqh var(--disp);color:#fff;text-shadow:0 0 3px #5a2a00,0 2px 0 #5a2a00,0 -1px 0 #5a2a00,1px 0 0 #5a2a00,-1px 0 0 #5a2a00;letter-spacing:-.5px}
.cell.void .sym{opacity:.07}
.cell.held::after{content:"";position:absolute;inset:3px;border-radius:50%;border:3px solid #fff6a8;box-shadow:0 0 12px 2px #ffb800}

/* multiplier wilds, multiplier spots, expanding-symbol badge */
.wmb{position:absolute;right:4%;top:2%;padding:0 .35em;border-radius:1em;background:linear-gradient(#ff5a4a,#c8121e);border:2px solid #fff;font:400 26cqh var(--disp);color:#fff;text-shadow:0 1px 0 #5a0000;box-shadow:0 2px 4px #0008}
.spots{position:absolute;inset:0;z-index:3;pointer-events:none}
.spots i{position:absolute;box-shadow:inset 0 0 0 2px #ffd80066;background:#ffd8001a;border-radius:10px;font:400 15px var(--disp);font-style:normal;color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000;padding:2px 5px;text-align:right}
.spots i.m{box-shadow:inset 0 0 0 2px #ffd800,0 0 10px #ffb800;background:#ffb80033}
.spx{display:inline-block;width:30px;height:30px;vertical-align:middle;margin:-8px 0 -6px 10px}
.pcm .flash.wait{background:#fff8e0;border:1px solid #f0c040;color:#8a6200}
.pct .st,.rw .st.wait{display:inline-block;padding:2px 10px;border-radius:10px;font-weight:700;font-size:12px;background:#eee;color:#666}
.pct .st.ok{background:#e8f8ee;color:#138a42}.pct .st.bad{background:#fff0f0;color:#d0121a}.pct .st.wait{background:#fff8e0;color:#8a6200}