:root{--ink:#031421;--navy:#082a3a;--navy2:#0e3a4c;--teal:#16b7bd;--cyan:#5de1df;--gold:#d9ab55;--gold2:#f2d18b;--white:#f5fbff;--muted:#9cb2be}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,Arial,sans-serif;background:#031421;color:#fff}.app-shell{position:relative}.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 25%,rgba(93,225,223,.06),transparent 32%),radial-gradient(circle at 20% 70%,rgba(217,171,85,.07),transparent 28%)}button{font:inherit;color:inherit}.topline,.lobby-header,.games-header{position:absolute;z-index:20;left:0;right:0;top:0;height:78px;display:flex;align-items:center;padding:0 3vw;border-bottom:1px solid rgba(217,171,85,.28);background:linear-gradient(180deg,rgba(1,14,24,.82),rgba(1,14,24,.35));backdrop-filter:blur(10px)}.brand-mini,.brand-lockup strong,.games-title b{font:800 34px Orbitron;color:var(--gold2);text-shadow:0 0 24px rgba(217,171,85,.25)}.top-actions{margin-left:auto;display:flex;gap:8px}.ghost-btn,.quiet-btn,.header-actions button,.back-btn{border:1px solid rgba(217,171,85,.35);background:rgba(4,27,39,.52);padding:10px 15px;color:#e8d29e}.auth-screen{background:#041824}.auth-screen:before{content:"";position:absolute;inset:0;background:url('assets/auth-bg.png') center/cover no-repeat;opacity:.58;filter:saturate(.75) brightness(.62)}.auth-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,16,27,.2),rgba(1,16,27,.78) 56%,rgba(1,16,27,.92))}.ambient{position:absolute;width:36vw;height:36vw;border-radius:50%;filter:blur(80px);opacity:.18}.ambient-a{background:#22c6c8;left:-10vw;top:10vh}.ambient-b{background:#d2a954;right:8vw;bottom:-18vw}.auth-layout{position:relative;z-index:5;width:100%;height:100%;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:5vw;padding:90px 7vw 40px}.auth-copy{max-width:700px}.eyebrow{letter-spacing:.32em;color:#b9dadd;font-weight:700;font-size:12px}.auth-copy h1{font:800 clamp(42px,6vw,88px)/.98 Orbitron;margin:14px 0}.auth-copy h1 span{color:var(--gold2)}.auth-copy p{max-width:620px;font-size:18px;color:#c7d6dc}.auth-card{justify-self:end;width:min(460px,100%);padding:26px;background:linear-gradient(180deg,rgba(4,35,49,.96),rgba(2,23,34,.96));border:1px solid rgba(242,209,139,.55);box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 40px rgba(25,183,189,.08)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}.auth-tab{padding:13px;background:transparent;border:0;border-bottom:2px solid transparent;color:#8aa6af;font-weight:800}.auth-tab.active{color:#f4d793;border-color:var(--gold)}.auth-form{display:none;gap:14px}.auth-form.active{display:grid}.auth-form label{font-size:12px;color:#b5c7ce;display:grid;gap:7px}.auth-form input{height:48px;border:1px solid rgba(130,180,190,.24);background:#071d28;color:white;padding:0 14px;outline:none}.auth-form input:focus{border-color:#42c7cb;box-shadow:0 0 0 3px rgba(66,199,203,.08)}.optional{opacity:.6}.form-row{display:flex;align-items:center;justify-content:space-between}.remember{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.remember input{height:auto}.text-btn{border:0;background:transparent;color:#e0bf76}.primary-btn{height:52px;border:1px solid #f3d38f;background:linear-gradient(180deg,#e7c06c,#aa7429);color:#241500;font-weight:900;letter-spacing:.05em;box-shadow:0 8px 24px rgba(180,122,41,.22)}.primary-btn:hover{filter:brightness(1.07)}
.connect-screen{background:#031421}.connect-bg,.lobby-bg,.games-bg{position:absolute;inset:0;background-position:center;background-size:cover}.connect-bg{background-image:url('assets/connect-bg.png');filter:saturate(.72) brightness(.6)}.connect-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,13,22,.05),rgba(1,13,22,.5) 34%,rgba(1,13,22,.4))}.connect-content{position:relative;z-index:5;height:100%;display:grid;place-items:center;padding-left:28vw}.connect-logo{position:absolute;top:8vh;font:800 clamp(52px,7vw,100px) Orbitron;color:#e6bd67;text-shadow:0 0 36px rgba(230,189,103,.25)}.connect-panel{width:min(760px,62vw);padding:50px;text-align:center;background:linear-gradient(180deg,rgba(3,30,43,.88),rgba(1,21,31,.93));border:1px solid rgba(234,196,111,.56);box-shadow:0 30px 90px rgba(0,0,0,.36)}.connect-panel h2{font:800 clamp(24px,3vw,42px) Orbitron;margin:0 0 12px;color:#f1d189}.connect-panel p{color:#bfd0d5}.progress-ring{width:180px;height:180px;border-radius:50%;margin:34px auto;display:grid;place-items:center;background:radial-gradient(circle at center,#071c27 58%,transparent 60%),conic-gradient(#56dbd9 var(--p,0%),rgba(255,255,255,.07) 0);box-shadow:0 0 40px rgba(86,219,217,.16),inset 0 0 20px rgba(255,255,255,.08);border:9px solid rgba(225,190,112,.38)}.progress-ring span{font:800 42px Orbitron;color:#f2d18b}.steps{display:flex;justify-content:space-between;gap:10px}.step{font-size:12px;color:#667f89}.step.active{color:#73e3df}.step.done{color:#e5c374}
.lobby-screen{background:#031421}.lobby-bg{background-image:url('assets/lobby-bg.png');filter:saturate(.72) brightness(.74)}.lobby-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,14,24,.08),rgba(1,14,24,.02) 58%,rgba(1,14,24,.82) 92%)}.lobby-header{height:76px}.brand-lockup{display:flex;align-items:center;gap:3px;min-width:130px}.crown{color:#e2bd69}.account-pill{margin-left:auto;display:flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(217,171,85,.35);background:rgba(4,27,39,.66)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid #e0bb6c;background:#173a46;color:#f4d793;font-weight:800}.account-pill small{display:block;color:#d2c08f;margin-top:2px}.header-actions{display:flex;gap:8px;margin-left:12px}.header-actions button{font-size:12px}.notice-panel{position:absolute;z-index:8;right:3vw;top:17vh;width:min(320px,22vw);padding:18px;background:rgba(2,24,35,.82);border:1px solid rgba(233,194,106,.48);backdrop-filter:blur(8px)}.notice-panel h3{margin:0 0 10px;font:700 19px Orbitron;color:#efcd82}.notice-item{display:grid;gap:3px;padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}.notice-item span{font-size:12px;color:#9fb2ba}.hero-copy-panel{position:absolute;z-index:8;left:34vw;top:33vh;width:33vw;padding:20px 24px;text-align:center;background:rgba(3,28,40,.68);border:1px solid rgba(231,194,112,.5);backdrop-filter:blur(5px)}.hero-kicker{font-size:12px;letter-spacing:.13em;color:#b6d2d5}.hero-copy-panel h2{margin:9px 0 7px;font:800 clamp(25px,3.5vw,48px) Orbitron;color:#edcc82}.hero-copy-panel p{margin:0;color:#a9c9cf}.floating-track{position:absolute;z-index:10;left:20vw;right:14vw;bottom:13vh;height:210px;display:flex;align-items:flex-end;gap:12px;transform:rotate(-2deg);overflow:hidden;padding:10px 20px 26px}.game-orb{flex:0 0 130px;height:130px;border-radius:50%;border:1px solid rgba(234,196,111,.7);background:radial-gradient(circle at 50% 34%,rgba(30,89,104,.92),rgba(2,23,33,.96) 68%);box-shadow:0 0 24px rgba(226,188,105,.18),inset 0 0 24px rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:white;animation:drift 12s linear infinite;transform:rotate(2deg)}.game-orb:nth-child(2){animation-delay:-2s}.game-orb:nth-child(3){animation-delay:-4s}.game-orb:nth-child(4){animation-delay:-6s}.game-orb:nth-child(5){animation-delay:-8s}.game-orb:nth-child(6){animation-delay:-10s}.game-orb span{font:700 25px Orbitron;color:#f0ce84}.game-orb b{font-size:12px}.game-orb small{font-size:8px;color:#d7b968}.tier-vip{background:radial-gradient(circle at 50% 34%,rgba(86,47,98,.92),rgba(17,12,28,.96) 70%)}.live-chat{position:absolute;z-index:11;right:4vw;bottom:15vh;width:88px;height:88px;border-radius:50%;border:1px solid rgba(233,194,106,.7);background:#062735;color:#f1cc7c;display:grid;place-items:center}.live-chat span{font-size:10px}.player-dock{position:absolute;z-index:12;left:1.5vw;bottom:2vh;display:flex;align-items:center;gap:10px}.cards{font:700 18px Georgia;background:#eee;color:#111;padding:10px 8px;transform:rotate(-3deg)}.player-dock small{display:block;color:#d4bd86}.bottom-dock{position:absolute;z-index:12;left:16vw;right:3vw;bottom:0;height:80px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:linear-gradient(180deg,rgba(4,29,42,.1),rgba(3,22,33,.94) 35%);border-top:1px solid rgba(217,171,85,.36)}.bottom-dock button{height:58px;border:0;background:transparent;color:#c9d5d8;font-weight:800}.bottom-dock .dock-primary{height:72px;background:linear-gradient(180deg,#e1bb67,#a96f27);color:#241500;border:1px solid #f2d38d}.side-menu{position:absolute;z-index:30;right:2vw;top:76px;width:190px;display:none;padding:10px;background:#052432;border:1px solid rgba(217,171,85,.5)}.side-menu.open{display:grid}.side-menu button{padding:13px;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent}.side-menu button:hover{background:rgba(61,187,190,.08)}
.games-screen{background:#031421}.games-bg{background:radial-gradient(circle at 60% 15%,rgba(23,112,120,.22),transparent 31%),linear-gradient(135deg,#061d2a,#092a39 45%,#04141f)}.games-header{height:74px}.games-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}.games-title small{color:#9db2b9}.quiet-btn{margin-left:auto}.games-body{position:relative;z-index:5;height:100%;padding:94px 3vw 86px;display:grid;grid-template-columns:180px 1fr;gap:18px}.category-rail{display:grid;align-content:start;border:1px solid rgba(217,171,85,.25);background:rgba(2,22,32,.72)}.category-rail button{padding:15px 18px;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;color:#bdc9ce}.category-rail button.active,.category-rail button:hover{color:#f3d28a;background:linear-gradient(90deg,rgba(217,171,85,.22),transparent)}.game-grid{overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px;padding-right:4px}.game-card{min-height:230px;position:relative;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(2,17,25,.88));box-shadow:inset 0 -80px 100px rgba(0,0,0,.5)}.game-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,var(--tone),transparent 48%);opacity:.45}.game-card h3,.game-card p,.game-card button,.dealer-silhouette{position:relative;z-index:1}.dealer-silhouette{position:absolute;left:0;right:0;top:22px;text-align:center;font:800 68px Orbitron;color:rgba(255,255,255,.78);text-shadow:0 0 26px var(--tone)}.game-card h3{margin:0;color:#f4d288;font:700 22px Orbitron}.game-card p{margin:4px 0 12px;color:#aebfc5}.game-card button{border:1px solid rgba(235,197,111,.55);background:rgba(4,32,44,.78);padding:10px;color:#eecf8a}.emerald{--tone:#21b97a}.sapphire{--tone:#2588d8}.violet{--tone:#a94ed2}.champagne{--tone:#d8af62}.ruby{--tone:#c94d49}.cyan{--tone:#24bdc8}.slate{--tone:#6a8295}.bronze{--tone:#a76a36}.mobile-nav{display:none}
@keyframes drift{0%{transform:translateX(0) translateY(4px) rotate(2deg)}50%{transform:translateX(-24px) translateY(-7px) rotate(1deg)}100%{transform:translateX(-48px) translateY(4px) rotate(2deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media (max-width:900px){html,body,#app{overflow:auto;min-height:100%;height:100%}.screen{position:absolute;min-height:100%;overflow:auto}.topline,.lobby-header,.games-header{height:58px;padding:0 14px}.brand-mini,.brand-lockup strong,.games-title b{font-size:22px}.top-actions{display:none}.auth-layout{grid-template-columns:1fr;padding:74px 18px 30px;align-content:end}.auth-copy{display:none}.auth-card{justify-self:stretch;width:100%;padding:18px;margin-bottom:7vh}.auth-screen:before{background-position:34% center;opacity:.58}.connect-content{padding:70px 16px 20px;align-items:end}.connect-logo{top:8vh;font-size:58px}.connect-panel{width:100%;padding:24px 18px;margin-bottom:9vh}.connect-panel h2{font-size:23px}.progress-ring{width:130px;height:130px;margin:22px auto}.progress-ring span{font-size:30px}.steps{font-size:10px}.lobby-bg{background-position:33% center}.account-pill{margin-left:auto;padding:5px 8px}.account-pill small{display:none}.avatar{width:32px;height:32px}.header-actions button{display:none}.header-actions #menuBtn{display:block;padding:8px}.notice-panel{display:none}.hero-copy-panel{left:8vw;right:8vw;top:43vh;width:auto;padding:13px}.hero-copy-panel h2{font-size:25px}.floating-track{left:2vw;right:2vw;bottom:15vh;height:150px;padding-left:4px;overflow-x:auto;transform:none}.game-orb{flex-basis:96px;width:96px;height:96px;animation:none;transform:none}.game-orb span{font-size:18px}.game-orb b{font-size:9px}.live-chat{right:12px;bottom:21vh;width:62px;height:62px}.player-dock{left:10px;bottom:68px}.player-dock .cards{display:none}.bottom-dock{left:0;right:0;height:64px;grid-template-columns:repeat(5,1fr)}.bottom-dock button{font-size:9px;height:50px}.bottom-dock .dock-primary{height:56px}.side-menu{right:10px;top:58px}.games-body{padding:76px 10px 70px;display:block}.category-rail{display:flex;overflow-x:auto;margin-bottom:12px}.category-rail button{white-space:nowrap;padding:11px 14px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible}.game-card{min-height:180px;padding:12px}.dealer-silhouette{font-size:44px}.game-card h3{font-size:14px}.game-card p{font-size:11px}.game-card button{padding:8px;font-size:10px}.games-header .quiet-btn{display:none}.mobile-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;height:58px;display:grid;grid-template-columns:repeat(5,1fr);background:#041c29;border-top:1px solid rgba(217,171,85,.3)}.mobile-nav button{border:0;background:transparent;font-size:9px;color:#aebbc0}.mobile-nav .active{color:#f1d088}.back-btn{padding:8px 10px;font-size:11px}.games-title{left:auto;right:10px;transform:none}.games-title small{display:none}}

/* V2.1 — lobby visual target is already baked into lobby-bg.png.
   Desktop uses invisible hotspots instead of drawing a second UI layer on top. */
.desktop-hotspots{display:block;position:absolute;inset:0;z-index:18;pointer-events:none}
.hotspot{position:absolute;border:0;background:transparent;padding:0;pointer-events:auto;cursor:pointer;border-radius:0}
.hotspot:focus-visible{outline:2px solid rgba(242,209,139,.9);outline-offset:2px;background:rgba(242,209,139,.06)}
.hotspot:hover{background:rgba(242,209,139,.035)}
.hs-games{left:72.5%;top:1.7%;width:7%;height:8%}
.hs-convert{left:61.5%;top:1.7%;width:7%;height:8%}
.hs-event{left:79.8%;top:1.7%;width:6%;height:8%}
.hs-support{left:86.2%;top:1.7%;width:6%;height:8%}
.hs-menu{left:92.8%;top:1.7%;width:5.5%;height:8%}
.hs-xocdia{left:15.5%;top:53%;width:11.5%;height:18%}
.hs-md5{left:26.5%;top:56%;width:10.5%;height:17%}
.hs-taixiu{left:36.5%;top:57%;width:9.5%;height:16%}
.hs-nohu{left:45%;top:57%;width:9.5%;height:16%}
.hs-banca{left:53.5%;top:57%;width:9.5%;height:16%}
.hs-poker{left:62%;top:56%;width:9.5%;height:16%}
.hs-mini{left:70%;top:54%;width:9.5%;height:17%}
.hs-xoso{left:77.5%;top:51%;width:9.5%;height:18%}
.hs-chat{right:3.8%;bottom:10%;width:8%;height:13%}
@media (min-width:901px){
  .lobby-header,.notice-panel,.hero-copy-panel,.floating-track,.live-chat,.player-dock,.bottom-dock{display:none!important}
  .lobby-bg{filter:none!important;opacity:1!important;background-position:center center!important;background-size:cover!important}
  .lobby-shade{background:linear-gradient(180deg,rgba(1,14,24,.01),rgba(1,14,24,.01))!important}
  .side-menu{top:8.5vh;right:1.6vw;z-index:40}
}
@media (max-width:900px){
  .desktop-hotspots{display:none}
  /* On mobile the baked desktop composition becomes a soft ambience only,
     avoiding any duplicated text/UI behind the responsive controls. */
  .lobby-bg{filter:blur(7px) saturate(.7) brightness(.45)!important;transform:scale(1.04);background-position:24% center!important}
  .lobby-shade{background:linear-gradient(180deg,rgba(1,14,24,.2),rgba(1,14,24,.32) 55%,rgba(1,14,24,.78) 100%)!important}
}