:root{
  --ink:#fff;
  --muted:#c8c2ef;
  --violet:#6c2be8;
  --violet-2:#3d169e;
  --navy:#12054d;
  --navy-2:#080125;
  --gold:#ffd85e;
  --gold-2:#e49b1d;
  --cyan:#4ed8ff;
  --danger:#ff5b78;
  --glass:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.18);
  --shadow:0 18px 45px rgba(5,0,35,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07021f;color:var(--ink);font-family:Tahoma,"Segoe UI",Arial,sans-serif}
body{display:grid;place-items:center;overflow:hidden;background:
  radial-gradient(circle at 15% 15%,rgba(117,59,232,.38),transparent 34%),
  radial-gradient(circle at 85% 85%,rgba(22,131,222,.22),transparent 32%),#07021f}
button,input,select{font:inherit}
button{color:inherit}
.phone-shell{position:relative;width:min(100vw,430px);height:100dvh;overflow:hidden;background:
  radial-gradient(circle at 50% -10%,rgba(150,93,255,.65),transparent 36%),
  linear-gradient(180deg,#352091 0%,#1c0b67 45%,#0b0333 100%);box-shadow:0 0 80px rgba(0,0,0,.65)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;scrollbar-width:none;padding:
  max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));animation:screen-in .28s ease}
