:root{font-family:Arial,"Noto Sans Hebrew",system-ui,sans-serif;color:#eff8ff;background:#040b1d;font-synthesis:none;-webkit-tap-highlight-color:transparent;--eye-color:hsl(283 92% 54%)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100svh;display:flex;justify-content:center;isolation:isolate;background:#040b1d}
body::before{content:"";position:fixed;inset:-30px;z-index:-1;background:linear-gradient(#030b2499,#030b24e8),url("assets/my-tuto-background.webp") center/cover;filter:blur(26px)}
.scene{position:relative;width:min(100vw,calc(100svh * 9 / 16));height:100svh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#071632 url("assets/my-tuto-background.webp") center bottom/cover no-repeat;isolation:isolate;outline-offset:-4px}
.scene:focus-visible{outline:2px solid #b7e7ff}
#world-atmosphere,#tuto-canvas,#tuto-puppet{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.brand{position:absolute;z-index:5;top:max(27px,calc(env(safe-area-inset-top) + 19px));left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* Allow for the uploaded outline while keeping the white artwork at its previous size and position. */
.brand-logo{display:block;width:44.1143%;max-width:172.05px;height:auto;transform:translateY(-11.2676%)}
.hue-panel{position:absolute;z-index:6;right:13px;top:34%;display:flex;align-items:center;flex-direction:column;gap:9px;opacity:0;transition:opacity .7s ease;touch-action:none}
.scene[data-ready="true"] .hue-panel{opacity:1}
.hue-label{font-size:10px;font-weight:400;color:#d5e8ffb5;white-space:nowrap;letter-spacing:.1px;text-shadow:0 1px 8px #001238}
.hue-capsule{width:43px;padding:13px 8px 11px;display:flex;align-items:center;flex-direction:column;gap:12px;border-radius:25px;background:linear-gradient(130deg,#152b5270,#06142b6b);border:1px solid #c6e7ff22;box-shadow:0 8px 24px #010a211a,inset 0 1px 0 #e6f4ff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eye-icon{width:24px;height:18px;color:#e4f3ffc7;flex-shrink:0}
#eye-hue{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;display:block;width:43px;height:146px;min-height:80px;margin:0;outline:none;cursor:ns-resize;border:0;background:transparent;touch-action:none}
#eye-hue::-webkit-slider-runnable-track{width:7px;height:100%;border-radius:8px;background:linear-gradient(to top,#ff3547 0%,#ff871b 8.33%,#ffdf00 16.67%,#28e437 33.33%,#00dfeb 50%,#3b60ff 66.67%,#992bff 75%,#f32dec 83.33%,#ff3547 100%);box-shadow:inset 0 0 0 1px #ffffff22}
#eye-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;margin-left:-6px;border-radius:50%;border:2px solid #f4f8ff;background:var(--eye-color);box-shadow:0 1px 7px #0008;cursor:grab}
#eye-hue:active::-webkit-slider-thumb{cursor:grabbing}
#eye-hue::-moz-range-track{width:7px;height:100%;border-radius:8px;background:linear-gradient(to top,#ff3547 0%,#ff871b 8.33%,#ffdf00 16.67%,#28e437 33.33%,#00dfeb 50%,#3b60ff 66.67%,#992bff 75%,#f32dec 83.33%,#ff3547 100%)}
#eye-hue::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:2px solid #f4f8ff;background:var(--eye-color);box-shadow:0 1px 7px #0008}
#eye-hue:focus-visible{outline:2px solid #e1f4ff;border-radius:20px;outline-offset:3px}
.hue-dot{width:5px;height:5px;border-radius:50%;background:var(--eye-color);box-shadow:0 0 8px var(--eye-color)}
.bottom-ui{position:absolute;z-index:5;left:0;right:0;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));display:flex;align-items:center;flex-direction:column;gap:10px;opacity:0;transition:opacity .7s ease;pointer-events:none}
.scene[data-ready="true"] .bottom-ui{opacity:1}
.gaze-hint{margin:0;font-size:12px;color:#153d65d9;text-shadow:0 1px 5px #e7f8ff75}
.release-version{margin:0;font-size:11px;line-height:1.25;color:#12395b;background:#e3f4fdc9;border-radius:10px;padding:2px 7px}
#retry:focus-visible{outline:2px solid #d5f0ff;outline-offset:4px}
.touch-mark{position:absolute;z-index:3;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border:1px solid #d8f3ffd9;border-radius:50%;pointer-events:none;opacity:0}
.touch-mark.is-visible{animation:touch-ring .65s ease-out forwards}
@keyframes touch-ring{0%{opacity:.75;transform:scale(.35)}100%{opacity:0;transform:scale(1.6)}}
.loading{position:absolute;top:66%;left:0;right:0;text-align:center;color:#d6edffbd;font-size:13px;letter-spacing:.2px}
.asset-error{position:absolute;z-index:10;left:24px;right:24px;top:49%;padding:22px;text-align:center;background:#08162ce8;color:#fff;border:1px solid #bce5ff3d;border-radius:20px;font-size:15px;line-height:1.8}
#retry{margin-top:8px;border:1px solid #d0ebff6c;padding:7px 18px;border-radius:20px;background:#1b3a5e;color:white;font:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:650px){.brand{top:max(16px,env(safe-area-inset-top))}.hue-panel{right:9px;top:30%;gap:6px}.hue-capsule{width:35px;padding:10px 5px;gap:9px}#eye-hue{height:110px}.eye-icon{width:21px;height:16px}.bottom-ui{gap:7px;bottom:max(12px,env(safe-area-inset-bottom))}.gaze-hint{font-size:10px}}
@media(orientation:landscape) and (max-height:540px){.brand{top:12px}.hue-panel{right:7px;top:27%}.hue-label{font-size:8px}.hue-capsule{width:30px;padding:8px 3px;gap:7px}#eye-hue{height:81px}.eye-icon{width:18px;height:13px}.bottom-ui{gap:5px;bottom:8px}.gaze-hint{display:none}}
@media(prefers-reduced-motion:reduce){.hue-panel,.bottom-ui{transition:none}.touch-mark.is-visible{animation:none;opacity:.4}}

#tuto-puppet[hidden]{display:none}

.sound-toggle{position:absolute;z-index:7;left:16px;top:max(28px,calc(env(safe-area-inset-top) + 20px));display:grid;place-items:center;width:42px;height:42px;padding:10px;border:1px solid #c6e7ff22;border-radius:50%;background:#07162e80;color:#e0edffd9;cursor:pointer;touch-action:manipulation}
.sound-toggle svg{width:22px;height:22px}.sound-off{display:none}.sound-toggle[data-enabled="false"] .sound-waves{display:none}.sound-toggle[data-enabled="false"] .sound-off{display:block}.sound-toggle:focus-visible{outline:2px solid #e1f4ff;outline-offset:3px}.sound-toggle:disabled{opacity:.35}

/* Space flight is an opaque sibling screen; the pet canvas rests behind it. */
.space-game{position:absolute;inset:0;z-index:12;overflow:hidden;background:#03091c;touch-action:none;outline:none}
.space-game[hidden],.space-game [hidden]{display:none!important}
#space-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.space-brand{position:absolute;top:max(30px,calc(env(safe-area-inset-top) + 22px));left:50%;width:42%;max-width:170px;transform:translateX(-50%);pointer-events:none}
.space-brand img{display:block;width:100%;height:auto}
.space-back{position:absolute;right:15px;top:max(28px,calc(env(safe-area-inset-top) + 20px));width:42px;height:42px;border:1px solid #bedfff30;border-radius:50%;background:#07132c99;color:#e8f6ff;font-size:26px;cursor:pointer}
.scene[data-screen="space"] #sound-toggle{z-index:15}
.scene[data-screen="space"]>.brand,.scene[data-screen="space"]>.hue-panel,.scene[data-screen="space"]>.bottom-ui{visibility:hidden;pointer-events:none}
.space-menu{position:absolute;bottom:max(27px,calc(env(safe-area-inset-bottom) + 20px));left:8%;right:8%;display:flex;align-items:center;flex-direction:column;gap:12px}
.space-start,.space-home{width:100%;font-family:inherit;cursor:pointer;touch-action:manipulation}
.space-start{min-height:62px;border:1px solid #c8f4ffb0;border-radius:32px;color:#082653;background:linear-gradient(175deg,#c6f3ff,#8bd9fb 70%,#5db9ee);box-shadow:inset 0 2px 6px #eaffffa0,inset 0 -4px 8px #327bde70,0 9px 24px #00124266;font-size:23px;font-weight:700;letter-spacing:-.3px}
.space-home{width:76%;min-height:46px;border:1px solid #b6ddff60;border-radius:25px;background:linear-gradient(130deg,#315a8a7a,#101e45c2);box-shadow:inset 0 1px 6px #d4e9ff18;color:#f0f6ff;font-size:17px}
.space-start:disabled{cursor:wait;opacity:.65}
.space-game button:focus-visible,.space-open:focus-visible{outline:2px solid #e5f9ff;outline-offset:4px}
.space-last,.space-best{margin:0;text-align:center;font-size:12px;line-height:1.3;color:#daeaffdb;text-shadow:0 2px 8px #000}
.space-best:empty{display:none}.space-last{font-size:15px;color:#e8faff}
.space-meter{position:absolute;right:13px;top:23%;display:flex;align-items:center;flex-direction:column;gap:5px;min-width:61px;padding:13px 8px;border-radius:24px;background:linear-gradient(135deg,#14305d99,#08112dc2);border:1px solid #cbeaff30;box-shadow:0 8px 25px #0002;pointer-events:none}
.space-meter span{font-size:10px;color:#d4e8ffcc}.space-meter strong{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;color:#f2fbff;line-height:1.1}
.space-meter i{height:43px;width:15px;margin-top:7px;border-right:1px solid #92d9ff85;background:repeating-linear-gradient(to bottom,#9fdcff8a 0 1px,transparent 1px 10px)}
.space-hint{position:absolute;bottom:max(23px,calc(env(safe-area-inset-bottom) + 14px));left:8px;right:8px;margin:0;text-align:center;color:#d8edffbc;font-size:12px;pointer-events:none;text-shadow:0 2px 8px #001}
.space-status{position:absolute;left:22px;right:22px;top:15%;text-align:center;margin:0;color:#e5f3ffdc;font-size:13px;line-height:1.5;text-shadow:0 2px 8px #001;pointer-events:none}
.space-pause{position:absolute;z-index:10;right:65px;top:max(28px,calc(env(safe-area-inset-top) + 20px));display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #bedfff50;border-radius:50%;background:#07132cbb;color:#e8f6ff;cursor:pointer;touch-action:manipulation}
.space-pause svg{width:24px;height:24px}
.space-pause-panel{position:absolute;inset:0;z-index:11;display:grid;place-items:center;background:#01071577}
.space-pause-card{width:min(76%,330px);display:flex;flex-direction:column;gap:18px;text-align:center;color:#e5f8ff}
.space-pause-card>strong{font-size:23px;text-shadow:0 2px 10px #000}
.space-resume{width:100%;min-height:60px;border:1px solid #d4f7ff90;border-radius:30px;background:#16385eef;color:#e5f8ff;font:19px Arial,sans-serif;cursor:pointer;touch-action:manipulation}
.space-open{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #153d6530;border-radius:18px;background:#d3ecfc99;color:#12395b;font:11px Arial,sans-serif;cursor:pointer}
.space-open svg{width:15px;height:15px}
@media(max-height:650px){.space-menu{bottom:16px;gap:8px}.space-start{min-height:49px;font-size:19px}.space-home{min-height:36px;font-size:15px}.space-brand{top:20px;width:35%}.space-meter{top:23%;padding:10px 7px;min-width:52px}.space-meter strong{font-size:20px}.space-meter i{height:25px}.space-last,.space-best{font-size:11px}}

.space-fade{position:absolute;inset:0;z-index:9;background:#01040e;opacity:var(--space-fade,0);pointer-events:none}
.space-game[data-paused="true"] .space-energy i{transition:none}
.space-guide{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 3px;font-size:12px;line-height:1.5;color:#d6f5ff;text-shadow:0 2px 8px #001}
.energy-icon{display:inline-block;flex:none;width:13px;height:13px;border:1px solid #c9f9ff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#efffff,#72e8ff 45%,#1379c6);box-shadow:0 0 10px #4fceff66}
.space-energy{position:absolute;left:13px;top:23%;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:88px;padding:13px 10px 11px;border:1px solid #8ee8ff70;border-radius:22px;background:linear-gradient(135deg,#123d64d9,#091b3bdd);color:#dcfaff;pointer-events:none}
.space-energy .energy-icon{width:18px;height:18px}.space-energy>span:not(.energy-icon){font-size:11px}.space-energy strong{font-size:17px;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.2}
.space-energy i{height:3px;width:55px;border-radius:3px;background:#81e9ff;transform:scaleX(var(--energy-fill,1));transform-origin:right center;transition:transform .08s linear}
@media(max-height:650px){.space-guide{font-size:10px;gap:6px}.space-energy{min-width:75px;padding:10px 7px;gap:5px}.space-energy>span:not(.energy-icon){font-size:10px}.space-energy strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.space-energy i{transition:none}}
.space-bonuses{position:absolute;left:13px;top:23%;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.space-bonuses .space-energy{position:relative;left:auto;top:auto;min-width:88px;padding:9px 8px;gap:5px;border-radius:18px}
.space-bonuses .space-energy .energy-icon{width:15px;height:15px;font-size:12px;line-height:13px;color:#172651;text-align:center}
.space-bonuses .space-energy strong{font-size:15px}.space-bonuses .space-energy i{margin-top:1px}
.bonus-shield .energy-icon{background:radial-gradient(circle at 35% 30%,#fff6ff,#d4baff 45%,#8656cf);box-shadow:0 0 10px #bba0ff66;border-color:#eee0ff}
.bonus-auto .energy-icon{background:radial-gradient(circle at 35% 30%,#fff9dc,#ffe3a5 45%,#b77a2c);box-shadow:0 0 10px #ffd38a66;border-color:#fff1ce}
.bonus-shield.space-energy{border-color:#c2a2ff80}.bonus-auto.space-energy{border-color:#ffd38a80}
.bonus-shield.space-energy i{background:#c2a2ff}.bonus-auto.space-energy i{background:#ffd38a}
.space-guide{gap:16px;flex-wrap:wrap}.space-guide>span{display:flex;align-items:center;gap:6px}.space-level{margin-top:3px;color:#abddff!important;font-size:10px!important}
@media(max-height:650px){.space-bonuses .space-energy{min-width:76px;padding:7px 6px;gap:4px}.space-bonuses .space-energy strong{font-size:13px}.space-guide{gap:10px}}

/* Temporary stage packaging: clear timing and placement, ready for art direction. */
.space-stage{position:absolute;z-index:7;left:8%;right:8%;top:43%;display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;pointer-events:none;color:#edf8ff;text-shadow:0 3px 22px #02091f}
.space-stage strong{font-size:clamp(24px,7vw,36px);font-weight:500;line-height:1.25}.space-stage span{font-size:14px;color:#c5daee}
.bonus-boost .energy-icon{background:#ff93bc;box-shadow:0 0 9px #ff93bc70}.bonus-warning .energy-icon{background:#ff776a;box-shadow:0 0 9px #ff776a70}
.bonus-boost.space-energy{border-color:#ff93bc80}.bonus-warning.space-energy{border-color:#ff776a80}.bonus-boost.space-energy i{background:#ff93bc}.bonus-warning.space-energy i{background:#ff776a}
.space-bonuses .space-energy{padding:7px 8px;gap:4px;min-width:80px}.space-bonuses .space-energy .energy-icon{display:none}.space-bonuses{max-height:57%;overflow:hidden}
@media(max-height:650px){.space-bonuses{top:20%;gap:4px}.space-bonuses .space-energy{padding:5px 6px;gap:3px;min-width:72px}.space-bonuses .space-energy>span:not(.energy-icon){font-size:9px}.space-stage{top:39%}}

/* Compact ball lives stay clear of the side-flight silhouette. */
.space-meter{top:19%}
.space-lives{position:static;display:flex;flex-direction:column;gap:5px;align-items:center;margin-top:7px;padding:8px 0 0;width:100%;border-top:1px solid #a5ceff30;pointer-events:none}
.space-lives img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 4px #8be4ff66)}
.space-lives img.is-lost{filter:none;opacity:.2}
.space-meter .space-speed-label{margin-top:9px;padding-top:8px;width:100%;text-align:center;border-top:1px solid #a5ceff30}.space-meter .space-speed{font-size:19px}.space-meter i{display:none}
.space-status{top:14%;left:22px;right:22px}
@media(max-height:650px){.space-lives{gap:3px;margin-top:3px;padding-top:5px}.space-lives img{width:27px;height:27px}.space-status{top:17%;font-size:11px;right:90px;left:18px}.space-bonuses{top:28%}.space-meter{top:14%;gap:3px;padding:8px 6px}.space-meter>span{font-size:9px}.space-meter>strong{font-size:18px}.space-meter .space-speed-label{margin-top:4px;padding-top:4px}.space-meter .space-speed{font-size:16px}}

.space-compass{position:absolute;inset:0;z-index:6;pointer-events:none;color:#c8f8ff;text-align:center}
.compass-hint{position:absolute;bottom:max(5%,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:76%;margin:0;padding:9px 14px;border-radius:18px;background:#06141ee6;border:1px solid #7aebff4d;font-size:14px;color:#e7f8fa}
.compass-manual{position:absolute;bottom:6%;right:6%;pointer-events:auto;color:#a6c5d7;background:#071727a8;border:1px solid #93b6cd40;border-radius:50%;width:38px;height:38px;font-size:19px;cursor:pointer}
.compass-eye{position:absolute;top:0;left:0;width:52px;height:52px;border:0;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer}
.space-lives{background:none;border:0;border-top:1px solid #a5ceff30}
.compass-hint-button{display:grid;place-items:center;width:33px;height:33px;margin-top:5px;border-radius:50%;border:1px solid #87c9e7ad;background:#122c46;color:#e9faff;box-shadow:0 0 11px #62caed5c;font:700 20px system-ui;pointer-events:auto;cursor:pointer}
.space-game[data-phase="compass"] .space-lives img:not(.is-lost){filter:drop-shadow(0 0 4px #82caed75)}
.space-scores{position:absolute;inset:17% 5% auto;max-height:77%;overflow:auto;z-index:8;direction:rtl;padding:16px;border:1px solid #8be5fc65;border-radius:21px;color:#edfaff;background:#08162bf5;box-shadow:0 14px 45px #01040caa;touch-action:pan-y}
.space-scores header,.score-list li,.score-form div{display:flex;align-items:center;gap:10px}.space-scores header{justify-content:space-between}.space-scores h2{margin:0;font-size:21px}
.space-scores button,.score-form input{padding:7px 12px;border:1px solid #92e1f76e;border-radius:10px;background:#112a44;color:inherit;font:inherit}.space-scores button{cursor:pointer}
.score-result,.score-notice{font-size:14px;color:#c0d8ee}.score-result{margin:8px 0 13px}.score-notice:empty{display:none}.score-form label{display:block;font-size:14px;margin-bottom:6px}.score-form input{width:100%;min-width:0}
.score-list{margin:9px 0 0;padding:0;list-style:none;font-size:14px}.score-list li{min-height:29px;border-bottom:1px solid #34506b70}.score-list li:last-child{border:0}.score-list .score-rank{width:1.5em;color:#97bfd8}.score-list b{flex:1;overflow-wrap:anywhere}.score-list small{color:#afc8dd}.score-list .score-number{font-variant-numeric:tabular-nums;font-weight:600}
#space-scores-open{min-height:32px}
.space-game[data-phase="compass"] .space-meter :is(i,.space-speed-label,#space-speed,#space-speed+span){display:none}

.space-polaris{position:absolute;inset:0;z-index:6;pointer-events:none;color:#d2e7f3}
.polaris-copy{position:absolute;top:max(103px,12.4%);left:6%;right:6%;text-align:center;text-shadow:0 2px 8px #000;pointer-events:none}
.polaris-copy>strong{font-size:17px;font-weight:500;letter-spacing:.3px}
.polaris-copy p{margin:7px 0 0;font-size:12px;line-height:1.45;color:#c3d8e9}
.polaris-copy .polaris-progress{font-size:10px;color:#819ab3}
.polaris-star{position:absolute;width:28px;height:28px;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;color:transparent;pointer-events:auto;touch-action:none;cursor:crosshair}
.polaris-star:focus-visible{outline:1px solid #b7e8ff!important;outline-offset:1px!important}
.polaris-undo{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:18px;padding:8px 12px;border:1px solid #93bedc42;border-radius:20px;color:#b1cee2;background:#0a193a80;font:12px Arial,sans-serif;pointer-events:auto;cursor:pointer}
.polaris-undo:disabled{opacity:.3;cursor:default}
.polaris-stage{position:absolute;bottom:31px;right:22px;font-size:12px;color:#9ab9d0}
.space-game[data-phase="polaris"] .space-meter,.space-game[data-phase="polaris"] .space-status,.space-game[data-phase="polaris"] .space-bonuses{display:none}
@media(max-height:650px){.polaris-copy{top:91px}.polaris-copy>strong{font-size:15px}.polaris-copy p{margin-top:4px;font-size:11px}.polaris-copy .polaris-progress{font-size:9px}}

@media(max-width:380px){.space-brand{width:35%}}
@media(max-width:350px){.space-brand{width:31%}}