/* Background, blobs, particles, transparent surfaces */
#gradient-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  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%);
}
.blob{
  position:absolute;
  width:78%;
  aspect-ratio:1/1;
  border-radius:50%;
  opacity:.42;
  pointer-events:none;
  mix-blend-mode:screen;
}
.blob-a{
  left:-18%;
  top:-42%;
  background:radial-gradient(circle, rgba(70,130,255,.82) 0%, rgba(70,130,255,.18) 45%, rgba(70,130,255,0) 70%);
  animation:blobA 22s ease-in-out infinite;
}
.blob-b{
  right:-20%;
  bottom:-55%;
  background:radial-gradient(circle, rgba(255,142,85,.85) 0%, rgba(255,142,85,.20) 48%, rgba(255,142,85,0) 72%);
  animation:blobB 26s ease-in-out infinite;
}
.blob-c{
  left:22%;
  top:8%;
  width:90%;
  background:radial-gradient(circle, rgba(128,92,180,.45) 0%, rgba(128,92,180,.16) 50%, rgba(128,92,180,0) 75%);
  animation:blobC 34s ease-in-out infinite;
}
@keyframes blobA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5%,8%,0) scale(1.08)}
}
@keyframes blobB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6%,-7%,0) scale(1.05)}
}
@keyframes blobC{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) scale(1.03)}
}
#particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.85;
}

/* keep all actual game layers above background */
#header,#scene,#hud,#overlay,#dbg-panel{
  position:relative;
  z-index:2;
}

/* transparent surfaces so the gradient is visible inside the game */
#app,
#header,
#scene,
#hud{
  background:transparent !important;
}

/* more graphic / white interface over gradient */
#header{
  border-bottom:1px solid rgba(255,255,255,.55) !important;
}
#app{
  border-color:rgba(255,255,255,.6) !important;
}
#hud{
  border-left-color:rgba(255,255,255,.45) !important;
}
#lvl-badge,#stars-badge,#lvl-nav-label{
  color:rgba(255,255,255,.95) !important;
}
#pips .pip{
  background:rgba(255,255,255,.32);
}
#pips .pip.vis,
#pips .pip.placed{
  background:rgba(255,255,255,.85);
}
.tc{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.18) !important;
  border-radius:10px !important;
}
.tc.used{display:none!important}
.gbtn{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.75) !important;
  color:rgba(70,55,85,.82) !important;
}
#btn-play{
  background:rgba(255,255,255,.96) !important;
  color:rgba(70,55,85,.9) !important;
}
#btn-peek.active{
  background:rgba(255,255,255,.98) !important;
  color:rgba(70,55,85,.95) !important;
}
/* DEAD-4 FIX: usunięto martwe style #tl-spacebar, #tl-fill, #tl-icon (TIMELINE removed) */


/* === NEW INTERFACE LAYOUT: top-left actions, right tiles only, bottom x-ray === */
#header{
  justify-content:space-between !important;
  padding:0 12px !important;
}
#top-actions{position:absolute;left:14px;top:54px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:15;pointer-events:auto}
/* Reset — mały, dyskretny */
#btn-reset-top{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);
  border-radius:999px;
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:all .2s;
}
#btn-reset-top:hover{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);}
#btn-reset-top:active{transform:scale(.93);}

/* Play — główna akcja, wyraźny */
#btn-play-top{
  width:52px;height:52px;
  border:none;
  background:rgba(255,255,255,.95);
  color:#1a1630;
  border-radius:999px;
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,255,255,.4);
  transition:all .2s;
  animation:playPulse 2.5s ease-in-out infinite;
}
#btn-play-top:hover{background:rgba(255,255,255,1);box-shadow:0 0 24px rgba(255,255,255,.5);}
#btn-play-top:active{transform:scale(.93);animation:none;}
@keyframes playPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
}
.top-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;}
.top-icon:active{transform:scale(.95)}
#meta{margin-left:auto}
#dbg-btn{font-size:18px!important;font-weight:800}
#hud{padding-top:8px!important}
#tray{flex:1 1 auto;padding:8px!important}
#app{grid-template-rows:44px 1fr!important}
#scene{grid-row:2!important;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
#hud{grid-row:2!important}
#xray-semi{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:calc(var(--xray-size,72px) * 2.25);height:var(--xray-size,72px);
  border-radius:var(--xray-size,72px) var(--xray-size,72px) 0 0;
  border:1px solid rgba(255,255,255,.42);border-bottom:none;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.34), rgba(255,255,255,.12) 48%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  color:rgba(255,255,255,.92);font-family:'Syne',sans-serif;font-weight:800;
  font-size:calc(var(--xray-size,72px) * .18);letter-spacing:2px;z-index:6;
  display:flex;align-items:center;justify-content:center;
  padding-top:calc(var(--xray-size,72px) * .16);cursor:pointer;
  box-shadow:0 -8px 28px rgba(255,255,255,.08);
  text-transform:uppercase;pointer-events:auto;
}
#xray-semi:active{transform:translateX(-50%) scale(.97)}
#xray-semi.active{
  background:
    radial-gradient(circle at 50% 100%, rgba(136,204,255,.42), rgba(136,204,255,.18) 50%, rgba(136,204,255,.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border-color:rgba(136,204,255,.75);
}
#dbg-panel{top:44px!important;right:0!important;max-height:calc(100% - 52px);overflow:auto}
#dbg-btn{
  background:rgba(255,255,255,.92) !important;
  color:rgba(70,55,85,.85) !important;
  border-color:rgba(255,255,255,.75) !important;
}