.game-screen{animation:none}
.screen::-webkit-scrollbar{display:none}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stars::before,.stars::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(#fff 1px,transparent 1px),radial-gradient(#9cd9ff 1px,transparent 1px);background-size:57px 57px,83px 83px;background-position:0 0,20px 35px;opacity:.18}
.stars::after{transform:rotate(18deg) scale(1.25);opacity:.09}
.brand{position:relative;text-align:center;color:var(--gold);font-weight:900;letter-spacing:1px;text-shadow:0 3px 0 #8a4a12,0 0 22px rgba(255,215,91,.5)}
.brand-mark{width:82px;height:82px;margin:auto;position:relative;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3))}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;width:40px;height:72px;border:5px solid var(--gold);border-radius:12px;top:4px;background:linear-gradient(145deg,#6a28d9,#281074)}
.brand-mark::before{right:19px;transform:rotate(38deg)}
.brand-mark::after{left:19px;transform:rotate(-38deg)}
.brand-name{font-size:29px;line-height:1;margin-top:9px}
.brand-sub{font-size:12px;color:#fff1b0;letter-spacing:4px;margin-top:8px}
.splash{justify-content:center;align-items:center;gap:30px}
.loading-bar{width:210px;height:8px;padding:2px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden}
.loading-bar>i{display:block;width:55%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-2),#fff3a1);animation:load 1.4s ease-in-out infinite}
@keyframes load{0%{transform:translateX(130%)}100%{transform:translateX(-230%)}}
.auth-screen{justify-content:center;gap:18px}
.auth-card,.panel{position:relative;z-index:1;background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.07));border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.auth-card h1,.panel h2{margin:0 0 8px;text-align:center;font-size:24px}
.subtext{color:var(--muted);font-size:13px;text-align:center;line-height:1.7;margin:0 0 16px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,.18);border-radius:14px;padding:4px;margin-bottom:18px}
.tab{border:0;background:transparent;padding:10px;border-radius:11px;color:var(--muted);cursor:pointer}
.tab.active{background:linear-gradient(135deg,#8745f4,#5a20cf);color:#fff;box-shadow:0 7px 18px rgba(65,15,160,.4)}
.field{display:grid;gap:7px;margin:12px 0}
.field label{font-size:12px;color:#e5ddff}
.field input,.field select,.chat-input{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(7,1,42,.47);color:#fff;border-radius:14px;padding:13px 14px;outline:0}
.field input:focus,.field select:focus,.chat-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(78,216,255,.12)}
.primary,.secondary,.danger-btn,.icon-btn{border:0;cursor:pointer;transition:.18s ease}
.primary{width:100%;padding:14px 18px;border-radius:16px;background:linear-gradient(180deg,#ffd967,#e99b20);color:#3a1854;font-weight:900;box-shadow:0 9px 0 #9d5719,0 14px 22px rgba(0,0,0,.25)}
.primary:active{transform:translateY(5px);box-shadow:0 4px 0 #9d5719}
.primary:disabled{opacity:.55;filter:grayscale(.5);cursor:not-allowed}
.secondary{padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass)}
.link-btn{border:0;background:none;color:#85e8ff;cursor:pointer;padding:8px}
.error{min-height:20px;text-align:center;color:#ffafbf;font-size:12px}
.otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;direction:ltr;margin:20px 0}
.otp-row input{text-align:center;font-size:22px;font-weight:800;padding:11px 0;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25);color:#fff;width:100%}
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}
.profile-chip{display:flex;align-items:center;gap:9px;min-width:0}
.avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;border:3px solid var(--gold);background:linear-gradient(145deg,#ff91c8,#6930dc);font-size:22px;font-weight:900;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.avatar.avatar-2{background:linear-gradient(145deg,#63dbff,#2458c7)}
.avatar.avatar-3{background:linear-gradient(145deg,#ffbc5d,#dd4b67)}
.avatar.avatar-4{background:linear-gradient(145deg,#5ff0b9,#14767a)}
.avatar.avatar-5{background:linear-gradient(145deg,#f7a8ff,#8737d6)}
.avatar.avatar-6{background:linear-gradient(145deg,#fff38a,#e47823)}
.avatar.avatar-7{background:linear-gradient(145deg,#9caaff,#3f3ca4)}
.avatar.avatar-8{background:linear-gradient(145deg,#ffc5a3,#b94052)}
.profile-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.tiny{font-size:11px;color:var(--muted)}
.terms-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:12px 0;color:var(--muted);font-size:11px}
.terms-line label{display:flex;align-items:center;gap:5px}
.inline-link{border:0;padding:0;background:transparent;color:#8fe8ff;font:inherit;text-decoration:underline;cursor:pointer}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid var(--line);font-size:19px}
.home-title{position:relative;z-index:1;margin:26px 0 14px;font-size:22px}
.games-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.game-card{position:relative;min-height:175px;padding:15px;border:1px solid rgba(255,255,255,.2);border-radius:25px;overflow:hidden;background:linear-gradient(155deg,#6b32dc,#24106f);box-shadow:0 14px 25px rgba(7,0,42,.35);cursor:pointer}
.game-card.active{grid-column:1/-1;min-height:210px;background:radial-gradient(circle at 75% 30%,rgba(255,218,91,.22),transparent 30%),linear-gradient(145deg,#7735e9,#271276)}
.game-art{height:103px;display:flex;align-items:center;justify-content:center;font-size:66px;filter:drop-shadow(0 9px 9px rgba(0,0,0,.35))}
.domino-emblem{position:relative;display:inline-block;width:104px;height:88px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))}
.domino-emblem>i{position:absolute;top:5px;width:38px;height:76px;border:3px solid #e3d8ca;border-radius:9px;background:
  radial-gradient(circle at 50% 22%,#5b2ac3 0 4px,transparent 4.5px),
  radial-gradient(circle at 32% 72%,#20203b 0 3.5px,transparent 4px),
  radial-gradient(circle at 68% 82%,#20203b 0 3.5px,transparent 4px),
  linear-gradient(180deg,#fffdf8,#e9dfd3);box-shadow:inset 0 0 0 2px #fff,0 7px 12px rgba(0,0,0,.32)}
.domino-emblem>i::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:#9e90a7;transform:translateY(-1px)}
.domino-emblem>i:first-child{left:22px;transform:rotate(-25deg)}
.domino-emblem>i:last-child{right:22px;transform:rotate(25deg);background:
  radial-gradient(circle at 32% 18%,#d33965 0 3.5px,transparent 4px),
  radial-gradient(circle at 68% 30%,#d33965 0 3.5px,transparent 4px),
  radial-gradient(circle at 50% 73%,#247fcc 0 4px,transparent 4.5px),
  linear-gradient(180deg,#fffdf8,#e9dfd3)}
.game-card h3{margin:5px 0 2px;font-size:20px}
.soon{position:absolute;left:10px;top:10px;background:rgba(8,3,35,.7);border:1px solid var(--line);border-radius:99px;padding:5px 9px;font-size:10px;color:#eee}
.bottom-nav{position:sticky;z-index:5;bottom:0;margin:auto -8px -10px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:9px;background:rgba(13,3,57,.86);border:1px solid var(--line);border-radius:21px;backdrop-filter:blur(16px)}
.nav-item{text-align:center;font-size:10px;color:#a99fcc}
.nav-item b{display:block;font-size:19px;margin-bottom:3px}
.nav-item.active{color:var(--gold)}
.back{position:relative;z-index:4}
.domino-logo{position:relative;z-index:1;text-align:center;margin:8px 0 18px}
.domino-logo h1{margin:-5px 0 0;color:var(--gold);text-shadow:0 3px 0 #8c4c1d}
.mode-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{position:relative;min-height:152px;border:1px solid var(--line);border-radius:23px;padding:15px;text-align:center;background:linear-gradient(145deg,#7334df,#2b116e);box-shadow:0 10px 22px rgba(0,0,0,.28);cursor:pointer}
.mode-card .art{font-size:54px;margin:12px 0}
.mode-card h3{margin:0}
.mode-card.active{background:linear-gradient(145deg,#9b4dff,#4931c9);outline:2px solid rgba(255,221,100,.75)}
.wide{grid-column:1/-1;min-height:112px;display:flex;align-items:center;justify-content:center;gap:18px}
.searching{justify-content:center;align-items:center;text-align:center;overflow:hidden}
.versus{display:flex;align-items:center;gap:28px;margin:40px 0}
.versus .avatar{width:84px;height:84px;font-size:35px}
.vs{font-size:38px;font-weight:1000;color:var(--gold);font-style:italic;text-shadow:0 4px 0 #8a4415;animation:pulse 1s infinite alternate}
@keyframes pulse{to{transform:scale(1.12);filter:brightness(1.2)}}
.radar{position:absolute;width:310px;height:310px;border:1px solid rgba(255,255,255,.13);border-radius:50%;animation:radar 2s linear infinite}
.radar::after{content:"";position:absolute;inset:50%;width:50%;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);transform-origin:left}
@keyframes radar{to{transform:rotate(360deg)}}
.game-screen{padding:8px 10px max(7px,env(safe-area-inset-bottom));overflow:hidden;background:
  radial-gradient(circle at 50% 44%,rgba(89,184,132,.27),transparent 48%),
  linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/34px 34px,
  linear-gradient(180deg,#245f49 0%,#174c39 52%,#0c3328 100%)}
.game-hud{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1.2fr;align-items:center;gap:7px;direction:ltr}
.player-mini{display:flex;align-items:center;gap:7px;min-width:0}
.player-mini.opponent{justify-content:flex-end;text-align:left;direction:ltr}
.player-mini.self{direction:ltr}
.player-mini .avatar{width:40px;height:40px;font-size:16px;border-width:2px}
.score{font-size:20px;font-weight:900;color:var(--gold)}
.round-chip{text-align:center;background:rgba(4,31,23,.7);border:1px solid rgba(242,206,86,.45);border-radius:8px;padding:5px 8px;direction:rtl}
.round-chip b{display:block;color:var(--gold);font-size:17px;margin-top:2px}
.match-goal{display:grid;place-items:center;min-width:76px;padding:4px 7px;border-radius:8px;background:rgba(4,31,23,.68);border:1px solid rgba(255,255,255,.15);direction:rtl}
.match-goal b{color:var(--gold);font-size:17px}.match-goal small{font-size:9px}.match-goal span{font-size:8px;color:#bfe2d3}
.opponent-hand{height:34px;display:flex;justify-content:flex-end;direction:ltr;padding-right:8px;margin-top:3px}
.tile-back{width:20px;height:31px;margin-left:-6px;border-radius:3px;background:linear-gradient(135deg,#f1f0ed,#cfcfc8);border:1px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.32)}
.board-wrap{position:relative;flex:1;min-height:0;margin:1px 0;overflow:hidden;display:grid;place-items:center}
.board{position:relative;width:300px;height:410px;transform-origin:center;transition:transform .3s ease}
.board-empty{position:absolute;inset:0;display:grid;place-items:center;color:#d8eee3;font-size:12px}
.domino{position:relative;display:flex;flex:none;width:54px;height:28px;border-radius:5px;background:#f9f5ef;border:2px solid #d7cbbf;color:#1b1630;box-shadow:0 4px 7px rgba(0,0,0,.38);overflow:hidden;transition:.18s}
.domino.vertical{width:28px;height:54px;flex-direction:column}
.board .domino{position:absolute;left:var(--x);top:var(--y);width:38px;height:20px;border-width:1px;border-radius:3px;transform:translate(-50%,-50%);box-shadow:0 2px 3px rgba(0,0,0,.32);transition:left .28s ease,top .28s ease}
.board .domino.vertical{width:20px;height:38px;flex-direction:column}
.board .pips{transform:scale(.68)}
.half{position:relative;display:grid;place-items:center;flex:1}
.half+ .half{border-right:1px solid #8e8791}
.vertical .half+ .half{border-right:0;border-top:1px solid #8e8791}
.pips{font-size:0;width:19px;height:19px;background-repeat:no-repeat;background-size:5px 5px}
.p0{background:none}
.p1{background:radial-gradient(circle,#e83253 45%,transparent 48%) center/6px 6px no-repeat}
.p2{background:radial-gradient(circle,#167eea 45%,transparent 48%) 2px 2px/6px 6px no-repeat,radial-gradient(circle,#167eea 45%,transparent 48%) 11px 11px/6px 6px no-repeat}
.p3{background:radial-gradient(circle,#782fca 45%,transparent 48%) 1px 1px/6px 6px no-repeat,radial-gradient(circle,#782fca 45%,transparent 48%) center/6px 6px no-repeat,radial-gradient(circle,#782fca 45%,transparent 48%) 12px 12px/6px 6px no-repeat}
.p4{background:radial-gradient(circle,#e67d19 45%,transparent 48%) 1px 1px/6px 6px no-repeat,radial-gradient(circle,#e67d19 45%,transparent 48%) 12px 1px/6px 6px no-repeat,radial-gradient(circle,#e67d19 45%,transparent 48%) 1px 12px/6px 6px no-repeat,radial-gradient(circle,#e67d19 45%,transparent 48%) 12px 12px/6px 6px no-repeat}
.p5{background:radial-gradient(circle,#249851 45%,transparent 48%) 1px 1px/6px 6px no-repeat,radial-gradient(circle,#249851 45%,transparent 48%) 12px 1px/6px 6px no-repeat,radial-gradient(circle,#249851 45%,transparent 48%) center/6px 6px no-repeat,radial-gradient(circle,#249851 45%,transparent 48%) 1px 12px/6px 6px no-repeat,radial-gradient(circle,#249851 45%,transparent 48%) 12px 12px/6px 6px no-repeat}
.p6{background:radial-gradient(circle,#222 45%,transparent 48%) 1px 1px/6px 6px no-repeat,radial-gradient(circle,#222 45%,transparent 48%) 12px 1px/6px 6px no-repeat,radial-gradient(circle,#222 45%,transparent 48%) 1px 7px/6px 6px no-repeat,radial-gradient(circle,#222 45%,transparent 48%) 12px 7px/6px 6px no-repeat,radial-gradient(circle,#222 45%,transparent 48%) 1px 13px/6px 6px no-repeat,radial-gradient(circle,#222 45%,transparent 48%) 12px 13px/6px 6px no-repeat}
.turn-status{text-align:center;color:#e5f3ec;font-size:11px;min-height:16px;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.self-row{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;direction:ltr;min-height:42px}
.timer{position:relative;width:42px;height:42px;display:grid;place-items:center;margin:0;border-radius:50%;background:conic-gradient(var(--gold) var(--timer,100%),rgba(255,255,255,.15) 0);font-weight:900}
.timer::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#123d30}.timer span{position:relative}
.hand{position:relative;z-index:4;display:flex;justify-content:center;align-items:flex-end;direction:ltr;height:70px;margin:0 -7px}
.hand .domino{width:34px;height:64px;flex-direction:column;margin-left:-3px;cursor:pointer;border-radius:5px;box-shadow:0 5px 8px rgba(0,0,0,.42)}
.hand .domino .half+ .half{border-right:0;border-top:1px solid #8e8791}
.hand .domino:not(.playable){filter:saturate(.5) brightness(.78)}
.hand .domino.playable{transform:translateY(-7px);border:3px solid #ffd33d;box-shadow:0 0 0 2px rgba(43,126,89,.8),0 7px 13px rgba(255,211,61,.3)}
.game-controls{position:relative;z-index:6;display:flex;align-items:center;justify-content:flex-start;direction:ltr;gap:7px;height:35px;padding-left:50px;margin-top:-35px}
.game-controls .icon-btn{width:32px;height:32px;border-radius:7px;font-size:14px;background:linear-gradient(180deg,#f7c844,#c89016);border:1px solid #ffe98e;color:#173529}
.game-controls .icon-btn.active{outline:2px solid #83f5c1}
.action-btn{border:0;border-radius:9px;padding:8px 12px;background:linear-gradient(180deg,#f6cb4c,#c88c13);color:#173529;font-weight:800;cursor:pointer}
.modal-layer{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:rgba(5,1,31,.72);backdrop-filter:blur(6px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.result-card{width:100%;border:1px solid rgba(255,226,116,.5);border-radius:28px;padding:24px;text-align:center;background:radial-gradient(circle at top,#7437d8,#24105f 58%,#120638);box-shadow:0 20px 60px #050019}
.game-screen .result-card{border-color:#83e4bb;background:linear-gradient(180deg,#43c99a,#dff8ed 28%,#f4fff9);color:#174532;box-shadow:0 18px 55px rgba(3,31,22,.55)}
.game-screen .result-card .subtext,.game-screen .result-card .tiny{color:#3e6a59}
.game-screen .result-card h2{color:#126346;text-shadow:none}
.crown{font-size:66px;filter:drop-shadow(0 7px 8px rgba(0,0,0,.4))}
.result-card h2{font-size:31px;color:var(--gold);margin:4px}
.result-line{display:flex;justify-content:space-between;align-items:center;margin:18px 0;padding:12px;background:rgba(255,255,255,.09);border-radius:16px}
.chat-panel{position:absolute;z-index:25;left:10px;right:10px;bottom:72px;max-height:58%;display:flex;flex-direction:column;border:1px solid #77d3ad;border-radius:16px;background:rgba(22,91,67,.98);box-shadow:0 16px 42px rgba(3,31,22,.6);overflow:hidden}
.messages{padding:12px;overflow:auto;display:grid;gap:8px;min-height:120px}
.message{max-width:82%;padding:8px 11px;border-radius:13px;background:rgba(255,255,255,.12);font-size:13px}
.message.mine{margin-right:auto;background:#2faf82}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}
.preset{white-space:nowrap;border:1px solid rgba(255,255,255,.24);border-radius:7px;background:rgba(255,255,255,.1);padding:7px 8px;font-size:11px}
.chat-compose{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line)}
.chat-input{padding:9px 11px}
.side-choice{display:flex;gap:10px;justify-content:center;margin-top:13px}
.toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translate(-50%,130%);max-width:340px;padding:11px 16px;border-radius:13px;background:#fff;color:#26124f;box-shadow:var(--shadow);transition:.25s;pointer-events:none;text-align:center}
.toast.show{transform:translate(-50%,0)}
.settings-list{display:grid;gap:12px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.switch{width:48px;height:27px;border-radius:99px;background:#3c276e;padding:3px;cursor:pointer}
.switch i{display:block;width:21px;height:21px;border-radius:50%;background:#aaa;transition:.2s}
.switch.on{background:#6fdb9f}.switch.on i{transform:translateX(-21px);background:white}
.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}
.avatar-option{display:grid;place-items:center;padding:6px;border:2px solid transparent;border-radius:50%;background:none}
.avatar-option.selected{border-color:var(--gold);background:rgba(255,216,94,.13)}
.walkthrough{justify-content:center;text-align:center;overflow:hidden}
.walk-art{font-size:100px;margin:25px 0;filter:drop-shadow(0 15px 18px rgba(0,0,0,.38))}
.walkthrough h1{font-size:27px;margin:8px 0}.walkthrough p{color:var(--muted);line-height:1.8}
.dots{display:flex;justify-content:center;gap:8px;margin:25px}.dots i{width:8px;height:8px;border-radius:50%;background:#7770a9}.dots i.active{width:24px;border-radius:99px;background:var(--gold)}
.legal{line-height:1.9;font-size:13px;color:#e7e1ff}
.legal h2,.legal h3{color:var(--gold)}
@media (min-width:700px){
  .phone-shell{height:min(94vh,900px);border-radius:32px;border:1px solid rgba(255,255,255,.14)}
}
@media (max-height:680px){
  .game-card.active{min-height:170px}.game-card{min-height:145px}.game-art{height:80px;font-size:52px}
  .domino-logo{margin:0 0 8px}.domino-logo .domino-emblem{transform:scale(.82);margin:-8px 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}