/* Desktop (≥ 900 px, d1/d2) and the landscape table (p07c/p07d).
   Desktop frame: #app becomes a grid — the bottom tab bar (#nav) turns into a side rail on the start side (brand + glossy
   tab icons), the desktop top bar (#dtop: profile chip, balances, language, friends/notifications/messages, settings)
   spans the content column. Full-screen routes (table, login…) keep the plain flex column. */
@media (min-width:900px){
  #app{max-width:none;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"nav top" "nav res" "nav view";padding:var(--sat) var(--sar) var(--sab) var(--sal)}
  #app.full{display:flex}
  #dtop{grid-area:top}#resume{grid-area:res}#view{grid-area:view}#nav{grid-area:nav}
  .dtop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 32px;flex:none;position:relative;z-index:4;
    background:linear-gradient(180deg,rgba(28,28,33,.94),rgba(10,10,12,.9));border-bottom:1px solid rgba(242,193,78,.14);box-shadow:0 10px 24px rgba(0,0,0,.4)}
  .dtop::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(242,193,78,0),rgba(242,193,78,.6),rgba(242,193,78,0))}
  .dtop:empty,#app.full .dtop{display:none}
  .dtop-l{gap:10px;min-width:0}
  .dtop .prof{flex:none;width:250px;height:54px}
  /* side rail */
  .nav{flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;padding:14px 10px;gap:4px;overflow-y:auto;scrollbar-width:none;
    border-top:0;border-inline-end:1px solid rgba(242,193,78,.16);background:linear-gradient(180deg,#17171B 0%,#0B0B0D 100%);box-shadow:8px 0 30px rgba(0,0,0,.45)}
  [dir=rtl] .nav{box-shadow:-8px 0 30px rgba(0,0,0,.45)}
  .nav::before{left:auto;right:-1px;inset-inline-end:-1px;top:15%;bottom:15%;width:1px;height:auto;background:linear-gradient(180deg,rgba(242,193,78,0),rgba(242,193,78,.6),rgba(242,193,78,0))}
  .rail-logo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0 14px;margin-bottom:6px;border-bottom:1px solid #1E1E23;order:-1}
  .rail-logo b{font-size:15px}
  .nt{flex:none;height:auto;padding:10px 4px 9px;border-radius:16px;gap:6px;font-size:12px;justify-content:center}
  .nt:hover{background:rgba(255,255,255,.03)}
  .nt:hover .art{filter:grayscale(.4) brightness(.85)}
  .nt.on{background:linear-gradient(180deg,rgba(242,193,78,.16),rgba(242,193,78,.03));box-shadow:inset 0 0 0 1px rgba(242,193,78,.3),0 0 18px rgba(242,193,78,.08)}
  .nt.on .na,.nt.on:active .na{transform:scale(1.1)}
  .nt.on::before{bottom:auto;top:2px;width:64px;height:52px}
  .nt.on::after{bottom:auto;top:50%;left:auto;inset-inline-start:-9px;margin:-14px 0 0;width:3px;height:28px;border-radius:0 3px 3px 0}
  [dir=rtl] .nt.on::after{border-radius:3px 0 0 3px}
  .nt-home .na{width:44px;height:38px;margin-top:0}
  .nt-home .na::before{display:none}
  .nt-home .art{width:38px;height:38px}
  .nt-home.on .na{transform:scale(1.1)}
  .nt-home{order:0}.nt-games{order:1}.nt-tournaments{order:2}.nt-challenges{order:3}.nt-clubs{order:4}.nt-store{order:5}
  .scr{width:100%;max-width:880px;margin:0 auto}
  #app.wide .scr{max-width:1440px}
  .resume{max-width:880px;margin:10px auto 0;width:calc(100% - 28px)}
  .hdr{position:static;background:none;border:0;box-shadow:none;padding:22px 16px 8px;backdrop-filter:none}
  .hdr h2{font-size:24px}
  .bdy{padding:14px 16px 32px}
  .md{max-width:520px;width:100%;align-self:center}
  .center.md{width:min(300px,62%)}
  .md.sheet{max-width:560px}
  #layer>.ov{max-width:none}
  /* home: shortcuts + banners on top, the game card beside «ألعابي», challenges and free coins; friends on the end column */
  #view .home{display:grid;padding:22px 32px 32px;gap:18px 22px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 300px;align-content:start;
    grid-template-areas:"sc sc fr" "ban ban fr" "fav fav fr" "game chal fr" "game club fr" "game free fr" "game . fr"}
  .home>.h-sc{grid-area:sc;margin:0}.home>.pbn{grid-area:ban}.home>.h-fav{grid-area:fav}.home>.h-game{grid-area:game;align-self:start}
  .home>.h-chal-w{grid-area:chal}.home>.club-home{grid-area:club;align-self:start}.home>.h-free{grid-area:free;align-self:start}.h-friends{grid-area:fr;align-self:start;gap:2px;min-height:420px}
  .home .sc-track{padding:6px 0 2px;gap:10px}
  .home .sc{flex-basis:84px}
  .favs{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .home .favs .gm{padding:12px 8px 11px;gap:9px;font-size:13px}
  .home .favs .gi{max-width:64px}
  .hgc-hero{padding:22px}
  .hgc-name h2{font-size:30px}
  .hgc .hgc-art .gi{width:96px!important;height:96px!important}
  .hgc-body{padding:18px 22px 22px;gap:14px}
  .hgc .jn-tours{margin:0 -22px;padding:4px 22px 8px}
  .home .mt{height:120px}
  .gfav{max-width:560px}
  .st-ofs{margin:0;padding:8px 0;overflow:visible}.st-of{flex:1 1 0}
  .all-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* table (d2) */
  .tbar{padding:12px 40px}
  .tbody{padding:16px 40px 20px;gap:30px;max-width:1440px;width:100%;margin:0 auto}
  .tside{display:flex;flex-direction:column;gap:14px;width:330px;flex:none}
  .tside .last .pc{width:56px;height:80px;font-size:18px}
  .tfoot [data-a=emoji],.tfoot [data-a=gift]{display:none}
  .tfoot .turnchip{display:inline-flex}
  .felt{margin:48px 70px 0;max-height:520px;border-radius:999px}
  .fan{margin-top:52px}
}
@media (min-width:900px) and (max-width:1199px){
  #view .home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sc sc" "ban ban" "fav fav" "game chal" "game club" "game free" "game ."}
  .h-friends{display:none!important}
  .dtop .prof{width:210px}
}

/* landscape table: class "land" on #app (setting orientation = landscape, or auto on a landscape phone) */
#app.land{max-width:none}
#app.rot{position:fixed;top:0;left:100vw;width:100vh;height:100vw;transform-origin:0 0;transform:rotate(90deg);margin:0;padding:0}
#app.land .scr-table .tbar{position:absolute;top:0;left:0;right:0;border:0;background:none;padding:10px 16px;z-index:6;pointer-events:none}
#app.land .scr-table .tbar>*{pointer-events:auto}
#app.land .scr-table .tbar .tt{display:none}
#app.land .scr-table .hud{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:0;gap:10px;z-index:7;flex-wrap:nowrap}
#app.land .felt-wrap{padding:88px 170px 108px}
#app.land .felt{margin:0;max-height:none;min-height:140px;border-radius:999px}
#app.land .felt:after{width:90px;height:90px;margin:-45px 0 0 -45px}
[dir=ltr] #app.land .seat.p0{right:auto;left:-150px}
#app.land .seat.p2{top:-34px}#app.land .seat.p1{right:-40px;top:30%}#app.land .seat.p3{left:-40px;top:30%}#app.land .seat.p0{bottom:-74px;left:auto;right:-150px}
#app.land .fan-wrap{position:absolute;bottom:2px;left:0;right:0;transform:scale(.78);transform-origin:50% 100%;z-index:5;pointer-events:none}
#app.land .fan-wrap .fan{pointer-events:auto;margin-top:0}
#app.land .tfoot{position:absolute;bottom:10px;inset-inline-end:16px;flex-direction:column;align-items:stretch;gap:8px;z-index:6;padding:0}
#app.land .tfoot .row{flex-direction:column;align-items:stretch}
#app.land .tfoot .turnchip{display:inline-flex;justify-content:center}
/* narrow landscape ludo: the board's corner seats fill the sides, so the chat buttons go to the top bar */
@media (max-width:760px){#app.land .scr-table:has(.ludo-wrap) .tfoot{top:10px;bottom:auto;inset-inline-end:68px;flex-direction:row;align-items:center}#app.land .scr-table:has(.ludo-wrap) .tfoot .row{flex-direction:row}}
#app.land .board-wrap{padding-top:56px}
#app.land .scr-table .ov{padding:14px 20%}