*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

    /*
      FULLSCREEN WALLPAPER FIX (Android/Chrome + PWA):
      - wallpaper is painted by a fixed pseudo-element (never "shrinks" with 100vh quirks)
      - html has a non-transparent background so nothing can fall back to black
    */
    html{
      width:100vw;
      height:100vh;
      min-height:100svh;
      min-height:100dvh;
      overflow:hidden;
      font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
      background-color:#080015;
    }
    body{
      margin:0;
      width:100vw;
      height:100vh;
      min-height:100svh;
      min-height:100dvh;
      overflow:hidden;
      position:relative;
      background:#080015;
      isolation:isolate;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background-color:#080015;
      background-image:url('../img/palmasvg.svg');
      background-repeat:no-repeat;
      background-position:center;
      /* wypełnij ekran bez pasów */
      background-size:100% 100%;
    }
    /* Telefony w pionie: osobna tapeta */
    @media (max-width: 900px) and (orientation: portrait){
      body::before{ background-image:url('../img/palmasvgtele3.svg'); }
    }
    @media (orientation: landscape){
      body::before{ background-image:url('../img/palmasvgpoziom.svg'); }
    }
    /* Telefony w poziomie: osobna tapeta */
    @media (max-width: 900px) and (orientation: landscape){
      body::before{ background-image:url('../img/palmasvgtele1.svg'); }
    }

    :root{
      --bg1:#05050c;
      --bg2:#130a2a;
      --holeCenter:44px;
      --hitY:78px;
      --blinkDur: 1.2s;
      --blinkBgOpacity: .55;
      --blinkLowOpacity: .25;
      /* Wysokość dolnych przycisków (menu + Gotowe) w Kolorowankach.
         Brak tej zmiennej powoduje, że ikony SVG (800x800) „rozpychają” przyciski
         i zasłaniają całe okno (niebieski/pomarańczowy ekran z wielkimi strzałkami). */
      --bottomActionH: 40px;
    }

    /* ========== NAME SELECTION SCREEN ========== */
    .nameSelectScreen{
      position: fixed;
      inset: 0;
      background:
        radial-gradient(1000px 600px at 50% 30%, rgba(180,100,255,.25), transparent 60%),
        radial-gradient(800px 500px at 30% 70%, rgba(255,100,150,.15), transparent 60%),
        radial-gradient(800px 500px at 70% 70%, rgba(100,200,255,.15), transparent 60%),
        linear-gradient(180deg, #08060f, #150a25);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 3000;
      color: #fff;
      padding: 20px;
      overflow: visible;
      transition: opacity .5s ease, transform .5s ease;
    }
    .nameSelectScreen.hidden{
      opacity: 0;
      pointer-events: none;
      transform: scale(1.1);
    }

    /* Subtelna "ziarnistość" – usuwa artefakty/pasy na niektórych telefonach */
    .nameSelectScreen::after{
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, rgba(0,0,0,0) 1.6px);
      background-size: 4px 4px;
      opacity: .03;
      mix-blend-mode: overlay;
    }

    /* Mobile: backdrop-filter potrafi robić poziome artefakty – wyłączamy na kartach */
    @media(max-width:600px){
      .nameCard{
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255,255,255,.07);
      }
    }
    .nameSelectTitle{
      font-size: clamp(28px, 8vw, 48px);
      font-weight: 800;
      margin-bottom: 10px;
      /* Podnieś napis "Cześć!" wyżej, żeby nie nachodził na Bożkę */
      transform: translateY(clamp(-250px, -22vh, -160px));
      background: linear-gradient(135deg, #fff 20%, rgba(200,150,255,.9));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
    }
    .nameSelectSubtitle{
      font-size: 16px;
      opacity: .7;
      margin-bottom: 40px;
      transform: translateY(clamp(-250px, -22vh, -160px));
      text-align: center;
    }
    .nameCards{
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .nameCard{
      width: 160px;
      height: 200px;
      border-radius: 24px;
      border: 2px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
      cursor: pointer;
      transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 20px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .nameCard:hover{
      transform: translate3d(0, -8px, 0) scale(1.05);
      border-color: rgba(255,255,255,.4);
      box-shadow: 0 20px 50px rgba(0,0,0,.4);
    }
    .nameCard.leon{
      background: linear-gradient(135deg, rgba(100,150,255,.2), rgba(50,100,200,.1));
    }
    .nameCard.leon:hover{
      background: linear-gradient(135deg, rgba(100,150,255,.35), rgba(50,100,200,.2));
      box-shadow: 0 20px 50px rgba(100,150,255,.3);
    }
    .nameCard.marcelina{
      background: linear-gradient(135deg, rgba(255,100,180,.2), rgba(200,50,150,.1));
    }
    .nameCard.marcelina:hover{
      background: linear-gradient(135deg, rgba(255,100,180,.35), rgba(200,50,150,.2));
      box-shadow: 0 20px 50px rgba(255,100,180,.3);
    }
    .nameCard.filip{
      background: linear-gradient(135deg, rgba(120,255,180,.18), rgba(30,160,120,.10));
    }
    .nameCard.filip:hover{
      background: linear-gradient(135deg, rgba(120,255,180,.30), rgba(30,160,120,.18));
      box-shadow: 0 20px 50px rgba(120,255,180,.22);
    }
    .nameCard.blanka{
      background: linear-gradient(135deg, rgba(255,230,120,.20), rgba(255,150,120,.10));
    }
    .nameCard.blanka:hover{
      background: linear-gradient(135deg, rgba(255,230,120,.34), rgba(255,150,120,.18));
      box-shadow: 0 20px 50px rgba(255,230,120,.22);
    }
    .nameCardEmoji{
      font-size: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .nameCardEmoji img{
      width: 64px;
      height: 64px;
      display: block;
      border-radius: 999px;
      box-shadow: 0 8px 20px rgba(0,0,0,.22);
    }
    .nameCardName{ font-size: 22px; font-weight: 700; }

    /* ========== TOP BAR (Tabs + Profile) ========== */
    .topBar{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      z-index: 2500;
      pointer-events: auto;
    }

    .playerBadge{
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(12px);
      border-radius: 999px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.15);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: all .2s ease;
      flex-shrink: 0;
      position: absolute;
      left: 10px;
      top: calc(max(8px, env(safe-area-inset-top, 0px)) + 8px);
      z-index: 2600;
    }
    .playerBadge:hover{ background: rgba(255,255,255,.15); }
    .playerBadge .emoji{
      font-size: 20px;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .playerBadge .emoji img{
      width: 22px;
      height: 22px;
      display: block;
      border-radius: 999px;
    }
    .playerBadge .name{ font-weight: 600; }

    .menuAudioControls{
      position: absolute;
      right: 10px;
      top: calc(max(8px, env(safe-area-inset-top, 0px)) + 8px);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      z-index: 2600;
    }

    .menuAudioToggle,
    .menuAudioNext{
      appearance:none;
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 999px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.15);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: all .2s ease;
      flex-shrink: 0;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
    .menuAudioToggle:hover,
    .menuAudioNext:hover{ background: rgba(255,255,255,.15); }
    .menuAudioToggle:active,
    .menuAudioNext:active{ transform: scale(.97); }
    .menuAudioToggle:focus-visible,
    .menuAudioNext:focus-visible{ outline: 3px solid rgba(255,255,255,.35); outline-offset: 3px; }
    .menuAudioToggle .menuAudioIcon,
    .menuAudioNext .menuAudioIcon{
      font-size: 20px;
      line-height: 1;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .menuAudioToggle .menuAudioLabel{ white-space: nowrap; }
    .menuAudioToggle.isMuted{
      background: rgba(75,20,40,.62);
      border-color: rgba(255,160,190,.28);
    }
    .menuAudioNext{
      padding: 8px 11px;
      min-width: 44px;
      justify-content: center;
    }
    body.inGame .menuAudioControls,
    body.inGame .menuAudioToggle,
    body.inGame .menuAudioNext{ display:none !important; }

    /* Gdy badge jest przypięty do narożnika okna gry (Puzzle) */
    .playerBadge.inPuzzleCorner{
      position: absolute;
      left: 0;
      top: 0;
      margin: 0;
      border-top-left-radius: 26px;
      border-radius: 26px 999px 999px 999px;
      padding: 10px 16px;
      background: rgba(0,0,0,.52);
      border: 1px solid rgba(255,255,255,.18);
      z-index: 50;
    }

    /* Mobile: obniż badge z imieniem (żeby nie wchodził w pasek statusu) */
    @media (max-width: 540px){
      .playerBadge{
        top: calc(env(safe-area-inset-top, 0px) + 44px);
        left: 12px;
        padding: 7px 12px;
      }
      .menuAudioControls{
        top: calc(env(safe-area-inset-top, 0px) + 44px);
        right: 12px;
        gap: 6px;
      }
      .menuAudioToggle{ padding: 7px 12px; }
      .menuAudioNext{ padding: 7px 10px; }
      body.inGame .playerBadge{
        top: calc(env(safe-area-inset-top, 0px) + 44px);
      }
    }
    @media (max-width: 420px){
      .menuAudioToggle .menuAudioLabel{ display:none; }
      .menuAudioToggle,
      .menuAudioNext{ padding: 8px 11px; }
    }


/* Kolorowanki: dropdown wyboru po prawej w topbarze */
.coloringTopControl{
  position: absolute;
  right: 10px;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 8px);
  z-index: 2600;
  display: flex;
  align-items: center;
}
@media (max-width: 540px){
  .coloringTopControl{
    top: calc(env(safe-area-inset-top, 0px) + 44px);
    right: 12px;
  }
}
.coloringTopControl select{
  height: 44px;
  padding: 0 56px 0 16px;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  min-width: 170px;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 18px rgba(150,90,255,.16);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../img/ui/down.svg');
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.coloringTopControl select option{
  background: #1a0a3e;
  color: #fff;
}


    .tabBar{
      /* Panel wyboru gier jest osobną stroną – znacznik "Gry" w topbarze nie jest potrzebny */
      display: none;
      gap: 4px;
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 5px;
      border: 1px solid rgba(255,255,255,.1);
      overflow-x: auto;
      flex-shrink: 1;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      position: relative;
      max-width: 90%;
    }
    .tabBar::-webkit-scrollbar{ display: none; }

    .tabBtn{
      padding: 10px 14px;
      background: transparent;
      border: none;
      border-radius: 12px;
      color: rgba(255,255,255,.6);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .25s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tabBtn:hover{
      color: rgba(255,255,255,.9);
      background: rgba(255,255,255,.1);
    }
    .tabBtn.active{
      background: linear-gradient(135deg, rgba(110,80,255,.8), rgba(0,210,255,.7));
      color: #fff;
      box-shadow: 0 4px 15px rgba(110,80,255,.4);
    }
    .tabBtn .tabIcon{ font-size: 16px; }

    /* ========== BOŻEK MINIGRY (listwy podłogowe) ========== */
    /* Uwaga: .page ma już padding-top pod stały topBar.
       Wcześniej dodawaliśmy tu drugi duży padding-top, przez co plansza była niska.
       Teraz robimy układ jak w kolorowankach: flex + pełna wysokość widoku. */

    /* Tło na całej stronie (pełna szerokość) */
    #pageBozek{
      background:
        radial-gradient(900px 500px at 50% 0%, rgba(255,170,60,.10), transparent 60%),
        radial-gradient(900px 600px at 20% 70%, rgba(120,255,180,.10), transparent 60%),
        radial-gradient(900px 600px at 80% 70%, rgba(120,160,255,.10), transparent 60%),
        linear-gradient(180deg, #08060f, #150a25);
      overflow: hidden; /* bez scrolla strony — kontrolujemy przewijanie wewnątrz */
      display: flex;
      flex-direction: column;
    }

    .bozekPage{
      padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px));
      color: #fff;
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;
      box-sizing: border-box;
      gap: 10px;
    }

    /* (v11) Menu minigier: opuść całość o 20px */
    .bozekPage:not(.inGame){ padding-top: 28px; }

    /* zawartość (jak w kolorowankach) ograniczamy do 920px */
    .bozekPage > *{ max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; }
    .bozekTopRow{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    /* W trybie gry chowamy duży nagłówek (mamy już HUD z powrotem + tytuł). */
    .bozekPage.inGame .bozekTopRow{ display: none; }
    .bozekBackBtn{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(12px);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: transform .2s ease, background .2s ease;
      flex: 0 0 auto;
    }
    .bozekBackBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
    .bozekHeadings{ display:flex; flex-direction:column; gap: 2px; }
    .bozekTitle{ font-size: clamp(22px, 5.2vw, 34px); line-height: 1.1; }
    .bozekSubtitle{ opacity: .75; font-size: 14px; }

    .bozekPlankList{
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 14px;
    }
    .bozekPlank{
      position: relative;
      width: 100%;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      padding: 14px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      color: #fff;
      text-align: left;
      background:
        linear-gradient(90deg, rgba(196,140,78,.38), rgba(140,86,46,.28)),
        radial-gradient(40px 30px at 25% 40%, rgba(0,0,0,.22), transparent 70%),
        radial-gradient(60px 40px at 70% 65%, rgba(0,0,0,.18), transparent 75%);
      box-shadow:
        inset 0 2px 0 rgba(255,255,255,.12),
        inset 0 -4px 0 rgba(0,0,0,.28),
        0 10px 22px rgba(0,0,0,.38);
      overflow: hidden;
      transition: transform .18s ease, filter .18s ease;
    }
    .bozekPlank::before{
      content: "";
      position: absolute;
      inset: 0;
      opacity: .35;
      background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.10) 0px,
        rgba(255,255,255,.10) 2px,
        transparent 2px,
        transparent 10px
      );
      pointer-events: none;
      mix-blend-mode: overlay;
    }
    .bozekPlank::after{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      background: rgba(0,0,0,.14);
      pointer-events: none;
    }
    .bozekPlank:hover{ transform: translateY(-2px); filter: brightness(1.03); }
    .bozekPlank:active{ transform: translateY(0px) scale(.995); }
    .bozekPlank[disabled]{ opacity: .45; cursor: not-allowed; filter: grayscale(.15); }

    .bozekPlankLeft{
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.12);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      z-index: 1;
    }
    .bozekPlankEmoji{ font-size: 24px; }

    .bozekPlankMid{ display:flex; flex-direction:column; gap: 3px; flex: 1 1 auto; z-index: 1; }
    .bozekPlankTitle{ font-weight: 800; letter-spacing: .2px; }
    .bozekPlankDesc{ opacity: .82; font-size: 13px; }
    .bozekPlankRight{ font-weight: 800; opacity: .95; z-index: 1; }

    .bozekHint{
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      opacity: .86;
      font-size: 13px;
    }

    .bozekGameWrap.hidden{ display:none; }

    /* Menu ma przewijanie tylko w obrębie strony (a nie całej .page) */
    .bozekMenu{ flex: 1 1 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }

    /* Widok gry: ta sama maksymalna "ramka" jak w kolorowankach */
    .bozekGameWrap{
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;
    }

    
    .bozekGameHud{
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      --bozekHudBarH: 8px;
    }

    /* HUD jak w klasycznych platformówkach: bez osobnego panelu, bez tła, bez ramki.
       Dane siedzą bezpośrednio NA planszy i są tylko lekkim overlayem. */
    .bozekGameHud--overlay{
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      z-index: 20;
      padding: 0;
      background: none;
      border: 0;
      border-radius: 0;
      backdrop-filter: none;
      pointer-events: none;
      color: rgba(255,255,255,.96);
      text-shadow:
        0 2px 10px rgba(0,0,0,.55),
        0 1px 2px rgba(0,0,0,.9);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    .bozekHudLine{
      display: grid;
      align-items: center;
      column-gap: 10px;
      row-gap: 6px;
      min-width: 0;
    }
    .bozekHudLine1{ grid-template-columns: 1fr auto; }
    .bozekHudLine2{ grid-template-columns: 1fr auto; }

    .bozekHudLeft{
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* (v12) W HUD pokazujemy TYLKO nazwÄ™ etapu (stage). NazwÄ™ gry ukrywamy. */
    .bozekHudLeft .bozekMiniTitle{ display:none !important; }
    .bozekHudLeft .bozekStageBadge{
      /* nie rozciągaj pigułki – ma się skracać z ellipsis, gdy stage jest długi */
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
    }

    .bozekHudBuffs{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: nowrap;
      white-space: nowrap;
      min-width: 0;
    }

    /* Wąskie telefony – ciaśniej, żeby wszystko mieściło się w 2 liniach */
    @media (max-width: 420px){
      .bozekHudBuffs{ gap: 6px; }
    }

    /* Przycisk Wstecz w dolnym panelu (niebieski) */
    .gameBtn.bozekBackBlue{
      background: linear-gradient(135deg, rgba(80,150,255,.85), rgba(70,210,255,.75));
      border: none;
      box-shadow: 0 5px 18px rgba(70,170,255,.28);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .gameBtn.bozekBackBlue:hover{
      filter: brightness(1.05);
      transform: translateY(-2px);
    }
    .bozekBackLabel{ font-weight: 800; letter-spacing: .2px; }
    @media (max-width: 420px){
      .bozekBackLabel{ display:none; }
      .gameBtn.bozekBackBlue{ padding-left: 14px; padding-right: 14px; }
    }

    /* Tryby wydajności (włączane automatycznie na słabszych maszynach) */
    .bozekPage.bozekPerfMed .bozekGameHud{ backdrop-filter: blur(6px); }
    .bozekPage.bozekPerfLow .bozekGameHud{ backdrop-filter: none; }
    .bozekPage.bozekPerfMed .bozekGameHud--overlay,
    .bozekPage.bozekPerfLow .bozekGameHud--overlay{ backdrop-filter: none; }

    .bozekPage.bozekPerfLow .bozekCanvasFrame{
      animation: none;
      background-size: 100% 100%;
    }
    .bozekPage.bozekPerfLow .bozekProgressFill{ box-shadow: none; }
    .bozekPage.bozekPerfLow .pixelPop{ text-shadow: 2px 2px 0 rgba(0,0,0,.85); }
    .bozekMiniBack{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      transition: transform .18s ease;
    }
    .bozekMiniBack:hover{ transform: translateY(-1px); }

    .bozekMiniBack{ grid-column: 1; grid-row: 1 / span 2; align-self: start; }

    .bozekHudMid{ grid-column: 2; grid-row: 1 / span 2; }

    .bozekHudMid{ display:flex; flex-direction:column; gap: 6px; min-width: 0; }
    .bozekMiniTitle{ font-weight: 900; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bozekStageBadge{
      align-self: flex-start;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .6px;
      text-transform: uppercase;
      opacity: .92;
      line-height: 1;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      /* nie zawijaj i nie zmieniaj wysokości HUD-a */
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bozekMiniStats{
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      align-self: start;
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: nowrap;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .bozekProgressRow{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap: nowrap;
      min-width: 0;
    }
    .bozekProgressBar{
      /* Progress ma być dominujący, ale HP może rozszerzać się na szerokich ekranach */
      flex: 6 1 0;
      height: var(--bozekHudBarH);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 0 8px rgba(0,0,0,.35);
      min-width: 120px;
    }
    .bozekProgressFill{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.15));
      box-shadow: 0 0 10px rgba(255,255,255,.22);
      transition: width .18s ease;
    }

    .bozekProgressMarks{
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .75;
    }
    .bozekMark{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      border-radius: 2px;
      background: rgba(255,255,255,.18);
      box-shadow: 0 0 10px rgba(255,255,255,.12);
    }
    
    .bozekProgressOverlay{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      opacity: .92;
      white-space: nowrap;
      font-weight: 900;
      letter-spacing: .2px;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 2px rgba(0,0,0,.65);
      pointer-events: none;
      user-select: none;
    }

    .bozekHpBar{
      /* HP wypełnia wolną przestrzeń zamiast być sztywno 92px */
      flex: 2 1 92px;
      min-width: 92px;
      width: auto;
      height: var(--bozekHudBarH);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 0 8px rgba(0,0,0,.35);
    }
    .bozekHpFill{
      height: 100%;
      width: 100%;
      border-radius: 999px;
      background: hsl(120, 85%, 55%);
      box-shadow: 0 0 10px rgba(255,255,255,.08);
      transition: width .18s ease, background-color .18s ease;
    }
    .bozekHpOverlay{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      opacity: .95;
      white-space: nowrap;
      font-weight: 900;
      letter-spacing: .2px;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 2px rgba(0,0,0,.65);
      pointer-events: none;
      user-select: none;
    }

    @media (max-width: 420px){
      .bozekHpBar{ flex-basis: 78px; min-width: 78px; }
      .bozekProgressOverlay{ font-size: 10.5px; }
    }

    /* (v10) Buffy nie zmieniają układu – chowamy je bez wpływu na szerokość/układ */
    .bozekPowerStat.hidden,
    .bozekMagnetStat.hidden{
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    /* Stała szerokość buffów – licznik sekund nie "zwęża" HUD-a */
    #bozekPowerStat,
    #bozekMagnetStat{
      min-width: 86px;
      justify-content: center;
      text-align: center;
    }

    .bozekStat{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    /* Wąskie telefony – zmniejsz minimum, żeby nic nie wypychało HUD-a */
    @media (max-width: 420px){
      .bozekMiniStats{ gap: 6px; }
      .bozekStat{ padding: 6px 8px; font-size: 12px; }
      .bozekProgressBar{ min-width: 86px; }
.bozekMiniTitle{ font-size: 16px; }
    }


    /* (vHUD) Gwiazdka (wynik) ma taką samą wysokość pigułki jak ETAP */
    .bozekScoreStat{
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .4px;
      line-height: 1;
    }
    @media (max-width: 420px){
      .bozekScoreStat{ padding: 4px 10px; font-size: 11px; }
    }

    /* Overlay HUD na planszy — wersja "jak Mario": bez pigułek i bez ciemnego boxa */
    .bozekGameHud--overlay .bozekHudLine{
      align-items: start;
      column-gap: 12px;
      row-gap: 6px;
    }
    .bozekGameHud--overlay .bozekHudLine1{
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .bozekGameHud--overlay .bozekHudLine2{
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .bozekGameHud--overlay .bozekHudLeft{
      gap: 0;
    }
    .bozekGameHud--overlay .bozekStageBadge,
    .bozekGameHud--overlay .bozekScoreStat,
    .bozekGameHud--overlay .bozekStat,
    .bozekGameHud--overlay #bozekPowerStat,
    .bozekGameHud--overlay #bozekMagnetStat{
      background: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      min-width: 0;
    }
    .bozekGameHud--overlay .bozekStageBadge,
    .bozekGameHud--overlay .bozekScoreStat,
    .bozekGameHud--overlay .bozekProgressOverlay,
    .bozekGameHud--overlay .bozekHpOverlay,
    .bozekGameHud--overlay .bozekStat{
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .bozekGameHud--overlay .bozekStageBadge{
      font-size: 17px;
      line-height: 1;
      opacity: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bozekGameHud--overlay .bozekScoreStat{
      font-size: 16px;
      line-height: 1;
      justify-self: end;
      white-space: nowrap;
    }
    .bozekGameHud--overlay .bozekProgressRow{
      gap: 12px;
      align-items: center;
    }
    .bozekGameHud--overlay .bozekProgressBar,
    .bozekGameHud--overlay .bozekHpBar{
      height: 9px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 6px rgba(0,0,0,.28);
      overflow: visible;
    }
    .bozekGameHud--overlay .bozekProgressFill{
      background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.35));
      box-shadow: 0 0 10px rgba(255,255,255,.20);
    }
    .bozekGameHud--overlay .bozekHpFill{
      box-shadow: 0 0 8px rgba(255,255,255,.10);
    }
    .bozekGameHud--overlay .bozekProgressOverlay,
    .bozekGameHud--overlay .bozekHpOverlay{
      inset: auto 0 calc(100% + 6px) 0;
      justify-content: flex-start;
      font-size: 12px;
      line-height: 1;
      color: rgba(255,255,255,.96);
    }
    .bozekGameHud--overlay .bozekHpOverlay{
      justify-content: center;
    }
    .bozekGameHud--overlay .bozekHudBuffs{
      align-self: center;
      gap: 12px;
    }
    .bozekGameHud--overlay .bozekPowerStat.hidden,
    .bozekGameHud--overlay .bozekMagnetStat.hidden{
      display: none;
    }
    @media (max-width: 640px){
      .bozekGameHud--overlay{
        top: 10px;
        left: 10px;
        right: 10px;
        gap: 6px;
      }
      .bozekGameHud--overlay .bozekStageBadge{ font-size: 14px; }
      .bozekGameHud--overlay .bozekScoreStat{ font-size: 13px; }
      .bozekGameHud--overlay .bozekProgressOverlay,
      .bozekGameHud--overlay .bozekHpOverlay{ font-size: 10px; }
      .bozekGameHud--overlay .bozekProgressRow{ gap: 8px; }
      .bozekGameHud--overlay .bozekProgressBar,
      .bozekGameHud--overlay .bozekHpBar{ height: 8px; }
    }

/* (v19) Boss: aktywny bonus jako IKONA (bez napisĂłw) */
.bozekWeaponHud{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  line-height: 1;
}
.bozekWeaponHud.hidden{ display:none; }

.bozekBuffPill{
  --c: rgba(120,255,230,1);
  --p: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 10px rgba(255,255,255,.05);
}
.bozekBuffPill .ring{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(var(--c) calc(var(--p)*1turn), rgba(255,255,255,.10) 0);
  opacity: .95;
}
.bozekBuffPill .ring::after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: inherit;
  background: rgba(20,10,30,.88);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 10px rgba(255,255,255,.06);
}
.bozekBuffPill .glyph{
  position: relative;
  width: 14px;
  height: 14px;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.bozekBuffPill[data-type="double"]{ --c: rgba(110,220,255,1); box-shadow: 0 0 16px rgba(110,220,255,.25), inset 0 0 10px rgba(255,255,255,.05); }
.bozekBuffPill[data-type="triple"]{ --c: rgba(255,210,90,1); box-shadow: 0 0 16px rgba(255,210,90,.22), inset 0 0 10px rgba(255,255,255,.05); }
.bozekBuffPill[data-type="plasma"]{ --c: rgba(190,120,255,1); box-shadow: 0 0 16px rgba(190,120,255,.22), inset 0 0 10px rgba(255,255,255,.05); }

/* ikony: 2Ă— i 3Ă— jako "pociski" */
.bozekBuffPill[data-type="double"] .glyph::before{
  content:"";
  position:absolute;
  left: 2px;
  top: 2px;
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 6px 0 0 rgba(255,255,255,.92);
}
.bozekBuffPill[data-type="triple"] .glyph::before{
  content:"";
  position:absolute;
  left: 1px;
  top: 2px;
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 5px 0 0 rgba(255,255,255,.92), 10px 0 0 rgba(255,255,255,.92);
}

/* ikona plazmy: „okrągłe, kosmiczne” (jak bonusy) */
.bozekBuffPill[data-type="plasma"] .glyph{ width: 16px; height: 16px; }

.bozekBuffPill[data-type="plasma"] .glyph::before{
  content:"";
  position:absolute;
  inset: -3px;
  border-radius: 999px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,.55) 0 10deg,
    rgba(255,255,255,0) 10deg 24deg
  );
  opacity: .55;
  animation: bozekPlasmaSpin 1.15s linear infinite;
  filter: drop-shadow(0 0 10px rgba(190,120,255,.25));
}

.bozekBuffPill[data-type="plasma"] .glyph::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.92) 0 16%,
      rgba(255,255,255,.18) 20%,
      rgba(190,120,255,.90) 44%,
      rgba(190,120,255,0) 78%
    ),
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,.75) 58% 61%,
      rgba(255,255,255,0) 64%
    ),
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 68%,
      rgba(255,255,255,.45) 70% 72%,
      rgba(255,255,255,0) 74%
    );
  box-shadow: 0 0 12px rgba(190,120,255,.45);
}

