/* Royal mobile presentation. Gameplay geometry and input targets stay in SVG. */
:root{--text:#fff8e8;--gold:#ffd575;--bg:#06132f;--muted:#b9d4f2}
body{background:#06132f;font-family:Vazirmatn,Tahoma,sans-serif}
.royal-ui{background:linear-gradient(#09204d20,#05153438),url('/art/royal-lobby.png') center/cover fixed;max-width:560px;margin:auto;min-height:100dvh;box-shadow:0 0 90px #0008;overflow-x:clip}
.royal-ui:not(.game-view) .main{padding:0 16px 108px;max-width:none}
.royal-ui .topbar{margin:0 -16px 12px;padding:20px 14px 14px;border-radius:0 0 24px 24px;background:linear-gradient(165deg,#2866ee,#163bab 65%,#122a79);border-bottom:2px solid #81baf0;box-shadow:0 5px 0 #07183c,0 10px 24px #00153088;gap:8px;min-height:94px;display:flex;align-items:center}
.royal-ui .identity{min-width:0;gap:8px;flex:1}.royal-ui .identity strong{font-size:13px;color:#fff}.royal-ui .identity small{font-size:10px;color:#c4e2ff}.royal-ui .avatar{background:linear-gradient(145deg,#e1f1ff,#7da5d8);border:2px solid #ffdb83;border-radius:15px;box-shadow:0 3px 0 #061d51;flex-shrink:0}
.royal-ui .wallet{gap:6px}.royal-ui .wallet>div{background:linear-gradient(#103c7b,#071c49);border:1px solid #739dc9;border-radius:20px;padding:5px 8px;min-width:48px;box-shadow:inset 0 2px 3px #0005;font-size:12px}.royal-ui .coin{color:#ffe16c;text-shadow:0 2px #b36b13;font-size:23px}.royal-ui .wallet .icon-btn{width:34px;min-height:34px;background:linear-gradient(#ffdb74,#dc901d);color:#653710;border-color:#ffea98}
.royal-ui .sidebar{position:fixed;top:auto;bottom:0;left:50%;transform:translateX(-50%);width:min(560px,100%);height:84px;padding:0 4px env(safe-area-inset-bottom);border:0;border-top:2px solid #70bcff;border-radius:20px 20px 0 0;background:linear-gradient(#1259c9,#083480);box-shadow:0 -8px 25px #06153677;z-index:30;display:block}.royal-ui .sidebar .logo,.royal-ui .side-bottom{display:none}.royal-ui .nav{display:flex;flex-direction:row;justify-content:space-around;height:100%;gap:0}.royal-ui .nav button{flex:1;border-radius:13px;margin:0;background:transparent;border:0;color:#dbeeff;font-size:10px;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 2px}.royal-ui .nav button svg{width:33px;height:33px;filter:drop-shadow(0 3px 1px #001b59)}.royal-ui .nav button.active{background:linear-gradient(#63dbff,#0795ed 55%,#0073c1);border:2px solid #c4f8ff;box-shadow:0 4px 0 #084876;transform:translateY(-9px);color:white}.royal-ui .nav button span{font-weight:850}
.royal-ui .game-hub{min-height:calc(100dvh - 205px);gap:16px;display:flex;flex-direction:column;justify-content:space-between}.royal-ui .hub-heading{padding:2px 8px}.royal-ui .hub-brand{font-size:24px;color:#fff1c8;text-shadow:0 3px 1px #061537}.royal-ui .hub-brand small{letter-spacing:4px;color:#abd4ff;font-size:9px}.royal-ui .hub-online{font-size:10px;background:#071e4da8;border:1px solid #89b7ef55;border-radius:16px;padding:5px 10px}
.royal-ui .hub-shortcuts{gap:8px}.royal-ui .hub-shortcuts button{border-radius:16px;border:1px solid #aaeaff;background:linear-gradient(160deg,#55cafa,#138bdd 52%,#0967b6);box-shadow:inset 0 2px #ffffff88,0 5px #07416e,0 8px 12px #001a4588;min-height:72px;font-size:11px;color:white}.royal-ui .shortcut-icon{color:#ffe696;filter:drop-shadow(0 2px #24588a)}
.royal-ui .lobby-stage{min-height:0;gap:6px;margin:4px -16px;width:calc(100% + 32px)}.royal-ui .lobby-title{font-size:16px;color:#e7f2ff;font-weight:750;letter-spacing:0}.royal-ui .lobby-carousel{gap:18px;padding:12px 17% 22px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.royal-ui .lobby-card{flex:0 0 100%;min-height:248px;border-radius:30px;padding:8px 12px 16px;border-width:2px;box-shadow:inset 0 3px 0 #ffffffc0, inset 0 -6px 10px #002d3233,0 7px 0 #076631,0 12px 16px #0006;isolation:isolate}.royal-ui .lobby-card:before{content:'';position:absolute;inset:5px 5px 47%;border-radius:24px 24px 50% 10%;background:linear-gradient(150deg,#ffffff50,#ffffff08);z-index:-1}.royal-ui .tile-illustration{width:210px;height:145px;margin:-5px auto -8px}.royal-ui .lobby-card strong{font-size:25px;line-height:1.5}.royal-ui .lobby-card small{font-size:11px;color:#fff}.royal-ui .card-go{font-size:10px;padding:3px 12px}.royal-ui .carousel-dots{display:flex}.royal-ui .swipe-hint{display:block;font-size:10px;margin:0;color:#b5d1f5}.royal-ui .lobby-teams{box-shadow:inset 0 3px #fff9,0 7px #006377,0 12px 16px #0006}.royal-ui .lobby-bot{box-shadow:inset 0 3px #fff9,0 7px #352579,0 12px 16px #0006}.royal-ui .lobby-local{box-shadow:inset 0 3px #fff9,0 7px #93500c,0 12px 16px #0006}.royal-ui .lobby-card:disabled{opacity:.75;filter:saturate(.55)}
.royal-ui .league-lobby-button,.royal-ui .lobby-collection{border:1px solid #d9b36b;background:linear-gradient(135deg,#263d77,#0b224e);box-shadow:inset 0 1px #fff4,0 4px 0 #061530;min-height:66px;border-radius:18px}.royal-ui .creator-credit{font-size:9px;opacity:.65;padding:0}.royal-ui .lobby-collection .dice{transform:rotate(-14deg);box-shadow:5px 6px 0 #041634}
button{touch-action:manipulation;transition:transform .15s,filter .15s,box-shadow .15s}button:active:not(:disabled){transform:translateY(2px) scale(.98)}
.royal-ui .primary,dialog .primary{background:linear-gradient(#66f65e,#0cd13b 55%,#04b02c);color:white;border:2px solid #b5ffa8;box-shadow:inset 0 2px #fff9,0 5px #167d21;text-shadow:0 2px #157327;border-radius:15px;font-weight:900}
dialog{border:3px solid #fff2ca;border-radius:26px;background:linear-gradient(#fff7e4,#ecdbb7);color:#4d352c;box-shadow:0 10px 0 #8f7346,0 20px 70px #0009}dialog::backdrop{background:#020d2dc9;backdrop-filter:blur(4px)}dialog h2{font-size:23px}.dialog-header{background:linear-gradient(#356df1,#2449b5);color:white;padding:18px;border-bottom:3px solid #cfb57e}.mode-screen{color:#573c2e}.mode-option{border-radius:18px!important}.mode-option.chosen{border-color:#118ae4!important;box-shadow:0 4px #0766ac!important}.mode-emblem{box-shadow:inset 0 3px #fff8,0 5px #6c4a29!important}.mode-rewards{background:linear-gradient(#f8f2ff,#ded6ed);border:2px solid #8461ce;border-radius:20px;padding:20px}.start-game-button{min-height:58px;font-size:25px!important}
.royal-ui .collection-screen{padding-top:8px}.royal-ui .collection-heading h1{font-size:24px;color:#fff0c3}.royal-ui .collection-tabs{background:linear-gradient(#3262c6,#253e90);border:1px solid #8fb6fc;border-radius:18px;padding:8px;gap:6px}.royal-ui .collection-tabs button{border-radius:12px;color:white}.royal-ui .collection-tabs .selected{background:linear-gradient(#7ddcff,#159dea);border-color:#d3faff}.royal-ui .collection-grid{gap:13px}.royal-ui .shop-card{border:2px solid #d4b57a;border-radius:22px;background:radial-gradient(ellipse at 50% 35%,#4166b2,#172c63 65%);box-shadow:inset 0 2px #fff5,0 6px #061531;padding:14px 10px}.royal-ui .shop-card h3{color:#fff2c9;font-size:16px}.royal-ui .shop-card p{color:#c1d4ee}.royal-ui .cosmetic-price{color:#ffe384;font-weight:850}
/* Ludo and snakes use the phone's portrait stage. Only BG uses landscape. */
.royal-ui.game-view:not(.bg-landscape){max-width:560px;min-height:100dvh}.royal-ui.game-view:not(.bg-landscape) .main{padding:12px 8px max(16px,env(safe-area-inset-bottom));min-height:100dvh;gap:12px}.royal-ui.game-view:not(.bg-landscape) .game-layout{width:100%;gap:18px;margin:auto 0}.royal-ui.game-view:not(.bg-landscape) .game-top{padding:6px 12px;color:#f6e9c7}.royal-ui.game-view:not(.bg-landscape) .players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 8px}.royal-ui.game-view:not(.bg-landscape) .player{border-radius:16px;background:linear-gradient(140deg,#214879,#102952);border:1px solid #7396c0;box-shadow:0 4px #071631;padding:8px;min-width:0}.royal-ui.game-view:not(.bg-landscape) .player.active{border:2px solid #ffe296;box-shadow:0 0 14px #ffd35855,0 4px #72552a}.royal-ui.game-view:not(.bg-landscape) .player .avatar{display:grid;width:34px;height:34px;font-size:24px}.royal-ui.game-view:not(.bg-landscape) .player strong{font-size:11px}.royal-ui.game-view:not(.bg-landscape) .player small{font-size:9px}.royal-ui.game-view:not(.bg-landscape) .board-frame{border:4px solid #dfc18a;padding:3px;border-radius:19px;background:linear-gradient(135deg,#fff2ce,#a67935,#e7cb86);box-shadow:0 8px 0 #604320,0 13px 25px #0009;width:100%;max-width:none}.royal-ui.game-view:not(.bg-landscape) .board{border-radius:10px;display:block;width:100%;height:auto;max-height:none}.royal-ui.game-view:not(.bg-landscape) .dice-area{border:1px solid #658dc4;border-radius:21px;background:linear-gradient(#204881,#102852);box-shadow:inset 0 2px #fff2,0 5px #06162e;padding:16px 12px;gap:14px;display:flex;align-items:center}.royal-ui.game-view:not(.bg-landscape) .dice-area .dice{width:62px;height:62px;flex-shrink:0;border-radius:14px;box-shadow:0 5px 0 #c3a776,0 8px 9px #0006}.royal-ui.game-view:not(.bg-landscape) .game-status{flex:1;color:#f2e8cc;font-size:12px}.royal-ui.game-view:not(.bg-landscape) .dice-area>.primary{min-width:74px;font-size:13px}.royal-ui.game-view:not(.bg-landscape) .timer-bar{height:5px;margin:14px 12px 0;background:#05162d;border-radius:8px}.royal-ui.game-view:not(.bg-landscape) .timer-bar span{background:linear-gradient(90deg,#25d0bf,#beff8d)}
.royal-ui.bg-landscape{max-width:none;background:radial-gradient(ellipse,#253958,#071326)}
@media(max-height:740px){.royal-ui .lobby-card{min-height:218px}.royal-ui .tile-illustration{height:120px}.royal-ui .game-hub{gap:12px}.royal-ui.game-view:not(.bg-landscape) .game-layout{gap:10px}.royal-ui.game-view:not(.bg-landscape) .board-frame{width:min(100%,calc(100dvh - 270px));align-self:center}.royal-ui.game-view:not(.bg-landscape) .game-main{display:flex;flex-direction:column;align-items:center}.royal-ui.game-view:not(.bg-landscape) .dice-area{padding:10px}}
@media(prefers-reduced-motion:no-preference){.royal-ui .tile-illustration svg{animation:royal-float 4s ease-in-out infinite}.royal-ui .lobby-card:nth-child(2n) .tile-illustration svg{animation-delay:-2s}@keyframes royal-float{50%{transform:translateY(-5px)}}}
.boot{background:radial-gradient(ellipse at top,#1754ab,#071a3d 70%);color:#fff0c9}.boot-emblem{width:128px;height:128px;border-radius:28px;box-shadow:0 12px 40px #0008}.brand-emblem{width:52px;height:52px;border-radius:12px}.royal-ui .hub-brand{position:relative;padding-inline-start:52px;min-height:44px;line-height:1.1}.hub-emblem{position:absolute;inset-inline-start:0;top:-2px;width:43px;height:43px;border-radius:10px;box-shadow:0 4px 8px #0007}.royal-ui .hub-brand small{display:block;margin-top:7px;letter-spacing:2px}
.royal-ui .topbar{position:relative;inset:auto;width:auto;transform:none}.royal-ui .sidebar{right:auto;inset-inline:auto;left:50%;transform:translateX(-50%)}.royal-ui .sidebar .nav{width:100%;position:static;transform:none}.royal-ui .identity{opacity:1;filter:none}.royal-ui .hub-shortcuts button:disabled,.royal-ui .league-lobby-button:disabled{opacity:.8;filter:saturate(.75)}.royal-ui .lobby-card[data-offline-disabled]{opacity:.9;filter:saturate(.75)}.royal-ui .lobby-card[data-offline-disabled] .card-go{visibility:hidden}.royal-ui .lobby-card[data-offline-disabled]::after{bottom:20px;font-size:11px;background:#113663;border:1px solid #9dc8ed;border-radius:15px;padding:3px 18px;color:white}.royal-ui .game-hub{min-height:calc(100dvh - 228px)}
.royal-ui .game-hub{gap:10px}.royal-ui .hub-shortcuts button{min-height:58px;padding:6px}.royal-ui .lobby-card{min-height:225px;height:225px;gap:4px}.royal-ui .tile-illustration{height:116px;width:178px}.royal-ui .lobby-carousel{padding-top:8px;padding-bottom:15px}.royal-ui .lobby-stage{gap:3px}.royal-ui .swipe-hint{display:none}.royal-ui .league-lobby-button,.royal-ui .lobby-collection{min-height:54px}.royal-ui .lobby-collection .dice{width:38px;height:38px;min-height:38px;padding:7px}.royal-ui .lobby-card[data-offline-disabled]::after{left:50%;right:auto;width:auto;transform:translateX(-50%);white-space:nowrap;bottom:12px}.royal-ui.game-view:not(.bg-landscape) .players{width:100%}.royal-ui.game-view:not(.bg-landscape) .game-main{width:100%}.royal-ui.game-view:not(.bg-landscape) .dice-area{width:100%;max-width:100%}
/* Explicit square constraints defeat inherited min-height and flex sizing. */
.royal-ui.game-view:not(.bg-landscape) .dice-area>.dice{width:64px;height:64px;min-width:64px;max-width:64px;min-height:64px;max-height:64px;flex:0 0 64px;aspect-ratio:1;box-sizing:border-box;padding:12px;gap:4px;transform:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.royal-ui .dice .pip{aspect-ratio:1;width:100%;height:auto;align-self:center;justify-self:center}.royal-ui.bg-landscape .bg-dice>.dice{width:48px;height:48px;min-width:48px;max-width:48px;min-height:48px;max-height:48px;flex:0 0 48px;aspect-ratio:1;transform:none}.royal-ui .lobby-card[data-offline-disabled]::after{inset-inline:12px;left:12px;right:12px;width:auto;transform:none}
.snake-head,.snake-jaw{transform-box:fill-box;transform-origin:center}.snake-jaw{transform-origin:center top}.snake-art.portal-active{filter:drop-shadow(0 0 4px #9bb56e)}.ladder-art.portal-active{filter:drop-shadow(0 0 4px #fff88e)}

.snake-tongue{transform-box:fill-box;transform-origin:center top;pointer-events:none}

.royal-ui.game-view.snakes-jungle{background:#193c28 url('/art/sl_jungle.svg') center/cover}
.royal-ui.game-view.snakes-jungle .board-frame{background:linear-gradient(110deg,#806b32,#332b15,#907741);border:3px solid #b6a25a;border-radius:17px;padding:5px;box-shadow:0 7px 0 #232417,0 14px 28px #0009}
.royal-ui.game-view.snakes-jungle .player{background:linear-gradient(#84633a,#493823);border:2px solid #c7a66a;box-shadow:0 4px #1d2615;border-radius:18px 18px 9px 9px}
.royal-ui.game-view.snakes-jungle .player.active{background:linear-gradient(#82ac36,#355a21);border-color:#ffe582;box-shadow:0 0 17px #cadc5866,0 4px #273819}
.royal-ui.game-view.snakes-jungle .dice-area{background:linear-gradient(120deg,#486433dd,#1e3723ee);border-color:#93a45a}
.sl-shop-preview{border-radius:14px;padding:9px;background:#173c28;overflow:hidden}.sl-shop-preview svg{display:block;width:100%;height:auto}
.royal-ui .collection-tabs{overflow-x:auto;display:flex}.royal-ui .collection-tabs>button{flex:0 0 84px}
.royal-ui.game-view.env-sl_jungle,.sl-shop-preview.env-sl_jungle{background:#173c28 url("/art/sl_jungle.svg") center/cover}
.royal-ui.game-view.env-sl_jungle .dice-area{background:linear-gradient(130deg,#718b3e,#173c28);}
.royal-ui.game-view.env-sl_desert,.sl-shop-preview.env-sl_desert{background:#70462b url("/art/sl_desert.svg") center/cover}
.royal-ui.game-view.env-sl_desert .dice-area{background:linear-gradient(130deg,#d7ad64,#70462b);}
.royal-ui.game-view.env-sl_ice,.sl-shop-preview.env-sl_ice{background:#123c61 url("/art/sl_ice.svg") center/cover}
.royal-ui.game-view.env-sl_ice .dice-area{background:linear-gradient(130deg,#88d0d8,#123c61);}
.royal-ui.game-view.env-sl_temple,.sl-shop-preview.env-sl_temple{background:#172f30 url("/art/sl_temple.svg") center/cover}
.royal-ui.game-view.env-sl_temple .dice-area{background:linear-gradient(130deg,#52776d,#172f30);}

/* Desktop uses the whole browser stage; the compact app frame remains mobile-only. */
@media (min-width:701px){
  .royal-ui{width:100%;max-width:none;min-height:100dvh;margin:0;box-shadow:none}
  .royal-ui:not(.game-view) .main{width:100%;max-width:1440px;margin:0 auto;padding:0 34px 112px}
  .royal-ui .topbar{margin:0 -34px 20px;padding-inline:34px;border-radius:0;min-height:108px}
  .royal-ui .identity strong{font-size:16px}.royal-ui .identity small{font-size:12px}
  .royal-ui .wallet>div{min-width:92px;font-size:14px;padding:8px 12px}
  .royal-ui .sidebar{width:100%;max-width:none;border-radius:22px 22px 0 0}
  .royal-ui .sidebar .nav{max-width:1040px;margin:0 auto}
  .royal-ui .game-hub{min-height:calc(100dvh - 240px);gap:18px}
  .royal-ui .hub-heading,.royal-ui .hub-shortcuts{width:min(100%,1040px);margin-inline:auto}
  .royal-ui .hub-shortcuts button{min-height:76px;font-size:14px}
  .royal-ui .lobby-stage{width:100%;margin:0;gap:12px}
  .royal-ui .lobby-title{font-size:20px}
  .royal-ui .lobby-carousel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%;padding:12px 0 24px;overflow:visible;scroll-snap-type:none}
  .royal-ui .lobby-card{width:100%;height:310px;min-height:310px;padding:14px 14px 20px}
  .royal-ui .tile-illustration{width:min(100%,225px);height:175px;margin:0 auto -5px}
  .royal-ui .lobby-card strong{font-size:27px}
  .royal-ui .league-lobby-button,.royal-ui .lobby-collection{width:min(100%,760px);margin-inline:auto;min-height:66px}
  .royal-ui.game-view:not(.bg-landscape){width:100%;max-width:none;margin:0}
  .royal-ui.game-view:not(.bg-landscape) .main{width:100%;max-width:none}
  .royal-ui.game-view:not(.bg-landscape) .game-top,
  .royal-ui.game-view:not(.bg-landscape) .game-layout{width:min(100%,1100px);margin-inline:auto}
  .royal-ui.game-view:not(.bg-landscape) .players{width:min(100%,780px);margin-inline:auto}
  .royal-ui.game-view:not(.bg-landscape) .game-main{width:min(620px,calc(100dvh - 220px),100%);margin-inline:auto}
  .royal-ui.game-view:not(.bg-landscape) .dice-area{width:min(100%,820px);margin-inline:auto}
}

@media (min-width:701px) and (max-width:1050px){
  .royal-ui .lobby-carousel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .royal-ui .lobby-card{height:270px;min-height:270px}
  .royal-ui .tile-illustration{height:145px}
}

/* 0.5 premium art direction: original Persian materials, layered light and depth. */
.royal-ui{
  background-image:linear-gradient(180deg,#020b20aa,#071a3d66),url('/art/premium/lobby-palace-v2.png');
  background-position:center;background-size:cover;background-attachment:fixed;
}
.royal-ui:not(.game-view)::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 26%,#1b72ae26,transparent 36%),linear-gradient(90deg,#0007,transparent 18% 82%,#0007)}
.royal-ui:not(.game-view) .main{position:relative;z-index:1}
.royal-ui:not(.game-view) .sidebar{position:fixed;top:auto;bottom:0;z-index:30}
.royal-ui .topbar{background:linear-gradient(180deg,#194d9ee8,#071d51f2);border-bottom-color:#d4b56e;box-shadow:inset 0 -1px #ffeaa555,0 7px 0 #020b25aa,0 16px 30px #0007;backdrop-filter:blur(14px) saturate(1.2)}
.royal-ui .identity,.royal-ui .wallet>div{background:linear-gradient(155deg,#163e72e8,#071a3ee8);border:1px solid #b99b5b88;box-shadow:inset 0 1px #ffffff33,0 4px 12px #0005}
.royal-ui .hub-shortcuts button,.royal-ui .lobby-card,.royal-ui .league-lobby-button,.royal-ui .lobby-collection{backdrop-filter:blur(10px) saturate(1.15)}
.royal-ui .lobby-card{border-color:#ffe4a2;box-shadow:inset 0 2px #fff9,inset 0 -12px 22px #00152a55,0 7px 0 #5b3b18,0 15px 35px #0009}
.royal-ui .lobby-card strong{text-shadow:0 3px 1px #071124,0 0 16px #fff3}
.royal-ui .sidebar{background:linear-gradient(180deg,#174a8ef2,#071a42fa);border-top-color:#d8b969;box-shadow:inset 0 1px #fff4,0 -10px 30px #0009}
.royal-ui .nav button.active{background:linear-gradient(180deg,#4bcaf5,#087fc5 58%,#075091);border-color:#ffe4a0;box-shadow:inset 0 2px #fff9,0 5px 0 #3c2c18,0 8px 18px #0008}

.royal-ui.game-view{background-attachment:fixed;background-position:center;background-size:cover}
.royal-ui.game-view.ludo-royal{background-image:linear-gradient(#01131fcc,#01131f9a),url('/art/premium/ludo-khatam-table-v2.png')}
.royal-ui.game-view.env-sl_jungle{background-image:linear-gradient(#061c1baa,#061c1b72),url('/art/premium/snakes-garden-v2.png');background-position:center;background-size:cover}
.royal-ui.game-view.bg-landscape{background-image:linear-gradient(90deg,#020713b8,#08132350 20% 80%,#020713b8),url('/art/premium/backgammon-room-v2.png');background-position:center;background-size:cover}
.royal-ui.game-view .game-top{background:linear-gradient(135deg,#071a36dc,#123b63d9);border:1px solid #c5a76588;border-radius:16px;box-shadow:inset 0 1px #fff3,0 7px 22px #0007;backdrop-filter:blur(10px)}
.royal-ui.game-view .player{background:linear-gradient(145deg,#173d64eb,#071a34ed)!important;border:1px solid #bea26188!important;box-shadow:inset 0 1px #fff3,0 5px 14px #0007!important}
.royal-ui.game-view .player.active{border-color:#ffe291!important;box-shadow:inset 0 1px #fff6,0 0 0 2px #ffe29144,0 0 24px #ffc9496b,0 6px 18px #0009!important}
.royal-ui.game-view .player.active::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#fff8 44%,transparent 64%);background-size:220% 100%;animation:premium-turn-glint 2.4s linear infinite;mix-blend-mode:screen}
.royal-ui.game-view.bg-landscape .player.active::after{display:none}
.royal-ui.game-view.bg-landscape .bg-players .player.active{border:2px solid #ffe091!important;outline:2px solid #e8a72f55;outline-offset:2px;box-shadow:inset 0 1px #fff7,0 0 0 3px #ffc64922,0 0 18px #ffc649b3,0 6px 18px #000a!important;animation:bg-player-turn 1.8s ease-in-out infinite}
.royal-ui.game-view.bg-landscape .bg-players .player.active .avatar{box-shadow:0 0 0 2px #ffe091,0 0 14px #ffc649aa}
.royal-ui.game-view .player{position:relative;overflow:hidden}
.royal-ui.game-view.ludo-royal .board-frame{padding:clamp(9px,2vw,18px);border:2px solid #dabf7f;background:#092f30 url('/art/premium/ludo-khatam-table-v2.png') center/cover;box-shadow:inset 0 0 0 2px #fff2bb55,inset 0 0 24px #0008,0 10px 0 #3d2515,0 18px 38px #000c}
.royal-ui.game-view.ludo-royal .board{border:1px solid #f4dda0;box-shadow:0 4px 20px #0009}
.royal-ui.game-view.snakes-jungle .board-frame{border-color:#d7b36a;box-shadow:inset 0 0 0 2px #f1d18b55,0 9px 0 #2a2014,0 18px 36px #000c}
.royal-ui.game-view .dice-area{background:linear-gradient(145deg,#173f64eb,#071a34ef)!important;border-color:#bca05f!important;box-shadow:inset 0 1px #fff4,inset 0 -10px 24px #0003,0 7px 20px #0009!important;backdrop-filter:blur(12px)}
.royal-ui.game-view .dice{border:1px solid #fff0c0;box-shadow:inset 2px 3px 3px #fff9,inset -3px -4px 4px #6b4b2b55,0 5px 0 #8d6b3d,0 10px 15px #0008!important}
.royal-ui.game-view.bg-landscape .backgammon-frame{filter:drop-shadow(0 16px 24px #000c)}
.royal-ui.game-view.bg-landscape .bg-board{border-radius:20px;box-shadow:inset 0 0 0 2px #ffe3a344}
.royal-ui.game-view .piece{filter:drop-shadow(0 2px 1px #0008)}
.royal-ui.game-view .piece.legal{animation:premium-piece-ready 1.25s ease-in-out infinite}

@keyframes premium-turn-glint{to{background-position:-220% 0}}
@keyframes premium-piece-ready{50%{filter:drop-shadow(0 2px 1px #0008) drop-shadow(0 0 5px #fff1a8)}}
@keyframes bg-player-turn{50%{box-shadow:inset 0 1px #fff7,0 0 0 4px #ffc64935,0 0 28px #ffc649d0,0 6px 18px #000a}}
@media(prefers-reduced-motion:reduce){.royal-ui.game-view .player.active::after,.royal-ui.game-view .piece.legal,.royal-ui.game-view.bg-landscape .bg-players .player.active{animation:none}}

.arena-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.arena-card{position:relative;min-height:112px;padding:12px 10px;border:2px solid #d5bd7a;border-radius:18px;color:#fff7df;background:linear-gradient(145deg,#244c79,#0d274d);box-shadow:inset 0 1px #fff5,0 6px 0 #071a32,0 10px 18px #0007;text-align:center;overflow:hidden}
.arena-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,#fff5,transparent 42%);pointer-events:none}
.arena-card>*{position:relative;display:block}.arena-card strong{font-size:15px}.arena-card small{min-height:32px;color:#d7e6f6}.arena-card b{color:#ffe086}.arena-card.chosen{border-color:#fff0a5;box-shadow:inset 0 1px #fff8,0 0 0 3px #ffd95b55,0 6px 0 #5b3c17,0 10px 20px #0008}.arena-card.locked{filter:saturate(.35) brightness(.65);opacity:.78}
.arena-garden{background:linear-gradient(145deg,#16765f,#0a3d4d)}.arena-palace{background:linear-gradient(145deg,#7a3c83,#30205d)}.arena-royal{background:linear-gradient(145deg,#8f5625,#311a2c)}
.royal-ui.game-view.arena-garden{--arena-glow:#42dfb0}.royal-ui.game-view.arena-palace{--arena-glow:#db7fff}.royal-ui.game-view.arena-royal{--arena-glow:#ffd25c}
.royal-ui.game-view.arena-garden .game-layout,.royal-ui.game-view.arena-palace .game-layout,.royal-ui.game-view.arena-royal .game-layout{box-shadow:0 0 0 2px color-mix(in srgb,var(--arena-glow) 55%,transparent),0 24px 70px #000b}
@media(max-width:420px){.arena-grid{grid-template-columns:1fr 1fr}.arena-card{min-height:104px;padding:10px 6px}.arena-card strong{font-size:13px}.arena-card small{font-size:10px}}
.daily-reward-card{position:relative;overflow:hidden;text-align:center;padding:8px 12px 16px;border-radius:22px;background:radial-gradient(circle at 50% 20%,#fff4a955,transparent 34%),linear-gradient(160deg,#173f78,#091b3f);border:2px solid #f2d074;box-shadow:inset 0 1px #fff7,0 14px 40px #0009}
.daily-reward-card .reward-icon{margin:16px auto 4px;width:92px;height:92px;display:grid;place-items:center;border-radius:50%;font-size:54px;color:#ffce35;background:radial-gradient(circle at 35% 25%,#fff9a6,#e69016 65%,#85430a);box-shadow:0 0 0 8px #ffd96322,0 0 42px #ffce5377,0 10px 20px #0008;animation:daily-coin 1.1s cubic-bezier(.2,.8,.2,1)}
.daily-reward-card h2{margin:6px 0;color:#ffe39a;font-size:34px}.daily-reward-card p{margin:0;color:#fff}.daily-reward-card small{display:block;margin:8px 0 16px;color:#bcd2f3}.daily-reward-rays{position:absolute;inset:8px;font-size:120px;color:#ffeaa51f;animation:daily-rays 9s linear infinite}
@keyframes daily-coin{0%{transform:translateY(-60px) rotateY(540deg);opacity:0}70%{transform:translateY(5px) rotateY(0)}100%{transform:translateY(0)}}@keyframes daily-rays{to{transform:rotate(360deg)}}

/* Keep portrait game navigation below the iPhone status area and start the
   board immediately after it instead of vertically centering the whole game. */
@media (max-width:700px) and (orientation:portrait){
  .royal-ui.game-view:not(.bg-landscape) .main{
    justify-content:flex-start;
    min-height:100dvh;
    height:auto;
    padding:calc(env(safe-area-inset-top) + 14px) 6px max(10px,env(safe-area-inset-bottom));
    gap:7px;
  }
  .royal-ui.game-view:not(.bg-landscape) .game-top{
    position:relative;
    z-index:45;
    width:100%;
    min-height:44px;
    margin:0;
    padding:3px 5px 3px 12px;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .royal-ui.game-view:not(.bg-landscape) .game-top h2{font-size:13px;line-height:1.25}
  .royal-ui.game-view:not(.bg-landscape) .game-top .icon-btn{
    width:38px;
    height:38px;
    min-height:38px;
    flex:0 0 38px;
  }
  .royal-ui.game-view:not(.bg-landscape) .game-layout{
    margin:0;
    gap:7px;
  }
  .royal-ui.game-view:not(.bg-landscape) .players{gap:7px;padding:0 3px}

  /* The rotated backgammon stage needs a real identity rail on narrow iPhones.
     Keep names as words so Latin usernames do not collapse into a letter column. */
  .royal-ui.game-view.bg-landscape{--rail:118px}
  .royal-ui.game-view.bg-landscape .bg-players{
    width:var(--rail);
    gap:8px;
  }
  .royal-ui.game-view.bg-landscape .bg-players .player{
    padding:8px 7px;
    gap:5px;
  }
  .royal-ui.game-view.bg-landscape .bg-players .avatar{
    width:34px;
    height:34px;
    font-size:22px;
    flex:0 0 34px;
  }
  .royal-ui.game-view.bg-landscape .bg-players .player>div:last-child{
    width:100%;
    min-width:0;
  }
  .royal-ui.game-view.bg-landscape .bg-players .player strong{
    width:100%;
    font-size:10px;
    line-height:1.35;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    text-align:center;
  }
  .royal-ui.game-view.bg-landscape .bg-players .player small{
    font-size:8px;
    line-height:1.35;
    margin-top:3px;
    width:100%;
    white-space:nowrap;
    overflow:visible;
  }
  .royal-ui.game-view.bg-landscape .bg-players .checker-label{
    display:flex;
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin:2px 0 0;
    font-size:9px;
    line-height:1.3;
    white-space:nowrap;
    overflow:visible;
  }
  .royal-ui.game-view.bg-landscape .bg-players .checker-dot{
    width:12px;
    height:12px;
    flex:0 0 12px;
  }
  .royal-ui.game-view.bg-landscape .bg-turn-badge{
    font-size:9px;
    line-height:1.25;
    margin-top:4px;
    padding:3px;
  }
}

@media (min-width:701px){
  .royal-ui:not(.game-view) .main{background:linear-gradient(90deg,#020b1dbb,transparent 18% 82%,#020b1dbb)}
  .royal-ui.game-view:not(.bg-landscape) .game-layout{padding:18px;border-radius:28px;background:linear-gradient(145deg,#07182ec7,#0b2b3ec2);border:1px solid #d4b66e66;box-shadow:0 24px 70px #000a;backdrop-filter:blur(12px)}
}

/* Backgammon rotates its complete stage in portrait browsers. Keep the exit
   control outside that transform so the iPhone safe area never hides it. */
.royal-ui.game-view.bg-landscape .game-top .icon-btn{display:none}
.bg-floating-back{
  position:fixed;
  z-index:120;
  top:max(12px,calc(env(safe-area-inset-top) + 8px));
  left:max(12px,calc(env(safe-area-inset-left) + 8px));
  width:46px;
  height:46px;
  min-height:46px;
  display:grid;
  place-items:center;
  padding:10px;
  border:2px solid #ffe39b;
  border-radius:50%;
  color:#fff7d9;
  background:linear-gradient(145deg,#275c9a,#0a244d);
  box-shadow:inset 0 1px #fff7,0 4px 0 #06142d,0 8px 20px #0009;
}
.bg-floating-back svg{width:100%;height:100%}
.bg-floating-back:active{transform:translateY(3px);box-shadow:inset 0 1px #fff7,0 1px 0 #06142d,0 4px 10px #0008}

/* Final mobile readability and game-state polish. */
.royal-ui .identity{min-width:0;flex:1 1 auto}
.royal-ui .identity>div:last-child{min-width:0;overflow:visible}
.royal-ui .identity strong,.royal-ui .identity small{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}
.royal-ui .profile-banner{background:#fff0ce;color:#203f60;border-color:#a87434}
.royal-ui .profile-banner h3{color:#173d67}
.royal-ui .profile-banner p,.royal-ui .profile-banner small,.royal-ui .profile-id{color:#294966!important}
.royal-ui .profile-stats{background:#f8e6bf;border:1px solid #c79b55}
.royal-ui .profile-stats span{color:#173f68}
.royal-ui .profile-stats strong{color:#8b3218}
.royal-ui .cosmetic-price{background:#fff1bd;color:#482900!important;border-color:#cc8e22;box-shadow:inset 0 1px #fff}
.royal-ui.game-view.snakes-jungle .dice-area.turn-locked{filter:saturate(.55);opacity:.72}
.royal-ui.game-view.snakes-jungle .dice-area.turn-locked .dice,
.royal-ui.game-view.snakes-jungle .dice-area.turn-locked .primary{opacity:.35;filter:grayscale(.7) brightness(.55);box-shadow:none!important}
.royal-ui.game-view.snakes-jungle .dice-area.turn-ready .dice{opacity:1;filter:none}
@media(max-width:700px){
  .royal-ui.game-view.snakes-jungle .game-layout{gap:4px}
  .royal-ui.game-view.snakes-jungle .game-main{width:100%;max-width:none}
  .royal-ui.game-view.snakes-jungle .board-frame{width:min(100%,calc(100dvh - 265px));margin-inline:auto;padding:4px}
  .royal-ui.game-view.snakes-jungle .game-aside{gap:5px}
}

/* v72: illustrated book-style online arena selector */
.arena-grid{display:none!important}
.arena-book{position:relative;margin:10px -4px 18px;padding:13px 11px 10px;border:3px solid #8b5427;border-radius:19px 19px 24px 24px;background:linear-gradient(90deg,#b87839 0 3%,#f7e4b8 3% 49%,#b07335 49% 51%,#f4dfae 51% 97%,#9a5d2c 97%);box-shadow:inset 0 0 0 2px #ffe7ac,0 8px 0 #4b2b1a,0 17px 30px #0008;color:#4c2e1d;overflow:hidden}
.arena-book::before,.arena-book::after{content:"";position:absolute;top:0;bottom:0;width:18px;opacity:.42;background:repeating-linear-gradient(90deg,#623716 0 2px,transparent 2px 5px)}.arena-book::before{left:0}.arena-book::after{right:0}.arena-book-title{position:relative;z-index:2;text-align:center;margin:0 18px 9px;border-bottom:1px solid #9f713f;padding-bottom:7px}.arena-book-title span{display:block;font-size:18px;font-weight:950;color:#4c2815}.arena-book-title small{font-size:10px;color:#765334}
.arena-book-pages{position:relative;z-index:2;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 9px 12px;scrollbar-width:none}.arena-book-pages::-webkit-scrollbar{display:none}.arena-book-spine{position:sticky;right:50%;flex:0 0 2px;background:linear-gradient(#76451f,#d5a361,#76451f);box-shadow:0 0 7px #6a3a1f;z-index:4}
.arena-book .arena-card{position:relative;flex:0 0 86%;scroll-snap-align:center;min-height:218px;padding:0;border:2px solid #d5bd7a;border-radius:16px;color:#fff7df;background:#10294d;box-shadow:inset 0 1px #fff5,0 5px 0 #4e2c19,0 9px 16px #0006;text-align:center;overflow:hidden}.arena-book .arena-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#fff0 20%,#fff5 42%,#fff0 58%);transform:translateX(-130%)}.arena-book .arena-card.chosen::after{animation:arena-shine 2.8s ease-in-out infinite}.arena-preview{position:relative!important;display:block!important;height:126px;overflow:hidden;background:linear-gradient(#4ea1d7,#c8eafd 48%,#356b44 49%,#143a26)}.arena-preview::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:repeating-linear-gradient(90deg,#193c31 0 12px,#2e7050 12px 24px);clip-path:polygon(0 100%,12% 36%,23% 100%,38% 30%,52% 100%,67% 28%,82% 100%,93% 42%,100% 100%);opacity:.8}.arena-palace-shape{position:absolute!important;z-index:2;left:18%;right:18%;bottom:17px;height:52px;background:linear-gradient(#efd68f,#9d6336);clip-path:polygon(0 100%,0 42%,13% 42%,13% 25%,27% 25%,27% 0,38% 20%,50% 0,62% 20%,73% 0,73% 25%,87% 25%,87% 42%,100% 42%,100% 100%);filter:drop-shadow(0 5px 4px #0008)}.arena-board-mini{position:absolute!important;z-index:3;left:50%;bottom:4px;width:86px;height:38px;transform:translateX(-50%) perspective(90px) rotateX(48deg);border:3px solid #d7b56c;background:conic-gradient(from 90deg,#a62c39 0 25%,#e7cf85 0 50%,#238a6c 0 75%,#d4ae2f 0);box-shadow:0 5px 7px #0009}.arena-lights{position:absolute!important;z-index:3;inset:5px;background:radial-gradient(circle at 20% 15%,#fff 0 1px,#ffe58d 2px,transparent 5px),radial-gradient(circle at 80% 20%,#fff 0 1px,#ffe58d 2px,transparent 5px),radial-gradient(circle at 50% 9%,#fff 0 1px,#ffe58d 2px,transparent 6px)}
.arena-copy{position:relative!important;display:grid!important;grid-template-columns:36px 1fr auto;align-items:center;gap:1px 6px;padding:9px 10px 11px;background:linear-gradient(145deg,#244c79,#0d274d)}.arena-copy .arena-crown{grid-row:1/4;font-size:24px}.arena-copy strong{text-align:right;font-size:15px}.arena-copy small{grid-column:2/4;text-align:right;min-height:18px;color:#d7e6f6;font-size:10px}.arena-copy b{grid-column:3;grid-row:1;color:#ffe086;font-size:11px}.arena-requirement{grid-column:2/4;text-align:right;font-size:9px;color:#b9d0ee}.arena-page-number{position:absolute!important;z-index:7;top:6px;right:7px;width:25px;height:25px;border-radius:50%;display:grid!important;place-items:center;background:#f6dfaa;color:#4d2e1b;font-weight:900;box-shadow:0 2px 0 #6a3b20}.arena-book .arena-card.chosen{border-color:#fff0a5;box-shadow:inset 0 1px #fff8,0 0 0 3px #ffd95b55,0 6px 0 #5b3c17,0 12px 22px #0008;transform:translateY(-2px)}.arena-book .arena-card.locked{filter:saturate(.38) brightness(.64);opacity:.82}.arena-card.locked .arena-preview::before{content:"";position:absolute;z-index:8;inset:0;background:repeating-linear-gradient(135deg,#09152a66 0 8px,#06102599 8px 16px)}
.arena-garden .arena-preview{background:linear-gradient(#37a6a1,#b9f1dc 47%,#3a9b57 48%,#123d2c)}.arena-palace .arena-preview{background:linear-gradient(#5c3d96,#d990d4 45%,#4c286d 46%,#211736)}.arena-royal .arena-preview{background:linear-gradient(#172250,#b05756 45%,#6e3824 46%,#28150f)}.arena-palace .arena-palace-shape{background:linear-gradient(#edd4ff,#74448a)}.arena-royal .arena-palace-shape{background:linear-gradient(#ffe7a0,#a95c22)}.arena-book-footer{position:relative;z-index:2;display:flex;justify-content:space-around;margin:0 18px;padding-top:7px;border-top:1px solid #9f713f;font-size:10px;font-weight:850;color:#684426}@keyframes arena-shine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.daily-reward-rays{pointer-events:none!important}.daily-reward-card>*:not(.daily-reward-rays){position:relative;z-index:2}.daily-accept{position:relative!important;z-index:5!important;min-width:150px;min-height:48px}
@media(max-width:420px){.arena-book .arena-card{flex-basis:91%;min-height:204px}.arena-preview{height:116px}.arena-book{margin-inline:-8px;padding-inline:7px}.arena-copy strong{font-size:13px}}

/* v73: real in-game board previews; remove the faux book spine */
.arena-book-spine{display:none!important}.arena-book{background:linear-gradient(90deg,#b87839 0 3%,#f7e4b8 3% 97%,#9a5d2c 97%)}
.arena-game-shot{display:grid!important;place-items:center;height:156px;background:radial-gradient(circle at 50% 30%,#79c5e9,#24557b 48%,#163329 49%,#091b18)!important}.arena-environment{position:absolute!important;inset:0;background:linear-gradient(#0000 58%,#06140caa),radial-gradient(circle at 18% 22%,#fff8b8 0 2px,transparent 5px),radial-gradient(circle at 82% 18%,#fff8b8 0 2px,transparent 5px)}.arena-real-board{position:relative!important;z-index:3;display:grid!important;place-items:center;width:118px;height:118px;padding:4px;border:3px solid #efd28c;border-radius:10px;background:#172a32;box-shadow:0 9px 16px #000b,0 0 0 3px #52351d}.arena-real-board>svg{display:block;width:100%;height:100%;max-width:none;max-height:none}.arena-game-shot.game-backgammon .arena-real-board{width:178px;height:116px}.arena-game-shot.game-snakes .arena-real-board{width:122px;height:122px}.arena-garden .arena-game-shot{background:radial-gradient(circle at 50% 20%,#c6ffe7,#3f9875 52%,#133d2b)!important}.arena-palace .arena-game-shot{background:radial-gradient(circle at 50% 22%,#f0b9ff,#693b91 48%,#26193e)!important}.arena-royal .arena-game-shot{background:radial-gradient(circle at 50% 20%,#ffd98c,#9c4d3b 45%,#241225)!important}.arena-card.locked .arena-game-shot::before{content:"";position:absolute;z-index:8;inset:0;background:repeating-linear-gradient(135deg,#09152a55 0 8px,#06102588 8px 16px)}
@media(max-width:420px){.arena-game-shot{height:146px}.arena-book .arena-card{min-height:234px}}