/* responsive.css — tablet + desktop layouts of the real client (docs/RESPONSIVE.md).
 * The phone (body.lay-phone, 390×844 stage) is NOT touched by this file: every rule below is either scoped to
 * body.lay-tab / body.lay-desk / body:not(.lay-phone), or replaces a hard-coded 390 / 844 / 771 by the stage variables
 * set by core.js fit() (--W, --H, --navY), which keep those exact values on the phone.
 *   lay-tab  : stage W 660-820 × H ≈ 900, bottom nav kept, wider grids, 2 columns where it helps
 *   lay-desk : stage H 820 × W window (≤ 1680), persistent side navigation (--navw), dashboard, big type, hover, keyboard */

/* ---------- stage geometry (all layouts) ---------- */
#coco { height: var(--H, 844px); }
.cdk { width: var(--W, 390px); height: var(--H, 844px); }
.cclip, body.nonav:not(.immersive) .cclip { width: var(--W, 390px); height: var(--navY, 771px); }
.nb-prof, .prof-st { display: none; }

/* ---------- phone held in landscape: « tourne ton téléphone » ---------- */
#rotate { display: none; }
body.lay-rotate:not(.rotate-ok) #rotate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(60% 80% at 50% 40%, #2b2552, #07080f 75%); color: #fff; font-family: var(--ui); }
.ro-box { display: grid; grid-template-columns: auto auto; grid-template-areas: "face t" "face d" "ph go"; align-items: center; gap: 4px 22px; max-width: 640px; }
.ro-face { grid-area: face; width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.5); background-color: #2a2f55; background-repeat: no-repeat; }
.ro-t { grid-area: t; font: 400 30px/1.05 var(--pop); color: var(--y); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; align-self: end; }
.ro-d { grid-area: d; margin: 0; font: 600 20px/1.1 var(--ui); text-transform: uppercase; color: #e6e9f7; align-self: start; }
.ro-ph { grid-area: ph; justify-self: center; position: relative; width: 34px; height: 56px; border-radius: 8px; border: 4px solid #fff; animation: roturn 2.2s ease-in-out infinite; }
.ro-ph i { position: absolute; left: 50%; bottom: 3px; width: 8px; height: 3px; margin-left: -4px; border-radius: 2px; background: #fff; }
@keyframes roturn { 0%, 25% { rotate: -90deg; } 55%, 100% { rotate: 0deg; } }
.ro-go { grid-area: go; justify-self: start; margin-top: 10px; font-size: 17px; }

/* ---------- hover + keyboard focus (mouse / trackpad) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn, .pill, .pk, .dc, .alb-race, .ztile, .fn, .slot2, .dli .card, .adv, .back, .chip[data-rates], .hm-gift, .ds-bst, .alb-pg, .tb-me, .tb-cur, .of { transition: translate .14s ease-out, filter .14s, box-shadow .14s; }
  .btn:not([disabled]):hover, .back:hover, .alb-pg:not(:disabled):hover, .tb-me:hover { filter: brightness(1.1); translate: 0 -2px; }
  .pill:hover, .pk:hover, .ds-bst:hover, .hm-gift:hover, .adv:hover { translate: 0 -4px; filter: brightness(1.12); }
  .slot2:hover .card:not(.silh):not(.unk), .dli:hover .card, .dc:not(.sold):hover .card { translate: 0 -6px; box-shadow: 0 0 0 3px #fff, 0 10px 22px rgba(0,0,0,.55), 0 0 18px rgba(255,210,26,.55); }
  .alb-race:not(.on):hover { border-color: #fff; background: color-mix(in srgb, var(--rc) 28%, rgba(11,13,28,.9)); }
  .ztile:hover, .fn:hover { filter: brightness(1.15); }
  .dli .pm button:hover { filter: brightness(1.2); translate: 0 -2px; }
}
.slot2:focus-visible, .btn:focus-visible, .pill:focus-visible, .nb:focus-visible, .alb-race:focus-visible, .dc:focus-visible { outline: 4px solid var(--y); outline-offset: 4px; }
.slot2:focus { outline: none; }
.slot2:focus-visible { border-radius: 12px; }

/* ---------- modals and sheets: centred, max width (tablet + desktop) ---------- */
body:not(.lay-phone) .mbox { left: 50%; right: auto; top: 50%; width: 480px; translate: -50% -50%; padding: 22px 24px 20px; border-radius: 28px; }
body:not(.lay-phone) .mbox h3 { font-size: 32px; }
body:not(.lay-phone) .mbox p { font-size: 23px; }
body:not(.lay-phone) .mbox .mi { height: 200px; }
body:not(.lay-phone) .mbox .mi img { height: 200px; }
body:not(.lay-phone) .mbox .mi .card { --w: 128px !important; }
body:not(.lay-phone) .mbox .mprice { font-size: 32px; padding: 6px 18px 3px; }
body:not(.lay-phone) .mbox .mrow .btn { height: 58px; font-size: 23px; }
body:not(.lay-phone) .sbox { left: 50%; right: auto; bottom: auto; top: 50%; width: 540px; translate: -50% -50%; padding: 22px 24px 20px; border-radius: 28px; }
body:not(.lay-phone) .sbox h3 { font-size: 30px; margin-bottom: 12px; }
body:not(.lay-phone) .sbox table { font-size: 23px; }
body:not(.lay-phone) .sbox td:last-child { font-size: 22px; }
body:not(.lay-phone) .sbox .gar { font-size: 21px; }
body:not(.lay-phone) .sbox .btn { height: 56px; font-size: 22px; }
/* profile window: a few real stats (server state) under the player — tablet / desktop only, the phone sheet is unchanged */
body:not(.lay-phone) .prof-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.prof-st > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 16px; background: var(--ink); color: #fff; }
.prof-st em { font-size: 26px; color: var(--y); font-style: normal; line-height: 1; }
.prof-st b { font: 400 30px/1 var(--num); letter-spacing: .4px; }
.prof-st b small { font-size: .6em; color: #9aa2c8; }
.prof-st i { font: normal 600 16px/1 var(--ui); color: #b9bfdc; text-transform: uppercase; letter-spacing: .4px; text-align: center; }
body:not(.lay-phone) .prof .pav { width: 64px; height: 64px; }
body:not(.lay-phone) .prof .prt b { font-size: 32px; }
body:not(.lay-phone) .prof .prt i { font-size: 20px; }
body:not(.lay-phone) .prof .ptest small { font-size: 15px; }

/* =====================================================================================================================
 * TABLET (portrait 600-1099 px): stage ≈ 675 × 900, bottom nav, the phone screens widened, 2 columns where it helps
 * ===================================================================================================================== */
body.lay-tab .scr { height: auto !important; bottom: 74px; padding-left: 20px; padding-right: 20px; }
body.lay-tab.nonav .scr { bottom: 0; }
body.lay-tab .scr.full { top: 0; bottom: 0; padding: 0; }
body.lay-tab .board { height: auto; bottom: 74px; }
body.lay-tab.nonav .board { bottom: 0; }
body.lay-tab #topbar { padding: 7px 14px 0; gap: 10px; }
body.lay-tab .tb-cur { flex: 0 0 auto; min-width: 120px; }
body.lay-tab .tb-sp { flex: 1; }
body.lay-tab #nav { justify-content: center; gap: 22px; }
body.lay-tab .nb { width: 92px; font-size: 17px; }
body.lay-tab .tst { font-size: 21px; }

/* home dashboard (tablet): zone card, then hero | rewards, then the shortcuts right of Axo (bottom-left) */
body.lay-tab .scr.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; overflow-y: auto; padding-top: 8px; }
body.lay-tab .dash .ds-side { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: stretch; }
body.lay-tab .dash .ds-side:has(> :only-child) { grid-template-columns: 1fr; }
body.lay-tab .dash .ds-art { height: 130px; }
body.lay-tab .dash .ds-hero .hero-blk { margin-top: 0; height: 256px; }
body.lay-tab .dash .ds-pills { margin-left: 178px; }
body.lay-tab .scr.dash .pills { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 8px 0 0; }

/* zone (tablet): wider path, the fight block below */
body.lay-tab .zn .zw { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
body.lay-tab .zn .zw-r { display: flex; flex-direction: column; gap: 12px; }
body.lay-tab .zn .fpath { height: 214px; }
body.lay-tab .zn .bosslab { left: auto; right: 12px; top: 200px; }
body.lay-tab .zhead .zn b { font-size: 32px; }
body.lay-tab .terr span { font-size: 21px; }
body.lay-tab .zfoe .zf-av { width: 74px; height: 74px; }
body.lay-tab .zf-tx b { font-size: 26px; }
body.lay-tab .zn .fight-row .btn { height: 68px; font-size: 28px; }

/* world board (tablet) */
body.lay-tab .ztile { width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 22px; }
body.lay-tab .ztile .zl { font-size: 19px; height: 27px; line-height: 22px; bottom: -18px; }
body.lay-tab .ztile .zs { font-size: 15px; bottom: -38px; }
body.lay-tab .board .pawn span { scale: 1.15; }

/* album (tablet): 4 × 3 cards per page */
body.lay-tab .alb-scr { --cw: 116px; display: flex; flex-direction: column; overflow: hidden; }
body.lay-tab .alb-top h2 { font-size: 32px; }
body.lay-tab .alb-race { height: 52px; }
body.lay-tab .alb-race b { font-size: 21px; }
body.lay-tab .alb2 { flex: 1; min-height: 0; height: auto; margin-top: 12px; }
body.lay-tab .alb2 .page { width: 100%; height: 100%; }
body.lay-tab .alb2 .page .grid { grid-template-columns: repeat(4, var(--cw)); gap: 14px 20px; padding: 18px 0 0; }
body.lay-tab .slot2 { width: var(--cw); height: calc(var(--cw) * 1.5); }
body.lay-tab .slot2 .card { --w: var(--cw) !important; }
body.lay-tab .alb-nav { margin-top: 12px; }

/* card detail (tablet): bigger card, info right */
body.lay-tab .cdt .dt-card .card { --w: 240px !important; }
body.lay-tab .cdt .dt-info h2 { font-size: 32px !important; }
body.lay-tab .cdt .stat { height: 62px; }
body.lay-tab .cdt .stat b { font-size: 28px; }
body.lay-tab .cdt .txtbox p { font-size: 23px; }
body.lay-tab .cdt .txtbox .cdk-kw { font-size: 19px; }

/* deck (tablet): 5 cards per row, both lists */
body.lay-tab .dk .dlist { grid-template-columns: repeat(5, 1fr); }
body.lay-tab .dk .dli .card { --w: 96px !important; }
body.lay-tab .dk-save { bottom: -14px; }

/* shop (tablet) */
body.lay-tab .shp .dcards { justify-content: space-around; }
body.lay-tab .shp .dc { width: 104px; }
body.lay-tab .shp .dc .card { --w: 104px !important; }
body.lay-tab .shp .dc .pbtn { width: 104px; height: 36px; font-size: 19px; }
body.lay-tab .shp .packs { grid-template-columns: repeat(3, 1fr); }

/* =====================================================================================================================
 * DESKTOP (≥ 1100 px or landscape): stage H 820, side navigation, big type
 * ===================================================================================================================== */
body.lay-desk { --navw: 224px; }
body.lay-desk.immersive { --navw: 0px; }

/* side navigation: the same tabs (they still appear one by one with the unlocks), JCC logo, Profil */
body.lay-desk #nav { left: 0; right: auto; top: 0; bottom: 0; width: var(--navw); height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
  padding: 128px 14px 0; border-top: 0; border-right: 2.5px solid rgba(255,255,255,.9); box-shadow: 4px 0 0 rgba(0,0,0,.5);
  background: radial-gradient(120% 40% at 0% 0%, rgba(255,210,26,.12), transparent 60%), linear-gradient(180deg, #171b38, #07080f 85%); }
body.lay-desk .nav-brand { display: block; position: absolute; left: 12px; right: 12px; top: 10px; height: 108px; }
body.lay-desk .nav-brand .brand { width: 100%; height: 100%; }
body.lay-desk .nav-brand .brand-t { font-size: 30px; -webkit-text-stroke: 4px var(--ink); }
body.lay-desk .nav-brand:hover img { scale: 1.04; rotate: -1.5deg; }
body.lay-desk.nonav #nav { display: flex; }
body.lay-desk.nonav #nav .nb { display: none; }
body.lay-desk .nb { width: auto; height: 58px; flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 0 12px 0 10px; border-radius: 18px;
  font: 600 24px/1 var(--ui); letter-spacing: .8px; color: #b9bfdc; }
body.lay-desk .nb .nl { padding-top: 4px; }
body.lay-desk .nb .nic, body.lay-desk .nb.mid .nic, body.lay-desk .nb.on .nic, body.lay-desk .nb.mid.on .nic { width: 44px; height: 44px; border-radius: 14px; font-size: 25px; transform: none; border: 2.5px solid rgba(255,255,255,.18); box-shadow: none; background: rgba(255,255,255,.06); color: inherit; transition: rotate .2s, scale .2s; }
body.lay-desk .nb.mid .nic { background: linear-gradient(180deg, #ffe45c, #ff9d00); color: var(--ink); border-color: #fff; }
body.lay-desk .nb.on { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.9), 0 4px 0 rgba(0,0,0,.45); }
body.lay-desk .nb.on .nic { background: var(--c, var(--y)); color: var(--ink); border-color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.55); rotate: -5deg; scale: 1.06; }
body.lay-desk .nb:hover { color: #fff; background: rgba(255,255,255,.07); }
body.lay-desk .nb:hover .nic { rotate: -6deg; scale: 1.08; }
body.lay-desk .nb .badge { top: 4px; left: 42px; right: auto; }
body.lay-desk .nb-prof { display: flex; margin-top: 12px; }
body.lay-desk .nb-prof::before { content: ""; position: absolute; left: 8px; right: 8px; top: -9px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.14); }
body.lay-desk .nb.hint-ring { box-shadow: none; }

/* top bar: over the content area (right of the side navigation) */
body.lay-desk #topbar { left: var(--navw); height: 72px; padding: 12px 28px 0; gap: 12px; background: linear-gradient(180deg, rgba(5,6,14,.95) 70%, rgba(5,6,14,0)); }
body.lay-desk .tb-me { height: 50px; padding: 0 16px 0 4px; gap: 9px; }
body.lay-desk .tb-txt b { font-size: 19px; }
body.lay-desk .tb-txt i { font-size: 19px; }
body.lay-desk .tb-xp { width: 96px; height: 7px; margin-top: 3px; }
body.lay-desk .tb-cur { flex: 0 0 auto; min-width: 140px; height: 46px; padding: 0 14px 0 10px; font-size: 25px; gap: 8px; }
body.lay-desk .tb-cur b { font-size: 25px; }
body.lay-desk #sndHost .sfx-toggle { width: 46px; height: 46px; font-size: 18px; }

/* content area */
body.lay-desk .scr { left: var(--navw); right: 0; top: 72px !important; bottom: 0; height: auto !important; padding: 8px 36px 40px !important; }
body.lay-desk.notop .scr:not(.full) { top: 0 !important; padding-top: 24px !important; }
body.lay-desk .scr.full { left: 0; top: 0 !important; bottom: 0; padding: 0 !important; }
body.lay-desk .sec { margin: 16px 2px 10px; }
body.lay-desk .sec h3 { font-size: 28px; }
body.lay-desk .chip { height: 32px; padding: 2px 12px 0; border-radius: 16px; font-size: 21px; }
body.lay-desk .back { width: 54px; height: 54px; font-size: 26px; border-radius: 16px; }
body.lay-desk .btn { min-height: 52px; font-size: 22px; padding: 0 20px; }

/* mascot: dock at the bottom of the side column, détouré actors stand there too (core.js ACT_POS) */
body.lay-desk.nonav:not(.immersive) #coco { transform: none; }
body.lay-desk .cdock { left: 18px; bottom: 18px; }
body.lay-desk.immersive .cdock { left: 18px; bottom: 18px; }
body.lay-desk .cbub { padding: 10px 14px 8px 15px; border-radius: 22px; }
body.lay-desk .ctag { font-size: 14px; height: 23px; line-height: 19px; top: -14px; }
body.lay-desk:not(.immersive) #toast { left: calc(50% + var(--navw) / 2); top: 88px; }
body.lay-desk .tst { font-size: 24px; padding: 9px 18px 6px; }

/* ---------- home: first launch (Axo + one big button), centred ---------- */
body:not(.lay-phone) .hm-first .hm-hello { top: 84px; }
body:not(.lay-phone) .hm-first .hm-hello small { font-size: 28px; }
body:not(.lay-phone) .hm-first .hm-hello b { font-size: 60px; margin-top: 8px; }
body:not(.lay-phone) .hm-first .hm-zone { left: 50%; right: auto; width: min(640px, calc(var(--W) - 80px)); translate: -50% 0; top: 210px; height: 300px; border-radius: 30px; }
body:not(.lay-phone) .hm-first .hm-zone .tag { font-size: 19px; line-height: 23px; padding: 4px 12px 0; }
body:not(.lay-phone) .hm-first .hm-zone b { font-size: 42px; bottom: 56px; left: 22px; }
body:not(.lay-phone) .hm-first .hm-zone i { font-size: 23px; bottom: 18px; left: 22px; }
body:not(.lay-phone) .hm-first .hm-fight { left: 50%; right: auto; width: 440px; margin-left: -220px; top: 568px; height: 100px; font-size: 42px; border-radius: 28px; }
body.lay-tab .hm-first .hm-fight { top: 600px; }

/* ---------- home: dashboard ---------- */
body.lay-desk .scr.dash { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(370px, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "adv side" "pills side";
  gap: 22px 26px; align-content: start; overflow: hidden; padding-top: 14px !important; }
.dash .ds-adv { grid-area: adv; position: relative; border-radius: 26px; background: rgba(11,13,28,.94); overflow: hidden; padding-bottom: 16px; }
.dash .ds-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.dash .ds-pills { grid-area: pills; }
.ds-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 17px/1 var(--pop); letter-spacing: 1.2px; color: #b9bfdc; }
.ds-h .sp { flex: 1; }
.ds-art { position: relative; height: 200px; background: #222 center 42% / cover no-repeat; }
.ds-art .hz-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,16,0) 30%, rgba(5,6,16,.92)); }
.ds-art .tag { position: absolute; left: 16px; top: 16px; padding: 4px 12px 0; border-radius: 10px; background: var(--y); color: var(--ink); border: 2.5px solid #fff; font: 400 17px/21px var(--pop); letter-spacing: 1px; }
.ds-art b { position: absolute; left: 18px; right: 18px; bottom: 44px; font: 400 38px/1 var(--pop); }
.ds-art i { position: absolute; left: 18px; right: 18px; bottom: 14px; font: normal 600 21px/1.05 var(--ui); color: #e6e9f7; text-transform: uppercase; letter-spacing: .3px; }
.ds-path { padding: 16px 22px 0; }
.ds-stars { font: 400 22px/1 var(--pop); color: var(--y); letter-spacing: .5px; }
.ds-nodes { display: flex; align-items: center; margin-top: 14px; padding: 0 4px 22px; }
.dsn { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; font: 400 22px/1 var(--num); box-shadow: 0 3px 0 rgba(0,0,0,.6); }
.dsn.done { background: var(--y); color: var(--ink); }
.dsn.cur { background: #fff; color: var(--ink); box-shadow: 0 0 0 5px rgba(255,122,42,.85), 0 3px 0 rgba(0,0,0,.6); animation: dspulse 1.3s ease-in-out infinite; }
.dsn.lock { background: rgba(11,13,28,.9); color: #8b93b8; border-color: rgba(255,255,255,.45); }
.dsn.boss { width: 64px; height: 64px; background: linear-gradient(180deg, #ff5d3a, #9b1205); color: #fff; font-size: 28px; }
.dsn.boss.lock { filter: grayscale(.4) brightness(.8); }
.dsn i { position: absolute; top: 54px; left: 50%; translate: -50% 0; font: normal 400 14px/1 var(--pop); color: var(--y); white-space: nowrap; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: -1px; }
.dsn.boss i { top: 68px; }
@keyframes dspulse { 50% { scale: 1.1; } }
.dsl { flex: 1; min-width: 8px; height: 6px; margin: 0 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.dsl.on { background: var(--y); }
.ds-next { display: flex; align-items: center; gap: 14px; margin: 8px 18px 0; padding: 12px 12px 12px 14px; border-radius: 20px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.14); }
.ds-next .zf-av { width: 66px; height: 66px; }
.ds-nt { flex: 1; min-width: 0; }
.ds-nt small { display: block; font: 400 15px/1 var(--pop); letter-spacing: 1px; color: #ffd6b8; }
.ds-nt b { display: block; margin-top: 4px; font: 400 26px/1.05 var(--pop); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nt i { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: normal 600 20px/1 var(--ui); color: #cfd4ee; text-transform: uppercase; letter-spacing: .3px; }
.ds-go { flex: none; height: 66px; font-size: 24px; padding: 0 24px; border-radius: 18px; }
.ds-go svg { font-size: 26px; }
.dash .ds-hero { position: relative; flex: none; border-radius: 26px; background: radial-gradient(90% 80% at 75% 30%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), rgba(11,13,28,.9); overflow: hidden; padding: 0 12px 0 10px; }
.dash .ds-hero .hero-blk { margin-top: 0; height: 290px; }
body.lay-desk .dash .hero-blk .hn { font-size: 50px; margin-top: 8px; }
body.lay-desk .dash .hero-blk .ht { font-size: 22px; }
body.lay-desk .dash .hero-blk .tag { font-size: 15px; line-height: 20px; }
body.lay-desk .dash .haura span { font-size: 18px; }
body.lay-desk .dash .haura b { font-size: 15px; }
.dash .hm-gift { flex: none; height: 200px; margin: 0; border-radius: 26px; }
.dash .hm-gift img { height: 196px; }
body.lay-desk .dash .hm-gift .tx small { font-size: 16px; }
body.lay-desk .dash .hm-gift .tx b { font-size: 30px; }
body.lay-desk .dash .hm-gift .tx i { font-size: 20px; }
body.lay-desk .dash .hm-gift .play { width: 66px; height: 66px; font-size: 30px; }
.ds-rew { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; padding: 16px 18px; border-radius: 26px; background: rgba(11,13,28,.92); }
.ds-lv { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ds-lvb { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ffe45c, #ffb300); color: var(--ink); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.6); font: 400 30px/1 var(--num); }
.ds-lvt { flex: 1; min-width: 0; }
.ds-lvt b { display: block; font: 400 22px/1 var(--pop); }
.ds-bar { display: block; height: 14px; margin-top: 7px; border-radius: 7px; border: 2.5px solid #fff; background: rgba(255,255,255,.12); overflow: hidden; }
.ds-bar span { display: block; height: 100%; background: linear-gradient(90deg, #5fd2ff, #33d6ff); }
.ds-lvt i { display: block; margin-top: 5px; font: normal 600 18px/1 var(--ui); color: #b9bfdc; letter-spacing: .4px; }
.ds-cur { display: flex; gap: 10px; margin-top: 14px; }
.ds-cur > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 16px; background: var(--ink); border: 2px solid rgba(255,255,255,.3); font-size: 26px; }
.ds-cur b { font: 400 26px/1 var(--num); letter-spacing: .4px; }
.ds-cur small { font: 600 18px/1 var(--ui); color: #9aa2c8; }
.ds-cur .st svg { color: var(--y); }
.ds-bst { display: flex; align-items: center; gap: 12px; margin-top: 12px; height: 70px; padding: 0 16px 0 6px; border-radius: 18px; background: linear-gradient(135deg, #6a22d0, #2b0d55); border: 2.5px solid #fff; box-shadow: var(--sh); }
.ds-bst img { height: 76px; margin-top: -10px; rotate: -8deg; }
.ds-bst span { flex: 1; min-width: 0; }
.ds-bst b { display: block; font: 400 20px/1 var(--pop); }
.ds-bst i { display: block; font: normal 400 18px/1 var(--num); color: var(--y); margin-top: 3px; }
.ds-bst svg { font-size: 24px; }
.ds-none { margin: 14px 2px 0; font: 600 19px/1.1 var(--ui); color: #9aa2c8; text-transform: uppercase; letter-spacing: .3px; }
body:not(.lay-phone) .scr.dash .pills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 12px 0 0; }
body:not(.lay-phone) .scr.dash .pill { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 124px; padding: 0 6px 12px; text-align: center; }
body:not(.lay-phone) .scr.dash .pill .pi { width: 54px; height: 54px; font-size: 29px; margin: 0 0 7px; grid-row: auto; }
body:not(.lay-phone) .scr.dash .pill b { font-size: 21px; }
body:not(.lay-phone) .scr.dash .pill i { font-size: 18px; margin-top: 3px; }

/* ---------- zone: path left, the next fight right ---------- */
body.lay-desk .zn .zw { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; margin-top: 16px; align-items: start; }
body.lay-desk .zn .zw.zw1 { grid-template-columns: minmax(0, 1fr); }
body.lay-desk .zn .zw-l { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 6px; border-radius: 26px; background: rgba(11,13,28,.72); }
body.lay-desk .zn .zw-r { display: flex; flex-direction: column; gap: 16px; }
body.lay-desk .zn .terr { margin-top: 0; }
body.lay-desk .zn .fpath { height: 230px; margin-top: 0; }
body:not(.lay-phone) .zn .fn { width: 50px; height: 50px; margin: -25px 0 0 -25px; font-size: 22px; }
body:not(.lay-phone) .zn .fn.cur { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
body:not(.lay-phone) .zn .fn.boss { width: 76px; height: 76px; margin: -38px 0 0 -38px; font-size: 32px; }
body:not(.lay-phone) .zn .fn .st { top: 50px; font-size: 14px; }
body:not(.lay-phone) .zn .fn.boss .st { top: 76px; }
body:not(.lay-phone) .zn .fdot { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
body.lay-desk .zn .bosslab { left: auto; right: 6px; top: 200px; font-size: 19px; line-height: 22px; padding: 3px 10px 0; }
body.lay-desk .zhead .zn b { font-size: 38px; }
body.lay-desk .zhead .zn i { font-size: 21px; }
body.lay-desk .terr .ti { width: 50px; height: 50px; font-size: 27px; }
body.lay-desk .terr b { font-size: 18px; }
body.lay-desk .terr span { font-size: 23px; }
body.lay-desk .zfoe { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 0; padding: 18px; border-radius: 26px; }
body.lay-desk .zfoe .zf-av { width: 120px; height: 120px; border-width: 4px; }
body.lay-desk .zf-tx small { font-size: 18px; }
body.lay-desk .zf-tx b { font-size: 32px; margin-top: 4px; }
body.lay-desk .zf-tx i { font-size: 20px; margin-top: 4px; }
body.lay-desk .zn .fight-row { margin-top: 0; }
body.lay-desk .zn .fight-row .btn { height: 76px; font-size: 30px; border-radius: 20px; }

/* ---------- world board ---------- */
body.lay-desk .board { left: var(--navw); right: 0; top: 72px; bottom: 0; height: auto; }
body.lay-desk .ztile { width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 28px; border-width: 4px; }
body.lay-desk .ztile .zart, body.lay-desk .ztile .zveil { border-radius: 24px; }
body.lay-desk .ztile .znum { width: 36px; height: 36px; font-size: 19px; line-height: 30px; left: -14px; top: -14px; }
body.lay-desk .ztile .zb { width: 38px; height: 38px; font-size: 21px; right: -14px; top: -14px; }
body.lay-desk .ztile.verrouillee .zb { width: 48px; height: 48px; right: 47px; top: 47px; font-size: 24px; }
body.lay-desk .ztile .zl { bottom: -20px; height: 32px; padding: 3px 12px 0; font-size: 23px; line-height: 24px; border-radius: 10px; }
body.lay-desk .ztile .zs { bottom: -44px; font-size: 18px; }
body.lay-desk .board .pawn span { scale: 1.3; }
body.lay-desk .bttl { left: 22px; top: 18px; font-size: 24px; padding: 8px 14px 3px; }
body.lay-desk .bstars { right: 22px; top: 20px; }
body.lay-desk .rd { stroke-width: 34; }

/* ---------- album: 6 × 2 cards per page, race tabs, big arrows (←/→ pages, ↑/↓ races) ---------- */
body.lay-desk .alb-scr { --cw: min(140px, calc((var(--W) - var(--navw) - 72px - 170px) / 6)); display: flex; flex-direction: column; overflow: hidden; }
body.lay-desk .alb-top h2 { font-size: 40px; }
body.lay-desk .prog { font-size: 26px; padding: 6px 14px 3px; }
body.lay-desk .prog small { font-size: 19px; }
body.lay-desk .alb-races { gap: 14px; margin-top: 14px; }
body.lay-desk .alb-race { flex: 0 1 300px; height: 58px; padding: 0 14px 0 8px; border-radius: 18px; }
body.lay-desk .alb-race .ri { width: 38px; height: 38px; font-size: 21px; }
body.lay-desk .alb-race b { font-size: 24px; }
body.lay-desk .alb-race .n { font-size: 22px; }
body.lay-desk .alb-race .alb-new { font-size: 13px; line-height: 16px; }
body.lay-desk .alb2 { flex: 1; min-height: 0; height: auto; margin-top: 16px; }
body.lay-desk .alb2 .page { width: 100%; height: 100%; border-left-width: 12px; border-radius: 8px 26px 26px 8px; }
body.lay-desk .alb2 .page .grid { grid-template-columns: repeat(6, var(--cw)); gap: 22px 26px; padding: 28px 0 0; justify-content: center; }
body.lay-desk .slot2 { width: var(--cw); height: calc(var(--cw) * 1.5); border-radius: 14px; }
body.lay-desk .slot2 .card { --w: var(--cw) !important; }
body.lay-desk .slot2 .no { font-size: 17px; bottom: 8px; }
body.lay-desk .slot2 .lvl { font-size: 16px; height: 23px; line-height: 17px; bottom: -11px; }
body.lay-desk .slot2 .cnt { font-size: 17px; height: 27px; line-height: 21px; min-width: 32px; }
body.lay-desk .slot2 .newb { font-size: 14px; line-height: 17px; }
body.lay-desk .alb-nav { margin-top: 14px; gap: 18px; }
body.lay-desk .alb-pg { width: 62px; height: 62px; font-size: 27px; }
body.lay-desk .alb-dots .lab { font-size: 22px; }
body.lay-desk .alb-dots .dot { width: 17px; height: 17px; }

/* ---------- card detail: big card left, everything readable right ---------- */
body.lay-desk .cdt { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "head head" "card info" "card txt" "card fins" "card lv" "rel rel"; column-gap: 40px; row-gap: 14px; align-content: start; }
body.lay-desk .cdt .cd-rel { grid-area: rel; max-width: none; margin-top: 6px; }
body.lay-desk .cdt > * { max-width: 760px; }
body.lay-desk .cdt .zhead { grid-area: head; max-width: none; }
body.lay-desk .cdt .dt-top { display: contents; }
body.lay-desk .cdt .dt-card { grid-area: card; align-self: start; margin: 14px 0 0 6px; }
body.lay-desk .cdt .dt-card .card { --w: 300px !important; }
body.lay-desk .cdt .dt-info { grid-area: info; }
body.lay-desk .cdt .dt-info h2 { font-size: 44px !important; margin: 6px 0 10px; }
body.lay-desk .cdt .txtbox { grid-area: txt; margin-top: 0; padding: 14px 18px 12px; border-radius: 20px; }
body.lay-desk .cdt .fins { grid-area: fins; margin-top: 0; }
body.lay-desk .cdt .lvbox { grid-area: lv; margin-top: 0; padding: 12px 16px; }
body.lay-desk .cdt .stats { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
body.lay-desk .cdt .stat { height: 74px; border-radius: 16px; }
body.lay-desk .cdt .stat b { font-size: 34px; }
body.lay-desk .cdt .stat small { font-size: 18px; }
body.lay-desk .cdt .txtbox p { font-size: 26px; }
body.lay-desk .cdt .txtbox .cdk-kw { font-size: 21px; margin-top: 7px; }
body.lay-desk .cdt .txtbox q { font-size: 22px; margin-top: 7px; }
body.lay-desk .cdt .fin { height: 48px; font-size: 20px; border-radius: 14px; }
body.lay-desk .cdt .lvp { width: 44px; height: 44px; font-size: 22px; }
body.lay-desk .cdt .lvtx { font-size: 22px; }
body.lay-desk .cdt .cpbar { height: 16px; }

/* ---------- deck: collection (left, scrolls) + your deck (right column) side by side ---------- */
body.lay-desk .scr.dk { display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "sp head" "filt pw" "pool pw" "pool sd" "pool deck" "pool save";
  column-gap: 30px; overflow: hidden; padding-bottom: 18px !important; }
body.lay-desk .dk .dk-head { grid-area: head; }
body.lay-desk .dk .pw { grid-area: pw; }
body.lay-desk .dk .dk-sd { grid-area: sd; margin-top: 14px; }
body.lay-desk .dk .dk-sp { grid-area: sp; margin-top: 6px; }
body.lay-desk .dk .dlist { margin-top: 0; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
body.lay-desk .dk .dlist:not(.pool) { grid-area: deck; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; padding: 8px 6px 14px; border-radius: 22px; background: rgba(255,255,255,.04); }
body.lay-desk .dk .dlist.pool { grid-area: pool; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 12px; padding: 14px 10px 30px; border-radius: 26px; background: rgba(11,13,28,.6); border: 2px solid rgba(255,255,255,.12); }
body.lay-desk .dk .dlist:not(.pool) .dli .card { --w: 92px !important; }
body.lay-desk .dk .dlist.pool .dli .card { --w: 112px !important; }
body.lay-desk .dk .dli .pm button { width: 46px; height: 38px; font-size: 23px; }
body.lay-desk .dk .dk-save { grid-area: save; position: static; margin: 14px 0 0; padding: 0; background: none; }
body.lay-desk .dk .dk-save .btn { min-width: 300px; height: 64px; font-size: 26px; }
body.lay-desk .dk-head .nm b { font-size: 30px; }
body.lay-desk .dk-head .nm i { font-size: 20px; }
body.lay-desk .dk .pw .l1 { font-size: 20px; }
body.lay-desk .dk .pw .l1 b { font-size: 28px; }
body.lay-desk .dk .tier { height: 40px; font-size: 16px; }
body.lay-desk .dk .tier-tx { font-size: 19px; }
body.lay-desk .dk-empty { font-size: 21px; }

/* ---------- shop: today's offers (big cards) + boosters grid ---------- */
body.lay-desk .scr.shp { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "daily sec" "daily packs"; column-gap: 30px; align-content: start; }
body.lay-desk .shp > .sec:first-child:not(:last-child) { grid-area: sec; }
body.lay-desk .shp .shopd { grid-area: daily; margin-top: 16px; padding: 20px 22px 24px; border-radius: 28px; align-self: start; }
body.lay-desk .shp .shopd + .sec { grid-area: sec; }
body.lay-desk .shp .packs { grid-area: packs; grid-template-columns: 1fr; align-content: start; }
body.lay-desk .shp .shopd .hd b { font-size: 30px; }
body.lay-desk .shp .timer { height: 34px; font-size: 21px; padding: 2px 12px 0; }
body.lay-desk .shp .same { font-size: 20px; margin-top: 8px; }
body.lay-desk .shp .dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); justify-items: center; gap: 26px 16px; margin-top: 22px; }
body.lay-desk .shp .dc { width: 150px; gap: 10px; }
body.lay-desk .shp .dc .card { --w: 150px !important; }
body.lay-desk .shp .dc .pbtn { width: 150px; height: 44px; font-size: 23px; border-radius: 14px; }
body.lay-desk .shp .pk { padding: 0 16px 16px; border-radius: 26px; }
body.lay-desk .shp .pk img { height: 190px; }
body.lay-desk .shp .pk b { font-size: 24px; min-height: 40px; }
body.lay-desk .shp .pk .gar { font-size: 19px; min-height: 30px; }
body.lay-desk .shp .pk .btn { height: 56px; min-height: 56px; font-size: 24px; }
body.lay-desk .shp .pk .btn .price { font-size: 24px; }
body.lay-desk .shp .pk .chip { height: 34px; font-size: 19px; }
body.lay-desk .shp-load { font-size: 24px; }

/* ---------- booster opening: same choreography, centred, bigger cards ---------- */
body:not(.lay-phone) .bst .btitle { top: 30px; font-size: 40px; }
body:not(.lay-phone) .bst .bsub { top: 78px; font-size: 24px; }
body:not(.lay-phone) .bst .close { right: 24px; top: 24px; width: 54px; height: 54px; font-size: 24px; }
body:not(.lay-phone) .brow { top: 120px; gap: 12px; }
body:not(.lay-phone) .brow .slot { width: 70px; height: 105px; }
body:not(.lay-phone) .brow .card { --w: 70px !important; }
body.lay-desk .packbox { top: 420px; width: 300px; height: 450px; margin: -225px 0 0 -150px; }
body.lay-desk .flip { top: 420px; width: 300px; height: 450px; margin: -225px 0 0 -150px; }
body.lay-desk .flip .card { --w: 300px !important; }
body.lay-desk .tapme { top: 664px; font-size: 32px; }
body.lay-desk .btags { top: 662px; }
body.lay-tab .packbox { top: 420px; width: 270px; height: 405px; margin: -202px 0 0 -135px; }
body.lay-tab .flip { top: 420px; width: 270px; height: 405px; margin: -202px 0 0 -135px; }
body.lay-tab .flip .card { --w: 270px !important; }
body.lay-tab .tapme { top: 640px; font-size: 28px; }
body.lay-tab .btags { top: 640px; }
body:not(.lay-phone) .brate { left: 50%; right: auto; width: 540px; margin-left: -270px; top: 708px; padding: 10px 16px 10px; border-radius: 18px; }
body.lay-tab .brate { top: 690px; }
body:not(.lay-phone) .brate h4 { font-size: 16px; }
body:not(.lay-phone) .brate.wl p { font-size: 22px; }
body:not(.lay-phone) .btags .rar { font-size: 32px; padding: 7px 20px 2px; }
body:not(.lay-phone) .btags .newt, body:not(.lay-phone) .btags .fint { font-size: 24px; }
body:not(.lay-phone) .btags .dup { font-size: 24px; }
body:not(.lay-phone) .cback .cbl { font-size: 28px; bottom: 24px; }
body:not(.lay-phone) .bsum { top: 140px; gap: 26px 20px; padding: 0 60px; }
body.lay-desk .bsum .card { --w: 160px !important; }
body.lay-tab .bsum .card { --w: 128px !important; }
body:not(.lay-phone) .bsum .it .tg { font-size: 17px; padding: 4px 10px 1px; }
body:not(.lay-phone) .bact { left: 50%; right: auto; width: 440px; margin-left: -220px; top: 610px; }
body.lay-tab .bact { top: 700px; }
body:not(.lay-phone) .bact .btn { height: 68px; font-size: 28px; }

/* ---------- NOUVEAU ! moment ---------- */
body:not(.lay-phone) .nv-stk { top: 72px; font-size: 76px; }
body:not(.lay-phone) .nv-ico { top: 200px; width: 196px; height: 196px; margin-left: -98px; font-size: 120px; border-radius: 46px; }
body:not(.lay-phone) .nv-t { top: 428px; font-size: 58px; }
body:not(.lay-phone) .nv-d { left: 50%; right: auto; width: min(640px, calc(var(--W) - 60px)); translate: -50% 0; top: 498px; font-size: 28px; }
body:not(.lay-phone) .nv-go { left: 50%; right: auto; width: 400px; margin-left: -200px; top: 610px; height: 80px; font-size: 32px; border-radius: 22px; }

/* ---------- result ---------- */
body:not(.lay-phone) .rs-title { margin-top: 26px; font-size: 76px; }
body:not(.lay-phone) .rs-sub { font-size: 27px; margin-top: 12px; }
body:not(.lay-phone) .rs-stars { gap: 12px; margin-top: 18px; }
body:not(.lay-phone) .rs-star { width: 84px; height: 84px; font-size: 80px; }
body:not(.lay-phone) .rs-star:nth-child(2) { width: 96px; font-size: 92px; }
body:not(.lay-phone) .rs-gains { max-width: 720px; margin: 26px auto 0; padding: 20px 16px 16px; gap: 14px 30px; border-radius: 28px; }
body:not(.lay-phone) .rg-i { width: 68px; height: 68px; font-size: 28px; }
body:not(.lay-phone) .rg-i .ico-coin { font-size: 44px; }
body:not(.lay-phone) .rg b { font-size: 34px; margin-top: 7px; }
body:not(.lay-phone) .rg small { font-size: 19px; max-width: 160px; }
body:not(.lay-phone) .rg.gift img { height: 110px; }
body:not(.lay-phone) .rs-lvup { height: 40px; font-size: 24px; margin-top: 18px; }
body:not(.lay-phone) .rs-act { left: 50%; right: auto; width: 480px; margin-left: -240px; bottom: 110px; gap: 14px; }
body.lay-desk.nonav .rs-act { bottom: 110px; }
body:not(.lay-phone) .rs-act .btn { height: 72px; font-size: 28px; }

/* ---------- combat waiting screen ---------- */
body:not(.lay-phone) .cw-vs { font-size: 64px; }
body:not(.lay-phone) .cw-t { font-size: 28px; }

/* ---------- fixes after the first desktop review ---------- */
body.lay-desk .tb-me { height: 54px; }
body.lay-desk .tb-txt { gap: 3px; padding-top: 2px; }
body:not(.lay-phone) .prof .ptest .btn { font-size: 19px; min-height: 52px; }
/* dashboard: collection progress per race (rewards card) */
.ds-col { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ds-race { display: grid; grid-template-columns: 36px 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 6px; border-radius: 14px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); }
.ds-race .ri { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rc); color: var(--ink); border: 2px solid #fff; font-size: 18px; }
.ds-race b { font: 400 19px/1 var(--pop); padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-race .ds-bar { margin: 0; height: 12px; }
.ds-race .ds-bar span { background: var(--rc); }
.ds-race em { font: 400 20px/1 var(--num); font-style: normal; color: #e6e9f7; }
.ds-rew { flex: 0 1 auto; }
/* zone: the list of fights */
.zw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 14px; margin-top: 16px; }
.zst { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 14px 6px 8px; border-radius: 18px; background: rgba(11,13,28,.86); border: 2.5px solid rgba(255,255,255,.3); text-align: left; color: #fff; }
.zst.cur { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,122,42,.8); }
.zst.lock { opacity: .62; }
.zn-n { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; background: var(--y); color: var(--ink); font: 400 21px/1 var(--num); }
.zst.cur .zn-n { background: #fff; }
.zst.lock .zn-n { background: rgba(11,13,28,.9); color: #8b93b8; border-color: rgba(255,255,255,.45); }
.zst.boss .zn-n { background: linear-gradient(180deg, #ff5d3a, #9b1205); color: #fff; font-size: 22px; }
.zn-t { flex: 1; min-width: 0; }
.zn-t b { display: block; font: 400 19px/1.05 var(--pop); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-t i { display: block; margin-top: 2px; font: normal 600 18px/1 var(--ui); color: #b9bfdc; text-transform: uppercase; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-s { flex: none; font: 400 18px/1 var(--pop); color: var(--y); letter-spacing: -1px; }
.zn-s svg { color: #8b93b8; font-size: 20px; }
body.lay-tab .zw-list { grid-template-columns: 1fr 1fr; margin-top: 12px; }
body.lay-tab .zst { min-height: 56px; }
body:not(.lay-phone) .zn .bosslab { top: 214px; }
body.lay-desk .zn .fpath { height: 246px; }
/* album: the N° goes under the slot (it was printed over « À DÉCOUVRIR ») */
body:not(.lay-phone) .slot2 .no { bottom: -24px; color: rgba(60,30,120,.7); }
body.lay-desk .alb2 .page .grid { row-gap: 36px; }
body.lay-tab .alb2 .page .grid { row-gap: 30px; }
/* deck: 4 collection cards per row */
body.lay-desk .scr.dk { grid-template-columns: minmax(0, 1fr) 440px; }
body.lay-desk .dk .dlist.pool { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
body.lay-desk .dk .dlist.pool .dli .card { --w: 106px !important; }
body.lay-desk .dk .dlist:not(.pool) .dli .card { --w: 86px !important; }
/* shop: today's offers on one row of 4 */
body.lay-desk .shp .dcards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 24px 12px; }
body.lay-desk .shp .dc, body.lay-desk .shp .dc .pbtn { width: 128px; }
body.lay-desk .shp .dc .card { --w: 128px !important; }
body.lay-desk .cdt { grid-template-columns: 350px minmax(0, 1fr); }
body.lay-desk .cdt .dt-card .card { --w: 330px !important; }
body.lay-desk .tb-me { height: auto; min-height: 54px; padding-top: 5px; padding-bottom: 5px; }
body.lay-desk .tb-txt { gap: 4px; padding-top: 0; line-height: 1; }
body.lay-desk .tb-txt b, body.lay-desk .tb-txt i { line-height: 1; }

/* ---------- tablet fixes after the first review ---------- */
body.lay-tab .scr.dash { grid-template-areas: "adv" "side" "pills"; padding-bottom: 14px; }
body.lay-tab .dash .ds-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.lay-tab .dash .ds-hero .hero-blk { zoom: .84; height: 262px; }
body.lay-tab .dash .ds-hero { padding: 0 6px; }
body.lay-tab .dash .ds-rew { padding: 12px 14px; }
body.lay-tab .dash .ds-col, body.lay-tab .dash .ds-none { display: none; }
body.lay-tab .dash .ds-nodes { padding-bottom: 20px; }
body.lay-tab .dash .ds-next { margin-top: 4px; }
body.lay-tab .dash .hm-gift { height: 170px; }
body.lay-tab .dash .hm-gift img { height: 166px; }
body.lay-tab .alb-scr { --cw: min(118px, calc((var(--H) - 420px) / 4.5)); padding-bottom: 14px !important; }
body.lay-tab .alb2 .page .grid { row-gap: 30px; padding-top: 16px; }
body.lay-tab .shp .dcards { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 18px 10px; margin-top: 14px; }
body.lay-tab .shp .dc, body.lay-tab .shp .dc .pbtn { width: 128px; }
body.lay-tab .shp .dc .card { --w: 128px !important; }
body.lay-tab .shp .dc .pbtn { height: 40px; font-size: 21px; }
body.lay-tab .shp .shopd { padding: 14px 14px 18px; }
body.lay-tab .shp .shopd .hd b { font-size: 25px; }
body.lay-tab .shp .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.lay-tab .shp .pk img { height: 150px; }
body.lay-tab .shp .pk b { font-size: 21px; }
body.lay-tab .shp .pk .btn { height: 50px; min-height: 50px; font-size: 22px; }
body.lay-tab .cdt .dt-top { gap: 20px; }
body.lay-tab .cdt .dt-info h2 { margin-top: 10px; }

/* ---------- small desktop (1024 × 768 → stage 1100 wide) fixes ---------- */
body.lay-desk.notop.nonav #nav { display: none; }                 /* first launch: nothing but Axo and the big button */
body.lay-desk .zn .zw { grid-template-columns: minmax(0, 1fr) min(360px, 37%); }
body.lay-desk .scr.dk { grid-template-columns: minmax(0, 1fr) min(440px, 46%); }
body.lay-desk .scr.shp { grid-template-columns: minmax(0, 1fr) min(380px, 34%); }
body.lay-desk.immersive #nav, body.lay-desk.immersive #topbar { display: none !important; }
body.lay-desk .bact { top: 540px; }
/* booster (desktop / tablet): the revealed card sits under the slot row, never on it */
body:not(.lay-phone) .brow { top: 112px; }
body:not(.lay-phone) .brow .slot { width: 64px; height: 96px; }
body:not(.lay-phone) .brow .card { --w: 64px !important; }
body.lay-desk .packbox, body.lay-desk .flip { top: 440px; width: 290px; height: 435px; margin: -217px 0 0 -145px; }
body.lay-desk .flip .card { --w: 290px !important; }
body.lay-desk .tapme { top: 676px; }
body.lay-desk .btags { top: 670px; }
body.lay-desk .brate { top: 716px; }
body.lay-tab .packbox, body.lay-tab .flip { top: 430px; margin-top: -202px; }
body.lay-tab .btags, body.lay-tab .tapme { top: 650px; }
body.lay-tab .brate { top: 700px; }
.ds-nt small { white-space: nowrap; }
.ds-nt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 24px; }
.ds-go { font-size: 22px; padding: 0 18px; }
/* grid rows of the dashboard hold their content (an overflow:hidden card has a 0 min-content → it was squeezed) */
body.lay-tab .scr.dash { grid-template-rows: max-content max-content max-content; }
body.lay-desk .scr.dash { grid-template-rows: max-content minmax(0, 1fr); }
body.lay-tab .dash .ds-art { height: 112px; }
body.lay-tab .dash .ds-art b { font-size: 32px; bottom: 38px; }
body.lay-tab .dash .ds-art i { font-size: 18px; bottom: 12px; }
body.lay-tab .dash .ds-path { padding-top: 12px; }
body.lay-tab .dash .ds-pills .ds-h { display: none; }
body.lay-tab .scr.dash { gap: 12px; padding-bottom: 10px !important; }
body.lay-desk .dk .dlist:not(.pool) { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); overflow-x: hidden; }
body.lay-desk .dk .dli .pm button { width: 42px; }
/* narrow desktop (1024 × 768 → content ≈ 800 px): the dashboard cards adapt to their own width (container queries) */
.dash .ds-adv, .dash .ds-pills, .dash .ds-hero { container-type: inline-size; }
@container (max-width: 560px) {
  .ds-art { height: 150px; }
  .ds-art b { font-size: 28px; bottom: 48px; }
  .ds-art i { font-size: 16px; }
  .ds-path { padding: 12px 14px 0; }
  .dsn { width: 40px; height: 40px; font-size: 18px; }
  .dsn.boss { width: 50px; height: 50px; font-size: 22px; }
  .dsn i { top: 43px; font-size: 12px; }
  .dsn.boss i { top: 53px; }
  .dsl { margin: 0 2px; min-width: 4px; }
  .ds-next { flex-wrap: wrap; margin: 6px 12px 0; }
  .ds-nt b { font-size: 22px; }
  .ds-go { flex: 1 1 100%; height: 54px; }
  .pills .pill { height: 104px; }
  .pills .pill b { font-size: 16px; }
  .pills .pill i { font-size: 13px; }
  .pills .pill .pi { width: 44px; height: 44px; font-size: 23px; }
}
@container (max-width: 400px) { .ds-hero .hero-blk { zoom: .9; } }
/* narrow desktop shop: the 4 daily offers stay on one row */
body.lay-desk .shp .shopd { container-type: inline-size; }
@container (max-width: 560px) {
  body.lay-desk .shp .dcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
  body.lay-desk .shp .dc, body.lay-desk .shp .dc .pbtn { width: 100px; }
  body.lay-desk .shp .dc .card { --w: 100px !important; }
  body.lay-desk .shp .dc .pbtn { font-size: 19px; height: 40px; }
}

/* ======================= Arène (PvP), quêtes, deck 8 races — tablet / desktop (phone: css/arena.css) ======================= */
body:not(.lay-phone) .nv-arene .nv-stk { top: 40px; font-size: 64px; }
body:not(.lay-phone) .nv-arene .nv-ico { top: 140px; width: 150px; height: 150px; margin-left: -75px; font-size: 92px; border-radius: 38px; }
body:not(.lay-phone) .nv-arene .nv-t { top: 312px; }
body:not(.lay-phone) .nv-arene .nv-d { top: 374px; font-size: 24px; }
body:not(.lay-phone) .nv-arene .nv-ar { top: 418px; width: 460px; margin-left: -230px; }
body:not(.lay-phone) .nv-arene .nv-ti b { font-size: 14px; }
body:not(.lay-phone) .nv-arene .nv-pts li { font-size: 20px; }
body:not(.lay-phone) .nv-arene .nv-go { top: 680px; }

/* hub (desktop = dashboard: left your rank / tickets / rewards / deck, right the 3 opponents + journal / classement) */
body.lay-desk .ar-hub { background: radial-gradient(60% 40% at 30% 0%, rgba(255,95,184,.18), transparent 70%); }
body.lay-desk .ar-head h2 { font-size: 44px; }
body.lay-desk .ar-dash { display: grid; grid-template-columns: minmax(380px, 430px) minmax(0, 1fr); gap: 28px; align-items: start; }
body.lay-desk .ar-colL { display: grid; gap: 12px; } body.lay-desk .ar-colL > * { margin-top: 0 !important; }
body.lay-desk .ar-rating { font-size: 58px; }
body.lay-desk .ar-box { padding: 10px 10px 10px; gap: 7px; }
body.lay-desk .ar-tk { width: 24px; height: 24px; font-size: 23px; }
body.lay-desk .ar-dv b, body.lay-desk .ar-bp b { font-size: 30px; }
body.lay-desk .ar-dk-t b { font-size: 19px; } body.lay-desk .ar-dk-t i { font-size: 16px; }
body.lay-desk .ar-rk-p i { font-size: 18px; } body.lay-desk .ar-rec { font-size: 16px; }
body.lay-desk .ar-colL > :first-child { margin-top: 0; }
body.lay-desk .ar-colR > .sec { margin-top: 0; }
body.lay-desk .ar-colR .sec h3 { font-size: 26px; }
body.lay-desk .ar-colR .ar-links { margin: 0; display: flex; gap: 10px; }
body.lay-desk .ar-colR .ar-lk { height: 46px; font-size: 18px; }
body.lay-desk .ar-opps { gap: 18px; margin-top: 18px; }
body.lay-desk .ar-opp { padding: 20px 14px 12px; gap: 10px; }
body.lay-desk .ar-o1 > .ar-face { --s: 74px !important; }
body.lay-desk .ar-on { font-size: 23px; }
body.lay-desk .ar-o-m { font-size: 18px; }
body.lay-desk .ar-o-t > i { font-size: 16px; }
body.lay-desk .ar-chance { width: 72px; height: 72px; }
body.lay-desk .ar-chance b { font-size: 25px; }
body.lay-desk .ar-o2 { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
body.lay-desk .ar-gains { font-size: 18px; gap: 6px; }
body.lay-desk .ar-gains b { font-size: 20px; }
body.lay-desk .ar-atk { height: 54px; padding: 0 20px; font-size: 21px; }
body.lay-desk .ar-slot { font-size: 16px; }
/* desktop hub: the last fights under the opponents (the journal's first entries) */
body.lay-desk .ar-recent { margin-top: 18px; display: grid; gap: 8px; }
body.lay-desk .ar-recent h4 { margin: 0; font: 400 20px/1 var(--pop); }
body.lay-desk .ar-recent .ar-je { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "k f t r rv"; }
body.lay-desk .ar-ref { margin-top: 16px; }
body.lay-desk .ar-ref .btn { flex: none; padding: 0 22px; font-size: 18px; }
body.lay-desk .ar-rank .ar-tb { --s: 84px !important; }
body.lay-desk .ar-box > i, body.lay-desk .ar-box h4 { font-size: 15px; }
body.lay-desk .ar-deck h4 { font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .ar-opp, .ar-je, .ar-nxo, .ar-lk, .ar-away { transition: translate .14s ease-out, filter .14s; }
  .ar-opp:hover, .ar-je:hover, .ar-nxo:hover, a.ar-away:hover { translate: 0 -3px; filter: brightness(1.08); }
}
/* tablet: the phone hub, wider (rows breathe) */
body.lay-tab .ar-hub, body.lay-tab .ar-pick, body.lay-tab .ar-jr, body.lay-tab .ar-lb { padding-top: 10px; }
body.lay-tab .ar-row { gap: 12px; }
body.lay-tab .ar-opp { padding: 18px 14px 12px; }
body.lay-tab .ar-head h2 { font-size: 42px; }
/* picker / journal / leaderboard: a centred column on large screens */
body.lay-desk .ar-pick > *, body.lay-desk .ar-jr > *, body.lay-desk .ar-lb > * { max-width: 900px; margin-left: auto; margin-right: auto; }
body.lay-desk .ar-jr .ar-zh, body.lay-desk .ar-lb .ar-zh { margin-bottom: 14px; }
body.lay-desk .ar-je { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "k f t r rv"; padding: 10px 14px 10px 10px; column-gap: 14px; }
body.lay-desk .ar-je-t b { font-size: 19px; } body.lay-desk .ar-je-t i { font-size: 16px; }
body.lay-desk .ar-je .ar-face { --s: 52px !important; }
body.lay-desk .ar-rv { height: 42px; font-size: 17px; padding: 0 16px; }
body.lay-desk .ar-lr { grid-template-columns: 56px auto minmax(0, 1fr) auto 110px; padding: 8px 16px 8px 8px; }
body.lay-desk .ar-lr-t b { font-size: 19px; }
body.lay-desk .ar-tiers { padding: 10px 20px; }
body.lay-desk .ar-ti b { font-size: 15px; } body.lay-desk .ar-ti i { font-size: 15px; }
/* result */
body:not(.lay-phone) .ar-rs .rs-title { margin-top: 18px; font-size: 70px; }
body:not(.lay-phone) .ar-rd { width: 460px; padding: 14px 20px; }
body:not(.lay-phone) .ar-rd .ar-tb { --s: 92px !important; }
body:not(.lay-phone) .ar-rd .ar-rating { font-size: 60px; }
body:not(.lay-phone) .ar-rs .rs-gains { max-width: 460px; }
body:not(.lay-phone) .ar-rs .rs-act { position: relative; left: auto; bottom: auto; margin: 18px auto 0; width: 460px; }
body:not(.lay-phone) .ar-bst-won { width: 460px; }
body:not(.lay-phone) .ar-rs.rs { padding-bottom: 30px; }

/* dashboard: 8 races -> the album progress list goes on 2 columns */
.ds-col.many { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.ds-col.many .ds-race { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ri b em" "bar bar bar"; height: auto; padding: 5px 8px 6px 5px; row-gap: 4px; column-gap: 6px; }
.ds-col.many .ds-race .ri { grid-area: ri; width: 28px; height: 28px; font-size: 15px; }
.ds-col.many .ds-race b { grid-area: b; font-size: 16px; } .ds-col.many .ds-race em { grid-area: em; font-size: 16px; }
.ds-col.many .ds-race .ds-bar { grid-area: bar; height: 7px; }

body:not(.lay-phone) .hp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 560px; }
body:not(.lay-phone) .hp-h .ar-face { --s: 64px !important; }
body:not(.lay-phone) .hp-h b { font-size: 15px; }
body:not(.lay-phone) .sbox.hp-sheet { width: min(920px, calc(var(--W) - 80px)); }
body:not(.lay-phone) .hp-det { font-size: 18px; }
body:not(.lay-phone) .hp-det b { font-size: 21px; }

/* deck: race filter above the collection; album: 8 compact race tabs on one row */
body.lay-desk .dk .dk-filt { grid-area: filt; margin: 0 0 8px; flex-wrap: wrap; overflow: visible; }
body.lay-desk .dk-rf { height: 36px; font-size: 17px; }
body.lay-desk .alb-races.many { gap: 6px; }
body.lay-desk .alb-races.many .alb-race { gap: 4px; padding: 0 6px 0 4px; }
body.lay-desk .alb-races.many .alb-race b { font-size: 15px; }
body.lay-desk .alb-races.many .alb-race .n { font-size: 15px; }
body.lay-desk .alb-races.many .alb-race .ri { width: 26px; height: 26px; font-size: 15px; }
body.lay-desk .alb-races.many .alb-race .alb-new { font-size: 10px; right: -2px; }
body.lay-tab .alb-races.many .alb-race { min-width: 132px; }

body.lay-desk .qs-scr .qs-cols { grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
body.lay-desk .qs-scr .qs-t > b { font-size: 20px; }
body.lay-desk .qs-scr .qs-q { padding: 12px 14px; }
body.lay-desk .qs-scr .qs-claim { height: 50px; font-size: 19px; }

/* home dashboard with the quests block (step 4): 5-6 shortcuts on one row, compact race progress (4 × 2, no names),
   the next-fight name keeps 2 lines (the CONTINUER button may wrap its label instead) */
body:not(.lay-phone) .scr.dash .pills:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body:not(.lay-phone) .scr.dash .pills:has(> :nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body:not(.lay-phone) .scr.dash .pills:has(> :nth-child(5)) .pill b { font-size: 18px; }
body:not(.lay-phone) .scr.dash .pills:has(> :nth-child(5)) .pill i { font-size: 14px; }
body:not(.lay-phone) .scr.dash .pills:has(> :nth-child(5)) .pill .qs-dot { right: 4px; top: 4px; }
.ds-side:has(.qs-home) .ds-col.many { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ds-side:has(.qs-home) .ds-col.many .ds-race { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "ri em" "bar bar"; padding: 4px 6px 5px 4px; }
.ds-side:has(.qs-home) .ds-col.many .ds-race b { display: none; }
.ds-side:has(.qs-home) .ds-col.many .ds-race .ri { width: 26px; height: 26px; font-size: 14px; }
.ds-side:has(.qs-home) .ds-col.many .ds-race em { font-size: 15px; text-align: right; }
.ds-side:has(.qs-home) .ds-rew { padding-top: 10px; }
.ds-side:has(.qs-home) .ds-lv { margin-top: 4px; }
.ds-nt { min-width: 170px; }
.ds-go { min-width: 0; flex-shrink: 1; white-space: normal; line-height: 1; text-align: center; }
body:not(.lay-phone) .qs-home .qs-mini { grid-template-columns: auto minmax(0, 1fr) 110px; }
body.lay-tab .qs-home { gap: 6px; padding: 10px 12px; }
body.lay-tab .qs-home .qs-mini { grid-template-columns: auto minmax(0, 1fr) 62px; gap: 6px; }
body.lay-tab .qs-home .qs-mini b { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.lay-tab .qs-home .qs-all { height: 40px; font-size: 15px; white-space: nowrap; padding: 0 8px; }

/* card detail (tablet / desktop): the cards around it in its race page fill the bottom (no empty band) */
.cd-rel { margin-top: 14px; padding: 10px 14px 12px; border-radius: 20px; background: rgba(11,13,28,.85); }
.cd-rel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 19px/1 var(--pop); letter-spacing: .5px; color: var(--rc, #fff); }
.cd-rel h4 .sp { flex: 1; }
.cd-rel h4 em { font: 400 20px/1 var(--num); font-style: normal; color: #fff; }
.cd-rl { display: flex; gap: 12px; justify-content: space-between; }
.cd-ri { flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 14px; }
.cd-ri.cur { outline: 3px solid var(--y); outline-offset: 3px; }
.cd-ri.no { opacity: .55; }
@media (hover: hover) and (pointer: fine) { button.cd-ri:hover { translate: 0 -4px; filter: brightness(1.1); } }
body.lay-tab .cd-rl .card { --w: 84px !important; }

/* shop (desktop): today's offers full width, then the boosters in a grid (the page used to end in an empty band) */
body.lay-desk .scr.shp { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "daily" "sec" "packs"; }
body.lay-desk .shp .shopd { max-width: 1060px; width: 100%; justify-self: center; }
body.lay-desk .shp .shopd + .sec, body.lay-desk .shp .packs { max-width: 1060px; width: 100%; justify-self: center; }
body.lay-desk .shp .dcards { grid-template-columns: repeat(4, minmax(0, 170px)); justify-content: space-evenly; }
body.lay-desk .shp .dc, body.lay-desk .shp .dc .pbtn { width: 170px; }
body.lay-desk .shp .dc .card { --w: 170px !important; }
body.lay-desk .shp .packs { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 18px; padding-bottom: 30px; }
body.lay-desk .shp .pk img { height: 170px; }

/* ======================= Step 6 (succès, saisons, événements) — tablet / desktop (phone: css/s6.css) ======================= */
body:not(.lay-phone) .tb-title { display: block; font: normal 600 14px/1 var(--ui); color: var(--y); text-transform: uppercase; letter-spacing: .4px; margin: 1px 0 1px; }
body.lay-desk .tb-title { font-size: 16px; }
body.lay-desk .tb-ev { min-width: 120px; }
/* succès: profile + category summary on the left, every category on the right (2 columns of rows) */
.sx-dash { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.sx-colR { container-type: inline-size; min-width: 0; }
.sx-colL { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.sx-colL .sx-me { flex-wrap: wrap; padding: 14px; }
.sx-colL .sx-me .sx-cos { width: 100%; height: 46px; font-size: 18px; }
.sx-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(11,13,28,.9); }
.sx-sc { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: 22px; color: var(--y); }
.sx-sc b { font: 400 19px/1 var(--pop); color: #fff; }
.sx-sc em { font: 400 19px/1 var(--num); font-style: normal; color: #fff; }
.sx-sc .sx-bar { grid-column: 1 / -1; --c: #ffd21a; height: 10px; }
.sx-colR .sec { margin-top: 4px; }
.sx-colR .sec h3 { display: flex; align-items: center; gap: 8px; }
body.lay-desk .sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
body.lay-desk .sx-a { min-height: 104px; grid-template-columns: 74px minmax(0, 1fr) auto; padding: 10px 12px 10px 10px; border-radius: 22px; }
body.lay-desk .sx-sk { width: 74px; height: 74px; } body.lay-desk .sx-face { inset: 7px; font-size: 30px; }
body.lay-desk .sx-t > b { font-size: 21px; } body.lay-desk .sx-t > i { font-size: 17px; }
body.lay-desk .sx-pip { min-width: 30px; height: 20px; font-size: 13px; line-height: 17px; }
body.lay-desk .sx-bar { height: 18px; } body.lay-desk .sx-bar em { font-size: 14px; }
body.lay-desk .sx-r { max-width: 150px; }
body.lay-desk .sx-claim { height: 52px; min-height: 52px; font-size: 18px; padding: 0 14px; }
body.lay-desk .sx-rw { height: 28px; font-size: 17px; }
body.lay-desk .sx-me-t b { font-size: 22px; } body.lay-desk .sx-me-t i { font-size: 18px; }
body.lay-tab .sx-a { min-height: 92px; }
body.lay-tab .sx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.lay-tab .sx-tabs button { height: 54px; font-size: 15px; }
.sx-sheet { width: min(560px, 92%); }
@container (max-width: 840px) { body.lay-desk .sx-grid { grid-template-columns: 1fr; } }
/* toast and profile at desktop size */
body.lay-desk .sx-toast { max-width: 460px; padding: 10px 20px 10px 10px; }
body.lay-desk .sx-tm { width: 60px; height: 60px; font-size: 34px; }
body.lay-desk .sx-tt small { font-size: 15px; } body.lay-desk .sx-tt b { font-size: 24px; } body.lay-desk .sx-tt i { font-size: 16px; }
body.lay-desk .sx-pf-r b { font-size: 18px; } body.lay-desk .sx-pf-r small { font-size: 14px; }
/* seasons */
body:not(.lay-phone) .ar-sban { padding: 12px 16px; column-gap: 16px; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "i t r go"; }
body.lay-desk .ar-sb-i { width: 62px; height: 62px; font-size: 36px; border-radius: 18px; }
body.lay-desk .ar-sb-t small { font-size: 15px; } body.lay-desk .ar-sb-t b { font-size: 24px; } body.lay-desk .ar-sb-t i { font-size: 18px; } body.lay-desk .ar-sb-t i em { font-size: 19px; }
body.lay-desk .ar-sb-r { flex-direction: column; align-items: flex-end; } body.lay-desk .ar-sb-r small { font-size: 15px; } body.lay-desk .ar-sb-r .sx-rw { height: 30px; font-size: 18px; }
body.lay-desk .ar-sb-go { width: 40px; height: 40px; font-size: 20px; }
body.lay-desk .ar-hub .ar-sban { margin: 4px 0 10px; }
body:not(.lay-phone) .ar-ss .ar-ssl { max-width: 980px; margin: 0 auto; }
body.lay-desk .ss-cur { grid-template-columns: auto minmax(0, 1fr); padding: 16px 18px; }
body.lay-desk .ss-cur b { font-size: 24px; } body.lay-desk .ss-cur small { font-size: 15px; } body.lay-desk .ss-cur i { font-size: 17px; }
body:not(.lay-phone) .ss-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body:not(.lay-phone) .ss-ti { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "b n" "r r"; padding: 8px 10px; background: rgba(255,255,255,.05); }
body:not(.lay-phone) .ss-ti .ar-tb { grid-area: b; } body:not(.lay-phone) .ss-ti b { grid-area: n; font-size: 17px; } body:not(.lay-phone) .ss-ti .sx-rws { grid-area: r; }
body.lay-desk .ss-h { padding: 12px 16px; } body.lay-desk .ss-ht b { font-size: 22px; } body.lay-desk .ss-ht i { font-size: 16px; } body.lay-desk .ss-rt { font-size: 19px; }
body.lay-desk .ar-lbsw .chip { height: 40px; font-size: 18px; }
body:not(.lay-phone) .sf-rw, body:not(.lay-phone) .sf-reset { width: 520px; }
body.lay-desk .sf-name { font-size: 30px; } body.lay-desk .sf-tier b { font-size: 46px; } body.lay-desk .sf-tier i { font-size: 22px; }
body.lay-desk .sf-rw small, body.lay-desk .sf-reset small { font-size: 18px; } body.lay-desk .sf-reset i { font-size: 18px; } body.lay-desk .sf-rr b { font-size: 40px; }
body.lay-desk .sf .sf-stk { margin-top: 18px; }
/* events: info + map on the left, quests + shop on the right */
body:not(.lay-phone) .ev-scr { padding-top: 84px; }
body.lay-desk .ev-scr { left: var(--navw); padding: 84px 28px 40px; }
.ev-dash { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ev-dash .evt-t { text-align: left; } .ev-dash .evt-t p { margin-left: 0; }
.ev-dash .cd { justify-content: flex-start; }
body.lay-desk .evt-t h2 { font-size: 48px; } body.lay-desk .evt-t p { font-size: 22px; } body.lay-desk .evt-t .k { font-size: 17px; }
body.lay-desk .cd div { width: 74px; height: 62px; } body.lay-desk .cd b { font-size: 32px; } body.lay-desk .cd small { font-size: 15px; }
body.lay-desk .ev-map { height: 300px; }
body.lay-desk .ev-face { --s: 72px; } body.lay-desk .ev-node.boss .ev-face { --s: 94px; }
body.lay-desk .ev-node .ev-face { width: var(--s); height: var(--s); }
body.lay-desk .ev-race b { font-size: 22px; } body.lay-desk .ev-rule b { font-size: 18px; } body.lay-desk .ev-race small, body.lay-desk .ev-rule small { font-size: 14px; }
body.lay-desk .ev-shop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
body.lay-desk .ev-ofv { height: 140px; } body.lay-desk .ev-ofv .ev-pk { height: 136px; }
body.lay-desk .ev-of b { font-size: 16px; } body.lay-desk .ev-of i { font-size: 14px; } body.lay-desk .ev-buy { height: 44px; min-height: 44px; font-size: 19px; }
body.lay-desk .ev-qt b { font-size: 18px; } body.lay-desk .ev-q { padding: 10px 12px; } body.lay-desk .ev-qi { width: 48px; height: 48px; font-size: 26px; }
body.lay-desk .ev-q { grid-template-columns: 48px minmax(0, 1fr) auto; }
body.lay-tab .ev-map { height: 230px; } body.lay-tab .ev-face { --s: 62px; } body.lay-tab .ev-shop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body:not(.lay-phone) .ev-ban2 { height: 84px; } body:not(.lay-phone) .ev-ban2 .tx b { font-size: 28px; } body:not(.lay-phone) .ev-ban2 .tx i { font-size: 14px; } body:not(.lay-phone) .ev-ban2 .ev-pk { height: 80px; }
.dash .ds-pills .ev-ban2 { margin: 0 0 12px; }
body:not(.lay-phone) .sf .sf-go { margin: 18px auto 24px; left: auto; width: 400px; margin-left: auto; top: auto; }
body.lay-tab .sx-tabs { margin: 10px 0 4px; padding: 9px 0 3px; }

/* ---------- Finale: hero rule, MES DECKS, coffret, event polish (phone rules: css/final.css) ---------- */
body:not(.lay-phone) .cf { top: 116px; }
body:not(.lay-phone) .cf-lab { font-size: 19px; padding: 4px 16px 2px; }
body:not(.lay-phone) .cf-ban { left: 50%; right: auto; width: 620px; margin-left: -310px; }
body:not(.lay-phone) .cf-ban b { font-size: 30px; }
body:not(.lay-phone) .cf-ban .ri { width: 46px; height: 46px; font-size: 26px; }
body:not(.lay-phone) .cf-new { font-size: 13px; padding: 3px 7px 1px; }
body:not(.lay-phone) .bact.cf-act { top: auto; bottom: 16px; left: 50%; right: auto; width: 620px; margin-left: -310px; }
body:not(.lay-phone) .bact.cf-act .btn { flex: 1 1 30%; height: 64px; font-size: 22px; }
body:not(.lay-phone) .bact.cf-act #cfDeck { flex: 1 1 58%; height: 64px; font-size: 25px; }
body:not(.lay-phone) .cf-hint { font-size: 16px; }
body:not(.lay-phone) .bst.cof .packbox { top: 430px; }
body.lay-desk .dk-decks { padding-top: 6px; }
body.lay-desk .dk-dk { height: 44px; max-width: 220px; }
body.lay-desk .dk-dk b { font-size: 16px; }
body:not(.lay-phone) .dkr-t b { font-size: 19px; }
body:not(.lay-phone) .dkr-st { font-size: 15px; }
body:not(.lay-phone) .dkr-why { font-size: 16.5px; }
body:not(.lay-phone) .dk-nl { grid-template-columns: 1fr 1fr; }
body:not(.lay-phone) .evx-t b { font-size: 19px; }
body:not(.lay-phone) .evx-t i, body:not(.lay-phone) .evx-t small { font-size: 14px; }
body:not(.lay-phone) .evx-lost { font-size: 15px; }
body:not(.lay-phone) .evx-rv .evx-card .card { --w: 260px !important; }
body:not(.lay-phone) .evx-rv .evx-nm { font-size: 30px; max-width: 460px; }
body.lay-desk .ev-colL .evx-next { margin-top: 18px; }
/* desktop deck: the collection starts right under its title (the hero-rule strip made the right column taller and the
   old « filt pw » row stretched, leaving a gap above the cards): title + race filter share the first row */
body.lay-desk .scr.dk { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "sp head" "pool head" "pool pw" "pool sd" "pool deck" "pool save"; }
body.lay-desk .dk .dk-sp { grid-area: sp; align-self: start; }
body.lay-desk .dk .dk-filt { grid-area: sp; align-self: end; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 8px; padding-bottom: 4px; scrollbar-width: thin; }
body.lay-desk .dk .dk-head { align-self: start; }
/* desktop dashboard with the event banner: the shortcuts were cut at 900 px of height (overflow hidden) -> shorter zone
   art, banner and gaps when the event banner is there and the window is not tall */
@media (max-height: 980px) {
  body.lay-desk .scr.dash:has(.ev-ban2) .ds-art { height: 150px; }
  body.lay-desk .scr.dash:has(.ev-ban2) .ds-art b { font-size: 32px; bottom: 40px; }
  body.lay-desk .scr.dash:has(.ev-ban2) .ds-art i { font-size: 18px; bottom: 12px; }
  body.lay-desk .scr.dash:has(.ev-ban2) { gap: 14px 26px; }
  body.lay-desk .dash .ds-pills .ev-ban2 { height: 74px; margin-bottom: 8px; }
  body.lay-desk .dash .ds-pills .ev-ban2 .ev-pk { height: 70px; }
}

/* =====================================================================================================================
 * PUBLIC BETA (css/beta.css): pill on the side-navigation logo, gate, note, bug report, profile help, account deletion
 * ===================================================================================================================== */
body.lay-desk .nav-beta { display: inline-flex; position: absolute; right: 10px; top: 96px; z-index: 2; rotate: -5deg; height: 24px; font-size: 13px; }
body.lay-desk.nonav .nav-beta { display: none; }
body:not(.lay-phone) .gt-box { width: 470px; gap: 14px; }
body:not(.lay-phone) .gt-logo { width: 360px; height: 180px; }
body:not(.lay-phone) .gt-hello { font-size: 26px; }
body:not(.lay-phone) .gt-ck { min-height: 64px; padding: 10px 16px 8px; }
body:not(.lay-phone) .gt-tx { font-size: 23px; }
body:not(.lay-phone) .gt-play { min-height: 64px; font-size: 28px; }
body:not(.lay-phone) .gt-minor { font-size: 20px; }
body:not(.lay-phone) #gateLang { top: 18px; right: 22px; }
body:not(.lay-phone) .hm-beta { top: 18px; right: 22px; height: 26px; font-size: 14px; }
body:not(.lay-phone) .mbox.bt-note, body:not(.lay-phone) .mbox.del-box { top: 50%; width: 500px; }
body:not(.lay-phone) .mbox.bt-note p, body:not(.lay-phone) .mbox.del-box p { font-size: 23px; }
body:not(.lay-phone) .mbox.bt-note .btn { font-size: 22px; min-height: 56px; }
body:not(.lay-phone) .aide-h { font-size: 15px; }
body:not(.lay-phone) .aide-ver { font-size: 17px; }
/* tall sheets: centred without `translate` — gsap's y tween (sheet entrance) drops the CSS translate's -50 % y, which
   left a 785 px profile hanging from the middle of the screen */
body:not(.lay-phone) .sbox.prof, body:not(.lay-phone) .sbox.bug-sheet { top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content; translate: none;
  max-height: calc(var(--H, 820px) - 40px); }
body:not(.lay-phone) .sbox.bug-sheet { width: 560px; }
body:not(.lay-phone) .aide-r { font-size: 20px; min-height: 48px; }
body:not(.lay-phone) .aide-id, body:not(.lay-phone) .aide-legal { font-size: 19px; }
body:not(.lay-phone) .bug-cat { font-size: 20px; min-height: 42px; }
body:not(.lay-phone) .bug-ck { font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .aide-r:hover, .bug-cat:hover, .bug-pick:hover, .aide-cp:hover, .aide-del:hover { filter: brightness(.96); translate: 0 -1px; }
  button.beta-pill:hover { filter: brightness(1.12); }
  .gt-ck:hover { border-color: rgba(255,255,255,.5); }
}