@keyframes bozekPlasmaSpin{ to{ transform: rotate(360deg); } }

    .bozekCanvasFrame{
      margin-top: 0;
      flex: 1 1 0;
      min-height: 220px;
      border-radius: 22px;
      padding: 4px;
      /* „glow border” jak w kolorowankach */
      background: linear-gradient(145deg,
        rgba(0,180,255,.45),
        rgba(180,50,255,.45),
        rgba(255,50,120,.45),
        rgba(255,180,50,.35),
        rgba(0,180,255,.45)
      );
      background-size: 300% 300%;
      animation: glowBorderShift 6s ease infinite;
      box-shadow:
        0 0 18px rgba(120,60,255,.35),
        0 18px 50px rgba(0,0,0,.45),
        inset 0 0 12px rgba(255,255,255,.06);
      overflow: hidden;
    }

    .bozekStage{
      position: relative;
      width: 100%;
      /* plansza wypełnia dostępne miejsce (flex jak w kolorowankach) */
      height: 100%;
      border-radius: 18px;
      overflow: hidden;
      background: #0a0418;
    }

    /* awaryjnie: jeśli coś rozbije flex (bardzo stare przeglądarki), daj minimalną wysokość */
    .bozekStage{ min-height: 360px; }
    @media (max-width: 520px){
      .bozekStage{ min-height: 260px; }
    }

    #bozekCanvas{ width: 100%; height: 100%; display:block; touch-action: none; }

    .bozekFxLayer{
      position:absolute;
      inset: 0;
      pointer-events:none;
      z-index: 9;
    }

    /* (v17) Overlay po walce z bossem (musi klikać, więc nie jest w FxLayer) */
    .bozekBossOverlay{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.58);
      z-index: 30;
      pointer-events: auto;
      padding: 14px;
    }
    .bozekBossCard{
      width: min(520px, 92vw);
      border-radius: 18px;
      padding: 16px 16px 14px;
      background: rgba(18,10,40,.92);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      text-align: center;
      backdrop-filter: blur(8px);
    }
    .bozekBossTitle{ font-weight: 900; letter-spacing: .2px; font-size: 20px; }
    .bozekBossSub{ opacity: .86; margin-top: 6px; margin-bottom: 12px; }
    .bozekBossBtns{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .bozekBossHint{ opacity: .7; font-size: 12px; margin-top: 10px; }
    .pixelPop{
      position:absolute;
      transform: translate3d(-50%, -50%, 0);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
      font-weight: 900;
      letter-spacing: 1px;
      font-size: 18px;
      color: rgba(255,255,255,.92);
      text-shadow:
        0 0 0 rgba(0,0,0,.9),
        2px 2px 0 rgba(0,0,0,.85),
        0 0 14px rgba(255,255,255,.18);
      /* (v16) animacja uruchamiana z JS (WAAPI), żeby była płynna i bez reflow */
      opacity: 0;
      animation: none;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }
    .pixelPop.big{ font-size: 20px; }
    .pixelPop.super{ text-shadow: 2px 2px 0 rgba(0,0,0,.85), 0 0 18px rgba(255,255,255,.3); }

    @keyframes pixelPop{
      0%{ opacity: 0; transform: translate3d(-50%,-50%,0) translateY(10px) scale(0.92); }
      18%{ opacity: 1; transform: translate3d(-50%,-50%,0) translateY(1px) scale(1.06); }
      100%{ opacity: 0; transform: translate3d(-50%,-50%,0) translateY(-36px) scale(1.0); }
    }

    /* Bohater – ten sam „latający” z wejścia do gry (twarz z overlay) */
    .bozekHero{
      position: absolute;
      left: 0;
      bottom: 10px;
      /*
        (v13) Wydajność: ruch tylko przez transform (GPU), bez "left" w pętli gry.
        --bozekX jest ustawiane w JS i oznacza lewy brzeg sprite'a w px.
      */
      transform: translate3d(var(--bozekX, 0px), 0, 0) scale(var(--bozekScale, 1));
      transform-origin: 50% 100%;
      width: 84px;
      height: 84px;
      pointer-events: none;
      z-index: 10;
      will-change: transform;
    }

    /* Wariant: klon "twarzy" (ten sam SVG co speakingFaceOverlay) */
    .bozekHero .faceSprite,
    .bozekHero .faceBob{ width: 100%; height: 100%; display: grid; place-items: center; }
    .bozekHero .faceSprite{ position: relative; }
    .bozekHero .faceBob{ animation: floatBob 3s ease-in-out infinite; }
    .bozekHero svg.faceChar{
      width: 100%;
      height: 100%;
      display: block;
      /* bez ciężkich filtrów – poprawia płynność */
      filter: none;
      transition: transform .18s ease;
    }

    .bozekHero.power svg.faceChar{
      filter: none;
    }

    /* (v9) Bez laserowych oczu — w supermocy tylko aura */
    .bozekHero.power::before{
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 140%;
      height: 140%;
      transform: translate(-50%,-50%);
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.16);
      box-shadow: 0 0 16px rgba(255,255,255,.18);
      animation: powerAura 0.8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes powerAura{
      0%{ opacity: .35; transform: translate(-50%,-50%) scale(0.98); }
      50%{ opacity: .65; transform: translate(-50%,-50%) scale(1.03); }
      100%{ opacity: .35; transform: translate(-50%,-50%) scale(0.98); }
    }

    /* Aura magnesu */
    .bozekHero.magnet::after{
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 130%;
      height: 130%;
      transform: translate(-50%,-50%);
      border-radius: 999px;
      border: 2px dashed rgba(255,255,255,.22);
      box-shadow: 0 0 18px rgba(255,255,255,.18);
      animation: magnetRing 0.9s linear infinite;
      pointer-events: none;
    }

    .bozekPage.bozekPerfLow .bozekHero .faceBob{ animation: none; }
    .bozekPage.bozekPerfLow .bozekHero.power::before,
    .bozekPage.bozekPerfLow .bozekHero.magnet::after{
      animation: none;
      box-shadow: none;
    }
    @keyframes magnetRing{
      0%{ transform: translate(-50%,-50%) rotate(0deg); opacity: .55; }
      100%{ transform: translate(-50%,-50%) rotate(360deg); opacity: .75; }
    }

    /* "Jedzenie" – krótki bounce (z zachowaniem floatBob) */
    .bozekHero.eat .faceBob{
      animation: floatBob 3s ease-in-out infinite, bozekEatBob 0.18s ease-out 1;
    }
    @keyframes bozekEatBob{
      0%{ transform: translateY(0) scale(1); }
      45%{ transform: translateY(-2px) scale(1.08); }
      100%{ transform: translateY(0) scale(1); }
    }

    /* Fallback: jeśli z jakiegoś powodu użyjemy starego bożka z Memory */
    .bozekHero .memory-bozek{ width: 100%; height: 100%; }
    .bozekGameControls{
      --bozekCtrlW: 48px;
      --bozekCtrlH: 46px;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    }
    .bozekControlRow{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }
    .bozekControlRow--bottom{
      align-items: center;
    }
    .bozekControlRow--top,
    .bozekControlRow--bottom{
      flex-wrap: nowrap;
    }

    .srOnly{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .bozekControlBtn{
      width: var(--bozekCtrlW);
      height: var(--bozekCtrlH);
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,.16);
      color: #fff;
      background: linear-gradient(135deg, #3a1c71, #5b2d8e);
      box-shadow: 0 8px 18px rgba(0,0,0,.30);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      flex: 0 0 auto;
    }
    .bozekControlBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0,0,0,.34);
      filter: brightness(1.04);
    }
    .bozekControlBtn:active{
      transform: translateY(0) scale(.97);
      box-shadow: 0 6px 14px rgba(0,0,0,.26);
    }
    .bozekBtnIcon{
      width: calc(var(--bozekCtrlH) * 0.48);
      height: calc(var(--bozekCtrlH) * 0.48);
      display: block;
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    }

    .gameBtn.bozekBackBlue{
      background: linear-gradient(135deg, rgba(80,170,255,.95), rgba(45,110,255,.9)) !important;
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 10px 22px rgba(45,110,255,.28);
      gap: 0;
    }
    .gameBtn.bozekBackBlue:hover{
      transform: translateY(-1px);
      filter: brightness(1.04);
    }
    .bozekBackLabel{ font-weight: 800; letter-spacing: .2px; }

    .bozekHandToggle{
      background: linear-gradient(135deg, rgba(60,220,120,.95), rgba(30,160,90,.9)) !important;
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 10px 22px rgba(30,160,90,.28);
    }
    .bozekHandToggle.isOn{
      background: linear-gradient(135deg, rgba(90,235,140,.98), rgba(35,175,98,.92)) !important;
      box-shadow: 0 10px 24px rgba(30,160,90,.34), 0 0 0 3px rgba(60,220,120,.14);
    }

    .bozekCalibBtn{
      background: linear-gradient(135deg, rgba(128,92,255,.95), rgba(90,55,185,.92)) !important;
      border-color: rgba(215,195,255,.26);
      box-shadow: 0 10px 22px rgba(90,40,180,.32);
    }
    .bozekCalibBtn.isOn{
      background: linear-gradient(135deg, rgba(148,112,255,.98), rgba(108,66,214,.94)) !important;
      box-shadow: 0 10px 24px rgba(122,64,199,.34), 0 0 0 3px rgba(180,130,255,.12);
    }

    .bozekStartBtn{
      background: linear-gradient(135deg, rgba(60,220,120,.95), rgba(30,160,90,.9)) !important;
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 10px 24px rgba(30,160,90,.30);
    }
    .bozekResetBtn{
      background: linear-gradient(135deg, rgba(255,190,70,.95), rgba(235,120,30,.9)) !important;
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 10px 24px rgba(235,120,30,.30);
    }
    .bozekPauseBtn{
      background: linear-gradient(135deg, rgba(128,92,255,.95), rgba(90,55,185,.92)) !important;
      border-color: rgba(215,195,255,.26);
      box-shadow: 0 10px 24px rgba(90,55,185,.30);
    }

    .bozekGain{
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 10px;
      margin: 0;
      position: relative;
      top: -1px;
      align-self: center;
      vertical-align: middle;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(80,170,255,.95), rgba(45,110,255,.9)) !important;
      border: 2px solid rgba(255,255,255,.14);
      min-width: 156px;
      max-width: 180px;
      box-shadow: 0 10px 22px rgba(45,110,255,.28);
      flex: 0 1 auto;
    }
    .bozekGainIcon{
      font-size: 14px;
      line-height: 1;
      opacity: .95;
      color: #ffe07c;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .bozekGainSlider{
      width: 78px;
      accent-color: #ffe07c;
      margin: 0;
      display: block;
    }
    .bozekGainVal{
      font-weight: 800;
      font-size: 12px;
      opacity: .92;
      min-width: 42px;
      text-align: right;
      white-space: nowrap;
      line-height: 1;
    }
    @media (max-width: 430px){
      .bozekGameControls{
        --bozekCtrlW: 44px;
        --bozekCtrlH: 44px;
        gap: 7px;
        margin-top: 6px;
      }
      .bozekControlRow{
        gap: 7px;
      }
      .bozekGain{
        height: 36px;
        min-width: 146px;
        max-width: 168px;
        padding: 0 8px;
        border-radius: 12px;
      }
      .bozekGainSlider{
        width: 70px;
      }
      .bozekGainVal{
        min-width: 38px;
        font-size: 11px;
      }
    }


    /* Overlay z punktami kalibracji (lewo/środek/prawo) */
    .bozekCalibOverlay{
      position: absolute;
      inset: 0;
      z-index: 25;
      pointer-events: none;
      background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.32) 100%);
    }
    .bozekCalibOverlay.hidden{ display: none; }
    .bozekCalibHint{
      position: absolute;
      left: 50%;
      top: 12px;
      transform: translateX(-50%);
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      font-weight: 800;
      letter-spacing: .2px;
      font-size: 13px;
      text-align: center;
      max-width: min(520px, 92vw);
      backdrop-filter: blur(8px);
      box-shadow: 0 12px 28px rgba(0,0,0,.35);
    }
    .bozekCalibPoint{
      position: absolute;
      top: 46%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,220,120,.85) 35%, rgba(255,220,120,.18) 70%, rgba(0,0,0,0) 72%);
      box-shadow:
        0 0 0 2px rgba(255,255,255,.28),
        0 0 18px rgba(255,220,120,.22);
      opacity: .65;
    }
    .bozekCalibPoint::after{
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.75);
      opacity: 0;
      transform: scale(.6);
    }
    .bozekCalibPoint.active{
      opacity: 1;
      box-shadow:
        0 0 0 2px rgba(255,255,255,.32),
        0 0 22px rgba(255,220,120,.30);
    }
    .bozekCalibPoint.active::after{
      animation: handPulse .60s ease-out infinite;
    }

    /* Lekki wskaĹşnik (DOM) dla palca */
    .handPointer{
      position: fixed;
      left: 0;
      top: 0;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 2px solid rgba(190,255,247,.96);
      background: rgba(34,198,186,.12);
      box-shadow: 0 0 0 1px rgba(7,28,38,.18);
      pointer-events: none;
      z-index: 99999;
      opacity: 1;
      transition: opacity .16s ease;
      will-change: transform;
      contain: layout style paint;
    }
    .handPointer.hidden{ opacity: 0; }
    .handPointer::before{
      content: '';
      position: absolute;
      inset: -7px;
      border-radius: 999px;
      border: 2px solid rgba(235,255,252,.86);
      opacity: 0;
      transform: scale(.84);
    }
    .handPointer.pinch::before{
      animation: handPointerPulse .22s ease-out 1;
    }
    @keyframes handPointerPulse{
      0%{ opacity: .85; transform: scale(.88); }
      100%{ opacity: 0; transform: scale(1.18); }
    }

    /* ========== GAME HEADER (Back + Title) ========== */
    .gameHeader{
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.1);
      max-width: 90%;
      color: #fff;
    }
    .gameHeaderBack{
      padding: 10px 12px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      background: rgba(255,255,255,.08);
      color: #fff;
      font-weight: 700;
      transition: all .2s ease;
    }
    .gameHeaderBack:hover{ background: rgba(255,255,255,.16); }
    .gameHeaderTitle{
      font-weight: 800;
      letter-spacing: .2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 56vw;
    }

    /* Tryb gry: minimalny topbar + trochę więcej miejsca na ekranie */
    body.inGame .topBar{
      padding: max(6px, env(safe-area-inset-top, 0px)) 10px 6px;
      background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.4), transparent);
    }

    /* (v10) Gry z własnym cofaniem mają pełny ekran: bez topbara i bez czarnego gradientu u góry */
    body.hideTopBar .topBar{
      display: none !important;
      background: transparent !important;
    }
    /* (v12) Nick uĹĽytkownika tylko w menu wyboru gry */
    body.inGame .playerBadge{ display:none !important; }
    /* Rezerwuj miejsce pod topbar takĹĽe na urzÄ…dzeniach z safe-area (notch) */
    body.inGame .page{ padding-top: 0; }

    /* ========== PAGES ========== */
    .page{
      position: fixed;
      inset: 0;
      padding-top: 0;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      z-index: 0;
      pointer-events: none;
      transition: opacity .4s ease, transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: scale(0.92) translateY(30px);

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .page.active{
      opacity: 1;
      visibility: visible;
      z-index: 2;
      pointer-events: auto;
      transform: scale(1) translateY(0);
    }
    .page.exiting{
      opacity: 0;
      visibility: visible;
      z-index: 1;
      transform: scale(1.08) translateY(-30px);
    }

    /* ========== PAGE: GITARA ========== */
    .vh{
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      background:
        radial-gradient(1200px 800px at 50% 20%, rgba(110,80,255,.22), transparent 60%),
        radial-gradient(900px 700px at 20% 80%, rgba(0,255,210,.10), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      color: #fff;
      padding-top: 60px;
    }

    .hud{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      pointer-events: none;
    }
    .pill{
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      padding: 8px 12px;
      box-shadow: 0 10px 25px rgba(0,0,0,.35);
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .small{ font-size: 12px; opacity: .75; white-space: nowrap; }
    .pitchText{ font-variant-numeric: tabular-nums; font-size: 12px; opacity: .85; }
    .meter{
      width: 80px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      overflow: hidden;
    }
    .meterFill{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.2));
      transition: width .08s linear;
    }

    .arenaWrap{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px 8px;
    }

    .arena{
      position: relative;
      width: min(540px, 94vw);
      height: min(65vh, 500px);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      overflow: hidden;
      transform: perspective(900px) rotateX(14deg);
      transform-origin: 50% 60%;
    }

    .lanes{
      position: absolute; inset: 0;
      display: flex;
      gap: 6px;
      padding: 16px 14px;
    }

    .lane{
      position: relative;
      flex: 1;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.2));
      overflow: hidden;
      --laneColor: rgba(255,255,255,.7);
      --vibe: 0px;
    }
    .lane::before{
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(600px 420px at 50% 5%, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(700px 400px at 50% 100%, rgba(0,0,0,.35), transparent 60%);
      pointer-events: none;
    }

    .laneName{
      position: absolute;
      top: 8px; left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 800;
      opacity: .85;
      text-shadow: 0 0 10px rgba(0,0,0,.7);
      color: rgba(255,255,255,.9);
      z-index: 5;
    }

    .guideString{
      position: absolute;
      top: 10px;
      bottom: calc(var(--hitY) + 10px);
      left: 50%;
      width: 3px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, transparent, var(--laneColor) 20%, var(--laneColor) 80%, transparent);
      opacity: .2;
      border-radius: 999px;
    }

    .voiceString{
      position: absolute;
      left: 50%;
      bottom: var(--holeCenter);
      width: 18px;
      height: 0;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--laneColor) 100%);
      opacity: 0;
      transition: height .08s linear, opacity .12s ease;
      filter: drop-shadow(0 0 20px var(--laneColor));
      z-index: 4;
    }
    .lane.active .voiceString{ opacity: 1; animation: stringVibe .13s linear infinite; }

    @keyframes stringVibe{
      0%{ transform: translateX(calc(-50% + var(--vibe))); }
      50%{ transform: translateX(calc(-50% - var(--vibe))); }
      100%{ transform: translateX(calc(-50% + var(--vibe))); }
    }

    .octaves{
      position: absolute; left: 0; right: 0;
      top: 20px;
      bottom: calc(var(--hitY) + 15px);
      pointer-events: none;
      z-index: 2;
    }
    .oct{
      position: absolute; left: 8%; right: 8%;
      height: 2px;
      border-radius: 999px;
      opacity: .15;
      background: var(--laneColor);
    }
    .oct.active{
      opacity: .8;
      box-shadow: 0 0 12px var(--laneColor);
    }
    .octLabel{
      position: absolute;
      left: 6px;
      transform: translateY(-50%);
      font-size: 9px;
      opacity: .5;
    }

    .cursor{
      position: absolute;
      left: 50%;
      width: 12px; height: 15px;
      border-radius: 999px;
      transform: translate(-50%,-50%);
      background: var(--laneColor);
      box-shadow: 0 0 15px var(--laneColor);
      opacity: 0;
      transition: opacity .12s ease;
      z-index: 80;
    }
    .lane.active .cursor{ opacity: .9; }

    .qLine{
      position: absolute;
      left: 12%; right: 12%;
      height: 3px;
      border-radius: 999px;
      background: var(--laneColor);
      opacity: .3;
      z-index: 3;
    }
    .qTag{
      position: absolute;
      left: 8px;
      transform: translateY(-50%);
      font-size: 9px;
      opacity: .5;
    }

    .hitZone{
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      width: 48px; height: 48px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(0,0,0,.7), transparent);
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: inset 0 0 15px rgba(0,0,0,.5);
      z-index: 8;
      transition: all .15s ease;
    }
    .hitZone.flash{
      border-color: rgba(255,255,255,.5);
      box-shadow: inset 0 0 20px rgba(255,255,255,.2), 0 0 25px var(--laneColor);
    }

    .qPulse{
      position: absolute;
      left: 50%;
      width: 70px; height: 70px;
      transform: translate(-50%,-50%);
      border-radius: 999px;
      border: 3px solid var(--laneColor);
      box-shadow: 0 0 25px var(--laneColor);
      animation: pulse 1.2s ease-out forwards;
      z-index: 7;
    }
    @keyframes pulse{
      0%{ transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
      100%{ transform: translate(-50%,-50%) scale(2); opacity: 0; }
    }

    .laser{
      position: absolute;
      width: 3px;
      height: var(--laserHeight);
      left: calc(50% + var(--lx));
      top: var(--ly);
      background: linear-gradient(180deg, transparent, var(--laserColor), transparent);
      box-shadow: 0 0 10px var(--laserColor), 0 0 20px var(--laserColor);
      animation: laserShoot var(--duration) ease-out forwards;
      z-index: 9;
    }
    @keyframes laserShoot{
      0%{ transform: translateY(0) scaleY(0.3); opacity: 1; }
      100%{ transform: translateY(var(--dy)) scaleY(1.2); opacity: 0; }
    }

    .overlay{
      position: absolute; inset: 0;
      background: rgba(0,0,0,.85);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 20px;
      z-index: 999;
    }
    .overlay h1{
      font-size: clamp(24px, 7vw, 40px);
      font-weight: 800;
      background: linear-gradient(135deg, #fff, rgba(160,100,255,.85));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .overlay p{ font-size: 14px; opacity: .7; text-align: center; max-width: 300px; line-height: 1.5; }

    .startBtn{
      padding: 14px 28px;
      background: linear-gradient(135deg, rgba(110,80,255,.85), rgba(0,210,255,.75));
      border: none;
      border-radius: 999px;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(110,80,255,.4);
      transition: all .2s ease;
    }
    .startBtn:hover{ transform: translateY(-2px) scale(1.03); }

    .controls{
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .ctrlGroup{
      background: rgba(0,0,0,.4);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ctrlGroup label{ font-size: 10px; opacity: .7; }
    .ctrlGroup input[type=range]{
      width: 50px; height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,.15);
      -webkit-appearance: none;
    }
    .ctrlGroup input[type=range]::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 12px; height: 12px;
      border-radius: 999px;
      background: #fff;
      cursor: pointer;
    }

    /* ========== GAME PAGES ========== */
    .gamePage{
      position: absolute; inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      padding: 15px;
      padding-top: 70px;
      overflow-y: auto;
    }

    /* (v11) Wspólny nagłówek gry: nick po lewej, tytuł na środku */
    .gameTopRow{
      width: min(920px, 100%);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      margin-bottom: 2px;
    }
    .gameTopSlot{ min-width: 0; }
    .gameTopCenter{ text-align: center; }
    .playerBadge.inPageHeader{
      position: static;
      left: auto;
      top: auto;
      margin: 0;
      z-index: auto;
    }

    /* Panel wyboru gier: tytuł i podtytuł trochę wyżej */
    .gamePage.gamesMenu{
      /* .page ma już padding-top pod topBar, więc tu dajemy mało */
      padding-top: 20px;
      position: relative;
      overflow: hidden;

      /* żywsze tło dla panelu wyboru gry */
      background:
        radial-gradient(900px 650px at 20% 10%, rgba(120,80,255,.28), transparent 62%),
        radial-gradient(900px 650px at 80% 25%, rgba(0,255,210,.10), transparent 64%),
        radial-gradient(800px 600px at 50% 100%, rgba(255,120,200,.10), transparent 65%),
        linear-gradient(180deg, #070712, #0b0a16 45%, #05040a);
    }
    .gamePage.gamesMenu::before,
    .gamePage.gamesMenu::after{
      content:"";
      position:absolute;
      inset:-30%;
      pointer-events:none;
      opacity:.9;
      background:
        radial-gradient(closest-side, rgba(190,140,255,.18), transparent 68%),
        radial-gradient(closest-side, rgba(90,240,210,.10), transparent 70%),
        radial-gradient(closest-side, rgba(255,180,90,.10), transparent 72%);
      mix-blend-mode: screen;
      transform: translate3d(0,0,0);
      animation: menuGlowDrift 9s ease-in-out infinite;
    }
    .gamePage.gamesMenu::after{
      opacity:.55;
      animation-duration: 13s;
      animation-direction: reverse;
    }
    @keyframes menuGlowDrift{
      0%,100%{ transform: translate3d(-3%, -2%, 0) rotate(-1deg) scale(1.02); }
      50%{ transform: translate3d(3%, 2%, 0) rotate(1deg) scale(1.06); }
    }

    .gamePage.liczenie{
      background: radial-gradient(ellipse at 50% 30%, rgba(255,140,50,.2), transparent 60%),
                  radial-gradient(ellipse at 80% 70%, rgba(255,80,180,.15), transparent 60%),
                  linear-gradient(180deg, #0a0812, #1a0a28);
      /* (v11) Cofanie jest w dolnych przyciskach, a topbar chowamy – maksymalnie zyskaj wysokość */
      padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
    .gamePage.alfabet{
      background: radial-gradient(ellipse at 50% 30%, rgba(50,200,150,.2), transparent 60%),
                  radial-gradient(ellipse at 20% 70%, rgba(100,150,255,.15), transparent 60%),
                  linear-gradient(180deg, #080f12, #0a1a28);
      /* Mamy cofanie na dole (bez globalnego nagłówka) – podnosimy zawartość, żeby zyskać wysokość. */
      padding-top: 32px;
    }
    .gamePage.zwierzeta{
      background: radial-gradient(ellipse at 50% 30%, rgba(255,200,50,.2), transparent 60%),
                  radial-gradient(ellipse at 70% 80%, rgba(150,255,100,.15), transparent 60%),
                  linear-gradient(180deg, #0f0a08, #1a1808);
      padding-top: 12px;
      padding-bottom: 22px;
      justify-content: center;
    }

    .gameTitle{
      font-size: clamp(18px, 5vw, 28px);
      font-weight: 800;
      margin-top: 0;
      margin-bottom: 6px;
      background: linear-gradient(135deg, #fff, rgba(255,200,100,.9));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
    }
    .gameTitle.alfabet{ background: linear-gradient(135deg, #fff, rgba(100,255,200,.9)); -webkit-background-clip: text; background-clip: text; }
    .gameTitle.zwierzeta{ background: linear-gradient(135deg, #fff, rgba(255,220,100,.9)); -webkit-background-clip: text; background-clip: text; }

    .gameSubtitle{ font-size: 12px; opacity: .6; margin-bottom: 8px; text-align: center; }

    /* Kategorie: mniej odstępów u góry – więcej miejsca na kontur */
    .gamePage.zwierzeta .gameSubtitle{ margin-bottom: 8px; }
    .gamePage.zwierzeta .scoreDisplay{ margin-bottom: 6px; align-items: center; }
    .gamePage.zwierzeta .timerBar{ margin-bottom: 6px; }


    .scoreDisplay{ display: flex; gap: 12px; margin-bottom: 8px; justify-content: center; }
    .scorePill{
      background: rgba(0,0,0,.4);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      padding: 6px 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
    }
    .scorePill .icon{ font-size: 14px; }
    .scorePill .value{ font-weight: 700; }

    /* Kategorie: większe ikonki w punktacji */
    .gamePage.zwierzeta .scorePill{ gap: 8px; min-height: 34px; padding: 5px 12px; box-sizing: border-box; }
    .gamePage.zwierzeta .scorePill .icon{ font-size: 18px; }
    .gamePage.zwierzeta .scorePill .value{ font-size: 13px; }

    /* Back obok punktacji w "Kategorie" */
    .scoreBackPill{
      cursor: pointer;
      justify-content: center;
      padding: 6px 12px;          /* jak scorePill */
      min-width: 46px;
      min-height: 38px;
      height: auto;               /* dopasuj do punktacji */
      width: auto;
      line-height: 1;
      appearance: none;
      -webkit-appearance: none;
      box-sizing: border-box;
      user-select: none;
      transition: background .2s ease, transform .08s ease;
    }
    .scoreBackPill:hover{ background: rgba(255,255,255,.10); }
    .scoreBackPill:active{ transform: translateY(1px); }
    .gamePage.zwierzeta .scoreBackPill{
      width: auto;
      min-width: 46px;
      height: 34px;
      min-height: 34px;
      padding: 0 12px;
      flex: 0 0 auto;
    }
    .gamePage.zwierzeta .scoreBackPill .ctrlIcon{
      width: 18px;
      height: 18px;
    }

    .timerBar{
      width: 100%;
      max-width: 320px;
      height: 5px;
      background: rgba(255,255,255,.1);
      border-radius: 999px;
      margin-bottom: 6px;
      overflow: hidden;
    }
    .timerFill{
      height: 100%;
      background: linear-gradient(90deg, #69db7c, #ffd43b, #ff6b6b);
      border-radius: 999px;
      transition: width .1s linear;
      width: 100%;
    }

    .canvasWrap{
      position: relative;
      width: 100px; height: 120px;
      margin-bottom: 10px;
      background: rgba(0,0,0,.3);
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,.1);
      box-shadow: 0 6px 25px rgba(0,0,0,.4);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .canvasWrap.animalCanvas{
      width: clamp(357px, 78vw, 578px);
      /* Oryginalnie kontur był wyższy – dajemy więcej miejsca na duży podgląd */
      /* Jeszcze trochę wyżej (zgodnie z prośbą) */
      height: clamp(560px, 68vh, 860px);
border-radius: 22px;
    
    }
    .canvasWrap.animalCanvas canvas{
      width: 92%;
      height: 92%;
    }

    /* SVG icons for Animals */
    .svgStage{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      /* Kontur ma zawsze pozostać widoczny nawet gdy "twarz" pływa po ekranie */
      z-index: 2850;
      opacity: 1;
      transform: scale(1);
      transition: opacity .5s ease, transform .15s ease;
    }
    .svgStage svg{ width: 100%; height: 100%; overflow: visible; padding: 0; box-sizing: border-box; }

    /* Panic (ostatnie 5 sekund) */
    @keyframes animalBlink{
      0%,49%{ opacity: 1; }
      50%,100%{ opacity: var(--blinkLowOpacity, .25); }
    }
    @keyframes bgBlink{
      0%,49%{ opacity: 0; }
      50%,100%{ opacity: var(--blinkBgOpacity, .55); }
    }
    .canvasWrap.animalCanvas.panic{
      border-color: rgba(255,100,120,.75);
      box-shadow: 0 10px 35px rgba(255,80,120,.25);
    }
    .canvasWrap.animalCanvas.panic .svgStage{
      animation: animalBlink var(--blinkDur) steps(1,end) infinite;
    }
    .canvasWrap.animalCanvas.panic .svgStage svg{
      color: var(--panicColor, #ffeb3b) !important;
      filter: drop-shadow(0 0 18px rgba(255,235,59,.35));
    }


    
    /* Reveal po poprawnej odpowiedzi (bez napisów) + bounce w trakcie odgłosu */
    .svgStage.correctReveal .revealStack{ max-height: 100%; }
    @keyframes contourBounce{
      0%{ transform: translateY(0) scale(1); }
      20%{ transform: translateY(-8px) scale(1.03); }
      45%{ transform: translateY(0) scale(0.99); }
      70%{ transform: translateY(-4px) scale(1.02); }
      100%{ transform: translateY(0) scale(1); }
    }
    .svgStage.bounce .revealStack{
      animation: contourBounce .75s ease-in-out infinite;
      filter: drop-shadow(0 0 18px rgba(255,255,255,.22));
    }

    /* Szybki "slide" konturu w lewo z małymi podskokami (po odgłosie, przed kolejną turą) */
    @keyframes contourSlideLeftBop{
      0%{ transform: translateX(0) translateY(0) scale(1); opacity: 1; }
      18%{ transform: translateX(-18%) translateY(-7px) scale(1.02); }
      36%{ transform: translateX(-36%) translateY(0) scale(0.99); }
      54%{ transform: translateX(-54%) translateY(-4px) scale(1.01); }
      72%{ transform: translateX(-78%) translateY(-2px) scale(0.99); opacity: .9; }
      100%{ transform: translateX(-125%) translateY(0) scale(0.98); opacity: 0; }
    }
    .svgStage.exitLeft .revealStack{
      animation: contourSlideLeftBop .48s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

/* Reveal po nieudanej rundzie */
    .svgStage.reveal{
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }
    .revealStack{
      position: relative;
      width: 100%;
      height: 100%;
      max-height: calc(100% - 40px);
      display: grid;
      place-items: center;
    }
    .revealLayer{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }
    .revealLayer svg{ width: 88%; height: 88%; overflow: visible; }

    @keyframes swapA{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }
    @keyframes swapB{ 0%,49%{ opacity: 0; } 50%,100%{ opacity: 1; } }
    @keyframes kidRainbow{
      0%{ color: hsl(0, 100%, 72%); }
      33%{ color: hsl(120, 100%, 72%); }
      66%{ color: hsl(240, 100%, 72%); }
      100%{ color: hsl(360, 100%, 72%); }
    }

    .revealLayer.plain{
      color: rgba(255,255,255,.95);
      animation: swapA .6s steps(1,end) infinite;
    }
    .revealLayer.color{
      color: var(--revealColor, rgba(255,220,100,.95));
      animation: swapB .6s steps(1,end) infinite;
      filter: drop-shadow(0 0 14px rgba(255,255,255,.25));
    }
    .revealCaption{
      font-weight: 900;
      letter-spacing: .3px;
      font-size: clamp(16px, 4.8vw, 22px);
      text-align: center;
      color: rgba(255,255,255,.95);
      text-shadow: 0 6px 20px rgba(0,0,0,.6);
    }
    .revealCaption b{
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,220,100,.95));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Neonowe komunikaty na ekranie konturu (Zwierzeta) - HIDDEN */
    .animalMsgBox{
      display: none !important;
    }
    .animalMsgText{
      display: none !important;
    }

        /* ======= GLOBAL FLOATING FACE ======= */
    .speakingFaceOverlay{
      position: fixed;
      z-index: 3200;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      opacity: 0;
      isolation: isolate;
      transition:
        width 0.8s cubic-bezier(.34,1.56,.64,1),
        height 0.8s cubic-bezier(.34,1.56,.64,1),
        opacity 0.5s ease;
    }
    .speakingFaceOverlay .faceSprite{
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      will-change: transform, filter;
      transform: rotate(var(--faceSpin, 0deg)) scale(var(--faceScale, 1));
    }
    .speakingFaceOverlay .faceBob{
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      will-change: transform;
    }
    .speakingFaceOverlay svg.faceChar{
      width: 100%;
      height: auto;
      display: block;
    }

    /* MINI mode: small floating curious face */
    .speakingFaceOverlay.faceMini{
      width: 110px;
      height: 110px;
      opacity: 1;
    }

    /* Ekran startowy (menu wyboru gry): Yoha minimalnie niĹĽej */
    body:not(.inGame) .speakingFaceOverlay.faceMini{
      transform: translate(-50%,-50%) translateY(20px);
    }
    .speakingFaceOverlay.faceMini svg.faceChar{
      filter: drop-shadow(0 0 12px rgba(180,120,255,.4)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
    }
    @keyframes floatBob{
      0%,100%{ transform: translateY(0px) rotate(-2deg); }
      33%{ transform: translateY(-6px) rotate(1deg); }
      66%{ transform: translateY(-2px) rotate(-1deg); }
    }
    .speakingFaceOverlay.faceMini .faceBob{
      animation: floatBob 3s ease-in-out infinite;
    }

    /* CENTER mode: big face for speaking / name select */
    .speakingFaceOverlay.faceCenter{
      opacity: 1;
    }
    .speakingFaceOverlay.faceCenter .faceBob{
      animation: none;
    }
    .speakingFaceOverlay.faceCenter svg.faceChar{
      filter: drop-shadow(0 0 24px rgba(180,120,255,.35)) drop-shadow(0 8px 20px rgba(0,0,0,.5));
    }

    /* TELEPORT / FLY animations (run on sprite so positioning stays stable) */
    @keyframes faceFlyAway{
      0%{ transform: rotate(var(--faceSpin,0deg)) scale(1) translate(0,0); opacity: 1; }
      20%{ transform: rotate(calc(var(--faceSpin,0deg) + 10deg)) scale(1.22) translate(0,-18px); opacity: 1; }
      100%{ transform: rotate(calc(var(--faceSpin,0deg) + 120deg)) scale(0.12) translate(220px,-420px); opacity: 0; }
    }
    @keyframes faceFlyIn{
      0%{ transform: rotate(-90deg) scale(0.12) translate(-220px,-360px); opacity: 0; }
      70%{ transform: rotate(8deg) scale(1.08) translate(0,6px); opacity: 1; }
      100%{ transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
    }

    /* Szybki "zakręt" i zniknięcie przy wyborze gry (wkręcanie na obroty + nagłe zniknięcie) */
    @keyframes faceSpinOut{
      0%{ transform: rotate(var(--faceSpin,0deg)) scale(1) translate(0,0); opacity: 1; filter: blur(0px); }
      55%{ transform: rotate(calc(var(--faceSpin,0deg) + 540deg)) scale(1.02) translate(0,-6px); opacity: 1; filter: blur(0.2px); }
      85%{ transform: rotate(calc(var(--faceSpin,0deg) + 1440deg)) scale(0.90) translate(0,-14px); opacity: 1; filter: blur(0.8px); }
      100%{ transform: rotate(calc(var(--faceSpin,0deg) + 2160deg)) scale(0.02) translate(0,-24px); opacity: 0; filter: blur(2.5px); }
    }

    /* Wjazd do planszy: kierunek obrotu + wyhamowanie */
    @keyframes faceSpinIn{
      0%{ transform: rotate(calc(var(--spinDir,1) * -1440deg)) scale(0.12) translate(calc(var(--spinDir,1) * -360px), -260px); opacity: 0; filter: blur(10px); }
      45%{ transform: rotate(calc(var(--spinDir,1) * -320deg)) scale(1.18) translate(calc(var(--spinDir,1) * -40px), 10px); opacity: 1; filter: blur(2px); }
      72%{ transform: rotate(calc(var(--spinDir,1) * 60deg)) scale(0.98) translate(calc(var(--spinDir,1) * 12px), -4px); opacity: 1; filter: blur(0.6px); }
      100%{ transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; filter: blur(0px); }
    }

    /* "Czarodziejskie cyk" w trakcie tury */
    @keyframes faceZapOut{
      0%{ transform: rotate(var(--faceSpin,0deg)) scale(1); opacity: 1; filter: blur(0px); }
      100%{ transform: rotate(var(--faceSpin,0deg)) scale(0.7); opacity: 0; filter: blur(2px); }
    }
    @keyframes faceZapIn{
      0%{ transform: rotate(var(--faceSpin,0deg)) scale(0.7); opacity: 0; filter: blur(8px); }
      100%{ transform: rotate(var(--faceSpin,0deg)) scale(1); opacity: 1; filter: blur(0px); }
    }

    /* "Duch" – pojawienie się po wejściu do gry */
    @keyframes faceGhostIn{
      0%{ transform: rotate(-240deg) scale(0.18) translate(0,40px); opacity: 0; filter: blur(10px); }
      55%{ transform: rotate(10deg) scale(1.10) translate(0,4px); opacity: 1; filter: blur(2px); }
      100%{ transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; filter: blur(0px); }
    }
    .speakingFaceOverlay.flyAway .faceSprite{
      animation: faceFlyAway 0.65s cubic-bezier(.6,0,.4,1) forwards;
    }
    .speakingFaceOverlay.flyIn .faceSprite{
      animation: faceFlyIn 0.62s cubic-bezier(.2,0,.2,1) forwards;
    }

    .speakingFaceOverlay.spinOut .faceSprite{
      animation: faceSpinOut 0.42s cubic-bezier(.15,0,.7,1) forwards;
    }
    .speakingFaceOverlay.spinIn .faceSprite{
      animation: faceSpinIn 0.72s cubic-bezier(.12,.88,.18,1) forwards;
    }
    .speakingFaceOverlay.zapOut .faceSprite{
      animation: faceZapOut 0.12s ease-out forwards;
    }
    .speakingFaceOverlay.zapIn .faceSprite{
      animation: faceZapIn 0.18s ease-out forwards;
    }
    .speakingFaceOverlay.ghostIn .faceSprite{
      animation: faceGhostIn 0.68s cubic-bezier(.2,0,.2,1) forwards;
    }

    /* "Czar" przed zmniejszeniem/powiększeniem */
    @keyframes spellAura{
      0%{ opacity: 0; transform: scale(0.65); }
      40%{ opacity: .65; transform: scale(1.05); }
      100%{ opacity: 0; transform: scale(1.45); }
    }
    .speakingFaceOverlay.spellCast::before{
      content: '';
      position: absolute;
      inset: -22%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,.85), rgba(180,120,255,.35) 40%, rgba(0,0,0,0) 70%);
      filter: blur(10px);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      animation: spellAura 0.45s ease-out 1;
    }

    /* szybkie "magiczne cyk" przy znikaniu/pojawieniu siÄ™ w trakcie tury */
    .speakingFaceOverlay.zapOut::before,
    .speakingFaceOverlay.zapIn::before{
      content: '';
      position: absolute;
      inset: -18%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,.85), rgba(180,120,255,.35) 40%, rgba(0,0,0,0) 70%);
      filter: blur(12px);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      animation: spellAura 0.25s ease-out 1;
    }

    /* pulsowanie twarzy gdy mĂłwi */
    @keyframes faceGlow{
      0%,100%{ filter: drop-shadow(0 0 18px rgba(180,120,255,.3)) drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
      50%{ filter: drop-shadow(0 0 30px rgba(180,120,255,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
    }
    .speakingFaceOverlay.speaking svg.faceChar{
      animation: faceGlow 1.2s ease-in-out infinite;
    }

    /* Hand wave animation (idle) */
    @keyframes handWaveLeft{
      0%,100%{ transform: rotate(-5deg); }
      25%{ transform: rotate(12deg); }
      50%{ transform: rotate(-8deg); }
      75%{ transform: rotate(10deg); }
    }
    @keyframes handWaveRight{
      0%,100%{ transform: rotate(5deg); }
      25%{ transform: rotate(-12deg); }
      50%{ transform: rotate(8deg); }
      75%{ transform: rotate(-10deg); }
    }

    /* Spell hands (one-shot) */
    @keyframes spellHandsL{
      0%{ transform: rotate(-6deg) translateY(0); }
      30%{ transform: rotate(18deg) translateY(-5px); }
      60%{ transform: rotate(-14deg) translateY(2px); }
      100%{ transform: rotate(8deg) translateY(0); }
    }
    @keyframes spellHandsR{
      0%{ transform: rotate(6deg) translateY(0); }
      30%{ transform: rotate(-18deg) translateY(-5px); }
      60%{ transform: rotate(14deg) translateY(2px); }
      100%{ transform: rotate(-8deg) translateY(0); }
    }

    .face-hand-left{
      transform-origin: 10px 155px;
      animation: handWaveLeft 2s ease-in-out infinite;
    }
    .face-hand-right{
      transform-origin: 190px 155px;
      animation: handWaveRight 2s ease-in-out infinite;
      animation-delay: 0.4s;
    }

    /* szybciej gdy mĂłwi */
    .speakingFaceOverlay.speaking .face-hand-left{ animation-duration: 0.5s; }
    .speakingFaceOverlay.speaking .face-hand-right{ animation-duration: 0.5s; }

    /* czar: zamiana animacji na jednorazowe machnięcie */
    .speakingFaceOverlay.spellCast .face-hand-left{ animation: spellHandsL .42s ease-in-out 1; }
    .speakingFaceOverlay.spellCast .face-hand-right{ animation: spellHandsR .42s ease-in-out 1; }

    /* mruganie oczu sterowane z JS (zawsze synchroniczne) */
    .faceChar .face-eye{ transform-origin: center; }
    .faceChar .face-blush{ opacity: 0.5; transition: opacity .3s; }
    .speakingFaceOverlay.speaking .faceChar .face-blush{ opacity: 0.75; }

    /* Dymek - HIDDEN */
    .speakBubble{ display: none !important; }

    /* Webcam toggle button */
    .webcamToggle{
      position: fixed;
      bottom: 14px;
      left: 14px;
      z-index: 2900;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.2);
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(8px);
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .webcamToggle:hover{ background: rgba(100,80,200,.5); border-color: rgba(180,120,255,.5); }
    .webcamToggle.active{ background: rgba(80,200,120,.4); border-color: rgba(80,200,120,.6); }

    /* (Wyłączone) – usuwamy sterowanie/rysowanie wzrokiem */
    .webcamToggle{ display:none !important; }

    /* Reveal układ: stos SVG na całą planszę + komunikat pośrodku */
    .svgStage.reveal{ padding: 0; }
    .svgStage.reveal .revealStack{ position: absolute; inset: 0; max-height: none; }

    /*
      Zwierzęta: IKONY JEDNEGO ROZMIARU
      - SVG/IMG i emoji mają tę samą "ramkę" wielkości (px, responsywnie)
      - bez indywidualnych scale dla pojedynczych zwierzÄ…t
    */
    /* Ikony + kafelki lekko mniejsze */
    .itemsGrid.animals{ --animalIconPx: clamp(28px, 4.0vw, 42px); }

    .itemsGrid.animals .itemBtn .btnContent{
      font-size: 0;
      line-height: 0;
    }
    .itemsGrid.animals .itemBtn svg,
    .itemsGrid.animals .itemBtn img{
      width: var(--animalIconPx);
      height: var(--animalIconPx);
      object-fit: contain;
      filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    }
    .itemsGrid.animals .itemBtn .emojiIcon{
      display: block;
      font-size: var(--animalIconPx);
      line-height: 1;
      transform: translateY(1px);
      filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    }

    /* ===== WAVE SWEEP ANIMATION ===== */
    @keyframes tileSweepGlow{
      0%{ box-shadow: 0 0 0 0 transparent; }
      15%{ box-shadow: 0 0 28px 6px var(--tile-glow, rgba(255,200,100,.6)), inset 0 0 18px 2px var(--tile-glow-inner, rgba(255,255,255,.25)); }
      50%{ box-shadow: 0 0 14px 2px var(--tile-glow, rgba(255,200,100,.35)), inset 0 0 8px 1px var(--tile-glow-inner, rgba(255,255,255,.1)); }
      100%{ box-shadow: none; }
    }
    @keyframes tileSweepFlash{
      0%{ opacity:0; }
      15%{ opacity:.55; }
      50%{ opacity:.2; }
      100%{ opacity:0; }
    }
    .itemsGrid.waveSweep .itemBtn{
      animation: tileSweepGlow .65s ease calc(var(--sweep-delay, 0) * 1s) both;
    }
    .itemsGrid.waveSweep .itemBtn::after{
      background: linear-gradient(180deg, var(--tile-glow, rgba(255,200,100,.4)), transparent 70%);
      animation: tileSweepFlash .65s ease calc(var(--sweep-delay, 0) * 1s) both;
    }

    /* ===== ANIMAL ICON SOUND BOUNCE ===== */
    @keyframes iconSoundBounce{
      0%{ transform: scale(0) rotate(-15deg); opacity:0; }
      25%{ transform: scale(1.15) rotate(5deg); opacity:1; }
      40%{ transform: scale(.93) rotate(-3deg); }
      55%{ transform: scale(1.06) rotate(2deg); }
      68%{ transform: scale(.97) rotate(-1deg); }
      80%{ transform: scale(1.02) rotate(0deg); }
      100%{ transform: scale(1) rotate(0deg); opacity:1; }
    }
    @keyframes iconSoundPulse{
      0%, 100%{ transform: scale(1); }
      50%{ transform: scale(1.06); }
    }
    .svgStage.iconBounceIn > *{
      animation: iconSoundBounce .5s cubic-bezier(.34,1.56,.64,1) both;
    }
    .svgStage.iconPulse > *{
      animation: iconSoundPulse .35s ease-in-out infinite;
    }

    .itemsGrid{
      display: grid;
      gap: 6px;
      max-width: 408px;
      width: 100%;
      margin-bottom: 12px;
    }
    .itemsGrid.numbers{ grid-template-columns: repeat(5, 1fr); }
    .itemsGrid.letters{ grid-template-columns: repeat(6, 1fr); }
    .itemsGrid.animals{ grid-template-columns: repeat(4, 1fr); }
    .itemsGrid.animals{ max-width: 560px; }

        .itemBtn{
      aspect-ratio: 1;
      border: none;
      border-radius: 12px;
      font-size: clamp(16px, 4.5vw, 24px);
      font-weight: 800;
      cursor: pointer;
      transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
      color: #fff;
      text-shadow: 0 2px 5px rgba(0,0,0,.4);
      display: grid;
      place-items: center;
      isolation: isolate;
    }
        .itemBtn::before{
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    /* Mruganie tylko tła kafelka (ikona zostaje stała) */
    .itemBtn::after{
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.06));
      opacity: 0;
      pointer-events: none;
      z-index: 1;
    }
    .itemBtn .btnContent{
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .itemsGrid.numbers .itemBtn:nth-child(1){ background: linear-gradient(135deg, #ff6b6b, #ee5a5a); }
    .itemsGrid.numbers .itemBtn:nth-child(2){ background: linear-gradient(135deg, #ffa94d, #ff922b); }
    .itemsGrid.numbers .itemBtn:nth-child(3){ background: linear-gradient(135deg, #ffd43b, #fab005); }
    .itemsGrid.numbers .itemBtn:nth-child(4){ background: linear-gradient(135deg, #69db7c, #51cf66); }
    .itemsGrid.numbers .itemBtn:nth-child(5){ background: linear-gradient(135deg, #4dabf7, #339af0); }
    .itemsGrid.numbers .itemBtn:nth-child(6){ background: linear-gradient(135deg, #9775fa, #845ef7); }
    .itemsGrid.numbers .itemBtn:nth-child(7){ background: linear-gradient(135deg, #f783ac, #e64980); }
    .itemsGrid.numbers .itemBtn:nth-child(8){ background: linear-gradient(135deg, #63e6be, #38d9a9); }
    .itemsGrid.numbers .itemBtn:nth-child(9){ background: linear-gradient(135deg, #748ffc, #5c7cfa); }
    .itemsGrid.numbers .itemBtn:nth-child(10){ background: linear-gradient(135deg, #da77f2, #be4bdb); }

    .itemsGrid.letters .itemBtn{ background: linear-gradient(135deg, hsl(calc(var(--i) * 15), 70%, 50%), hsl(calc(var(--i) * 15 + 20), 65%, 40%)); }

    .itemsGrid.animals .itemBtn{
      font-size: clamp(22px, 6.6vw, 34px);
      background: linear-gradient(135deg, hsl(calc(var(--i) * 30), 60%, 45%), hsl(calc(var(--i) * 30 + 30), 55%, 35%));
    }

    /* (zostawione tylko tło + ogólne style, a rozmiar ikon kontroluje --animalIconPx powyżej) */

    .itemBtn:hover{ transform: scale(1.06); box-shadow: 0 5px 20px rgba(0,0,0,.3); }
    .itemBtn:active{ transform: scale(0.95); }
        .itemBtn.correct{
      animation: correctPop .5s ease;
      outline: 4px solid rgba(90,255,160,.95);
      outline-offset: -4px;
      box-shadow: 0 0 0 2px rgba(0,0,0,.22), 0 0 18px rgba(90,255,160,.45);
    }
    @keyframes correctPop{ 0%{ transform: scale(1); } 30%{ transform: scale(1.2); } 100%{ transform: scale(1); } }
        .itemBtn.wrong{
      animation: wrongShake .4s ease;
      outline: 4px solid rgba(255,90,90,.95);
      outline-offset: -4px;
      box-shadow: 0 0 0 2px rgba(0,0,0,.22), 0 0 18px rgba(255,80,90,.35);
    }
    @keyframes wrongShake{ 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-6px); } 40%{ transform: translateX(6px); } 60%{ transform: translateX(-4px); } 80%{ transform: translateX(4px); } }

    /* ===== ALFABET: PIANO MELODY HIGHLIGHT ===== */
    @keyframes melodyPulse{
      0%{ transform: scale(1); }
      45%{ transform: scale(1.12); }
      100%{ transform: scale(1); }
    }
    .itemBtn.melodyNote{
      animation: melodyPulse .36s ease;
      outline: 4px solid rgba(255,255,255,.95);
      outline-offset: -4px;
      box-shadow: 0 0 0 2px rgba(0,0,0,.22), 0 0 18px rgba(255,255,255,.35);
    }
    .itemBtn.melodyNote::after{
      opacity: .45;
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08));
    }

    .itemBtn.hint{ box-shadow: 0 0 20px rgba(255,255,255,.5), 0 0 40px rgba(255,255,255,.3); }
.itemBtn.hint .btnContent > svg,
.itemBtn.hint .btnContent > img,
.itemBtn.hint .btnContent > .emojiIcon{ animation: iconHintBounce var(--blinkDur) ease-in-out infinite; }
@keyframes iconHintBounce{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
.itemBtn.hint::after{
 animation: bgBlink var(--blinkDur) steps(1,end) infinite; }
    @keyframes hintBounce{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.1); } }

    .gameControls{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }

    /* Alfabet: strzałka cofania przeniesiona do dolnego panelu przycisków */
    .gameBtn.alphaBack{
      padding: 10px 14px; /* węższy niż standardowy gameBtn */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      min-width: 46px;
    }
    .gameBtn.alphaBack .ctrlIcon{
      width: 18px;
      height: 18px;
    }

    /* Ikonki (Kategorie): duĹĽe przyciski bez napisĂłw */
    .gameBtn.iconBtn{
      padding: 0;
      width: 56px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 22px;
      line-height: 1;
    }

    /* Control SVG icons */
    .ctrlIcon{
      width: 28px;
      height: 28px;
      display: block;
      pointer-events: none;
      user-select: none;
    }
    .scoreBackPill .ctrlIcon{ width: 18px; height: 18px; }
    .gameHeaderBack .ctrlIcon{ width: 22px; height: 22px; }
    .gameBtn.iconBtn:hover{ transform: translateY(-2px) scale(1.03); }
    .gameBtn.iconBtn:active{ transform: translateY(0) scale(.96); }

    /* Kolorowe ikony (Kategorie) – intuicyjny panel dla dzieci */
    .gameBtn.iconBtn.btnPlay{
      background: linear-gradient(135deg, rgba(60,220,120,.95), rgba(30,160,90,.9));
      border: none;
      box-shadow: 0 8px 22px rgba(30,160,90,.28);
    }
    .gameBtn.iconBtn.btnRepeat{
      background: linear-gradient(135deg, rgba(80,170,255,.95), rgba(45,110,255,.9));
      border: none;
      box-shadow: 0 8px 22px rgba(45,110,255,.25);
    }
    .gameBtn.iconBtn.btnRepeat.isOff{
      background: linear-gradient(135deg, rgba(90,100,120,.95), rgba(55,65,85,.92));
      box-shadow: 0 8px 22px rgba(25,30,45,.26);
    }
    .gameBtn.iconBtn.btnReset{
      background: linear-gradient(135deg, rgba(255,190,70,.95), rgba(235,120,30,.9));
      border: none;
      box-shadow: 0 8px 22px rgba(235,120,30,.25);
    }
    .gameBtn.iconBtn.btnCat,
    .scorePill.scoreBackPill.btnBack{
      background: linear-gradient(135deg, rgba(80,170,255,.95), rgba(45,110,255,.9));
      border: none;
      box-shadow: 0 8px 22px rgba(45,110,255,.22);
    }
    .gameBtn.iconBtn.btnCat:hover,
    .scorePill.scoreBackPill.btnBack:hover{
      background: linear-gradient(135deg, rgba(100,185,255,.98), rgba(55,125,255,.92));
    }
    .gameBtn.catLabel .catIcon{ font-size: 20px; line-height: 1; }
    .gameBtn.catLabel .catText{ font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; }
    
    /* Kategorie: nawigacja strzałkami w jednej linii z przyciskami */
    .gameControls .categoryNav{
      /* zawsze: strzałka lewo | etykieta | strzałka prawo (bez „skakania”) */
      display: grid;
      grid-template-columns: 56px 220px 56px;
      align-items: center;
      justify-items: center;
      gap: 7px;
      flex: 0 0 auto;
    }
    .gameBtn.catArrow{ width: 56px; height: 52px; font-size: 26px; }
    .gameBtn.catLabel{
      width: 220px;
      height: 52px;
      padding: 0 14px;
      font-weight: 900;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.gameBtn{
      padding: 10px 20px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s ease;
    }
    .gameBtn:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px); }
    .gameBtn.primary{
      background: linear-gradient(135deg, rgba(255,140,50,.8), rgba(255,80,120,.7));
      border: none;
      box-shadow: 0 5px 18px rgba(255,100,80,.35);
    }
    .gameBtn.primary.alfabet{ background: linear-gradient(135deg, rgba(50,200,150,.8), rgba(80,150,255,.7)); box-shadow: 0 5px 18px rgba(50,200,150,.35); }
    .gameBtn.primary.zwierzeta{ background: linear-gradient(135deg, rgba(255,200,50,.8), rgba(200,255,80,.7)); box-shadow: 0 5px 18px rgba(200,180,50,.35); }

    /* Celebration */
    .celebrationOverlay{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    .celebrationOverlay.show{ opacity: 1; pointer-events: auto; }
    .celebrationEmoji{ font-size: 60px; animation: celebBounce 1s ease infinite; }
    @keyframes celebBounce{ 0%,100%{ transform: scale(1) rotate(-5deg); } 50%{ transform: scale(1.15) rotate(5deg); } }
    .celebrationText{
      font-size: 22px;
      font-weight: 800;
      margin-top: 12px;
      background: linear-gradient(135deg, #ffd43b, #ff6b6b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
    }

    /* Hide celebration overlay for animals game */
    #animalCelebration{
      display: none !important;
    }

    .categoryCompleteOverlay{
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(6, 7, 18, .72);
      backdrop-filter: blur(10px);
      z-index: 3300;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
    .categoryCompleteOverlay.show{
      opacity: 1;
      pointer-events: auto;
    }
    .categoryCompleteCard{
      width: min(92vw, 520px);
      border-radius: 28px;
      padding: 26px 22px 20px;
      background: linear-gradient(180deg, rgba(32,40,88,.96), rgba(18,22,48,.96));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 24px 60px rgba(0,0,0,.42);
      text-align: center;
      color: #fff;
    }
    .categoryCompleteEmoji{
      font-size: clamp(40px, 12vw, 60px);
      margin-bottom: 8px;
    }
    .categoryCompleteTitle{
      font-size: clamp(24px, 6vw, 34px);
      font-weight: 900;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #fff, rgba(255,220,100,.95));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .categoryCompleteText{
      font-size: clamp(15px, 3.8vw, 18px);
      line-height: 1.45;
      color: rgba(255,255,255,.92);
      margin-bottom: 18px;
    }
    .categoryCompleteActions{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
      gap: 10px;
      align-items: stretch;
    }
    .categoryCompleteReplayBtn,
    .categoryCompleteNextBtn{
      min-height: 52px;
      border-radius: 18px;
      font-size: 15px;
      font-weight: 800;
    }
    .categoryCompleteMenuBtn{
      width: 56px;
      height: 52px;
      border-radius: 18px;
      justify-self: center;
    }
    @media (max-width: 560px){
      .categoryCompleteCard{ padding: 22px 16px 16px; }
      .categoryCompleteActions{
        grid-template-columns: 1fr;
      }
      .categoryCompleteMenuBtn{
        width: 100%;
      }
    }
      position: fixed;
      width: 8px; height: 8px;
      background: var(--color);
      top: -10px;
      animation: confettiFall var(--duration) linear forwards;
      z-index: 1001;
      pointer-events: none;
    }
    @keyframes confettiFall{ 0%{ transform: translateY(0) rotate(0); opacity: 1; } 100%{ transform: translateY(100vh) rotate(720deg); opacity: 0; } }

    /* ========== KOLOROWANKI ========== */
    /* ========== KOLOROWANKI – Cosmic Mobile Panel ========== */
    .coloringPage{
      /* Kolorowanki: kontur ma startować od samej góry ekranu */
      padding: env(safe-area-inset-top, 0px) 10px max(10px, env(safe-area-inset-bottom, 0px));
      max-width: 920px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0; /* pozwól flex-child (ramce) się kurczyć */
      box-sizing: border-box;
      gap: 0;
      /* Przesuń cały układ kolorowanki (górny pasek + ramka + HUD) wyżej */
      transform: none;
    }

    /* Dropdown wyboru: w oknie konturowym, na górze pośrodku */
    .coloringTopOverlay{
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 8;
      pointer-events: none; /* nie blokuj rysowania poza selectem */
      width: min(420px, 92%);
      display: flex;
      justify-content: center;
    }

    .coloringNativeSelectHidden{
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
      overflow: hidden !important;
      clip-path: inset(50%) !important;
    }
    .coloringCustomDropdown{
      pointer-events: auto;
      width: 100%;
      max-width: 420px;
      position: relative;
      font-family: inherit;
    }
    .coloringDropdownTrigger{
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 44px 0 16px;
      position: relative;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, rgba(18,7,44,.96) 0%, rgba(8,3,24,.96) 100%);
      color: #fff;
      box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(195,112,255,.12), 0 0 24px rgba(145,73,255,.18);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .18s ease, border-radius .18s ease;
    }
    .coloringCustomDropdown.is-open .coloringDropdownTrigger{
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(195,112,255,.18), 0 0 30px rgba(145,73,255,.24);
    }
    .coloringDropdownTriggerMain{
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex: 0 1 auto;
      width: auto;
      margin: 0 auto;
      text-align: center;
    }
    .coloringDropdownTriggerIcon{
      width: 24px;
      height: 24px;
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
      flex: 0 0 24px;
    }
    .coloringDropdownTriggerLabel{
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      text-shadow: 0 2px 8px rgba(0,0,0,.36);
    }
    .coloringDropdownTriggerBadge{ display: none !important; }
    .coloringDropdownTriggerCaret{
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      transition: transform .18s ease;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
    }
    .coloringCustomDropdown.is-open .coloringDropdownTriggerCaret{ transform: translateY(-50%) rotate(180deg); }
    .coloringDropdownMenu{
      display: none;
      position: absolute;
      top: calc(100% - 6px);
      left: 0;
      right: 0;
      padding: 10px 10px 12px;
      border: 1px solid rgba(255,255,255,.14);
      border-top: none;
      border-radius: 0 0 22px 22px;
      background: linear-gradient(180deg, rgba(22,9,55,.98) 0%, rgba(15,6,39,.98) 100%);
      box-shadow: 0 22px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05), 0 0 24px rgba(145,73,255,.22);
      z-index: 30;
      overflow: hidden;
    }
    .coloringCustomDropdown.is-open .coloringDropdownMenu{ display: block; }
    .coloringDropdownList{
      max-height: min(58vh, 480px);
      overflow: auto;
      padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: #ae7cff rgba(255,255,255,.08);
    }
    .coloringDropdownList::-webkit-scrollbar{ width: 12px; }
    .coloringDropdownList::-webkit-scrollbar-track{
      background: rgba(255,255,255,.06);
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .coloringDropdownList::-webkit-scrollbar-thumb{
      border-radius: 999px;
      background: linear-gradient(180deg, #c18dff 0%, #8b5cf6 55%, #4cc9f0 100%);
      border: 2px solid rgba(15,6,39,.96);
      box-shadow: 0 0 12px rgba(126,92,246,.45);
    }
    .coloringDropdownSection + .coloringDropdownSection{ margin-top: 10px; }
    .coloringDropdownSection{
      --cat-title-a: rgba(255,255,255,.16);
      --cat-title-b: rgba(255,255,255,.08);
      --cat-title-border: rgba(255,255,255,.08);
      --cat-item-a: rgba(255,255,255,.07);
      --cat-item-b: rgba(255,255,255,.035);
      --cat-item-border: rgba(255,255,255,.07);
      --cat-hover-a: rgba(150,90,255,.22);
      --cat-hover-b: rgba(95,51,205,.16);
      --cat-hover-border: rgba(182,124,255,.34);
      --cat-active-a: rgba(80,156,255,.78);
      --cat-active-b: rgba(43,110,215,.9);
      --cat-active-border: rgba(179,222,255,.48);
      --cat-active-shadow: rgba(17,64,154,.34);
    }
    .coloringDropdownSectionTitle{
      position: sticky;
      top: 0;
      z-index: 1;
      padding: 9px 12px;
      margin-bottom: 8px;
      border-radius: 14px;
      background: linear-gradient(180deg, var(--cat-title-a), var(--cat-title-b));
      color: #f8f3ff;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .02em;
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--cat-title-border);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .coloringDropdownItem{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      margin: 0 0 6px;
      border: 1px solid var(--cat-item-border);
      border-radius: 14px;
      background: linear-gradient(180deg, var(--cat-item-a), var(--cat-item-b));
      color: #fff;
      cursor: pointer;
      text-align: left;
      transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .coloringDropdownItem:hover{
      transform: translateY(-1px);
      background: linear-gradient(180deg, var(--cat-hover-a), var(--cat-hover-b));
      border-color: var(--cat-hover-border);
      box-shadow: 0 10px 18px rgba(0,0,0,.26), 0 0 18px rgba(146,81,255,.18);
    }
    .coloringDropdownItem.is-active{
      background: linear-gradient(180deg, var(--cat-active-a), var(--cat-active-b));
      border-color: var(--cat-active-border);
      box-shadow: 0 10px 24px var(--cat-active-shadow), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .coloringDropdownIcon{
      width: 26px;
      height: 26px;
      object-fit: contain;
      flex: 0 0 26px;
      filter: drop-shadow(0 2px 5px rgba(0,0,0,.28));
    }
    .coloringDropdownLabel{
      font-size: 15px;
      font-weight: 800;
      line-height: 1.15;
    }

    .coloringDropdownSection.is-animals,
    .coloringDropdownTrigger[data-category="animals"]{
      --cat-title-a: rgba(92, 151, 255, .30);
      --cat-title-b: rgba(54, 95, 196, .16);
      --cat-title-border: rgba(127, 180, 255, .18);
      --cat-item-a: rgba(83, 124, 255, .16);
      --cat-item-b: rgba(40, 62, 126, .10);
      --cat-item-border: rgba(120, 160, 255, .16);
      --cat-hover-a: rgba(92, 151, 255, .34);
      --cat-hover-b: rgba(49, 88, 194, .22);
      --cat-hover-border: rgba(138, 185, 255, .34);
      --cat-active-a: rgba(88, 166, 255, .86);
      --cat-active-b: rgba(35, 105, 216, .92);
      --cat-active-border: rgba(186, 222, 255, .56);
      --cat-active-shadow: rgba(16, 61, 150, .34);
    }
    .coloringDropdownSection.is-fruits,
    .coloringDropdownTrigger[data-category="fruits"]{
      --cat-title-a: rgba(255, 120, 148, .28);
      --cat-title-b: rgba(190, 58, 92, .16);
      --cat-title-border: rgba(255, 170, 190, .18);
      --cat-item-a: rgba(255, 108, 138, .16);
      --cat-item-b: rgba(124, 37, 60, .10);
      --cat-item-border: rgba(255, 146, 170, .16);
      --cat-hover-a: rgba(255, 122, 152, .34);
      --cat-hover-b: rgba(198, 60, 101, .22);
      --cat-hover-border: rgba(255, 170, 194, .34);
      --cat-active-a: rgba(255, 126, 144, .90);
      --cat-active-b: rgba(221, 65, 98, .92);
      --cat-active-border: rgba(255, 208, 216, .58);
      --cat-active-shadow: rgba(149, 30, 61, .34);
    }
    .coloringDropdownSection.is-vegetables,
    .coloringDropdownTrigger[data-category="vegetables"]{
      --cat-title-a: rgba(75, 211, 132, .28);
      --cat-title-b: rgba(22, 120, 67, .16);
      --cat-title-border: rgba(133, 240, 173, .18);
      --cat-item-a: rgba(66, 203, 124, .16);
      --cat-item-b: rgba(21, 92, 56, .10);
      --cat-item-border: rgba(113, 234, 158, .16);
      --cat-hover-a: rgba(75, 214, 134, .34);
      --cat-hover-b: rgba(27, 133, 78, .22);
      --cat-hover-border: rgba(143, 242, 182, .34);
      --cat-active-a: rgba(66, 218, 132, .88);
      --cat-active-b: rgba(28, 169, 96, .92);
      --cat-active-border: rgba(198, 255, 220, .56);
      --cat-active-shadow: rgba(13, 109, 56, .34);
    }
    .coloringDropdownSection.is-transport,
    .coloringDropdownTrigger[data-category="transport"]{
      --cat-title-a: rgba(88, 198, 255, .28);
      --cat-title-b: rgba(27, 108, 170, .16);
      --cat-title-border: rgba(140, 220, 255, .18);
      --cat-item-a: rgba(87, 197, 255, .16);
      --cat-item-b: rgba(21, 77, 122, .10);
      --cat-item-border: rgba(130, 216, 255, .16);
      --cat-hover-a: rgba(96, 203, 255, .34);
      --cat-hover-b: rgba(30, 123, 192, .22);
      --cat-hover-border: rgba(159, 226, 255, .34);
      --cat-active-a: rgba(102, 208, 255, .88);
      --cat-active-b: rgba(30, 154, 225, .92);
      --cat-active-border: rgba(199, 241, 255, .56);
      --cat-active-shadow: rgba(15, 85, 135, .34);
    }
    .coloringDropdownSection.is-water,
    .coloringDropdownTrigger[data-category="water"]{
      --cat-title-a: rgba(106, 127, 255, .28);
      --cat-title-b: rgba(48, 56, 170, .16);
      --cat-title-border: rgba(156, 173, 255, .18);
      --cat-item-a: rgba(103, 122, 255, .16);
      --cat-item-b: rgba(38, 45, 122, .10);
      --cat-item-border: rgba(148, 164, 255, .16);
      --cat-hover-a: rgba(112, 132, 255, .34);
      --cat-hover-b: rgba(58, 73, 201, .22);
      --cat-hover-border: rgba(170, 183, 255, .34);
      --cat-active-a: rgba(120, 146, 255, .88);
      --cat-active-b: rgba(70, 97, 233, .92);
      --cat-active-border: rgba(209, 218, 255, .56);
      --cat-active-shadow: rgba(33, 44, 142, .34);
    }
    @media (max-width: 768px){
      .coloringDropdownTrigger{ min-height: 44px; padding: 0 40px 0 14px; border-radius: 18px; }
      .coloringCustomDropdown.is-open .coloringDropdownTrigger{ border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
      .coloringDropdownTriggerBadge{ display: none; }
      .coloringDropdownMenu{ top: calc(100% - 4px); padding: 8px 8px 10px; border-radius: 0 0 18px 18px; }
      .coloringDropdownList{ max-height: min(52vh, 420px); }
      .coloringDropdownItem{ padding: 9px 10px; border-radius: 12px; }
      .coloringDropdownLabel{ font-size: 14px; }
    }
    .coloringTopOverlay select{
      pointer-events: auto;
      height: 44px;
      width: 100%;
      max-width: 420px;
      padding: 0 56px 0 16px;
      background: rgba(0,0,0,.52);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 18px rgba(150,90,255,.16);
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('../img/ui/down.svg');
      background-repeat: no-repeat;
      background-position: right 18px center;
      background-size: 16px 16px;
      text-align: center;
      text-shadow: 0 2px 10px rgba(0,0,0,.35);
    }
    .coloringTopOverlay select option{
      background: #1a0a3e;
      color: #fff;
    }



    /* Animal select bar */
    .coloring-animal-bar{
      --barH: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-shrink: 0;
      /* PodnieĹ› 3 przyciski (lewo + select + prawo) nad konturem */
      transform: translateY(-20px);
    }

    .coloringBackBtn{
      width: var(--barH);
      height: var(--barH);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #3a1c71, #5b2d8e);
      border: 2px solid rgba(180,130,255,.5);
      border-radius: 14px;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(90,40,180,.35);
      transition: transform .12s ease, filter .12s ease;
    }
    .coloringBackBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .coloringBackBtn:active{ transform: translateY(0px) scale(.98); }
    .coloringBackBtn .ctrlIcon{ width: 22px; height: 22px; }

    /* Strzałki zmiany kolorowanki (lewo/prawo) – taki sam rozmiar jak select/back */
    .coloringNavBtn{
      width: var(--barH);
      height: var(--barH);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #3a1c71, #5b2d8e);
      border: 2px solid rgba(180,130,255,.5);
      border-radius: 14px;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(90,40,180,.35);
      transition: transform .12s ease, filter .12s ease;
    }
    .coloringNavBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .coloringNavBtn:active{ transform: translateY(0px) scale(.98); }
    .coloringNavBtn .ctrlIcon{ width: 22px; height: 22px; }

    .coloring-animal-bar select{
      height: var(--barH);
      /* 30% węższe tło (select) */
      padding: 0 12px;
      background: linear-gradient(135deg, #3a1c71, #5b2d8e);
      border: 2px solid rgba(180,130,255,.5);
      border-radius: 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      min-width: 140px;
      box-shadow: 0 2px 12px rgba(90,40,180,.4);
      text-align: center;
    }
    .coloring-animal-bar select option{
      background: #1a0a3e;
      color: #fff;
    }

    /* Canvas frame – glow border like the screenshot */
    .coloring-canvas-frame{
      flex: 1 1 0;
      min-height: 180px;
      display: flex;
      justify-content: stretch;
      align-items: stretch;
      background: linear-gradient(145deg,
        rgba(0,180,255,.5),
        rgba(180,50,255,.5),
        rgba(255,50,120,.5),
        rgba(255,180,50,.4),
        rgba(0,180,255,.5)
      );
      background-size: 300% 300%;
      animation: glowBorderShift 6s ease infinite;
      border-radius: 22px;
      padding: 4px;
      /* Bez "mgiełki" (blur) na obrysie – ostrzejsza ramka */
      box-shadow:
        0 10px 26px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.08);
      overflow: hidden;
      transform: none;
      position: relative;
    }
    @keyframes glowBorderShift{
      0%,100%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
    }
    .coloring-canvas-frame canvas{
      display: block;
      background: #0a0418;
      border-radius: 18px;
      width: 100%;
      height: 100%;
      cursor: url('../img/brush-cursor.png') 32 3, crosshair;
      touch-action: none;
      object-fit: contain;
    }

    /* ---- Bottom panel ---- */
    .coloring-bottom-panel{
      /* HUD w środku ramki (overlay) */
      position: absolute;
      left: 10px;
      right: 10px;
      /* bardziej "zbity" panel (mniej pustych przestrzeni) */
      max-width: 920px;
      margin: 0 auto;
      /* lekko niĹĽej */
      bottom: calc(6px + env(safe-area-inset-bottom, 0px));
      z-index: 5;
      background: linear-gradient(180deg, #3a1670 0%, #2a0e55 100%);
      border-radius: 18px;
      /* bardziej kompaktowo */
      /* +4px od góry (większy odstęp od bordera tła) */
      /* Dół ma mieć taki sam odstęp od obramowania jak góra (kolory) */
      padding: 12px 10px 12px;
      box-shadow:
        0 -2px 20px rgba(80,20,200,.35),
        inset 0 1px 0 rgba(255,255,255,.12);
      border: 1.5px solid rgba(160,100,255,.35);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* 30% węższe tło panelu kolorów (desktop/większe ekrany) */
    @media (min-width: 700px){
      .coloring-bottom-panel{ left: 15%; right: 15%; }
    }
    .coloring-panel-row{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    /* Tools row: Podpowiedź obok palety (2 rzędy po 6) – zawsze centrycznie */
    .coloring-tools-row{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      /* kolory + podpowiedź ~4px wyżej względem przycisków akcji */
      margin-bottom: 6px;
    }

    .colorPalette{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
    }

    .colorPalette .palettePrimary,
    .colorPalette .paletteExtra{
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
    }

    /* Split palette: lewa (3x2) + PodpowiedĹş + prawa (3x2) */
    .colorPalette.colorPaletteSplit{
      flex-direction: row;
      gap: 6px;
      /* pozwala „Podpowiedź” rozciągnąć się do wysokości 2 wierszy kolorów */
      align-items: stretch;
    }
    .colorPalette.colorPaletteSplit .palettePrimary,
    .colorPalette.colorPaletteSplit .paletteExtra{
      display: grid;
      /* 2 wiersze Ă— 3 kolumny = 6 kolorĂłw po lewej i po prawej */
      grid-template-columns: repeat(3, auto);
      gap: 6px;
      align-items: center;
      justify-content: center;
      flex-wrap: initial;
    }

    /* Podpowiedź – obramowanie na wysokości 2 wierszy kolorów */
    .colorPalette.colorPaletteSplit #konturBtn{
      /* dopasowanie do 2 rzędów kulek + trochę „oddechu” na obramowanie */
      height: calc(28px * 2 + 6px + 10px);
      padding: 0 16px;
      justify-content: center;
      align-items: center;
      gap: 0;
      min-width: 72px;
      border-width: 3px;
      border-radius: 18px;
    }

    .colorPalette.colorPaletteSplit #konturBtn .coloring-tool-icon{
      /* większa żarówka */
      font-size: 34px;
      line-height: 1;
    }

    /* Bezpiecznik na węższych ekranach: wróć do 3 kolumn, żeby nic nie uciekało */
    @media (max-width: 560px){
      .colorPalette.colorPaletteSplit .palettePrimary,
      .colorPalette.colorPaletteSplit .paletteExtra{
        grid-template-columns: repeat(3, auto);
      }
    }

    /* Na bardzo wąskich ekranach pozwól zawinąć układ (żeby nic nie wychodziło poza panel) */
    @media (max-width: 420px){
      .colorPalette.colorPaletteSplit{ flex-wrap: wrap; justify-content: center; }
      .colorPalette.colorPaletteSplit #konturBtn{ order: -1; }
    }

    /* ---- Tool buttons (Pędzel / Gumka) ---- */
    .coloring-tool-btn{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 10px 4px;
      background: linear-gradient(180deg, #4b2a80 0%, #35196a 100%);
      border: 2px solid rgba(160,110,255,.35);
      border-radius: 14px;
      color: #c9b0ff;
      cursor: pointer;
      transition: all .18s ease;
      min-width: 52px;
      box-shadow: 0 3px 8px rgba(0,0,0,.35);
    }
    .coloring-tool-btn:hover{
      background: linear-gradient(180deg, #5c36a0 0%, #42207e 100%);
      border-color: rgba(200,150,255,.5);
    }
    .coloring-tool-btn.active{
      background: linear-gradient(180deg, #7c4dff 0%, #5e30cc 100%);
      border-color: #a480ff;
      color: #fff;
      box-shadow: 0 0 14px rgba(120,60,255,.5), 0 3px 8px rgba(0,0,0,.35);
    }
    .coloring-tool-icon{ font-size: 20px; line-height: 1; }
    .coloring-tool-label{ font-size: 11px; font-weight: 700; letter-spacing: .02em; }

    /* ---- Color balls ---- */
    .colorBall{
      /* minimalnie mniejsze = mniej wysokości panelu */
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,.15);
      cursor: pointer;
      transition: all .18s ease;
      box-shadow:
        0 3px 8px rgba(0,0,0,.4),
        inset 0 -4px 6px rgba(0,0,0,.2),
        inset 0 4px 6px rgba(255,255,255,.35);
      background: radial-gradient(circle at 35% 30%,
        rgba(255,255,255,.45) 0%,
        var(--ball-color) 45%,
        color-mix(in srgb, var(--ball-color) 70%, #000) 100%
      );
      position: relative;
    }
    .colorBall::after{
      content:'';
      position: absolute;
      top: 4px; left: 6px;
      width: 10px; height: 7px;
      background: rgba(255,255,255,.55);
      border-radius: 50%;
      transform: rotate(-25deg);
    }
    .colorBall:hover{
      transform: scale(1.08);
      border-color: rgba(255,255,255,.45);
    }
    .colorBall.is-white{
      border-color: rgba(120,60,255,.45);
      box-shadow:
        0 3px 8px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(0,0,0,.18),
        inset 0 -4px 6px rgba(0,0,0,.08),
        inset 0 4px 6px rgba(255,255,255,.65);
    }

    .colorBall.active{
      border-color: #fff;
      transform: scale(1.12);
      box-shadow:
        0 0 12px var(--ball-color),
        0 0 24px rgba(255,255,255,.25),
        0 3px 8px rgba(0,0,0,.4),
        inset 0 -4px 6px rgba(0,0,0,.2),
        inset 0 4px 6px rgba(255,255,255,.35);
    }

    /* ---- Brush size slider ---- */
    .coloring-brush-size{
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .brush-dot-small, .brush-dot-big{
      display: block;
      border-radius: 50%;
      background: #b8a0e8;
    }
    .brush-dot-small{ width: 6px; height: 6px; }
    .brush-dot-big{ width: 14px; height: 14px; }

    #brushSizeSlider{
      -webkit-appearance: none;
      appearance: none;
      width: 70px;
      height: 6px;
      background: linear-gradient(90deg, #5e3eb5, #a87cff);
      border-radius: 4px;
      outline: none;
    }
    #brushSizeSlider::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, #d4b8ff, #8c5cff);
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,.4);
      cursor: pointer;
    }

    /* ---- Action buttons row ---- */
    .coloring-actions-row{
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
      align-items: center;
    }
    .coloring-action-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 12px;
      background: linear-gradient(180deg, #4b2a80 0%, #35196a 100%);
      border: 2px solid rgba(160,110,255,.3);
      border-radius: 14px;
      color: #c9b0ff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .18s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,.35);
    }
    .coloring-action-btn:hover{
      background: linear-gradient(180deg, #5c36a0 0%, #42207e 100%);
      border-color: rgba(200,150,255,.5);
      color: #fff;
    }

    /* Przyciski menu na dole – styl jak w "Nauka Kategorii" (kwadraty z ikoną) */
    .coloring-action-btn.menuBtnSquare{
      width: var(--bottomActionH);
      height: var(--bottomActionH);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      /* Bez obramowania – jak w "Nauka Kategorii" (płaskie tło, bez połysku/insetów) */
      border: none;
      color: #fff;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    .coloring-action-btn.menuBtnSquare .menuBtnIconSvg{
      width: calc(var(--bottomActionH) * 0.52);
      height: calc(var(--bottomActionH) * 0.52);
      display: block;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    }

    /* Płaskie kolory (bez gradientu) – jak w "Nauka Kategorii" */
    #undoBtn.menuBtnSquare{ background: #2f80ff; }
    #coloringPrevBtn.menuBtnSquare{ background: #ff9a1a; }
    #coloringNextBtn.menuBtnSquare{ background: #ff9a1a; }
    #restartBtn.menuBtnSquare{ background: #ff9a1a; }
    #coloringHandBtn.menuBtnSquare{ background: #14b8c4; }
    #coloringHandBtn.menuBtnSquare.active{
      background: #23d89f;
      box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 24px rgba(35,216,159,.36);
    }
    #coloringHandBtn.menuBtnSquare .coloringActionEmoji{
      font-size: calc(var(--bottomActionH) * 0.42);
      line-height: 1;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    }

    .coloring-action-btn.menuBtnSquare:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0,0,0,.40);
    }

    
    /* Od nowa (restart) */
    #restartBtn{
      border-color: rgba(255,255,255,.22);
    }
/* Gotowe! green button */
    .coloring-done-btn{
      /* Płaskie tło, bez gradientu/insetów */
      background: #37c41f;
      /* Bez obramowania – jak w "Nauka Kategorii" */
      border: none;
      color: #fff;
      font-size: 16px;
      height: var(--bottomActionH);
      padding: 0 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.3);
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      letter-spacing: .03em;
    }
    .coloring-done-btn:hover{
      background: #41d828;
      color: #fff;
      box-shadow: 0 12px 26px rgba(0,0,0,.40);
    }

    /* ---- Responsive tweaks ---- */
    @media(max-width:420px){
      :root{ --bottomActionH: 36px; }

      /* Mniejszy HUD + przyciski (żeby nie zasłaniało rysunku) */
      .coloring-bottom-panel{ padding: 10px 6px 10px; left: 6px; right: 6px; bottom: 6px; }
      .coloring-tools-row{ margin-bottom: 4px; }
      .colorBall{ width: 24px; height: 24px; }

      /* Podpowiedź (żarówka) – niższa, dopasowana do mniejszych kulek */
      .colorPalette.colorPaletteSplit #konturBtn{
        height: calc(24px * 2 + 6px + 8px);
        padding: 0 12px;
        min-width: 64px;
        border-radius: 16px;
      }
      .colorPalette.colorPaletteSplit #konturBtn .coloring-tool-icon{ font-size: 30px; }

      .coloring-animal-bar{ --barH: 40px; }
      .coloringBackBtn{ border-radius: 12px; }
      .coloringNavBtn{ border-radius: 12px; }
      .coloringBackBtn .ctrlIcon{ width: 20px; height: 20px; }
      .coloringNavBtn .ctrlIcon{ width: 20px; height: 20px; }
      .coloring-tool-btn{ min-width: 48px; padding: 6px 8px 4px; }
      .coloring-tool-icon{ font-size: 18px; }
      .coloring-tool-label{ font-size: 10px; }
      .coloring-actions-row{ flex-wrap: wrap; }
      .colorPalette .palettePrimary, .colorPalette .paletteExtra{ flex-wrap: wrap; }
      .coloring-action-btn{ padding: 8px 10px; font-size: 12px; }
      .coloring-done-btn{ padding: 0 20px; height: var(--bottomActionH); font-size: 15px; }
      #brushSizeSlider{ width: 50px; }
    }

    /* ================================================
       MEMORY GAME STYLES
       ================================================ */
    
    .memoryPage{
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* Równe marginesy góra/dół dla całej sekcji */
      padding: 12px;
      padding-top: calc(32px + env(safe-area-inset-top, 0px));
      padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
      background: linear-gradient(180deg, #0a0520 0%, #1a0a35 100%);
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    .memoryTitle{
      margin-bottom: 2px;
    }

    /* ---- Top stats panel ---- */
    .memory-top-panel{
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
    }
    
    .memory-stat{
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(100,50,200,.3), rgba(50,20,100,.3));
      border: 2px solid rgba(150,100,255,.4);
      border-radius: 12px;
      padding: 6px 12px;
      box-shadow: 
        0 4px 15px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.1);
      backdrop-filter: blur(10px);
      flex-shrink: 0;
    }
    
    .memory-stat-icon{
      font-size: 20px;
      filter: drop-shadow(0 0 8px rgba(255,255,255,.5));
    }
    
    .memory-stat-text{
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    
    .memory-stat-label{
      font-size: 9px;
      color: #b89fff;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .memory-stat-value{
      font-size: 16px;
      color: #fff;
      font-weight: 800;
      text-shadow: 0 0 10px rgba(255,255,255,.5);
    }

    /* ---- Game board container ---- */
    .memory-board-container{
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      overflow: visible;
      min-height: 300px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .memory-board{
      display: grid;
      gap: 10px;
      perspective: 1000px;
      max-width: 100%;
      max-height: 100%;
    }
    
    .memory-board.level-easy{
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    
    .memory-board.level-medium{
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
    
    .memory-board.level-hard{
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }

    /* ---- Memory card ---- */
    .memory-card{
      position: relative;
      width: 100%;
      aspect-ratio: 3/4;
      min-width: 60px;
      max-width: 120px;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    .memory-card.flipped{
      transform: rotateY(180deg);
    }
    
    .memory-card.matched{
      animation: matchPulse 0.6s ease;
      pointer-events: none;
    }
    
    @keyframes matchPulse{
      0%, 100%{ transform: rotateY(180deg) scale(1); }
      50%{ transform: rotateY(180deg) scale(1.1); }
    }
    
    .memory-card.wrong{
      animation: wrongShake 0.5s ease;
    }
    
    @keyframes wrongShake{
      0%, 100%{ transform: rotateY(180deg) translateX(0); }
      25%{ transform: rotateY(180deg) translateX(-8px); }
      75%{ transform: rotateY(180deg) translateX(8px); }
    }

    /* Card faces */
    .memory-card-face{
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 15px rgba(0,0,0,.5);
    }
    
    /* Card back (question mark) */
    .memory-card-back{
      background: linear-gradient(135deg, 
        rgba(100,50,255,.6) 0%, 
        rgba(150,80,255,.6) 50%,
        rgba(100,50,255,.6) 100%
      );
      border: 3px solid rgba(200,150,255,.5);
      box-shadow: 
        0 0 20px rgba(150,100,255,.4),
        0 4px 15px rgba(0,0,0,.5),
        inset 0 0 30px rgba(255,255,255,.1);
    }
    
    .memory-card-back::before{
      content: '?';
      font-size: 48px;
      font-weight: 800;
      color: #fff;
      text-shadow: 
        0 0 20px rgba(255,255,255,.8),
        0 0 40px rgba(200,150,255,.6);
      animation: questionPulse 2s ease-in-out infinite;
    }
    
    @keyframes questionPulse{
      0%, 100%{ transform: scale(1); opacity: 0.9; }
      50%{ transform: scale(1.1); opacity: 1; }
    }
    
    /* Card front (animal) */
    .memory-card-front{
      background: linear-gradient(135deg,
        rgba(255,255,255,.95) 0%,
        rgba(240,240,255,.95) 100%
      );
      border: 3px solid rgba(150,100,255,.6);
      transform: rotateY(180deg);
      box-shadow: 
        0 0 25px rgba(100,200,255,.5),
        0 4px 15px rgba(0,0,0,.5),
        inset 0 0 30px rgba(150,200,255,.2);
    }
    
    .memory-card-animal{
      width: 70%;
      height: 70%;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
    }

    /* Hover effect */
    .memory-card:not(.flipped):not(.matched):hover{
      transform: translateY(-5px) scale(1.05);
    }
    
    .memory-card:not(.flipped):not(.matched):hover .memory-card-back{
      border-color: rgba(255,200,255,.8);
      box-shadow: 
        0 0 30px rgba(200,150,255,.6),
        0 6px 20px rgba(0,0,0,.6),
        inset 0 0 40px rgba(255,255,255,.15);
    }

    /* ---- Bottom control panel ---- */
    .memory-bottom-panel{
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: var(--memory-controls-width, 100%);
      max-width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      background: linear-gradient(180deg, #3a1670 0%, #2a0e55 100%);
      border-radius: 16px;
      padding: 10px;
      box-shadow:
        0 -2px 20px rgba(80,20,200,.35),
        inset 0 1px 0 rgba(255,255,255,.12);
      border: 2px solid rgba(160,100,255,.35);
      flex-shrink: 0;
    }

    /* Memory actions row (Back + New game) */
    .memory-actions-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: stretch;
    }

    .memory-btn-back,
    .memory-btn-new{
      width: 100%;
      min-height: 48px;
    }

    .memory-btn-back{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, #6b2ddf 0%, #3b1b73 100%);
      border: 2px solid rgba(255,255,255,.22);
      color: #fff;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow:
        0 0 18px rgba(120,60,255,.28),
        0 4px 12px rgba(0,0,0,.30);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 800;
      font-size: 15px;
    }
    .memory-btn-back:hover{
      transform: translateY(-2px) scale(1.02);
      box-shadow:
        0 0 26px rgba(120,60,255,.45),
        0 6px 16px rgba(0,0,0,.40);
    }
    .memory-btn-back:active{ transform: translateY(0) scale(0.98); }
    .memory-btn-back .ctrlIcon{ width: 22px; height: 22px; }
    .memory-btn-back .memory-btn-label{ font-size: 13px; }

    /* New game button */
    .memory-btn-new{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 16px;
      background: linear-gradient(135deg, #00d4ff 0%, #0088ff 100%);
      border: 2px solid rgba(255,255,255,.3);
      border-radius: 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 
        0 0 20px rgba(0,200,255,.4),
        0 4px 12px rgba(0,0,0,.3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .memory-btn-new:hover{
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        0 0 30px rgba(0,200,255,.6),
        0 6px 16px rgba(0,0,0,.4);
    }
    
    .memory-btn-new:active{
      transform: translateY(0) scale(0.98);
    }
    
    .memory-btn-icon{
      font-size: 24px;
      filter: drop-shadow(0 0 10px rgba(255,255,255,.5));
    }

    /* Difficulty buttons */
    .memory-difficulty{
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      align-items: stretch;
    }
    
    .memory-diff-btn{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 10px;
      background: linear-gradient(180deg, #4b2a80 0%, #35196a 100%);
      border: 2px solid rgba(160,110,255,.35);
      border-radius: 10px;
      color: #c9b0ff;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,.35);
    }
    
    .memory-diff-btn:hover{
      background: linear-gradient(180deg, #5c36a0 0%, #42207e 100%);
      border-color: rgba(200,150,255,.5);
      transform: translateY(-2px);
    }
    
    .memory-diff-btn.active{
      background: linear-gradient(180deg, #7c4dff 0%, #5e30cc 100%);
      border-color: #a480ff;
      color: #fff;
      box-shadow: 0 0 14px rgba(120,60,255,.5), 0 3px 8px rgba(0,0,0,.35);
    }
    
    .memory-diff-icon{
      font-size: 20px;
      filter: drop-shadow(0 0 8px rgba(255,255,255,.3));
    }
    
    .memory-diff-label{
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    /* ---- Mobile: compact bottom control panel (less height, smaller buttons) ---- */
    @media (max-width: 520px){
      .memoryPage{
        padding: 10px;
        padding-top: calc(32px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
      }
      .memory-board-container{ flex: 1 1 auto; padding: 6px; min-height: 240px; }

      .memory-bottom-panel{
        padding: 8px;
        gap: 6px;
        border-radius: 14px;

        /* Place New Game + Back side-by-side to save vertical space */
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Zamień pozycje: COFNIJ po lewej, NOWA GRA po prawej */
        grid-template-areas:
          "back new"
          "diff diff";
      }
      #memoryNewGame{ grid-area: new; }
      #memoryBackBtn{ grid-area: back; }
      .memory-difficulty{ grid-area: diff; }

      .memory-btn-back,
      .memory-btn-new{
        min-height: 40px;
        padding: 8px 10px;
        gap: 8px;
        border-radius: 12px;
        font-size: 13px;
        letter-spacing: 0.35px;
      }
      .memory-btn-back .ctrlIcon{ width: 18px; height: 18px; }
      .memory-btn-icon{ font-size: 19px; }
      .memory-btn-back .memory-btn-label{ font-size: 12px; }

      /* Difficulty buttons: compact 3-wide row */
      .memory-difficulty{
        flex-direction: row;
        gap: 6px;
      }
      .memory-diff-btn{
        flex: 1 1 0;
        min-height: 40px;
        padding: 8px 6px;
        gap: 4px;
        border-radius: 12px;
        flex-direction: column;
      }
      .memory-diff-icon{ font-size: 18px; }
      .memory-diff-label{ font-size: 10px; }
    }

    @media (max-width: 380px){
      .memory-bottom-panel{ padding: 7px; }
      .memory-btn-back,
      .memory-btn-new{ min-height: 38px; }
      .memory-diff-btn{ min-height: 38px; }
      .memory-btn-back .memory-btn-label{ font-size: 11px; }
    }

    /* Win celebration overlay */
    .memory-win-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.85);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }
    
    .memory-win-content{
      background: linear-gradient(135deg, 
        rgba(100,50,255,.95) 0%, 
        rgba(150,80,255,.95) 50%,
        rgba(100,50,255,.95) 100%
      );
      border: 4px solid rgba(255,200,255,.6);
      border-radius: 24px;
      padding: 40px;
      text-align: center;
      box-shadow: 
        0 0 60px rgba(150,100,255,.8),
        inset 0 0 40px rgba(255,255,255,.1);
      animation: winPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    @keyframes winPop{
      0%{ transform: scale(0.3) rotate(-10deg); opacity: 0; }
      100%{ transform: scale(1) rotate(0); opacity: 1; }
    }
    
    .memory-win-title{
      font-size: 48px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 0 20px rgba(255,255,255,.8);
      margin-bottom: 20px;
    }
    
    .memory-win-stats{
      font-size: 20px;
      color: #ffd700;
      margin-bottom: 30px;
      text-shadow: 0 0 10px rgba(255,215,0,.6);
    }
    
    .memory-win-btn{
      padding: 15px 40px;
      background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
      border: 3px solid #fff;
      border-radius: 16px;
      color: #003322;
      font-size: 20px;
      font-weight: 800;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 0 20px rgba(0,255,136,.6);
      text-transform: uppercase;
    }
    
    .memory-win-btn:hover{
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(0,255,136,.8);
    }

    /* ---- Animated BoĹĽek character ---- */
    .memory-character-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      min-height: 80px;
      position: relative;
      flex-shrink: 0;
    }
    
    .memory-bozek{
      width: 70px;
      height: 70px;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
      animation: memoryBozekFloat 3s ease-in-out infinite;
    }
    
    @keyframes memoryBozekFloat{
      0%, 100%{ transform: translateY(0) rotate(-2deg); }
      50%{ transform: translateY(-10px) rotate(2deg); }
    }
    
    .memory-bozek-svg{
      width: 100%;
      height: 100%;
    }
    
    /* Eye animations - will be controlled by JavaScript */
    .memory-bozek-eyes{
      transition: transform 0.3s ease;
    }
    
    .memory-bozek-pupil-left,
    .memory-bozek-pupil-right{
      transition: all 0.3s ease;
    }
    
    /* Mouth states */
    .memory-bozek-mouth{
      transition: d 0.3s ease;
    }
    
    /* Happy state (when match found) */
    .memory-bozek.happy .memory-bozek-mouth{
      d: path('M 88 98 Q 100 108 112 98');
    }
    
    .memory-bozek.happy{
      animation: memoryBozekJump 0.6s ease;
    }
    
    @keyframes memoryBozekJump{
      0%, 100%{ transform: translateY(0) scale(1); }
      50%{ transform: translateY(-20px) scale(1.1); }
    }
    
    /* Thinking state (when comparing cards) */
    .memory-bozek.thinking{
      animation: memoryBozekThink 0.5s ease infinite;
    }
    
    @keyframes memoryBozekThink{
      0%, 100%{ transform: rotate(-3deg); }
      50%{ transform: rotate(3deg); }
    }

/* (Kategorie) – stylowanie przełącznika jest przy .gameControls .categoryNav */

/* ================== PUZZLE (Układanka) ================== */
.gamePage.puzzlePage{
  /* bardziej "dziecięce", kolorowe tło */
  background:
    radial-gradient(circle at 15% 20%, rgba(255,170,255,.22), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(120,255,240,.18), transparent 50%),
    radial-gradient(circle at 35% 85%, rgba(255,230,120,.16), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(120,170,255,.18), transparent 55%),
    linear-gradient(180deg, #120a22 0%, #0b1328 45%, #080a18 100%);
}
.gamePage.puzzlePage{
  /* taki sam oddech u gĂłry i na dole */
  --puzzlePagePadY: 19px;
  --puzzleHeaderBandH: 74px;
  padding-top: var(--puzzlePagePadY);
  padding-bottom: var(--puzzlePagePadY);
}

/* Tytuł wycentrowany pionowo między górną krawędzią sekcji a górną krawędzią ekranu gry */
.puzzleTitle{
  margin: 0;
  min-height: var(--puzzleHeaderBandH);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-20px);
}

/* Opis ukryty, ale bez zabierania wolnej przestrzeni wyznaczonej przez pas nagłówka */
.puzzleSubtitle{
  margin: 0;
  height: 0;
  min-height: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}

.puzzlePage{
  /* nie ukrywaj elementĂłw fixed (uchwyt panelu) */
  overflow: visible;
}

/* (mobile) tryb pion/poziom dozwolony – overlay obrotu usunięty */

/* Kontener sceny */
.puzzleStage{
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  position: relative;
  transform: translateY(-16px);
}

/* Ramka planszy (bez czarnego "pudełka") */
.puzzleCanvasWrap{
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 360px;
  z-index: 1;
  transform-origin: center;
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 2px solid rgba(255,255,255,.22);
  box-shadow:
    0 18px 50px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.18);
  overflow: hidden;
}

/* Ukończenie: "foto-pop" (powiększenie + delikatny obrót, potem powrót) */
.puzzleCanvasWrap.isCelebrate{
  animation: puzzlePhotoPop 1200ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes puzzlePhotoPop{
  0%   { transform: scale(1) rotate(0deg); }
  18%  { transform: scale(1.04) rotate(-1.2deg); }
  52%  { transform: scale(1.10) rotate(1.6deg); }
  78%  { transform: scale(1.05) rotate(-0.8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* świecąca obwódka */
.puzzleCanvasWrap::before{
  content:"";
  position:absolute;
  inset: -2px;
  pointer-events:none;
  border-radius: 28px;
  background: conic-gradient(from 180deg,
    rgba(0,255,240,.75),
    rgba(255,120,255,.70),
    rgba(255,230,120,.70),
    rgba(0,255,240,.75)
  );
  filter: blur(10px);
  opacity: .30;
}
.puzzleCanvasWrap::after{
  /* lekkie "gwiazdki" w tle */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 35%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 70%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.14) 0 1px, transparent 2px);
  opacity: .45;
}
#puzzleCanvas{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  /* kluczowe dla drag&drop na telefonie (bez scroll/zoom gestĂłw) */
  touch-action: none !important;
}

/* Efekt świetlisty po całości (przejazd) */
.puzzleFinishFx{
  position:absolute;
  inset:0;
  z-index: 2; /* nad canvas, pod podglÄ…dem */
  pointer-events:none;
  opacity: 0;
}
.puzzleFinishFx.run{ opacity: 1; }

.puzzleFinishSweep{
  position:absolute;
  top:-12%;
  left:-160%;
  width: 120%;
  height: 140%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 30%,
    rgba(0,255,240,.45) 52%,
    rgba(255,120,255,.35) 68%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: skewX(-14deg);
  opacity: .0;
}

.puzzleFinishFx.run .puzzleFinishSweep{
  animation: puzzleSweep 980ms ease-out both;
}

.puzzleFinishSweep2{
  top:-18%;
  height: 150%;
  filter: blur(3px);
  opacity: 0;
}
.puzzleFinishFx.run .puzzleFinishSweep2{
  animation: puzzleSweep 860ms ease-out both;
  animation-delay: 220ms;
}

@keyframes puzzleSweep{
  0%   { transform: translateX(0) skewX(-14deg); opacity: 0; }
  12%  { opacity: .10; }
  22%  { opacity: .65; }
  55%  { opacity: .55; }
  100% { transform: translateX(320%) skewX(-14deg); opacity: 0; }
}

/* Strzałki nawigacji po ukończeniu */
.puzzleNavArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%) scale(.96);
  z-index: 4;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(90,40,170,.75), rgba(40,18,90,.72));
  box-shadow: 0 14px 26px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.16);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}
.puzzleNavArrow.left{ left: 16px; }
.puzzleNavArrow.right{ right: 16px; }

.puzzleCanvasWrap.showNav .puzzleNavArrow{
  opacity: 1;
  pointer-events: auto;
}
.puzzleNavArrow:hover{
  filter: brightness(1.12);
  transform: translateY(-50%) scale(1);
}
.puzzleNavArrow:active{
  transform: translateY(-50%) scale(.98);
}

/* Telefon/pion: wybór tła strzałkami pod planszą (żeby nic nie blokowało łapania puzzli) */
.puzzleThemeArrowsRow{
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.puzzleThemeArrowBtn{
  width: 68px;
  height: 56px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.30);
  background: linear-gradient(180deg, rgba(90,40,170,.78), rgba(40,18,90,.72));
  box-shadow: 0 14px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.puzzleThemeArrowBtn:active{ transform: translateY(1px) scale(.98); }

/* PodglÄ…d w magicznym okienku */
/* (usunięte na prośbę – na telefonie zajmowało miejsce) */
.puzzlePreviewWindow{ display:none !important; }

/* Panel przyciskĂłw na dole */
.puzzleBottomPanel{
  /* Panel jest "w oknie puzzli" (przyklejony do dołu ramki), nie może rozciągać strony na desktopie */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 160;
  overflow: visible;

  width: min(980px, calc(100% - 24px));
  max-width: 980px;
  /* Uwaga: tło panelu robimy jako ::before zaczynające się POD uchwytem,
     żeby w stanie schowanym widoczna była wyłącznie strzałka (bez paska tła). */
  padding: calc(var(--handleSize) + 14px) 10px 10px;
  border-radius: 18px;
  background: transparent;
  border: none;
  box-shadow: none;

  /* miejsce na 3 miniaturki z lewej i prawej (tło panelu) */
  --themeSize: 84px;   /* szerokość 1 kafelka */
  --themeJoin: 12px;   /* nakładanie (łączenie) między kafelkami */
  --themeCols: 3;

  /* uchwyt (kwadrat z radiusami) */
  --handleSize: 46px;

  /* dodatkowe „dopychanie” panelu w dół w stanie schowanym (np. na tel. poziom) */
  --panelHideExtra: 0px;

  --themeSideW: calc(var(--themeCols) * var(--themeSize) - (var(--themeCols) - 1) * var(--themeJoin) + 18px);
}

/* "Prawdziwe" tło panelu – startuje pod uchwytem */
.puzzleBottomPanel::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--handleSize);
  bottom: 0;
  border-radius: 18px;
  /* bardziej "płasko" (bez mocnego gradientu) – mniej migotania na telefonach podczas drag */
  background: rgba(52, 20, 104, .90);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
  z-index: 0;
}

/* Wysuwany/ukrywany panel */
.puzzleBottomPanel{
  transition: transform .24s cubic-bezier(.2,.9,.2,1);
}

/* Stan SCHOWANY: panel zjeżdża w dół, ale zostawia "uchwyt" */
.puzzleBottomPanel.isCollapsed{
  /* SCHOWANY na wejściu: panel zjeżdża pod ramkę tak, że widoczny zostaje tylko uchwyt (na dole okna) */
  transform: translateX(-50%) translateY(calc(100% - var(--handleSize) + var(--panelHideExtra)));
}

.puzzleBottomPanel:not(.isCollapsed){
  transform: translateX(-50%) translateY(-10px);
}

/* Animacja treści panelu */
.puzzleBottomPanel .puzzleBtnRow,
.puzzleBottomPanel .puzzleThemeLayer{
  transition: opacity .18s ease, transform .18s ease;
}

/* gdy schowany – chowamy treść, zostaje tylko uchwyt */
.puzzleBottomPanel.isCollapsed .puzzleBtnRow,
.puzzleBottomPanel.isCollapsed .puzzleThemeLayer{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.puzzleBottomPanel:not(.isCollapsed) .puzzleBtnRow,
.puzzleBottomPanel:not(.isCollapsed) .puzzleThemeLayer{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Uchwyt – JEDNA strzałka w kwadracie z radiusami, przypięty do górnej krawędzi panelu */
.puzzlePanelHandle{
  position: absolute;
  left: 50%;
  /* Uchwyt jest w "strefie" nad tłem panelu (widoczny nawet gdy panel schowany) */
  top: -5px;
  transform: translateX(-50%);
  width: var(--handleSize);
  height: var(--handleSize);
  border-radius: 14px;
  /* płasko + lżej (lepsza stabilność renderu na mobile) */
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(106, 92, 255, .96);
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 5;
}
.puzzlePanelHandle:active{ transform: translateX(-50%) translateY(1px); }
.puzzlePanelHandle .phArrow{
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(0,255,240,.18));
}
/* gdy panel otwarty – odwróć strzałkę (żeby "schować" było czytelne) */
.puzzlePanelHandle.isOpen .phArrow{
  transform: rotate(180deg);
}

/* Dopasowanie na mniejszych ekranach */
@media (max-width: 900px), (max-height: 900px){
  .puzzleBottomPanel{
    width: min(820px, calc(100% - 18px));
  }
}

/* Strzałki zmiany tła w panelu (pokazujemy na mobile) */
.puzzleBottomPanel #puzzleThemePrevBtn,
.puzzleBottomPanel #puzzleThemeNextBtn{
  display: none;
}

/* Przyciskowy rdzeń na wierzchu */
.puzzleBtnRow{
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding-left: var(--themeSideW);
  padding-right: var(--themeSideW);
  pointer-events: none;
}

.puzzleBtnRow > .menuBtnSquare{
  pointer-events: auto;
}

/* Ikony SVG w puzzlach (żeby nie wyglądały jak zdublowane emoji na telefonie) */
.puzzleBottomPanel .menuBtnSquare .ctrlIcon{
  width: 26px;
  height: 26px;
}

/* Warstwa wyboru obrazka – w tle panelu (pełna wysokość panelu) */
.puzzleThemeLayer{
  position:absolute;
  left: 0;
  right: 0;
  top: var(--handleSize);
  bottom: 0;
  z-index: 2;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  padding: 0;
  pointer-events:none;
  /* bez przezroczystości – rozjaśnienie robimy filtrem na aktywnym kafelku */
  opacity: 1;
  border-radius: 18px;
  overflow: hidden;
  /* lepsze przycinanie efektĂłw (drop-shadow) pod radius panelu */
  clip-path: inset(0 round 18px);
}



.puzzleThemeGroup{
  display:flex;
  align-items:stretch;
  height: 100%;
  gap: 0;
}

/* "Overscan" – chowamy zewnętrzne kontury (góra/dół + skrajne boki) przez lekkie wysunięcie miniaturek poza panel.
   Panel ma overflow:hidden + clip-path, więc kontur znika, a łączenia L/P zostają. */
.puzzleThemeGroupLeft{ transform: translateX(-10px); }
.puzzleThemeGroupRight{ transform: translateX(10px); }

.puzzleThemeBtn{
  pointer-events:auto;
  width: var(--themeSize);
  /* trochę wyższe niż panel (i przesunięte), żeby górny/dolny kontur zniknął pod przycięciem panelu */
  height: calc(100% + 16px);
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transform: translateZ(0);
  /* bez efektu powiększania/pomniejszania – tylko szybkie rozjaśnienie */
  transition: opacity .05s ease, filter .05s ease;
  /* domyślnie lekko przygaszone (bez opacity) */
  filter: brightness(.95) drop-shadow(0 10px 16px rgba(0,0,0,.26));
  will-change: filter;
  position: relative;
}

.puzzleThemeGroup .puzzleThemeBtn + .puzzleThemeBtn{
  margin-left: calc(-1 * var(--themeJoin)); /* Ĺ‚Ä…czenie: wypustka wchodzi w dziurÄ™ */
}

.puzzleThemeBtn:hover{
  transform: translateZ(0);
  filter: brightness(1.05) drop-shadow(0 10px 16px rgba(0,0,0,.26));
}

.puzzleThemeBtn:active{
  transform: translateZ(0);
}

.puzzleThemeBtn:focus-visible{
  outline: 2px solid rgba(0,255,240,.70);
  outline-offset: 4px;
}

.puzzleThemeBtn.isActive{
  /* wybrany kafelek – mocniejszy bright zamiast przezroczystości */
  filter: brightness(1.22) drop-shadow(0 0 16px rgba(0,255,240,.20)) drop-shadow(0 0 16px rgba(255,120,255,.14));
}

.puzzleThemeSvg{
  width: 100%;
  height: 100%;
  display:block;
  overflow: visible; /* pozwala na wypustkÄ™ poza kafelek */
}
.puzzleThemeSvg *{ pointer-events: none; }

.puzzleThemeStroke{
  fill: none;
  stroke: rgba(255,255,255,.78);
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(0,255,240,.18)) drop-shadow(0 0 6px rgba(255,120,255,.15));
}

.puzzleThemeBtn.isActive .puzzleThemeStroke{
  stroke: rgba(255,255,255,.95);
  filter: drop-shadow(0 0 10px rgba(0,255,240,.28)) drop-shadow(0 0 8px rgba(255,120,255,.22));
}


/* Kolory przyciskĂłw (jak w kolorowankach) */
#puzzleUndoBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(70,170,255,1) 0%, rgba(35,100,255,1) 100%);
}
#puzzleBackBtn.menuBtnSquare{
  /* WSTECZ – zawsze NIEBIESKI */
  background: #2f80ff;
}
#puzzleShuffleBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(255,190,80,1) 0%, rgba(255,125,0,1) 100%);
}
#puzzleRestartBtn.menuBtnSquare{
  /* odśwież/od nowa – pomarańcz */
  background: #ff9a1a;
}
#puzzleHandBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(70,225,135,1) 0%, rgba(28,168,96,1) 100%);
}
#puzzleHandBtn.menuBtnSquare.isOn{
  box-shadow: 0 0 0 2px rgba(60,235,140,.22), 0 10px 24px rgba(38,195,108,.34);
}
#puzzleHintBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(120,255,200,1) 0%, rgba(30,190,160,1) 100%);
}
#puzzleOverlayBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(255,120,255,1) 0%, rgba(170,70,255,1) 100%);
}

/* muzyka (głośnik) */
#puzzleMusicBtn.menuBtnSquare{
  background: linear-gradient(180deg, rgba(170,220,255,1) 0%, rgba(70,150,255,1) 100%);
}

/* strzałki zmiany tła (mobile) */
#puzzleThemePrevBtn.menuBtnSquare,
#puzzleThemeNextBtn.menuBtnSquare{
  /* lewo/prawo – pomarańcz */
  background: #ff9a1a;
}

/* PUZZLE: układ przycisków na telefonie/poziom – wstecz skrajnie po lewej, a "<" obok */
@media (max-width: 900px) and (orientation: landscape){
  #pagePuzzle .puzzleBtnRow{
    /* Na telefonie w poziomie nie rozciągaj ikon po całej szerokości – mają być blisko siebie */
    width: 100%;
    justify-content: center;
    gap: 6px;
  }

  /* kolejność w pasku */
  #pagePuzzle #puzzleBackBtn{ order: 1; }
  #pagePuzzle #puzzleThemePrevBtn{ order: 2; }
  #pagePuzzle #puzzleRestartBtn{ order: 3; }
  #pagePuzzle #puzzleHintBtn{ order: 4; }
  #pagePuzzle #puzzleOverlayBtn{ order: 5; }
  #pagePuzzle #puzzleThemeNextBtn{ order: 6; }
}

/* stan ON/OFF na przyciskach */
.puzzleBottomPanel .menuBtnSquare.isOff{
  filter: grayscale(.35) brightness(.85);
  opacity: .85;
}

/* wiadomość */
.puzzleMsg{
  margin-top: 10px;
  font-weight: 900;
  font-size: 18px;
  text-align:center;
  min-height: 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Desktop: nie pozwól, żeby komunikat pod planszą wydłużał stronę (scroll + "rozciąganie" widoku).
   Pokazujemy go jako overlay nad grÄ…, tuĹĽ nad wysuwanym panelem. */
@media (min-width: 901px){
  #pagePuzzle{ overflow: hidden; }
  #pagePuzzle .gamePage.puzzlePage{ overflow: hidden; }
  #pagePuzzle .puzzleStage{ min-height: 0; }
  #pagePuzzle .puzzleCanvasWrap{ min-height: 0; }

  .puzzleMsg{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    margin: 0;
    width: min(920px, 92vw);
    z-index: 165;
    pointer-events: none;
  }
}

/* PUZZLE RESPONSIVE 560 */
@media (max-width: 560px){
  /* na wÄ…skich ekranach nie rezerwujemy bokĂłw */
  .puzzleBtnRow{ padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  /* brak przezroczystości w wyborze tła */
  .puzzleThemeLayer{ opacity: 1; }
}

@media (max-width: 420px){
  .puzzleCanvasWrap{ min-height: 320px; border-radius: 22px; }
  /* Na telefonie nie chowaj przycisków pod uchwytem (strzałką) – zostaw miejsce na handle */
  .puzzleBottomPanel{ padding: calc(var(--handleSize) + 10px) 8px 8px; --themeSize: 58px; --themeJoin: 10px; }
  .puzzleBtnRow{ gap: 8px; }
  .puzzleBottomPanel .menuBtnSquare{ width: 50px; height: 50px; border-radius: 14px; }
  .puzzleBottomPanel .menuBtnSquare .menuBtnIcon{ font-size: 24px; }
  .puzzleMsg{ font-size: 16px; }
}


/* Telefon (mobile) – puzzle tylko w POZIOMIE:
   - w pionie pokazujemy overlay "Obróć telefon"
   - wybór tła strzałkami pod planszą (zawsze widoczne na telefonie)
   - miniatury w panelu ukrywamy (mniej obciÄ…ĹĽenia)
*/
@media (max-width: 900px){
  .puzzleThemeLayer{ display:none !important; }
  .puzzleBottomPanel #puzzleThemePrevBtn,
  .puzzleBottomPanel #puzzleThemeNextBtn{ display: inline-flex; }
  /* strzałki na canvasie chowamy, żeby NIE blokowały przeciągania */
  .puzzleCanvasWrap .puzzleNavArrow{
    display:none !important;
    pointer-events:none !important;
  }

  .puzzleBtnRow{ padding-left: 0; padding-right: 0; flex-wrap: nowrap; gap: 6px; }
  /* Na mobile panel ma się wysuwać spod ekranu – w stanie schowanym widać tylko uchwyt.
     Musimy zostawić górny padding na wysokość uchwytu, żeby ikony były w środku panelu. */
  .puzzleBottomPanel{ padding: calc(var(--handleSize) + 8px) 8px 8px; border-radius: 16px; }
  .puzzleBottomPanel .menuBtnSquare{ width: 42px; height: 42px; border-radius: 12px; }
  .puzzleBottomPanel .menuBtnSquare .menuBtnIcon{ font-size: 22px; }
  .puzzleBottomPanel .menuBtnSquare .ctrlIcon{ width: 22px; height: 22px; }
}

@media (max-width: 900px) and (orientation: landscape){
  /* Telefon POZIOM – pełniejszy ekran + panel/uchwyt nie wchodzą w planszę */
  #pagePuzzle .gamePage.puzzlePage{
    padding: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    overflow: hidden;
  }

  #pagePuzzle .puzzleTitle{ font-size: 22px; margin: 0 0 6px; }
  #pagePuzzle .puzzleSubtitle{ display:none; }

  #pagePuzzle .puzzleStage{ max-width: none; margin: 0; gap: 6px; min-height: 0; }
  #pagePuzzle .puzzleCanvasWrap{ min-height: 0; flex: 1; border-radius: 0; }

  /* panel: mniejszy uchwyt (≈ połowa) */
  #pagePuzzle .puzzleBottomPanel{
    width: min(720px, 96vw);
    padding: calc(var(--handleSize) + 6px) 8px 8px;
    --handleSize: 24px;
    --panelHideExtra: 0px;
  }
  #pagePuzzle .puzzlePanelHandle{ border-radius: 10px; }
  #pagePuzzle .puzzlePanelHandle .phArrow{ font-size: 12px; }

  /* mniejsze przyciski w panelu (żeby nie zabierały wysokości planszy) */
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare{ width: 38px; height: 38px; border-radius: 11px; }
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare .menuBtnIcon{ font-size: 20px; }
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare .ctrlIcon{ width: 20px; height: 20px; }
}

/* Mobile portrait: pozwalamy grać – więcej miejsca na planszę */
@media (max-width: 900px) and (orientation: portrait){
  .gamePage.puzzlePage{
    --puzzlePagePadY: 10px;
    padding-top: var(--puzzlePagePadY);
    padding-bottom: var(--puzzlePagePadY);
  }
  .puzzleSubtitle{ display:none; }
  .puzzleStage{ gap: 10px; }
  #pagePuzzle .puzzleBottomPanel{
    width: min(92vw, 352px);
    padding: calc(var(--handleSize) + 6px) 8px 8px;
  }
  #pagePuzzle .puzzleBtnRow{
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare{
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
  }
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare .menuBtnIcon{
    font-size: 18px;
  }
  #pagePuzzle .puzzleBottomPanel .menuBtnSquare .ctrlIcon{
    width: 18px;
    height: 18px;
  }
}


/* MENU: bez czarnego gradientu – tło bierze się z tapety strony */
.gamePage.gamesMenu{
  background: transparent !important;
}
.gamePage.gamesMenu::before,
.gamePage.gamesMenu::after{
  content: none !important;
}

/* Menu: wypełnij wysokość i przyklej siatkę do dołu w razie potrzeby */
.gamePage.gamesMenu{
  min-height: 100%;
}
.gamesMenuGrid{
  flex: 1 1 auto;
  align-content: start;
  margin-top: 10px;
  margin-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
/* =========================
   FIX: MAIN MENU CARDS (icons + grid)
   Przywraca kafelki (gameCard) zamiast "małych przycisków".
   Dotyczy tylko wyboru gry.
========================= */
.gamePage.gamesMenu{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* menu ma być od góry, ale bez rozjeżdżania */
  justify-content: flex-start;
}

.gamesMenuGrid{
  width: min(980px, 100%);
  margin: 14px auto 0;
  padding: 0 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (orientation: landscape){
  .gamesMenuGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(1120px, 100%);
  }
}

.gameCard{
  appearance: none;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 26px;
  background: rgba(20, 18, 40, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);

  width: 100%;
  min-height: 132px;
  padding: 18px 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.gameCard:active{ transform: scale(.98); }
.gameCard:hover{ border-color: rgba(255,255,255,.28); box-shadow: 0 18px 46px rgba(0,0,0,.42); }
.gameCard:focus-visible{ outline: 3px solid rgba(255,255,255,.35); outline-offset: 3px; }

.gameCard .gi{
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}
.gameCard .gt{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 10px 18px rgba(0,0,0,.45);
}
@media (max-width: 420px){
  .gameCard{ min-height: 122px; border-radius: 24px; }
  .gameCard .gi{ font-size: 42px; }
  .gameCard .gt{ font-size: 20px; }
}

/* =========================
   MOBILE LAYOUT TUNING
   (puzzle landscape handle, name select, games menu)
========================= */

/* 1) PUZZLE – telefon POZIOM:
   uchwyt + panel mają być POD obszarem gry (pod ramką), przy samej krawędzi ekranu */
@media (max-width: 900px) and (orientation: landscape){
  /* WAŻNE:
     puzzleBottomPanel jest w DOM wewnÄ…trz .puzzleCanvasWrap.
     .puzzleCanvasWrap ma overflow:hidden (ramka) – to CLIPUJE panel nawet gdy jest fixed.
     Na telefonie w poziomie chcemy panel przy samej krawędzi WYŚWIETLACZA,
     więc zdejmujemy clipping i „ramkę okna” w tym trybie. */
  #pagePuzzle .puzzleCanvasWrap{
    overflow: visible !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #pagePuzzle .puzzleCanvasWrap::before,
  #pagePuzzle .puzzleCanvasWrap::after{
    content: none !important;
    display: none !important;
  }

  /* zostaw trochę miejsca na dole, żeby panel (gdy otwarty) nie nachodził na planszę */
  /* nie "kurcz" canvasu przez sztuczny padding – plansza ma korzystać z pełnej wysokości ekranu */
  #pagePuzzle .puzzleStage{ padding-bottom: 0; }

  /* panel przyklejony do dołu ekranu (poza ramką gry) */
  #pagePuzzle #puzzleBottomPanel{
    position: fixed !important;
    left: 50% !important;
    /* przy samej krawędzi ekranu (z uwzględnieniem safe-area) */
    bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 2600 !important;
  }
}

/* 2) WYBÓR UŻYTKOWNIKA – telefon PION:
   delikatnie mniejsze kafelki + całość ~50px niżej (żeby "Cześć!" nie ucinało) */
@media (max-width: 600px) and (orientation: portrait){
  .nameSelectTitle{
    transform: translateY(clamp(-160px, -14vh, -90px));
  }
  .nameSelectSubtitle{
    transform: translateY(clamp(-160px, -14vh, -90px));
    margin-bottom: 34px;
  }

  .nameCards{
    transform: translateY(50px);
    gap: 16px;
  }

  .nameCard{
    width: 150px;
    height: 185px;
    padding: 16px;
    border-radius: 22px;
  }
  .nameCardEmoji{ font-size: 58px; }
  .nameCardEmoji img{ width: 58px; height: 58px; }
  .nameCardName{ font-size: 20px; }
}


@media (max-width: 380px) and (orientation: portrait){
  .nameCard{ width: 144px; height: 178px; }
  .nameCardName{ font-size: 19px; }
}

/* 3) PANEL WYBORU GIER – telefon PION:
   siatka gier ~70px w dół, tytuł + podtytuł ~10px w dół */
@media (max-width: 900px) and (orientation: portrait){
  .gamePage.gamesMenu{ padding-top: 30px; }
  .gamePage.gamesMenu .gamesMenuGrid{ margin-top: 74px; }
}



/* === BOŻEK HUD: wyrównanie pigułek + buffy na środku + stage colors === */
.bozekStage{
  --bozekStageAccent: rgba(91,236,255,1);
  --bozekStageAccentSoft: rgba(91,236,255,.34);
}
.bozekStage[data-stage="0"]{
  --bozekStageAccent: rgba(91,236,255,1);
  --bozekStageAccentSoft: rgba(91,236,255,.34);
}
.bozekStage[data-stage="1"]{
  --bozekStageAccent: rgba(120,255,210,1);
  --bozekStageAccentSoft: rgba(120,255,210,.30);
}
.bozekStage[data-stage="2"]{
  --bozekStageAccent: rgba(255,110,245,1);
  --bozekStageAccentSoft: rgba(255,110,245,.32);
}
.bozekStage[data-stage="3"]{
  --bozekStageAccent: rgba(134,255,120,1);
  --bozekStageAccentSoft: rgba(134,255,120,.28);
}
.bozekStage[data-stage="4"]{
  --bozekStageAccent: rgba(255,186,92,1);
  --bozekStageAccentSoft: rgba(255,186,92,.32);
}

.bozekGameHud--overlay{
  top: 14px;
  left: 16px;
  right: 16px;
  gap: 8px;
}

.bozekGameHud--overlay .bozekHudLine1,
.bozekGameHud--overlay .bozekHudLine2{
  width: 100%;
}

.bozekGameHud--overlay .bozekHudLine1{
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.bozekGameHud--overlay .bozekHudLine2{
  display: block;
}

.bozekGameHud--overlay .bozekHudLeft{
  min-width: 0;
}

.bozekGameHud--overlay .bozekStageBadge,
.bozekGameHud--overlay .bozekScoreStat,
.bozekGameHud--overlay .bozekPowerStat,
.bozekGameHud--overlay .bozekMagnetStat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(7,10,24,.58);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.18);
}

.bozekGameHud--overlay .bozekStageBadge{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    rgba(7,10,24,.72);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 18px var(--bozekStageAccentSoft);
  color: #fff;
  position: relative;
}

.bozekGameHud--overlay .bozekStageBadge::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--bozekStageAccent), rgba(255,255,255,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .95;
  pointer-events: none;
}

.bozekGameHud--overlay .bozekScoreStat{
  justify-self: end;
  min-width: 72px;
}

.bozekGameHud--overlay .bozekHudBuffs{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease;
}

.bozekGameHud--overlay .bozekHudBuffs:empty{
  display: none;
}

.bozekGameHud--overlay .bozekPowerStat.hidden,
.bozekGameHud--overlay .bozekMagnetStat.hidden{
  display: none;
}

.bozekGameHud--overlay .bozekProgressRow{
  width: 100%;
  gap: 12px;
  align-items: center;
}

.bozekGameHud--overlay .bozekProgressBar,
.bozekGameHud--overlay .bozekHpBar{
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(7,10,24,.56);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 8px rgba(0,0,0,.34);
}

.bozekGameHud--overlay .bozekProgressBar{
  flex: 1 1 auto;
  min-width: 0;
}

.bozekGameHud--overlay .bozekHpBar{
  flex: 0 0 32%;
  min-width: 92px;
}

.bozekGameHud--overlay .bozekProgressFill{
  background: linear-gradient(90deg, var(--bozekStageAccent), rgba(255,255,255,.96));
  box-shadow: 0 0 16px var(--bozekStageAccentSoft);
}

.bozekGameHud--overlay .bozekProgressMarks{
  opacity: .42;
}

.bozekGameHud--overlay .bozekMark{
  background: rgba(255,255,255,.13);
  box-shadow: none;
}

.bozekStage:not([data-mode="boss"]) .bozekProgressOverlay{
  display: none;
}

.bozekStage[data-mode="boss"] .bozekProgressOverlay{
  display: flex;
  inset: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,.96);
}

.bozekGameHud--overlay .bozekHpOverlay{
  inset: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,.96);
}

.bozekStage[data-mini="snakeArena"] .bozekGameHud--overlay{
  display: none !important;
}

.bozekStage[data-mini="snakeArena"] .bozekMiniTitle,
.bozekStage[data-mini="snakeArena"] .bozekStageBadge{
  display: none !important;
}

.bozekStage[data-mini="snakeArena"] .bozekProgressOverlay{
  color: rgba(255,255,255,.82);
  font-size: 11px;
  letter-spacing: .02em;
}

@media (max-width: 640px){
  .bozekGameHud--overlay{
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 6px;
  }

  .bozekGameHud--overlay .bozekStageBadge,
  .bozekGameHud--overlay .bozekScoreStat,
  .bozekGameHud--overlay .bozekPowerStat,
  .bozekGameHud--overlay .bozekMagnetStat{
    min-height: 30px;
    padding: 6px 11px;
    font-size: 12px;
  }

  .bozekGameHud--overlay .bozekProgressRow{
    gap: 8px;
  }

  .bozekGameHud--overlay .bozekPowerStat,
  .bozekGameHud--overlay .bozekMagnetStat{
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .bozekGameHud--overlay .bozekProgressBar,
  .bozekGameHud--overlay .bozekHpBar{
    height: 10px;
  }

  .bozekGameHud--overlay .bozekHpBar{
    flex-basis: 34%;
    min-width: 74px;
  }
}


/* === BOŻEK HUD: paski wyżej + buff absolutny, bez zrzucania layoutu === */
.bozekGameHud--overlay{
  --bozekHudInsetX: 16px;
  --bozekHudInsetY: 14px;
  --bozekHudTopPillH: 34px;
  --bozekHudTopGap: 14px;
  --bozekHudBuffTop: 24px;
  top: var(--bozekHudInsetY);
  left: var(--bozekHudInsetX);
  right: var(--bozekHudInsetX);
  gap: 0;
}

.bozekGameHud--overlay .bozekHudLine1{
  position: relative;
  z-index: 2;
}

.bozekGameHud--overlay .bozekHudLine2{
  display: block;
  margin-top: var(--bozekHudTopGap);
}

.bozekGameHud--overlay .bozekPowerStat,
.bozekGameHud--overlay .bozekMagnetStat{
  min-height: 24px;
  padding: 4px 10px;
  font-size: 12px;
}

.bozekGameHud--overlay .bozekHudBuffs{
  position: absolute;
  top: var(--bozekHudBuffTop);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 140px);
  min-height: 0;
  margin: 0;
}

.bozekGameHud--overlay .bozekProgressBar,
.bozekGameHud--overlay .bozekHpBar{
  height: 15px;
}

@media (max-width: 640px){
  .bozekGameHud--overlay{
    --bozekHudInsetX: 10px;
    --bozekHudInsetY: 10px;
    --bozekHudTopPillH: 30px;
    --bozekHudTopGap: 10px;
    --bozekHudBuffTop: 20px;
  }

  .bozekGameHud--overlay .bozekPowerStat,
  .bozekGameHud--overlay .bozekMagnetStat{
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .bozekGameHud--overlay .bozekProgressBar,
  .bozekGameHud--overlay .bozekHpBar{
    height: 13px;
  }
}


/* ===== KOLORY (baloniki) ===== */
.gamePage.kolory{
  background: radial-gradient(ellipse at 50% 25%, rgba(120,200,255,.18), transparent 60%),
              radial-gradient(ellipse at 75% 75%, rgba(255,120,200,.16), transparent 60%),
              linear-gradient(180deg, #070a12, #12162a);
  padding-top: 16px;
}
.gameTitle.kolory{
  background: linear-gradient(135deg, #fff, rgba(150,220,255,.95));
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-5px);
}
.gamePage.kolory .scoreDisplay{
  gap: 10px;
  margin-bottom: 6px;
}
.gamePage.kolory .gameSubtitle{
  margin-bottom: 6px;
  transform: translateY(-5px);
}
.gamePage.kolory .scorePill{
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 18px;
}
.gamePage.kolory .scorePill .icon{
  font-size: 13px;
}
.gamePage.kolory .timerBar{
  max-width: 288px;
  margin-bottom: 8px;
}
.gamePage.kolory .targetHint{
  display: none !important;
}
.targetSwatch{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.targetText{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  opacity: .95;
  text-align: center;
}
.itemsGrid.colors{
  grid-template-columns: repeat(4, 1fr);
  max-width: 448px;
  gap: 8px;
  margin-bottom: 10px;
}
@media (max-width: 520px){
  .itemsGrid.colors{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px){
  .itemsGrid.colors{ grid-template-columns: repeat(2, 1fr); }
}
.colorsStage{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: none;
}
.stageBalloon{
  margin-top: 0;
  animation: balloonFloat 2.8s ease-in-out infinite;
}
.stageBalloon .balloonBody{
  box-shadow: 0 20px 45px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.08) inset;
}
.gameControls .categoryNav.colorsNav{
  grid-template-columns: 56px 220px 56px;
}
.gameControls .categoryNav.colorsNav .gameBtn.catLabel{
  width: 220px;
}
.colorsPalettePanel{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 10px auto 0;
}
@media (max-width: 520px){
  .colorsPalettePanel{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px){
  .colorsPalettePanel{ grid-template-columns: repeat(3, 1fr); }
}
.colorsPalettePanel .paletteBtn{
  aspect-ratio: 1;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}
.colorsPalettePanel .paletteBtn .btnContent{
  align-items: flex-start;
}
.colorsPalettePanel .paletteBtn .balloon{
  width: 70%;
  height: 92%;
  margin-top: 4%;
}
.itemBtn.balloonBtn{
  aspect-ratio: 3/4;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  text-shadow: none;
}
.itemBtn.balloonBtn::before,
.itemBtn.balloonBtn::after{
  display: none;
}
.itemBtn.balloonBtn .btnContent{
  align-items: flex-start;
}
.balloon{
  width: 78%;
  height: 92%;
  margin-top: 6%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform: translateY(0);
  animation: balloonFloat 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.14s);
}
@keyframes balloonFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.balloonBody{
  width: 100%;
  height: 78%;
  border-radius: 54% 54% 48% 48%;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%),
              radial-gradient(circle at 70% 85%, rgba(0,0,0,.18), rgba(0,0,0,0) 58%),
              var(--balloonColor, #ff2d2d);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.22), 0 10px 20px rgba(0,0,0,.22);
}
.balloonKnot{
  position: absolute;
  bottom: 20%;
  width: 16%;
  height: 10%;
  background: var(--balloonColor, #ff2d2d);
  border-radius: 2px 2px 10px 10px;
  transform: rotate(45deg);
  filter: brightness(.92);
  box-shadow: 0 6px 10px rgba(0,0,0,.18);
}
.balloonString{
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 28%;
  background: rgba(255,255,255,.55);
  opacity: .65;
  border-radius: 999px;
  transform: translateX(0);
}

.balloon.stageBalloon{
  width: clamp(106px, 22.8vw, 124px);
  height: clamp(166px, 36vw, 196px);
  margin-top: 0;
}
.itemBtn.balloonBtn.correct{
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 0 28px rgba(90,255,150,.35);
}
.itemBtn.balloonBtn.wrong{
  animation: shakeWrong .42s ease;
}
.itemBtn.balloonBtn.popped{
  opacity: .32;
  transform: scale(.94);
}

.canvasWrap.colorsCanvas{
  width: clamp(357px, 78vw, 578px);
  height: clamp(708px, calc(84vh + 14px), 1068px);
  border-radius: 22px;
  margin-bottom: 10px;
}

@media (max-width: 900px) and (orientation: portrait){
  .itemsGrid.colors{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: min(84vw, 332px);
    gap: 6px;
  }
  .itemsGrid.colors[data-count="6"] .itemBtn.balloonBtn:nth-child(5){
    grid-column: 2;
  }
  .itemsGrid.colors[data-count="6"] .itemBtn.balloonBtn:nth-child(6){
    grid-column: 3;
  }
  .itemBtn.balloonBtn{
    border-radius: 14px;
  }
  .itemBtn.balloonBtn .btnContent{
    align-items: center;
    justify-content: center;
  }
  .balloon{
    width: 66%;
    height: 78%;
    margin-top: 0;
  }
  .balloon.stageBalloon{
    width: clamp(80px, 18vw, 94px);
    height: clamp(124px, 28vw, 146px);
  }
}

.itemBtn.balloonBtn.hint .balloonBody{
  box-shadow: 0 0 0 4px rgba(255,255,255,.85),
              0 0 28px rgba(255,255,255,.35),
              inset 0 -10px 18px rgba(0,0,0,.22),
              0 10px 20px rgba(0,0,0,.22);
}
.itemBtn.balloonBtn.popped{
  pointer-events: none;
}
.itemBtn.balloonBtn.popped .balloon{
  animation: none;
  transform: scale(0.25) rotate(8deg);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}


















@media (max-width: 900px) and (orientation: landscape){
  #pagePuzzle{
    overflow: hidden;
  }

  #pagePuzzle .gamePage.puzzlePage{
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    height: 100dvh;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  #pagePuzzle .puzzleTitle{
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 4px 0 2px;
    transform: none;
  }

  #pagePuzzle .puzzleStage{
    width: 100vw;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    transform: none;
  }

  #pagePuzzle .puzzleCanvasWrap{
    width: 100vw;
    min-height: 0;
    height: 100%;
  }
}

/* ===== ŁĄCZENIE WYRAZÓW ===== */
.wordMatchPage{
  justify-content:flex-start;
  gap:12px;
  padding-top:28px;
  padding-bottom:22px;
}
.wordMatchPage .gameSubtitle{
  margin-bottom:6px;
  text-align:center;
}
.wordMatchScore{
  width:min(100%,960px);
  margin-bottom:2px;
  align-items:center;
}
.wordMatchBoardWrap{
  position:relative;
  width:min(100%,960px);
  min-height:560px;
  padding:0;
  overflow:hidden;
  border-radius:34px;
  background:
    radial-gradient(circle at 18% 24%, rgba(111,219,255,.12), transparent 20%),
    radial-gradient(circle at 78% 28%, rgba(255,157,236,.14), transparent 18%),
    radial-gradient(circle at 52% 72%, rgba(157,255,174,.10), transparent 24%),
    linear-gradient(180deg, rgba(28,18,63,.82), rgba(10,8,28,.84));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.32);
  touch-action:none;
}
.wordMatchBoardWrap::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  z-index:0;
}
.wordMatchBoardWrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.75) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 22% 72%, rgba(255,255,255,.55) 0 1px, transparent 1.3px),
    radial-gradient(circle at 36% 34%, rgba(124,246,255,.55) 0 1.3px, transparent 1.6px),
    radial-gradient(circle at 48% 58%, rgba(255,255,255,.45) 0 1px, transparent 1.2px),
    radial-gradient(circle at 63% 22%, rgba(255,217,102,.55) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 74% 66%, rgba(255,143,230,.55) 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 88% 38%, rgba(255,255,255,.52) 0 1.1px, transparent 1.3px);
  opacity:.7;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
  z-index:0;
}
.wordMatchCanvas,
.wordMatchLines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.wordMatchCanvas{ pointer-events:none; }
.wordMatchLines{ display:none; }
.wordMatchColumn{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.wordMatchWords,
.wordMatchIcons{
  display:block;
}
.wordMatchCard{
  position:absolute;
  pointer-events:auto;
  border:none;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:filter .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  touch-action:none;
  will-change:transform, filter, opacity;
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  contain:layout paint style;
}
.wordMatchCard:hover{ filter:brightness(1.05); }
.wordMatchCard:active{ filter:brightness(1.08); }
.wordMatchDragging .wordMatchCard:hover,
.wordMatchDragging .wordMatchCard:active{ transform:none !important; filter:none !important; }
.wordMatchCard:disabled{ cursor:default; }
.wordMatchCard.isWrong{ animation:wordMatchShake .34s ease; }

.wordMatchDragging .wordMatchBoardWrap,
.wordMatchDragging .wordMatchWordBtn,
.wordMatchDragging .wordMatchIconBtn{
  cursor:grabbing !important;
}
.wordMatchWordBtn{
  cursor:grab;
  padding:8px 8px 14px;
  text-align:left;
  font:900 42px/1.03 'Trebuchet MS', 'Segoe UI', sans-serif;
  color:#fff4cf;
  text-shadow:0 4px 16px rgba(0,0,0,.42);
}
.wordMatchWordBtn::after{
  content:"";
  position:absolute;
  left:8px;
  right:16px;
  bottom:2px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,224,123,.95), rgba(255,255,255,.12));
  opacity:.22;
  transition:opacity .18s ease, transform .18s ease;
}
.wordMatchWordBtn.isSelected,
.wordMatchWordBtn.isMatched{
  color:#fff;
  filter:drop-shadow(0 0 15px rgba(255,216,117,.34));
}
.wordMatchWordBtn.isSelected::after,
.wordMatchWordBtn.isMatched::after{
  opacity:1;
  transform:scaleX(1.02);
}
.wordMatchWordBtn.isMatched{
  color:#b8ffd5;
}
.wordMatchWordBtn.isMatched::after{
  background:linear-gradient(90deg, rgba(123,255,185,.95), rgba(255,255,255,.12));
}
.wordMatchIconBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.wordMatchIconBtn img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
  transition:filter .18s ease, opacity .18s ease;
}
.wordMatchIconBtn.isSelected img{
  transform:scale(1.1);
  filter:drop-shadow(0 0 18px rgba(255,216,117,.42));
}
.wordMatchIconBtn.isMatched img{
  transform:scale(1.06);
  filter:drop-shadow(0 0 18px rgba(123,255,185,.40));
}
.wordMatchHint{
  width:min(100%,960px);
  min-height:34px;
  text-align:center;
  font:800 20px/1.3 'Trebuchet MS', 'Segoe UI', sans-serif;
  color:#ffe9a6;
  text-shadow:0 3px 12px rgba(0,0,0,.32);
}
.wordMatchControls{
  width:min(100%,960px);
  justify-content:center;
}
.wordMatchOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(19,12,44,.42);
  backdrop-filter:blur(10px);
  z-index:12000;
}
.wordMatchOverlay.isVisible{ display:flex; }
.wordMatchOverlayCard{
  width:min(100%,480px);
  background:linear-gradient(180deg,#fff7e7,#f6f0ff);
  border-radius:28px;
  padding:28px 24px 22px;
  text-align:center;
  box-shadow:0 24px 70px rgba(30,14,74,.28);
}
.wordMatchOverlayEmoji{ font-size:48px; line-height:1; margin-bottom:10px; }
.wordMatchOverlayTitle{ font:900 34px/1.05 'Trebuchet MS','Segoe UI',sans-serif; color:#4a3099; margin-bottom:8px; }
.wordMatchOverlayText{ font:700 18px/1.4 'Trebuchet MS','Segoe UI',sans-serif; color:#5b4c79; margin-bottom:18px; }
.wordMatchOverlayActions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
@keyframes wordMatchShake{
  0%{ transform:translateX(0);}
  25%{ transform:translateX(-6px);}
  50%{ transform:translateX(6px);}
  75%{ transform:translateX(-4px);}
  100%{ transform:translateX(0);}
}
@media (max-width: 820px){
  .wordMatchPage{ padding-top:18px; }
  .wordMatchBoardWrap{ width:min(100%,820px); min-height:500px; border-radius:28px; }
  .wordMatchWordBtn{ font-size:34px; }
  .wordMatchHint{ font-size:18px; }
}
@media (max-width: 640px){
  .wordMatchPage{ gap:8px; padding-top:10px; }
  .wordMatchBoardWrap{ min-height:390px; border-radius:22px; }
  .wordMatchBoardWrap::before{ inset:10px; border-radius:18px; }
  .wordMatchWordBtn{ font-size:22px; padding:6px 6px 10px; }
  .wordMatchWordBtn::after{ left:6px; right:10px; height:3px; }
  .wordMatchHint{ font-size:15px; min-height:28px; }
  .wordMatchOverlayTitle{ font-size:28px; }
  .wordMatchOverlayText{ font-size:16px; }
}


/* ===== Instrumenty / Perkusja ===== */
.instrumentyPage{
  gap:12px;
  padding-top:14px;
}
.instrumentySubtitle{
  max-width:720px;
  margin:0 auto 2px;
}
.instrumentyScore{
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.instrumentyScore .scorePill{
  min-height:54px;
  padding:0 22px;
  gap:10px;
  color:#fff4d0;
  font:900 18px/1 'Trebuchet MS','Segoe UI',sans-serif;
  background:rgba(8,8,14,.9);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.28);
}
.instrumentyScore .scorePill .icon{
  font-size:30px;
  line-height:1;
}
.instrumentyScore .scorePill .value{
  font-size:18px;
  letter-spacing:.01em;
}
.instrumentyScore .scoreBackPill.btnBack{
  min-width:74px;
  padding:0 18px;
  background:linear-gradient(180deg, rgba(91,173,255,.98), rgba(49,116,255,.94));
  box-shadow:0 0 22px rgba(66,146,255,.24), 0 12px 24px rgba(0,0,0,.24);
}
.instrumentyScore .scoreBackPill.btnBack .ctrlIcon{
  width:22px;
  height:22px;
  filter:brightness(0) invert(1);
}
.instrumentyPatternRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#f8eac2;
  text-shadow:0 0 18px rgba(255,214,107,.2);
  font:800 18px/1 'Trebuchet MS','Segoe UI',sans-serif;
}
.instrumentyPatternLabel{
  opacity:.84;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}
.instrumentyPatternDots{
  min-width:120px;
  text-align:center;
  color:#fff5c0;
  letter-spacing:.18em;
}
.instrumentyBoard{
  position:relative;
  width:min(100%,780px);
  min-height:600px;
  margin:0 auto;
  border-radius:38px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 56%, rgba(120,180,255,.14), transparent 17%),
    radial-gradient(circle at 18% 18%, rgba(84,166,255,.14), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(191,103,255,.16), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(255,219,145,.08), transparent 18%),
    linear-gradient(180deg, rgba(22,12,61,.94), rgba(11,9,39,.96));
  border:1px solid rgba(180,149,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
}
.instrumentyBoard::before{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:30px;
  border:1px solid rgba(173,133,255,.08);
  pointer-events:none;
}
.instrumentyBoard::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 74%, rgba(255,225,156,.10), transparent 10%),
    linear-gradient(transparent 78%, rgba(0,0,0,.12));
}
.instrumentyDrums{
  position:relative;
  width:100%;
  min-height:inherit;
  height:100%;
}
.instrumentyFloat{
  position:absolute;
  will-change:transform;
}
.instrumentyFloat--crash{ left:5%; top:9%; width:18%; max-width:150px; z-index:2; }
.instrumentyFloat--ride{ right:5%; top:9%; width:19%; max-width:158px; z-index:2; }
.instrumentyFloat--tom{ left:50%; top:15%; width:21%; max-width:170px; transform:translateX(-50%); z-index:3; }
.instrumentyFloat--hat{ left:8%; top:43%; width:16%; max-width:122px; z-index:2; }
.instrumentyFloat--snare{ left:18%; top:56%; width:18%; max-width:138px; z-index:3; }
.instrumentyFloat--kick{ left:52%; bottom:6%; width:31%; max-width:240px; transform:translateX(-50%); z-index:1; }
.drumPad{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  padding:0 0 42px;
  border:none;
  border-radius:0;
  cursor:pointer;
  color:#fff8df;
  background:none;
  box-shadow:none;
  transition:transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.drumPad:hover{ transform:scale(1.02); }
.drumPad:active,
.drumPad.isHot{ transform:scale(.98); filter:brightness(1.08); }
.drumPad.isCue .drumPadArt{
  filter:drop-shadow(0 0 24px rgba(255,225,118,.58)) drop-shadow(0 14px 24px rgba(0,0,0,.26));
}
.drumPad.isSuccess .drumPadArt{
  filter:drop-shadow(0 0 18px rgba(95,255,201,.52)) drop-shadow(0 14px 24px rgba(0,0,0,.26));
}
.drumPad.isWrong{
  animation:instrumentyWrong .32s ease;
}
.drumPad.isWrong .drumPadArt{
  filter:drop-shadow(0 0 18px rgba(255,114,114,.55)) drop-shadow(0 14px 24px rgba(0,0,0,.26));
}
@keyframes instrumentyWrong{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-4px); }
}
.drumPadArt{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.30));
}
.drumPadLabel{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  padding:8px 14px;
  border-radius:999px;
  font:900 15px/1 'Trebuchet MS','Segoe UI',sans-serif;
  letter-spacing:.01em;
  white-space:nowrap;
  color:#fff8df;
  text-shadow:0 2px 12px rgba(0,0,0,.36);
  background:rgba(22,18,52,.88);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.18);
  pointer-events:none;
}
.instrumentyHint{
  min-height:30px;
  max-width:780px;
  margin:0 auto;
  color:#f6de95;
  font:800 19px/1.35 'Trebuchet MS','Segoe UI',sans-serif;
  text-align:center;
  text-shadow:0 3px 18px rgba(0,0,0,.24);
}
.instrumentyControls{
  max-width:780px;
  margin:0 auto;
  justify-content:center;
  gap:14px;
}
.instrumentyControls #instrumentyRestartBtn,
.instrumentyControls #instrumentyPlayBtn,
.instrumentyControls #instrumentyModeBtn,
.instrumentyControls #instrumentySwitchBtn{
  min-height:58px;
  padding:0 24px;
  border:none;
  border-radius:999px;
  font:900 18px/1 'Trebuchet MS','Segoe UI',sans-serif;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.24);
}
.instrumentyControls #instrumentyRestartBtn{
  width:64px;
  min-width:64px;
  padding:0;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(91,173,255,.98), rgba(49,116,255,.94));
}
.instrumentyControls #instrumentyRestartBtn .ctrlIcon{
  width:28px;
  height:28px;
  filter:brightness(0) invert(1);
}
.instrumentyControls #instrumentyPlayBtn{
  min-width:min(320px, 100%);
  color:#192100;
  background:linear-gradient(180deg, rgba(206,234,111,.98), rgba(177,221,72,.95));
  box-shadow:0 0 22px rgba(182,223,72,.18), 0 12px 24px rgba(0,0,0,.24);
}
.instrumentyControls #instrumentyModeBtn,
.instrumentyControls #instrumentySwitchBtn{
  min-width:220px;
  color:#fff;
  background:linear-gradient(180deg, rgba(150,88,255,.98), rgba(108,54,231,.94));
}
.instrumentyControls #instrumentySwitchBtn.isFlute{
  background:linear-gradient(180deg, rgba(91,173,255,.98), rgba(49,116,255,.94));
}
.instrumentyOverlayCard{
  background:linear-gradient(180deg, rgba(255,251,240,.98), rgba(245,236,255,.98));
}
@media (max-width: 900px){
  .instrumentyBoard{ min-height:560px; }
  .instrumentyFloat--crash{ left:4%; top:10%; width:19%; }
  .instrumentyFloat--ride{ right:4%; top:10%; width:20%; }
  .instrumentyFloat--tom{ top:17%; width:22%; }
  .instrumentyFloat--hat{ left:6%; top:44%; width:16%; }
  .instrumentyFloat--snare{ left:16%; top:58%; width:18%; }
  .instrumentyFloat--kick{ left:52%; width:32%; bottom:7%; }
}
@media (max-width: 680px){
  .instrumentyPage{ gap:8px; padding-top:10px; }
  .instrumentyScore{ gap:10px; }
  .instrumentyScore .scorePill{ min-height:48px; padding:0 18px; }
  .instrumentyScore .scorePill .icon{ font-size:24px; }
  .instrumentyScore .scorePill .value{ font-size:16px; }
  .instrumentyPatternRow{ font-size:15px; }
  .instrumentyBoard{ min-height:470px; border-radius:24px; }
  .instrumentyBoard::before{ inset:10px; border-radius:18px; }
  .instrumentyFloat--crash{ left:2%; top:10%; width:22%; }
  .instrumentyFloat--ride{ right:2%; top:10%; width:23%; }
  .instrumentyFloat--tom{ top:18%; width:26%; }
  .instrumentyFloat--hat{ left:3%; top:44%; width:18%; }
  .instrumentyFloat--snare{ left:14%; top:61%; width:17%; }
  .instrumentyFloat--kick{ left:54%; width:33%; bottom:6%; }
  .drumPad{ padding-bottom:34px; }
  .drumPadLabel{ font-size:12px; padding:6px 10px; }
  .instrumentyHint{ font-size:15px; min-height:26px; }
  .instrumentyControls{ gap:10px; }
  .instrumentyControls #instrumentyRestartBtn,
  .instrumentyControls #instrumentyPlayBtn,
  .instrumentyControls #instrumentyModeBtn,
  .instrumentyControls #instrumentySwitchBtn{
    min-height:54px;
    font-size:17px;
  }
  .instrumentyControls #instrumentyPlayBtn{
    min-width:min(290px, 100%);
  }
  .instrumentyControls #instrumentyModeBtn,
  .instrumentyControls #instrumentySwitchBtn{
    min-width:180px;
    padding:0 20px;
  }
}

