:root{color-scheme:dark;--bg:#050d0b;--panel:#0e1c18;--mint:#83f6ae;--text:#eefbf1;--muted:#99b7a7;--line:rgba(145,228,173,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;min-height:100%;overscroll-behavior:none;background:var(--bg);overflow:hidden}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text)}
button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #b4f5c0;outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}
.app{position:relative;isolation:isolate;display:flex;flex-direction:column;width:min(100%,510px);height:100dvh;height:100svh;max-height:1024px;margin:auto;background:linear-gradient(180deg,#0b251a,#070e0d 26%);border-left:1px solid #1a3526;border-right:1px solid #1a3526;overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:59px;gap:9px;padding:9px 14px 7px;background:linear-gradient(90deg,#0e291b,#07130f);border-bottom:1px solid var(--line);direction:ltr;flex:none}
.brand{display:flex;align-items:center;gap:9px;direction:ltr}.brand-mark{font-size:25px;display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,#c3fa8c,#48b986);color:#072c14;text-shadow:0 0 5px #f1fba0;box-shadow:0 0 13px #78ed9340}.brand strong{display:block;font-weight:1000;font-size:16px;line-height:1.05;letter-spacing:.8px}.brand small{font-size:10px;color:#87d8a3;font-weight:800;letter-spacing:1.5px}.brand .version{color:#f4d266}.top-actions{display:flex;align-items:center;gap:8px}.level-chip{padding:8px 10px;font-size:11px;letter-spacing:.2px;white-space:nowrap;border-radius:10px;color:#c0dfc8;background:#142c1e;border:1px solid #3c6949;direction:rtl}.level-chip b{color:#d3ffb4;font-size:15px;padding-inline:3px}.sep{padding-inline:3px;color:#65826c}.icon-btn{width:36px;height:36px;border-radius:10px;background:#1d3728;color:#c8fad2;border:1px solid #487457;font-size:20px;display:grid;place-items:center}
.metrics{direction:rtl;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#1b3327;border-bottom:1px solid #314b3d;flex:none}.metric{background:#111f1a;min-width:0;text-align:center;padding:7px 2px 8px}.metric small{font-size:10px;color:#adc6b6;display:block;white-space:nowrap}.metric small span{font-size:8px;color:#709281}.metric b{display:block;font-weight:900;font-size:18px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:clip;direction:ltr}.metric:last-child b{color:#ff947c;font-size:15px;padding-top:3px}
.stage-shell{position:relative;flex:1;min-height:120px;background:#06110d;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none}.stage-shell canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.stage-shell::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 30px #0009}
.stage-marker{position:absolute;pointer-events:none;z-index:2;top:7px;left:9px;font-family:ui-monospace,monospace;letter-spacing:1.3px;color:#b8f3bacc;font-size:10px;direction:ltr;text-shadow:0 2px 2px #092116;opacity:.88}.stage-marker i{color:#6ac582;font-style:normal;margin:0 3px}.stage-marker span:last-child{color:#e1f9df}
.announcement{position:absolute;z-index:5;top:24px;left:50%;transform:translate(-50%,-16px);opacity:0;display:flex;align-items:center;gap:9px;direction:ltr;width:max-content;max-width:96%;padding:8px 12px;background:linear-gradient(110deg,#0f221def,#19362bee);border:1px solid var(--boost-color,#a5ffd0);box-shadow:0 0 20px #0009,0 0 18px color-mix(in srgb,var(--boost-color,#9ffbc8) 25%,transparent);border-radius:14px;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.announcement[hidden]{display:none}.announcement.visible{transform:translate(-50%,0);opacity:1}.announce-avatar{width:37px;height:37px;border-radius:50%;background:var(--boost-color,#80ef9e);font-size:21px;display:grid;place-items:center;color:#092018;flex:none}.announcement b{display:block;font-size:12px;color:#fff;letter-spacing:.45px;white-space:nowrap}.announcement small{display:block;font-size:10px;color:#bad1c5;margin-top:2px;white-space:nowrap}
.power-strip{position:absolute;top:80px;left:9px;display:flex;gap:5px;flex-wrap:wrap;max-width:92%;z-index:3;direction:ltr;pointer-events:none}.power-pill{font-size:10px;font-weight:800;display:flex;align-items:center;gap:5px;border-radius:30px;color:#f5fff6;padding:5px 9px;background:#102921e8;border:1px solid var(--boost-color,#618d73);box-shadow:0 2px 8px #0005;white-space:nowrap}
.stage-message{position:absolute;left:50%;bottom:27%;transform:translateX(-50%);padding:9px 13px;border-radius:9px;background:#0b261ed9;border:1px solid #a8edab;color:#eaffea;font-size:13px;white-space:nowrap;pointer-events:none;z-index:3}.stage-message[hidden]{display:none}
.bottom-area{flex:none;background:#0c1a15;padding:8px 14px max(9px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.progress-head{display:flex;align-items:center;justify-content:space-between;color:#a6c5b2;font-size:11px;gap:10px;margin-bottom:6px}.progress-head span:last-child{font-family:ui-monospace,monospace;color:#bdf4ad;font-weight:900;direction:ltr}.progress-track{height:6px;background:#264331;border-radius:20px;overflow:hidden}.progress-track div{width:0%;height:100%;background:linear-gradient(90deg,#34c87a,#a7f59d);transition:width .18s}.bottom-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:7px;font-size:10px;color:#668875;letter-spacing:1px;direction:ltr}.touch-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#89f0ac;box-shadow:0 0 9px #9afda5;margin-right:5px}.plain-btn{background:#1a3326;border:1px solid #315d3e;color:#beecca;border-radius:8px;padding:5px 10px;font-size:11px;letter-spacing:0}
.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 20%,#0b3e28e9,#05110def 65%,#010807f8);backdrop-filter:blur(6px);overflow:hidden}.screen[hidden]{display:none}.panel{width:min(100%,420px);max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#51775e #102a1c;direction:rtl;padding:7px}.hero-emblem{margin:auto auto 8px;display:grid;place-items:center;width:84px;height:84px;border-radius:25px;background:linear-gradient(135deg,#a3ffb9,#4a9ec7);color:#0c3822;font-size:46px;box-shadow:0 0 40px #7ae9a740;border:1px solid #b8ffe780;transform:rotate(-4deg)}.eyebrow{text-align:center;color:#80e6a8;font-weight:900;font-size:10px;letter-spacing:2.5px;direction:ltr;margin:9px 0}.hero-title{text-align:center;font-size:clamp(26px,8vw,37px);line-height:1.07;letter-spacing:1px;margin:6px 0;color:#f4fff6;font-weight:1000;direction:ltr;text-shadow:0 3px 16px #64ddaf25}.hero-title span{display:block;color:#a0f6ad}.hero-desc{text-align:center;color:#b1c9bd;font-size:13px;line-height:1.85;margin:12px 6px 17px}.menu-stat{display:flex;justify-content:center;gap:8px;margin:14px 0 18px;flex-wrap:wrap}.menu-stat span{font-size:11px;color:#c3eed0;background:#163326;border:1px solid #406a50;padding:7px 11px;border-radius:99px}.btn{width:100%;border-radius:14px;padding:13px 16px;font-weight:900;font-size:15px;margin-bottom:9px;display:flex;justify-content:center;align-items:center;gap:9px}.btn.primary{background:linear-gradient(120deg,#b4f6a0,#63e6ac);color:#0b3120;box-shadow:0 5px 21px #6ef3a832}.btn.secondary{color:#dbffe6;background:#18362a;border:1px solid #44785a}.btn.tertiary{color:#a3cab2;background:transparent;border:1px solid #2e5b40;font-size:13px}.menu-foot{font-size:10px;color:#81a18e;text-align:center;margin:12px 0 2px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0 16px}.panel-heading h2{font-size:19px;margin:0;color:#f1fff2}.back-btn{font-size:12px;background:#19382a;border:1px solid #3a6c4b;border-radius:10px;padding:8px 12px;color:#d2efda}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;direction:ltr}.level-btn{aspect-ratio:1;border-radius:12px;background:#183829;border:1px solid #477756;color:#ddf5db;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:3px;font-weight:900;font-size:17px}.level-btn small{font-size:10px;color:#f1d76f}.level-btn.locked{background:#15241d;border-color:#293f32;color:#668675}.level-btn.current{background:linear-gradient(130deg,#9beca2,#53c6ad);color:#083323}.grid-legend{color:#8eb49b;text-align:center;margin:15px 0 8px;font-size:11px}.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.skill-card{border:1px solid color-mix(in srgb,var(--skill-color,#aaf5b0) 43%,#264332);border-radius:13px;background:linear-gradient(145deg,#1a3129,#0b1d17);padding:9px 8px;min-height:112px;text-align:center;color:#e2f8e4}.skill-art{font-size:25px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--skill-color,#91dca1);color:#12241c;margin:0 auto 6px;box-shadow:0 0 13px color-mix(in srgb,var(--skill-color,#c0ffc8) 30%,transparent)}.skill-card b{font-size:12px;display:block}.skill-card span{color:#abc8b5;font-size:10px;display:block;margin-top:4px;line-height:1.4}.skill-card small{font-size:10px;color:#91e7ae;display:block;margin-top:5px}.info-block{border:1px solid #355d43;border-radius:12px;background:#132a20;padding:11px 12px;margin-bottom:9px;color:#c9e1d0;font-size:12px;line-height:1.9}.info-block b{color:#e3ffdc}.switch-row{display:flex;justify-content:space-between;align-items:center;background:#122a1f;border:1px solid #365a44;border-radius:12px;padding:12px 13px;margin-bottom:9px;font-size:13px}.switch-row button{border:1px solid #478463;background:#215138;color:#c8f7d1;border-radius:9px;padding:7px 13px;min-width:72px}.switch-row button.off{background:#343b3a;border-color:#5b5b5b;color:#c5c5c5}.finish-icon{text-align:center;font-size:55px;line-height:1.2;margin:3px 0 9px}.finish-title{text-align:center;font-size:26px;font-weight:900;margin:0 0 7px}.finish-sub{text-align:center;color:#a8c5b2;font-size:13px;line-height:1.7;margin:7px 0 15px}.stars{text-align:center;color:#ffdf69;letter-spacing:5px;font-size:28px;margin:8px 0}.finish-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.finish-stats div{text-align:center;background:#153022;border:1px solid #3d6248;border-radius:13px;padding:11px}.finish-stats span{display:block;color:#96bba2;font-size:11px}.finish-stats b{display:block;margin-top:4px;font-size:19px}.muted{color:#8fb09c;font-size:11px;text-align:center;margin-top:8px}.sample-btn{font-size:12px;border-radius:9px;border:1px solid #4a8062;background:#204933;color:#e0f5e3;padding:7px 10px;margin-top:7px;width:100%}
@media(max-height:720px){.topbar{min-height:48px;padding-block:5px}.brand-mark{height:29px;width:29px;font-size:18px;border-radius:9px}.brand strong{font-size:13px}.brand small{font-size:8px}.metric{padding-block:4px}.metric b{font-size:16px}.bottom-area{padding-top:6px;padding-bottom:6px}.hero-emblem{width:65px;height:65px;font-size:34px}.hero-desc{margin-block:8px}.menu-stat{margin-block:8px}.btn{padding-block:10px}}
@media(max-width:340px){.brand strong{font-size:13px}.brand .version{display:none}.topbar{padding-inline:7px}.level-chip{padding-inline:6px}.metric small{font-size:9px}.metric b{font-size:15px}.skills-grid{gap:6px}}

/* Subtle creator signature in the outside corner, never over gameplay. */
.creator-watermark{font-family:ui-sans-serif,-apple-system,system-ui,sans-serif;font-size:12px;font-weight:850;letter-spacing:1.15px;color:#d9ffe0;opacity:.47;direction:ltr;pointer-events:none;user-select:none;white-space:nowrap}
.bottom-row .plain-btn{margin-inline:auto}
@media(max-width:355px){.creator-watermark{font-size:10px;letter-spacing:.3px}.bottom-row{font-size:9px}}

.skill-art{overflow:hidden;padding:0}.skill-art img,.announce-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.announce-avatar{overflow:hidden;padding:0}.announce-avatar img{border:1px solid #ffffff5e}