/*
 * MOBI GAMES / Studio system — 2026.11
 * Editorial direction: tactile, precise, warm; deliberate visual hierarchy.
 * Only real game content. Avoid emoji iconography and invented activity.
 * Consolidated visual overrides live here; base styles remain in styles.css.
 */
:root{
 --studio-navy:#0b1428;
 --studio-navy-2:#14223b;
 --studio-surface:#192a45;
 --studio-stroke:rgba(226,234,247,.12);
 --studio-gold:#ecb96c;
 --studio-text:#f4f1e9;
 --studio-sub:#bdc9db;
 --studio-paper:#f1eee6;
 --studio-radius:16px;
}
.ui-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto}
body:has(#accueil){background:var(--studio-navy);color:var(--studio-text)}
body:has(#accueil) .shell{max-width:1200px}
body:has(#accueil) .topbar{height:76px;background:#0c1526f5;box-shadow:none;border-bottom:1px solid var(--studio-stroke);backdrop-filter:blur(18px)}
body:has(#accueil) .navwrap{gap:18px}
body:has(#accueil) .brand{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:850;font-size:23px;letter-spacing:-1.1px;gap:9px}
body:has(#accueil) .brand b{color:var(--studio-gold)}
body:has(#accueil) .brandmark,
.footer .brandmark{width:41px;height:41px;border-radius:11px;background:none;transform:none;box-shadow:none;overflow:hidden;flex-shrink:0;display:grid;place-items:center}
.brandmark img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
body:has(#accueil) .navlink{border:1px solid transparent;padding:9px 13px;color:#b8c4d4;border-radius:10px;font-size:13px;font-weight:650}
body:has(#accueil) .navlink.active,body:has(#accueil) .navlink:hover{border-color:#e0af6855;background:#e6b36c16;color:#f0d4a9}
body:has(#accueil) .navright{gap:9px}
body:has(#accueil) .navright .primary{padding:10px 24px;min-height:42px}
body:has(#accueil) .pill{border:1px solid var(--studio-stroke);font-size:12px;background:#142139;border-radius:10px}
body:has(#accueil) .primary{border-radius:12px;font-weight:800;box-shadow:none;background:linear-gradient(120deg,#eec87f,#e8ab56);color:#162137;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .17s,filter .17s;min-height:47px}
body:has(#accueil) .primary:hover{filter:brightness(1.08);box-shadow:none;transform:translateY(-1px)}
body:has(#accueil) .hero{margin-top:26px;min-height:455px;border-radius:21px;background:radial-gradient(ellipse at 83% 59%,#855d4261,transparent 46%),linear-gradient(116deg,#17233a 5%,#1d2b41 51%,#473b43 100%);border:1px solid #dfb67b45;box-shadow:none;grid-template-columns:1fr 1fr}
body:has(#accueil) .hero:before{background:linear-gradient(90deg,#09132220,transparent 70%);pointer-events:none}
body:has(#accueil) .hero:after{opacity:.21}
body:has(#accueil) .herocopy{padding:66px 22px 55px 57px;position:relative;z-index:6}
body:has(#accueil) .hero .eyebrow{display:inline-flex;gap:10px;align-items:center;color:#d7c4a6;font-size:10px;letter-spacing:2px;font-weight:800;background:none;border:0;padding:0}
.eyebrow-line{display:block;width:23px;height:1px;background:#e8b76b}
body:has(#accueil) .hero h1{max-width:500px;margin:20px 0 20px;font-size:clamp(38px,4.1vw,57px);letter-spacing:-2.5px;line-height:1.07;font-weight:850;text-shadow:none}
body:has(#accueil) .hero h1 em{color:#e6bb7d;font-style:normal;text-shadow:none}
body:has(#accueil) .hero p{font-size:15px;line-height:1.76;max-width:410px;color:#d0d8e4}
body:has(#accueil) .heroactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
body:has(#accueil) .heroactions button{font-size:13px}
body:has(#accueil) .heroactions .primary{padding:12px 18px}
body:has(#accueil) .secondaryDark{border:1px solid #dce5f341;background:#15223a99;border-radius:11px;color:#e5ebf4;font-weight:700}
body:has(#accueil) .share-quiet{border-color:transparent;background:transparent;color:#c0cada}
body:has(#accueil) .hero .hero-fineprint{margin:20px 0 0;color:#a5b6ce;font-size:11px;letter-spacing:.12px}
body:has(#accueil) .herovis{min-height:435px;background:radial-gradient(ellipse at 53% 60%,#e0a4642b,transparent 55%)}
body:has(#accueil) .hero3d-viewport{inset:25px 2px 2px -10px}
body:has(#accueil) .hero3d-light{background:radial-gradient(circle at 50% 49%,#e2a35d2c,transparent 60%);filter:blur(14px)}
body:has(#accueil) .hero3d-title{top:15px;left:auto;right:20px;text-align:right;transform:none}
body:has(#accueil) .hero3d-title span{font-size:9px;letter-spacing:1.7px;color:#dfcaaa}
body:has(#accueil) .hero3d-title strong{font:850 clamp(18px,2.3vw,28px) "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-1px;text-shadow:0 3px 20px #0d1728}
body:has(#accueil) .hero3d-title b{color:#e6b16c}
/* Proof, not fabricated vanity metrics. */
body:has(#accueil) .proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.4fr;gap:0;margin:0;padding:26px 2px 23px;border-bottom:1px solid var(--studio-stroke)}
body:has(#accueil) .proof-strip .stat{border:0;border-radius:0;background:none;box-shadow:none;padding:3px 16px 3px 0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
body:has(#accueil) .proof-strip .stat strong{font-size:24px;letter-spacing:-.9px;line-height:1.05;font-weight:830;color:#ecc27e;font-variant-numeric:tabular-nums}
body:has(#accueil) .proof-strip .stat span{font-size:12px;color:#bfcee2}
body:has(#accueil) .proof-strip .proof-note{font-size:12px;font-style:italic;line-height:1.7;color:#9eafc8;margin:auto 0;padding-left:20px;border-left:1px solid var(--studio-stroke)}
.section-index{font-size:10px;letter-spacing:2.2px;font-weight:850;color:#ddb47a;display:block;margin-bottom:10px}
body:has(#accueil) .category-section{margin-top:58px}
body:has(#accueil) .sectionhead{align-items:flex-end;gap:15px;margin-bottom:20px}
body:has(#accueil) .sectionhead h2{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-size:clamp(25px,2.7vw,35px);font-weight:850;letter-spacing:-1.4px}
body:has(#accueil) .sectionhead p{font-size:13px;color:#acbcd3;line-height:1.65}
body:has(#accueil) .category-tiles{gap:12px}
body:has(#accueil) .category-tile{min-height:147px;padding:18px;border:1px solid #d9e2f122;background:linear-gradient(155deg,#1d2d47,#14233b);border-radius:15px;box-shadow:none;transform:none;transition:border-color .18s,background .18s,transform .18s}
body:has(#accueil) .category-tile:nth-child(2){background:linear-gradient(155deg,#21314a,#17253a)}
body:has(#accueil) .category-tile:nth-child(3){background:linear-gradient(155deg,#233b45,#192f40)}
body:has(#accueil) .category-tile:nth-child(4){background:linear-gradient(155deg,#2a2f44,#1b2740)}
body:has(#accueil) .category-tile:hover,body:has(#accueil) .category-tile:focus-visible{border-color:#e5b76d86;box-shadow:none;transform:translateY(-2px)}
body:has(#accueil) .category-tile .category-visual{position:absolute;top:14px;right:16px;width:42px;height:42px;display:grid;place-items:center;color:#e8bd7c;background:#f2c58316;border:1px solid #e5b87d36;border-radius:12px;text-shadow:none;filter:none;transform:none}
body:has(#accueil) .category-tile .ui-icon{width:23px;height:23px}
body:has(#accueil) .category-tile strong{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-size:17px;letter-spacing:-.5px;line-height:1.1}
body:has(#accueil) .category-tile small{font-size:11px;color:#aebfd4;margin-top:3px}
body:has(#accueil) .section{margin-top:62px}
body:has(#accueil) .viewall{font-size:12px;display:flex;align-items:center;gap:7px;color:#e3b978}
body:has(#accueil) .viewall .ui-icon{width:15px;height:15px}
body:has(#accueil) .filters{gap:8px}
body:has(#accueil) .filter{font-size:12px;min-height:39px;border-radius:10px;background:#17253b;border:1px solid #d0dff42b;color:#c4d0df;padding:8px 13px}
body:has(#accueil) .filter.selected{border-color:#dcaf71;background:#d6a7601d;color:#f0cc91;box-shadow:none}
body:has(#accueil) .search{border:1px solid #cfdaeb34;border-radius:10px;background:#17253b;padding:0 12px;font-size:18px}
body:has(#accueil) .search input{font-size:12px;color:#eef2f7}
body:has(#accueil) .games{gap:17px}
body:has(#accueil) .game{border:1px solid #e5e9f122;background:#17263e;border-radius:15px;box-shadow:none;overflow:hidden;transform:none;transition:border-color .18s,transform .18s,box-shadow .18s}
body:has(#accueil) .game:hover{border-color:#dcb16c80;transform:translateY(-3px);box-shadow:0 14px 36px #060d1b54}
body:has(#accueil) .art{height:190px;background:#17233a;border-bottom:1px solid #f0f3f322}
body:has(#accueil) .art:before{opacity:.25}
body:has(#accueil) .art img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.03)}
body:has(#accueil) .gamebody{padding:17px}
body:has(#accueil) .gametop{margin-bottom:9px}
body:has(#accueil) .tag{padding:5px 8px;border:1px solid #d4b47c3d;border-radius:7px;background:#b5996120;color:#e3c38e;text-transform:none;letter-spacing:.15px;font-size:10px;font-weight:750}
body:has(#accueil) .fav{width:34px;height:34px;border:1px solid #bacce327;border-radius:50%;display:grid;place-items:center;color:#aab8d1;background:transparent}
body:has(#accueil) .fav .ui-icon{width:17px;height:17px}
body:has(#accueil) .fav.on .ui-icon{fill:#e1a36b;stroke:#e1a36b}
body:has(#accueil) .game h3{font-size:19px;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-.6px;font-weight:830;color:#f6f4ee}
body:has(#accueil) .game p{font-size:12px;line-height:1.6;color:#b3c1d5;min-height:40px}
body:has(#accueil) .metas{display:flex;flex-wrap:wrap;gap:4px 12px;color:#acbed6;font-size:10px;min-height:16px}
body:has(#accueil) .gamefoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
body:has(#accueil) .free{font-size:11px;color:#9accb3;font-weight:700}
body:has(#accueil) .play{display:flex;align-items:center;gap:9px;justify-content:center;border-radius:9px;background:#e7b876;color:#152238;font-weight:800;font-size:12px;padding:10px 13px;min-height:39px;box-shadow:none}
body:has(#accueil) .play:hover{background:#f3c887}
body:has(#accueil) .play .ui-icon{width:15px;height:15px}
body:has(#accueil) .heritage-feature{margin-top:66px;min-height:289px;border-radius:17px;display:grid;grid-template-columns:1.2fr .8fr;background:linear-gradient(115deg,#182b40,#2b373e);border:1px solid #bfab8336;box-shadow:none;overflow:hidden}
body:has(#accueil) .heritage-feature:before{background:radial-gradient(ellipse at 85% 50%,#b98c4f37,transparent 61%)}
body:has(#accueil) .heritage-feature .promocopy{padding:35px 43px;max-width:650px}
body:has(#accueil) .heritage-feature .section-index{color:#ddc090}
body:has(#accueil) .heritage-feature h2{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:810;font-size:clamp(23px,2.8vw,34px);letter-spacing:-1px;line-height:1.17;max-width:560px}
body:has(#accueil) .heritage-feature p{font-size:13px;line-height:1.72;color:#c7d6e3;max-width:490px}
body:has(#accueil) .heritage-feature .primary{margin-top:13px}
body:has(#accueil) .heritage-art{display:grid;place-items:center;position:relative;padding:25px 22px;min-height:245px}
.oware-sculpture{display:grid;grid-template-columns:repeat(6,1fr);gap:11px 8px;position:relative;width:min(100%,340px);padding:23px 17px;border-radius:48px;background:linear-gradient(136deg,#c7914f,#8a552f 45%,#d0a26c);border:5px solid #e2b57a;box-shadow:0 12px 0 #4f341f,0 23px 25px #050d1f83,inset 0 3px 6px #fff5;transform:perspective(550px) rotateX(21deg) rotateZ(-7deg)}
.oware-sculpture .pit{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 65%,#57331c,#291a12 75%);box-shadow:inset 2px 4px 7px #0009,0 2px 2px #ffffff44;display:flex;align-items:center;justify-content:center;position:relative}
.oware-sculpture .pit i{width:16%;height:24%;background:radial-gradient(circle at 33% 25%,#fff1d8,#b39a73 60%,#6a5038);border-radius:50%;box-shadow:1px 2px 2px #0005;display:block;transform:rotate(17deg)}
.oware-sculpture .pit i:nth-child(2){transform:translate(-2px,-4px) rotate(-20deg)}
.oware-sculpture .pit i:nth-child(3){transform:translate(-1px,5px) rotate(42deg)}
body:has(#accueil) .quieter-section .highlights{gap:15px}
body:has(#accueil) .highlight{padding:21px 22px;background:#14233a;border:1px solid #c5d2e320;border-radius:14px;box-shadow:none}
body:has(#accueil) .highlight-number{color:#ddb276;font-size:12px;letter-spacing:2px;font-weight:850;display:block;margin:0 0 18px}
body:has(#accueil) .highlight h3{font-size:17px;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:800;letter-spacing:-.3px;color:#f4f1e9}
body:has(#accueil) .highlight p{font-size:12px;line-height:1.68;color:#a9bbd1}
body:has(#accueil) .daily-preview{margin-top:44px}
body:has(#accueil) .daily-mission{border-radius:14px;background:#233044;border:1px solid #c9a8753b;padding:20px 24px}
body:has(#accueil) .daily-mission .eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;background:none;border:0;color:#d9b27d;padding:0}
body:has(#accueil) .daily-mission h3{font-size:22px;letter-spacing:-.7px;font-weight:830;margin:8px 0 3px;color:#f7f3ed}
body:has(#accueil) .daily-mission p{color:#b7c6da}
body:has(#accueil) .daily-mission strong{color:#eed0a0}
body:has(#accueil) .daily-medal{font:800 34px "Avenir Next","Segoe UI",system-ui,sans-serif;border:1px solid #e0bf8439;border-radius:50%;width:66px;height:66px;display:grid;place-items:center;color:#d5b17d;background:#e1b7741a}
body:has(#accueil) .progress-metrics>div{border:1px solid #b8c9e326;background:#14253c}
body:has(#accueil) .progress-metrics strong{color:#eed4a8;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}
body:has(#accueil) .progress-title{color:#eff2f5}
body:has(#accueil) .achievement{border-radius:12px;border:1px solid #d7e3f122;background:#16263f;color:#c8d2e3;filter:none;opacity:.62}
body:has(#accueil) .achievement.unlocked{border-color:#e4b77563;background:#3c302d;color:#f5ecd6;opacity:1}
body:has(#accueil) .achievement span{font:800 23px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:1px;color:#e2b879}
body:has(#accueil) .rank-initial{display:grid;place-items:center;flex:0 0 35px;height:35px;border-radius:10px;background:#273b55;color:#e5c38d!important;font-weight:850}
body:has(#accueil) .notice{font-size:12px;color:#b6c4d6}
body:has(#accueil) .footer{margin-top:70px;background:#081225;border-top:1px solid #dddca522}
body:has(#accueil) .footer p{line-height:1.7;color:#a7b9d0}
body:has(#accueil) .footlinks a{color:#c5d0df}
/* Game state: quiet hierarchy without changing the 3D renderer */
.dialog:has(.royale) .dlghead{background:#0b162a;border-bottom:1px solid #ffffff25}
.dialog:has(.royale) .dlghead strong{font:800 15px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-.25px}
.royale{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}
.royale .royale-kicker{font-weight:800;letter-spacing:1.3px;font-size:9px;color:#ddb780}
.royale .royale-signature h2{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-.8px}
.royale .royale-local-badge{font-size:9px;letter-spacing:.4px;border-radius:8px;border-color:#d3dfe13b;background:#eaeae10b;color:#c7dbda}
.royale .royale-star{width:48px;height:48px;border-radius:12px;background:#ddad64;color:#13223a;box-shadow:none;transform:none}
.royale .royale-mode-list{gap:8px}
.royale .royale-mode{min-height:68px;border-radius:11px;background:#ffffff08;border:1px solid #ffffff26;transform:none;box-shadow:none}
.royale .royale-mode:hover{transform:none;background:#ffffff12}
.royale .royale-mode.current{border-color:#d9b276;background:#d9b2761c;box-shadow:inset 0 0 0 1px #d9b27626}
.royale .royale-mode>span{font:850 13px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-.3px;color:#d6b57e}
.royale .royale-mode strong{font:800 12px "Avenir Next","Segoe UI",system-ui,sans-serif}
.royale .royale-mode small{font-size:10px;color:#b1bfd2}
.royale .royale-player{background:#152541;border-color:#ffffff1d;border-radius:11px}
.royale .royale-player.turn{box-shadow:inset 0 0 0 1px #edc27b,0 0 0 1px #edc27b;transform:none}
.royale .royale-avatar{font:850 11px "Avenir Next","Segoe UI",system-ui,sans-serif;border:0;border-radius:50%;width:34px;height:34px;box-shadow:inset 0 1px 3px #fff5}
.royale .royale-turn{border-radius:15px;background:linear-gradient(155deg,#1d2e4b,#22344d);box-shadow:none}
.royale .royale-roll{border-radius:11px;box-shadow:0 4px 0 #9a692f,0 8px 15px #050d243d;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}
.royale .royale-dice{border-radius:18px}
.royale .royale-save-box,.royale .royale-utility,.royale .royale-history{border-radius:12px}
.royale .royale-share{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-size:12px}
.royale .royale-theme{border-radius:8px}
.royale .victory-crown{font-size:13px;font-weight:900;letter-spacing:2px;color:#ffe6b3;border:1px solid #e2b9776b;background:#d8a36620;padding:16px 12px;border-radius:10px;max-width:140px;margin:0 auto;animation:none}
.royale .royale-disclaimer{color:#a6b5cc}
body:has(#accueil) button:focus-visible{outline:2px solid #eac084;outline-offset:3px}
@media(max-width:900px){
 body:has(#accueil) .topbar{height:67px}
 body:has(#accueil) .hero{grid-template-columns:1.1fr .9fr}
 body:has(#accueil) .herocopy{padding:42px 18px 40px 34px}
 body:has(#accueil) .hero h1{font-size:43px}
 body:has(#accueil) .proof-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}
 body:has(#accueil) .proof-strip .proof-note{grid-column:1/-1;border-left:0;border-top:1px solid var(--studio-stroke);padding:12px 0 0}
}
@media(max-width:600px){
 body:has(#accueil) .topbar{height:61px}
 body:has(#accueil) .brand{font-size:19px;gap:5px}
 body:has(#accueil) .brandmark{width:34px;height:34px}
 body:has(#accueil) .navright .primary{padding:8px 15px;min-height:38px}
 body:has(#accueil) .hero{display:block;min-height:585px;margin-top:15px;border-radius:18px}
 body:has(#accueil) .herocopy{padding:30px 23px 0}
 body:has(#accueil) .hero h1{font-size:43px;max-width:315px;margin:17px 0}
 body:has(#accueil) .hero p{font-size:13px;max-width:340px}
 body:has(#accueil) .heroactions{gap:8px;margin-top:17px}
 body:has(#accueil) .heroactions button{font-size:12px}
 body:has(#accueil) .share-quiet{display:none}
 body:has(#accueil) .hero .hero-fineprint{font-size:10px;margin-top:13px}
 body:has(#accueil) .herovis{min-height:258px;height:258px}
 body:has(#accueil) .hero3d-viewport{inset:0}
 body:has(#accueil) .hero3d-title{top:2px;right:12px}
 body:has(#accueil) .hero3d-title strong{font-size:19px}
 body:has(#accueil) .proof-strip{margin:0;padding:18px 1px;gap:4px 7px}
 body:has(#accueil) .proof-strip .stat{padding-right:2px}
 body:has(#accueil) .proof-strip .stat strong{font-size:19px}
 body:has(#accueil) .proof-strip .stat span{font-size:10px}
 body:has(#accueil) .proof-strip .proof-note{font-size:11px;line-height:1.5;padding-top:11px}
 body:has(#accueil) .category-section{margin-top:40px}
 body:has(#accueil) .section{margin-top:46px}
 body:has(#accueil) .category-tiles{gap:9px}
 body:has(#accueil) .category-tile{min-height:128px;padding:15px 12px}
 body:has(#accueil) .category-tile .category-visual{width:37px;height:37px;right:11px;top:11px}
 body:has(#accueil) .category-tile strong{font-size:15px}
 body:has(#accueil) .category-tile small{font-size:10px}
 body:has(#accueil) .art{height:130px}
 body:has(#accueil) .games{gap:11px}
 body:has(#accueil) .gamebody{padding:12px 11px}
 body:has(#accueil) .game h3{font-size:16px;line-height:1.2}
 body:has(#accueil) .game p{font-size:11px;min-height:65px}
 body:has(#accueil) .metas{font-size:10px}
 body:has(#accueil) .gamefoot .free{font-size:10px}
 body:has(#accueil) .play{min-height:36px;padding:8px 10px}
 body:has(#accueil) .heritage-feature{grid-template-columns:1fr;margin-top:47px;min-height:0}
 body:has(#accueil) .heritage-feature .promocopy{padding:25px 24px 0}
 body:has(#accueil) .heritage-feature h2{font-size:27px}
 body:has(#accueil) .heritage-art{min-height:180px;padding:20px 20px 31px}
 .oware-sculpture{width:min(92%,285px);padding:16px;gap:8px}
 body:has(#accueil) .quieter-section .highlights{gap:9px}
 body:has(#accueil) .highlight{padding:16px}
 body:has(#accueil) .highlight-number{margin-bottom:10px}
 body:has(#accueil) .daily-mission{padding:16px}
 body:has(#accueil) .daily-medal{width:50px;height:50px;font-size:26px}
 body:has(#accueil) .bottomnav{background:#0e1d32;border-top-color:#d5dde92c;box-shadow:0 -4px 18px #050c1c80}
 body:has(#accueil) .bottomnav button{color:#acbfd6;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px}
 body:has(#accueil) .bottomnav button .ui-icon{width:19px;height:19px}
 body:has(#accueil) .bottomnav button span{font-size:10px}
 body:has(#accueil) .bottomnav button.sel{color:#ebc083}
}
@media(max-width:355px){
 body:has(#accueil) .brand{font-size:17px}
 body:has(#accueil) .hero h1{font-size:37px}
 body:has(#accueil) .heroactions .primary{padding:11px 12px}
 body:has(#accueil) .heroactions button{font-size:11px}
 body:has(#accueil) .category-tile strong{font-size:14px}
 body:has(#accueil) .game p{min-height:81px}
}
@media(prefers-reduced-motion:reduce){body:has(#accueil) .category-tile:hover,body:has(#accueil) .game:hover{transform:none}}


/* Memory: a real set of original symbols and raised card material. */
.memoryboard{gap:11px;perspective:900px}
.memoryboard .mem{aspect-ratio:1;border-radius:12px;border:1px solid #f0ca8940;box-shadow:0 5px 0 #091a35,0 10px 18px #050e2226,inset 0 1px 0 #ffffff4a;background:linear-gradient(145deg,#1c3153,#344b68);display:grid;place-items:center;font-size:22px;transform-style:preserve-3d;transition:transform .2s ease,background .2s ease;position:relative;overflow:hidden;touch-action:manipulation}
.memoryboard .mem:before{content:"";position:absolute;width:75%;height:75%;border:1px solid #c9af8166;border-radius:8px;transform:rotate(45deg);pointer-events:none}
.memoryboard .mem:hover{transform:translateY(-2px)}
.memoryboard .mem.up{background:linear-gradient(145deg,#fff5df,#e9d6b7);border-color:#d5bc8b;color:#324863;transform:rotateY(3deg)}
.memoryboard .mem.matched{background:linear-gradient(145deg,#d9ecdf,#cae4dc);border-color:#7bb99b;color:#305947;box-shadow:0 3px 0 #588a79,0 6px 12px #050e2229}
.memoryboard .mem:disabled{opacity:1}
.memory-cover{font:900 32px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-2px;color:#e3c38c;transform:rotate(-8deg);text-shadow:0 2px 6px #020d22}
.memory-glyph{width:48%;height:48%;max-width:56px;color:#645239;filter:drop-shadow(0 2px 1px #ffffffa3)}
.memoryboard .mem.matched .memory-glyph{color:#317455}
@media(max-width:600px){.memoryboard{gap:8px}.memoryboard .mem{border-radius:9px}.memory-cover{font-size:25px}.memory-glyph{max-width:38px}}

/* Identité officielle MOBI GAMES — fichier approuvé le 03/11/2026.
   Tous les visuels sont des cadrages de l'image validée, jamais redessinés. */
body:has(#accueil) .brandmark,.brandmark{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0003;overflow:hidden}
.brandmark img{object-fit:contain;width:100%;height:100%;display:block}
.brandwordmark{width:136px;height:30px;object-fit:contain;background:#fff;border-radius:5px;padding:2px;display:block;flex:0 0 auto}
.official-full-logo{width:156px;height:156px;object-fit:contain;background:#fff;border-radius:12px;display:block}
.footer-official-brand{display:block;width:max-content}
@media(max-width:420px){.brandwordmark{width:112px;height:25px}.navwrap{gap:5px}}
@media(max-width:355px){.brandwordmark{width:103px;height:23px}.brandmark{width:30px!important;height:30px!important}}