/* ===== Instrumenty / Flet ===== */
.instrumentyDrums[hidden],
.instrumentyFlute[hidden],
.instrumentyPiano[hidden]{
  display:none !important;
}
.instrumentyBoard.isFlute{
  min-height:500px;
}
.instrumentyBoard.isFlute::after{
  background:
    radial-gradient(circle at 22% 26%, rgba(114,196,255,.14), transparent 16%),
    radial-gradient(circle at 78% 72%, rgba(255,222,133,.10), transparent 14%),
    linear-gradient(transparent 75%, rgba(0,0,0,.14));
}
.instrumentyFlute{
  position:relative;
  min-height:500px;
  height:100%;
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fluteAura{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  pointer-events:none;
  opacity:.6;
}
.fluteAura--a{
  width:220px; height:220px;
  left:8%; top:16%;
  background:radial-gradient(circle, rgba(99,183,255,.35), transparent 68%);
}
.fluteAura--b{
  width:260px; height:260px;
  right:6%; bottom:8%;
  background:radial-gradient(circle, rgba(255,221,118,.26), transparent 70%);
}
.fluteMicCard{
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  width:min(420px, calc(100% - 40px));
  padding:0;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none;
  text-align:center;
  z-index:3;
}
.fluteMicTop{
  display:block;
  margin-bottom:8px;
}
.fluteMicTitle{
  display:none;
}
.fluteMicState{
  display:block;
  color:#fff3cf;
  font:900 clamp(18px, 2.9vw, 28px)/1 'Trebuchet MS','Segoe UI',sans-serif;
  text-align:center;
  opacity:1;
  text-shadow:0 2px 14px rgba(0,0,0,.32);
}
.fluteMeter{
  position:relative;
  height:10px;
  width:min(320px, calc(100vw - 80px));
  margin:0 auto;
  border-radius:999px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
}
.fluteMeterFill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #53c8ff, #8effd4 55%, #ffe690 100%);
  box-shadow:0 0 16px rgba(142,255,212,.30);
  transition:width .08s linear;
}
.fluteMeterHint{
  display:none !important;
}
.fluteCenterPrompt{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(78%, 640px);
  color:#fff3cf;
  text-align:center;
  font:900 clamp(20px, 3vw, 34px)/1.15 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 3px 20px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:2;
}
.fluteCenterPrompt.isVisible{
  opacity:1;
}
.fluteStage{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fluteBreathGlow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 52%, rgba(154,255,215,.22), transparent 18%), radial-gradient(circle at 50% 52%, rgba(255,226,139,.12), transparent 28%);
  transition:opacity .12s ease;
}
.fluteBreathGlow.isActive{ opacity:1; }
.fluteBody{
  position:relative;
  width:min(860px, calc(100% - 40px));
  height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fluteMouthpiece{
  position:absolute;
  left:2%; top:50%;
  width:76px; height:58px;
  transform:translateY(-50%);
  border-radius:18px 22px 22px 18px;
  background:linear-gradient(180deg, #f4e8c9, #d5b77f);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.30), inset 0 -5px 10px rgba(108,71,13,.18), 0 14px 26px rgba(0,0,0,.18);
}
.fluteMouthpiece::after{
  content:'';
  position:absolute;
  right:14px; top:50%;
  width:14px; height:14px;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgba(60,39,14,.72);
  box-shadow:0 0 0 2px rgba(255,255,255,.10);
}
.fluteBodyCore{
  position:absolute;
  left:10%; right:4%; top:50%;
  height:58px;
  transform:translateY(-50%);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.08) 28%, rgba(0,0,0,.08) 52%, rgba(255,255,255,.24) 74%, rgba(255,255,255,.08)),
    linear-gradient(90deg, #f9e09b 0%, #dfb25f 18%, #f6db99 36%, #ca9440 52%, #ffe39e 68%, #cf9546 84%, #f7dc9a 100%);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.36), inset 0 -6px 10px rgba(78,55,12,.18), 0 20px 40px rgba(0,0,0,.18);
}
.fluteBodyCore::before,
.fluteBodyCore::after{
  content:'';
  position:absolute;
  top:7px; bottom:7px;
  width:4px;
  border-radius:999px;
  background:rgba(108,76,21,.36);
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
.fluteBodyCore::before{ left:18%; }
.fluteBodyCore::after{ right:14%; }
.fluteKeys{
  position:absolute;
  left:20%; right:11%; top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.fluteHole{
  position:relative;
  width:60px; height:60px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,245,215,.84) 44%, rgba(191,142,57,.82) 72%, rgba(97,61,12,.92) 100%);
  box-shadow:0 10px 20px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.42), inset 0 -4px 6px rgba(88,56,11,.20);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.fluteHole::after{
  content:'';
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.90), rgba(33,24,10,.96));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.06);
}
.fluteHole:hover{ transform:translateY(-2px) scale(1.03); }
.fluteHole:active,
.fluteHole.isClosed{ filter:drop-shadow(0 0 12px rgba(255,231,149,.18)); }
.fluteHole.isClosed::after{
  background:radial-gradient(circle at 50% 42%, rgba(10,10,14,.96), rgba(5,5,8,.99));
}
.fluteHole.isOpen{
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.98), rgba(255,248,233,.92) 46%, rgba(230,205,141,.82) 72%, rgba(126,91,29,.90) 100%);
}
.fluteHole.isOpen::after{
  inset:15px;
  background:radial-gradient(circle at 50% 42%, rgba(255,236,193,.84), rgba(243,208,133,.62));
  box-shadow:0 0 14px rgba(255,227,160,.34), inset 0 1px 1px rgba(255,255,255,.40);
}
.fluteHole.isHot{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 0 0 4px rgba(146,255,219,.12), 0 12px 24px rgba(0,0,0,.24), 0 0 22px rgba(146,255,219,.30);
}
.fluteNoteBadge{
  position:absolute;
  right:6%; top:22%;
  min-width:84px;
  padding:10px 16px;
  border-radius:999px;
  text-align:center;
  color:#fff6d8;
  font:900 22px/1 'Trebuchet MS','Segoe UI',sans-serif;
  letter-spacing:.05em;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 26px rgba(0,0,0,.18);
  text-shadow:0 3px 12px rgba(0,0,0,.32);
}
.instrumentyControls #instrumentySwitchBtn{
  border-color:rgba(140,225,255,.24);
}
.instrumentyControls #instrumentySwitchBtn.isFlute{
  background:linear-gradient(180deg, rgba(130,214,255,.18), rgba(110,143,255,.10));
}
@media (max-width: 900px){
  .instrumentyBoard.isFlute{ min-height:470px; }
  .instrumentyFlute{ min-height:470px; padding:22px 22px; }
  .fluteMicCard{ left:50%; top:18px; transform:translateX(-50%); width:min(340px, calc(100% - 32px)); }
  .fluteBody{ width:min(780px, calc(100% - 20px)); }
  .fluteKeys{ left:22%; right:12%; }
  .fluteHole{ width:54px; height:54px; }
  .fluteNoteBadge{ font-size:20px; top:18%; }
}
@media (max-width: 680px){
  .instrumentyBoard.isFlute{ min-height:420px; }
  .instrumentyFlute{ min-height:420px; padding:16px; }
  .fluteMicCard{ position:absolute; left:50%; top:14px; transform:translateX(-50%); width:min(320px, calc(100% - 24px)); margin-bottom:0; }
  .fluteStage{ min-height:282px; }
  .fluteBody{ width:min(100%, 560px); height:152px; }
  .fluteMouthpiece{ width:58px; height:34px; }
  .fluteBodyCore{ height:34px; }
  .fluteKeys{ left:23%; right:10%; gap:8px; }
  .fluteHole{ width:34px; height:34px; }
  .fluteHole::after{ inset:7px; }
  .fluteHole.isOpen::after{ inset:9px; }
  .fluteNoteBadge{ right:2%; top:auto; bottom:-8px; min-width:72px; padding:8px 12px; font-size:18px; }
  .fluteMeterHint{ font-size:12px; }
}