/* PEEK OVERLAY — przykrywa cały #app podczas rentgena */
#peek-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  background:rgba(2,6,22,0.82);
}
#peek-overlay.active{display:block}
/* Scanlines */
#peek-overlay::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0,20,60,0.06) 3px,
    rgba(0,20,60,0.06) 4px
  );
}
/* Winietowa ramka */
#peek-overlay::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,10,40,0.6) 100%);
}

.tc.action-tile{
  background:rgba(92,170,255,.16)!important;
  border-color:rgba(92,170,255,.65)!important;
  box-shadow:0 0 16px rgba(92,170,255,.12);
}
.tc.action-tile canvas{
  filter:drop-shadow(0 0 5px rgba(92,170,255,.55));
}
#mechanic-info{
  display:none;
  position:absolute;
  inset:0;
  z-index:30;
  background:rgba(4,8,22,.92);
  align-items:center;
  justify-content:center;
  padding:28px;
}
#mechanic-info.show{display:flex}
#mechanic-card{
  width:min(520px,88%);
  border:1px solid rgba(92,170,255,.45);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(92,170,255,.10));
  padding:24px 28px;
  color:white;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
#mechanic-card h2{
  font-size:22px;
  letter-spacing:3px;
  margin-bottom:12px;
}
#mechanic-card p{
  font-family:'DM Mono',monospace;
  font-size:12px;
  line-height:1.6;
  color:rgba(255,255,255,.75);
  margin-bottom:18px;
}
#mechanic-card b{color:#5caaff}
#mechanic-ok{
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.92);
  color:#16223a;
  border-radius:999px;
  padding:10px 18px;
  font-family:'Syne',sans-serif;
  font-weight:800;
  letter-spacing:2px;
  cursor:pointer;
}


/* TILE TRAY — symbols instead of rectangle cards */
#hud{
  background:rgba(255,255,255,.025)!important;
}
#tray{
  gap:4px!important;
  padding:10px 10px 8px!important;
}
.tc{
  height:58px!important;
  border-color:transparent!important;
  background:transparent!important;
  border-radius:18px!important;
  padding:4px 2px!important;
  opacity:.92;
}
.tc canvas{
  width:108px!important;
  height:52px!important;
}
.tc:hover,
.tc.sel{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.tc:active{
  transform:scale(.97);
}
.tc.used{display:none!important}
.tc.action-tile{
  background:rgba(92,170,255,.08)!important;
  border-color:rgba(92,170,255,.24)!important;
  box-shadow:0 0 20px rgba(92,170,255,.10);
}
.tc.action-tile canvas{
  filter:drop-shadow(0 0 7px rgba(92,170,255,.55));
}


#game-toast{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:40;
  pointer-events:none;
  opacity:0;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(8,10,24,.76);
  color:rgba(255,255,255,.96);
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:2px;
  backdrop-filter:blur(8px);
  box-shadow:0 18px 60px rgba(0,0,0,.38);
  transition:opacity .18s ease, transform .18s ease;
  text-align:center;
  white-space:nowrap;
}
#game-toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
#game-toast.warn{
  border-color:rgba(255,208,80,.7);
  color:#ffd060;
}
#center-counter.flash{
  animation:counterFlash .42s ease-in-out 2;
}
@keyframes counterFlash{
  0%,100%{filter:none}
  50%{filter:drop-shadow(0 0 12px rgba(255,208,80,.9)); transform:scale(1.04)}
}

/* ── ONBOARDING ── */
#onboarding{
  position:absolute;inset:0;z-index:50;display:flex;
  align-items:center;justify-content:center;
  background:rgba(6,6,14,.88);backdrop-filter:blur(6px);
}
#onboarding.hidden{display:none}
#onboarding-card{
  width:min(400px,88%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(80,60,120,.12));
  padding:24px 28px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
#onboarding-title{
  font-size:28px;font-weight:800;letter-spacing:7px;color:rgba(255,255,255,.95);
  margin-bottom:18px;text-align:center;
}
.ob-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ob-step{
  display:flex;align-items:center;gap:12px;
  font-family:'DM Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.72);letter-spacing:.5px;line-height:1.5;
}
.ob-icon{
  font-size:18px;width:24px;text-align:center;flex-shrink:0;
  color:rgba(255,255,255,.85);
}
#ob-btn{
  width:100%;padding:12px;border-radius:8px;
  border:1px solid rgba(127,255,154,.45);
  background:rgba(127,255,154,.14);
  color:#7fff9a;font-family:'Syne',sans-serif;font-weight:800;
  font-size:14px;letter-spacing:3px;cursor:pointer;
  transition:background .2s;
}
#ob-btn:hover{background:rgba(127,255,154,.22)}
#ob-btn:active{transform:scale(.97)}

/* ── LOCKED SLOT indicator on orbit ── */
.slot-locked-glow{pointer-events:none;}

/* ── HIT TILE INDICATOR in tray ── */
.tc.hit-slot{
  box-shadow:0 0 0 1.5px rgba(255,80,64,.65) inset !important;
  background:rgba(255,80,64,.08) !important;
}

/* ── LEVEL NAV — center of header ── */
#lvl-nav{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  height:44px;display:flex;align-items:center;gap:6px;z-index:4;
}
#lvl-nav-label{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:2px;
  color:rgba(255,255,255,.85);min-width:52px;text-align:center;font-weight:500;
}
.lvl-arrow{
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;padding:0;line-height:1;
}
.lvl-arrow:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5);}
.lvl-arrow:active{transform:scale(.9);}