/*
 * LELE skin for the private test code screen (the Manelix gate in /mx-gate.js). Kept
 * apart from the generated gate so reinstalling the tool never loses it. Same file on
 * the app and the website. Remove with the gate when LELE opens to parents.
 */
@font-face { font-family: "LeleSatoshi"; src: url("/lele-gate/satoshi-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "LeleSatoshi"; src: url("/lele-gate/satoshi-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

html.mx-locked, html.mx-locked body { background: #fff7e8 !important; }
html #mx-gate {
  --ink: #012559; --muted: #3d5378; --line: #012559; --teal: #0066dd; --bad: #e0453a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(520px 380px at 12% 4%, #d9ecff 0%, rgba(217, 236, 255, 0) 70%),
    radial-gradient(460px 360px at 96% 92%, #ffe7b0 0%, rgba(255, 231, 176, 0) 70%),
    #fff7e8;
  font-family: "LeleSatoshi", "Hanken Grotesk", system-ui, sans-serif;
}
html #mx-gate .mxg-page { justify-content: center; padding-top: max(28px, env(safe-area-inset-top)); }
html #mx-gate .mxg-top { margin: 0 0 6px; }
html #mx-gate .mxg-logo { width: 116px; height: auto; }
html #mx-gate .mxg-org { display: none; }

/* Bip waves from a sky disc, a word bubble over his head. */
html #mx-gate .mxg-art { display: none; }
html #mx-gate .mxg-top::after {
  content: "Bonjour !"; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(18px) rotate(3deg);
  white-space: nowrap; padding: 7px 14px; border: 2.5px solid #012559; border-radius: 16px 16px 16px 4px; background: #fca901;
  color: #012559; font: 700 15px/1.2 "LeleSatoshi", system-ui, sans-serif; box-shadow: 0 3px 0 #012559; z-index: 2;
}
html #mx-gate .mxg-top { position: relative; }
html #mx-gate .mxg-title::before {
  content: ""; display: block; width: 184px; height: 184px; margin: 18px auto 18px;
  border: 3px solid #012559; border-radius: 50%; box-shadow: 0 6px 0 #012559;
  background: url("/lele-gate/bip.webp") center 62% / 94% no-repeat, radial-gradient(circle at 50% 38%, #ffffff 0%, #cfe6ff 72%);
  animation: lele-bob 3.2s ease-in-out infinite;
}
html #mx-gate .mxg-title {
  font: 700 clamp(28px, 6vw, 36px)/1.15 "LeleSatoshi", system-ui, sans-serif; letter-spacing: -.01em; color: #012559;
}
html #mx-gate .mxg-lead { max-width: 24em; margin-bottom: 24px; color: #3d5378; font-weight: 500; font-size: 16px; }

html #mx-gate .mxg-cells { gap: 9px; }
html #mx-gate .mxg-cell {
  height: 62px; border: 2.5px solid #012559; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #012559;
  color: #012559; font: 700 26px/1 "LeleSatoshi", system-ui, sans-serif;
}
html #mx-gate .mxg-cell.is-on { border-color: #0066dd; box-shadow: 0 4px 0 #0066dd, 0 0 0 5px rgba(252, 169, 1, .45); }
html #mx-gate .mxg-cells.is-bad .mxg-cell { border-color: #e0453a; box-shadow: 0 4px 0 #e0453a; }
html #mx-gate .mxg-error { margin-top: 4px; color: #c7362c; font-weight: 700; }
html #mx-gate .mxg-btn {
  height: 58px; margin-top: 6px; border: 2.5px solid #012559; border-radius: 18px; background: #0066dd; box-shadow: 0 5px 0 #012559;
  color: #fff; font: 700 18px/1 "LeleSatoshi", system-ui, sans-serif; transition: transform .12s, box-shadow .12s;
}
html #mx-gate .mxg-btn:hover { filter: none; background: #0a72ee; }
html #mx-gate .mxg-btn:active { filter: none; transform: translateY(4px); box-shadow: 0 1px 0 #012559; }
html #mx-gate .mxg-btn:focus-visible { outline: 3px solid #fca901; outline-offset: 3px; }

@keyframes lele-bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@media (max-height: 700px) { html #mx-gate .mxg-title::before { width: 136px; height: 136px; margin: 12px auto; } }
@media (prefers-reduced-motion: reduce) { html #mx-gate .mxg-title::before { animation: none !important; } }