/* ===== Instrumenty / Gitara ===== */
.instrumentyGuitar[hidden]{
  display:none !important;
}
.instrumentyBoard.isGuitar{
  min-height:540px;
}
.instrumentyBoard.isGuitar::after{
  background:
    radial-gradient(circle at 16% 24%, rgba(255,133,133,.14), transparent 16%),
    radial-gradient(circle at 84% 30%, rgba(92,175,255,.14), transparent 16%),
    linear-gradient(transparent 72%, rgba(0,0,0,.16));
}
.instrumentyGuitar{
  position:relative;
  min-height:540px;
  padding:24px 28px 26px;
}
.guitarAura{
  position:absolute;
  border-radius:50%;
  filter:blur(52px);
  pointer-events:none;
  opacity:.6;
}
.guitarAura--a{
  width:220px; height:220px;
  left:6%; top:10%;
  background:radial-gradient(circle, rgba(255,114,114,.28), transparent 70%);
}
.guitarAura--b{
  width:260px; height:260px;
  right:4%; bottom:6%;
  background:radial-gradient(circle, rgba(94,165,255,.24), transparent 72%);
}
.guitarConsole{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.guitarBadge{
  align-self:flex-start;
  padding:12px 18px;
  border-radius:18px;
  color:#fff3cf;
  font:900 18px/1 'Trebuchet MS','Segoe UI',sans-serif;
  background:linear-gradient(180deg, rgba(22,18,52,.92), rgba(12,12,24,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12);
}
.guitarFretRail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.guitarFretBtn{
  min-width:48px;
  min-height:42px;
  padding:0 12px;
  border:none;
  border-radius:16px;
  color:#fff8df;
  font:900 16px/1 'Trebuchet MS','Segoe UI',sans-serif;
  background:linear-gradient(180deg, rgba(18,20,44,.94), rgba(10,12,28,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 20px rgba(0,0,0,.22);
  cursor:pointer;
}
.guitarFretBtn.isActive{
  color:#1a1400;
  background:linear-gradient(180deg, rgba(255,230,143,.98), rgba(236,195,84,.96));
  box-shadow:0 0 20px rgba(255,212,110,.22), 0 12px 20px rgba(0,0,0,.22);
}
.guitarStage{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:0;
  margin-top:26px;
  min-height:350px;
}
.guitarHeadstock{
  width:74px;
  min-width:74px;
  height:320px;
  border-radius:22px 0 0 22px;
  background:
    radial-gradient(circle at 42% 12%, rgba(255,255,255,.28), transparent 14%),
    linear-gradient(180deg, #2c2f3b 0%, #12131d 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 28px rgba(0,0,0,.22);
}
.guitarNeck{
  position:relative;
  flex:1;
  min-height:320px;
  border-radius:0 26px 26px 0;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(77,22,18,.96), rgba(95,19,17,.98) 48%, rgba(60,10,10,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.26);
}
.guitarFrets{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, transparent 0 calc(100%/13 - 4px), rgba(235,235,235,.78) calc(100%/13 - 4px) calc(100%/13), transparent calc(100%/13) calc(100%/13 + 1px));
}
.guitarMarkers{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.guitarMarker{
  position:absolute;
  top:50%;
  width:44px;
  height:104px;
  margin-top:-52px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(77,16,16,.92);
  font:900 18px/1 'Trebuchet MS','Segoe UI',sans-serif;
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 20px rgba(0,0,0,.12);
}
.guitarMarker.m3{ left:calc((3 / 13) * 100% - 22px); }
.guitarMarker.m5{ left:calc((5 / 13) * 100% - 22px); }
.guitarMarker.m7{ left:calc((7 / 13) * 100% - 22px); }
.guitarMarker.m9{ left:calc((9 / 13) * 100% - 22px); }
.guitarMarker.m12{ left:calc((12 / 13) * 100% - 22px); }
.guitarStrings{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:repeat(6, 1fr);
  padding:10px 0;
}
.guitarString{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.guitarString::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  opacity:0;
  transition:opacity .12s ease;
}
.guitarString:hover::after,
.guitarString.isHot::after{
  opacity:1;
}
.guitarString.isHot .guitarStringLine{
  box-shadow:0 0 14px rgba(255,238,159,.52);
}
.guitarStringName,
.guitarStringNote{
  position:relative;
  z-index:2;
  min-width:44px;
  text-align:center;
  color:#fff6d7;
  font:900 16px/1 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.30);
}
.guitarStringName{ margin-left:12px; }
.guitarStringNote{ margin-left:auto; margin-right:14px; opacity:.92; }
.guitarStringLine{
  position:absolute;
  left:44px;
  right:54px;
  top:50%;
  height:4px;
  margin-top:-2px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(148,148,148,.92));
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.12);
}
.guitarString[data-string="0"] .guitarStringLine{ height:2px; margin-top:-1px; opacity:.88; }
.guitarString[data-string="1"] .guitarStringLine{ height:2.4px; margin-top:-1.2px; }
.guitarString[data-string="2"] .guitarStringLine{ height:2.8px; margin-top:-1.4px; }
.guitarString[data-string="3"] .guitarStringLine{ height:3.1px; margin-top:-1.55px; }
.guitarString[data-string="4"] .guitarStringLine{ height:3.4px; margin-top:-1.7px; }
.guitarString[data-string="5"] .guitarStringLine{ height:3.8px; margin-top:-1.9px; }
@keyframes guitarPluck{
  0%{ transform:translateY(0); }
  18%{ transform:translateY(-3px); }
  36%{ transform:translateY(2px); }
  54%{ transform:translateY(-1.5px); }
  72%{ transform:translateY(1px); }
  100%{ transform:translateY(0); }
}
.guitarString.isHot .guitarStringLine{
  animation:guitarPluck .28s ease;
}

.guitarAirPointer{
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.94);
  pointer-events:none;
  z-index:8;
  opacity:0;
  transform:translate(-9999px,-9999px);
  transition:transform 70ms linear, opacity 80ms ease, box-shadow 80ms ease, background 80ms ease;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.guitarAirPointer::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.24);
  opacity:.42;
}
.guitarAirPointer--left{
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(97,196,255,.94) 58%, rgba(31,106,255,.96) 100%);
  box-shadow:0 0 0 3px rgba(78,162,255,.18), 0 0 22px rgba(78,162,255,.52);
}
.guitarAirPointer--right{
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(255,138,173,.94) 58%, rgba(255,75,130,.96) 100%);
  box-shadow:0 0 0 3px rgba(255,111,145,.18), 0 0 22px rgba(255,111,145,.52);
}
.guitarAirPointer.isActive{
  box-shadow:0 0 0 4px rgba(255,235,176,.18), 0 0 28px rgba(255,222,122,.72);
}

