/* Ludo Combat UI — responsive dark purple + gold theme */
:root{
 --bg:#090613;--surface:#140d27;--surface-2:#21123f;--surface-3:#2d1853;
 --gold:#ffd45a;--gold-light:#fff0a6;--gold-deep:#f5a623;--purple:#7b35ee;
 --purple-2:#4a1c9c;--text:#fff9ff;--muted:#bcb0d4;--line:#4b2d75;
 --green:#24d68a;--red:#ff5376;--shadow:0 14px 36px #0007;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#4a1979 0,#1a0c35 34%,#0b0717 72%);font:15px/1.5 Inter,Arial,sans-serif;color:var(--text)}
a{color:#e6d9ff;text-decoration:none;transition:color .18s,background .18s,transform .18s}
a:hover{color:var(--gold-light)}
h1,h2,h3,h4{line-height:1.2;color:#fff;margin:0 0 14px}
h1{font-size:clamp(27px,4vw,44px);letter-spacing:-.5px}
h2{font-size:clamp(20px,2.5vw,28px)}
h3{font-size:18px}
p{margin:9px 0 14px}
button,.btn{appearance:none;border:1px solid #ffe38a;border-radius:11px;padding:11px 17px;min-height:42px;background:linear-gradient(180deg,#ffe982 0%,#ffc63b 48%,#f5a51c 100%);color:#29123f;font:800 14px/1.2 Inter,Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 5px 16px #ffbd3540,inset 0 1px #fff9c8;transition:transform .16s,filter .16s;white-space:normal}
button:hover,.btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#241039}
button:active,.btn:active{transform:translateY(0)}
button.purple,.btn.purple,button.secondary,.btn.secondary{background:linear-gradient(180deg,#9255ff,#6425cf 55%,#4a1e9c);border-color:#a77aff;color:white;box-shadow:0 5px 16px #742bdb40,inset 0 1px #cdb1ff}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.wrap{width:min(1240px,100%);margin:0 auto;padding:22px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px clamp(14px,3vw,28px);background:#10091ff2;border-bottom:1px solid #5b348b;box-shadow:0 5px 24px #0005;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:clamp(19px,2.2vw,25px);font-weight:1000;letter-spacing:.4px;color:var(--gold);text-shadow:0 0 15px #b46cff}
.nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border:1px solid transparent;border-radius:9px;background:#25143f;color:#e9ddff;font-size:13px;font-weight:700}
.nav a:hover{background:#482677;border-color:#7650a7;color:white}
.balance{color:var(--gold);font-weight:900}
.hero{padding:clamp(20px,4vw,36px);border:1px solid #7548aa;border-radius:22px;background:radial-gradient(circle at 85% 15%,#54227d66,transparent 32%),linear-gradient(125deg,#35135d 0%,#21103f 48%,#130c29 100%);box-shadow:var(--shadow),inset 0 1px #ffffff13;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-80px;bottom:-130px;width:270px;height:270px;border-radius:50%;border:1px solid #d4a0ff20;box-shadow:0 0 0 24px #d4a0ff08,0 0 0 48px #d4a0ff05;pointer-events:none}
.hero h1{margin:12px 0}
.hero p,.muted{color:var(--muted);line-height:1.65}
.hero>*{position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:18px 0 26px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{min-width:0;background:linear-gradient(145deg,#291746 0%,#1b1033 58%,#130c26 100%);border:1px solid var(--line);border-radius:17px;padding:clamp(15px,2vw,21px);box-shadow:0 10px 30px #0004,inset 0 1px #ffffff0a}
.card h2,.card h3{margin-top:0}
.card:hover{border-color:#7048a4}
.big{font-size:clamp(27px,3vw,36px);line-height:1.2;color:var(--gold);font-weight:1000;text-shadow:0 2px 15px #ffca4c2b}
.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid #62428c;border-radius:99px;background:linear-gradient(180deg,#3b235d,#291644);color:#f0e4ff;font-size:11px;font-weight:800;letter-spacing:.4px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.row>*{min-width:0}
.table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#160d2b;box-shadow:0 8px 20px #0002}
table{width:100%;border-collapse:collapse;min-width:620px;background:transparent}
th,td{text-align:left;vertical-align:middle;padding:12px 13px;border-bottom:1px solid #38234f}
th{background:#24133e;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.45px;white-space:nowrap}
td{color:#f1eaff;font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#ffffff06}
input,select,textarea{display:block;width:100%;max-width:100%;padding:12px 13px;margin:6px 0 14px;border:1px solid #5b417d;background:#10091f;color:white;border-radius:10px;font:inherit;outline:none;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:#bb8aff;box-shadow:0 0 0 3px #8b4be52a}
input[type=checkbox]{display:inline-block;width:auto;margin:0 8px 0 0;accent-color:#ffc943;vertical-align:middle}
input::placeholder,textarea::placeholder{color:#8f80a8}
select option{background:#1a1030;color:white}
label{display:block;color:#e1d3f6;font-size:13px;font-weight:700;margin-bottom:3px}
.notice{padding:12px 15px;border:1px solid #704b9a;background:linear-gradient(100deg,#301b4a,#211335);border-radius:11px;margin:12px 0;color:#f2eaff}
.form-card{width:min(450px,100%);margin:clamp(22px,6vh,65px) auto}
.form-card .brand{margin-bottom:15px}
.form-card form button{width:100%;margin-top:4px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:1;width:min(100%,570px);margin:15px auto;background:#fff3d0;border:5px solid var(--gold);border-radius:12px;overflow:hidden;box-shadow:0 0 35px #9c54ff55,0 12px 25px #0005}
.base{min-width:0;display:grid;place-items:center;align-content:center;border:2px solid #fff;font-weight:900;text-align:center;padding:4px;font-size:clamp(12px,2vw,18px)}
.red{background:#ff4e6b}.green{background:#22d894;color:#093a2a}.blue{background:#4b83ff}.yellow{background:#ffd34d;color:#543900}
.centerboard{display:grid;place-items:center;background:conic-gradient(#ff4e6b 0 25%,#22d894 0 50%,#ffd34d 0 75%,#4b83ff 0);color:#2b1648;font-weight:1000;text-align:center;font-size:clamp(12px,2vw,19px)}
.tokens{font-size:clamp(15px,3vw,25px);line-height:1.3}
.admin-layout{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:calc(100vh - 65px)}
.sidebar{padding:16px 12px;background:#10081f;border-right:1px solid var(--line)}
.sidebar a{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid transparent;border-radius:9px;margin:5px 0;background:#211239;color:#dfd1fa;font-size:13px;font-weight:700}
.sidebar a:hover,.sidebar a:focus{background:#3a205d;border-color:#64418c;color:white}
.main{padding:clamp(14px,2.5vw,26px);min-width:0;overflow:hidden}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 26px}
.kpi{min-width:0;background:linear-gradient(145deg,#30204f,#1b1031);padding:17px;border:1px solid var(--line);border-radius:14px;color:#d7c9ef;box-shadow:0 8px 22px #0003}
.kpi strong{display:block;overflow-wrap:anywhere;color:var(--gold);font-size:clamp(22px,2.5vw,29px);margin-top:7px}
.footer{text-align:center;color:#8f7da8;padding:24px 14px;font-size:12px}
.screen-center{min-height:min(72vh,700px);display:grid;place-items:center;text-align:center}
.screen-center>div{width:min(650px,100%)}
.dice{width:85px;height:85px;background:linear-gradient(145deg,#fff,#dcd7ee);color:#21133c;border:3px solid #fff;border-radius:20px;display:grid;place-items:center;font-size:50px;box-shadow:0 0 28px #ac71ff55,0 8px 20px #0004;margin:8px 0}
.playerrow{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);flex-wrap:wrap;margin:24px 0}
.playerrow>div{min-width:65px}
.avatar{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(145deg,#38235b,#1a1030);border:2px solid #7252a0;font-size:25px}
.avatar.active{border:3px solid var(--gold);box-shadow:0 0 22px #ffd75f70}
@media(max-width:980px){.top{position:relative}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-layout{grid-template-columns:1fr}.sidebar{display:flex;gap:5px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:9px}.sidebar a{white-space:nowrap;flex-shrink:0}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body{font-size:14px}.wrap{padding:12px}.top{padding:12px;gap:10px}.brand{font-size:19px}.nav{width:100%;order:3;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.nav a{white-space:nowrap;flex-shrink:0}.hero{padding:20px;border-radius:17px}.grid,.grid.two{grid-template-columns:1fr;gap:12px}.card{padding:15px}.main{padding:12px}.sidebar{padding:8px}.kpi{padding:12px}.kpi strong{font-size:22px}.table-wrap{border-radius:9px}.board{border-width:4px}.dice{width:68px;height:68px;font-size:42px}.form-card{margin:22px auto}.row{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}


/* PREMIUM UI POLISH — Ludo Combat */
:root{
 --bg:#070411;--surface:#100821;--surface-2:#1a0b31;--surface-3:#28104a;
 --gold:#ffdb55;--gold-light:#fff3ad;--gold-deep:#f6a800;
 --purple:#8a27ff;--purple-2:#4e12a9;--text:#fffaff;--muted:#c5b4e7;
 --line:#6030a0;--green:#22df91;--red:#ff456f;
 --shadow:0 18px 45px #0009,0 0 22px #7a24ff20;
}
body{
 background:
  radial-gradient(ellipse at 12% 0%,#6324a966 0,transparent 30%),
  radial-gradient(ellipse at 92% 14%,#b21fff36 0,transparent 28%),
  linear-gradient(145deg,#080411 0%,#150729 48%,#080411 100%);
 background-attachment:fixed;
}
.top{
 background:linear-gradient(100deg,#10051df5,#1b0835f5 55%,#10051df5);
 border-bottom:1px solid #8b4cff;
 box-shadow:0 8px 30px #0008,0 1px #ffdb5530;
}
.brand{
 color:#ffe36b;text-shadow:0 0 8px #ffba36,0 0 22px #9d3cff;
 font-weight:1000;letter-spacing:.7px;
}
.nav a{
 border:1px solid #563080;background:linear-gradient(180deg,#321553,#1d0c32);
 box-shadow:inset 0 1px #ffffff10;
}
.nav a:hover{border-color:#ffda56;background:linear-gradient(180deg,#5d2696,#35105e)}
.wrap{width:min(1320px,100%);padding:clamp(14px,2.2vw,28px)}
.hero{
 border:1px solid #a45dff;
 background:
  radial-gradient(circle at 82% 22%,#ffb92a2b,transparent 20%),
  radial-gradient(circle at 95% 88%,#b12dff35,transparent 35%),
  linear-gradient(130deg,#37115e 0%,#1d0a39 48%,#10071f 100%);
 box-shadow:var(--shadow),inset 0 1px #ffffff24;
}
.hero:after{border-color:#ffdc5c25;box-shadow:0 0 0 24px #a34dff0c,0 0 0 48px #a34dff08}
.hero h1{text-shadow:0 3px 20px #8d34ff65}
.card{
 border:1px solid #633399;
 background:
  radial-gradient(circle at 100% 0%,#852cff12,transparent 32%),
  linear-gradient(145deg,#24103e 0%,#170b2b 58%,#10071f 100%);
 box-shadow:var(--shadow),inset 0 1px #ffffff12;
 transition:transform .2s,border-color .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-2px);border-color:#b17aff;box-shadow:0 20px 45px #0009,0 0 24px #8a27ff20}
.pill{border-color:#7446aa;background:linear-gradient(180deg,#45236a,#2b1644);color:#ffe99a}
button,.btn{
 border:1px solid #fff0a0;
 background:linear-gradient(180deg,#fff078 0%,#ffc62f 48%,#f39b08 100%);
 box-shadow:0 5px 18px #ffbd3540,inset 0 1px #fffbd5;
 text-shadow:0 1px #fff6;
}
button.purple,.btn.purple,button.secondary,.btn.secondary{
 background:linear-gradient(180deg,#a34cff 0%,#7526db 52%,#4c159b 100%);
 border-color:#c59bff;color:white;text-shadow:0 1px #260849;
}
.grid{gap:clamp(10px,1.5vw,17px)}
.table-wrap{border-color:#633399;background:#100720}
th{background:linear-gradient(180deg,#321750,#211033);color:#ffe26a}
td{border-bottom-color:#35204d}
input,select,textarea{background:#0c0618;border-color:#624184}
input:focus,select:focus,textarea:focus{border-color:#c18aff;box-shadow:0 0 0 3px #8b4be52a}
.notice{border-color:#8b51c2;background:linear-gradient(100deg,#35194f,#211032)}
.board{border:5px solid #ffdc55;box-shadow:0 0 0 2px #7b28c9,0 0 40px #a54cff50,0 16px 35px #0009}
.dice{filter:drop-shadow(0 0 13px #ffc94b70)}
.admin-layout{gap:16px}
.sidebar{background:linear-gradient(180deg,#190b2d,#10071e);border:1px solid #553080;border-radius:16px;padding:12px}
.sidebar a{border:1px solid transparent;border-radius:9px}
.sidebar a:hover{background:#351456;border-color:#7d42b4}
.main{min-width:0}
.form-card{border:1px solid #713aa5;border-radius:20px;padding:clamp(18px,3vw,30px);background:linear-gradient(145deg,#25103e,#120821);box-shadow:var(--shadow)}
.screen-center{min-height:62vh;display:grid;place-items:center;text-align:center}
.playerrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);flex-wrap:wrap;margin:25px 0}
.avatar{width:clamp(48px,7vw,68px);height:clamp(48px,7vw,68px);border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#351653,#130921);border:2px solid #5b3c80;box-shadow:inset 0 1px #fff2;font-size:24px}
.avatar.active{border-color:#ffdc55;box-shadow:0 0 0 3px #ffdc5522,0 0 22px #ffcb4a50}
@media(max-width:760px){
 .top{position:relative;align-items:flex-start}
 .top .nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .nav a{font-size:12px;padding:9px 5px}
 .wrap{padding:12px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .grid.two{grid-template-columns:1fr}
 .card{padding:13px;border-radius:14px}
 .hero{border-radius:17px;padding:22px 18px}
 .hero h1{font-size:clamp(28px,8vw,42px)}
 table{min-width:570px}
}
@media(max-width:420px){
 .grid{grid-template-columns:1fr}
 .top>div{width:100%}
 .brand{font-size:19px}
 .playerrow{gap:8px}
}

.home-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:center;gap:24px;min-height:350px}
.home-hero-copy{position:relative;z-index:2}
.home-hero-art{position:relative;min-width:0;display:grid;place-items:center}
.home-hero-art img{width:min(100%,310px);aspect-ratio:2/3;object-fit:cover;object-position:center;border-radius:22px;border:1px solid #ffdc55;box-shadow:0 0 0 4px #7a2dd933,0 0 45px #a347ff50,0 22px 45px #0008;position:relative;z-index:1}
.art-glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:#8d2aff55;filter:blur(45px)}
.hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-stats span{display:flex;flex-direction:column;min-width:92px;padding:10px 13px;border:1px solid #70409c;border-radius:12px;background:#130821a8}
.hero-stats b{font-size:20px;color:var(--gold)}
.hero-stats small{font-size:11px;color:var(--muted)}
@media(max-width:650px){.home-hero{grid-template-columns:1fr}.home-hero-art img{width:min(70%,230px)}}


/* Integrated Ludo Combat logo assets */
.brand-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 9px #a44cff75)}
.login-logo{display:block;width:min(220px,72%);max-height:190px;object-fit:contain;margin:0 auto 16px;filter:drop-shadow(0 0 20px #9c40ff70)}
.splash-logo{display:block;width:min(310px,90%);max-height:380px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 0 26px #a64dff66)}
.footer-logo{width:30px;height:30px;object-fit:contain;vertical-align:middle}

/* Responsive premium game + reliable touch controls */
.game-wrap{max-width:1320px}.game-hero{display:flex;justify-content:space-between;align-items:center;gap:20px}.game-badges{display:flex;gap:8px;flex-wrap:wrap}
.game-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:16px;margin-top:18px;align-items:start}.game-main{min-width:0}.board-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;color:var(--gold)}
.ludo-board{display:grid;grid-template-columns:1fr .6fr 1fr;grid-template-rows:1fr .6fr 1fr;gap:5px;aspect-ratio:1;max-width:650px;margin:0 auto;padding:8px;border:2px solid #a45dff;border-radius:18px;background:linear-gradient(135deg,#160725,#080411);box-shadow:0 0 32px #8a27ff35,inset 0 0 24px #8a27ff14}
.home{border:2px solid #ffffffb0;border-radius:13px;padding:clamp(8px,1.5vw,16px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;min-width:0;box-shadow:inset 0 0 22px #0003}.home>b{font-size:clamp(10px,1.3vw,14px);letter-spacing:1.4px;color:#fff;text-shadow:0 2px 6px #0007}
.red-home{background:linear-gradient(145deg,#ff596f,#94102e)}.green-home{background:linear-gradient(145deg,#31f2a0,#087c58)}.blue-home{background:linear-gradient(145deg,#53a1ff,#123fae)}.yellow-home{background:linear-gradient(145deg,#ffe66e,#d17a00)}
.pawn-grid{display:grid;grid-template-columns:repeat(2,minmax(30px,1fr));gap:clamp(5px,1vw,12px);width:min(100%,180px);margin:auto}.board-pawn{width:100%;aspect-ratio:1;min-width:0;min-height:0;padding:0;border:2px solid #fff9;border-radius:50%;font-size:clamp(12px,2vw,21px);font-weight:1000;color:white;box-shadow:inset 0 2px 5px #fff6,0 4px 9px #0005;text-shadow:0 1px 3px #0009}
.board-pawn.red{background:linear-gradient(145deg,#ff8190,#c40b36)}.board-pawn.green{background:linear-gradient(145deg,#8dffce,#08a96a)}.board-pawn.blue{background:linear-gradient(145deg,#9acbff,#0757dc)}.board-pawn.yellow{background:linear-gradient(145deg,#fff3a4,#e69b00);color:#553400}
.board-pawn.selectable{outline:3px solid #fff7a0;box-shadow:0 0 0 5px #ffc83b50,0 0 20px #fff4;animation:pawnPulse 1s infinite alternate;cursor:pointer}.board-pawn.finished{filter:grayscale(.3);border-color:#ffe36a}
@keyframes pawnPulse{to{transform:scale(1.07);filter:brightness(1.2)}}
.track{display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #9c79c9;border-radius:8px;background:repeating-linear-gradient(45deg,#fff 0 15px,#eee5ff 15px 30px);color:#6634a0;font-size:clamp(11px,2vw,22px);font-weight:1000;overflow:hidden;text-align:center}.track-top{grid-column:2;grid-row:1;writing-mode:vertical-rl}.track-left{grid-column:1;grid-row:2}.track-right{grid-column:3;grid-row:2}.track-bottom{grid-column:2;grid-row:3;writing-mode:vertical-rl}
.board-center{grid-column:2;grid-row:2;border:1px solid #ffd85a;border-radius:12px;background:radial-gradient(circle,#6123a3,#18092c);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffe16c;font-size:clamp(10px,1.6vw,17px);font-weight:1000;gap:3px}.board-center img{width:45%;max-height:60%;object-fit:contain;filter:drop-shadow(0 0 8px #b65cff)}
.game-controls{display:grid;grid-template-columns:115px minmax(0,1fr);gap:15px;margin-top:16px;align-items:center}.dice-panel{display:flex;flex-direction:column;align-items:center;gap:5px}.dice-live{margin:5px 0;width:78px;height:78px;border-radius:18px;font-size:48px}.control-actions{min-width:0}.control-actions>#rollBtn{width:100%}.token-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.token-pick{padding:9px 7px;min-height:38px;background:linear-gradient(180deg,#a44aff,#5417b3);color:#fff;border-color:#caa5ff;font-size:12px}.players-card{position:sticky;top:20px}.player-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #493063;border-radius:12px;background:#12091f;margin:9px 0}.player-item.current{border-color:#ffdc55;box-shadow:0 0 16px #ffdc5519;background:#281640}.player-avatar{width:40px;height:40px;display:grid;place-items:center;border:2px solid #ffffff90;border-radius:50%;font-size:20px}.player-avatar.red{background:#bd153b}.player-avatar.green{background:#078a5b}.player-avatar.blue{background:#1558cc}.player-avatar.yellow{background:#e7a400}.player-info{min-width:0;display:flex;flex-direction:column}.player-info b{overflow-wrap:anywhere}.player-info small{font-size:11px;color:var(--muted)}.player-info .progress{font-size:10px}.rules-mini{font-size:13px;color:var(--muted);line-height:1.6}.rules-mini b{color:var(--gold)}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.players-card{position:static}.ludo-board{max-width:600px}}
@media(max-width:560px){.game-wrap{padding:10px}.game-hero{display:block;padding:17px}.game-badges{margin-top:12px}.game-layout{gap:10px}.game-main{padding:10px}.ludo-board{gap:3px;padding:4px;border-radius:12px}.home{padding:5px;border-width:1px;border-radius:8px;gap:4px}.pawn-grid{gap:4px}.board-pawn{border-width:1px}.track{border-radius:5px}.game-controls{grid-template-columns:82px minmax(0,1fr);gap:8px}.dice-live{width:60px;height:60px;font-size:37px}.token-buttons{grid-template-columns:1fr}.player-item{grid-template-columns:36px minmax(0,1fr) auto;padding:8px}.player-avatar{width:34px;height:34px}}

.matchmaking-orb{width:86px;height:86px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;margin:0 auto 12px;background:radial-gradient(circle,#5b2794,#160a29);box-shadow:0 0 28px #8c3dff65;font-size:40px}

/* FINAL RESPONSIVE PREMIUM UI + USER/ADMIN OFF-CANVAS SIDE MENUS */
:root{--bg:#080411;--surface:#130920;--surface-2:#201035;--surface-3:#30154e;--gold:#ffdb58;--gold-light:#fff1a8;--gold-deep:#f4a719;--purple:#8b35f2;--purple-2:#4c168f;--text:#fffaff;--muted:#c5b5df;--line:#55317a;--shadow:0 18px 48px #0008}
html{scroll-padding-top:90px}body{overflow-x:hidden;background:radial-gradient(ellipse at 10% 0%,#6524a933,transparent 28%),radial-gradient(ellipse at 95% 15%,#9d2fff20,transparent 30%),linear-gradient(145deg,#080411,#16082a 52%,#080411);background-attachment:fixed}
img{max-width:100%;height:auto}.top{gap:12px}.user-top,.admin-top{display:flex;align-items:center;min-height:70px;background:linear-gradient(100deg,#0c0618f5,#1a0a31f5 55%,#0d0619f5);border-bottom:1px solid #7845aa;box-shadow:0 8px 28px #0008;backdrop-filter:blur(14px)}
.brand-logo{display:inline-flex;align-items:center;gap:9px;min-width:0;color:#ffe16b}.brand-logo img{width:42px;height:42px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 9px #a34aff66)}.brand-logo span{line-height:1.05}.brand-logo b{color:#fff;text-shadow:0 0 10px #9e44ff}
.menu-toggle,.drawer-close{width:42px;height:42px;min-height:42px;padding:0;border:1px solid #7b4ba7;border-radius:12px;background:linear-gradient(180deg,#351854,#1b0c2e);color:#ffe36d;font-size:23px;box-shadow:inset 0 1px #fff2;flex-shrink:0}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.desktop-nav{margin-left:auto}.top-user-actions,.admin-top-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}.top-logout{padding:8px 11px;border:1px solid #624080;border-radius:9px;background:#241138;font-weight:800;font-size:12px}
.hero{border-color:#7e49ae;background:radial-gradient(circle at 85% 15%,#762ba944,transparent 30%),linear-gradient(125deg,#321052,#1d0b35 52%,#10071e);box-shadow:0 18px 42px #0008,inset 0 1px #fff2}
.card{border-color:#543074;background:radial-gradient(circle at 100% 0%,#8b31ff12,transparent 35%),linear-gradient(145deg,#25103e,#170a29 60%,#10071d);box-shadow:0 12px 32px #0006,inset 0 1px #ffffff12}
.home-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:center;gap:clamp(16px,3vw,34px);min-height:330px}
.home-hero-copy{min-width:0}.home-hero-art{position:relative;display:grid;place-items:center;min-width:0;min-height:230px;isolation:isolate}
.home-hero-art img{display:block;width:clamp(180px,28vw,330px);height:clamp(180px,28vw,330px);object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 22px #0008) drop-shadow(0 0 18px #9c43ff35);z-index:1}
.art-glow{position:absolute;z-index:-1;width:65%;aspect-ratio:1;border-radius:50%;background:#8d2aff48;filter:blur(40px)}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero-stats span{display:flex;flex-direction:column;min-width:82px;padding:9px 12px;border:1px solid #70409c;border-radius:12px;background:#130821b8}.hero-stats b{font-size:20px;color:var(--gold)}.hero-stats small{font-size:11px;color:var(--muted)}
/* Drawer base */
.drawer-scrim{position:fixed;inset:0;background:#05020bd9;backdrop-filter:blur(4px);z-index:80;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
body.drawer-visible .drawer-scrim{opacity:1;visibility:visible}
.side-drawer{position:fixed;z-index:90;left:0;top:0;bottom:0;width:min(320px,88vw);padding:17px 14px 22px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#1a0b2d,#0d0618 78%);border-right:1px solid #7644a5;box-shadow:18px 0 55px #0009;transform:translateX(-105%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.side-drawer.drawer-open{transform:translateX(0);visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:15px;border-bottom:1px solid #563273}.drawer-head .brand-logo img{width:44px;height:44px}.drawer-close{font-size:18px}
.drawer-user{display:flex;align-items:center;gap:12px;margin:16px 0;padding:12px;border:1px solid #563276;border-radius:13px;background:linear-gradient(120deg,#2d1247,#180a2a)}.drawer-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#48216e;border:1px solid #a779d7;font-size:22px}.drawer-user div{display:flex;flex-direction:column;gap:3px}.drawer-user small{color:var(--gold)}
.drawer-label{margin:18px 8px 7px;color:#a78bbf;font-size:10px;font-weight:900;letter-spacing:1.6px}.user-drawer>a,.admin-sidebar>a{display:flex;align-items:center;gap:11px;padding:11px 12px;margin:5px 0;border:1px solid transparent;border-radius:10px;background:#211034;color:#f2e7ff;font-size:13px;font-weight:750;transition:background .18s,border .18s,transform .18s}.user-drawer>a span,.admin-sidebar>a span{width:22px;text-align:center;color:#ffdb58;font-size:16px;flex-shrink:0}.user-drawer>a:hover,.admin-sidebar>a:hover{background:linear-gradient(100deg,#51247b,#2b1243);border-color:#8a59b7;transform:translateX(2px);color:white}.user-drawer .drawer-danger,.admin-sidebar .drawer-danger{margin-top:15px;border-color:#632844;background:#321026;color:#ffb8c5}.drawer-brand-note{text-align:center;color:#8b6da5;font-size:10px;letter-spacing:2px;margin:28px 0 8px}
.admin-layout{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:calc(100vh - 70px);align-items:stretch}.admin-sidebar{position:sticky;top:70px;height:calc(100vh - 70px);min-height:420px;overflow-y:auto;transform:none;visibility:visible;padding:14px 12px;background:linear-gradient(180deg,#160a27,#0c0617);border-right:1px solid #4f2d70;box-shadow:8px 0 25px #0002}.admin-sidebar .drawer-head{display:none}.admin-sidebar>a{font-size:12px;padding:12px 11px}.sidebar-spacer{height:14px}.admin-pill{font-size:9px;padding:4px 7px}.main{min-width:0;padding:clamp(14px,2.4vw,28px);overflow:hidden}.main>h1{margin-bottom:8px}
.table-wrap{width:100%;max-width:100%;overflow:auto;overscroll-behavior-x:contain}table{min-width:590px}td,th{white-space:normal;overflow-wrap:anywhere}input,select,textarea{min-width:0}
.form-card{width:min(460px,100%);padding:clamp(18px,4vw,30px);border:1px solid #61388a;border-radius:20px;background:linear-gradient(145deg,#24103c,#10071f);box-shadow:var(--shadow)}
.board{width:min(100%,570px)}.footer{padding:22px 12px}
@media(min-width:981px){.user-drawer{width:310px}.menu-toggle{display:inline-flex}.user-top .desktop-nav{display:flex}}
@media(max-width:980px){
 .top{position:sticky;top:0;flex-wrap:nowrap}.desktop-nav{display:none}.admin-layout{display:block}.admin-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(310px,88vw);height:100dvh;min-height:0;transform:translateX(-105%);visibility:hidden;transition:transform .25s ease,visibility .25s;border-right:1px solid #7644a5;box-shadow:18px 0 55px #0009}.admin-sidebar.drawer-open{transform:translateX(0);visibility:visible}.admin-sidebar .drawer-head{display:flex}.admin-sidebar>a{font-size:13px}.main{padding:16px}
}
@media(max-width:640px){
 body{font-size:14px}.user-top,.admin-top{min-height:62px;padding:9px 11px;gap:9px}.brand-logo img{width:35px;height:35px}.brand-logo{font-size:16px;gap:6px}.menu-toggle{width:38px;height:38px;min-height:38px;font-size:20px}.top-user-actions,.admin-top-actions{gap:7px;font-size:11px}.top-logout{padding:7px 8px}.balance{font-size:11px}
 .wrap{padding:12px}.home-hero{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 16px}.home-hero-copy{order:1}.home-hero-art{order:0;min-height:0;margin:-5px auto 6px}.home-hero-art img{width:clamp(150px,54vw,225px);height:clamp(150px,54vw,225px)}.home-hero h1{font-size:clamp(27px,8vw,39px)}.hero-stats{gap:7px}.hero-stats span{min-width:70px;padding:8px 9px}.hero-stats b{font-size:17px}
 .grid,.grid.two{grid-template-columns:minmax(0,1fr);gap:11px}.card{padding:14px;border-radius:14px}.hero{border-radius:16px}.main{padding:12px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kpi{padding:11px}.kpi strong{font-size:20px}.table-wrap{border-radius:10px}th,td{padding:9px 10px}.form-card{margin:20px auto}.playerrow{gap:8px}.avatar{width:54px;height:54px}.screen-center{min-height:60vh}
}
@media(max-width:370px){.brand-logo span{font-size:14px}.top-user-actions .balance{display:none}.admin-top-actions>span{max-width:65px;overflow:hidden;text-overflow:ellipsis}.home-hero-art img{width:145px;height:145px}}



/* ===== FINAL CSS OVERRIDES: consistent spacing, sizing and mobile layout ===== */
:root{--gold:#ffd85e;--gold-light:#fff2b0;--purple:#8b3dff;--line:#563477;--muted:#c9b9df}
*,*::before,*::after{box-sizing:border-box}
html{width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding:clamp(12px,2.2vw,26px)}
.top{min-width:0;flex-wrap:nowrap;padding:10px clamp(10px,2vw,24px);gap:clamp(7px,1.2vw,14px)}
.brand{min-width:0;white-space:nowrap}
.brand img,.brand-logo img{width:clamp(34px,4vw,46px);height:clamp(34px,4vw,46px);object-fit:contain;flex-shrink:0}
.nav{min-width:0}
.nav a{white-space:nowrap}
.top-user-actions,.admin-top-actions{min-width:0;display:flex;align-items:center;gap:8px}
.hero,.card{min-width:0;max-width:100%;overflow:hidden}
.hero{border-color:#7545a7}
.card{padding:clamp(13px,2vw,22px);border-color:#54316f}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn,button{max-width:100%;touch-action:manipulation}
input,select,textarea{width:100%;max-width:100%;min-width:0}
.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
table{max-width:100%;border-collapse:separate;border-spacing:0}
th,td{overflow-wrap:anywhere}
.footer{padding:18px 12px;text-align:center;color:#a995c5;font-size:12px}
/* Logo art must keep its aspect ratio and never stretch */
.brand-logo,.brand{display:inline-flex;align-items:center}
.brand-logo img{object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none}
.home-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);align-items:center;gap:clamp(12px,3vw,32px)}
.home-hero-art{display:grid;place-items:center;position:relative;min-width:0}
.home-hero-art img{display:block;width:clamp(180px,28vw,330px);height:auto;max-height:360px;object-fit:contain;border:0;border-radius:0;background:transparent;box-shadow:none}
.home-hero-copy{min-width:0}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px}
.hero-stats span{min-width:0;flex:0 1 auto}
/* User and admin menus */
.menu-toggle{flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center}
.side-drawer{z-index:100;max-width:88vw}
.drawer-scrim{z-index:99}
.admin-layout{grid-template-columns:238px minmax(0,1fr)}
.admin-sidebar{min-width:0}
.main{min-width:0;width:100%}
.admin-sidebar a{min-width:0;overflow-wrap:anywhere}
/* Matchmaking screen */
.screen-center{width:100%;max-width:700px;margin:clamp(14px,4vh,38px) auto;text-align:center}
.playerrow{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:clamp(10px,2vw,22px);margin:22px auto}
.playerrow>div{min-width:54px;max-width:90px;display:flex;flex-direction:column;align-items:center;gap:7px}
.playerrow small{font-size:11px;overflow-wrap:anywhere}
.avatar{width:clamp(44px,7vw,64px);height:clamp(44px,7vw,64px);display:grid;place-items:center;border-radius:50%;font-size:clamp(18px,3vw,27px);flex-shrink:0}
.dice{max-width:100%;flex-shrink:0}
/* Game board and controls */
.game-wrap{max-width:1320px}
.game-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr);gap:16px;align-items:start}
.game-main,.players-card{min-width:0}
.ludo-board{width:100%;max-width:650px;aspect-ratio:1/1;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,.6fr) minmax(0,1fr);gap:clamp(2px,.7vw,6px);padding:clamp(4px,1vw,9px);overflow:hidden}
.home{min-width:0;min-height:0;padding:clamp(4px,1.2vw,13px);gap:clamp(3px,.8vw,8px)}
.pawn-grid{width:min(100%,180px);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3px,.9vw,10px)}
.board-pawn{min-width:0;min-height:0;width:100%;aspect-ratio:1;padding:0;line-height:1}
.board-center{min-width:0;min-height:0;overflow:hidden}
.board-center img{width:42%;height:auto;max-height:55%;object-fit:contain}
.track{min-width:0;min-height:0;overflow:hidden}
.game-controls{display:grid;grid-template-columns:minmax(75px,110px) minmax(0,1fr);gap:clamp(8px,1.4vw,15px);align-items:center}
.dice-panel{min-width:0}
.dice-live{width:clamp(54px,8vw,78px);height:clamp(54px,8vw,78px);display:grid;place-items:center;font-size:clamp(30px,5vw,48px)}
.control-actions{min-width:0}
.token-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.token-pick{min-width:0;overflow-wrap:anywhere}
.player-item{min-width:0;grid-template-columns:38px minmax(0,1fr) auto;gap:8px}
.player-info{min-width:0;overflow-wrap:anywhere}
.player-info .progress{overflow-wrap:anywhere}
@media(max-width:980px){
 .admin-layout{display:block}
 .admin-sidebar{position:fixed;inset:0 auto 0 0;width:min(310px,88vw);height:100dvh;min-height:0;transform:translateX(-105%);visibility:hidden;z-index:100}
 .admin-sidebar.drawer-open{transform:translateX(0);visibility:visible}
 .admin-sidebar .drawer-head{display:flex}
 .game-layout{grid-template-columns:minmax(0,1fr)}
 .players-card{position:static}
}
@media(max-width:760px){
 .top{gap:8px}
 .desktop-nav{display:none}
 .grid,.grid.two{grid-template-columns:minmax(0,1fr)}
 .home-hero{grid-template-columns:minmax(0,1fr);gap:8px}
 .home-hero-art{order:0}
 .home-hero-copy{order:1}
 .home-hero-art img{width:clamp(145px,48vw,230px);max-height:240px}
 .hero{border-radius:16px}
 .main{padding:12px}
 .admin-layout .main{padding:12px}
}
@media(max-width:560px){
 body{font-size:14px}
 .wrap{padding:10px}
 .top{padding:8px 10px;min-height:58px}
 .brand{font-size:15px;gap:5px}
 .brand-logo img{width:34px;height:34px}
 .menu-toggle{flex-basis:38px;width:38px;height:38px;min-height:38px;font-size:19px}
 .top-user-actions,.admin-top-actions{gap:5px;font-size:10px}
 .top-logout{padding:6px 7px;font-size:10px}
 .balance{font-size:11px}
 .hero{padding:17px 14px}
 .card{padding:12px;border-radius:14px}
 .home-hero-art img{width:clamp(140px,48vw,200px);max-height:210px}
 .home-hero h1{font-size:clamp(27px,8vw,38px)}
 .hero-stats span{padding:7px 8px}
 .hero-stats b{font-size:16px}
 .game-wrap{padding:8px}
 .game-layout{gap:10px}
 .game-main{padding:9px}
 .ludo-board{gap:2px;padding:3px;border-radius:12px}
 .home{padding:3px;border-radius:7px;border-width:1px}
 .home>b{font-size:clamp(8px,2.3vw,11px);letter-spacing:.5px}
 .pawn-grid{gap:3px}
 .board-pawn{font-size:clamp(10px,3vw,15px);border-width:1px}
 .track{font-size:clamp(9px,2.5vw,14px);border-radius:4px}
 .board-center strong{font-size:clamp(8px,2.5vw,12px)}
 .game-controls{grid-template-columns:68px minmax(0,1fr);gap:7px}
 .dice-live{width:52px;height:52px;font-size:32px;border-radius:12px}
 .control-actions>#rollBtn{padding:10px 6px;font-size:12px}
 .token-buttons{grid-template-columns:minmax(0,1fr)}
 .token-pick{font-size:11px;padding:8px 5px;min-height:34px}
 .player-item{grid-template-columns:32px minmax(0,1fr) auto;padding:8px}
 .player-avatar{width:30px;height:30px;font-size:16px}
 .player-info small{font-size:10px}
 .table-wrap table{min-width:560px}
}
@media(max-width:360px){
 .top-user-actions .balance{display:none}
 .brand{font-size:13px}
 .brand-logo img{width:30px;height:30px}
 .game-controls{grid-template-columns:58px minmax(0,1fr)}
 .dice-live{width:46px;height:46px;font-size:28px}
 .token-buttons{grid-template-columns:minmax(0,1fr)}
}