/* Glam Run 3D (index.html): the 3D track is the background of the home + game-over screens; in-run HUD chips. */
@font-face { font-family: 'Playfair'; src: url('../../assets/fonts/PlayfairDisplay.woff2'); }
html, body { background: #e9b0bf; overscroll-behavior: none; }
body.inrun, body.home, body.inrun canvas, body.home canvas { touch-action: none; }
#c3 { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.g3d #ui { position: fixed; inset: 0; z-index: 1; }
/* home = the 3D track itself (Sofia stands there in 3D): transparent background, hide the 2D hero image */
body.g3d #home.v2 { background: linear-gradient(180deg, rgba(196,70,128,.20), rgba(220,110,160,0) 24%, rgba(220,110,160,0) 66%, rgba(170,40,100,.30)); }
body.g3d #home .hstar2 { visibility: hidden; }
body.g3d #home .glogo, body.g3d #home .pbtn, body.g3d #home .tiles2 { will-change: opacity, transform; }
/* game over: Bella Red & Sofia stay visible behind */
body.g3d #over.over2 { background: url(../../assets/ui/bg/clouds_07.jpg) center/cover no-repeat; }
body.g3d #pause.dim { background: rgba(70,10,80,.35); }
#boostFx { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 0; background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0) 50%, rgba(220,70,140,.5) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 5; background: radial-gradient(circle at 50% 45%, #fff2f7 0%, #ffd6e8 30%, #f7a0c6 70%, #e0609c 100%); }
#flash.gold { background: radial-gradient(circle at 50% 45%, #fffbea 0%, #ffeab0 30%, #f3c45e 70%, #b47c1c 100%); }   /* v12 world change */
/* ---- in-run HUD ---- */
body.g3d #hud { position: fixed; inset: 0; pointer-events: none; font-family: Fredoka, system-ui, sans-serif; color: #fff; padding-top: env(safe-area-inset-top); }
#hud .chip { position: absolute; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,214,230,.5)); border: 2px solid rgba(232,184,90,.9);
  box-shadow: 0 3px 10px rgba(160,60,100,.25); color: #b0336a; font: 700 20px Fredoka, sans-serif; }
#hud #pauseBtn { left: 12px; top: calc(12px + env(safe-area-inset-top)); width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; font-size: 16px; pointer-events: auto; cursor: pointer; }
#hud #distc { left: 62px; top: calc(16px + env(safe-area-inset-top)); font-size: 16px; }
#hud #scorec { right: 12px; top: calc(12px + env(safe-area-inset-top)); font-size: 22px; letter-spacing: 1px; }
#hud #scorec .x { background: linear-gradient(180deg,#ffe28a,#e0a836); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 16px; text-shadow: 0 1px 2px #a8701c; }
#hud #coinc { right: 12px; top: calc(58px + env(safe-area-inset-top)); font-size: 19px; }
#hud #perfc { right: 12px; top: calc(100px + env(safe-area-inset-top)); font-size: 19px; }
#hud #coinc img { width: 24px; height: 24px; } #hud #perfc img { width: 18px; height: 24px; object-fit: contain; }
#hud #chase { left: 12px; top: calc(64px + env(safe-area-inset-top)); opacity: 0; transform: translateX(-20px); transition: .25s; color: #b3122e; border-color: #e0b24e; }
#hud #chase.show { opacity: 1 !important; transform: none; animation: chasePulse .6s infinite alternate; }
#hud #chase .cl { font-size: 13px; }
#bellaFace canvas { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; display: block; }
#bellaFace img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #f3d08a; display: block; object-fit: cover; object-position: 50% 18%; background: #5a1024; }
#hud #chase .cbar { width: 70px; height: 7px; border-radius: 4px; background: rgba(179,18,46,.2); overflow: hidden; }
#chaseBar { height: 100%; background: linear-gradient(90deg,#ff5b7a,#b3122e); }
@keyframes chasePulse { to { box-shadow: 0 0 16px rgba(255,60,90,.7); } }
#hud .pop { position: absolute; font: 700 18px Fredoka, sans-serif; color: #ffe27a; text-shadow: 0 2px 0 #c0841c, 0 0 8px rgba(255,200,90,.8); transform: translate(-50%,0); white-space: nowrap; }
#hud .pop.big { font-family: 'Playfair', Georgia, serif; font-style: italic; font-size: 34px; color: #fff; text-shadow: 0 2px 0 #e05a95, 0 0 14px rgba(255,120,180,.9); }
#hud .pop.red { text-shadow: 0 2px 0 #8a0a20, 0 0 14px rgba(255,60,90,.9); }
#hud .pop.pink { color: #fff; font-size: 20px; text-shadow: 0 2px 0 #d0427f, 0 0 10px rgba(255,120,190,.9); }
#hud .pop.gold { font-size: 20px; color: #fff3c0; }
#banner { position: absolute; left: 50%; top: 21%; transform: translate(-50%,-10px) scale(.9); opacity: 0; transition: .25s; font-family: 'Playfair', Georgia, serif; font-style: italic; font-weight: 700;
  font-size: 24px; padding: 8px 20px; border-radius: 26px; background: rgba(255,255,255,.78); color: #d0427f; border: 2px solid #e8b85a; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#banner.show { opacity: 1; transform: translate(-50%,0) scale(1); }
#banner.gold.world { background: linear-gradient(180deg, rgba(40,22,6,.82), rgba(70,40,10,.82)); color: #ffe3a0; border: 1px solid rgba(255,214,130,.7); text-shadow: 0 0 12px rgba(255,190,90,.8); letter-spacing: .02em; font-size: clamp(15px, 5.2vw, 24px); padding: 8px 14px; }   /* v12 next-world banner */
#banner.red { color: #b3122e; } #banner.gold { color: #c0841c; } #banner.night { background: rgba(60,20,80,.72); color: #ffd0f0; }
#hud .toast { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); }
#hint { position: absolute; left: 0; right: 0; bottom: calc(10% + env(safe-area-inset-bottom)); text-align: center; font: 600 15px Fredoka, sans-serif; color: #fff; text-shadow: 0 1px 3px #b0336a; opacity: 0; transition: opacity .4s; }
#hint.show { opacity: 1; }

/* ---------- « nuages roses » restyle of the remaining menus (splash, profil, garde-robe, classement, récompenses, pause) ---------- */
body.g3d #splash, body.g3d #profile, body.g3d #wardrobe, body.g3d #board, body.g3d #rewards { background: url(../../assets/ui/bg/clouds_02.jpg) center/cover no-repeat; }
body.g3d #splash { background-image: url(../../assets/ui/bg/clouds_03.jpg); justify-content: center; gap: 8vh; }
body.g3d #splash .splogo { position: static; margin: 0; }
body.g3d #splash .splogo img { width: min(82vw, 380px); height: auto; filter: drop-shadow(0 8px 18px rgba(200,80,140,.25)); }
body.g3d #splash .foot { color: #9a5a70; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
body.g3d #splash .sparkles { opacity: .45; }
body.g3d .screen.dim { background: rgba(255,226,238,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.g3d .card, body.g3d .tabs, body.g3d .prodbadge, body.g3d .league {
  background: rgba(255,255,255,.58); border: 1.5px solid rgba(255,255,255,.95); color: #5a1530;
  box-shadow: 0 0 0 1px rgba(232,190,150,.38), 0 10px 28px rgba(200,110,150,.16), inset 0 1px 0 #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.g3d .card h2, body.g3d .title2 { font-family: Playfair; font-weight: 700; color: #b3124f; letter-spacing: -.3px; text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 6px 16px rgba(255,255,255,.8); }
body.g3d .title2 { font-size: 38px; margin-top: 4px; }
body.g3d .card .sub, body.g3d .card .hint, body.g3d .rlevel small, body.g3d .league small, body.g3d .bnote { color: #9a5a70; text-shadow: none; }
body.g3d .rlevel b, body.g3d .league, body.g3d .league b, body.g3d .prodbadge { color: #b3124f; }
body.g3d .steps span { background: rgba(255,255,255,.5); color: #b3124f; box-shadow: 0 0 0 1px rgba(232,190,150,.4); }
body.g3d .steps span.on { background: linear-gradient(180deg,#ffc4de,#f268a0); color: #fff; }
body.g3d .tabs button { color: #b3124f; }
body.g3d .tabs button.on { background: linear-gradient(180deg,#ffc4de,#f268a0); box-shadow: 0 2px 6px rgba(220,80,140,.3); }
body.g3d .btn { font-family: Fredoka; font-weight: 600; border: 2px solid rgba(255,236,214,.95); text-shadow: 0 1px 2px rgba(190,40,100,.3); }
body.g3d .btn.gold, body.g3d .btn.big { color: #fff; background: linear-gradient(180deg,rgba(255,196,222,.96),rgba(255,140,186,.95) 45%,rgba(242,104,160,.95)); box-shadow: 0 0 0 1.5px rgba(232,176,120,.55), 0 8px 18px rgba(220,80,140,.3), inset 0 2px 0 rgba(255,255,255,.6); }
body.g3d .btn.pink, body.g3d .btn.ghost, body.g3d .btn.avhome { color: #9b2350; text-shadow: none; background: rgba(255,255,255,.62); border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(232,190,150,.45), 0 6px 16px rgba(200,110,150,.18); }
body.g3d .btn:active { transform: translateY(2px); }
body.g3d #pause .icon { background: rgba(255,255,255,.62); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(232,190,150,.45); }
body.g3d .modal { background: rgba(255,222,236,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.g3d #hint { text-shadow: 0 1px 2px #b0336a, 0 0 10px rgba(176,51,106,.6); }

/* ---------- v3 « un peu plus foncé, plus rose » grade: deeper rose over every cloud backdrop, richer glass, stronger shadows ---------- */
body.g3d #missions.v2 { background: linear-gradient(180deg, rgba(200,70,128,.16), rgba(160,36,96,.28)), url(../../assets/ui/bg/clouds_02.jpg) center/cover no-repeat; }
body.g3d #over.over2 { background: linear-gradient(180deg, rgba(200,70,128,.14), rgba(160,36,96,.30)), url(../../assets/ui/bg/clouds_07.jpg) center/cover no-repeat; }
body.g3d #profile, body.g3d #wardrobe, body.g3d #board, body.g3d #rewards { background: linear-gradient(180deg, rgba(200,70,128,.16), rgba(160,36,96,.28)), url(../../assets/ui/bg/clouds_02.jpg) center/cover no-repeat; }
body.g3d #splash { background: linear-gradient(180deg, rgba(200,70,128,.12), rgba(160,36,96,.30)), url(../../assets/ui/bg/clouds_03.jpg) center/cover no-repeat; }
body.g3d .screen.dim, body.g3d #pause.dim { background: rgba(150,40,100,.38); }
body.g3d .modal { background: rgba(150,40,100,.40); }
body.g3d .gcard, body.g3d .card, body.g3d .tabs, body.g3d .prodbadge, body.g3d .league, body.g3d .tiles2.bar, body.g3d .ounlock, body.g3d .gwarn2 {
  background: linear-gradient(180deg, rgba(255,240,246,.74), rgba(252,218,232,.66)); border: 1.5px solid rgba(255,226,238,.95);
  box-shadow: 0 0 0 1px rgba(196,140,70,.55), 0 12px 30px rgba(140,30,80,.30), inset 0 1px 0 rgba(255,255,255,.9); }
body.g3d #missions .gwarn2 { background: none; border: 0; box-shadow: none; }
body.g3d .coinchip, body.g3d .clipbtn, body.g3d .backbtn, body.g3d .sday, body.g3d .sdots i { background: rgba(255,236,244,.72); box-shadow: 0 0 0 1px rgba(196,140,70,.5), 0 6px 16px rgba(140,30,80,.26); }
body.g3d .stitle, body.g3d .ctit, body.g3d .stitle2, body.g3d .card h2, body.g3d .title2, body.g3d .chestside .ctitle { color: #94093f; text-shadow: 0 2px 0 rgba(255,236,244,.85), 0 6px 18px rgba(255,220,236,.55); }
body.g3d .pbtn, body.g3d .btn.gold, body.g3d .btn.big { background: linear-gradient(180deg, #ff9cc8 0%, #f0609e 48%, #d43a82 100%); border-color: rgba(255,214,190,.95);
  box-shadow: 0 0 0 1.5px rgba(196,136,60,.7), 0 10px 22px rgba(170,26,96,.42), inset 0 2px 0 rgba(255,255,255,.45); text-shadow: 0 2px 3px rgba(150,20,80,.45); }
body.g3d .cbtn, body.g3d .btn.pink, body.g3d .btn.ghost, body.g3d .btn.avhome, body.g3d .chestside .pbtn:disabled { background: rgba(255,232,242,.8); color: #8a1240; box-shadow: 0 0 0 1px rgba(196,140,70,.6), 0 6px 16px rgba(140,30,80,.28); }
body.g3d .mbar2 { background: rgba(214,160,184,.55); } body.g3d .mbar2 div, body.g3d .sdots i.done { background: linear-gradient(180deg, #ff86b8, #d63a82); }
body.g3d .tile2, body.g3d .tile2 span, body.g3d .mtop, body.g3d .rlevel b { color: #7e0f3c; }
body.g3d .over2 .sambig .sbub { background: rgba(255,240,246,.95); box-shadow: 0 0 0 1px rgba(196,140,70,.55), 0 10px 24px rgba(140,30,80,.3); }
body.g3d .scard div, body.g3d .scard small { color: #8a0c40; }
body.g3d #hud .chip { background: linear-gradient(180deg, rgba(255,236,244,.82), rgba(248,196,220,.75)); border-color: rgba(196,136,60,.95); box-shadow: 0 4px 12px rgba(140,30,80,.32); color: #9a1450; }
/* ---------- intro splash (first launch): live 3D scene under a dark premium Fateli Sky grade (no background image = no needle towers) ---------- */
body.g3d #splash.intro { background: none; justify-content: flex-start; gap: 0; overflow: hidden; }
body.g3d #splash.intro .sgrade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: var(--gr, 1); /* --gr -> 0 before the intro lands on JOUER (crisp, like the home) */
  background: linear-gradient(180deg, rgba(70,18,92,.92) 0%, rgba(150,52,128,.72) 34%, rgba(188,84,150,.62) 58%, rgba(96,24,92,.9) 100%); }
body.g3d #splash.intro .sgrade::after { content: ''; position: absolute; inset: 0; mix-blend-mode: normal;
  background: radial-gradient(120% 70% at 50% 45%, rgba(0,0,0,0) 45%, rgba(26,4,34,.55) 100%), linear-gradient(180deg, rgba(30,6,44,.45), rgba(30,6,44,0) 30%, rgba(30,6,44,0) 70%, rgba(24,4,34,.55)); }
body.g3d #splash.intro .scurtain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 42%, #3a0d48, #16041e 75%); opacity: var(--cu, 1); }
body.g3d #splash.intro .splogo { position: relative; z-index: 3; margin: calc(14px + env(safe-area-inset-top)) 0 0; will-change: transform, opacity; }
body.g3d #splash.intro .splogo img { width: auto; height: min(24vh, 200px); max-width: 86vw; filter: drop-shadow(0 8px 22px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,120,190,.25)); }
body.g3d #splash.intro .pbtn { position: absolute; z-index: 3; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(78vw, 360px); margin: 0; transform: translateX(-50%); }
body.g3d #splash.intro .skip { position: absolute; z-index: 3; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); font: 600 12px Fredoka, sans-serif; color: rgba(255,226,240,.8); letter-spacing: .5px; text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
body.g3d #splash.intro .foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 10px; color: rgba(255,220,236,.6); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
body.g3d #splash.intro .sparkles { display: none; }   /* the CSS dot lattice read as a grid over the 3D shot; the engine's twinkles do the sparkle */
@media (orientation: landscape) { body.g3d #splash.intro .splogo img { height: min(26vh, 210px); } body.g3d #splash.intro .pbtn { width: min(40vw, 340px); bottom: calc(48px + env(safe-area-inset-bottom)); } }

/* ---------- v4 « Fateli Sky » dark premium menus: deep violet / rose night sky drawn in CSS (no cloud photos = no needle towers),
   light glass cards keep their dark text; titles + notes sitting directly on the sky turn gold / blush ---------- */
body.g3d { --fsky: radial-gradient(1.6px 1.6px at 14% 22%, rgba(255,240,250,.9), transparent 60%), radial-gradient(1.2px 1.2px at 72% 14%, rgba(255,236,200,.85), transparent 60%),
  radial-gradient(1.4px 1.4px at 86% 38%, rgba(255,240,250,.7), transparent 60%), radial-gradient(1px 1px at 33% 9%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 55% 31%, rgba(255,226,240,.7), transparent 60%),
  radial-gradient(1px 1px at 8% 58%, rgba(255,236,200,.7), transparent 60%), radial-gradient(1.2px 1.2px at 92% 66%, rgba(255,240,250,.6), transparent 60%),
  radial-gradient(110% 55% at 50% -6%, rgba(255,96,176,.42), transparent 62%), radial-gradient(80% 50% at 100% 100%, rgba(150,64,230,.40), transparent 66%),
  radial-gradient(70% 45% at 0% 80%, rgba(236,72,150,.28), transparent 66%), linear-gradient(180deg, #24072f 0%, #3c0b44 38%, #5a1350 70%, #2a0730 100%); }
body.g3d #profile, body.g3d #wardrobe, body.g3d #board, body.g3d #rewards, body.g3d #missions.v2, body.g3d #over.over2 { background: var(--fsky); background-color: #2a0832; }
body.g3d .screen.dim, body.g3d #pause.dim { background: radial-gradient(90% 60% at 50% 30%, rgba(90,20,90,.55), rgba(26,6,34,.78)); }
body.g3d .modal { background: rgba(28,6,36,.66); }
body.g3d .title2, body.g3d .stitle, body.g3d .ctit, body.g3d #missions .stitle2, body.g3d #board .bnote { color: #ffe6b0; text-shadow: 0 2px 0 rgba(90,10,50,.65), 0 0 18px rgba(255,120,190,.45); }
body.g3d .title2, body.g3d .ctit { background: linear-gradient(180deg, #fff6dc 0%, #f6d48a 45%, #d09a48 70%, #fbe3a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(90,10,50,.7)) drop-shadow(0 0 12px rgba(255,120,190,.35)); }
body.g3d .card h2 { color: #94093f; }
body.g3d #board .bnote { color: rgba(255,226,240,.78); font-weight: 500; }
body.g3d .steps span { background: rgba(255,236,244,.18); color: #ffe0ee; box-shadow: 0 0 0 1px rgba(232,190,140,.5); }
body.g3d .steps span.on { background: linear-gradient(180deg,#ff9cc8,#d43a82); color: #fff; }
body.g3d #pause .icon { background: rgba(255,236,244,.85); }
body.g3d .over2 .scard small { color: #f3c97a; letter-spacing: 3px; }
body.g3d .over2 .scard div { color: #fff4fa; background: linear-gradient(180deg, #ffffff 0%, #ffe0ef 55%, #f7b8d6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(120,10,70,.75)) drop-shadow(0 0 16px rgba(255,120,190,.45)); }
body.g3d .over2 .ochip, body.g3d .over2 .ochip span, body.g3d .over2 .ochip b { color: #ffe6f2; text-shadow: 0 1px 2px rgba(40,0,30,.6); }
body.g3d .over2 .osep { background: rgba(243,201,122,.55); }
body.g3d .over2 .bowline span { background: linear-gradient(90deg, transparent, #f3c97a); } body.g3d .over2 .bowline span:last-child { background: linear-gradient(90deg, #f3c97a, transparent); }

/* ---------- boot (before the 3D intro can start): Glam RUN logo pops in the CENTRE, gold loading shimmer, no JOUER ---------- */
body.g3d #splash.intro .pbtn { opacity: 0; pointer-events: none; }   /* revealed by introUI at the end of the intro only */
body.g3d #splash.intro.boot .splogo { transform: translateY(calc(50vh - 14px - env(safe-area-inset-top) - 50%)); }
body.g3d #splash.intro.boot .lgw { animation: bootIn .9s cubic-bezier(.2, 1.35, .4, 1) both; }
body.g3d #splash.intro.boot .lshine { animation: bootShine 1.5s .7s ease-in-out infinite both; }
body.g3d #splash.intro.boot .skip { opacity: 0; }
@keyframes bootIn { 0% { opacity: 0; transform: scale(.62) translateY(26px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bootShine { 0% { opacity: .9; background-position: 100% 0; } 70%, 100% { opacity: .9; background-position: -50% 0; } }

/* ---------- language + UI theme pickers (profile wizard step 0 / 1 and Profile & settings) ---------- */
body.g3d .optlbl { margin: 14px 0 6px; font: 600 12px Fredoka, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #9a5a70; text-align: center; }
body.g3d .mcard .optlbl { margin: 12px 0 6px; text-align: start; }
body.g3d .lgrow { display: flex; gap: 8px; justify-content: center; }
body.g3d .lgchip { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 999px; border: 1.5px solid rgba(196,140,70,.6); background: rgba(255,255,255,.7); color: #8a1240; font: 600 14px Fredoka, system-ui, sans-serif; cursor: pointer; pointer-events: auto; }
body.g3d .lgchip.on { background: linear-gradient(180deg, #ff9cc8, #d43a82); color: #fff; border-color: rgba(255,214,190,.95); box-shadow: 0 4px 10px rgba(170,26,96,.3); }
body.g3d .throw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
body.g3d .throw.small { gap: 8px; margin-top: 0; }
body.g3d .thchip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid rgba(196,140,70,.55); background: rgba(255,255,255,.7); color: #7e0f3c; font: 600 15px Fredoka, system-ui, sans-serif; cursor: pointer; pointer-events: auto; text-align: start; }
body.g3d .throw.small .thchip { padding: 7px 10px; font-size: 13px; border-radius: 14px; }
body.g3d .thchip i { flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(196,140,70,.8); }
body.g3d .throw.small .thchip i { width: 24px; height: 24px; }
body.g3d .thchip.on { border: 2.5px solid #d4a24a; background: #fff; box-shadow: 0 0 0 3px rgba(243,201,122,.45), 0 6px 14px rgba(140,30,80,.2); }
body.g3d .thchip.on::after { content: '✓'; margin-inline-start: auto; color: #c8902e; font-weight: 700; }
:root[data-theme]:not([data-theme="rose"]) body.g3d :is(.lgchip, .thchip) { background: var(--t-ghost); color: var(--t-ghostInk); border-color: var(--t-panelBd); }
:root[data-theme]:not([data-theme="rose"]) body.g3d .lgchip.on { background: var(--t-btn); color: var(--t-btnInk); }
:root[data-theme]:not([data-theme="rose"]) body.g3d .thchip.on { box-shadow: 0 0 0 3px var(--t-panelBd); }
:root[data-theme]:not([data-theme="rose"]) body.g3d .optlbl { color: var(--t-sub); }
/* ---------- Arabic (RTL): Arabic-capable fonts, mirrored text alignment; the 3D view and absolute HUD stay put ---------- */
html[dir="rtl"] body.g3d { font-family: 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
html[dir="rtl"] body.g3d :is(.pbtn, .btn, .cbtn, .tile2, .swbtn, .tabs button, .lgchip, .thchip, .mtop, .brow, .rrow, .stitle, .ctit, .title2, .card h2, .chestside .ctitle, .toast, #banner, .pop, #hint, .sbub, .mestats, .skip, .steps span, .optlbl) { font-family: 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; letter-spacing: 0; }
html[dir="rtl"] body.g3d .pbtn.big { letter-spacing: 0; }
html[dir="rtl"] body.g3d #splash.intro .skip { right: auto; left: 16px; }
html[dir="rtl"] body.g3d .rlevel small { text-align: left; }
html[dir="rtl"] body.g3d .mcard.me { text-align: right; }
html[dir="rtl"] body.g3d #pname { direction: rtl; }
/* v11 treasure chest: the big +1,000 toast */
#hud .pop.big.chest { font-family: 'Playfair', Georgia, serif; font-style: normal; font-weight: 700; font-size: 56px; color: #fff6d8; letter-spacing: 1px;
  text-shadow: 0 3px 0 #9a6410, 0 0 22px rgba(255,190,80,.95), 0 0 48px rgba(255,165,40,.75); animation-duration: 1.8s; }