/* MOBI GAMES · ROYALE visual system 2026.11.03
 * Reference: DG-approved cinematic navy/amber game concept.
 * The official logo files are preserved unmodified. No fabricated players,
 * balances, tournament entrants or payment functionality.
 */
:root{
 --royal-night:#050e20;--royal-navy:#091931;--royal-deep:#081329;
 --royal-blue:#15345c;--royal-gold:#ffcb56;--royal-orange:#ff951c;
 --royal-fire:#ffad36;--royal-text:#fff6e8;--royal-muted:#b9cce6;
 --royal-stroke:rgba(244,192,89,.29);--royal-elevation:0 20px 38px #010915af;
}
html{scroll-padding-top:83px}
body:has(#accueil){background:
 radial-gradient(ellipse at 10% 2%,#1b41648c 0,transparent 30%),
 radial-gradient(ellipse at 95% 20%,#8a471c3e 0,transparent 35%),
 linear-gradient(180deg,#07162c 0%,#050c1c 55%,#0b172b 100%);
 background-attachment:fixed;color:var(--royal-text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body:has(#accueil)::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
 background:repeating-linear-gradient(135deg,transparent 0 38px,#e5a64b16 39px 40px,transparent 41px 79px),
 repeating-linear-gradient(45deg,transparent 0 38px,#f5c56f08 39px 40px,transparent 41px 79px)}
body:has(#accueil) .topbar{background:#061229f5;border-bottom:1px solid #f9be6561;box-shadow:0 2px 25px #0009,0 1px 0 #ffdf8f18;height:80px}
body:has(#accueil) .navwrap{max-width:1280px}
body:has(#accueil) .brandmark{border:1px solid #e7b34d;border-radius:10px;background:#f8f8f8;box-shadow:0 0 0 2px #cf912c30,0 2px 16px #fdb94d3c}
body:has(#accueil) .brandwordmark{width:153px;height:36px;border:1px solid #bd933662;border-radius:6px;background:white}
body:has(#accueil) .navlink{color:#d2ddec;font-weight:750;font-size:13px}
body:has(#accueil) .navlink.active,body:has(#accueil) .navlink:hover{color:#ffd784;border-color:#f5b6538f;background:linear-gradient(180deg,#ffca532b,#ef85100a);box-shadow:inset 0 1px 0 #ffe5a325}
body:has(#accueil) .primary,.royale-primary{
 color:#1a1824;background:linear-gradient(180deg,#fff2a7 0,#ffcd4e 18%,#ffad22 53%,#ed7811 100%);
 border:1px solid #ffe68b!important;font-weight:900;letter-spacing:-.02em;
 border-radius:16px;box-shadow:inset 0 2px 1px #fff6c1cc,inset 0 -3px 0 #a64d0b91,0 6px 0 #713a1b4d,0 8px 23px #fba9275c;
 text-shadow:0 1px 0 #fff2bc96;min-height:48px;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
body:has(#accueil) .primary:hover,.royale-primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:inset 0 2px 1px #fff9d1,0 9px 27px #fba9279c}
body:has(#accueil) .primary:active,.royale-primary:active{transform:translateY(2px)}
body:has(#accueil) .navright .primary{min-height:40px;border-radius:12px}
body:has(#accueil) .pill{background:linear-gradient(160deg,#193453,#0b1c36);color:#e5eaf4;border-color:#ecc27a55;box-shadow:inset 0 1px 0 #ffffff0c}
body:has(#accueil) .hero{position:relative;margin-top:21px;min-height:490px;overflow:hidden;isolation:isolate;grid-template-columns:1fr 1fr;
 background:radial-gradient(ellipse at 81% 82%,#dc622f9e 0,transparent 35%),
 radial-gradient(ellipse at 54% 22%,#2d5380cc 0,transparent 42%),
 linear-gradient(122deg,#09162c 0,#09254a 52%,#301b25 100%);
 border:2px solid #e4a53b83;border-radius:24px;
 box-shadow:0 24px 60px #000b,0 0 35px #bd6e2333,inset 0 2px 0 #fff0bc3e}
body:has(#accueil) .hero:before{
 background:linear-gradient(135deg,transparent 0 9%,#d59a3b19 9% 10%,transparent 10% 17%,#cc9a3b13 17% 18%,transparent 18%),
 repeating-linear-gradient(45deg,transparent 0 12px,#f1bd5633 12px 14px,transparent 14px 26px);
 opacity:.4;z-index:-1;mask-image:linear-gradient(100deg,transparent 25%,#000 100%)}
body:has(#accueil) .hero:after{content:"";position:absolute;width:60%;height:130%;top:-40%;right:-17%;
 border:2px solid #ffc87854;border-radius:50%;transform:rotate(17deg);box-shadow:0 0 0 34px #f4ae2912,0 0 0 72px #ffd5660a;z-index:-1;opacity:.65}
body:has(#accueil) .herocopy{padding:68px 13px 62px 61px;max-width:650px}
body:has(#accueil) .hero .eyebrow{display:inline-flex;background:#170f0f8a;border:1px solid #ffd57b8d;border-radius:100px;
 padding:7px 14px;color:#ffe09e;font-size:10px;letter-spacing:1.2px;font-weight:950;box-shadow:0 0 20px #ffae361c}
body:has(#accueil) .eyebrow-line{background:#f2a833}
body:has(#accueil) .hero h1{font-family:system-ui,-apple-system,sans-serif;font-style:normal;font-size:clamp(42px,4.6vw,65px);
 font-weight:1000;line-height:1.03;letter-spacing:-.055em;text-transform:uppercase;color:white;
 text-shadow:0 3px 1px #050d19,0 8px 20px #000c;max-width:530px;margin:25px 0 17px}
body:has(#accueil) .hero h1 em{font-style:normal;color:#ffcf71;background:linear-gradient(#fff6b0,#ffc455 45%,#f18a21 76%,#d26a11);
 background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #4b230c)}
body:has(#accueil) .hero p{font-size:15px;line-height:1.7;color:#fff1dd;text-shadow:0 2px 3px #050e17;max-width:455px}
body:has(#accueil) .hero .hero-fineprint{color:#f7d69d;font-weight:680;font-size:11px;letter-spacing:.02em}
body:has(#accueil) .heroactions{gap:14px}
body:has(#accueil) .heroactions .primary{padding:15px 24px;font-size:14px}
body:has(#accueil) .secondaryDark{background:#08162daf;border:1px solid #ffc66d76;color:#ffe9ba;border-radius:15px;box-shadow:inset 0 1px 0 #fff2c319}
body:has(#accueil) .herovis{min-height:460px;background:radial-gradient(ellipse at 51% 55%,#ffb63e6a 0,#e05b1f34 23%,transparent 61%);filter:saturate(1.1)}
body:has(#accueil) .hero3d-viewport{inset:5px 0 0 -5px}
body:has(#accueil) .hero3d-title{top:24px;right:22px;z-index:5}
body:has(#accueil) .hero3d-title span{color:#ffe4a7;font-weight:850;letter-spacing:1.7px}
body:has(#accueil) .hero3d-title strong{font-weight:1000;color:white;text-shadow:0 3px 0 #120e1a,0 6px 15px #010511}
body:has(#accueil) .hero3d-title b{color:#ffbd43;text-shadow:0 2px 0 #5b2804,0 5px 16px #f59230bd}
.royale-banner-mark{display:flex;align-items:center;gap:9px;font-size:.76rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#ffd37f}
.royale-banner-mark:before{content:"♛";font-size:24px;color:#ffbc41;text-shadow:0 0 14px #ffae42}
body:has(#accueil) .proof-strip{border-bottom:1px solid #edb86163;gap:13px;padding:29px 4px 25px}
body:has(#accueil) .proof-strip .stat{padding:7px 6px 7px 14px;border-left:2px solid #d88c344d}
body:has(#accueil) .proof-strip .stat strong{color:#ffcb67;text-shadow:0 0 18px #f3a73c57;font-size:26px;font-weight:1000}
body:has(#accueil) .proof-strip .stat span{color:#d9e2ed}
body:has(#accueil) .proof-strip .proof-note{color:#d4b78d;border-left:1px solid #e7ad5471;font-style:normal;font-weight:650}
body:has(#accueil) .category-section{margin-top:65px}
body:has(#accueil) .sectionhead h2,.royale-panel h2{color:#fff8e9;font-size:clamp(27px,3vw,37px);
 font-weight:900;letter-spacing:-.045em;text-shadow:0 2px 8px #0008}
body:has(#accueil) .section-index{font-size:11px;letter-spacing:1.7px;font-weight:900;color:#ffce67}
body:has(#accueil) .sectionhead p{color:#bfcee0;font-size:14px}
body:has(#accueil) .category-tile{border-radius:19px;min-height:159px;
 border:1px solid #ffc76653;background:linear-gradient(138deg,#213d63 0%,#111f3d 65%,#09162f 100%);
 box-shadow:inset 0 1px 0 #ffffff30,inset 0 -5px 0 #0004,0 12px 24px #0006;overflow:hidden}
body:has(#accueil) .category-tile:nth-child(2){background:linear-gradient(135deg,#343461,#1b1b46,#101536)}
body:has(#accueil) .category-tile:nth-child(3){background:linear-gradient(135deg,#163d43,#10352f,#061e26)}
body:has(#accueil) .category-tile:nth-child(4){background:linear-gradient(135deg,#453221,#32232b,#111b31)}
body:has(#accueil) .category-tile:before{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 43%,#ffffff16 50%,transparent 58%);transform:translateX(-50%) rotate(12deg);transition:transform .4s}
body:has(#accueil) .category-tile:hover:before{transform:translateX(38%) rotate(12deg)}
body:has(#accueil) .category-tile:hover{border-color:#ffbf5e;box-shadow:0 0 0 1px #ffdb86ad,0 14px 30px #f29a2233;transform:translateY(-3px)}
body:has(#accueil) .category-tile .category-visual{width:48px;height:48px;border:1px solid #ffce689b;background:radial-gradient(circle at 35% 22%,#ffe79b63,#ee871c28 60%,#4d1c08);
 box-shadow:inset 0 1px 1px #fff9b5a4,0 0 16px #f9a52c49;color:#ffdc91}
body:has(#accueil) .category-tile strong{font-size:18px;font-weight:900;color:#fffaf0;text-shadow:0 2px 6px #000a}
body:has(#accueil) .category-tile small{color:#e2cfb6}
body:has(#accueil) .filters{gap:9px}
body:has(#accueil) .filter{border-radius:999px;color:#dce6f4;background:#112543;border:1px solid #f6c66545;box-shadow:inset 0 1px 0 #fff1a61a}
body:has(#accueil) .filter.selected{color:#281b0f;background:linear-gradient(#ffe39a,#e89729);box-shadow:inset 0 1px 0 #fff8cf,0 2px 14px #f6ae3d6f;border-color:#ffdf85;font-weight:900}
body:has(#accueil) .search{background:#102443;border-color:#ffcc6e56;border-radius:13px}
body:has(#accueil) .search input{color:#fff8e9;font-size:13px}
body:has(#accueil) .viewall{color:#ffcd72;font-weight:900}
body:has(#accueil) .games{gap:19px}
body:has(#accueil) .game{background:linear-gradient(160deg,#1b3152 0,#0b1831 65%,#101b35 100%);
 border:1.4px solid #ffc66669;border-radius:20px;
 box-shadow:inset 0 1px 0 #ffffff28,0 9px 0 #050a18,0 15px 28px #0009;
 transform:translateY(0);transition:transform .18s,border-color .18s,box-shadow .18s;isolation:isolate}
body:has(#accueil) .game:hover{transform:translateY(-4px);border-color:#ffda84;
 box-shadow:0 0 0 1px #ffd77c50,0 12px 0 #050a18,0 19px 35px #000a,0 0 35px #f2a52d36}
body:has(#accueil) .art{height:195px;position:relative;isolation:isolate;background:#081327;overflow:hidden;
 border-bottom:1px solid #ffc66b8c}
body:has(#accueil) .art:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1;
 background:linear-gradient(170deg,#ffffff24 0,transparent 34%,transparent 72%,#05091c83 100%),
 radial-gradient(ellipse at 65% 72%,#ffc0564b,transparent 55%)}
body:has(#accueil) .art:after{content:"";position:absolute;inset:12px;border:1px solid #f1b24c69;border-radius:12px;z-index:1;pointer-events:none;box-shadow:inset 0 1px 0 #fff5,0 0 20px #e68b2522}
body:has(#accueil) .art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.4) contrast(1.08) drop-shadow(0 6px 8px #0008);transform:scale(1.025);transition:transform .3s}
body:has(#accueil) .game:hover .art img{transform:scale(1.08)}
body:has(#accueil) .game:nth-child(1) .art{background:radial-gradient(circle at 70% 40%,#c46c29,#130e23 70%)}
body:has(#accueil) .game:nth-child(2) .art{background:radial-gradient(circle at 55% 38%,#854099,#12122e 70%)}
body:has(#accueil) .game:nth-child(3) .art{background:radial-gradient(circle at 60% 36%,#8d4b20,#0c1b2c 70%)}
body:has(#accueil) .game:nth-child(4) .art{background:radial-gradient(circle at 60% 44%,#bc7135,#152a2e 70%)}
body:has(#accueil) .game:nth-child(5) .art{background:radial-gradient(circle at 60% 40%,#8b34be,#14133c 70%)}
body:has(#accueil) .game:nth-child(6) .art{background:radial-gradient(circle at 56% 38%,#27815d,#052629 70%)}
body:has(#accueil) .gamebody{padding:19px}
body:has(#accueil) .game h3{font-size:21px;font-weight:1000;color:#fffaed;text-shadow:0 2px 8px #000a}
body:has(#accueil) .game p{color:#d0d9e7;line-height:1.6}
body:has(#accueil) .tag{background:#ffc3521e;color:#ffda8b;border-color:#ffcd6e69;border-radius:9px;font-weight:850}
body:has(#accueil) .fav{border-color:#f4b44b77;background:#0d1b34}
body:has(#accueil) .metas{color:#bcd1ee}
body:has(#accueil) .free{color:#9cf0bf}
body:has(#accueil) .play{color:#1b191c;font-weight:950;border:1px solid #ffe48b;
 background:linear-gradient(180deg,#ffe694,#ffbd36 48%,#e7881e);
 box-shadow:inset 0 2px 0 #fff9d9,0 3px 9px #c46e1766;border-radius:12px}
body:has(#accueil) .play:hover{background:linear-gradient(#fff5c7,#ffc246)}
body:has(#accueil) .heritage-feature{background:radial-gradient(ellipse at 83% 69%,#fdad3d5b,transparent 45%),linear-gradient(115deg,#142b4b,#38251d);
 border:1.5px solid #f6b85a96;border-radius:22px;box-shadow:0 16px 40px #000a,inset 0 2px 0 #fff2af34}
body:has(#accueil) .heritage-feature h2{color:#fff2d9}
body:has(#accueil) .heritage-feature p{color:#d3e0eb}
body:has(#accueil) .highlight{background:linear-gradient(160deg,#172e4d,#0b1830);
 border:1px solid #f6c26d45;border-radius:17px;box-shadow:inset 0 1px 0 #ffffff1f,0 9px 20px #0005}
body:has(#accueil) .highlight h3{color:#fff7e6}
body:has(#accueil) .daily-mission{background:linear-gradient(145deg,#263f5e,#291d29);
 border:1px solid #fbd08084;border-radius:18px;box-shadow:0 12px 35px #0008,inset 0 2px 0 #fff4b125}
body:has(#accueil) .daily-medal{color:#ffde85;background:radial-gradient(circle at 50% 20%,#e1ad3978,#311c11);
 box-shadow:0 0 20px #eda52c60}
body:has(#accueil) .progress-metrics>div{background:linear-gradient(#1d385c,#0b1c35);border:1px solid #f8ba5f5f;
 box-shadow:inset 0 1px 0 #fff4b127,0 7px 14px #0007;border-radius:14px}
body:has(#accueil) .progress-metrics strong{color:#ffd36d;font-weight:1000}
body:has(#accueil) .achievement{background:#1b2e48;border:1px solid #ffc65e3e;opacity:.76}
body:has(#accueil) .achievement.unlocked{background:linear-gradient(145deg,#61431e,#30212b);border-color:#ffc560a6;
 box-shadow:0 0 21px #f4a52b23;opacity:1}
body:has(#accueil) .achievement span{color:#ffcb64}
body:has(#accueil) .footer{background:#051025;border-top:1px solid #f2be5549}
body:has(#accueil) .footlinks a{color:#dce7f5}
body:has(#accueil) .official-full-logo{box-shadow:0 5px 25px #f7ab2433;border:1px solid #f4c46960}
/* Additional navigation sections — the tournament screen is a transparent
   roadmap, and player progress is LOCAL ONLY. No money claims. */
.royale-panel{margin-top:56px;position:relative;overflow:hidden;padding:30px clamp(20px,3vw,40px);
 border:1.5px solid #ffc87282;border-radius:23px;
 background:radial-gradient(circle at 100% 0,#a9602d4b 0,transparent 38%),
 linear-gradient(125deg,#142d52,#101b35 54%,#231c2d);
 box-shadow:0 13px 36px #0009,inset 0 2px 0 #ffe8ac26}
.royale-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
 background:repeating-linear-gradient(45deg,transparent 0 16px,#efb459 17px,#efb459 18px,transparent 19px 35px);
 mask-image:linear-gradient(90deg,transparent 45%,#000)}
.royale-panel .panel-content{position:relative;z-index:1}
.royale-panel h2{margin:8px 0 13px}
.royale-panel p{color:#cfdaeb;line-height:1.7;margin:5px 0 17px}
.royale-panel .royale-eyebrow{font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:#ffcf70}
.royale-panel .royale-tags{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 21px}
.royale-panel .royale-tags span{border:1px solid #f6c36d68;border-radius:999px;background:#0b1b33b3;
 color:#ffe0a5;padding:7px 12px;font-size:11px;font-weight:800}
.royale-panel .royale-action{min-width:210px;min-height:47px;padding:11px 19px}
.royale-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.royale-reward{display:flex;flex-direction:column;gap:11px;padding:22px 17px;min-height:168px;position:relative;
 background:linear-gradient(150deg,#203b59,#0b162d);border:1px solid #f9c27675;border-radius:17px;
 box-shadow:inset 0 1px 0 #fff1aa27,0 8px 15px #0006}
.royale-reward:before{content:"";position:absolute;inset:0;border-radius:17px;pointer-events:none;
 background:radial-gradient(circle at 80% 15%,#ffc25432,transparent 52%)}
.royale-reward .reward-symbol{font-size:33px;line-height:1;filter:drop-shadow(0 4px 5px #0009)}
.royale-reward strong{font-size:16px;font-weight:900;color:#fff7e8}
.royale-reward small{color:#b9cee4;font-weight:650;font-size:12px}
.royale-reward.unlocked{border-color:#ffcf69;box-shadow:0 0 20px #fab5352e,inset 0 1px 0 #fff7c642}
.royale-reward.unlocked small{color:#9cf0bd}
.royale-micro{font-size:12px;color:#b9cadb!important}
/* The entire in-game surface is a consistent Royale UI, while preserving
   game rules, native controls and the actual Three.js renderer. */
.dialog{background:linear-gradient(155deg,#11274a,#08152f 65%,#091026)!important;color:#fff7e9!important;
 border:1px solid #f9c66995!important;box-shadow:0 32px 96px #000e,0 0 31px #ef9f2b28!important;border-radius:21px!important}
.dlghead{background:linear-gradient(135deg,#173254,#09172e)!important;
 border-bottom:1px solid #f3bc5780!important;color:#ffebc2!important}
.dlghead strong{font-weight:950!important;color:#fff0d1}
.dlgbody{color:#fff0d9}
.dlgbody .ghost,.dlgbody .secondaryDark,.dlgbody button:not(.primary):not(.royale-roll):not(.mobi3d-canvas){
 border-radius:11px;transition:filter .16s,box-shadow .16s}
.dlgbody button:focus-visible{outline:3px solid #ffdf7c;outline-offset:3px}
.dlgbody .primary{background:linear-gradient(#fff1b3,#ffc351 44%,#ef8721)!important;
 color:#271907!important;border:1px solid #fff0a3!important;border-radius:12px!important;
 box-shadow:inset 0 2px 0 #fffeeb,0 4px 15px #e6952875!important}
.dialog:has(.royale) .dlghead{background:linear-gradient(130deg,#192d52,#0a162d)!important;
 border-bottom:1px solid #ffcc6d91!important}
.royale{background:radial-gradient(ellipse at 50% 5%,#be652f47,transparent 50%),
 linear-gradient(160deg,#10234a,#07162c 75%)!important}
.royale .royale-star{border:1px solid #ffe49b!important;
 background:linear-gradient(#fff2ad,#ffa625)!important;
 box-shadow:0 0 20px #efa93580,inset 0 2px 1px #fff7cc!important}
.royale .royale-kicker{color:#ffe08d!important;letter-spacing:.18em!important}
.royale .royale-local-badge{background:#f3be3825!important;border-color:#f7bd5f80!important;color:#fff1ca!important}
.royale .royale-signature h2{color:#fff5db!important;text-shadow:0 3px 12px #0009}
.royale .royale-mode{background:linear-gradient(#1c365b,#0a1b37)!important;
 border:1px solid #ffcb6561!important;box-shadow:inset 0 1px 0 #fff3ba25,0 5px 12px #0007!important}
.royale .royale-mode.current{background:linear-gradient(#604421,#222137)!important;border-color:#ffcf72!important;
 box-shadow:0 0 18px #fdb33940,inset 0 1px 0 #ffdf9c36!important}
.royale .royale-mode>span{color:#ffda87!important}
.royale .royale-player{background:linear-gradient(#1b3b5d,#0a1d35)!important;border-color:#fbc36b5c!important}
.royale .royale-player.turn{box-shadow:0 0 0 2px #ffca5b,0 0 18px #fcab3996!important}
.royale .royale-turn{background:linear-gradient(140deg,#1b385c,#10203c)!important;
 border:1px solid #ffc46568;box-shadow:inset 0 1px 0 #ffffff29,0 8px 16px #0008!important}
.royale .royale-roll{background:linear-gradient(#fff3b8,#ffd058 36%,#f5a32b 68%,#e77716)!important;
 color:#191e30!important;border:1px solid #ffeba1!important;
 box-shadow:inset 0 2px 0 #fff7cb,0 5px 0 #8b401b,0 10px 22px #e58f2373!important}
.royale .royale-dice{box-shadow:inset 0 2px 2px #fff,0 10px 28px #010913!important}
.royale .royale-save-box,.royale .royale-utility,.royale .royale-history{border-color:#f6c57249!important;background:#102344ed!important}
.royale .royale-theme{border:1px solid #f0c16d6c!important}
.royale .royale-disclaimer{color:#bbcadf!important}
.royale-board{filter:drop-shadow(0 14px 20px #0009)}
.mobi3d-canvas{filter:drop-shadow(0 14px 18px #0009)}
.memoryboard .mem{border-color:#ffd27396;box-shadow:0 6px 0 #061124,0 10px 22px #0009,inset 0 2px 0 #fff7a13d}
.memoryboard .mem.up{background:linear-gradient(#ffedc4,#dfc094);box-shadow:0 5px 0 #9b6b34,0 9px 13px #0007}
.morpion-cell,.checkers-cell{box-shadow:inset 0 2px 0 #fff5,0 3px 6px #0005}
body:has(#accueil) .bottomnav{background:linear-gradient(160deg,#122e54,#081930 70%);border-top:1.5px solid #ffc55b9c;
 box-shadow:0 -7px 23px #000a,inset 0 1px 0 #fff7c423}
body:has(#accueil) .bottomnav button{color:#d5dce6}
body:has(#accueil) .bottomnav button.sel{color:#ffd679;text-shadow:0 0 14px #ffb53c86}
body:has(#accueil) .bottomnav button.sel .ui-icon{filter:drop-shadow(0 0 7px #f5a928)}
body:has(#accueil) button:focus-visible,a:focus-visible{outline:3px solid #ffe17c;outline-offset:3px}
@media(max-width:900px){body:has(#accueil) .hero h1{font-size:clamp(39px,5vw,51px)}}
@media(max-width:600px){
 html{scroll-padding-top:68px}
 body:has(#accueil) .shell{padding:0 15px}
 body:has(#accueil) .topbar{height:66px}
 body:has(#accueil) .brandmark{width:35px;height:35px}
 body:has(#accueil) .brandwordmark{width:109px;height:27px;padding:2px}
 body:has(#accueil) .navright .primary{padding:7px 12px;min-height:36px;font-size:12px}
 body:has(#accueil) .pill{padding:7px 10px;font-size:11px}
 body:has(#accueil) .hero{min-height:615px;margin-top:14px;border-radius:20px;display:block;
 background:radial-gradient(ellipse at 55% 85%,#d4752c7d,transparent 53%),linear-gradient(#112a50,#09182f 62%,#241825)}
 body:has(#accueil) .herocopy{padding:29px 21px 0;max-width:100%}
 body:has(#accueil) .hero .eyebrow{font-size:9px;padding:6px 10px}
 body:has(#accueil) .hero h1{font-size:clamp(36px,10.2vw,51px);max-width:350px;margin:16px 0 11px}
 body:has(#accueil) .hero p{font-size:12.5px;line-height:1.56}
 body:has(#accueil) .heroactions .primary{font-size:12px;padding:10px 15px;min-height:43px}
 body:has(#accueil) .heroactions .secondaryDark{padding:10px 13px;font-size:11px}
 body:has(#accueil) .herovis{height:240px;min-height:240px;background:radial-gradient(circle at 50% 50%,#f4ae4447,transparent 64%)}
 body:has(#accueil) .hero3d-viewport{inset:-12px 0 0}
 body:has(#accueil) .hero3d-title{top:0;right:12px}
 body:has(#accueil) .hero3d-title strong{font-size:18px}
 body:has(#accueil) .hero .hero-fineprint{font-size:10px}
 body:has(#accueil) .proof-strip{padding:20px 0}
 body:has(#accueil) .proof-strip .stat{padding:4px 3px 4px 8px}
 body:has(#accueil) .proof-strip .stat strong{font-size:19px}
 body:has(#accueil) .proof-strip .stat span{font-size:10px}
 body:has(#accueil) .category-section{margin-top:45px}
 body:has(#accueil) .category-tile{min-height:133px}
 body:has(#accueil) .games{gap:12px}
 body:has(#accueil) .art{height:140px}
 body:has(#accueil) .gamebody{padding:12px}
 body:has(#accueil) .game h3{font-size:17px}
 body:has(#accueil) .game p{min-height:64px;font-size:11px}
 body:has(#accueil) .gamefoot{flex-wrap:wrap}
 body:has(#accueil) .royale-panel{margin-top:43px;padding:24px 20px;border-radius:18px}
 .royale-rewards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .royale-reward{min-height:140px;padding:15px 10px;border-radius:13px}
 .royale-reward strong{font-size:12px}
 .royale-reward small{font-size:10px}
 .royale-reward .reward-symbol{font-size:27px}
 body:has(#accueil) .bottomnav button{flex:1;min-width:0;min-height:54px;padding:6px 2px}
 body:has(#accueil) .bottomnav button .ui-icon{width:20px;height:20px}
 body:has(#accueil) .bottomnav button span{font-size:9px;white-space:nowrap}
 body:has(#accueil) .bottomnav button.sel{background:radial-gradient(circle at 50% 16%,#e7a82a38,transparent 73%)}
}
@media(max-width:375px){
 body:has(#accueil) .brandwordmark{width:96px}
 body:has(#accueil) .hero{min-height:630px}
 body:has(#accueil) .hero h1{font-size:35px}
 .royale-rewards{grid-template-columns:1fr}
 .royale-reward{min-height:82px;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:7px}
 .royale-reward .reward-symbol{grid-row:span 2}
}
@media(prefers-reduced-motion:reduce){body:has(#accueil) .game,body:has(#accueil) .game:hover,
 body:has(#accueil) .art img,body:has(#accueil) .category-tile{transform:none!important;transition:none!important}}


/* Royale surfacing for ALL seven non-Ludo game screens.
   This is tactile raised-material rendering, not a claim of WebGL gameplay.
   Keep native button focus, board semantics and game engines unchanged. */
.dlgbody .statusline{color:#ffe6b2!important;text-shadow:0 1px 9px #030912;font-weight:850;
 padding:10px 14px;border:1px solid #ffca5a47;border-radius:12px;background:#182e4bc9}
.dlgbody .stores{color:#ffe1ab!important;font-weight:900;gap:14px;flex-wrap:wrap}
.dlgbody .stores span{background:linear-gradient(145deg,#234265,#101f39);border:1px solid #ffc77473;
 border-radius:999px;padding:9px 15px;box-shadow:inset 0 1px 0 #fff1a326,0 4px 9px #0006}
.dlgbody .boardnote,.dlgbody .notice,.dlgbody .hint{color:#c3d7e9!important;font-size:12px;line-height:1.7}
.dlgbody .quizprogress{color:#ffcf70!important;letter-spacing:.15em;text-shadow:0 1px 4px #0008}
.dlgbody .question{color:#fff8dd!important;text-shadow:0 3px 12px #0008;font-size:clamp(20px,3vw,29px)}
.dlgbody .answer{color:#fff7e5!important;background:linear-gradient(156deg,#244568,#122746);
 border:1px solid #ffca6d65;border-radius:15px;box-shadow:inset 0 2px 0 #fff1a71f,0 5px 0 #071124,0 11px 14px #0008;
 min-height:60px;font-weight:850;transition:transform .13s,border-color .13s}
.dlgbody .answer:hover:not(:disabled){transform:translateY(-2px);border-color:#ffe2a1}
.dlgbody .answer.correct{color:#093322!important;background:linear-gradient(150deg,#c1f7c6,#4ee1a1);
 border-color:#a5ffca;box-shadow:0 4px 0 #208155,0 8px 16px #0006}
.dlgbody .answer.wrong{color:#541c15!important;background:linear-gradient(150deg,#ffe4cb,#f4a58e);
 border-color:#ffd0b5;box-shadow:0 4px 0 #a64c36,0 8px 16px #0006}
.dlgbody .pitboard{position:relative;isolation:isolate;background:linear-gradient(145deg,#d9a061 0%,#9a5b2e 27%,#6b381a 65%,#c48e4b 100%);
 border:12px ridge #d59b4e;border-radius:90px;
 box-shadow:inset 0 5px 6px #ffe0aa7c,inset 0 -8px 16px #341604d9,0 9px 0 #472712,
 0 18px 0 #2a1b15,0 28px 30px #000c;transform:perspective(1200px) rotateX(5deg)}
.dlgbody .pitboard .pit{background:radial-gradient(circle at 48% 64%,#402410 0%,#1d110b 69%,#6f411f 97%);
 border:2px solid #dbb0778d;box-shadow:inset 1px 5px 10px #000d,inset 0 -3px 3px #c5814080,0 1px 2px #ffeac49c;
 color:#fff0c5!important;font-weight:1000;text-shadow:0 1px 4px #000;min-width:0}
.dlgbody .pitboard .pit.clickable:hover{box-shadow:inset 1px 5px 10px #000d,0 0 0 2px #ffd584,0 0 18px #ffcb67a1}
.dlgbody .checkersboard{border:10px ridge #b98345;border-radius:15px;
 box-shadow:inset 0 2px 0 #fff3bf81,0 8px 0 #3a1f0d,0 17px 0 #1b120c,0 25px 36px #000b;
 transform:perspective(1100px) rotateX(5deg);transform-origin:center center}
.dlgbody .checkersboard .sq.light{background:linear-gradient(145deg,#ffebb9,#ddba7a)}
.dlgbody .checkersboard .sq.dark{background:linear-gradient(145deg,#9e663f,#603b27)}
.dlgbody .checkersboard .sq.selected{background:#fff09e!important;box-shadow:inset 0 0 0 3px #f89e1c}
.dlgbody .checkersboard .piece{box-shadow:inset 0 3px 0 #fff8bd96,inset 0 -4px 3px #0008,0 4px 0 #37221e,0 8px 8px #0008;
 border:3px solid #ffffff5b}
.dlgbody .checkersboard .piece.one{background:radial-gradient(circle at 35% 22%,#fff2af,#ffb52f 60%,#a86113)}
.dlgbody .checkersboard .piece.two{background:radial-gradient(circle at 35% 22%,#b6e2ff,#2470cf 60%,#102953)}
.dlgbody .colorcard{border:4px solid #ffe6a3;border-radius:15px;box-shadow:inset 0 2px 1px #fff9ca78,
 0 6px 0 #172847,0 11px 16px #000a;text-shadow:0 2px 4px #0009;transform:translateY(0);transition:transform .15s}
.dlgbody .colorcard:hover{transform:translateY(-3px) rotate(-2deg)}
.dlgbody .cardhand{perspective:600px}
.dlgbody .domino-chain{background:linear-gradient(150deg,#284c52,#112d38);border:1px solid #f6c66d67;
 border-radius:17px;padding:16px 13px;box-shadow:inset 0 1px 0 #ffe9a82c,0 8px 19px #0008}
.dlgbody .domino-tile{background:linear-gradient(145deg,#fffef5,#dce6e9);border:3px solid #ffe8a3;
 border-radius:12px;color:#173052;box-shadow:inset 0 2px 2px #fff,0 6px 0 #8a9aa6,0 11px 12px #0008}
.dlgbody .domino-control:not(:disabled):hover{transform:translateY(-4px)}
.dlgbody .morpion-board{background:linear-gradient(150deg,#915a31,#52331c);
 border:8px ridge #d9a05b;border-radius:21px;box-shadow:0 8px 0 #2f1c11,0 18px 23px #000b}
.dlgbody .morpion-cell{background:linear-gradient(150deg,#274c68,#122744);color:#ffb83c;
 border:1px solid #f1b45c54;border-radius:13px;box-shadow:inset 0 2px 0 #ffffff30,0 4px 0 #071527;
 text-shadow:0 3px 3px #010b16}
.dlgbody .morpion-cell.mark-x{color:#ffc15b}
.dlgbody .morpion-cell.mark-o{color:#68f5bb}
.dlgbody .memoryboard{perspective:750px}
.dlgbody .mem:not(.matched):not(.up){background:linear-gradient(145deg,#223f73,#13204a 65%,#322067);
 border:2px solid #ffcb659e;box-shadow:inset 0 2px 0 #ffffff31,0 6px 0 #060e24,0 11px 16px #000b}
@media(max-width:600px){
 .dlgbody .pitboard,.dlgbody .checkersboard{transform:none}
 .dlgbody .pitboard{border-width:7px;padding:13px 7px;gap:4px}
 .dlgbody .checkersboard{border-width:6px}
 .dlgbody .answer{padding:13px;min-height:49px}
 .dlgbody .question{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.dlgbody .colorcard,.dlgbody .answer{transition:none;transform:none!important}}


/* Real Awalé 3D scene — mobile-first, tactile, rendered with the shipped Three.js.
 * Accessible HTML pit buttons remain operable via assistive technology / fallback.
 */
.dlgbody .oware-scene{position:relative;overflow:visible;isolation:isolate;margin:16px auto 22px;width:100%;max-width:900px;
 border:1.5px solid #edb96a99;border-radius:22px;
 background:radial-gradient(ellipse at 51% 56%,#d38c3e58 0%,#63412627 46%,transparent 70%),
 linear-gradient(150deg,#122b43,#0c2037 50%,#281e27);
 box-shadow:inset 0 2px 0 #fff2bd3d,0 10px 0 #3a2518,0 19px 33px #000b}
.dlgbody .oware-scene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
 background:repeating-linear-gradient(45deg,transparent 0 22px,#ffb66323 23px 25px,transparent 26px 48px);border-radius:inherit}
.dlgbody .oware3d-viewport{display:none;position:relative;width:100%;height:clamp(290px,48vw,510px);
 min-height:290px;z-index:2;overflow:hidden;border-radius:20px}
.dlgbody .oware-scene.is-3d .oware3d-viewport{display:block}
.dlgbody .oware3d-viewport .mobi3d-canvas{height:100%!important;width:100%!important;border-radius:20px;
 display:block;touch-action:manipulation;filter:drop-shadow(0 13px 18px #000a)}
.dlgbody .oware-accessible-toggle{display:none;position:relative;z-index:5;
 border:1px solid #f5c16d91;border-radius:12px;background:linear-gradient(#28476a,#112942);
 padding:12px 16px;margin:8px auto 14px;color:#ffdf99;font-size:12px;font-weight:800}
.dlgbody .oware-scene.is-3d .oware-accessible-toggle{display:block}
.dlgbody .oware-scene.is-3d:not(.show-controls) #oware-pit-controls{
 position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;
 margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;
 clip-path:inset(50%);white-space:nowrap;opacity:.01;pointer-events:none;transform:none!important}
.dlgbody .oware-scene.show-controls #oware-pit-controls{margin:17px auto 20px;max-width:750px}
.dlgbody .oware-scene #oware-pit-controls{position:relative;z-index:3;margin:20px auto;
 width:calc(100% - 22px);max-width:750px}
@media(max-width:600px){
 body:has(#accueil) .dlgbody .oware-scene{margin:12px auto 23px;border-radius:16px}
 body:has(#accueil) .dlgbody .oware3d-viewport{height:min(92vw,370px);min-height:280px;border-radius:15px}
 body:has(#accueil) .dlgbody .oware-accessible-toggle{font-size:11px;margin:0 auto 11px;min-height:43px}
 body:has(#accueil) .dlgbody .oware-scene.show-controls #oware-pit-controls{border-width:6px}
}
@media(prefers-reduced-motion:reduce){
 .dlgbody .oware-scene *{animation:none!important;transition:none!important}
}


/* QA screenshot corrections: Awalé now fills the screen with its
   hardwood gameboard rather than an oversized decorative platform. */
.dlgbody .gamemodebar .ghost{background:linear-gradient(150deg,#294c6a,#122740)!important;
 color:#ffdfab!important;border:1px solid #f7c67b8a!important;box-shadow:inset 0 1px 0 #ffffff35,0 4px 9px #0006!important;
 font-weight:850;border-radius:13px}
.dlgbody .boardnote{background:linear-gradient(160deg,#1c3658,#0d1e35)!important;
 color:#d5e5f3!important;border:1px solid #f2c37155!important;
 box-shadow:inset 0 1px 0 #ffffff17,0 4px 10px #0005!important}
.dlgbody .oware-scene{background:
 linear-gradient(180deg,#0e1d3696 0%,#0b1c3060 48%,#121f3788 100%),
 url("/assets/royale-sunset.svg") center center/cover no-repeat,
 linear-gradient(#18304b,#1d2539);
 box-shadow:inset 0 1px 0 #ffd88b64,0 7px 0 #3c251a,0 13px 23px #0009}
@media(max-width:600px){
 body:has(#accueil) .dlgbody .oware3d-viewport{height:min(84vw,340px);min-height:275px}
 body:has(#accueil) .dlgbody .oware-accessible-toggle{margin:0 auto 12px}
 body:has(#accueil) .dlgbody .boardnote{font-size:11px;line-height:1.58;padding:12px 13px}
}