:root{--space:#071a20;--deep:#0b5963;--teal:#0e9297;--aqua:#35d6d0;--honey:#d98b18;--amber:#f5a623;--coral:#ef7466;--cherry:#8a294c;--green:#76d987;--cream:#f3eee4}*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden;background:#041116;color:var(--cream);font-family:Inter,"Segoe UI",Arial,sans-serif}button,input{font:inherit}.kp-game{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;user-select:none;touch-action:none;background:#041116}.kp-world{position:absolute;inset:-5%;z-index:-5;background:url("assets/world_panorama.jpg") center/cover no-repeat;transition:background-position .15s linear;will-change:transform,background-position}.kp-world:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,13,18,.25),transparent 35%,rgba(3,12,17,.4))}.kp-stars{position:absolute;inset:0;z-index:-4;opacity:.45;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#35d6d0 1px,transparent 1px);background-size:83px 83px,137px 137px;background-position:10px 5px,40px 65px}.kp-vignette{position:absolute;inset:0;z-index:20;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.66)}.kp-field,.kp-decor{position:absolute;inset:0}.kp-decor{z-index:1;pointer-events:none}.decor-object{position:absolute;height:auto;filter:drop-shadow(0 0 16px rgba(53,214,208,.18));will-change:transform}.kp-field{z-index:4}.kp-topbar{position:absolute;z-index:25;top:16px;left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 28px));display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}.kp-mission{min-width:min(590px,70vw);padding:12px 20px;border:1px solid rgba(53,214,208,.4);border-radius:18px;background:linear-gradient(120deg,rgba(7,26,32,.92),rgba(11,89,99,.62));box-shadow:0 12px 40px rgba(0,0,0,.34),0 0 28px rgba(53,214,208,.1)}.kp-mission small{display:block;color:#86dcd8;letter-spacing:.15em;font-size:10px}.kp-mission strong{display:block;font-size:clamp(20px,2.6vw,31px);color:#fff4d5}.groupCount{display:block;color:#a8c8cb;font-size:12px;margin-top:3px}.kp-score,.kp-summary{display:flex;gap:8px}.kp-pill{min-width:86px;padding:9px 12px;text-align:center;border:1px solid rgba(245,166,35,.3);border-radius:14px;background:rgba(7,26,32,.86)}.kp-pill b{display:block;font-size:20px;color:#ffd475}.kp-pill span{font-size:11px;color:#b9d0d1}.kp-capsule{position:absolute;will-change:left,top,transform;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));transition:filter .16s}.kp-capsule img{width:100%;height:100%;object-fit:contain;pointer-events:none}.kp-capsule.near{filter:drop-shadow(0 0 20px rgba(53,214,208,.8))}.kp-capsule.wrong{filter:drop-shadow(0 0 28px rgba(239,116,102,.95))}.kp-word{position:absolute;left:18%;right:17%;top:32%;height:35%;display:flex;align-items:center;justify-content:center;text-align:center;color:#12252a;font-weight:900;line-height:1.02;text-shadow:0 1px rgba(255,255,255,.55);overflow:hidden}.kp-vacuum{position:absolute;z-index:12;left:0;top:0;width:clamp(170px,20vw,260px);height:clamp(170px,20vw,260px);will-change:transform;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}.kp-vacuum img{width:100%;height:100%;object-fit:contain}.kp-vacuum.capture{filter:drop-shadow(0 0 30px rgba(53,214,208,.9))}.kp-vacuum.error{animation:shake .42s;filter:drop-shadow(0 0 25px rgba(138,41,76,.95))}@keyframes shake{20%,60%{margin-left:-9px}40%,80%{margin-left:9px}}.kp-beam{position:absolute;z-index:10;height:34px;transform-origin:left center;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(53,214,208,.8),rgba(245,166,35,.2),transparent);filter:blur(3px);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%)}.kp-beam.on{opacity:1;animation:beam .18s infinite alternate}@keyframes beam{to{filter:blur(6px);opacity:.65}}.kp-burst{position:absolute;z-index:18;width:1px;height:1px;pointer-events:none}.kp-burst:before,.kp-burst:after{content:"";position:absolute;border-radius:50%;transform:translate(-50%,-50%);animation:ring 1s ease-out forwards}.kp-burst:before{width:30px;height:30px;border:5px solid var(--aqua);box-shadow:0 0 40px var(--amber)}.kp-burst:after{width:18px;height:18px;background:#fff6c9;box-shadow:0 0 65px 28px rgba(53,214,208,.5)}.kp-burst i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--amber);transform:rotate(var(--a)) translateX(0);animation:particle 1s ease-out forwards}@keyframes ring{to{width:360px;height:360px;opacity:0;border-width:1px}}@keyframes particle{to{transform:rotate(var(--a)) translateX(var(--d));opacity:0}}.kp-controls{position:absolute;z-index:30;left:14px;right:14px;bottom:12px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.kp-controls label{padding:8px 12px;border-radius:12px;background:rgba(7,26,32,.9);font-size:12px;color:#b8d5d6}.kp-controls input{vertical-align:middle;width:130px;accent-color:var(--amber)}.kp-btn{border:1px solid rgba(53,214,208,.36);border-radius:11px;padding:9px 13px;background:linear-gradient(#0e9297,#0b5963);color:#fff;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.2)}.kp-btn:hover{filter:brightness(1.13)}.kp-btn.amber,.grabBtn{background:linear-gradient(#d98b18,#945207);border-color:rgba(245,166,35,.6)}.kp-btn.cherry{background:linear-gradient(#8a294c,#54274f)}.kp-toast{position:absolute;z-index:40;left:50%;top:115px;transform:translate(-50%,-8px);opacity:0;padding:9px 16px;border-radius:999px;background:rgba(7,26,32,.94);border:1px solid rgba(245,166,35,.5);color:#ffe3a6;font-weight:700;pointer-events:none;transition:.2s}.kp-toast.show{opacity:1;transform:translate(-50%,0)}.kp-modal{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,9,13,.78);backdrop-filter:blur(9px);touch-action:auto}.kp-modal.open{display:flex}.kp-panel{width:min(850px,100%);max-height:92vh;overflow:auto;padding:24px;border:1px solid rgba(53,214,208,.45);border-radius:24px;background:linear-gradient(#082028,#07171f);box-shadow:0 25px 80px #0008}.kp-panel h2{font-size:30px;margin:0}.kp-panel .sub{color:#a9c9cb}.kp-summary{margin:16px 0;flex-wrap:wrap}.kp-summary .kp-pill{flex:1}.repair-card{padding:17px;margin:11px 0;border:1px solid rgba(239,116,102,.3);border-radius:17px;background:rgba(255,255,255,.04)}.repair-card.done{border-color:rgba(118,217,135,.5);background:rgba(118,217,135,.07)}.repair-command{font-size:12px;color:#8dc9cb}.repair-word{font-size:27px;font-weight:900;color:#ffd271;text-transform:uppercase;margin:5px 0}.repair-form{display:flex;gap:7px;margin-top:10px}.repair-form input{flex:1;min-width:0;padding:11px;border:1px solid rgba(53,214,208,.4);border-radius:10px;background:#061419;color:#fff}.repair-result{margin-top:8px;color:#8ce5a0;font-weight:700}.repair-error{margin-top:8px;color:#ff9289}.panelActions{display:flex;justify-content:flex-end;margin-top:15px}.kp-load-error{max-width:650px;margin:12vh auto;padding:30px;border:1px solid #35d6d066;border-radius:20px;background:#071a20}
@media(max-width:700px){.kp-topbar{top:7px}.kp-mission{min-width:0;width:100%;padding:9px 12px}.kp-score{display:none}.kp-toast{top:90px;max-width:90%;text-align:center}.kp-controls{left:6px;right:6px;bottom:6px;gap:5px}.kp-controls label{width:100%;text-align:center;padding:5px}.kp-btn{padding:8px;font-size:11px}.kp-vacuum{width:165px;height:165px}.kp-panel{padding:17px}.repair-form{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.kp-burst,.decor-object{animation-duration:.01ms!important}.kp-world{transition:none}}

/* Visual refinements: capsules travel above the vacuum, while controls remain on top. */
.kp-field{z-index:14}
.kp-capsule{z-index:1;transform-origin:50% 50%}
.kp-word{left:17%;right:16%;top:30%;height:39%;color:#10242a;font-weight:950;line-height:1.04;letter-spacing:.01em;-webkit-text-stroke:2px rgba(255,255,255,.96);paint-order:stroke fill;text-shadow:0 2px 3px rgba(0,0,0,.5),0 0 1px #fff}
.decor-object{filter:brightness(1.14) contrast(1.1) drop-shadow(0 0 20px rgba(53,214,208,.28))}

/* The shell rotates independently; the label stays horizontal and readable. */
.kp-capsule:not(.sucking){transform:none!important}
.kp-capsule>img{transform-origin:50% 50%;animation:kp-shell-spin 34s linear infinite;will-change:transform}
.kp-capsule:nth-child(3n+2)>img{animation-duration:42s;animation-direction:reverse}
.kp-capsule:nth-child(3n)>img{animation-duration:29s}
.kp-capsule.sucking>img{animation-play-state:paused}
@keyframes kp-shell-spin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.kp-word{z-index:2;isolation:isolate;padding:3px 9px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,251,235,.9) 0%,rgba(255,247,220,.82) 54%,rgba(255,244,211,.62) 68%,rgba(255,248,225,0) 82%);box-shadow:inset 0 0 8px rgba(255,255,255,.72),0 0 10px rgba(255,239,195,.28);-webkit-text-stroke:1.25px rgba(255,252,239,.98);text-shadow:0 2px 3px rgba(0,0,0,.62),0 0 1px rgba(255,255,255,.8)}
.kp-world{background-size:auto 100%;background-repeat:repeat-x}
.repair-form select{flex:1;min-width:0;padding:11px;border:1px solid rgba(53,214,208,.4);border-radius:10px;background:#061419;color:#fff}

/* Elegant adaptive label: content-sized, centered and never clipped. */
.kp-word{left:50%;right:auto;top:50%;width:max-content;max-width:none;height:auto;min-height:30%;padding:4px 13px;transform:translate(-50%,-50%);white-space:nowrap;overflow:visible;border-radius:999px;background:radial-gradient(ellipse at center,rgba(255,250,231,.7) 0%,rgba(255,248,225,.52) 58%,rgba(255,248,225,.18) 76%,rgba(255,248,225,0) 100%);box-shadow:0 0 8px rgba(255,241,201,.16);color:#10242a;font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:900;line-height:1.08;-webkit-text-stroke:1px rgba(255,252,240,.96);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 1px rgba(255,255,255,.75)}

/* Version 02: only the vacuum artwork turns; the scene and labels stay unchanged. */
.kp-vacuum img{transform:scaleX(1);transition:transform .24s ease}
.kp-vacuum.face-right img{transform:scaleX(-1)}
.kp-controls select{margin-left:5px;padding:4px 7px;border:1px solid rgba(53,214,208,.4);border-radius:8px;background:#061419;color:#fff}
@media(max-width:700px){.kp-controls .themeControl{width:auto}.kp-controls .speedControl{width:100%}}

/* Version 03: public set editor, styled as another ship compartment. */
.kp-editor-modal{position:absolute;inset:0;z-index:70;display:none;padding:18px;background:rgba(2,9,13,.88);backdrop-filter:blur(10px);touch-action:auto;user-select:text}
.kp-editor-modal.open{display:flex;align-items:center;justify-content:center}
.kp-editor-panel{width:min(1120px,100%);max-height:96vh;overflow:auto;padding:24px;border:1px solid rgba(53,214,208,.48);border-radius:24px;background:linear-gradient(160deg,#08252d,#06151c 62%,#0b2025);box-shadow:0 28px 90px #000b}
.editor-heading{position:sticky;z-index:3;top:-24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:-24px -24px 18px;padding:22px 24px 16px;border-bottom:1px solid rgba(53,214,208,.25);background:rgba(7,25,32,.96);backdrop-filter:blur(10px)}
.editor-heading small{color:#86dcd8;letter-spacing:.14em}.editor-heading h2{margin:3px 0 0;font-size:clamp(24px,3vw,34px);color:#fff4d5}.editor-status{margin:5px 0 0;color:#a9c9cb}
.editor-message{display:none;margin:12px 0;padding:12px 15px;border-radius:12px;background:rgba(118,217,135,.1);color:#9be7aa}.editor-message:not(:empty){display:block}.editor-message.error{background:rgba(239,116,102,.12);color:#ffaaa2}
.editor-group{margin:14px 0;padding:16px;border:1px solid rgba(53,214,208,.3);border-radius:18px;background:rgba(255,255,255,.035)}
.editor-group-head,.editor-item-main,.editor-actions{display:flex;align-items:end;gap:10px}.editor-group-head>span{align-self:center;min-width:82px;color:#ffd475;font-weight:800}.editor-group-head>label{flex:1}
.editor-group label{display:grid;gap:5px;color:#9cc7c9;font-size:12px}.editor-group input[type=text],.editor-group input:not([type]){width:100%;min-width:0;padding:10px 11px;border:1px solid rgba(53,214,208,.32);border-radius:9px;background:#061419;color:#fff;outline:none}.editor-group input:focus{border-color:#35d6d0;box-shadow:0 0 0 2px rgba(53,214,208,.12)}
.editor-items{display:grid;gap:9px;margin:13px 0}.editor-item{padding:12px;border:1px solid rgba(245,166,35,.2);border-radius:13px;background:rgba(4,17,22,.68)}.editor-item-main>label:first-child{flex:1}.editor-correct{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;white-space:nowrap;padding:9px 10px;border-radius:9px;background:rgba(245,166,35,.08);color:#ffe2a5!important}.editor-correct input{accent-color:#f5a623}
.editor-item-details{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:9px;margin-top:9px}.editor-actions{position:sticky;z-index:3;bottom:-24px;justify-content:flex-end;margin:20px -24px -24px;padding:15px 24px 22px;border-top:1px solid rgba(53,214,208,.25);background:rgba(7,25,32,.96);backdrop-filter:blur(10px)}
@media(max-width:760px){.kp-editor-modal{padding:5px}.kp-editor-panel{max-height:99vh;padding:15px;border-radius:16px}.editor-heading{top:-15px;margin:-15px -15px 12px;padding:14px 15px 12px;flex-direction:column}.editor-group{padding:11px}.editor-group-head,.editor-item-main{align-items:stretch;flex-direction:column}.editor-group-head>span{align-self:flex-start}.editor-item-details{grid-template-columns:1fr}.editor-actions{bottom:-15px;margin:15px -15px -15px;padding:12px 15px 15px;flex-wrap:wrap}.editor-actions .kp-btn{flex:1;min-width:135px}}

/* Version 03: compact, touch-friendly training selection. */
.kp-training{position:relative}
.trainingBtn{display:flex;align-items:center;gap:7px;white-space:nowrap}
.trainingBtn span{max-width:150px;overflow:hidden;color:#ffe0a0;font-weight:800;text-overflow:ellipsis}
.trainingMenu{position:absolute;z-index:80;bottom:calc(100% + 9px);left:50%;display:none;width:max-content;min-width:220px;max-width:min(330px,calc(100vw - 20px));max-height:min(430px,70vh);overflow:auto;padding:10px;border:1px solid rgba(53,214,208,.48);border-radius:15px;background:linear-gradient(155deg,rgba(8,37,45,.98),rgba(5,20,27,.98));box-shadow:0 18px 50px #000a;transform:translateX(-50%);touch-action:auto}
.kp-training.open .trainingMenu{display:grid;gap:4px}
.training-title{padding:4px 8px 7px;color:#fff4d5;font-size:13px;font-weight:900}
.kp-controls .trainingMenu label{display:flex;width:auto;min-height:42px;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:transparent;color:#d9eeee;font-size:14px;cursor:pointer}
.kp-controls .trainingMenu label:hover{background:rgba(53,214,208,.1)}
.kp-controls .trainingMenu input{width:19px;height:19px;margin:0;accent-color:var(--amber)}
.applyTraining{width:100%;margin-top:6px;min-height:42px}
@media(max-width:700px){.kp-training{position:static}.trainingMenu{position:fixed;right:10px;bottom:58px;left:10px;width:auto;max-width:none;transform:none}.trainingBtn span{max-width:105px}}
@media(min-width:1200px){.kp-controls{flex-wrap:nowrap}}