/* Overlays: level-complete, world-select, onboarding, mechanic-info */
/* OVERLAY — level complete */
#overlay{
  position:absolute;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:10px;
  background:#101010;
}
#overlay.show{display:flex;animation:ovIn .28s ease forwards;}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
#ov-stars-row{display:flex;gap:8px;margin-bottom:4px}
.ov-star{
  font-size:28px;opacity:0;transform:scale(.4);
  transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ov-star.earned{opacity:1;transform:scale(1);color:#F2B705;}
.ov-star.empty{opacity:.16;transform:scale(1);color:#F3EAD8;}
#ov-ttl{font-size:32px;font-weight:800;letter-spacing:5px;color:#F3EAD8}
#ov-ttl.win{color:#F3EAD8}
#ov-ttl.lose{color:var(--red)}
#ov-sub{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;color:rgba(232,228,216,.35);}
#ov-progress-wrap{
  width:min(280px,80%);margin-top:4px;
}
#ov-progress-label{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;
  color:rgba(255,255,255,.38);margin-bottom:5px;text-align:center;
}
#ov-progress-bar{
  width:100%;height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
#ov-progress-fill{
  height:100%;width:0%;border-radius:3px;
  background:var(--world-accent,var(--green));
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
#ov-progress-nums{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.28);text-align:right;margin-top:2px;
}

/* Dwa warunki awansu — gwiazdki i pełne poziomy */
.ov-cond-row{margin-bottom:7px;}
.ov-cond-lbl{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;
  color:rgba(255,255,255,.42);margin-bottom:3px;
}
.ov-cond-hint{font-size:7px;opacity:.52;letter-spacing:1px;}
#ov-quality-bar{
  width:100%;height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
#ov-quality-fill{
  height:100%;width:0%;border-radius:3px;
  background:var(--world-accent,#2567B8);
  transition:width .8s .1s cubic-bezier(.22,1,.36,1);
  opacity:.7;
}
#ov-quality-nums{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.28);text-align:right;margin-top:2px;
}
#ov-quality-hint{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;
  color:rgba(255,255,255,.42);text-align:right;margin-top:3px;
  font-style:italic;
}
#ov-quality-hint.hidden{display:none}
#ov-locked-msg{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(239,62,46,.90);text-align:center;
  padding:7px 14px;border:1px solid rgba(239,62,46,.40);
  max-width:min(300px,85%);
  animation:ovIn .2s ease forwards;
}
#ov-locked-msg.hidden{display:none}
.ws-world-desc{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;
  color:rgba(255,255,255,.35);text-align:center;margin-top:1px;
  font-style:italic;
}
.ws-dot-legend{
  font-family:'DM Mono',monospace;font-size:7px;letter-spacing:1px;
  color:rgba(255,255,255,.28);text-align:center;margin-top:2px;
}

/* World select — orbit layout */
#ws-orbit-svg{
  width:min(420px,86vw);height:min(420px,86vw);
  flex-shrink:0;overflow:visible;
}
.ws-node-group{ cursor:pointer; }
.ws-node-group.locked{ cursor:default; }
.ws-node-circle{
  fill:var(--ws-node-bg,rgba(255,255,255,.06));
  stroke:rgba(255,255,255,.20);
  stroke-width:1.5;
  transition:fill .2s, stroke .2s;
}
.ws-node-group.active .ws-node-circle{
  stroke:var(--ws-node-accent);
  stroke-width:2.5;
  fill:rgba(255,255,255,.10);
}
.ws-node-group.done .ws-node-circle{
  fill:rgba(255,255,255,.08);
}
.ws-node-group.locked .ws-node-circle{
  fill:rgba(255,255,255,.02);
  stroke:rgba(255,255,255,.10);
}
.ws-node-num{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;
  fill:rgba(255,255,255,.42);
  text-anchor:middle;dominant-baseline:auto;
}
.ws-node-name{
  font-family:'Syne',sans-serif;font-weight:800;font-size:12px;letter-spacing:2px;
  fill:rgba(255,255,255,.90);
  text-anchor:middle;dominant-baseline:auto;
}
.ws-node-group.locked .ws-node-name{ fill:rgba(255,255,255,.30); }
.ws-node-completion{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0px;
  fill:rgba(255,255,255,.42);
  text-anchor:middle;dominant-baseline:auto;
}
.ws-node-lock{
  font-size:13px;fill:rgba(255,255,255,.28);
  text-anchor:middle;dominant-baseline:auto;
}
/* Progress arc per node */
.ws-arc-track{ fill:none;stroke:rgba(255,255,255,.08);stroke-width:3; }
.ws-arc-fill{ fill:none;stroke-width:3;stroke-linecap:round; }
/* Orbit ring */
.ws-orbit-ring{ fill:none;stroke:rgba(255,255,255,.08);stroke-width:1; }
.ws-orbit-path{ fill:none;stroke:rgba(255,255,255,.04);stroke-width:1.5;stroke-dasharray:4 8; }
/* Center label */
#ws-center-label{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  z-index:1;
}
#ws-worlds{
  position:absolute;
  bottom:16px;left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.32);
  pointer-events:none;
}
/* Daily node — poza główną orbitą */
.ws-daily-node .ws-node-circle{
  stroke:rgba(255,208,80,.40);
  fill:rgba(255,208,80,.06);
}
.ws-daily-node.done .ws-node-circle{
  stroke:rgba(127,200,127,.50);
  fill:rgba(127,200,127,.06);
}

