
/* LUDO TAJ | unified premium visual system · responsive RTL */

:root{--taj-ink:#090e19;--taj-midnight:#101c2e;--taj-navy:#15263b;--taj-gold:#e9bf75;--taj-light:#fff0c5;--taj-muted:#aab9c8;--taj-line:rgba(233,191,117,.19);--taj-shadow:0 18px 52px #02050d99;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Vazirmatn,Tahoma,Arial,sans-serif!important;background:radial-gradient(ellipse at 52% -18%,#344661 0%,#15253a 35%,#090f1b 72%) fixed!important;color:#f9f1de!important;min-height:100dvh;letter-spacing:-.015em}body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(45deg,transparent 0 56px,#ddc18a04 57px 58px),radial-gradient(circle at 90% 80%,#e5b96a0a,transparent 38%)}
button,input,select{font-family:inherit!important}button{transition:transform .15s ease,box-shadow .15s ease,background .15s ease}button:active:not(:disabled){transform:scale(.97)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--taj-gold);outline-offset:3px}button:disabled{opacity:.45!important}
.app,.shell{width:min(1100px,100%);margin:0 auto;padding:20px clamp(10px,3vw,26px) 80px!important}
.header,.top{background:linear-gradient(130deg,#152339df,#0d1829ee);border:1px solid var(--taj-line);border-radius:22px;padding:13px 17px;margin-bottom:18px!important;box-shadow:0 10px 35px #0003;display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo,.brand h1{font-size:clamp(19px,3.6vw,28px)!important;font-weight:900!important;color:var(--taj-light)!important;text-shadow:0 2px 18px #dcae4660}.brand .mark{color:#f8d48d}.tag,.pill{border:1px solid #e6bd7466!important;background:#d2a45613!important;border-radius:99px!important;color:#f5d595!important;font-size:11px!important;padding:8px 12px!important}
.card{position:relative;border:1px solid var(--taj-line)!important;background:linear-gradient(152deg,#1c2c43fa,#101b2cfa 78%)!important;border-radius:21px!important;box-shadow:0 14px 44px #02071153,inset 0 1px #ffffff0e!important;padding:clamp(15px,2.4vw,24px)!important;margin-bottom:14px;overflow:hidden}.card::before{content:'';height:1px;position:absolute;top:0;left:14%;right:14%;background:linear-gradient(90deg,transparent,#eec98299,transparent);pointer-events:none}.card h2{font-size:clamp(16px,2.2vw,20px)!important;font-weight:900;color:#f4d59b!important;margin-bottom:12px!important}.hint,.rules{font-size:12px!important;color:#b4c3d2!important;line-height:2!important}.field,.controls select{background:#091625!important;border:1px solid #61708788!important;border-radius:13px!important;color:#fff3d9!important;padding:13px!important;min-height:44px}.field:focus{border-color:#e4bd7c!important;box-shadow:0 0 0 3px #d0ab4e1a}.btn,.cta{border-radius:13px!important;padding:12px 17px!important;font-weight:900!important;border:1px solid #fff0c4bb!important;color:#33240f!important;background:linear-gradient(155deg,#ffedbb,#eec57c 47%,#b78337)!important;box-shadow:inset 0 1px #fff9,0 6px 19px #c9993f20!important;min-height:45px}.btn.secondary,.secondary{background:linear-gradient(155deg,#263a52,#162337)!important;color:#f1d5a1!important;border:1px solid #9e845a7c!important;box-shadow:none!important}.actions{display:flex;gap:9px;flex-wrap:wrap}.actions .btn{flex:1 1 auto}.foot{color:#8393a7!important;font-size:11px!important;text-align:center;padding:15px}
#lobby{background:radial-gradient(ellipse at 85% 8%,#c9994433,transparent 55%),linear-gradient(152deg,#1c2c43,#101b2c)!important}#lobby h2{font-size:23px!important}#quick{min-height:53px;background:linear-gradient(150deg,#fff2c3,#dca850 70%,#ab792c)!important}#account,#economy{max-width:none}#rankings:not(:empty),#walletInfo:not(:empty){padding:12px;margin-top:12px;border:1px solid #e1b66522;border-radius:12px;background:#091522a6}
.shop{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-top:14px}.shopitem{border:1px solid #a58e5d55!important;border-radius:16px!important;background:linear-gradient(145deg,#29364d,#101b2d)!important;min-height:150px;padding:18px!important;display:flex;flex-direction:column;justify-content:space-between;gap:12px;box-shadow:inset 0 1px #ffffff11}.shopitem::before{content:'✦';display:block;font-size:28px;color:#e5bd70;line-height:1}.shopitem b{font-size:15px;color:#f5e1b8}.shopitem small{color:#aab8c8}.shopitem button{width:100%}
.room-grid{grid-template-columns:minmax(0,1fr) 260px!important;gap:14px}.board-frame{border-radius:19px!important;background:linear-gradient(135deg,#fff0b9,#9c6a2f 23%,#eac781 49%,#845728 72%,#fce1a0)!important;padding:clamp(5px,1.2vw,11px)!important;box-shadow:0 15px 35px #0009,inset 0 0 0 2px #3a260c!important}.board{border-radius:10px!important;overflow:hidden!important;box-shadow:inset 0 0 0 1px #8a744b}.cell{border-color:#17223026!important}.pawn{box-shadow:inset 0 2px 2px #ffffffa6,inset 0 -3px 5px #0005,0 3px 7px #0008!important;border:1px solid #ffffffb0!important;font-weight:900}.pawn.clickable{outline:3px solid #ffe7a2!important;outline-offset:-1px;animation:taj-pulse 1.1s ease-in-out infinite alternate}.dice{filter:drop-shadow(0 7px 9px #0008)}#seats{display:grid;gap:8px}.seat{border:1px solid #7d8ca63f!important;border-radius:12px!important;padding:12px!important;background:#0b1727!important}.seat.active{border-color:#efc17d!important;box-shadow:0 0 0 1px #dfb66a55,0 0 19px #e8b76520}.notice{font-weight:700;color:#f5dca8}.controls{gap:10px}.controls .actions{margin-top:10px}
.taj-tabs{display:flex;gap:7px;margin-bottom:14px;padding:6px;background:#0b1626b8;border:1px solid #a68b5b41;border-radius:16px;overflow-x:auto;scrollbar-width:none}.taj-tabs button{white-space:nowrap;flex:1;min-width:86px;border:1px solid transparent;border-radius:11px;padding:10px 12px;background:transparent;color:#b7c5d4;font-weight:800;font-size:12px}.taj-tabs button[aria-selected="true"]{background:linear-gradient(150deg,#eac782,#a77738);color:#241a0f;border-color:#f9db9d;box-shadow:0 3px 12px #0006}
.taj-intro{border-radius:19px;border:1px solid #edc07866;padding:19px;margin-bottom:14px;background:radial-gradient(circle at 12% 55%,#e9c17635,transparent 35%),linear-gradient(125deg,#263950,#101b2b);display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:110px}.taj-intro strong{display:block;font-size:22px;color:#ffe1a4}.taj-intro span{display:block;color:#b7c6d3;font-size:12px;margin-top:5px}.taj-intro .medal{font-size:53px;filter:drop-shadow(0 8px 11px #0008)}
@keyframes taj-pulse{from{filter:brightness(1)}to{filter:brightness(1.35) drop-shadow(0 0 6px #ffdd7a)}}
@media(max-width:760px){.app,.shell{padding:8px 8px 90px!important}.header,.top{padding:11px 13px!important;border-radius:16px!important;margin-bottom:10px!important}.tag{font-size:9px!important;padding:6px 8px!important}.room-grid{display:flex!important;flex-direction:column!important;gap:0!important}.room-grid>section{width:100%}.room-grid>aside{width:100%}.room-grid .card{margin-bottom:10px!important}.board-frame{padding:5px!important}.card{border-radius:16px!important;padding:13px!important;margin-bottom:10px!important}.room-grid .side{display:grid;gap:8px}.room-grid .controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.room-grid .dice{flex:0 0 65px}.room-grid .notice{flex:1 1 140px}.room-grid .controls .actions{flex-basis:100%}.taj-intro{min-height:92px;padding:12px}.taj-intro strong{font-size:18px}.taj-intro .medal{font-size:40px}.taj-tabs{position:sticky;top:3px;z-index:8;backdrop-filter:blur(17px)}.taj-tabs button{min-width:78px;padding:9px 8px;font-size:11px}.shop{grid-template-columns:repeat(2,minmax(0,1fr))!important}.shopitem{padding:12px!important;min-height:140px}.panel{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel .dice-card,.panel .players-card,.panel .rules-card{grid-column:1/-1}.board-outer{padding:5px!important}.play-wrap{padding:6px!important}}
@media(max-width:380px){.actions .btn{font-size:11px;padding:10px 9px!important}.shop{grid-template-columns:1fr!important}.taj-tabs button{min-width:72px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Royal release design polish - local/offline vector identity */
.royal-brand{display:inline-block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 6px 15px #d9ae5c65);vertical-align:middle;flex:0 0 auto}.logo{display:flex;align-items:center;gap:9px}.brand{display:flex;align-items:center;gap:9px}
.taj-intro{position:relative;isolation:isolate;overflow:hidden}.taj-intro::after{content:"";position:absolute;inset:0;background-image:url('tile-pattern.svg');background-size:115px 115px;opacity:.13;z-index:-1;pointer-events:none}
.board-frame,.board-outer{position:relative;isolation:isolate}.board-frame::after,.board-outer::after{content:"";pointer-events:none;position:absolute;inset:0;border:1px solid #f9e2ab80;border-radius:inherit;box-shadow:inset 0 0 0 3px #19100648}
.board .pawn,.board-outer .pawn{transition:filter .16s ease,transform .16s ease}.pawn.clickable{filter:drop-shadow(0 0 5px #fff3ad)}
button:focus-visible{outline:3px solid #fff0ac!important;outline-offset:3px!important}
@media(max-width:700px){
.app,.shell{padding:8px 8px max(28px,env(safe-area-inset-bottom))!important}
.header,.top{padding:9px 11px!important;border-radius:15px!important;margin-bottom:9px!important}.tag,.pill{font-size:9px!important;padding:5px 8px!important;max-width:45%;text-align:center}
.royal-brand{width:34px;height:34px}.logo,.brand h1{font-size:18px!important}.brand .sub{font-size:9px}
.room-grid{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}.board-frame{padding:5px!important;border-radius:13px!important}.board{border-radius:6px!important}
#gamearea>.card,.room-grid>.card{margin:0!important}.room-grid section>.card{padding:8px!important;margin-bottom:6px!important}
.side{grid-template-columns:1fr 1fr!important}.side .controls{grid-column:1/-1!important}
.taj-tabs{gap:5px!important}.taj-tabs button{min-width:0!important;font-size:10px!important;padding:9px 5px!important}
.dashboard{grid-template-columns:1fr!important;gap:7px!important}.play-wrap{padding:5px!important;border-radius:15px!important}.board-outer{padding:4px!important}
.panel{gap:7px!important}.panel .card{padding:9px!important}.panel .dice-card{order:-1!important}.panel .players-card{order:1!important}
}
@media(max-width:360px){.tag,.pill{display:none!important}.pawn{font-size:9px!important}.shop{grid-template-columns:repeat(2,minmax(0,1fr))!important}.shopitem{padding:10px!important;min-height:135px!important}}
@media(prefers-reduced-motion:reduce){.pawn,.royal-brand{transition:none!important;animation:none!important}}

/* Integrated premium release: consistent contrast, spacing, tap targets & mobile flow */
:root{--taj-focus:#ffedae;--taj-canvas:#f4eedf}
a{color:#f5d692;text-decoration-thickness:1px;text-underline-offset:4px}a:focus-visible{outline:3px solid var(--taj-focus);outline-offset:4px;border-radius:5px}
.taj-mode-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;border:1px solid #edca87a6;border-radius:14px;background:linear-gradient(145deg,#263951,#111d30);color:#fce0a6;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:inset 0 1px #fff2}
.taj-mode-link:hover{border-color:#ffe4ae;background:#2b4159}
.taj-tabs{scrollbar-width:thin}.taj-tabs button:focus-visible{outline:2px solid #ffe7a3!important;outline-offset:-2px!important}
.taj-tabs button[aria-selected=true]{text-shadow:0 1px #fff7}.taj-intro{box-shadow:inset 0 1px #fff2,0 12px 34px #0003}
#lobby label{display:block;font-size:12px;font-weight:700;color:#f2d3a2;margin:7px 0 1px}
#lobby .field{font-size:15px}#code{direction:ltr;text-align:center;letter-spacing:.22em;font-variant-numeric:tabular-nums}
.taj-lobby-actions #quick{flex-basis:100%;font-size:15px;letter-spacing:0}
.board,.board-outer{contain:layout paint}.board-frame .board{aspect-ratio:1;width:100%;height:auto}
.player,.seat{min-height:44px}.shopitem button{min-height:44px}.cell .pawn.clickable{touch-action:manipulation}
#rankings,#walletInfo,#identity{overflow-wrap:anywhere;white-space:pre-line}
@media(max-width:760px){.app,.shell{width:100%;max-width:100%;overflow-x:clip}.header,.top{gap:6px}.taj-mode-link{min-height:40px;padding:7px 9px;font-size:10px}.brand,.logo{min-width:0}.logo small{display:none}.taj-tabs{position:sticky;top:0;z-index:12;box-shadow:0 9px 26px #050c18b8}.taj-tabs button{min-height:45px}.room-grid>.side,.room-grid aside{min-width:0}.room-grid .side{display:flex!important;flex-direction:column!important;gap:7px}.room-grid .side #seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.room-grid .seat{margin:0;padding:8px!important;overflow-wrap:anywhere}.room-grid .side .controls{display:grid;grid-template-columns:66px minmax(0,1fr);gap:7px!important}.room-grid .dice{grid-row:1;grid-column:1;font-size:44px!important}.room-grid .notice{grid-row:1;grid-column:2;margin:0;padding:8px}.room-grid .controls .actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:0}.room-grid .controls .actions button{min-width:0}.room-grid .controls .hint{grid-column:1/-1;margin:0}.room-grid #turnInfo{margin:5px 0}.room-grid .board-frame{max-width:min(100%,calc(100dvh - 255px));margin:auto}.dashboard .play-wrap{order:0}.dashboard .panel{order:1}.dicezone{min-width:0}.card h2{line-height:1.5}.taj-intro{margin-bottom:8px}.taj-intro strong{font-size:17px}}
@media(max-width:390px){.royal-brand{width:30px;height:30px}.taj-mode-link{font-size:9px;padding:6px}.taj-intro .medal{font-size:32px}.taj-intro{min-height:76px}.room-grid .board-frame{max-width:100%}.taj-tabs button{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* Mobile game focus mode: show the board and active controls first. */
@media(max-width:760px){
 body.taj-in-game .taj-intro{display:none}
 body.taj-in-game .header{padding-block:6px!important;margin-bottom:5px!important}
 body.taj-in-game .taj-tabs{margin-bottom:6px!important;padding:4px}
 body.taj-in-game .taj-tabs button{min-height:40px}
 body.taj-in-game .room-grid section>.card{padding:7px!important}
 body.taj-in-game #turnInfo{font-size:12px!important;line-height:1.5!important}
 body.taj-in-game .room-grid .board-frame{max-width:min(100%,calc(100dvh - 245px));}
 body.taj-in-game .room-grid .board{touch-action:manipulation}
 body.taj-in-game .room-grid .side{gap:5px!important}
 body.taj-in-game .room-grid .controls .actions .btn{min-height:48px}
 .taj-tabs button{touch-action:manipulation}
}
@media(max-width:390px){body.taj-in-game .room-grid .board-frame{max-width:100%}}

/* Profile, league and store premium unification */
.taj-account-panel{margin:14px 0;padding:14px;border:1px solid rgba(222,185,103,.35);border-radius:16px;background:linear-gradient(130deg,rgba(205,166,92,.12),rgba(10,24,49,.25))}
.taj-account-panel label{display:block;margin-bottom:7px;font-weight:700}
.taj-account-panel .actions{margin-top:10px}
.taj-account-panel .hint{margin-top:12px;line-height:1.9}
#shopItems .shop-item,#shopItems .item{border-radius:14px}
@media(max-width:420px){.taj-account-panel{padding:11px}.taj-account-panel .actions button{flex:1;min-height:44px}}