@media (max-width: 900px){
  .instrumentyBoard.isGuitar{ min-height:510px; }
  .instrumentyGuitar{ min-height:510px; padding:22px 20px 22px; }
  .guitarStage{ min-height:320px; }
  .guitarHeadstock{ width:58px; min-width:58px; height:292px; }
  .guitarNeck{ min-height:292px; }
  .guitarMarker{ width:36px; margin-top:-48px; height:96px; }
}
@media (max-width: 680px){
  .instrumentyBoard.isGuitar{ min-height:470px; }
  .instrumentyGuitar{ min-height:470px; padding:16px; }
  .guitarBadge{ font-size:16px; padding:10px 14px; }
  .guitarFretRail{ gap:6px; }
  .guitarFretBtn{ min-width:42px; min-height:38px; border-radius:14px; font-size:14px; }
  .guitarStage{ margin-top:18px; min-height:272px; }
  .guitarHeadstock{ width:42px; min-width:42px; height:250px; border-radius:16px 0 0 16px; }
  .guitarNeck{ min-height:250px; border-radius:0 18px 18px 0; }
  .guitarStringName,
  .guitarStringNote{ font-size:13px; min-width:34px; }
  .guitarStringName{ margin-left:6px; }
  .guitarStringNote{ margin-right:8px; }
  .guitarStringLine{ left:32px; right:38px; }
  .guitarMarker{ width:28px; height:76px; margin-top:-38px; font-size:13px; border-radius:10px; }
}



