.lumili-game{--cyan:#54eaff;--orange:#ff9e32;color:#fff;min-height:100svh;font-family:var(--font-sans), system-ui, sans-serif;background:#080d14;overflow:hidden}.lumili-game *,.lumili-game :before,.lumili-game :after{box-sizing:border-box}.lumili-game button{font:inherit}.lumili-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.lumili-intro-screen{background:#101923 var(--lumili-scene-image) center / cover no-repeat;place-items:center;min-height:100svh;padding:24px;display:grid;position:relative;overflow:hidden}.lumili-intro-screen:before{content:"";-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#06101abf;position:absolute;inset:0}.lumili-intro-card{text-align:center;background:#07131fe8;border:2px solid #8eeeff99;border-radius:32px;width:min(92vw,680px);padding:clamp(28px,5vw,56px);position:relative;box-shadow:0 24px 80px #000a,inset 0 0 32px #54eaff12}.lumili-intro-card h1{color:#fff;font-family:var(--font-serif,Georgia), serif;margin:0;font-size:clamp(34px,5vw,64px);font-weight:800;line-height:1}.lumili-intro-card span{color:#c9f7ff;margin:18px auto 26px;font-size:clamp(16px,1.7vw,23px);font-weight:700;line-height:1.35;display:block}.lumili-intro-card button{color:#14202b;cursor:pointer;background:linear-gradient(145deg,#ffbe5c,#ed8121);border:2px solid #fff1c2;border-radius:999px;min-width:min(100%,260px);min-height:58px;padding:12px 26px;font-size:clamp(18px,2vw,25px);font-weight:950;box-shadow:0 10px 30px #0007,0 0 24px #ffad4560}.lumili-intro-card button:is(:hover,:focus-visible){outline-offset:4px;filter:brightness(1.08);outline:4px solid #8ef4ff}.lumili-stage{--navigation-size:clamp(64px, 6vw, 94px);background:#101923;outline:0;min-height:100svh;position:relative;overflow:hidden}.lumili-stage:before{content:"";background:linear-gradient(#06101a66, #06101a66), var(--lumili-scene-image) center / cover no-repeat;filter:blur(18px)brightness(.72);position:absolute;inset:-28px;transform:scale(1.04)}.lumili-stage-frame{z-index:1;aspect-ratio:16/9;background:#111923 var(--lumili-scene-image) center / cover no-repeat;width:min(100vw,177.778svh);position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 54px #07111ba8}.lumili-controls{z-index:50;gap:9px;display:flex;position:absolute;top:2.2%;right:1.5%}.lumili-controls button,.lumili-prev,.lumili-next,.lumili-load-error button{aspect-ratio:1;color:#fff;cursor:pointer;background:#101a25dc;border:2px solid #a5f4ff99;border-radius:50%;place-items:center;width:clamp(48px,4vw,66px);font-size:clamp(20px,2vw,30px);font-weight:950;display:grid;box-shadow:0 7px 24px #0008,inset 0 0 14px #54eaff1f}.lumili-controls button:is(:hover,:focus-visible),.lumili-prev:is(:hover,:focus-visible),.lumili-next:is(:hover,:focus-visible){outline:4px solid var(--orange);outline-offset:3px}.lumili-progress{z-index:50;gap:9px;display:flex;position:absolute;top:3.8%;left:50%;transform:translate(-50%)}.lumili-progress span{background:#111b25c7;border:1px solid #fff8;border-radius:99px;width:clamp(22px,2.4vw,38px);height:8px;box-shadow:0 3px 9px #0008}.lumili-progress span.is-active{background:var(--cyan);box-shadow:0 0 13px var(--cyan);border-color:#c7f9ff}.lumili-question,.lumili-phrase-starter{z-index:48;color:#fff;text-align:center;text-shadow:0 2px 8px #000;pointer-events:none;background:#07131f9c;border:1px solid #d8fbff55;border-radius:999px;max-width:min(76%,840px);margin:0;padding:7px 17px;font-size:clamp(13px,1.2vw,18px);font-weight:750;line-height:1.2;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #0004}.lumili-question{top:8.5%}.lumili-phrase-starter{color:#c9f7ff;top:15.5%}.lumili-syllable-guide{z-index:30;text-align:center;pointer-events:none;background:#08131ecc;border:1px solid #a8efff69;border-radius:22px;width:min(70%,700px);padding:clamp(9px,1.2vw,17px);position:absolute;top:18%;left:50%;transform:translate(-50%);box-shadow:0 14px 38px #0008}.lumili-syllable-guide strong,.lumili-syllable-guide span{display:block}.lumili-syllable-guide strong{color:#bff8ff;font-size:clamp(13px,1.25vw,20px)}.lumili-syllable-guide span{color:#fff;letter-spacing:.04em;margin-top:5px;font-size:clamp(20px,2.2vw,34px);font-weight:900}.lumili-loading,.lumili-load-error{z-index:40;background:#0b111bcc;place-items:center;display:grid;position:absolute;inset:0}.lumili-loading:after{content:"";aspect-ratio:1;border:7px solid #fff3;border-top-color:var(--cyan);border-radius:50%;width:70px;animation:.8s linear infinite lumili-spin}@keyframes lumili-spin{to{transform:rotate(1turn)}}.lumili-prev,.lumili-next{z-index:55;width:var(--navigation-size);color:#161b21;background:linear-gradient(145deg,#ffb84f,#ed7f1d);border-color:#ffe3a3;font-size:clamp(34px,4vw,58px);position:absolute;top:50%;transform:translateY(-50%)}.lumili-prev{left:1.5%}.lumili-next{right:1.5%}.lumili-next:disabled{pointer-events:none;cursor:default;opacity:.28;filter:grayscale(.7)}.lumili-power-cells{z-index:20;position:absolute;inset:0}.lumili-power-cells button{aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:50%;width:10%;min-width:44px;min-height:44px;position:absolute;bottom:4.8%;transform:translate(-50%)}.lumili-power-cells button:first-child{left:18.48%}.lumili-power-cells button:nth-child(2){left:34.18%}.lumili-power-cells button:nth-child(3){left:50.02%}.lumili-power-cells button:nth-child(4){left:65.7%}.lumili-power-cells button:nth-child(5){left:81.58%}.lumili-power-cells button:disabled{cursor:default}.lumili-power-cells button:focus-visible{outline-offset:-5px;outline:4px dashed #fff2a8}.lumili-power-cells button span{z-index:2;transform-origin:50% 100%;filter:drop-shadow(0 0 14px #5df);opacity:0;pointer-events:none;background:url(/games/lumili-heroes/art/energy-plume.webp) bottom/contain no-repeat;width:180%;height:430%;position:absolute;bottom:50%;left:50%;transform:translate(-50%)scale(.18)}.lumili-power-cells button.is-done span{animation:.8s cubic-bezier(.15,.75,.25,1) both lumili-energy-plume}@keyframes lumili-energy-plume{0%{opacity:0;transform:translate(-50%)scale(.18,.08)}52%{opacity:1;transform:translate(-50%)scale(1.08)}to{opacity:.9;transform:translate(-50%)scale(.82)}}.lumili-hotspots{z-index:20;position:absolute;inset:0}.lumili-hotspots button{left:var(--left);top:var(--top);width:var(--width);height:var(--height);cursor:pointer;background:0 0;border:0;position:absolute}.lumili-hotspots button span{color:#fff;opacity:0;white-space:nowrap;background:#0c1725e8;border:2px solid #bff9ff;border-radius:999px;padding:7px 13px;font-size:clamp(13px,1.35vw,22px);font-weight:900;position:absolute;bottom:-8px;left:50%;transform:translate(-50%,30%);box-shadow:0 5px 14px #0008}.lumili-hotspots button:after{content:"";aspect-ratio:1;opacity:0;border:2px solid #0000;border-radius:50%;width:clamp(18px,2vw,30px);position:absolute;top:6px;right:6px;transform:scale(.7)}.lumili-hotspots button:is(:hover,:focus-visible):after{opacity:.75;border-color:#d9fbff;transform:scale(1)}.lumili-hotspots button.is-done:after{content:"✓";background:var(--cyan);color:#07131f;opacity:1;border-color:#fff;place-items:center;font-size:clamp(12px,1.3vw,19px);font-weight:950;display:grid;transform:scale(1);box-shadow:0 0 14px #41e9ff}.lumili-hotspots button:focus-visible{outline-offset:2px;outline:2px dashed #fff}.lumili-hotspots button.is-done span{opacity:1}.lumili-gear-tray{z-index:20;grid-template-columns:repeat(6,1fr);gap:1%;display:grid;position:absolute;bottom:2.5%;left:7%;right:7%}.lumili-gear-tray button{color:#fff;cursor:pointer;background:0 0;border:0;min-width:0;min-height:44px;padding:0 5px 5px;position:relative}.lumili-gear-tray button:is(:hover,:focus-visible){outline-offset:1px;border-radius:18px;outline:3px dashed #ffd173}.lumili-gear-sprite{aspect-ratio:1;filter:drop-shadow(0 8px 7px #000a);background-image:url(/games/lumili-heroes/art/gear-atlas.webp);background-repeat:no-repeat;background-size:300% 200%;width:100%;display:block}.lumili-gear-tray strong{text-shadow:0 2px 6px #000;margin-top:-7px;font-size:clamp(11px,1.15vw,18px);display:block}.lumili-gear-tray button.is-done .lumili-gear-sprite{animation:.85s cubic-bezier(.2,.8,.35,1) both lumili-fly-to-cabinet}.lumili-gear-tray button.is-done strong{opacity:.42}.lumili-gear-tray button.is-done:after{content:"✓";aspect-ratio:1;background:var(--cyan);color:#07131f;border:2px solid #fff;border-radius:50%;place-items:center;width:34px;font-weight:950;display:grid;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 16px #54eaff}@keyframes lumili-fly-to-cabinet{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--fly-x), -245%) scale(.35);opacity:0}}.lumili-action{z-index:31;color:#fff;pointer-events:none;background:#07131fb8;border-radius:999px;min-height:1.4em;margin:0;padding:6px 14px;font-size:clamp(13px,1.2vw,18px);font-weight:800;position:absolute;bottom:31%;left:50%;transform:translate(-50%)}.lumili-action:empty{display:none}.lumili-finale{background:linear-gradient(#0000 38%,#08111ecf),url(/games/lumili-heroes/art/finale.webp) 50%/cover;place-items:end center;min-height:100svh;padding:24px 24px 5svh;display:grid}.lumili-finale>div{text-align:center;background:#08131edb;border:2px solid #8feeff80;border-radius:32px;max-width:780px;padding:clamp(22px,3vw,40px);box-shadow:0 24px 70px #000a}.lumili-finale p{color:var(--orange);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;font-size:16px;font-weight:950}.lumili-finale h1{font-family:var(--font-serif), Georgia, serif;margin:0 0 22px;font-size:clamp(34px,5vw,68px);line-height:1}.lumili-finale button{aspect-ratio:1;color:#fff;background:#14273a;border:2px solid #a9f5ff;border-radius:50%;width:72px;margin:6px;font-size:34px;font-weight:950}.lumili-gate{color:#17202c;background:#f7f4ea;border-radius:28px;max-width:480px;padding:30px}.lumili-gate h2{font:700 36px/1.1 var(--font-serif), Georgia, serif}.lumili-gate form{gap:10px;display:grid}.lumili-gate input{border:2px solid #315f76;border-radius:12px;min-height:48px;padding:8px;font-size:20px}.lumili-gate form>div{gap:8px;display:flex}.lumili-gate button{color:#fff;background:#17364a;border:0;border-radius:12px;min-height:48px;padding:8px 14px;font-weight:900}.lumili-gate-error{color:#9a3030;min-height:20px}@media (max-aspect-ratio:4/3){.lumili-controls{gap:6px}.lumili-controls button{width:46px}.lumili-gear-tray{left:3%;right:3%}}@media (prefers-reduced-motion:reduce){.lumili-game *{transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
