:root{
  --cyan:#69dbff;--cyan2:#20a9d6;--gold:#e5b756;--gold2:#ffe3a0;
  --ink:#050811;--panel:rgba(8,16,28,.68);--line:rgba(114,213,255,.28);
  --txt:#edf8ff;--muted:#7f9bad;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040a;color:var(--txt);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button{font:inherit}
#gameShell{position:relative;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#030713}
#scene3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.vignette{pointer-events:none;position:absolute;inset:0;background:
  radial-gradient(circle at 50% 52%,transparent 25%,rgba(1,4,10,.12) 52%,rgba(1,3,8,.74) 100%),
  linear-gradient(180deg,rgba(2,5,12,.45),transparent 22%,transparent 73%,rgba(1,3,8,.72));z-index:2}
.scanlines{pointer-events:none;position:absolute;inset:0;z-index:3;opacity:.06;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.12) 3px 3px)}

.hud.top{position:absolute;z-index:10;left:20px;right:20px;top:16px;height:76px;display:grid;grid-template-columns:52px minmax(210px,330px) 1fr auto;gap:12px;align-items:center}
.icon-btn,.top-actions button{border:1px solid var(--line);color:#dff7ff;background:linear-gradient(180deg,rgba(9,23,39,.8),rgba(6,13,24,.74));box-shadow:inset 0 0 18px rgba(40,183,236,.08),0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(12px);border-radius:15px;height:48px}
.icon-btn{font-size:22px}
.player-card{height:68px;display:flex;align-items:center;padding:6px 18px 6px 7px;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);background:linear-gradient(90deg,rgba(8,28,47,.9),rgba(6,15,27,.62));border-left:1px solid rgba(95,219,255,.5);box-shadow:inset 0 0 30px rgba(48,198,255,.08)}
.avatar-ring{width:58px;height:58px;border-radius:50%;padding:3px;background:conic-gradient(var(--gold),#694f1f,var(--cyan),var(--gold))}
.avatar{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#4d96b1,#122139 58%,#070d18);font-family:Georgia,serif;font-size:25px;color:white}
.player-copy{flex:1;padding-left:10px}
.player-copy b{display:block;font-size:13px;letter-spacing:.12em}
.player-copy small{display:block;font-size:8px;color:var(--cyan);letter-spacing:.11em;margin:3px 0 5px}
.xp{height:4px;border-radius:10px;background:#061018;overflow:hidden;border:1px solid rgba(90,218,255,.13)}
.xp i{display:block;width:18%;height:100%;background:linear-gradient(90deg,var(--cyan2),var(--cyan))}
.wallet{justify-self:center;display:flex;gap:8px;padding:5px;border:1px solid rgba(115,216,255,.2);border-radius:17px;background:rgba(5,13,23,.62);backdrop-filter:blur(12px)}
.wallet button{border:0;background:transparent;color:white;min-width:112px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left}
.wallet button span{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.wallet .coin{color:#1a1204;background:linear-gradient(145deg,#ffdf84,#a56f19);box-shadow:0 0 16px rgba(229,183,86,.25)}
.wallet .gem{color:white;background:linear-gradient(145deg,#55e8ff,#1378b7);clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%)}
.wallet b{font-size:13px}
.wallet small{font-size:7px;color:#6f8c9d;letter-spacing:.08em}
.top-actions{display:flex;gap:8px}
.top-actions button{width:48px;font-size:20px}

.lobby-ui{position:absolute;z-index:8;inset:108px 34px 54px;display:grid;grid-template-columns:minmax(250px,320px) 1fr minmax(250px,310px);gap:22px;align-items:center;pointer-events:none}
.left-rail,.right-rail,.center-stage{pointer-events:auto}
.left-rail{display:flex;flex-direction:column;gap:9px}
.rail-label{font-size:8px;letter-spacing:.28em;color:#7895a5;margin:0 0 5px 8px}
.menu-card{position:relative;width:100%;min-height:61px;border-radius:14px;border:1px solid rgba(99,206,249,.28);background:linear-gradient(90deg,rgba(8,27,47,.86),rgba(6,17,31,.67));color:white;display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center;text-align:left;padding:9px 12px;backdrop-filter:blur(9px);box-shadow:inset 0 0 25px rgba(75,200,255,.06),0 10px 30px rgba(0,0,0,.14);transition:.22s}
.menu-card:before{content:"";position:absolute;left:-1px;top:18%;bottom:18%;width:2px;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}
.menu-card:hover,.menu-card:focus-visible{transform:translateX(6px);border-color:rgba(117,223,255,.7);box-shadow:0 0 28px rgba(36,183,230,.14),inset 0 0 28px rgba(79,209,255,.09);outline:none}
.menu-card.primary{border-color:rgba(229,183,86,.7);background:linear-gradient(90deg,rgba(71,48,16,.86),rgba(34,27,16,.64));box-shadow:inset 0 0 28px rgba(229,183,86,.11),0 0 26px rgba(229,183,86,.08)}
.menu-card.primary:before{background:var(--gold);box-shadow:0 0 13px var(--gold)}
.menu-icon{font-size:20px;color:var(--cyan)}
.primary .menu-icon{color:var(--gold2)}
.menu-card b{display:block;font-size:12px;letter-spacing:.045em}
.menu-card small{display:block;font-size:8px;color:#7f9aab;margin-top:3px}
.menu-card em{font-size:7px;font-style:normal;color:#69ddff;letter-spacing:.12em}

.center-stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:12px 0 8px}
.season-chip{font-size:8px;letter-spacing:.16em;color:#a9c5d3;padding:8px 13px;border:1px solid rgba(104,214,255,.2);border-radius:99px;background:rgba(5,13,23,.38);backdrop-filter:blur(8px)}
.season-chip span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:7px}
.scene-title{margin-top:auto;margin-bottom:12px;text-shadow:0 3px 18px #000}
.scene-title small{font-size:7px;letter-spacing:.35em;color:#9cb1bd}
.scene-title h1{margin:3px 0 2px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,3.3vw,48px);letter-spacing:.12em;font-weight:500}
.scene-title h1 strong{display:block;font-size:.55em;letter-spacing:.42em;color:var(--gold2);margin-top:-1px}
.scene-title p{margin:8px 0 0;color:#8ca4b1;font-size:9px;letter-spacing:.08em}
.camera-hint{font-size:7px;letter-spacing:.2em;color:#5d7a8a;padding:7px 12px;border-radius:99px;background:rgba(4,10,18,.28)}

.right-rail{display:flex;flex-direction:column;gap:10px}
.feature-card{min-height:92px;border-radius:16px;border:1px solid rgba(98,209,250,.3);background:linear-gradient(135deg,rgba(7,27,47,.8),rgba(6,17,28,.66));color:white;padding:17px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left;backdrop-filter:blur(10px);transition:.22s;box-shadow:inset 0 0 30px rgba(38,180,235,.06)}
.feature-card:hover{transform:translateX(-6px);border-color:rgba(113,224,255,.68)}
.feature-card small,.feature-card b,.feature-card span{display:block}
.feature-card small{font-size:7px;letter-spacing:.18em;color:#73dfff}
.feature-card b{font-family:Georgia,serif;font-size:17px;letter-spacing:.05em;margin:4px 0}
.feature-card span{font-size:8px;color:#7892a2}
.feature-card strong{font-size:30px;font-weight:400;color:#82e3ff}
.feature-card.vip{border-color:rgba(229,183,86,.55);background:linear-gradient(135deg,rgba(73,48,13,.84),rgba(34,23,14,.68));box-shadow:inset 0 0 35px rgba(229,183,86,.1)}
.feature-card.vip small,.feature-card.vip strong{color:var(--gold2)}
.feature-card.store strong{color:#69dbff}
.event-card{margin-top:5px;border-top:1px solid rgba(255,255,255,.08);padding:15px 10px;display:flex;align-items:center;gap:10px}
.event-card .live-dot{width:7px;height:7px;border-radius:50%;background:#ff5b63;box-shadow:0 0 10px #ff5b63}
.event-card small,.event-card b,.event-card span{display:block}
.event-card small{font-size:7px;color:#708a99;letter-spacing:.16em}
.event-card b{font-size:11px;margin:2px 0}
.event-card span{font-size:8px;color:var(--gold)}

.bottom-hud{position:absolute;z-index:10;left:24px;right:24px;bottom:14px;height:34px;display:flex;align-items:center;justify-content:space-between;color:#6f8b9a;font-size:7px;letter-spacing:.1em}
.online,.fair{display:flex;align-items:center;gap:8px}
.online i{width:6px;height:6px;border-radius:50%;background:#49d98a;box-shadow:0 0 10px #49d98a}
.fair b{font-size:7px;color:#9ec4d8}
#graphicsBtn{border:1px solid rgba(104,208,246,.17);border-radius:8px;background:rgba(4,10,18,.5);color:#6f8b9a;font-size:7px;padding:6px 9px}
#graphicsBtn b{color:#8fe5ff}

.panel{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 34px));padding:36px 30px 30px;border-radius:22px;border:1px solid rgba(104,216,255,.32);background:linear-gradient(155deg,rgba(8,27,46,.96),rgba(4,10,18,.98));box-shadow:0 30px 100px rgba(0,0,0,.65),inset 0 0 40px rgba(45,184,240,.07);text-align:center}
.panel[hidden]{display:none}
.panel-close{position:absolute;right:14px;top:12px;border:1px solid rgba(117,218,255,.2);border-radius:10px;background:#091522;color:#9bc7db;width:34px;height:34px;font-size:23px}
.panel-kicker{color:var(--cyan);font-size:8px;letter-spacing:.25em}
.panel h2{font:500 29px Georgia,serif;letter-spacing:.04em;margin:7px 0}
.panel p{color:#7d98a8;font-size:10px}
.search-ring{width:92px;height:92px;border:1px solid rgba(112,218,255,.15);border-radius:50%;display:grid;place-items:center;margin:25px auto;position:relative}
.search-ring i{position:absolute;inset:-1px;border-radius:50%;border-top:2px solid var(--cyan);border-right:2px solid transparent;animation:spin 1.1s linear infinite}
.search-ring strong{font-size:32px;color:var(--gold)}
.panel-status{font-size:8px;color:#79a2b6;letter-spacing:.12em}
@keyframes spin{to{transform:rotate(360deg)}}

.loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#10253b,#02050b 68%);transition:opacity .65s,visibility .65s}
.loading.done{opacity:0;visibility:hidden}
.loader-logo{font-size:58px;color:var(--gold);filter:drop-shadow(0 0 20px rgba(229,183,86,.35))}
.loading b{font:500 22px Georgia,serif;letter-spacing:.18em;margin-top:12px}
.loading span{font-size:8px;color:#7590a0;letter-spacing:.14em;margin:7px 0 18px}
.loadbar{width:180px;height:3px;border-radius:9px;background:#08131f;overflow:hidden}
.loadbar i{display:block;width:10%;height:100%;background:linear-gradient(90deg,var(--cyan2),var(--cyan));transition:width .25s}

@media(max-width:980px){
 .hud.top{left:12px;right:12px;top:10px;grid-template-columns:44px minmax(180px,270px) 1fr auto}
 .player-card{height:60px}.avatar-ring{width:50px;height:50px}
 .wallet button{min-width:80px}.wallet small{display:none}
 .lobby-ui{inset:90px 14px 46px;grid-template-columns:minmax(210px,260px) 1fr minmax(205px,250px);gap:11px}
 .menu-card{min-height:54px}.feature-card{min-height:78px}
 .scene-title{display:none}
}
@media(max-width:760px){
 .hud.top{grid-template-columns:42px 1fr auto}.wallet{position:absolute;top:66px;left:50%;transform:translateX(-50%)}.top-actions button:nth-child(-n+2){display:none}
 .lobby-ui{inset:137px 10px 42px;grid-template-columns:minmax(180px,48%) 1fr;align-items:end}
 .center-stage{position:absolute;inset:0;pointer-events:none}.season-chip{display:none}.camera-hint{display:none}
 .right-rail{align-self:center}
 .feature-card{min-height:70px;padding:12px}.feature-card b{font-size:13px}.feature-card span{display:none}
 .menu-card{min-height:50px;padding:7px 9px;grid-template-columns:30px 1fr}.menu-card em{display:none}.menu-card b{font-size:10px}.menu-card small{font-size:7px}
 .bottom-hud .fair{display:none}
}
@media(max-width:520px){
 .player-copy small{display:none}.xp{margin-top:5px}.top-actions{display:none}
 .lobby-ui{grid-template-columns:1fr;align-items:end;inset:133px 9px 42px}
 .left-rail{width:min(270px,72vw);gap:7px}
 .right-rail{position:absolute;right:0;top:18%;width:112px}
 .feature-card{min-height:58px;padding:10px}.feature-card small,.feature-card span{display:none}.feature-card b{font-size:11px}.feature-card strong{font-size:21px}
 .event-card{display:none}.rail-label{display:none}
 .bottom-hud{left:10px;right:10px}.online span{font-size:6px}
}

/* === Reina Dominoes Match HUD v0.3 === */
.game-arena{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle at center,transparent 20%,rgba(1,4,10,.12) 60%,rgba(1,3,8,.74) 100%)}
.game-arena.active{opacity:1}
.game-arena>*{pointer-events:auto}
.match-topbar{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 12px;border:1px solid rgba(230,185,73,.45);background:linear-gradient(180deg,rgba(7,17,29,.94),rgba(2,7,14,.92));box-shadow:0 10px 35px #0008,0 0 24px rgba(31,139,255,.12);clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);min-width:min(640px,72vw);justify-content:center}
.match-control{border:0;background:transparent;color:#e5be5b;font-weight:900;font-size:11px}
.match-id{font-size:11px;color:#8fdcff;letter-spacing:.12em}
.match-score{display:flex;gap:9px;align-items:center;font-size:11px}.match-score span{font:900 20px Georgia;color:#fff}.match-score b{color:#e9c45d}.match-score i{font-style:normal;color:#64748b}
.seat{position:absolute;display:flex;align-items:center;gap:9px;min-width:160px;padding:8px 12px;border:1px solid rgba(74,165,255,.52);background:linear-gradient(135deg,rgba(5,21,38,.96),rgba(3,9,18,.88));box-shadow:0 8px 24px #0009,0 0 18px rgba(39,137,255,.18);border-radius:14px;transition:.25s}
.seat.turn{border-color:#f4c956;box-shadow:0 8px 24px #0009,0 0 28px rgba(244,201,86,.48);transform:scale(1.04)}
.seat-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:2px solid #d5ac42;background:radial-gradient(circle,#153b5c,#081322);color:#f8d877;font-weight:900;box-shadow:inset 0 0 12px #000,0 0 14px #2f9cff44}
.seat b{display:block;font-size:11px;color:#fff}.seat small{display:block;font-size:8px;color:#86a3b9;margin-top:2px}
.seat-top{top:12%;left:50%;transform:translateX(-50%)}.seat-top.turn{transform:translateX(-50%) scale(1.04)}
.seat-left{left:2%;top:48%}.seat-right{right:2%;top:48%}.seat-bottom{bottom:15%;left:50%;transform:translateX(-50%)}.seat-bottom.turn{transform:translateX(-50%) scale(1.04)}
.turn-banner{position:absolute;top:19%;left:50%;transform:translateX(-50%);padding:7px 22px;border-radius:999px;background:#050b14cc;border:1px solid #d8ad47;color:#f3d678;font-size:10px;font-weight:900;letter-spacing:.14em;box-shadow:0 0 25px #d6aa3633}
.player-hand{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;gap:7px;align-items:end;max-width:82vw}
.hand-tile{width:54px;height:86px;border-radius:8px;border:2px solid #c7a748;background:linear-gradient(145deg,#f5f0df,#b9b19b);color:#111;box-shadow:0 10px 18px #000b,inset 0 0 0 1px #fff;display:grid;grid-template-rows:1fr 1fr;position:relative;font-weight:950;font-size:18px;transition:.2s;cursor:pointer}
.hand-tile:after{content:"";position:absolute;left:5px;right:5px;top:50%;border-top:1px solid #4c483f}.hand-tile:hover,.hand-tile.selected{transform:translateY(-14px);box-shadow:0 16px 25px #000c,0 0 20px #e7bd4f88}.hand-tile span{display:grid;place-items:center}
.endpoints{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);display:flex;gap:8px;align-items:center}.endpoints button,.pass-turn{border:1px solid #caa644;background:linear-gradient(180deg,#182942,#08101d);color:#f6d77e;padding:8px 12px;border-radius:9px;font-size:9px;font-weight:900}.endpoints span{font-size:9px;color:#9db3c5}
.pass-turn{position:absolute;right:4%;bottom:5%}
.match-toast{position:fixed;z-index:120;left:50%;top:11%;transform:translateX(-50%);padding:10px 18px;border:1px solid #d8ae47;background:#07111dec;color:#fff;border-radius:10px;font-size:11px;box-shadow:0 12px 30px #000b}
@media(max-width:800px){.match-topbar{min-width:72vw;top:7px}.match-score b,.match-id{display:none}.seat{min-width:115px;padding:5px 7px}.seat-avatar{width:31px;height:31px}.seat small{font-size:7px}.seat-top{top:10%}.seat-left{left:1%;top:43%}.seat-right{right:1%;top:43%}.seat-bottom{bottom:20%}.player-hand{bottom:2%;gap:3px;max-width:96vw}.hand-tile{width:42px;height:66px;font-size:14px}.endpoints{bottom:15%}.pass-turn{bottom:2%;right:1%;padding:6px 8px}.turn-banner{top:17%}}