/* ===== Instrumenty / Mini piano ===== */
.instrumentyBoard.isPiano{
  min-height:500px;
}
.instrumentyBoard.isPiano::after{
  background:
    radial-gradient(circle at 18% 18%, rgba(91,173,255,.18), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,125,184,.16), transparent 20%),
    linear-gradient(transparent 74%, rgba(0,0,0,.12));
}
.instrumentyPiano{
  position:relative;
  min-height:500px;
  height:100%;
  padding:22px 22px 18px;
  box-sizing:border-box;
}
.pianoMiniAura{
  position:absolute;
  border-radius:50%;
  filter:blur(52px);
  pointer-events:none;
  opacity:.65;
}
.pianoMiniAura--a{
  width:200px; height:200px;
  left:2%; top:10%;
  background:radial-gradient(circle, rgba(85,165,255,.30), transparent 72%);
}
.pianoMiniAura--b{
  width:240px; height:240px;
  right:2%; bottom:4%;
  background:radial-gradient(circle, rgba(255,208,102,.25), transparent 72%);
}
.pianoMiniTop{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
}
.pianoMiniMascot{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:linear-gradient(180deg, rgba(18,20,44,.94), rgba(10,12,28,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 20px rgba(0,0,0,.22);
}
.pianoMiniTitle{
  color:#fff7da;
  font:900 24px/1 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.pianoMiniBadge{
  padding:10px 14px;
  border-radius:999px;
  color:#1d1400;
  font:900 15px/1 'Trebuchet MS','Segoe UI',sans-serif;
  background:linear-gradient(180deg, rgba(255,231,138,.98), rgba(236,196,85,.96));
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.pianoMiniStage{
  position:relative;
  z-index:1;
  height:calc(100% - 60px);
  border-radius:28px;
  padding:22px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(23,18,58,.82), rgba(10,10,35,.88));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.20);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.pianoMiniNotes{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:18px;
  font-size:28px;
  opacity:.92;
}
.pianoMiniKeys{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:10px;
  align-items:end;
}
.pianoMiniKey{
  position:relative;
  min-height:220px;
  border:none;
  border-radius:22px;
  color:#1d1400;
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.48), 0 12px 22px rgba(0,0,0,.20);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.pianoMiniKey::before{
  content:'';
  position:absolute;
  inset:10px 10px auto;
  height:40%;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.04));
  pointer-events:none;
}
.pianoMiniKey:hover{ transform:translateY(-2px); }
.pianoMiniKey:active,
.pianoMiniKey.isHot{
  transform:translateY(4px) scale(.985);
  filter:brightness(1.04);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), 0 8px 14px rgba(0,0,0,.16), 0 0 0 4px rgba(255,255,255,.10);
}
.pianoMiniKeyNote,
.pianoMiniKeyLetter{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 1px 0 rgba(255,255,255,.24);
}
.pianoMiniKeyNote{
  bottom:58px;
  font-size:24px;
  font-weight:900;
}
.pianoMiniKeyLetter{
  bottom:24px;
  font-size:14px;
  font-weight:900;
  opacity:.70;
}
.pianoMiniKey.isLetterMode .pianoMiniKeyNote{ bottom:46px; font-size:28px; }
.pianoMiniKey.isLetterMode .pianoMiniKeyLetter{ opacity:0; }
.pianoMiniKey.isC{ background:linear-gradient(180deg, #ff8d8d, #ff6b6b); }
.pianoMiniKey.isD{ background:linear-gradient(180deg, #ffb870, #ff9e39); }
.pianoMiniKey.isE{ background:linear-gradient(180deg, #ffe27c, #ffcf42); }
.pianoMiniKey.isF{ background:linear-gradient(180deg, #9be27b, #6fcf4a); }
.pianoMiniKey.isG{ background:linear-gradient(180deg, #76d5ff, #48b4ff); }
.pianoMiniKey.isA{ background:linear-gradient(180deg, #99b4ff, #6688ff); }
.pianoMiniKey.isB{ background:linear-gradient(180deg, #d69dff, #b56cff); }
@media (max-width: 900px){
  .instrumentyBoard.isPiano{ min-height:470px; }
  .instrumentyPiano{ min-height:470px; padding:18px 18px 16px; }
  .pianoMiniKey{ min-height:190px; border-radius:18px; }
  .pianoMiniTitle{ font-size:22px; }
}
@media (max-width: 680px){
  .instrumentyBoard.isPiano{ min-height:420px; }
  .instrumentyPiano{ min-height:420px; padding:14px; }
  .pianoMiniTop{ gap:8px; margin-bottom:10px; }
  .pianoMiniMascot{ width:40px; height:40px; font-size:20px; border-radius:14px; }
  .pianoMiniTitle{ font-size:18px; }
  .pianoMiniBadge{ font-size:12px; padding:8px 10px; }
  .pianoMiniStage{ padding:16px 12px 12px; border-radius:22px; }
  .pianoMiniNotes{ margin-bottom:12px; gap:10px; font-size:22px; }
  .pianoMiniKeys{ gap:6px; }
  .pianoMiniKey{ min-height:150px; border-radius:14px; }
  .pianoMiniKey::before{ inset:8px 8px auto; border-radius:12px; }
  .pianoMiniKeyNote{ bottom:40px; font-size:18px; }
  .pianoMiniKeyLetter{ bottom:16px; font-size:11px; }
  .pianoMiniKey.isLetterMode .pianoMiniKeyNote{ bottom:34px; font-size:22px; }
}

/* ===== Instrumenty layout sync with Kategorie ===== */

.instrumentyTopInstrumentPill,
.instrumentyTopInstrumentPill[hidden]{
  display:none !important;
}

.instrumentyPage{
  gap:10px;
}

.instrumentyPatternRow{
  min-height:28px;
}

.instrumentyBoard,
.instrumentyBoard.isFlute,
.instrumentyBoard.isGuitar,
.instrumentyBoard.isPiano{
  height:clamp(420px, 62vw, 560px) !important;
  min-height:clamp(420px, 62vw, 560px) !important;
}

.instrumentyDrums,
.instrumentyFlute,
.instrumentyGuitar,
.instrumentyPiano{
  height:100%;
  min-height:0 !important;
}

.instrumentyFlute,
.instrumentyGuitar,
.instrumentyPiano{
  box-sizing:border-box;
}

.guitarBadge{
  display:none !important;
}

.instrumentyControls{
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-wrap:nowrap !important;
  justify-content:center;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.instrumentyControls::-webkit-scrollbar{ display:none; }

.instrumentyIconBtn{
  flex:0 0 auto;
}

.instrumentyControls #instrumentyPlayBtn,
.instrumentyControls #instrumentyModeBtn,
.instrumentyControls #instrumentyAirBtn,
.instrumentyControls #instrumentyRestartBtn{
  width:56px !important;
  min-width:56px !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  border-radius:16px !important;
  font-size:24px !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
}

.instrumentyControls #instrumentyPlayBtn{
  background:linear-gradient(135deg, rgba(60,220,120,.95), rgba(30,160,90,.9)) !important;
  box-shadow:0 8px 22px rgba(30,160,90,.28) !important;
}

.instrumentyControls #instrumentyModeBtn{
  background:linear-gradient(135deg, rgba(80,170,255,.95), rgba(45,110,255,.9)) !important;
  box-shadow:0 8px 22px rgba(45,110,255,.25) !important;
  color:#fff !important;
}

.instrumentyControls #instrumentyAirBtn{
  background:linear-gradient(135deg, rgba(170,110,255,.96), rgba(110,75,240,.92)) !important;
  box-shadow:0 8px 22px rgba(96,70,210,.28) !important;
  color:#fff !important;
  font-size:23px !important;
}

.instrumentyControls #instrumentyAirBtn.isOff{
  background:linear-gradient(135deg, rgba(90,100,120,.95), rgba(55,65,85,.92)) !important;
  box-shadow:0 8px 22px rgba(25,30,45,.26) !important;
}

.instrumentyControls #instrumentyAirBtn.isPending{
  opacity:.82;
}

.instrumentyControls #instrumentyRestartBtn{
  background:linear-gradient(135deg, rgba(255,190,70,.95), rgba(235,120,30,.9)) !important;
  box-shadow:0 8px 22px rgba(235,120,30,.25) !important;
}

.instrumentyBtnSvg,
.instrumentyControls #instrumentyRestartBtn .ctrlIcon{
  width:28px;
  height:28px;
  display:block;
  filter:brightness(0) invert(1);
}

.instrumentyBtnEmoji{
  font-size:24px;
  line-height:1;
}

.instrumentyBtnSvg[hidden],
.instrumentyBtnEmoji[hidden]{
  display:none !important;
}

.instrumentyNav{
  margin-left:2px;
}

.instrumentyLabelBtn{
  cursor:pointer;
}

.instrumentyLabelBtn .catIcon{
  font-size:20px;
}

.instrumentyLabelBtn .catText{
  font-size:15px;
  font-weight:900;
}

@media (max-width: 680px){
  .instrumentyBoard,
  .instrumentyBoard.isFlute,
  .instrumentyBoard.isGuitar,
  .instrumentyBoard.isPiano{
    height:420px !important;
    min-height:420px !important;
  }

  .instrumentyControls{
    justify-content:flex-start;
  }

  .instrumentyNav{
    grid-template-columns:56px 196px 56px !important;
  }

  .instrumentyLabelBtn{
    width:196px !important;
  }

  .instrumentyHint{
    font-size:15px;
  }
}


/* ===== Mini pianino - bardziej jak prawdziwe pianino ===== */
.instrumentyPiano{
  min-height: 500px;
}
.pianoMiniTop--real{
  margin-bottom: 14px;
}
.pianoMiniStage--real{
  position: relative;
  padding: 18px 18px 30px;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
.pianoMiniStage--real::after{
  content:'';
  position:absolute;
  left:10%;
  right:10%;
  bottom:0;
  height:34px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 50%, rgba(0,0,0,0) 72%);
  filter: blur(10px);
  pointer-events:none;
}
.pianoMiniKeyboard{
  position: relative;
  overflow: visible;
  width: min(100%, 740px);
  padding: 54px 18px 22px;
  border-radius: 34px 34px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 12%, rgba(0,0,0,0) 14%),
    linear-gradient(180deg, #3a2476 0%, #1a1337 38%, #0a0714 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -18px 24px rgba(0,0,0,0.34),
    0 30px 44px rgba(0,0,0,0.44);
  transform: perspective(1400px) rotateX(15deg);
  transform-style: preserve-3d;
}
.pianoMiniKeyboard::before{
  content:'';
  position:absolute;
  left:3%;
  right:3%;
  top:14px;
  height:34px;
  border-radius:18px 18px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)),
    linear-gradient(180deg, #23164a, #0e0a1f 88%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -6px 10px rgba(0,0,0,0.34),
    0 6px 12px rgba(0,0,0,0.20);
  pointer-events:none;
}
.pianoMiniKeyboard::after{
  content:'';
  position:absolute;
  left:1.6%;
  right:1.6%;
  bottom:-14px;
  height:24px;
  border-radius:0 0 24px 24px;
  background: linear-gradient(180deg, #130c28 0%, #040208 100%);
  transform: rotateX(-62deg);
  transform-origin: top center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.30);
  pointer-events:none;
}
.pianoMiniWhiteKeys{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: 24px;
  padding: 0 8px 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pianoMiniWhiteKeys::before{
  content:'';
  position:absolute;
  left:4%;
  right:4%;
  top:-10px;
  height:18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
  filter: blur(10px);
  pointer-events:none;
}
.pianoMiniBlackKeys{
  pointer-events: none;
  position: absolute;
  left: 24px;
  right: 24px;
  top: 58px;
  height: 56%;
  z-index: 4;
}
.pianoMiniKey{
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border: 0;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.pianoMiniKey--white{
  min-height: 250px;
  border-radius: 0 0 20px 20px;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 44%, #dfe5ef 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -10px 16px rgba(0,0,0,0.10),
    0 14px 18px rgba(0,0,0,0.18);
}
.pianoMiniKey--white::before{
  content:'';
  position:absolute;
  inset: 10px 12px auto;
  height: 56%;
  border-radius: 0 0 14px 14px;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.30)),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
  pointer-events:none;
}
.pianoMiniKey--white::after{
  content:'';
  position:absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 22%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(209,216,229,0.85), rgba(244,247,252,0.06));
  pointer-events:none;
}
.pianoMiniKey--white.pianoMiniKey--last::after{
  display:block;
}
.pianoMiniKey--black{
  pointer-events: auto;
  position: absolute;
  top: 0;
  width: calc((100% / 8) * 0.58);
  transform: translateX(-50%);
  transform-origin: top center;
  max-width: 54px;
  min-width: 34px;
  height: 66%;
  border-radius: 0 0 12px 12px;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #484f61 0%, #1b1f29 36%, #05070d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 14px rgba(0,0,0,0.55),
    0 10px 18px rgba(0,0,0,0.42);
}
.pianoMiniKey--black::before{
  content:'';
  position:absolute;
  inset: 6px 7px auto;
  height: 26%;
  border-radius: 0 0 8px 8px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0));
}
.pianoMiniBlackKeys .pos-cs{ left: 12.5%; }
.pianoMiniBlackKeys .pos-ds{ left: 25%; }
.pianoMiniBlackKeys .pos-fs{ left: 50%; }
.pianoMiniBlackKeys .pos-gs{ left: 62.5%; }
.pianoMiniBlackKeys .pos-as{ left: 75%; }
.pianoMiniKeyNote,
.pianoMiniKeyLetter{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:'Baloo 2', system-ui, sans-serif;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.40);
}
.pianoMiniKey--white .pianoMiniKeyNote{
  bottom: 48px;
  font-size: 18px;
  font-weight: 800;
  color:#1d2432;
}
.pianoMiniKey--white .pianoMiniKeyLetter{
  bottom: 22px;
  font-size: 12px;
  font-weight: 700;
  color:#5c6476;
}
.pianoMiniKey--black .pianoMiniKeyNote{
  bottom: 18px;
  font-size: 11px;
  font-weight: 800;
  color:#f5f7ff;
  text-shadow:none;
}
.pianoMiniKey--black .pianoMiniKeyLetter{
  display:none;
}
.pianoMiniKey.isLetterMode .pianoMiniKeyNote{
  font-size: 22px;
}
.pianoMiniKey--black.isLetterMode .pianoMiniKeyNote{
  font-size: 12px;
}
.pianoMiniKey:active,
.pianoMiniKey.isHot{
  filter: saturate(1.08);
}
.pianoMiniKey--white:active,
.pianoMiniKey--white.isHot{
  transform: translateY(6px) scaleY(0.988);
  background: linear-gradient(180deg, #fff6ca 0%, #f4e8ab 50%, #e5d684 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -6px 10px rgba(0,0,0,0.16),
    0 8px 12px rgba(0,0,0,0.16);
}
.pianoMiniKey--black:active,
.pianoMiniKey--black.isHot{
  transform: translateX(-50%) translateY(4px) scaleY(0.99);
  background: linear-gradient(180deg, #667089 0%, #2a3143 42%, #0b0d13 100%);
}
@media (max-width: 900px){
  .instrumentyPiano{ min-height: 450px; }
  .pianoMiniStage--real{ min-height: 330px; padding: 14px 14px 24px; }
  .pianoMiniKeyboard{ padding: 48px 14px 18px; }
  .pianoMiniKeyboard::before{ top: 12px; height: 30px; }
  .pianoMiniWhiteKeys{ margin-top: 20px; padding: 0 6px 8px; gap: 5px; }
  .pianoMiniBlackKeys{ left: 18px; right: 18px; top: 52px; }
  .pianoMiniKey--white{ min-height: 205px; border-radius: 0 0 16px 16px; }
  .pianoMiniKey--white .pianoMiniKeyNote{ bottom: 40px; font-size: 15px; }
  .pianoMiniKey--white .pianoMiniKeyLetter{ bottom: 17px; }
}
@media (max-width: 640px){
  .instrumentyPiano{ min-height: 370px; }
  .pianoMiniTop--real{ gap: 8px; }
  .pianoMiniMascot{ width: 38px; height: 38px; font-size: 18px; }
  .pianoMiniTitle{ font-size: 18px; }
  .pianoMiniBadge{ font-size: 12px; padding: 7px 10px; }
  .pianoMiniStage--real{ min-height: 255px; padding: 12px 10px 22px; }
  .pianoMiniKeyboard{ padding: 38px 8px 14px; border-radius: 24px 24px 18px 18px; }
  .pianoMiniKeyboard::before{ top: 10px; height: 22px; border-radius: 12px 12px 8px 8px; }
  .pianoMiniKeyboard::after{ bottom: -10px; height: 16px; }
  .pianoMiniWhiteKeys{ margin-top: 14px; gap: 4px; padding: 0 4px 6px; }
  .pianoMiniBlackKeys{ left: 12px; right: 12px; top: 40px; height: 54%; }
  .pianoMiniKey--white{ min-height: 150px; border-radius: 0 0 10px 10px; }
  .pianoMiniKey--white .pianoMiniKeyNote{ bottom: 28px; font-size: 12px; }
  .pianoMiniKey--white .pianoMiniKeyLetter{ bottom: 12px; font-size: 9px; }
  .pianoMiniKey--black{ min-width: 22px; height: 60%; border-radius: 0 0 8px 8px; }
  .pianoMiniKey--black .pianoMiniKeyNote{ bottom: 10px; font-size: 8px; }
}


/* ===== Instrumenty / piano compact cleanup ===== */
.instrumentyScore .scoreBackPill.btnBack{
  display:none !important;
}

.instrumentyControls #instrumentyBackBottomBtn{
  width:56px !important;
  min-width:56px !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  border:none !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg, rgba(91,173,255,.98), rgba(49,116,255,.94)) !important;
  box-shadow:0 8px 22px rgba(45,110,255,.25) !important;
}

.instrumentyControls #instrumentyBackBottomBtn .ctrlIcon{
  width:26px;
  height:26px;
  display:block;
  filter:brightness(0) invert(1);
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyScore,
#pageInstrumenty.instrumentyPianoCompact .instrumentyPatternRow{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyPage{
  gap:8px;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentySubtitle{
  margin-bottom:0;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
  height:clamp(470px, 68vw, 620px) !important;
  min-height:clamp(470px, 68vw, 620px) !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
  padding-top:14px;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyHint{
  min-height:24px;
}

/* ===== Mini pianino - równe szczeliny i idealne środki czarnych klawiszy ===== */
.pianoMiniWhiteKeys{
  --piano-white-gap: 6px;
  --piano-white-pad: 8px;
  gap: var(--piano-white-gap);
  padding: 0 var(--piano-white-pad) 10px;
}

.pianoMiniBlackKeys{
  left: 0;
  right: 0;
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--piano-white-gap, 6px);
  padding: 0 var(--piano-white-pad, 8px);
  box-sizing:border-box;
}

.pianoMiniKey--white{
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

.pianoMiniKey--white::before{
  inset: 10px 10px auto;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.pianoMiniKey--black{
  position: relative;
  top: 0;
  width: min(54px, calc(((100% - (7 * var(--piano-white-gap, 6px))) / 8) * 0.58));
  max-width:none;
  left:auto;
  right:auto;
}

.pianoMiniBlackKeys .pos-cs,
.pianoMiniBlackKeys .pos-ds,
.pianoMiniBlackKeys .pos-fs,
.pianoMiniBlackKeys .pos-gs,
.pianoMiniBlackKeys .pos-as{
  justify-self:end;
  left:auto;
  right:auto;
  transform: translateX(calc(50% + (var(--piano-white-gap, 6px) / 2)));
}

.pianoMiniBlackKeys .pos-cs{ grid-column: 1; }
.pianoMiniBlackKeys .pos-ds{ grid-column: 2; }
.pianoMiniBlackKeys .pos-fs{ grid-column: 4; }
.pianoMiniBlackKeys .pos-gs{ grid-column: 5; }
.pianoMiniBlackKeys .pos-as{ grid-column: 6; }

.pianoMiniBlackKeys .pianoMiniKey--black:active,
.pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform: translateX(calc(50% + (var(--piano-white-gap, 6px) / 2))) translateY(4px) scaleY(0.99);
}

@media (max-width: 900px){
  .pianoMiniWhiteKeys{
    --piano-white-gap: 5px;
    --piano-white-pad: 6px;
    padding: 0 var(--piano-white-pad) 8px;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:500px !important;
    min-height:500px !important;
  }
}

@media (max-width: 640px){
  .pianoMiniWhiteKeys{
    --piano-white-gap: 4px;
    --piano-white-pad: 4px;
    padding: 0 var(--piano-white-pad) 6px;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:440px !important;
    min-height:440px !important;
  }
}


/* ===== Piano cleanup: hide top header and straighten white-key gaps ===== */
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop--real{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
  padding-top:6px;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
  padding-top:8px;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  width:min(100%, 780px);
}

.pianoMiniKey--white{
  clip-path:none;
  border-left:1px solid rgba(160,170,190,0.22);
  border-right:1px solid rgba(255,255,255,0.72);
}

.pianoMiniKey--white::before{
  inset:10px 10px auto;
  clip-path:none;
  border-radius:0 0 12px 12px;
}

.pianoMiniKey--white::after{
  left:14%;
  right:14%;
}

.pianoMiniKey--white.pianoMiniKey--last{
  border-right:1px solid rgba(255,255,255,0.72);
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
    padding-top:6px;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
    padding-top:4px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
    padding-top:4px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    width:min(100%, 100%);
  }

  .pianoMiniKey--white::before{
    inset:8px 8px auto;
  }
}

/* ===== Piano final cleanup: hide top/bottom texts and center black keys in white-key gaps ===== */
#pageInstrumenty.instrumentyPianoCompact .instrumentySubtitle,
#pageInstrumenty.instrumentyPianoCompact .instrumentyHint{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyPage{
  gap:4px;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
  height:clamp(500px, 72vw, 650px) !important;
  min-height:clamp(500px, 72vw, 650px) !important;
}

.pianoMiniBlackKeys{
  --piano-black-width: calc(((100% - (2 * var(--piano-white-pad, 8px)) - (7 * var(--piano-white-gap, 6px))) / 8) * 0.58);
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--piano-white-gap, 6px);
  padding: 0 var(--piano-white-pad, 8px);
  box-sizing:border-box;
}