/* World select — kropki poziomów */
.ws-lvl-dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:5px 0 3px;}
.ws-lvl-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  transition:background .2s;
}
.ws-lvl-dot.partial{background:rgba(255,208,80,.40);border-color:rgba(255,208,80,.60);}
.ws-lvl-dot.quality{background:rgba(255,208,80,.92);border-color:rgba(255,208,80,1);}

/* World select — pasek ukończenia */
.ws-completion-wrap{width:100%;margin:3px 0 2px;}
.ws-completion-bar{
  width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.10);overflow:hidden;
}
.ws-completion-fill{
  height:100%;border-radius:2px;
  background:var(--world-accent,rgba(255,208,80,.8));
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.ws-completion-nums{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;
  color:rgba(255,255,255,.38);text-align:right;margin-top:2px;
}

/* World select — karta DZIENNA ORBITA */
.ws-daily{
  flex:0 0 100% !important;
  max-width:100% !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 14px !important;
  border-color:rgba(255,208,80,.35) !important;
  background:rgba(255,208,80,.04) !important;
}
.ws-daily-icon{font-size:16px;color:rgba(255,208,80,.85);flex-shrink:0;}
.ws-daily-name{
  font-family:'Syne',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:2px;color:rgba(255,255,255,.85);flex:1;
}
.ws-daily-date{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.40);
}
.ws-daily-status{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;
  color:rgba(255,208,80,.75);flex-shrink:0;
}
.ws-daily-status.done{color:rgba(127,200,127,.75);}
.ws-daily-streak{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;
  color:rgba(255,208,80,.55);
}

/* World select — header z gwiazdkami */
#ws-header{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:780px;margin-bottom:6px;
}
#ws-header-title{
  font-size:20px;font-weight:800;letter-spacing:6px;
  color:rgba(255,255,255,.9);
}
#ws-header-stars{
  font-family:'DM Mono',monospace;font-size:13px;
  color:rgba(255,208,80,.8);letter-spacing:1px;
}

/* World select — warunki odblokowania (per-warunek) */
.ws-unlock-cond{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;
  color:rgba(255,255,255,.32);margin-top:2px;
}
.ws-unlock-cond.ok{color:rgba(127,255,154,.70);}
.ws-quality-hint{
  font-family:'DM Mono',monospace;font-size:7px;letter-spacing:0px;
  color:rgba(255,255,255,.16);margin-top:2px;font-style:italic;
}
#ov-unlock-banner{
  padding:7px 18px;border-radius:4px;
  background:transparent;
  border:2px solid currentColor;
  font-family:'Syne',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:3px;
}
#ov-unlock-banner.hidden{display:none}
#ov-btns{display:flex;gap:8px;margin-top:4px}
#ov-btn-worlds{
  padding:10px 16px;border-radius:6px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);
  font-family:'Syne',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;
  cursor:pointer;transition:all .15s;
}
#ov-btn-worlds:hover{background:rgba(255,255,255,.12);color:#fff;}
#ov-btn{
  padding:10px 20px;border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.9);
  font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:3px;
  cursor:pointer;transition:all .15s;
}
#ov-btn:hover{background:rgba(255,255,255,.18);}

