*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,system-ui,Arial;background:#050b10;color:#f5f1e7;overflow:hidden}button,input{font:inherit}.screen{display:none;width:100%;height:100%}.screen.active{display:flex}
#lobby{align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 50% 20%,#193f35,#050b10 65%)}.brand{display:flex;gap:12px;align-items:center;position:absolute;top:35px;left:40px}.brand-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#ffe69a,#a97018);color:#26170a;display:grid;place-items:center;font:900 30px Georgia;box-shadow:0 8px 30px #0008}.brand b{display:block;letter-spacing:3px}.brand small{color:#b9a875;letter-spacing:2px}.lobby-card{width:min(440px,92vw);padding:36px;border:1px solid #cda94f55;border-radius:28px;background:#071018e8;box-shadow:0 30px 100px #000c, inset 0 1px #fff1;backdrop-filter:blur(20px)}h1{margin:0 0 8px;font-size:34px}p{margin:0 0 24px;color:#99a7a6}.lobby-card input{width:100%;padding:15px 16px;border-radius:13px;border:1px solid #ffffff18;background:#0d171f;color:#fff;outline:none;margin-bottom:14px}.avatars{display:flex;gap:10px;margin:8px 0 20px}.avatars img{width:52px;height:52px;border-radius:50%;cursor:pointer;opacity:.55;border:2px solid transparent}.avatars img.sel{opacity:1;border-color:#e8c66e}.row,.join{display:flex;gap:10px}.row button,.join button{flex:1}.lobby-card button{border:0;border-radius:13px;padding:14px 16px;color:#fff;font-weight:800;cursor:pointer}.gold{background:linear-gradient(145deg,#f5d77d,#a66c18);color:#1c1208!important;box-shadow:0 10px 30px #bd8a2b33}.dark,.join button{background:#17242c}.join{margin-top:10px}.join input{margin:0}.asset-note{position:absolute;bottom:20px;color:#687675;font-size:11px;letter-spacing:2px}
#game{position:relative;background:#04090c}.topbar{height:64px;position:absolute;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#04090cc9;border-bottom:1px solid #ffffff0c}.mini{position:static}.mini .brand-mark{width:38px;height:38px;font-size:24px}.topbar button{background:#182229;color:#aebbb8;border:1px solid #ffffff12;border-radius:10px;padding:10px 14px}.table{position:absolute;inset:64px 290px 0 0;overflow:hidden;display:grid;place-items:center}.table-bg,.table-frame{position:absolute;width:min(88vw,1100px);height:min(88vw,700px);object-fit:fill;filter:drop-shadow(0 30px 50px #000b)}.table-bg{z-index:1}.table-frame{z-index:2}.center-logo{position:absolute;z-index:3;top:46%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#e7c87388;pointer-events:none}.center-logo b{display:block;letter-spacing:6px;font-size:18px}.center-logo span{font-size:9px;letter-spacing:3px}.seat{position:absolute;z-index:8;display:flex;align-items:center;gap:8px}.seat0{bottom:10px;left:50%;transform:translateX(-50%);flex-direction:column-reverse}.seat1{left:9%;top:43%;flex-direction:row}.seat2{top:5%;left:50%;transform:translateX(-50%);flex-direction:column}.seat3{right:9%;top:43%;flex-direction:row-reverse}.player{display:flex;align-items:center;gap:8px;background:#071019d9;border:1px solid #ffffff18;padding:6px 9px;border-radius:18px;box-shadow:0 8px 20px #0008}.player img{width:42px;height:42px;border-radius:50%}.player .nm{font-size:12px;font-weight:800}.player .sub{font-size:9px;color:#8f9b9a}.cards{display:flex;gap:-10px}.mini-card{width:54px;height:76px;border-radius:8px;box-shadow:0 5px 15px #0008;overflow:hidden}.mini-card img{width:100%;height:100%;object-fit:cover}.hand{position:absolute;z-index:10;bottom:8%;left:50%;transform:translateX(-50%);display:flex;gap:14px}.card{width:110px;height:154px;perspective:900px;cursor:pointer;position:relative}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.card.revealed .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 18px 35px #000b}.face.back{background:#102653}.face.back img,.face.front img{width:100%;height:100%;object-fit:cover}.face.front{transform:rotateY(180deg)}.card:after{content:"LẬT";position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);font-size:9px;color:#f2d277;letter-spacing:1px}.deck{position:absolute;z-index:6;left:50%;top:48%;width:84px;height:118px;transform:translate(-50%,-50%);border-radius:12px;background:url('/assets/cards/back.svg') center/cover;box-shadow:0 20px 30px #000b}.deck:before,.deck:after{content:"";position:absolute;inset:0;border-radius:12px;background:url('/assets/cards/back.svg') center/cover}.deck:before{transform:translate(5px,-5px);z-index:-1}.deck:after{transform:translate(10px,-10px);z-index:-2}.hud{position:absolute;z-index:12;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#061016dd;border:1px solid #ffffff12;border-radius:18px;padding:8px 10px}.hud #status{font-size:11px;color:#aeb8b4;padding:0 10px}.hud button{border:0;border-radius:10px;padding:10px 14px;font-weight:900}.reveal{background:#263f39;color:#f4d67a}.chat{position:absolute;z-index:30;right:0;top:64px;bottom:0;width:290px;background:#071016;border-left:1px solid #ffffff10;display:flex;flex-direction:column}.chat header{padding:17px;border-bottom:1px solid #ffffff10;font-size:11px;letter-spacing:2px;color:#cdb875}.chat #messages{flex:1;overflow:auto;padding:12px}.msg{margin-bottom:10px}.msg b{font-size:11px;color:#e6c971}.msg span{display:block;background:#101d24;border-radius:10px;padding:8px;margin-top:3px;font-size:12px;color:#d0d7d4}.chat form{display:flex;padding:10px;border-top:1px solid #ffffff10}.chat input{min-width:0;flex:1;background:#0e1b22;border:0;border-radius:9px;padding:10px;color:#fff}.chat form button{width:42px;margin-left:6px;border:0;border-radius:9px;background:#b5812d;color:#fff}.fx{pointer-events:none}
#fx{position:absolute;inset:0;z-index:50;pointer-events:none}.flying{position:fixed;width:80px;height:112px;border-radius:10px;background:url('/assets/cards/back.svg') center/cover;box-shadow:0 15px 30px #000b;pointer-events:none}
@media(max-width:900px){.chat{display:none}.table{inset:64px 0 0}.card{width:88px;height:124px}.hand{bottom:11%}.seat1{left:2%}.seat3{right:2%}.seat .player img{width:34px;height:34px}.player{padding:4px 6px}.seat2{top:2%}}