.pianoMiniKey--black{
  position: relative;
  top: 0;
  left: auto;
  right: auto;
  width: clamp(34px, var(--piano-black-width), 54px);
  max-width: none;
  justify-self: center;
  transform: none;
}

.pianoMiniBlackKeys .pos-cs,
.pianoMiniBlackKeys .pos-ds,
.pianoMiniBlackKeys .pos-fs,
.pianoMiniBlackKeys .pos-gs,
.pianoMiniBlackKeys .pos-as{
  left:auto;
  right:auto;
  transform:none;
}

.pianoMiniBlackKeys .pos-cs{ grid-column: 1 / span 2; }
.pianoMiniBlackKeys .pos-ds{ grid-column: 2 / span 2; }
.pianoMiniBlackKeys .pos-fs{ grid-column: 4 / span 2; }
.pianoMiniBlackKeys .pos-gs{ grid-column: 5 / span 2; }
.pianoMiniBlackKeys .pos-as{ grid-column: 6 / span 2; }

.pianoMiniBlackKeys .pianoMiniKey--black:active,
.pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform: translateY(4px) scaleY(0.99);
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:520px !important;
    min-height:520px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:455px !important;
    min-height:455px !important;
  }

  .pianoMiniKey--black{
    width: clamp(22px, var(--piano-black-width), 40px);
  }
}


/* ===== Piano actual repair after broken compact overrides ===== */
#pageInstrumenty.instrumentyPianoCompact .instrumentySubtitle,
#pageInstrumenty.instrumentyPianoCompact .instrumentyHint,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop--real{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
  height:clamp(470px, 68vw, 620px) !important;
  min-height:clamp(470px, 68vw, 620px) !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
  padding-top:6px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
  padding-top:6px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  width:min(100%, 780px);
}

.pianoMiniWhiteKeys{
  --piano-white-gap: 6px;
  --piano-white-pad: 8px;
  --piano-white-width: calc((100% - (2 * var(--piano-white-pad)) - (7 * var(--piano-white-gap))) / 8);
  gap:var(--piano-white-gap) !important;
  padding:0 var(--piano-white-pad) 10px !important;
}

.pianoMiniKey--white{
  clip-path:none !important;
  border-left:1px solid rgba(160,170,190,0.22);
  border-right:1px solid rgba(255,255,255,0.72);
}

.pianoMiniKey--white::before{
  inset:10px 10px auto !important;
  clip-path:none !important;
  border-radius:0 0 12px 12px;
}

.pianoMiniKey--white::after{
  left:14% !important;
  right:14% !important;
}

.pianoMiniBlackKeys{
  pointer-events:none;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:58px !important;
  height:165px !important;
  display:block !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.pianoMiniKey--black{
  pointer-events:auto;
  position:absolute !important;
  top:0 !important;
  left:auto;
  right:auto;
  width:clamp(34px, calc(var(--piano-white-width) * 0.58), 54px) !important;
  min-width:34px !important;
  max-width:54px !important;
  height:165px !important;
  justify-self:auto !important;
  transform:translateX(-50%) !important;
}

.pianoMiniBlackKeys .pos-cs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 1) + (var(--piano-white-gap) * 0.5)) !important; }
.pianoMiniBlackKeys .pos-ds{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 2) + (var(--piano-white-gap) * 1.5)) !important; }
.pianoMiniBlackKeys .pos-fs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 4) + (var(--piano-white-gap) * 3.5)) !important; }
.pianoMiniBlackKeys .pos-gs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 5) + (var(--piano-white-gap) * 4.5)) !important; }
.pianoMiniBlackKeys .pos-as{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 6) + (var(--piano-white-gap) * 5.5)) !important; }

.pianoMiniBlackKeys .pianoMiniKey--black:active,
.pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform:translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  .pianoMiniWhiteKeys{
    --piano-white-gap: 5px;
    --piano-white-pad: 6px;
    padding:0 var(--piano-white-pad) 8px !important;
  }

  .pianoMiniBlackKeys{
    top:52px !important;
    height:148px !important;
  }

  .pianoMiniKey--black{
    width:clamp(30px, calc(var(--piano-white-width) * 0.56), 48px) !important;
    min-width:30px !important;
    max-width:48px !important;
    height:148px !important;
  }
}

@media (max-width: 640px){
  .pianoMiniWhiteKeys{
    --piano-white-gap: 4px;
    --piano-white-pad: 4px;
    padding:0 var(--piano-white-pad) 6px !important;
  }

  .pianoMiniBlackKeys{
    top:40px !important;
    height:118px !important;
  }

  .pianoMiniKey--black{
    width:clamp(22px, calc(var(--piano-white-width) * 0.54), 38px) !important;
    min-width:22px !important;
    max-width:38px !important;
    height:118px !important;
  }
}

