/* MOBI GAMES · Official Royale brand fidelity
   Art direction approved: deep navy, aged gold, warm orange, real 3D objects.
   Preserves the existing WebGL engines, mobile app shell and interactions.
   Do not change the official logo, invent players or advertise unavailable services.
   Replaces the mismatched ivory/electric-blue/purple experiment. */
:root{
 --games-night:#071328;--games-night-deep:#040c1c;
 --games-navy:#132543;--games-surface:#172b49;
 --games-surface-deep:#10203a;--games-gold:#f0c27b;
 --games-orange:#ed9b36;--games-amber:#ffcf86;
 --games-cream:#fff3df;--games-mist:#c9d7e8;
 --games-muted:#a8bdd5;--games-stroke:rgba(241,192,110,.30);
 --games-elevation:0 16px 32px rgba(2,7,20,.42);
 color-scheme:dark;
}
html{background:var(--games-night-deep)}
body:has(#accueil){
 color:var(--games-cream);
 background:
  radial-gradient(ellipse at 84% 7%,rgba(197,100,42,.15),transparent 28%),
  radial-gradient(ellipse at 8% 1%,rgba(43,93,150,.23),transparent 31%),
  linear-gradient(160deg,#07152f 0%,#060f22 48%,#071329 100%);
}
body:has(#accueil)::before{background:
 radial-gradient(circle at 89% 12%,rgba(239,153,58,.08),transparent 35%);
 pointer-events:none}
body:has(#accueil) .topbar{
 background:rgba(7,18,39,.94);
 border-bottom:1px solid rgba(234,177,91,.25);
 box-shadow:0 8px 28px rgba(0,5,15,.26);
 backdrop-filter:blur(20px);
}
body:has(#accueil) .brand{color:#fff6e9}
body:has(#accueil) .brandmark{background:#fffaf2;border:1px solid #f2c782;border-radius:10px;
 box-shadow:0 0 0 2px rgba(219,159,75,.13),0 4px 13px rgba(0,4,12,.24)}
body:has(#accueil) .brandmark img{object-fit:contain}
body:has(#accueil) .navlink{color:#c8d7e9}
body:has(#accueil) .navlink:hover,
body:has(#accueil) .navlink.active{background:rgba(238,177,88,.14);color:#ffe1ab;border-color:rgba(245,190,98,.41)}
body:has(#accueil) .pill{background:#152540;border:1px solid rgba(245,201,134,.26);color:#f6e5cc}
body:has(#accueil) .primary,
body:has(#accueil) .play,
body:has(#accueil) .mobile-gold-button{
 background:linear-gradient(155deg,#ffe3a7 0%,#f6bd6a 47%,#e9912e 100%);
 color:#19213a;
 border:1px solid #f8d38f;
 text-shadow:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #9a591b,0 10px 19px rgba(2,7,20,.38);
}
body:has(#accueil) .primary:hover,
body:has(#accueil) .play:hover,
body:has(#accueil) .mobile-gold-button:hover{filter:brightness(1.06);box-shadow:0 3px 0 #9a591b,0 15px 24px rgba(2,7,20,.48)}
body:has(#accueil) .hero{
 border:1px solid rgba(239,185,108,.46);border-radius:24px;
 background:radial-gradient(circle at 78% 70%,rgba(233,135,66,.24),transparent 41%),
  linear-gradient(115deg,#112341 0%,#142440 44%,#402f37 100%);
 box-shadow:var(--games-elevation),inset 0 1px 0 rgba(255,224,179,.12);
}
body:has(#accueil) .hero::before{background:radial-gradient(ellipse at 72% 67%,rgba(253,185,97,.17),transparent 48%)}
body:has(#accueil) .herocopy{color:#fff6e7}
body:has(#accueil) .eyebrow{color:#eeca92;border-color:rgba(239,181,99,.4)}
body:has(#accueil) .hero h1{color:#fff9ef;text-shadow:0 7px 20px rgba(1,7,18,.22)}
body:has(#accueil) .hero h1 em{color:#f1c182;text-shadow:none}
body:has(#accueil) .hero p{color:#d2deed}
body:has(#accueil) .secondaryDark{color:#e8edf6;background:rgba(18,35,62,.87);border-color:rgba(241,188,104,.43)}
body:has(#accueil) .secondaryDark:hover{background:#213b60}
body:has(#accueil) .herovis{background:radial-gradient(circle at 56% 55%,rgba(236,162,78,.2),transparent 53%)}
body:has(#accueil) .hero3d-light{background:radial-gradient(circle at 52% 45%,rgba(241,171,77,.22),transparent 58%)}
body:has(#accueil) .hero3d-title span{color:#e9c28c}
body:has(#accueil) .hero3d-title strong{color:#ffebca}
body:has(#accueil) .hero3d-title strong b{color:#ffd38c}
body:has(#accueil) .hero-fineprint{color:#b6c9df}
body:has(#accueil) .proof-strip{border-bottom-color:rgba(244,193,113,.24)}
body:has(#accueil) .proof-strip .stat strong{color:#f1c27b}
body:has(#accueil) .proof-strip .stat span,
body:has(#accueil) .proof-strip .proof-note{color:#bdcfe1}
body:has(#accueil) .sectionhead h2{color:#f7f2eb}
body:has(#accueil) .sectionhead p{color:#bbcadf}
body:has(#accueil) .section-index{color:#ecc28b}
body:has(#accueil) .category-tile{background:linear-gradient(155deg,#223551,#13233e);
 border-color:rgba(245,186,100,.3);box-shadow:0 10px 24px rgba(0,6,17,.25)}
body:has(#accueil) .category-tile:nth-child(2){background:linear-gradient(145deg,#21314d,#1a2440)}
body:has(#accueil) .category-tile:nth-child(3){background:linear-gradient(145deg,#23423e,#123238)}
body:has(#accueil) .category-tile:nth-child(4){background:linear-gradient(145deg,#352d45,#192940)}
body:has(#accueil) .category-tile .category-visual{background:rgba(242,186,108,.15);color:#f0cb8e;border-color:rgba(243,187,102,.34)}
body:has(#accueil) .category-tile strong{color:#fff5e7}
body:has(#accueil) .category-tile small{color:#c4d2e4}
body:has(#accueil) .category-tile:hover{border-color:#edbd76;box-shadow:0 16px 30px rgba(0,5,18,.41)}
body:has(#accueil) .stat,
body:has(#accueil) .game,
body:has(#accueil) .highlight{
 background:linear-gradient(155deg,#1b2d4c,#101f38);
 border-color:rgba(238,187,106,.27);
 box-shadow:0 9px 25px rgba(1,8,24,.30);
 color:#f9f3e8;
}
body:has(#accueil) .stat small,
body:has(#accueil) .game p,
body:has(#accueil) .highlight p{color:#c3d2e4}
body:has(#accueil) .game h3,
body:has(#accueil) .highlight h3{color:#f8f4ef}
body:has(#accueil) .game:hover{border-color:rgba(248,190,100,.67);box-shadow:0 16px 32px rgba(0,7,19,.48)}
body:has(#accueil) .art{border-bottom:1px solid rgba(241,181,94,.22);background:#13233e}
body:has(#accueil) .art.ludo{background:linear-gradient(145deg,#1b3c6e,#382d45)}
body:has(#accueil) .art.cartes{background:linear-gradient(145deg,#26294b,#7b3d3e)}
body:has(#accueil) .art.damiers{background:linear-gradient(145deg,#43312f,#17304e)}
body:has(#accueil) .art.oware{background:linear-gradient(145deg,#17463d,#754727)}
body:has(#accueil) .art.memoire{background:linear-gradient(145deg,#493452,#153f58)}
body:has(#accueil) .art.quiz{background:linear-gradient(145deg,#1e4675,#2a324f)}
body:has(#accueil) .art.domino{background:linear-gradient(145deg,#64432c,#22433b)}
body:has(#accueil) .art.morpion{background:linear-gradient(145deg,#3d2941,#213d6b)}
body:has(#accueil) .art img{filter:saturate(1.06) contrast(1.06) drop-shadow(0 6px 6px rgba(0,5,15,.24))}
body:has(#accueil) .tag{color:#f1ce99;background:rgba(234,174,89,.17);border-color:rgba(238,182,100,.35)}
body:has(#accueil) .fav{background:rgba(243,203,145,.08);color:#e6c18c}
body:has(#accueil) .fav.on{color:#ffa690;background:rgba(244,130,94,.15)}
body:has(#accueil) .metas{color:#baccdf}
body:has(#accueil) .free{color:#a9e2c4}
body:has(#accueil) .filter{background:#162840;border-color:rgba(217,180,122,.30);color:#c5d3e5}
body:has(#accueil) .filter.selected{background:rgba(239,184,101,.25);border-color:#e8af64;color:#ffe2b3}
body:has(#accueil) .search{background:#142540;border-color:rgba(233,184,117,.30)}
body:has(#accueil) .search input{color:#f8f3ea}
body:has(#accueil) .viewall{color:#f1c481}
body:has(#accueil) .promo,
body:has(#accueil) .heritage-feature{
 background:linear-gradient(115deg,#122c45,#28384a 53%,#46312b);
 border:1px solid rgba(237,185,106,.34);box-shadow:var(--games-elevation)
}
body:has(#accueil) .promo p{color:#d2deea}
body:has(#accueil) .footer{background:#050d1b;border-top:1px solid rgba(234,184,106,.21)}
body:has(#accueil) .notice{color:#c4d0e2}
/* Mobile is the core product: keep dark, legible and dimensional. */
@media(max-width:600px){
 body:has(#accueil){
  color:var(--games-cream);
  background:radial-gradient(ellipse at 10% 1%,rgba(44,92,146,.28),transparent 38%),
   radial-gradient(ellipse at 103% 36%,rgba(203,115,46,.20),transparent 35%),
   linear-gradient(160deg,#07172f,#050e21 52%,#08182f);
 }
 body:has(#accueil)::before{background:radial-gradient(ellipse at 91% 19%,rgba(228,156,60,.10),transparent 38%)}
 body:has(#accueil) .topbar{background:linear-gradient(110deg,rgba(6,16,36,.97),rgba(11,31,58,.96));border-bottom-color:rgba(239,182,98,.42);box-shadow:0 6px 18px rgba(0,5,14,.46)}
 body:has(#accueil) .brandmark{background:#fff9ed;border:1px solid #ebbd72;box-shadow:0 1px 7px rgba(238,178,86,.23)}
 body:has(#accueil) main.shell{background:transparent}
 .mobile-identity{min-height:73px}
 .mobile-greeting{color:#e4be83}
 .mobile-identity strong{color:#fff4e8;text-shadow:0 2px 8px #0006}
 .mobile-identity-profile{border-color:#f4c57d;background:linear-gradient(145deg,#273f5e,#0c1d37);box-shadow:0 3px 11px rgba(1,8,21,.45)}
 .mobile-identity-profile b{color:#ffddaa}
 .mobile-identity-profile>span{color:#f2c27e}
 .mobile-featured{
  border:1.6px solid rgba(255,205,126,.78);
  background:radial-gradient(ellipse at 53% 51%,rgba(231,139,61,.32),transparent 45%),
   radial-gradient(ellipse at 55% 24%,rgba(63,109,167,.32),transparent 52%),
   linear-gradient(142deg,#14294a,#0c1932 57%,#4b2c26);
  box-shadow:0 6px 0 #35231b,0 15px 30px rgba(0,4,13,.66),inset 0 1px 0 rgba(255,225,164,.22);
 }
 .mobile-featured::before{background:repeating-linear-gradient(45deg,transparent 0 30px,rgba(235,177,89,.11) 31px 32px,transparent 33px 60px);opacity:.26}
 .mobile-featured::after{border-color:rgba(235,187,109,.3);box-shadow:0 0 0 15px rgba(248,187,96,.07),0 0 40px rgba(230,136,52,.20)}
 .mobile-gold-corners{border-color:rgba(252,207,126,.44)}
 .mobile-feature-badge{color:#30200d;background:linear-gradient(110deg,#ffdf9e,#f4b557);box-shadow:0 3px 13px rgba(4,9,20,.27)}
 .mobile-feature-crown{color:#f1ca8b;text-shadow:0 1px 8px rgba(255,193,83,.40)}
 .mobile-feature-kicker{color:#f5d49d}
 .mobile-feature-heading h2{color:#fff6e9;text-shadow:0 3px 0 #452b20,0 7px 13px rgba(0,6,17,.70)}
 .mobile-feature-heading h2 span{color:#fff6e5}
 .mobile-feature-heading h2 b,.mobile-feature-heading h2 em{
  background:linear-gradient(#fff2d3 0%,#ffd889 44%,#eb9b3e 90%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,5,14,.35));
 }
 .mobile-stage{filter:drop-shadow(0 15px 14px rgba(0,3,12,.64))}
 .mobile-stage-glow{background:radial-gradient(ellipse at 50% 55%,rgba(245,178,76,.20),transparent 58%)}
 .mobile-perspective-board{border-color:#f6c77a;box-shadow:0 8px 0 #77451c,0 15px 0 rgba(0,5,14,.48),0 20px 30px rgba(0,5,14,.65),inset 0 2px 0 #fff5e0}
 .mobile-feature-foot p{color:#e7e3d7;text-shadow:0 1px 7px #020a1b}
 .mobile-gold-button{color:#231b14;border:1.5px solid #f9dfae;background:linear-gradient(175deg,#ffe9b4,#ffc769 45%,#e88e27);box-shadow:inset 0 2px 0 rgba(255,252,225,.7),0 4px 0 #8d501b,0 11px 19px rgba(2,9,20,.55)}
 .mobile-shortcuts button,.mobile-shortcuts button:nth-child(n){
  border:1px solid rgba(238,188,113,.43);
  background:linear-gradient(150deg,#203857,#14253f);
  color:#f4e4cc;box-shadow:0 6px 15px rgba(0,5,16,.42),inset 0 1px 0 rgba(255,226,172,.12)
 }
 .mobile-shortcuts svg{color:#f3c680;filter:drop-shadow(0 1px 3px rgba(0,5,15,.35))}
 .mobile-shortcuts strong{color:#f8ecdf}
 .mobile-section-head h2{color:#fff5e5;text-shadow:0 2px 7px rgba(0,6,17,.33)}
 .mobile-section-head button{color:#ffcf89}
 .mobile-game-grid .mobile-game-wrap{
  border:1.2px solid rgba(241,195,120,.42);
  background:linear-gradient(150deg,#203654,#11213c);
  box-shadow:inset 0 1px 0 rgba(255,241,193,.10),0 4px 0 #1f2230,0 12px 21px rgba(1,6,17,.55)
 }
 .mobile-game-cover{border-bottom:1px solid rgba(241,193,116,.28);background:linear-gradient(135deg,#254775,#3e3040)}
 .mobile-game-wrap:nth-child(2) .mobile-game-cover{background:linear-gradient(135deg,#205849,#794829)}
 .mobile-game-wrap:nth-child(3) .mobile-game-cover{background:linear-gradient(135deg,#293d73,#57414b)}
 .mobile-game-wrap:nth-child(4) .mobile-game-cover{background:linear-gradient(135deg,#624431,#253b59)}
 .mobile-game-cover img{filter:saturate(1.07) contrast(1.08) drop-shadow(0 6px 6px rgba(0,4,13,.30))}
 .mobile-game-tile{color:#faf4e7}
 .mobile-game-tile>strong{color:#fff5e5;text-shadow:0 2px 4px rgba(0,5,15,.26)}
 .mobile-game-tile>small{color:#c8d7e7}
 .mobile-favorite-action{background:#203650;color:#f1c17b;box-shadow:0 2px 6px rgba(0,6,15,.35)}
 .mobile-favorite-action.is-favorite{background:rgba(237,150,74,.22);color:#ffd398}
 .mobile-category-pills button,.mobile-filter-list button{border:1px solid rgba(239,186,109,.41);background:#142943;color:#f3d1a5;box-shadow:0 4px 8px rgba(0,7,17,.24)}
 .mobile-filter-list button.active{color:#1b2235;background:linear-gradient(155deg,#f9d9a0,#eb9d3f);border-color:#f5c788}
 .mobile-footnote{color:#b8cadd}
 .mobile-inner-heading{background:radial-gradient(ellipse at 100% 0%,rgba(236,150,61,.22),transparent 54%),linear-gradient(130deg,#1e3759,#0b1c35 65%,#302a35);border-color:rgba(243,188,112,.53);box-shadow:0 10px 19px rgba(0,5,16,.48),inset 0 1px 0 rgba(255,223,158,.17)}
 .mobile-inner-heading>span{color:#f2bd73}
 .mobile-inner-heading h2{color:#fff2e4;text-shadow:0 2px 7px #0007}
 .mobile-inner-heading p{color:#c5d7e9}
 body:has(#accueil) .bottomnav{background:linear-gradient(165deg,rgba(16,37,67,.97),rgba(7,19,39,.98));border-top:1px solid rgba(238,185,106,.57);box-shadow:0 -8px 23px rgba(0,5,18,.68)}
 body:has(#accueil) .bottomnav button{color:#b6c6d8}
 body:has(#accueil) .bottomnav button.sel{color:#ffd58b;background:rgba(241,187,99,.13)}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Interaction layer: halos, ripple, shine and restrained 3D tilt. */
.primary, .play, .mobile-gold-button, .mobile-game-tile, .mobile-shortcuts button,
.mobile-category-pills button, .mobile-filter-list button, .game, .mobile-game-wrap {
  position: relative;
  overflow: hidden;
}

.primary, .play, .mobile-gold-button {
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.primary::before, .play::before, .mobile-gold-button::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.62), transparent 58%);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease, transform .24s ease;
  pointer-events: none;
}

.primary::after, .mobile-gold-button::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -80%;
  width: 34%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.66), transparent);
  animation: afro-button-shimmer 5.2s ease-in-out infinite;
  pointer-events: none;
}

.primary:hover, .play:hover, .mobile-gold-button:hover {
  transform: translateY(-3px);
  filter: saturate(1.1) brightness(1.04);
  box-shadow: 0 11px 24px rgba(255,112,67,.28), 0 0 24px rgba(255,112,67,.14);
}

.primary:hover::before, .play:hover::before, .mobile-gold-button:hover::before {
  opacity: 1;
  transform: scale(1);
}

.primary:active, .play:active, .mobile-gold-button:active {
  transform: translateY(1px) scale(.97);
}

@keyframes afro-button-shimmer {
  0%, 58%, 100% { left: -80%; opacity: 0; }
  64% { opacity: 1; }
  74% { left: 145%; opacity: 0; }
}

.game, .mobile-game-wrap {
  transform: perspective(900px) rotateX(var(--afro-tilt-x, 0deg)) rotateY(var(--afro-tilt-y, 0deg));
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

.game::before, .mobile-game-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--afro-shine-x, 50%) var(--afro-shine-y, 50%), rgba(255,255,255,.34), transparent 27%);
  transition: opacity .2s ease;
}

.game:hover, .mobile-game-wrap:hover {
  border-color: rgba(36,87,255,.32);
  box-shadow: 0 19px 36px rgba(36,87,255,.15), 0 0 0 3px rgba(36,87,255,.06);
}

.game:hover::before, .mobile-game-wrap:hover::before { opacity: 1; }

.game .art::after, .mobile-game-cover::after {
  content: "";
  position: absolute;
  inset: -65% 34%;
  z-index: 3;
  transform: rotate(24deg) translateX(-190%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transition: transform .62s ease;
  pointer-events: none;
}

.game:hover .art::after, .mobile-game-wrap:hover .mobile-game-cover::after {
  transform: rotate(24deg) translateX(285%);
}

.afro-touch-ripple {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: afro-touch-ripple .5s ease-out forwards;
}

@keyframes afro-touch-ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}

.afro-favorite-pop { animation: afro-favorite-pop .36s cubic-bezier(.2,1.6,.4,1); }

@keyframes afro-favorite-pop {
  0% { transform: scale(.7) rotate(-12deg); }
  65% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

.afro-hero-visible .primary { animation: afro-hero-pulse 3.8s ease-in-out infinite; }

@keyframes afro-hero-pulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(255,112,67,.24); }
  50% { box-shadow: 0 12px 27px rgba(255,112,67,.4), 0 0 0 7px rgba(255,112,67,.07); }
}

@media (hover: none), (pointer: coarse) {
  .game, .mobile-game-wrap { transform: none !important; }
  .game::before, .mobile-game-wrap::before { display: none; }
  .game .art::after, .mobile-game-cover::after { transform: none; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .primary::after, .mobile-gold-button::after, .afro-hero-visible .primary { animation: none; }
  .game, .mobile-game-wrap, .primary, .play, .mobile-gold-button { transition: none; transform: none; }
  .game::before, .mobile-game-wrap::before, .game .art::after, .mobile-game-cover::after { display: none; }
}


/* On mobile the live WebGL scene provides depth; avoid perpetual compositor
   animations on all catalogue tiles. Tactile feedback on tap remains active. */
@media(max-width:690px){
 .game,.mobile-game-wrap{will-change:auto}
 .afro-hero-visible .primary,
 .primary::after,.mobile-gold-button::after{animation:none}
 .mobile-game-wrap::before,.mobile-game-cover::after{display:none}
 .mobile-game-wrap:hover,.game:hover{box-shadow:0 6px 17px rgba(0,5,17,.35)}
}


/* Public launch UX: visible keyboard access, comfortable touch and support. */
.skip-link{position:fixed;z-index:9999;top:8px;left:8px;padding:12px 18px;border-radius:10px;
 background:#ffe0a0;color:#09203c;font-weight:850;transform:translateY(-170%);transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
body :is(a,button,input,select,[tabindex]):focus-visible{outline:3px solid #ffe1a1!important;outline-offset:3px}
:where(button,a){-webkit-tap-highlight-color:rgba(243,186,103,.19);touch-action:manipulation}
.mobile-trust-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto 27px}
.mobile-trust-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;
 font:750 12px "Avenir Next","Segoe UI",system-ui,sans-serif;color:#ffdaa1;
 border:1px solid rgba(244,195,112,.39);background:rgba(27,50,78,.9);
 text-decoration:none;border-radius:10px}
.mobile-trust-links a:hover{background:#294768;color:#fff0d9}
@media(max-width:600px){
 body:has(#accueil) .mobile-filter-list button,
 body:has(#accueil) .mobile-category-pills button,
 body:has(#accueil) .mobile-outline-button,
 body:has(#accueil) .mobile-favorite-action{min-height:44px}
 body:has(#accueil) .mobile-filter-list button{padding-block:9px}
 body:has(#accueil) .mobile-favorite-action{min-width:44px}
 body:has(#accueil) .bottomnav button{min-height:48px}
 body:has(#accueil) #contenu{scroll-margin-top:85px}
}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}