/* ==========================================================================
   3D Math Robot — interface du jeu (clubenfants.be)
   Remplace l'ancien mar3d.prod.min.css. Couleurs et polices du Club.
   ========================================================================== */

.rs-mar3d {
  font-family: "Lilita One", "Arial Rounded MT Bold", sans-serif;
  color: #1C2541;
  background: linear-gradient(#FFD449 0%, #FBE58F 45%, #EAF4D2 70%, #9CCB6A 100%);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.rs-mar3d canvas { position: absolute; top: 0; left: 0; display: block; }

/* Les étoiles décoratives de l'ancien thème ne servent plus */
.stars-background { display: none; }

/* --- Icônes (masques SVG, plus besoin de police d'icônes) ---------------- */
[class^="icon-"]::before, [class*=" icon-"]::before {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.icon-home      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h5v-6h3v6h5V10'/%3E%3C/svg%3E"); }
.icon-info      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E"); }
.icon-lock      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2.5' fill='black'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E"); }
.icon-nextlevel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.5l11 7.5-11 7.5z' fill='black'/%3E%3Crect x='17' y='4.5' width='3' height='15' rx='1.2' fill='black'/%3E%3C/svg%3E"); }
.icon-undo, .icon-mode { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v6h6'/%3E%3Cpath d='M4.6 14.5A8 8 0 1 0 6.3 6.3L4 10'/%3E%3C/svg%3E"); }
.icon-stack     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E"); }
.icon-sound-on  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4.5v15L7 15H3z' fill='black'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-sound-off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4.5v15L7 15H3z' fill='black'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-heart     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z' fill='black'/%3E%3C/svg%3E"); }
.icon-timer, .icon-pausetime, .icon-playtime { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2'/%3E%3C/svg%3E"); }

/* --- Préchargement ------------------------------------------------------ */
.rs-ringpreloader { position: absolute; left: 50%; z-index: 30; }
.lds-ring { position: relative; }
.lds-ring div { position: absolute; box-sizing: border-box; border-style: solid; border-color: transparent; border-radius: 50%; animation: rs-anneau 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
.lds-ring div:nth-child(1) { animation-delay: -.45s; }
.lds-ring div:nth-child(2) { animation-delay: -.3s; }
.lds-ring div:nth-child(3) { animation-delay: -.15s; }
@keyframes rs-anneau { to { transform: rotate(360deg); } }

/* --- Écran d'accueil du jeu --------------------------------------------- */
.rs-hscreen { position: absolute; inset: 0; overflow: hidden; }
.rs-hscreen-header {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem 0;
}
.app-title { margin: 0; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; color: #fff; -webkit-text-stroke: 2px #1C2541; paint-order: stroke fill; text-shadow: 0 5px 0 #1C2541; font-weight: 400; }
.app-info { display: block; margin-top: .6rem; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.25rem); }
.app-progress { width: min(320px, 70vw); height: 18px; margin-top: 1.6rem; border: 3px solid #1C2541; border-radius: 999px; background: #fff; overflow: hidden; }
.app-progress-inner { height: 100%; background: repeating-linear-gradient(-45deg, #E8414F 0 10px, #F06371 10px 20px); transition: width .3s; }
.app-logo { width: 96px; margin-top: 1.4rem; }

.rs-hscreenmenu { position: absolute; left: 0; right: 0; top: 52%; display: flex; justify-content: center; }
.menu-list { display: grid; gap: 1rem; justify-items: center; }
.menu-item {
  min-width: 250px; padding: .75em 1.6em; text-align: center; cursor: pointer;
  font-size: 1.45rem; letter-spacing: .03em; color: #fff; background: #E8414F;
  border-radius: 999px; box-shadow: 0 5px 0 #A92533; border: 3px solid #1C2541;
  transition: transform .08s, box-shadow .08s;
}
.menu-item:nth-child(2), .menu-item:nth-child(3) { background: #2E4AA8; box-shadow: 0 5px 0 #1C2D6B; font-size: 1.15rem; min-width: 220px; }
.menu-item:hover { filter: brightness(1.08); }
.menu-item:active { transform: translateY(4px); box-shadow: 0 1px 0 #1C2541; }

/* --- Choix du robot ----------------------------------------------------- */
.rs-hero-screen { position: absolute; inset: 0; }
.rs-class-selector {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: clamp(.3rem, 2vw, 1rem); padding: .5rem .8rem; width: max-content; max-width: 96%; box-sizing: border-box;
  background: rgba(255, 255, 255, .78); border: 3px solid #1C2541; border-radius: 999px;
}
.rs-hero-icon { width: clamp(52px, 11vw, 84px); height: auto; cursor: pointer; transition: opacity .2s, transform .15s; border-radius: 50%; }
.rs-hero-icon-down { transform: scale(.88); }
.rs-class-container { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: grid; justify-items: center; gap: .6rem; }
.rs-class-title { font-size: clamp(2rem, 6vw, 3rem); color: #fff; -webkit-text-stroke: 2px #1C2541; paint-order: stroke fill; text-shadow: 0 4px 0 #1C2541; }
.rs-class-button {
  padding: .7em 1.6em; font-size: 1.35rem; color: #fff; cursor: pointer;
  background: #E8414F; border: 3px solid #1C2541; border-radius: 999px; box-shadow: 0 5px 0 #A92533;
}
.rs-class-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #A92533; }

/* --- Écran de jeu ------------------------------------------------------- */
.rs-gscreen { position: absolute; inset: 0; overflow: hidden; }
.rs-mar3d-gameheader { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); z-index: 6; }
.rs-mar3d-levelbtn {
  min-width: 150px; padding: .45em 1.3em .55em; text-align: center; color: #fff; font-size: 1.35rem;
  background: #E8414F; border: 3px solid #1C2541; border-radius: 999px; box-shadow: 0 4px 0 #A92533;
}

.rs-hero-ui-pair { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 5; }
.rs-hero-ui { position: absolute; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; transform-origin: top left; }
/* Robot adverse : affiché en miroir à droite. L'origine dépend de l'échelle que
   le jeu applique selon la largeur (0,85 / 0,75 / 0,6 / 0,35) : 100 % / (1 + échelle). */
.rs-hero-ui[style*="right"] { transform-origin: 54.05% 0; }
@media (max-width: 991px) { .rs-hero-ui[style*="right"] { transform-origin: 57.14% 0; } }
@media (max-width: 767px) { .rs-hero-ui[style*="right"] { transform-origin: 62.5% 0; } }
@media (max-width: 575px) { .rs-hero-ui[style*="right"] { transform-origin: 74.07% 0; } }
.rs-hero-ui .rs-hero-icon { width: 84px; background: #fff; border: 4px solid #1C2541; cursor: default; }
.rs-player-healthbar { position: relative; background: #fff; border: 4px solid #1C2541; border-radius: 999px; overflow: hidden; }
.rs-player-healthbar .inner-bar { height: 100%; border-radius: 999px; transition: width .4s ease; }

.rs-operation { position: absolute; left: 50%; top: clamp(70px, 12vh, 110px); z-index: 6; display: grid; justify-items: center; gap: 14px; transform-origin: top center; }
.rs-operands { display: flex; align-items: center; gap: 18px; }
.rs-operation-item, .rs-result-item {
  width: 76px; height: 76px; display: grid; place-items: center;
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  color: #fff; font-size: 2rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.rs-result-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 92vw; }
.rs-result-item { width: 66px; height: 66px; font-size: 1.6rem; cursor: pointer; transition: transform .1s; }
.rs-result-item:hover { transform: scale(1.08); }

.rs-mar3d-gamebuttonbar { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); z-index: 6; display: flex; gap: 12px; }
.rs-mar3d-gamewonbar { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 12px; }
.rs-mar3d-mainbutton {
  width: 52px; height: 52px; line-height: 46px; font-size: 24px; cursor: pointer;
  color: #fff; background: #2E4AA8; border: 3px solid #1C2541; box-shadow: 0 4px 0 #1C2541;
}
.rs-mar3d-mainbutton-extra { background: #E8414F; }
.rs-mar3d-mainbutton:active { transform: translateY(3px); box-shadow: 0 1px 0 #1C2541; }

.coin-counter { position: fixed; display: none; z-index: 1500; font-family: "Lilita One", sans-serif; font-size: 1.6rem; color: #fff; -webkit-text-stroke: 1.5px #1C2541; paint-order: stroke fill; pointer-events: none; }

/* --- Panneaux (ajoutés directement dans <body>) -------------------------- */
.rs-game-overlay { position: fixed; inset: 0; z-index: 1900; background: rgba(28, 37, 65, .55); }
.rs-game-panel {
  position: fixed; top: 50%; left: 50%; z-index: 1950; max-width: 640px; max-height: 88vh;
  font-family: "Atkinson Hyperlegible", sans-serif; color: #1C2541;
  background: #fff; border: 4px solid #1C2541; border-radius: 22px; box-shadow: 8px 10px 0 #1C2541;
  overflow: hidden;
}
.rs-closebtn {
  position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; line-height: 34px; text-align: center;
  font: 400 30px/34px "Lilita One", sans-serif; color: #fff; background: #E8414F; border: 3px solid #1C2541; border-radius: 50%; cursor: pointer;
}
.rs-mar3d-helppanel, .rs-mar3d-levelpanel { max-height: 76vh; top: 55%; }
.rs-helpcontainer { height: 100%; padding: 1.5rem 1.6rem 2rem; box-sizing: border-box; font-size: 1.08rem; line-height: 1.55; }
.rs-helpcontainer h2, .rs-helpcontainer h3 { font-family: "Lilita One", sans-serif; font-weight: 400; margin: .2em 0 .5em; }
.rs-helpcontainer h2 { font-size: 1.9rem; padding-right: 3rem; }
.rs-helpcontainer h3 { font-size: 1.35rem; margin-top: 1em; }
.rs-mar3d-cpanel { height: auto !important; padding: 1.4rem 1.6rem; box-sizing: border-box; max-width: 480px; }
.rs-mar3d-cpanel h3 { font: 400 1.6rem "Lilita One", sans-serif; margin: 0 0 .5em; }

/* Titres « NIVEAU RÉUSSI », « NIVEAUX »… */
.trophy-level-title {
  position: fixed; top: 9vh; left: 50%; transform: translateX(-50%); z-index: 1960; margin: 0; white-space: nowrap;
  font: 400 clamp(1.8rem, 6vw, 3rem)/1 "Lilita One", sans-serif; color: #FFD449; -webkit-text-stroke: 2px #1C2541; paint-order: stroke fill; text-shadow: 0 5px 0 #1C2541;
  pointer-events: none;
}

/* Panneau de fin de niveau */
.rs-trophy-panel { width: min(90vw, 380px) !important; height: auto !important; padding: 1.6rem 1.4rem 1.4rem; box-sizing: border-box; text-align: center; }
.rs-trophy-panel .rs-closebtn { display: none; }
.meta-container { font: 400 1.6rem "Lilita One", sans-serif; margin: .4rem 0 .8rem; }
.trophy-container img { display: block; max-width: 70%; max-height: 32vh; margin: 0 auto; border-radius: 14px; }
.trophy-button-container { display: flex; justify-content: center; gap: 16px; margin-top: 1.2rem; }

/* Grille des niveaux */
.rs-mar3d-levelpanel { padding-top: 1rem; box-sizing: border-box; }
.rs-mar3d-levelgridcontainer { height: 100%; padding: 1rem 0 2rem; box-sizing: border-box; }
.rs-mar3d-levelgrid { margin: 0 auto; display: flex; flex-wrap: wrap; }
.rs-mar3d-levelgriditem {
  width: 80px; height: 80px; margin: 8px; display: grid; place-items: center; cursor: pointer;
  font: 400 1.9rem "Lilita One", sans-serif; color: #fff; background: #2E4AA8;
  border: 3px solid #1C2541; border-radius: 18px; box-shadow: 0 4px 0 #1C2541;
}
.rs-mar3d-levelgriditem:nth-child(n+6) { background: #E07A1F; }
.rs-mar3d-levelgriditem:nth-child(n+11) { background: #13897F; }
.rs-mar3d-levelgriditem:nth-child(n+16) { background: #D7373F; }
.rs-mar3d-levelgriditem:nth-child(n+21) { background: #6A45C2; }
.rs-mar3d-levelgriditem:nth-child(-n+5) { background: #3F9B3A; }
.rs-mar3d-levelgriditem .icon-lock { color: rgba(255, 255, 255, .85); font-size: 1.6rem; }
.rs-mar3d-levelgriditem:has(.icon-lock) { filter: saturate(.25) brightness(1.1); cursor: not-allowed; }

.rs-image-panel { padding: 10px; }

@media (max-width: 575px) {
  .rs-mar3d-gameheader { display: none; } /* le niveau est déjà affiché dans la barre du site */
  .rs-operation-item { width: 62px; height: 62px; font-size: 1.65rem; }
  .rs-result-item { width: 56px; height: 56px; font-size: 1.35rem; }
  .menu-item { min-width: 220px; font-size: 1.25rem; }
  .rs-mar3d-levelgriditem { width: 70px; height: 70px; margin: 5px; font-size: 1.6rem; }
}