/* WORLD SELECT */
#world-select{
  position:absolute;inset:0;z-index:52;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#101010;
}
#world-select.show{display:flex}
#ws-title{
  font-size:22px;font-weight:800;letter-spacing:8px;
  color:rgba(255,255,255,.9);margin-bottom:4px;
}
#ws-worlds{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:480px;}
.ws-world{
  flex:0 0 calc(33% - 8px);min-width:100px;
  border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  padding:12px 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:all .2s;position:relative;overflow:hidden;
}
.ws-world:hover:not(.locked){
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);
  transform:translateY(-2px);
}
.ws-world:active:not(.locked){transform:scale(.97);}
.ws-world.locked{opacity:.45;cursor:default;}
.ws-world.active{border-color:var(--world-accent,var(--green));box-shadow:0 0 16px rgba(127,255,154,.12);}
.ws-world-num{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;
  color:rgba(255,255,255,.38);
}
.ws-world-name{
  font-size:11px;font-weight:800;letter-spacing:3px;color:rgba(255,255,255,.85);
}
.ws-world-stars{
  font-family:'DM Mono',monospace;font-size:10px;
  color:rgba(255,208,80,.8);letter-spacing:1px;
}
.ws-world-lock{font-size:16px;opacity:.5}
.ws-world-unlock{
  font-family:'DM Mono',monospace;font-size:8px;
  color:rgba(255,255,255,.28);letter-spacing:1px;text-align:center;
}
.ws-world-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--world-accent,rgba(127,255,154,.7));
  display:none;
  position:absolute;top:8px;right:8px;
}
.ws-world.active .ws-world-dot{display:block;}
#ws-total{
  display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;
}
#ws-total-label{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:3px;
  color:rgba(255,255,255,.25);
}
#ws-total-stars{
  font-family:'DM Mono',monospace;font-size:16px;
  color:rgba(255,208,80,.8);letter-spacing:2px;
}

/* Ukryj RENTGEN gdy overlay lub world-select jest aktywny */
#app:has(#overlay.show) #xray-semi,
#app:has(#world-select.show) #xray-semi,
#app:has(#onboarding:not(.hidden)) #xray-semi {
  visibility:hidden;
  pointer-events:none;
}

/* landscape: no small-screen overrides */


/* NEBULA */
#nebula{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.25}
#c{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:transparent}

/* DEBUG */
#dbg-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(232,228,216,.35);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
#dbg-btn.on{border-color:var(--yellow);color:var(--yellow)}
#dbg-panel{display:none;position:absolute;top:54px;right:0;width:min(260px,100%);background:rgba(6,6,14,.97);border:1px solid rgba(255,255,255,.1);border-radius:0 0 0 12px;z-index:10;padding:12px 14px 14px}
#dbg-panel.show{display:block}
.dbg-row{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.dbg-lbl{font-family:"DM Mono",monospace;font-size:9px;color:rgba(232,228,216,.4);letter-spacing:1px;width:80px;flex-shrink:0}
.dbg-slider{flex:1;accent-color:var(--green);cursor:pointer}
.dbg-val{font-family:"DM Mono",monospace;font-size:10px;color:var(--green);width:36px;text-align:right;flex-shrink:0}
#dbg-copy{width:100%;padding:7px;border-radius:4px;border:1px solid rgba(127,255,154,.3);background:rgba(127,255,154,.06);color:var(--green);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:2px;cursor:pointer;margin-top:4px}

#bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 40%, rgba(70,60,110,.28) 0%, transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(90,55,70,.22) 0%, transparent 50%),
    linear-gradient(135deg, #0c0f1e 0%, #14102a 55%, #1a0f18 100%);
}
#bgc{
  width:100%;
  height:100%;
  display:block;
  opacity:.6;
}
#app{z-index:1}

/* IN-APP GRADIENT STYLE — code-safe: gradients + canvas particles only */