/* ===== Piano hotfix: restore black keys and remove one extra frame ===== */
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::before,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::before{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  --piano-white-gap: 6px;
  --piano-white-pad: 8px;
  --piano-white-width: calc((100% - (2 * var(--piano-white-pad)) - (7 * var(--piano-white-gap))) / 8);
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys{
  gap: var(--piano-white-gap) !important;
  padding: 0 var(--piano-white-pad) 10px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  pointer-events: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 58px !important;
  height: 165px !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 4 !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
  pointer-events: auto !important;
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: clamp(34px, calc(var(--piano-white-width) * 0.58), 54px) !important;
  min-width: 34px !important;
  max-width: 54px !important;
  height: 165px !important;
  transform: translateX(-50%) !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-cs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 1) + (var(--piano-white-gap) * 0.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-ds{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 2) + (var(--piano-white-gap) * 1.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-fs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 4) + (var(--piano-white-gap) * 3.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-gs{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 5) + (var(--piano-white-gap) * 4.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-as{ left: calc(var(--piano-white-pad) + (var(--piano-white-width) * 6) + (var(--piano-white-gap) * 5.5)) !important; }

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform: translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-white-gap: 5px;
    --piano-white-pad: 6px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top: 52px !important;
    height: 148px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    width: clamp(30px, calc(var(--piano-white-width) * 0.56), 48px) !important;
    min-width: 30px !important;
    max-width: 48px !important;
    height: 148px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-white-gap: 4px;
    --piano-white-pad: 4px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top: 40px !important;
    height: 118px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    width: clamp(22px, calc(var(--piano-white-width) * 0.54), 38px) !important;
    min-width: 22px !important;
    max-width: 38px !important;
    height: 118px !important;
  }
}


/* ===== Final piano hotfix: restore black keys, remove one extra border, keep only needed UI ===== */
#pageInstrumenty.instrumentyPianoCompact .instrumentySubtitle,
#pageInstrumenty.instrumentyPianoCompact .instrumentyHint,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop--real{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::before,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::before{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  width:min(100%, 780px) !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  pointer-events:none !important;
  position:absolute !important;
  left:24px !important;
  right:24px !important;
  top:58px !important;
  height:56% !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  z-index:6 !important;
  box-sizing:border-box !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
  pointer-events:auto !important;
  position:absolute !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:calc((100% - 48px) / 8 * 0.58) !important;
  min-width:34px !important;
  max-width:54px !important;
  height:66% !important;
  transform:translateX(-50%) !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-cs{ left:12.5% !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-ds{ left:25% !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-fs{ left:50% !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-gs{ left:62.5% !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-as{ left:75% !important; }

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform:translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    left:18px !important;
    right:18px !important;
    top:52px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    min-width:30px !important;
    max-width:48px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    left:12px !important;
    right:12px !important;
    top:40px !important;
    height:54% !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    min-width:22px !important;
    max-width:38px !important;
    height:60% !important;
  }
}

/* ===== Final piano air-glissando + black key visibility hotfix ===== */
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::before,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::before{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  --piano-hotfix-gap: 6px;
  --piano-hotfix-pad: 8px;
  --piano-hotfix-white: calc((100% - (2 * var(--piano-hotfix-pad)) - (7 * var(--piano-hotfix-gap))) / 8);
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  pointer-events:none !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:58px !important;
  height:165px !important;
  display:block !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  visibility:visible !important;
  z-index:8 !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
  pointer-events:auto !important;
  position:absolute !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:clamp(34px, calc(var(--piano-hotfix-white) * 0.58), 54px) !important;
  min-width:34px !important;
  max-width:54px !important;
  height:165px !important;
  transform:translateX(-50%) !important;
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  z-index:9 !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-cs{ left: calc(var(--piano-hotfix-pad) + (var(--piano-hotfix-white) * 1) + (var(--piano-hotfix-gap) * 0.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-ds{ left: calc(var(--piano-hotfix-pad) + (var(--piano-hotfix-white) * 2) + (var(--piano-hotfix-gap) * 1.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-fs{ left: calc(var(--piano-hotfix-pad) + (var(--piano-hotfix-white) * 4) + (var(--piano-hotfix-gap) * 3.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-gs{ left: calc(var(--piano-hotfix-pad) + (var(--piano-hotfix-white) * 5) + (var(--piano-hotfix-gap) * 4.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pos-as{ left: calc(var(--piano-hotfix-pad) + (var(--piano-hotfix-white) * 6) + (var(--piano-hotfix-gap) * 5.5)) !important; }

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform:translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-hotfix-gap: 5px;
    --piano-hotfix-pad: 6px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:52px !important;
    height:148px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    width:clamp(30px, calc(var(--piano-hotfix-white) * 0.56), 48px) !important;
    min-width:30px !important;
    max-width:48px !important;
    height:148px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-hotfix-gap: 4px;
    --piano-hotfix-pad: 4px;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:40px !important;
    height:118px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    width:clamp(22px, calc(var(--piano-hotfix-white) * 0.54), 38px) !important;
    min-width:22px !important;
    max-width:38px !important;
    height:118px !important;
  }
}


/* ===== FINAL PIANO LAYOUT + BLACK KEYS RESTORE + EXTRA FINGERS ===== */
#pageInstrumenty.instrumentyPianoCompact .pianoMiniTop--real,
#pageInstrumenty.instrumentyPianoCompact .instrumentyHint,
#pageInstrumenty.instrumentyPianoCompact #instrumentySubtitle,
#pageInstrumenty.instrumentyPianoCompact #instrumentyScoreRow,
#pageInstrumenty.instrumentyPianoCompact #instrumentyPatternRow{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::before,
#pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::before{
  display:none !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
  min-height:0 !important;
  padding:16px 16px 18px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
  --piano-final-gap: 6px;
  --piano-final-pad: 8px;
  --piano-final-white: calc((100% - (2 * var(--piano-final-pad)) - (7 * var(--piano-final-gap))) / 8);
  position:relative !important;
  padding:56px 0 16px !important;
  overflow:visible !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  gap:var(--piano-final-gap) !important;
  padding:0 var(--piano-final-pad) 8px !important;
  margin-top:18px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  pointer-events:none !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:58px !important;
  height:165px !important;
  display:block !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  visibility:visible !important;
  z-index:8 !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black{
  pointer-events:auto !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:clamp(34px, calc(var(--piano-final-white) * 0.58), 54px) !important;
  min-width:34px !important;
  max-width:54px !important;
  height:165px !important;
  transform:translateX(-50%) !important;
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  z-index:9 !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pos-cs,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > :nth-child(1){ left: calc(var(--piano-final-pad) + (var(--piano-final-white) * 1) + (var(--piano-final-gap) * 0.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pos-ds,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > :nth-child(2){ left: calc(var(--piano-final-pad) + (var(--piano-final-white) * 2) + (var(--piano-final-gap) * 1.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pos-fs,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > :nth-child(3){ left: calc(var(--piano-final-pad) + (var(--piano-final-white) * 4) + (var(--piano-final-gap) * 3.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pos-gs,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > :nth-child(4){ left: calc(var(--piano-final-pad) + (var(--piano-final-white) * 5) + (var(--piano-final-gap) * 4.5)) !important; }
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pos-as,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > :nth-child(5){ left: calc(var(--piano-final-pad) + (var(--piano-final-white) * 6) + (var(--piano-final-gap) * 5.5)) !important; }

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black.isHot{
  transform:translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-final-gap: 5px;
    --piano-final-pad: 6px;
    padding-top:50px !important;
  }
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:52px !important;
    height:148px !important;
  }
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black{
    width:clamp(30px, calc(var(--piano-final-white) * 0.56), 48px) !important;
    min-width:30px !important;
    max-width:48px !important;
    height:148px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    --piano-final-gap: 4px;
    --piano-final-pad: 4px;
    padding-top:40px !important;
  }
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:40px !important;
    height:118px !important;
  }
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black{
    width:clamp(22px, calc(var(--piano-final-white) * 0.54), 38px) !important;
    min-width:22px !important;
    max-width:38px !important;
    height:118px !important;
  }
}

/* ===== FINAL OVERRIDE: black piano keys shorter by 20% ===== */
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  top:58px !important;
  height:132px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
  height:132px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black.isHot,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black:active,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black.isHot{
  transform:translateX(-50%) translateY(4px) scaleY(0.99) !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:52px !important;
    height:118px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:118px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:40px !important;
    height:94px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:94px !important;
  }
}


/* ===== FINAL FINAL OVERRIDE: visibly shorter black keys ===== */
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
  top:58px !important;
  height:116px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
  height:116px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black::before,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black::before,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black::before{
  inset:4px 4px auto 4px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black .pianoMiniKeyNote{
  bottom:18px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black .pianoMiniKeyLetter{
  bottom:6px !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:52px !important;
    height:102px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:102px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:40px !important;
    height:82px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:82px !important;
  }
}

/* ===== HARD OVERRIDE: visibly shorter black piano keys (global, no page-class dependency) ===== */
.pianoMiniBlackKeys{
  height:112px !important;
}

.pianoMiniKey--black,
.pianoMiniBlackKeys > .pianoMiniKey--black,
.pianoMiniBlackKeys .pianoMiniKey--black{
  height:112px !important;
  max-height:112px !important;
}

.pianoMiniKey--black::before,
.pianoMiniBlackKeys > .pianoMiniKey--black::before,
.pianoMiniBlackKeys .pianoMiniKey--black::before{
  inset:4px 4px auto 4px !important;
}

.pianoMiniKey--black .pianoMiniKeyNote{ bottom:16px !important; }
.pianoMiniKey--black .pianoMiniKeyLetter{ bottom:5px !important; }

@media (max-width: 900px){
  .pianoMiniBlackKeys{ height:98px !important; }
  .pianoMiniKey--black,
  .pianoMiniBlackKeys > .pianoMiniKey--black,
  .pianoMiniBlackKeys .pianoMiniKey--black{
    height:98px !important;
    max-height:98px !important;
  }
}

@media (max-width: 640px){
  .pianoMiniBlackKeys{ height:78px !important; }
  .pianoMiniKey--black,
  .pianoMiniBlackKeys > .pianoMiniKey--black,
  .pianoMiniBlackKeys .pianoMiniKey--black{
    height:78px !important;
    max-height:78px !important;
  }
}


/* ===== ABSOLUTE FINAL OVERRIDE: black keys desktop 180px ===== */
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys,
.pianoMiniBlackKeys{
  top: 58px !important;
  height: 180px !important;
  max-height: 180px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
.pianoMiniBlackKeys > .pianoMiniKey--black,
.pianoMiniBlackKeys .pianoMiniKey--black,
.pianoMiniKey--black{
  height: 180px !important;
  max-height: 180px !important;
  min-height: 180px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black::before,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black::before,
#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black::before,
.pianoMiniBlackKeys > .pianoMiniKey--black::before,
.pianoMiniBlackKeys .pianoMiniKey--black::before,
.pianoMiniKey--black::before{
  inset: 4px 4px auto 4px !important;
  height: 28px !important;
}

#pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black .pianoMiniKeyNote,
.pianoMiniKey--black .pianoMiniKeyNote{
  bottom: 12px !important;
}

@media (max-width: 900px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys,
  .pianoMiniBlackKeys{
    top: 52px !important;
    height: 156px !important;
    max-height: 156px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  .pianoMiniBlackKeys > .pianoMiniKey--black,
  .pianoMiniBlackKeys .pianoMiniKey--black,
  .pianoMiniKey--black{
    height: 156px !important;
    max-height: 156px !important;
    min-height: 156px !important;
  }
}

@media (max-width: 640px){
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys,
  .pianoMiniBlackKeys{
    top: 40px !important;
    height: 112px !important;
    max-height: 112px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  .pianoMiniBlackKeys > .pianoMiniKey--black,
  .pianoMiniBlackKeys .pianoMiniKey--black,
  .pianoMiniKey--black{
    height: 112px !important;
    max-height: 112px !important;
    min-height: 112px !important;
  }
}


/* ===== Instrumenty / telefon poziomo + wysuwane przyciski ===== */
.instrumentyBottomPanel{
  position:relative;
  width:min(100%, 780px);
  margin:0 auto;
}

.instrumentyPanelHandle{
  display:none;
  appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
  width:54px;
  height:32px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(91,173,255,.98), rgba(49,116,255,.94));
  box-shadow:0 12px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
}

.instrumentyPanelHandle .phArrow{
  width:18px;
  height:18px;
  filter:brightness(0) invert(1);
  transform:rotate(180deg);
  transition:transform .22s ease;
}

.instrumentyPanelHandle.isOpen .phArrow{
  transform:rotate(0deg);
}

@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty .instrumentyPage{
    min-height:100dvh;
    height:100dvh;
    box-sizing:border-box;
    overflow:hidden;
    padding:6px 10px 0;
    gap:6px;
  }

  #pageInstrumenty .gameTitle.instrumenty{
    margin:0;
    font-size:clamp(28px, 6vh, 44px);
    line-height:1.02;
  }

  #pageInstrumenty .instrumentySubtitle,
  #pageInstrumenty .instrumentyHint{
    display:none !important;
  }

  #pageInstrumenty .instrumentyScore{
    gap:8px;
    flex-wrap:nowrap;
  }

  #pageInstrumenty .instrumentyScore .scoreBackPill.btnBack{
    display:none !important;
  }

  #pageInstrumenty .instrumentyScore .scorePill{
    min-height:40px;
    padding:0 14px;
    gap:8px;
    font-size:15px;
    border-radius:18px;
  }

  #pageInstrumenty .instrumentyScore .scorePill .icon{
    font-size:22px;
  }

  #pageInstrumenty .instrumentyScore .scorePill .value{
    font-size:15px;
  }

  #pageInstrumenty .instrumentyPatternRow{
    min-height:18px;
    gap:8px;
    font-size:12px;
  }

  #pageInstrumenty .instrumentyPatternLabel{
    font-size:10px;
    letter-spacing:.11em;
  }

  #pageInstrumenty .instrumentyPatternDots{
    min-width:80px;
    letter-spacing:.12em;
    font-size:12px;
  }

  #pageInstrumenty .instrumentyBoard,
  #pageInstrumenty .instrumentyBoard.isFlute,
  #pageInstrumenty .instrumentyBoard.isGuitar,
  #pageInstrumenty .instrumentyBoard.isPiano{
    flex:1 1 auto;
    width:min(100%, calc((100dvh - 102px) * 1.82), 920px);
    height:calc(100dvh - 102px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 102px) !important;
    border-radius:24px;
  }

  #pageInstrumenty .instrumentyBoard::before{
    inset:10px;
    border-radius:18px;
  }

  #pageInstrumenty .instrumentyDrums,
  #pageInstrumenty .instrumentyFlute,
  #pageInstrumenty .instrumentyGuitar,
  #pageInstrumenty .instrumentyPiano{
    min-height:0 !important;
    height:100% !important;
  }

  #pageInstrumenty .instrumentyFlute,
  #pageInstrumenty .instrumentyGuitar,
  #pageInstrumenty .instrumentyPiano{
    padding:12px 14px 10px;
  }

  #pageInstrumenty .instrumentyFloat--crash{ width:18%; top:10%; }
  #pageInstrumenty .instrumentyFloat--ride{ width:18%; top:10%; }
  #pageInstrumenty .instrumentyFloat--tom{ width:20%; top:16%; }
  #pageInstrumenty .instrumentyFloat--hat{ width:15%; top:42%; }
  #pageInstrumenty .instrumentyFloat--snare{ width:15%; top:56%; left:17%; }
  #pageInstrumenty .instrumentyFloat--kick{ width:28%; bottom:5%; }
  #pageInstrumenty .drumPad{ padding-bottom:28px; }
  #pageInstrumenty .drumPadLabel{ font-size:11px; padding:5px 8px; }

  #pageInstrumenty .fluteMicCard{
    left:50%;
    top:14px;
    transform:translateX(-50%);
    width:min(360px, calc(100% - 28px));
    padding:0;
    border-radius:0;
  }

  #pageInstrumenty .guitarConsole{ margin-bottom:10px; }
  #pageInstrumenty .guitarFretRail{ gap:5px; }
  #pageInstrumenty .guitarFretBtn{ min-width:36px; min-height:34px; font-size:13px; border-radius:12px; }
  #pageInstrumenty .guitarStage{ margin-top:10px; min-height:0; height:calc(100% - 48px); }

  #pageInstrumenty .pianoMiniTop,
  #pageInstrumenty .pianoMiniTop--real{
    display:none !important;
  }

  #pageInstrumenty .pianoMiniStage,
  #pageInstrumenty .pianoMiniStage--real{
    min-height:0 !important;
    height:100% !important;
    padding:10px 10px 12px;
    border-radius:18px;
  }

  #pageInstrumenty .pianoMiniKeyboard{
    width:min(100%, 100%);
    padding:38px 12px 14px;
    border-radius:28px 28px 22px 22px;
  }

  #pageInstrumenty .pianoMiniKeyboard::before{
    top:10px;
    height:28px;
  }

  #pageInstrumenty .pianoMiniWhiteKeys{
    gap:5px;
    margin-top:18px;
    padding:0 6px 8px;
  }

  #pageInstrumenty .pianoMiniKey--white{
    min-height:170px;
  }

  #pageInstrumenty .pianoMiniBlackKeys{
    left:20px;
    right:20px;
    top:44px;
  }

  #pageInstrumenty .pianoMiniKey--black,
  #pageInstrumenty .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty .pianoMiniBlackKeys .pianoMiniKey--black{
    height:148px !important;
    min-height:148px !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    position:fixed;
    left:50%;
    bottom:max(8px, env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(calc(100vw - 16px), 780px);
    margin:0;
    padding:14px 10px 10px;
    border-radius:22px;
    background:rgba(10,12,30,.92);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 38px rgba(0,0,0,.42);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:40;
    transition:transform .26s ease, opacity .22s ease;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed{
    transform:translateX(-50%) translateY(calc(100% - 20px));
  }

  #pageInstrumenty .instrumentyPanelHandle{
    display:grid;
    place-items:center;
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%, -50%);
    z-index:2;
  }

  #pageInstrumenty .instrumentyControls{
    max-width:none;
    width:100%;
    margin:0;
    padding:0 2px;
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  #pageInstrumenty .instrumentyControls #instrumentyPlayBtn,
  #pageInstrumenty .instrumentyControls #instrumentyModeBtn,
  #pageInstrumenty .instrumentyControls #instrumentyAirBtn,
  #pageInstrumenty .instrumentyControls #instrumentyRestartBtn{
    width:52px !important;
    min-width:52px !important;
    height:48px !important;
    min-height:48px !important;
  }

  #pageInstrumenty .instrumentyNav{
    margin-left:0;
  }

  #pageInstrumenty .instrumentyNav .catArrow{
    width:52px !important;
    min-width:52px !important;
    height:48px !important;
    min-height:48px !important;
  }

  #pageInstrumenty .instrumentyNav .catLabel{
    height:48px !important;
    min-height:48px !important;
    padding:0 16px !important;
  }
}

/* ===== v275: telefon poziomo — mniej chrome, więcej miejsca na instrument ===== */
@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty .instrumentyScore,
  #pageInstrumenty .instrumentyPatternRow{
    display:none !important;
  }

  #pageInstrumenty .instrumentyPage{
    min-height:100dvh;
    height:100dvh;
    box-sizing:border-box;
    overflow:hidden;
    padding:4px 8px 0;
    gap:4px;
  }

  #pageInstrumenty .gameTitle.instrumenty{
    margin:0;
    font-size:clamp(24px, 5.6vh, 40px);
    line-height:1.02;
  }

  #pageInstrumenty .instrumentyBoard,
  #pageInstrumenty .instrumentyBoard.isFlute,
  #pageInstrumenty .instrumentyBoard.isGuitar,
  #pageInstrumenty .instrumentyBoard.isPiano{
    flex:1 1 auto;
    width:min(100%, calc((100dvh - 74px) * 2.08), 1040px);
    height:calc(100dvh - 74px) !important;
    max-height:calc(100dvh - 74px) !important;
    min-height:0 !important;
  }

  /* Perkusja — bez górnych gwiazdek / rytmu mamy więcej miejsca,
     więc tylko delikatnie kompaktujemy rozmieszczenie bębnów. */
  #pageInstrumenty .instrumentyFloat--crash{ width:17%; top:7%; }
  #pageInstrumenty .instrumentyFloat--ride{ width:17%; top:7%; }
  #pageInstrumenty .instrumentyFloat--tom{ width:19%; top:11%; }
  #pageInstrumenty .instrumentyFloat--hat{ width:14%; top:37%; }
  #pageInstrumenty .instrumentyFloat--snare{ width:15%; top:52%; left:16%; }
  #pageInstrumenty .instrumentyFloat--kick{ width:26%; bottom:4%; }

  /* Pianino — wywalamy zbędne tło główne, które zabierało miejsce optycznie i wysokością. */
  #pageInstrumenty .instrumentyBoard.isPiano{
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  #pageInstrumenty .instrumentyBoard.isPiano::before,
  #pageInstrumenty .instrumentyBoard.isPiano::after,
  #pageInstrumenty .instrumentyPiano .pianoMiniAura{
    display:none !important;
  }

  #pageInstrumenty .instrumentyPiano{
    padding:0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniStage,
  #pageInstrumenty .instrumentyPiano .pianoMiniStage--real{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyboard{
    --piano-final-gap: 4px;
    --piano-final-pad: 4px;
    --piano-hotfix-gap: 4px;
    --piano-hotfix-pad: 4px;
    width:min(100%, 1040px) !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:24px 6px 8px !important;
    border-radius:24px 24px 18px 18px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyboard::before{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    height:20px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniWhiteKeys{
    gap:4px !important;
    padding:0 4px 6px !important;
    margin-top:8px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKey--white{
    min-height:clamp(118px, 31dvh, 170px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyNote{
    bottom:28px !important;
    font-size:clamp(14px, 2.8vh, 22px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyLetter{
    bottom:10px !important;
    font-size:clamp(10px, 1.7vh, 12px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:28px !important;
    height:clamp(84px, 22dvh, 118px) !important;
    max-height:clamp(84px, 22dvh, 118px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKey--black,
  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    width:clamp(24px, 4.8vw, 38px) !important;
    min-width:24px !important;
    max-width:38px !important;
    height:clamp(84px, 22dvh, 118px) !important;
    min-height:clamp(84px, 22dvh, 118px) !important;
    max-height:clamp(84px, 22dvh, 118px) !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    width:min(calc(100vw - 12px), 780px);
    bottom:max(6px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty .gameTitle.instrumenty{
    font-size:clamp(22px, 5vh, 32px);
  }

  #pageInstrumenty .instrumentyBoard,
  #pageInstrumenty .instrumentyBoard.isFlute,
  #pageInstrumenty .instrumentyBoard.isGuitar,
  #pageInstrumenty .instrumentyBoard.isPiano{
    height:calc(100dvh - 66px) !important;
    max-height:calc(100dvh - 66px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyboard{
    padding:20px 4px 6px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKeyboard::before{
    top:6px !important;
    height:16px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniWhiteKeys{
    margin-top:6px !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKey--white{
    min-height:clamp(96px, 28dvh, 136px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:22px !important;
    height:clamp(72px, 18dvh, 96px) !important;
    max-height:clamp(72px, 18dvh, 96px) !important;
  }

  #pageInstrumenty .instrumentyPiano .pianoMiniKey--black,
  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty .instrumentyPiano .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    height:clamp(72px, 18dvh, 96px) !important;
    min-height:clamp(72px, 18dvh, 96px) !important;
    max-height:clamp(72px, 18dvh, 96px) !important;
  }
}

/* ===== FINAL mobile-landscape piano layout fix ===== */
@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty.instrumentyPianoCompact .instrumentyPage{
    padding:4px 6px 0 !important;
    gap:4px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
    margin:0 !important;
    font-size:clamp(24px, 6.2vh, 42px) !important;
    line-height:1.02 !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    width:min(calc(100vw - 8px), 1100px) !important;
    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 58px) !important;
    margin:0 auto !important;
    border:none !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::before,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard::after,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::before,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano::after,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniAura{
    display:none !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage::after,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real::after{
    display:none !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    width:min(98vw, 1180px) !important;
    margin:0 auto !important;
    padding:30px 8px 8px !important;
    border-radius:26px 26px 20px 20px !important;
    transform:none !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard::before{
    top:8px !important;
    left:2.2% !important;
    right:2.2% !important;
    height:22px !important;
    border-radius:12px 12px 8px 8px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard::after{
    bottom:-8px !important;
    height:14px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys{
    margin-top:10px !important;
    padding:0 4px 6px !important;
    gap:4px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys .pianoMiniKey--white{
    min-height:clamp(132px, 44dvh, 240px) !important;
    border-radius:0 0 12px 12px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white::before{
    inset:6px 7px auto !important;
    border-radius:0 0 8px 8px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white .pianoMiniKeyNote{
    bottom:26px !important;
    font-size:clamp(11px, 2vh, 15px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white .pianoMiniKeyLetter{
    bottom:10px !important;
    font-size:clamp(8px, 1.4vh, 11px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    left:10px !important;
    right:10px !important;
    top:34px !important;
    height:clamp(106px, 32dvh, 180px) !important;
    max-height:none !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    width:clamp(28px, 5.2vw, 44px) !important;
    min-width:28px !important;
    max-width:44px !important;
    height:clamp(106px, 32dvh, 180px) !important;
    min-height:clamp(106px, 32dvh, 180px) !important;
    max-height:none !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    width:min(calc(100vw - 8px), 900px) !important;
    bottom:max(2px, env(safe-area-inset-bottom)) !important;
    padding:8px 8px 6px !important;
    border-radius:18px !important;
    overflow:visible !important;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed{
    transform:translateX(-50%) translateY(calc(100% - 10px)) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    width:58px !important;
    height:34px !important;
    top:-18px !important;
    transform:translate(-50%, 0) !important;
    z-index:5 !important;
  }

  #pageInstrumenty .instrumentyControls{
    gap:6px !important;
    padding:0 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:calc(100dvh - 52px) !important;
    max-height:calc(100dvh - 52px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    padding:24px 6px 6px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard::before{
    top:6px !important;
    height:18px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys{
    margin-top:6px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys .pianoMiniKey--white{
    min-height:clamp(104px, 38dvh, 170px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:26px !important;
    height:clamp(84px, 26dvh, 128px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black{
    height:clamp(84px, 26dvh, 128px) !important;
    min-height:clamp(84px, 26dvh, 128px) !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    padding:6px 8px 4px !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    top:-16px !important;
  }
}


/* ===== v277: mobile landscape piano centering + lower hidden panel ===== */
@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
    margin-top:20px !important;
    margin-bottom:0 !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    width:min(calc(100vw - 12px), 1280px) !important;
    height:calc(100dvh - 78px) !important;
    max-height:calc(100dvh - 78px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyPiano{
    align-items:center !important;
    justify-content:center !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniStage--real{
    align-items:center !important;
    justify-content:center !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    width:min(calc(100vw - 26px), 1240px) !important;
    margin:0 auto !important;
    padding:34px 10px 10px !important;
    border-radius:28px 28px 20px 20px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard::before{
    top:8px !important;
    left:1.6% !important;
    right:1.6% !important;
    height:22px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys{
    margin-top:10px !important;
    padding:0 6px 8px !important;
    gap:5px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys .pianoMiniKey--white{
    min-height:clamp(150px, 48dvh, 300px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    left:12px !important;
    right:12px !important;
    top:36px !important;
    height:clamp(118px, 36dvh, 196px) !important;
    max-height:none !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:clamp(118px, 36dvh, 196px) !important;
    min-height:clamp(118px, 36dvh, 196px) !important;
    max-height:none !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    width:min(calc(100vw - 8px), 940px) !important;
    bottom:max(-10px, calc(env(safe-area-inset-bottom) - 10px)) !important;
    padding:8px 8px 4px !important;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed{
    transform:translateX(-50%) translateY(calc(100% - 2px)) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    top:-28px !important;
    width:60px !important;
    height:36px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
    margin-top:16px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyBoard.isPiano{
    height:calc(100dvh - 70px) !important;
    max-height:calc(100dvh - 70px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKeyboard{
    padding:28px 8px 8px !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--white,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniWhiteKeys .pianoMiniKey--white{
    min-height:clamp(132px, 44dvh, 230px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys{
    top:30px !important;
    height:clamp(100px, 31dvh, 160px) !important;
  }

  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys > .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniBlackKeys .pianoMiniKey--black,
  #pageInstrumenty.instrumentyPianoCompact .pianoMiniKey--black{
    height:clamp(100px, 31dvh, 160px) !important;
    min-height:clamp(100px, 31dvh, 160px) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    top:-24px !important;
  }
}

/* ===== v278: instrumenty landscape — panel schowany jak w puzzlach + bez scrolla ===== */
@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty,
  #pageInstrumenty.active,
  #pageInstrumenty .instrumentyPage,
  #pageInstrumenty.instrumentyPianoCompact .instrumentyPage{
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: manipulation !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    --handleSize: 46px;
    --panelHideExtra: 0px;
    width: min(calc(100vw - 8px), 940px) !important;
    padding: calc(var(--handleSize) + 12px) 8px 8px !important;
    border-radius: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    overflow: visible !important;
    transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .18s ease !important;
  }

  #pageInstrumenty .instrumentyBottomPanel::before{
    content: "" !important;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--handleSize);
    bottom: 0;
    border-radius: 18px;
    background: rgba(34, 18, 74, .92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
    z-index: 0;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed{
    transform: translateX(-50%) translateY(calc(100% - var(--handleSize) + var(--panelHideExtra))) !important;
  }

  #pageInstrumenty .instrumentyBottomPanel:not(.isCollapsed){
    transform: translateX(-50%) translateY(-10px) !important;
  }

  #pageInstrumenty .instrumentyControls,
  #pageInstrumenty .instrumentyNav{
    position: relative;
    z-index: 3;
  }

  #pageInstrumenty .instrumentyControls{
    transition: opacity .18s ease, transform .18s ease !important;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed .instrumentyControls{
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
  }

  #pageInstrumenty .instrumentyBottomPanel:not(.isCollapsed) .instrumentyControls{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    width: var(--handleSize) !important;
    height: var(--handleSize) !important;
    top: -5px !important;
    transform: translateX(-50%) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(106, 92, 255, .96) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.30) !important;
    z-index: 5 !important;
  }

  #pageInstrumenty .instrumentyPanelHandle:active{
    transform: translateX(-50%) translateY(1px) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle .phArrow{
    width: 18px !important;
    height: 18px !important;
  }
}

/* ===== v280: instrumenty landscape — flatter wider handle + title lower ===== */
@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty .gameTitle.instrumenty{
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  #pageInstrumenty .instrumentyBottomPanel{
    --handleSize: 28px !important;
    padding: calc(var(--handleSize) + 8px) 8px 8px !important;
  }

  #pageInstrumenty .instrumentyBottomPanel::before{
    top: var(--handleSize) !important;
  }

  #pageInstrumenty .instrumentyBottomPanel.isCollapsed{
    transform: translateX(-50%) translateY(calc(100% - var(--handleSize) + var(--panelHideExtra))) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle{
    width: 92px !important;
    height: 28px !important;
    top: -12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
  }

  #pageInstrumenty .instrumentyPanelHandle .phArrow{
    width: 20px !important;
    height: 20px !important;
  }
}


@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty .gameTitle.instrumenty{
    margin-top:16px !important;
    margin-bottom:0 !important;
  }
}


/* ===== v281: instrumenty landscape final fixes ===== */
@media (max-width: 900px) and (orientation: landscape){
  /* Title aligned like piano in every instrument view */
  #pageInstrumenty .gameTitle.instrumenty,
  #pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
    margin:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    font-size:clamp(24px, 6.2vh, 42px) !important;
    line-height:1.02 !important;
  }

  /* Center controls inside the slide-up panel instead of sticking left */
  #pageInstrumenty .instrumentyBottomPanel{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }

  #pageInstrumenty .instrumentyControls{
    width:max-content !important;
    min-width:100% !important;
    margin:0 auto !important;
    padding:0 12px !important;
    justify-content:center !important;
    align-items:center !important;
  }

  #pageInstrumenty .instrumentyNav{
    margin-left:0 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty .gameTitle.instrumenty,
  #pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
    margin:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    font-size:clamp(22px, 5.8vh, 38px) !important;
  }
}


/* ===== v282b: exact user fixes only ===== */
#pageInstrumenty .gameTitle.instrumenty,
#pageInstrumenty.instrumentyPianoCompact .gameTitle.instrumenty{
  position: relative !important;
  top: 10px !important;
}

#pageInstrumenty .instrumentyPanelHandle{
  margin-top: 10px !important;
}

/* flute background LOWER by exactly 50px versus current layout */
.instrumentyBoard.isFlute{
  height: calc(clamp(420px, 62vw, 560px) - 50px) !important;
  min-height: calc(clamp(420px, 62vw, 560px) - 50px) !important;
}

@media (max-width: 680px){
  .instrumentyBoard.isFlute{
    height: 370px !important;
    min-height: 370px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape){
  #pageInstrumenty .instrumentyBoard.isFlute{
    height: calc(100dvh - 124px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 124px) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 430px){
  #pageInstrumenty .instrumentyBoard.isFlute{
    height: calc(100dvh - 116px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 116px) !important;
  }
}


/* ===== Flute fix v7: center board vertically, remove note badge ===== */
#pageInstrumenty.instrumentyFluteCentered .instrumentyBoard.isFlute{
  margin-top:auto;
  margin-bottom:auto;
}
#pageInstrumenty #instrumentyFluteNote,
#pageInstrumenty .fluteNoteBadge{
  display:none !important;
}

/* ===== Flute fix v9: board higher + flute rotated another 90deg right ===== */
#pageInstrumenty.instrumentyFluteCentered .instrumentyBoard.isFlute{
  margin-top:auto;
  margin-bottom:auto;
  transform:translateY(-5px);
}

#pageInstrumenty .instrumentyFlute .fluteStage{
  overflow:visible;
}

#pageInstrumenty .instrumentyFlute .fluteBody{
  transform:rotate(180deg) scaleX(1.00) scaleY(0.86);
  transform-origin:center center;
}

@media (max-width: 900px){
  #pageInstrumenty .instrumentyFlute .fluteBody{
    transform:rotate(180deg) scaleX(0.92) scaleY(0.80);
  }
}

@media (max-width: 680px){
  #pageInstrumenty .instrumentyFlute .fluteBody{
    transform:rotate(180deg) scaleX(0.84) scaleY(0.72);
  }
}

/* ===== v283: instrumenty landscape lock + portrait notice ===== */
.instrumentyOrientationLock{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  margin:10px 0 14px;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(180deg, rgba(14,18,38,0.86), rgba(8,12,28,0.92));
  box-shadow:0 14px 34px rgba(0,0,0,0.22);
  color:#f6f9ff;
  font-weight:800;
  letter-spacing:0.01em;
  text-align:center;
}

#pageInstrumenty.instrumentyOrientationLocked{
  position:relative;
  overflow:hidden;
}

#pageInstrumenty.instrumentyOrientationLocked .instrumentyOrientationLock{
  position:fixed;
  inset:0;
  z-index:9999;
  margin:0;
  padding:28px;
  min-height:100dvh;
  border:none;
  border-radius:0;
  background:radial-gradient(circle at 50% 20%, rgba(78,112,255,0.22), transparent 34%), linear-gradient(180deg, rgba(8,12,30,0.985), rgba(4,8,24,0.995));
  box-shadow:none;
  color:#f7fbff;
  font-size:clamp(24px, 4.6vw, 42px);
  line-height:1.28;
  text-align:center;
}

#pageInstrumenty.instrumentyOrientationLocked .gameTitle,
#pageInstrumenty.instrumentyOrientationLocked .gameSubtitle,
#pageInstrumenty.instrumentyOrientationLocked .scoreDisplay,
#pageInstrumenty.instrumentyOrientationLocked .instrumentyPatternRow,
#pageInstrumenty.instrumentyOrientationLocked .instrumentyBoard,
#pageInstrumenty.instrumentyOrientationLocked .instrumentyHint,
#pageInstrumenty.instrumentyOrientationLocked .instrumentyBottomPanel{
  display:none !important;
}

@media (orientation: landscape){
  .instrumentyOrientationLock[hidden]{
    display:none !important;
  }
}


/* ===== v285: bozek snake arena viewport + landscape controls ===== */
#pageBozek .bozekGameWrap{
  gap: 8px;
}
#pageBozek .bozekCanvasFrame{
  flex: 1 1 auto;
  min-height: 0 !important;
}
#pageBozek .bozekGameControls{
  position: relative;
}
#pageBozek .bozekControlPanelHandle{
  display: none;
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 88px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(106, 92, 255, .96);
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
  padding: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
}
#pageBozek .bozekControlPanelHandle:active{
  transform: translateX(-50%) translateY(1px);
}
#pageBozek .bozekControlPanelChevron{
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
}
#pageBozek .bozekControlPanelChevron::before,
#pageBozek .bozekControlPanelChevron::after{
  content: "";
  position: absolute;
  top: 7px;
  width: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
}
#pageBozek .bozekControlPanelChevron::before{
  left: 1px;
  transform: rotate(35deg);
}
#pageBozek .bozekControlPanelChevron::after{
  right: 1px;
  transform: rotate(-35deg);
}

@media (orientation: portrait){
  #pageBozek .bozekPage.inGame{
    padding-top: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #pageBozek .bozekGameWrap{
    flex: 1 1 auto;
  }
}

@media (max-width: 980px) and (orientation: landscape){
  #pageBozek,
  #pageBozek.active,
  #pageBozek .bozekPage,
  #pageBozek .bozekPage.inGame{
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #pageBozek .bozekPage.inGame{
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #pageBozek .bozekPage.inGame .bozekCanvasFrame{
    margin-bottom: 0 !important;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls{
    --bozekHandleSize: 28px;
    position: fixed;
    left: 50%;
    bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    transform: translateX(-50%) translateY(-8px);
    width: min(calc(100vw - 12px), 780px);
    padding: calc(var(--bozekHandleSize) + 10px) 12px 10px;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    border: none;
    overflow: visible;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--bozekHandleSize);
    bottom: 0;
    border-radius: 20px;
    background: rgba(34, 18, 74, .92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
    z-index: 0;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls.isCollapsed{
    transform: translateX(-50%) translateY(calc(100% - var(--bozekHandleSize) + 4px));
  }

  #pageBozek .bozekPage.inGame .bozekControlPanelHandle{
    display: inline-flex;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls.isCollapsed .bozekControlPanelChevron{
    transform: rotate(180deg);
  }

  #pageBozek .bozekPage.inGame .bozekControlRow{
    display: contents;
  }

  #pageBozek .bozekPage.inGame .bozekControlBtn,
  #pageBozek .bozekPage.inGame .bozekGain{
    position: relative;
    z-index: 2;
    transition: opacity .18s ease, transform .18s ease;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls.isCollapsed .bozekControlBtn,
  #pageBozek .bozekPage.inGame .bozekGameControls.isCollapsed .bozekGain{
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }

  #pageBozek .bozekPage.inGame .bozekGameControls:not(.isCollapsed) .bozekControlBtn,
  #pageBozek .bozekPage.inGame .bozekGameControls:not(.isCollapsed) .bozekGain{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #pageBozek .bozekPage.inGame .bozekGain{
    min-width: 170px;
    max-width: 190px;
    order: 99;
  }
}


/* === v6: snake arena cleanup === */
.bozekControlPanelHandle{ display:none !important; }
.bozekGameControls{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
}
.bozekGameControls .bozekControlRow{
  width:auto;
  gap:10px;
}
.bozekControlRow--single{
  width:auto;
  max-width:100%;
  flex-wrap:nowrap;
}
.bozekControlRow--single .bozekControlBtn{
  flex:0 0 auto;
}
.bozekStage[data-mini="snakeArena"] .bozekGameHud--overlay{
  display:none !important;
}
@media (max-width: 430px){
  .bozekGameControls{ gap:8px; }
  .bozekGameControls .bozekControlRow{ gap:8px; }
}

.bozekStage[data-mini="snakeArena"] .bozekHero{display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}

body.snakearena-live #speakingFaceOverlay,
body.snakearena-live #bozekHero,
.bozekStage[data-mini="snakeArena"][data-snake-running="1"] .bozekHero{display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}


/* v75 browser chrome dark lock */
html, body{ background-color:#080015 !important; color-scheme:dark; }
body.yohAdMode, body.yohAdMode::before{ background-color:#080015 !important; }