/* MOBI GAMES — Native-feeling mobile Royale game experience
   Works with real 3D Ludo renderer, real games and local-only achievements.
   Desktop remains backwards-compatible. No fake account, ratings or winnings.
*/
.mobile-royale{display:none}
@media(max-width:600px){
 html{scroll-padding-top:70px;overflow-x:clip}
 body:has(#accueil){background:radial-gradient(ellipse at 22% -2%,#24446a85,transparent 35%),
  radial-gradient(ellipse at 105% 33%,#50311c59,transparent 43%),
  linear-gradient(160deg,#07142c 0%,#050e22 50%,#08152d 100%);
  color:#fff4df;min-width:0;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));overflow-x:clip}
 body:has(#accueil) .topbar{height:64px;position:sticky;top:0;z-index:70;
  background:linear-gradient(130deg,#07132aee,#0e2241ef);border-bottom:1px solid #dca24f61;
  box-shadow:0 7px 17px #0009}
 body:has(#accueil) .topbar .navwrap{padding:0 15px}
 body:has(#accueil) .brandmark{background:#fcfaf4;border-radius:9px;border:1px solid #f7c16e;
  box-shadow:0 0 0 2px #bb7a262e,0 1px 13px #f1ab3975}
 body:has(#accueil) .brandwordmark{width:137px;height:30px;max-width:calc(100vw - 103px);border-radius:7px}
 body:has(#accueil) .navright{display:none}
 body:has(#accueil) main.shell{padding:0 13px!important;max-width:650px;overflow:visible}
 body:has(#accueil) main.shell > :not(#mobile-royale){display:none!important}
 .mobile-royale{display:block!important;width:100%;min-width:0;margin:0 auto}
 .mobile-royale [hidden]{display:none!important}
 .mobile-identity{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:74px;padding:12px 5px 11px}
 .mobile-identity>div{display:flex;flex-direction:column;gap:2px}
 .mobile-greeting{font-size:9px;letter-spacing:.18em;font-weight:900;color:#dfba70}
 .mobile-identity strong{font-size:17px;letter-spacing:-.04em;color:#fff5e4;text-shadow:0 2px 6px #0007;font-weight:850}
 .mobile-identity-profile{width:45px;height:45px;flex:0 0 45px;border-radius:50%;padding:0;
  display:grid;place-items:center;position:relative;border:2px solid #ffbd51;
  background:radial-gradient(circle at 35% 18%,#355882,#112644 65%,#0b1632);
  box-shadow:0 0 0 3px #f9b64b26,0 3px 12px #0009}
 .mobile-identity-profile b{color:#ffda9a;font-size:23px;text-shadow:0 0 15px #efb151;font-weight:900}
 .mobile-identity-profile>span{position:absolute;right:-7px;top:-13px;font-size:19px;color:#ffd062;
  text-shadow:0 0 13px #ffbc36}
 .mobile-view{min-width:0;animation:mobileViewIn .16s ease}
 @keyframes mobileViewIn{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
 .mobile-featured{position:relative;isolation:isolate;overflow:hidden;border-radius:21px;
  min-height:370px;border:1.6px solid #f5b858c4;
  background:radial-gradient(ellipse at 51% 52%,#cf692c8a 0%,transparent 48%),
    radial-gradient(ellipse at 55% 29%,#356ca08a 0%,transparent 51%),
    linear-gradient(143deg,#162443,#101b35 56%,#432219);
  box-shadow:0 8px 0 #352111,0 14px 29px #000b,inset 0 2px 0 #ffebb08c}
 .mobile-featured:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.38;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 26px,#ffbb6021 28px 30px,transparent 32px 57px);
  mask-image:linear-gradient(125deg,transparent 15%,#000 100%)}
 .mobile-featured:after{content:"";position:absolute;left:-21%;bottom:-40%;width:140%;height:85%;z-index:-1;
  border-radius:50%;border:1px solid #ffca5b4d;box-shadow:0 0 0 15px #ffd55910,0 0 45px #dd6a2934;transform:rotate(-12deg)}
 .mobile-gold-corners{position:absolute;inset:10px;pointer-events:none;border:1px solid #ffcf6c40;border-radius:13px;z-index:5}
 .mobile-feature-top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:15px 17px 0}
 .mobile-feature-badge{background:linear-gradient(#ffe179,#ef9b22);color:#291c17;padding:6px 11px;border-radius:999px;
  font-size:10px;font-weight:950;letter-spacing:.03em;box-shadow:inset 0 1px 0 #fff9c7,0 3px 7px #0008}
 .mobile-feature-crown{font-size:31px;color:#ffcd58;line-height:1;text-shadow:0 3px 2px #4e230d,0 0 20px #ffb025}
 .mobile-feature-heading{position:relative;z-index:5;text-align:center;margin:3px 0 -8px}
 .mobile-feature-kicker{display:block;font-size:9px;color:#ffe2a9;letter-spacing:.22em;font-weight:900;text-shadow:0 1px 3px #000}
 .mobile-feature-heading h2{display:flex;align-items:center;flex-direction:column;line-height:.94;margin:7px 0 0;
  text-shadow:0 3px 0 #381d10,0 6px 12px #000d;font-weight:1000;letter-spacing:-.06em}
 .mobile-feature-heading h2 span{font-size:17px;font-weight:1000;color:white;letter-spacing:.18em}
 .mobile-feature-heading h2 b{font-size:35px;font-weight:1000;
  background:linear-gradient(#fff6cb,#ffd06f 42%,#e58c31 88%);color:transparent;
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 1px #52280c)}
 .mobile-feature-heading h2 em{font-size:29px;font-style:normal;font-weight:1000;
  background:linear-gradient(#fff9d3,#f7c76e 45%,#bd6529);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 1px #4c210d)}
 .mobile-stage{position:relative;width:100%;height:186px;min-height:186px;margin:-1px 0 -13px;
  isolation:isolate;filter:drop-shadow(0 13px 16px #0009)}
 .mobile-stage-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 54%,#ffc0529a,transparent 55%)}
 .mobile-stage #hero3d{position:absolute!important;inset:0!important;width:100%;height:100%;
  z-index:3;pointer-events:none;filter:drop-shadow(0 8px 12px #000a)}
 .mobile-stage #hero3d .mobi3d-canvas{width:100%!important;height:100%!important;display:block;border-radius:0;filter:none}
 .mobile-stage.is-3d .mobile-stage-fallback{display:none}
 .mobile-stage-fallback{position:absolute;inset:0;display:grid;place-items:center;perspective:600px}
 .mobile-perspective-board{width:152px;height:152px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:12px;border:10px ridge #d89b49;border-radius:13px;
  background:linear-gradient(#fff8d9,#be7631);transform:rotateX(34deg) rotateZ(-34deg);
  box-shadow:0 8px 0 #55351f,0 16px 0 #33201d,0 20px 32px #000e,inset 0 2px 2px #fff9e4}
 .mobile-perspective-board i{border-radius:4px;border:4px solid #fffbecb0;box-shadow:inset 0 3px 2px #0004}
 .mobile-perspective-board i:nth-child(1){background:linear-gradient(140deg,#4897e4,#1042ba)}
 .mobile-perspective-board i:nth-child(2){background:linear-gradient(140deg,#f85f47,#a41422)}
 .mobile-perspective-board i:nth-child(3){background:linear-gradient(140deg,#ffd763,#e98700)}
 .mobile-perspective-board i:nth-child(4){background:linear-gradient(140deg,#34dd88,#0d8152)}
 .mobile-perspective-board span{position:absolute;top:43%;left:41%;width:18%;height:18%;background:#fff7c7;
  color:#d39d35;text-align:center;line-height:22px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
 .mobile-fallback-die{position:absolute;right:17%;bottom:4%;transform:rotate(-16deg);font-size:35px;color:#fff;
  text-shadow:1px 3px 0 #73523b,0 8px 12px #000a}
 .mobile-feature-foot{position:relative;z-index:6;display:flex;align-items:center;flex-direction:column;
  gap:9px;padding:0 18px 18px}
 .mobile-feature-foot p{font-size:11px;line-height:1.4;text-align:center;max-width:310px;
  margin:0;color:#f6e9d5;text-shadow:0 1px 4px #000}
 .mobile-gold-button{border:1.5px solid #ffdf72;border-radius:999px;
  background:linear-gradient(180deg,#fff3b9 0%,#ffce4c 26%,#ffab17 60%,#e87e0b 100%);
  box-shadow:inset 0 2px 0 #fffdf0,0 4px 0 #a4570c,0 8px 18px #ff9b235e;
  display:flex;align-items:center;justify-content:center;gap:11px;
  color:#261609;font-size:14px;font-weight:950;text-shadow:0 1px 0 #fff5cf85;
  padding:11px 23px;min-height:48px;max-width:100%;transition:transform .15s}
 .mobile-gold-button:active{transform:translateY(3px)}
 .mobile-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 19px}
 .mobile-shortcuts button{min-width:0;height:76px;display:flex;align-items:center;flex-direction:column;
  justify-content:center;gap:7px;border-radius:15px;border:1px solid #d9b26a7b;
  background:linear-gradient(160deg,#2c486c,#14253f 65%,#0a1b32);
  color:#ffe8b9;box-shadow:inset 0 2px 0 #ffffff30,0 4px 0 #08101d,0 8px 12px #0008;
  padding:7px 2px}
 .mobile-shortcuts button:nth-child(2){background:linear-gradient(165deg,#443a5b,#1e2039)}
 .mobile-shortcuts button:nth-child(3){background:linear-gradient(165deg,#403951,#212c40)}
 .mobile-shortcuts button:nth-child(4){background:linear-gradient(165deg,#38425e,#182c4b)}
 .mobile-shortcuts svg{width:26px;height:26px;color:#ffd06b;filter:drop-shadow(0 2px 4px #ffae316b)}
 .mobile-shortcuts strong{font-size:9.5px;line-height:1.15;font-weight:800;white-space:nowrap;color:#fff1d4}
 .mobile-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:23px 0 12px}
 .mobile-section-head h2{margin:0;color:#fff3dd;font-weight:900;font-size:18px;letter-spacing:-.045em;
  text-shadow:0 2px 5px #0008}
 .mobile-section-head button{background:none;border:0;color:#ffe3a4;font-size:11px;font-weight:850;padding:8px 3px;white-space:nowrap}
 .mobile-section-head button span{font-size:20px;vertical-align:-2px}
 .mobile-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;min-width:0}
 .mobile-game-grid .mobile-game-wrap{position:relative;min-width:0;border-radius:16px;
  border:1.4px solid #ffcb70a6;background:linear-gradient(155deg,#1c3458,#0b1730);
  box-shadow:inset 0 2px 0 #fff1ae36,0 4px 0 #39241c,0 9px 14px #0008;
  overflow:hidden}
 .mobile-game-tile{width:100%;display:flex;flex-direction:column;padding:0 0 10px;
  text-align:left;border:0;background:transparent;color:#fff7e7;overflow:hidden}
 .mobile-game-cover{display:block;width:100%;height:110px;position:relative;overflow:hidden;background:
  radial-gradient(circle at 50% 70%,#bd783d,#11142f 65%);
  border-bottom:1px solid #ffcb6e69}
 .mobile-game-wrap:nth-child(2) .mobile-game-cover{background:radial-gradient(circle at 45% 40%,#9c612f,#182e27)}
 .mobile-game-wrap:nth-child(3) .mobile-game-cover{background:radial-gradient(circle at 48% 45%,#388e75,#0e252d)}
 .mobile-game-wrap:nth-child(4) .mobile-game-cover{background:radial-gradient(circle at 48% 45%,#bb853f,#2b1d27)}
 .mobile-game-cover img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.25) contrast(1.12);transition:transform .2s}
 .mobile-game-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,#ffffff31,transparent 32%,transparent 77%,#f6be3a20);
  box-shadow:inset 0 1px 0 #fff5cc44}
 .mobile-game-tile:active img{transform:scale(1.045)}
 .mobile-game-tile>strong{font-size:12px;margin:9px 29px 2px 11px;line-height:1.1;letter-spacing:-.02em;
  font-weight:950;min-height:14px;text-shadow:0 2px 4px #000}
 .mobile-game-tile>small{font-size:10px;line-height:1.3;color:#d2bb9e;margin:0 7px 0 11px}
 .mobile-favorite-action{position:absolute;top:116px;right:5px;min-width:31px;min-height:31px;
  display:grid;place-items:center;border:0;border-radius:50%;background:#28314c;color:#ffe4a0;
  font-size:19px;line-height:1;box-shadow:inset 0 1px 0 #fff3d125}
 .mobile-favorite-action.is-favorite{color:#ff9d86;background:#552b3d}
 .mobile-mini-cards[data-mobile-compact="true"] .mobile-game-wrap:nth-child(n+5){display:none}
 .mobile-category-pills,.mobile-filter-list{display:flex;gap:9px;overflow-x:auto;padding:2px 0 14px;
  scrollbar-width:none;scroll-snap-type:x proximity}
 .mobile-category-pills button,.mobile-filter-list button{white-space:nowrap;flex:0 0 auto;
  border:1px solid #ffc36879;background:linear-gradient(165deg,#2c4565,#142746);color:#ffe6af;
  box-shadow:inset 0 1px 0 #ffffff23,0 3px 6px #0008;
  font-weight:850;font-size:11px;border-radius:999px;padding:10px 15px}
 .mobile-filter-list button.active{color:#22170e;background:linear-gradient(#ffed9f,#e89c25);border-color:#fff2bb}
 .mobile-footnote{font-size:10px;line-height:1.6;color:#8ba8c7;margin:17px 5px 21px}
 .mobile-inner-heading{position:relative;margin:13px 0 25px;padding:28px 22px;
  background:radial-gradient(ellipse at 100% 0,#a9692f50,transparent 50%),
   linear-gradient(125deg,#1c385f,#0a1c38 65%,#27223d);
  border:1px solid #e4b66d84;border-radius:19px;box-shadow:inset 0 2px 0 #ffe6a636,0 9px 18px #0008}
 .mobile-inner-heading>span{display:block;font-size:10px;letter-spacing:.15em;color:#ffd27e;font-weight:950;margin-bottom:9px}
 .mobile-inner-heading h2{font-size:28px;letter-spacing:-.045em;line-height:1.06;color:#fff8e8;
  text-shadow:0 2px 9px #000b;margin:0 0 12px;font-weight:1000}
 .mobile-inner-heading p{font-size:12px;line-height:1.58;color:#d8cbe2;margin:0}
 .mobile-all-games{margin:4px 0 18px}
 .mobile-stat-card{padding:24px;border-radius:21px;background:linear-gradient(135deg,#203b60,#152440,#3b281d);
  border:1.5px solid #ffd17c85;box-shadow:0 9px 28px #0008}
 .mobile-stat-card>span{color:#ffd37c;letter-spacing:.16em;font-size:10px;font-weight:950}
 .mobile-stat-card strong{display:block;margin:8px 0;font-size:23px;color:#fff3d2;letter-spacing:-.03em}
 .mobile-stat-card p{font-size:12px;color:#d0e1f4;line-height:1.7}
 .mobile-meter{height:9px;background:#091526;border:1px solid #d39d3c80;border-radius:99px;overflow:hidden}
 .mobile-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff9823,#ffe181);border-radius:99px;transition:width .25s}
 .mobile-panel-play{margin:24px auto;width:100%}
 .mobile-quiet-card{padding:22px;border:1px solid #d6b17153;border-radius:17px;background:#112742;
  margin-top:20px}
 .mobile-quiet-card strong{color:#ffe0a6;font-size:15px}
 .mobile-quiet-card p{font-size:12px;line-height:1.6;color:#b7cadc}
 .mobile-badges-list{display:flex;flex-direction:column;gap:13px}
 .mobile-badge{display:flex;align-items:center;gap:15px;background:linear-gradient(140deg,#182e4a,#101b34);
  border:1px solid #cbaf775e;border-radius:16px;padding:16px 14px;box-shadow:0 5px 0 #071023}
 .mobile-badge.unlocked{border-color:#faca68;box-shadow:0 5px 0 #754a18,0 7px 21px #f3ae2734}
 .mobile-badge-emblem{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;
  border-radius:14px;border:1px solid #ffd4786c;background:linear-gradient(140deg,#ad77316b,#322342);color:#ffda7b;font-size:27px}
 .mobile-badge>span:nth-child(2){display:flex;flex-direction:column;gap:5px;flex:1}
 .mobile-badge strong{font-size:14px;color:#fff1d1}
 .mobile-badge small{font-size:11px;color:#a7bcd0}
 .mobile-badge-status{font-size:17px;color:#ffce72}
 .mobile-profile-card{display:flex;align-items:center;gap:15px;padding:20px;
  background:linear-gradient(145deg,#243d5e,#0b1730);border:1px solid #f2c16d97;
  border-radius:20px;box-shadow:0 9px 22px #0008;position:relative}
 .mobile-profile-crown{position:absolute;left:15px;top:5px;color:#ffdb71;font-size:22px}
 .mobile-profile-emblem{width:59px;height:59px;flex:0 0 59px;background:linear-gradient(150deg,#fff0ba,#b77724);
  color:#14253d;font-size:30px;font-weight:1000;display:grid;place-items:center;border-radius:50%;
  border:2px solid #ffedbc;box-shadow:0 4px 14px #ffaa4654}
 .mobile-profile-card div{display:flex;flex-direction:column;gap:5px}
 .mobile-profile-card strong{font-size:17px;color:#fff3d3}
 .mobile-profile-card small{font-size:11px;color:#c0d4ec}
 .mobile-profile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:17px 0}
 .mobile-profile-metrics div{border:1px solid #f6bd6077;border-radius:15px;padding:17px 5px;
  background:linear-gradient(#203c5d,#0d203c);display:flex;align-items:center;flex-direction:column;gap:8px}
 .mobile-profile-metrics strong{font-size:25px;color:#ffcf71;font-weight:1000}
 .mobile-profile-metrics span{font-size:10px;color:#c5d5ea}
 .mobile-outline-button{border:1px solid #ffcc768f;border-radius:14px;padding:14px 18px;
  background:linear-gradient(#21395a,#10233d);color:#ffdf9f;font-weight:900;min-height:46px;
  margin:12px 0 6px;width:100%}
 .mobile-empty-favorites{padding:25px 16px;text-align:center;border:1px dashed #f0b96c86;
  border-radius:18px;color:#c2d1e3;font-size:13px}
 /* Mobile navigation: genuine screen switching, not a long-page anchor bar. */
 body:has(#accueil) .bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:80;
  padding:8px max(8px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;
  background:linear-gradient(155deg,#142e50,#09182e 85%);border-top:1px solid #ffca658b;
  box-shadow:0 -8px 24px #000c,0 -1px 16px #ffbf392c}
 body:has(#accueil) .bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:0;background:none;color:#a9bed5;min-width:0;min-height:48px;gap:3px;padding:4px 0;border-radius:12px;
  font-size:10px}
 body:has(#accueil) .bottomnav button span{font-size:9px;font-weight:800}
 body:has(#accueil) .bottomnav .ui-icon{width:21px;height:21px}
 body:has(#accueil) .bottomnav button.sel{background:radial-gradient(ellipse at 50% 30%,#ffbc3a4d,transparent 71%);
  color:#ffda7d;text-shadow:0 0 13px #efaa29}
 body:has(#accueil) .bottomnav button.sel .ui-icon{filter:drop-shadow(0 0 7px #ffc054)}
 /* Games now use the entire phone screen, not a popup inside a website. */
 body:has(#accueil) .overlay{position:fixed;inset:0;z-index:200;padding:0;border-radius:0;
  display:flex;align-items:stretch;justify-content:stretch;backdrop-filter:none;overscroll-behavior:contain}
 body:has(#accueil) .overlay .dialog{width:100%;max-width:none;max-height:100dvh;height:100dvh;min-height:100vh;
  border-radius:0!important;border:0!important;box-shadow:none!important;overflow-y:auto;overflow-x:clip;
  overscroll-behavior:contain;scrollbar-width:thin}
 body:has(#accueil) .dialog .dlghead{position:sticky;top:0;z-index:40;min-height:68px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 15px 12px;
  background:linear-gradient(135deg,#1a395c,#081830)!important;
  border-bottom:1px solid #ffc76e87!important}
 body:has(#accueil) .dialog .dlghead strong{font-size:15px;font-weight:950;color:#fff3d7}
 body:has(#accueil) .dialog .iconbutton{border:1px solid #f4c17385;border-radius:50%;background:#152b49;
  color:#ffdf99;width:42px;height:42px;font-size:26px;font-weight:700}
 body:has(#accueil) .dialog .dlgbody{padding:14px 12px calc(35px + env(safe-area-inset-bottom,0px));}
 body:has(#accueil) .dialog .royale{padding:12px 10px 28px!important;border-radius:15px;min-height:0}
 body:has(#accueil) .dialog .royale-head{margin-bottom:12px}
 body:has(#accueil) .dialog .royale-signature h2{font-size:20px}
 body:has(#accueil) .dialog .royale-star{width:44px;height:44px;font-size:27px}
 body:has(#accueil) .dialog .theatre-3d{padding:4px;border-radius:14px;min-height:0;
  border:1.5px solid #ffcb70;box-shadow:0 5px 0 #7b4921,0 13px 24px #000c}
 body:has(#accueil) .dialog #ludo3d-viewport{height:min(82vw,440px);min-height:280px}
 body:has(#accueil) .dialog .royale-dice{width:78px;height:78px;border-radius:16px;margin:10px auto}
 body:has(#accueil) .dialog .royale-turn{padding:14px 12px;border-radius:15px}
 body:has(#accueil) .dialog .royale-roll{min-height:49px;font-size:15px}
 body:has(#accueil) .dialog .gamemodebar{gap:8px}
 body:has(#accueil) .dialog .scorechip{background:#1d3655;border:1px solid #fdc96f5d;color:#ffe5b0;font-size:12px}
 body:has(#accueil) .dialog .hint{color:#c4d5e5;font-size:12px}
 .mobile-royale button:focus-visible{outline:3px solid #ffda77;outline-offset:3px}
}
@media(max-width:360px){
 .mobile-featured{min-height:356px}.mobile-feature-heading h2 b{font-size:31px}.mobile-feature-heading h2 em{font-size:26px}
 .mobile-stage{height:176px;min-height:176px}
 .mobile-shortcuts{gap:5px}.mobile-shortcuts button{height:70px}.mobile-shortcuts strong{font-size:8.7px}
 .mobile-game-cover{height:98px}
 .mobile-game-tile>strong{font-size:11px}
 .mobile-game-grid{gap:9px}
 .mobile-game-tile>small{font-size:9px}
 .mobile-favorite-action{top:104px}
 .mobile-inner-heading h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
 .mobile-royale *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}


/* QA VISUAL 390px — fix what the actual screenshot revealed:
 * over-small 3D board, unreadable mode chips, empty die face. */
@media(max-width:600px){
 body:has(#accueil) .dialog .royale-head{margin-bottom:6px;gap:7px}
 body:has(#accueil) .dialog .royale-head .royale-star{width:35px;height:35px;font-size:22px}
 body:has(#accueil) .dialog .royale-signature{gap:9px}
 body:has(#accueil) .dialog .royale-signature h2{font-size:20px;line-height:1.03;margin:3px 0}
 body:has(#accueil) .dialog .royale-signature p{display:none}
 body:has(#accueil) .dialog .royale-local-badge{font-size:9px;white-space:nowrap;flex:0 0 auto;padding:7px 8px}
 body:has(#accueil) .dialog .royale .royale-mode-list{display:flex!important;grid-template-columns:none!important;
  flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
  padding:5px 3px 12px;margin-bottom:8px;max-width:100%;scrollbar-width:thin}
 body:has(#accueil) .dialog .royale .ludo-mode{flex:0 0 127px!important;min-width:127px!important;
  box-sizing:border-box;min-height:68px!important;max-height:80px;
  display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-content:center;
  column-gap:8px;row-gap:0;padding:10px 9px!important;
  background:linear-gradient(140deg,#264369,#11233e)!important;
  color:#fff9e9!important;border:1px solid #e7bd715e!important;border-radius:13px!important;
  box-shadow:inset 0 1px 0 #ffffff31,0 3px 6px #0008!important;scroll-snap-align:start}
 body:has(#accueil) .dialog .royale .ludo-mode.current{
  background:linear-gradient(135deg,#79512a,#30283f)!important;
  border-color:#ffe39b!important;box-shadow:inset 0 1px 0 #fff6c76e,0 0 0 1px #f3ba61,0 5px 10px #0008!important}
 body:has(#accueil) .dialog .royale .ludo-mode>span{font-size:17px!important;line-height:1;grid-row:1/3;align-self:center;
  color:#ffd77a!important;word-break:keep-all}
 body:has(#accueil) .dialog .royale .ludo-mode strong{font-size:12px!important;line-height:1.2;
  font-weight:900;color:#fff7e4!important;white-space:normal!important;letter-spacing:0!important}
 body:has(#accueil) .dialog .royale .ludo-mode small{font-size:10px!important;line-height:1.15;
  font-weight:600;color:#c7d6e5!important;white-space:normal!important;margin-top:2px}
 body:has(#accueil) .dialog .royale-player-strip{gap:7px;margin-bottom:8px}
 body:has(#accueil) .dialog .royale-player{min-height:48px;padding:6px 7px;gap:7px}
 body:has(#accueil) .dialog .royale-player-data{min-width:0}
 body:has(#accueil) .dialog .royale-player-data strong{font-size:11px;line-height:1.2}
 body:has(#accueil) .dialog .royale-player-data small{font-size:9px}
 body:has(#accueil) .dialog .royale-board-frame.theatre-3d{background:
  radial-gradient(ellipse at 55% 40%,#d094403d,transparent 60%),linear-gradient(#1b3350,#0e1d36);
  box-shadow:0 5px 0 #76451d,0 15px 25px #000a}
 body:has(#accueil) .dialog #ludo3d-viewport{height:clamp(295px,83vw,430px);min-height:295px}
 body:has(#accueil) .dialog .royale-turn{display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:8px;align-items:center;padding:12px!important}
 body:has(#accueil) .dialog .royale-dice{width:61px!important;height:61px!important;max-width:61px;
  min-width:61px;min-height:61px;margin:0!important;grid-column:1;grid-row:2/4;place-self:center;
  border-radius:13px;transform:rotate(-7deg);box-shadow:0 4px 0 #a7b7ca,0 9px 13px #0008!important}
 body:has(#accueil) .dialog .royale-roll{min-width:0;min-height:49px;grid-column:2;grid-row:2;
  font-size:14px;padding:9px 12px;white-space:normal}
 body:has(#accueil) .dialog .royale-turn-label{grid-column:1/-1;grid-row:1}
 body:has(#accueil) .dialog .royale-note{grid-column:2;grid-row:3;font-size:11px;margin:0;color:#c9d9e6}
 .royale-die-placeholder{display:grid;place-items:center;width:100%;height:100%;
  font-size:35px;font-weight:1000;font-family:system-ui,sans-serif;
  background:linear-gradient(#385173,#16273d);background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px #ffffff88)}
 /* Better gold contrast than the previous dark embossed letter rendering. */
 .mobile-feature-heading h2 b,.mobile-feature-heading h2 em{
  -webkit-text-fill-color:#ffcf75!important;color:#ffcf75!important;
  filter:none!important;text-shadow:0 2px 0 #67320b,0 4px 11px #020916e8;
  background:none!important}
 .mobile-feature-heading h2 em{color:#fff0ad!important;-webkit-text-fill-color:#fff0ad!important}
}

/* Confirmed against the real screenshot: the engine's mode buttons use
   class "ludo-mode", not "royale-mode". Make every choice readable. */
@media(max-width:600px){
 .mobile-stage{height:214px!important;min-height:214px!important;margin:-3px 0 3px!important}
 .mobile-feature-foot{padding-top:4px}
 body:has(#accueil) .dialog .royale .ludo-mode:not(.current){
  background:linear-gradient(145deg,#29486f,#0e203b)!important;color:#fff5e1!important}
 body:has(#accueil) .dialog .royale .ludo-mode:not(.current) strong{color:#fff5e1!important}
 body:has(#accueil) .dialog .royale .ludo-mode:not(.current) small{color:#c6d7ed!important}
}
@media(max-width:360px){.mobile-stage{height:194px!important;min-height:194px!important}}


/* Product-art polish: warm original African sunset behind the genuine 3D board,
   a compact game-home hero, and the collection entering the first phone screen. */
@media(max-width:600px){
 .mobile-identity{min-height:60px;padding:7px 5px 8px}
 .mobile-featured{background:
  radial-gradient(ellipse at 51% 52%,#cf692c60,transparent 48%),
  linear-gradient(143deg,#162443,#101b35 56%,#432219)}
 .mobile-stage-glow{inset:-15px 0 -22px;opacity:.7;background:
  linear-gradient(180deg,#0c1d3959 0%,transparent 30%,#0c1a2c4d 84%),
  url("/assets/royale-sunset.svg") center 57%/cover no-repeat;
  mask-image:linear-gradient(180deg,transparent 0%,#000 23%,#000 82%,transparent 100%)}
 .mobile-feature-foot{margin-top:-23px;z-index:12;padding:24px 17px 17px;
  background:linear-gradient(180deg,transparent,#101b32c9 48%,#0e1729ec 100%);
  border-radius:0 0 21px 21px}
 .mobile-feature-foot p{display:none}
 .mobile-shortcuts{margin:17px 0 14px;gap:7px}
 .mobile-shortcuts button{height:70px}
 .mobile-section-head{margin:18px 0 10px}
}
@media(max-width:360px){.mobile-shortcuts button{height:66px}}