/* ============================================================
   Style tymczasowe - rekonstrukcja CSS-em, bez grafik.
   Wszystkie miejsca oznaczone slowem ASSET to punkty podmiany
   na Twoje PNG. Logika nie zalezy od tych stylow.
   UWAGA: nie zagniezdzaj komentarzy w CSS - pierwsze zamkniecie
   konczy komentarz i psuje reszte pliku.
   ============================================================ */

:root{
  --taskbar-h: 30px;
  --ui-font: Tahoma, "DejaVu Sans", Verdana, sans-serif;
  --face: #ece9d8;
  --face-dk: #aca899;
  --face-lt: #ffffff;
  --title-a1: #0a246a;
  --title-a2: #3a6ea5;
  --title-i1: #7f9db9;
  --ms-cell: 16px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%; margin: 0;
  font: 11px var(--ui-font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- PULPIT ---------- */
#desktop{
  position: absolute; inset: 0 0 var(--taskbar-h) 0;
  background: url(../assets/wallpaper.jpg) center / cover no-repeat, #3a7bd5;
  overflow: hidden;
}

.icons{ padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.dicon{
  width: 84px; padding: 4px; border: 0; background: transparent;
  color: #fff; font: 11px var(--ui-font); cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
}
/* Ikony sa elementami <img>, nie tlem ze zmiennej CSS - sciezka w
   custom property rozwiazuje sie wzgledem arkusza (/css/), a nie
   dokumentu, wiec zadna sie nie wczytywala. */
.dicon img.ico{
  width: 32px; height: 32px; display: block;
  image-rendering: pixelated;
}
.dicon:focus{ outline: 1px dotted #fff; }
.dicon:active img.ico{ filter: brightness(.8); }

/* ---------- PASEK ZADAN ---------- */
#taskbar{
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  /* bar.png ma 5x30 - powtarzany w poziomie, wysokosc = --taskbar-h */
  background: url(../assets/skin/bar.png) repeat-x left top;
  display: flex; align-items: center; gap: 4px; padding: 0 2px 0 0;
  z-index: 9000;
}

#start-btn{
  width: 97px; height: 30px; flex: 0 0 97px;
  border: 0; padding: 0; border-radius: 0; cursor: default;
  background: url(../assets/skin/start-normal.png) no-repeat left top;
  /* napis jest juz na grafice - tekst zostaje dla czytnikow ekranu */
  font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden;
}
#start-btn:hover{ background-image: url(../assets/skin/start-hover.png); }
#start-btn:active,
#start-btn.on{ background-image: url(../assets/skin/start-press.png); filter: none; }

/* bez odstepu miedzy zakladkami - w XP stykaly sie krawedziami.
   Odstep od przycisku Start daje teraz spacer.png ponizej, wiec
   wlasnego wypelnienia juz tu nie ma. */
#tasks{ flex: 1; display: flex; align-items: center; gap: 0; overflow: hidden; }

/* przerywnik miedzy przyciskiem Start a zakladkami - widoczny takze
   wtedy, gdy nie ma zadnego otwartego okna.
   Grafika ma 6 px, po 10 px odstepu z kazdej strony daje 26 px. */
#tasks::before{
  content: "";
  flex: 0 0 26px; width: 26px; height: 30px;
  background: url(../assets/skin/spacer.png) no-repeat center top;
}

/* Zakladki: cztery stany, kazdy 147x30 - pelna wysokosc paska.
   Naturalny rozmiar, zero skalowania. */
.task{
  height: 30px; flex: 0 1 147px; min-width: 52px; max-width: 147px;
  border: 0; border-radius: 0; cursor: default; padding: 0 8px 0 6px;
  display: flex; align-items: center; gap: 5px;
  background: url(../assets/skin/tab.png) no-repeat left top / 147px 30px;
  color: #fff; font: 11px var(--ui-font); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}
.task-ico{ width: 16px; height: 16px; flex: 0 0 16px; image-rendering: pixelated; }

/* stany zmieniaja WYLACZNIE obrazek - rozmiar i pozycja zostaja z bazy */
.task:hover{ background-image: url(../assets/skin/tab-hover.png); }
.task.active{ background-image: url(../assets/skin/tab-selected.png); }

/* pulsowanie przy nowej wiadomosci - wlasny pomaranczowy stan,
   wiec nie myli sie juz z najechaniem mysza */
.task.flash{ background-image: url(../assets/skin/tab-orange.png); }

#tray{
  position: relative;
  height: var(--taskbar-h);
  padding: 0 8px 0 34px;          /* miejsce na lewa zaokraglona koncowke */
  display: flex; align-items: center; gap: 6px;
  /* bar-light.png ma 2x30 - powtarzany w poziomie */
  background: url(../assets/skin/bar-light.png) repeat-x left top;
  color: #fff;
}
/* bar-light-start.png (30x30) to lewa krawedz zasobnika */
#tray::before{
  content: "";
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  background: url(../assets/skin/bar-light-start.png) no-repeat left top;
}

/* Ikony sa 32x32, w zasobniku maja miec 16 - dokladnie polowa,
   wiec skalowanie wypada na calkowitej krotnosci i nie rozmywa pikseli. */
.tray-ico{
  width: 16px; height: 16px; flex: 0 0 16px;
  border: 0; padding: 0; cursor: default;
  background: transparent center / 16px 16px no-repeat;
  font-size: 11px; line-height: 1; color: #fff;
  image-rendering: pixelated;
}
.tray-ico:hover{ filter: brightness(1.25); }

#tray-winamp{ background-image: url(../assets/skin/winamp.png); }
#tray-sound { background-image: url(../assets/skin/sound.png); }
#tray-sound.muted{ background-image: url(../assets/skin/mute.png); }

/* wskaznik jezyka klawiatury - jak w XP: biale pudelko z dwoma literami */
.tray-lang{
  height: 16px; min-width: 20px; padding: 0 3px;
  border: 1px solid #7f9db9; border-radius: 2px;
  background: #f2f2f2; color: #0a246a;
  font: bold 10px var(--ui-font); line-height: 14px;
  cursor: default;
}
.tray-lang:hover{ background: #fff; }

#clock{ font: 11px var(--ui-font); margin-left: 2px; }

/* ---------- MENU START ----------
   Skladane z kafelkow, szerokosc 380 px wynika z grafik:
     naglowek  = top-left(65) + top-center-fix(250) + top-right(65)
     srodek    = left(2) + kolumna 188 + middle(1) + kolumna 183 + right(6)
     stopka    = bottom(380x41)
   Wysokosc srodka bierze sie z left/middle/right - maja po 370 px. */
/* display:flex przebija wbudowane [hidden]{display:none}, wiec ukrycie
   trzeba zadeklarowac jawnie - inaczej menu wisi na ekranie zawsze */
#start-menu[hidden]{ display: none; }

#start-menu{
  position: absolute; left: 0; bottom: var(--taskbar-h);
  width: 380px; z-index: 9500;
  background: transparent;
  box-shadow: 2px -2px 8px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}

/* naglowek z awatarem */
.sm-top{
  position: relative;
  height: 67px; flex: 0 0 67px;
  background:
    url(../assets/skin/start/top-left.png)  no-repeat left top,
    url(../assets/skin/start/top-right.png) no-repeat right top,
    url(../assets/skin/start/top-center-fix.png) repeat-x 65px top;
}
/* miejsce na awatar wypalone w top-left.png: 48x48 w punkcie 9,9 */
.sm-avatar{
  position: absolute; left: 9px; top: 9px;
  width: 48px; height: 48px;
  image-rendering: pixelated;
}
.sm-user{
  position: absolute; left: 71px; top: 20px;
  font: bold 18px var(--ui-font); color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,.45);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* dwie kolumny miedzy pionowymi krawedziami */
.sm-cols{
  height: 370px; flex: 0 0 370px;
  display: flex;
  background:
    url(../assets/skin/start/left.png)   repeat-y left top,
    url(../assets/skin/start/right.png)  repeat-y right top,
    url(../assets/skin/start/middle.png) repeat-y 190px top,
    #fff;
}
.sm-col{ display: flex; flex-direction: column; padding: 6px 0; overflow: auto; }
.sm-left { width: 188px; margin-left: 2px; }
.sm-right{ width: 183px; margin-left: 1px; background: #d3e5fa; }

.sm-item{
  width: 100%; border: 0; background: transparent; cursor: default;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font: 11px var(--ui-font); text-align: left;
  color: #000;
}
.sm-item img.ico{ width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; }
.sm-item.sm-small img.ico{ width: 24px; height: 24px; flex: 0 0 24px; }
.sm-item:hover{ background: #2f65c9; color: #fff; }

/* przerywniki sa poziome i maja wlasna szerokosc na kolumne */
.sm-sep{ flex: 0 0 auto; margin: 4px 0; background-repeat: no-repeat; }
.sm-sep.left {
  height: 3px;
  background-image: url(../assets/skin/start/left-spacer.png);
  background-position: center;
}
.sm-sep.right{
  height: 4px;
  background-image: url(../assets/skin/start/right-spacer.png);
  background-position: center;
}

/* stopka z wylogowaniem i wylaczeniem */
.sm-bottom{
  height: 41px; flex: 0 0 41px;
  background: url(../assets/skin/start/bottom.png) no-repeat left top;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding-right: 14px;
}
.sm-power{
  border: 0; background: transparent; cursor: default;
  display: flex; align-items: center; gap: 3px;
  padding: 3px; border-radius: 2px;
  font: 11px var(--ui-font); color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  /* caly przycisk o piksel wyzej - przesuwanie samej ikony rozjezdzalo
     wypelnienie i prostokat wychodzil nierowny (2 px u gory, 4 u dolu) */
  position: relative; top: -1px;
}
.sm-power img{
  width: 24px; height: 24px;
  image-rendering: auto;              /* gladkie skalowanie, nie pikselowe */
}
/* Podswietlenie obejmuje ikone RAZEM z napisem - jak w oryginale.
   Bez podkreslenia tekstu. */
.sm-power:hover{ background: #2b69c6; }
.sm-power:hover img{ filter: brightness(1.15); }

/* Dosuniecie do ukladu z oryginalu. Przesuwamy CALE przyciski, nie same
   ikony - inaczej prostokat podswietlenia znowu zrobilby sie nierowny. */
#sm-logoff  { left: 9px; }
#sm-shutdown{ left: 6px; }

/* ---------- OKNA ---------- */
/* OKNO
   Ramka to Twoje kafelki 4x4, ale rysowane na OSOBNEJ warstwie (::before),
   ktora zaczyna sie dopiero POD paskiem tytulu. Gdyby siegala do samej
   gory, wystawalaby przez przezroczyste zaokraglenia boczkow paska.
   Samo okno nie ma tla - dzieki temu zaokraglenia pokazuja pulpit. */
.win{
  --title-h: 29px;
  position: absolute; display: flex; flex-direction: column;
  padding: 0 4px 4px 4px;        /* miejsce na ramke */
  background: transparent;
  border: 0; border-radius: 0;
  box-shadow: 2px 2px 8px rgba(0,0,0,.45);
  min-width: 160px;
}
.win::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: var(--title-h);
  z-index: -1;                   /* pod trescia, ale w obrebie okna */
  pointer-events: none;
  background-image:
    url(../assets/skin/win-frame-disabled-corner-left.png),
    url(../assets/skin/win-frame-disabled-corner.png),
    url(../assets/skin/win-frame-disabled-side-left.png),
    url(../assets/skin/win-frame-disabled-side.png),
    url(../assets/skin/win-frame-disabled-bottom.png);
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-x;
  background-position: left bottom, right bottom, left top, right top, left bottom;
}
.win.active::before{
  background-image:
    url(../assets/skin/win-frame-enabled-corner-left.png),
    url(../assets/skin/win-frame-enabled-corner.png),
    url(../assets/skin/win-frame-enabled-side-left.png),
    url(../assets/skin/win-frame-enabled-side.png),
    url(../assets/skin/win-frame-enabled-bottom.png);
}
body.dragging{ cursor: move; }
body.dragging .win{ pointer-events: none; }

/* PASEK TYTULU - trzy odrebne czesci: boczek | kafelek | boczek
   Kafelek NIE MOZE siegac pod boczki, bo przez ich przezroczyste
   zaokraglenia widac wtedy niebieskie tlo zamiast pulpitu.
   Ograniczamy go do obszaru tresci (padding 15px = szerokosc boczka)
   przez background-clip: content-box. */
.win-title{
  position: relative;
  margin: 0 -4px;
  height: 29px; flex: 0 0 29px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 15px;
  background: url(../assets/skin/win-disabled-bg.png) repeat-x left top;
  background-origin: content-box;
  background-clip: content-box;
  color: #d8e4f0; font-weight: bold; font-size: 11px;
  cursor: move;
}
.win.active .win-title{
  background-image: url(../assets/skin/win-enabled-bg.png);
  color: #fff;
}

.win-title::before,
.win-title::after{
  content: "";
  position: absolute; top: 0;
  width: 15px; height: 29px;
  background: url(../assets/skin/win-disabled-side.png) no-repeat left top;
}
.win.active .win-title::before,
.win.active .win-title::after{
  background-image: url(../assets/skin/win-enabled-side.png);
}
.win-title::before{ left: 0; }
.win-title::after{ right: 0; transform: scaleX(-1); }

/* dzieci musza byc NAD boczkami - pseudo-elementy sa pozycjonowane,
   wiec bez tego zaslonilyby ikone i tytul */
.win-ico, .win-caption, .win-btns{ position: relative; z-index: 1; }

/* Padding 15px istnieje po to, by przyciac kafelek tla - nie po to,
   by odsunac tresc. Ujemne marginesy oddaja ikonie i przyciskom
   miejsce przy krawedziach, tak jak w oryginale. */
.win-ico{ width: 16px; height: 16px; background: center/contain no-repeat; margin-left: -8px; }
.win-caption{ flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 1px rgba(0,0,0,.5); }

.win-btns{ display: flex; gap: 2px; margin-right: -10px; }
.wb{
  position: relative;
  width: 21px; height: 21px; flex: 0 0 21px;
  border: 0; padding: 0; cursor: default;
  background: center/21px 21px no-repeat;
  font-size: 0;
}
.wb-min  { background-image: url(../assets/skin/win-min-disabled.png); }
.wb-max  { background-image: url(../assets/skin/win-max-disabled.png); }
.wb-close{ background-image: url(../assets/skin/win-close-disabled.png); }
.win.active .wb-min  { background-image: url(../assets/skin/win-min-enabled.png); }
.win.active .wb-max  { background-image: url(../assets/skin/win-max-enabled.png); }
.win.active .wb-close{ background-image: url(../assets/skin/win-close-enabled.png); }

/* rozjasnienie o 15% na najechanie - nakladka, zeby nie trzeba bylo
   osobnych grafik dla stanu hover */
.wb::after{
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .08s;
  pointer-events: none;
  /* maska w ksztalcie przycisku, zeby rozjasnienie nie wychodzilo
     poza zaokraglone rogi grafiki */
  -webkit-mask: var(--wb-src) center/21px 21px no-repeat;
          mask: var(--wb-src) center/21px 21px no-repeat;
}
.wb:hover::after{ opacity: .15; }
.wb:active::after{ opacity: .28; }

.wb-min  { --wb-src: url(../assets/skin/win-min-enabled.png); }
.wb-max  { --wb-src: url(../assets/skin/win-max-enabled.png); }
.wb-close{ --wb-src: url(../assets/skin/win-close-enabled.png); }

/* Tlo przenieslo sie z okna na jego wnetrze - okno musi zostac
   przezroczyste, zeby zaokraglenia paska pokazywaly pulpit. */
.win-menu{ display: flex; border-bottom: 1px solid var(--face-dk); background: var(--face); }
.menu-top{ border: 0; background: transparent; padding: 3px 9px; font: 11px var(--ui-font); cursor: default; }
.menu-top:hover{ background: #2f65c9; color: #fff; }

.win-body{ flex: 1; overflow: auto; padding: 3px; background: var(--face); }
.win.maxed{ border-radius: 0; }

.win-grip{
  position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px;
  cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--face-dk) 2px 3px);
}

/* dropdown */
.dropdown{
  position: fixed; min-width: 150px; max-height: 320px; overflow: auto;
  background: var(--face); border: 1px solid var(--face-dk);
  box-shadow: 2px 2px 5px rgba(0,0,0,.35); padding: 2px 0;
}
.dd-item{
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 4px 20px; font: 11px var(--ui-font); cursor: default;
}
.dd-item:hover{ background: #2f65c9; color: #fff; }
.dd-item.checked::before{ content: "✓"; position: absolute; margin-left: -14px; }
.dd-sep{ height: 1px; background: var(--face-dk); margin: 3px 4px; }

/* dialog */
.dlg{ padding: 14px 12px 10px; }
.dlg p{ margin: 0 0 14px; }
.dlg-btns{ text-align: center; }
.btn{
  min-width: 72px; padding: 3px 10px; font: 11px var(--ui-font); cursor: default;
  background: var(--face); border: 1px solid var(--face-dk); border-radius: 3px;
}
.btn:active{ border-color: #666; }

/* ============================================================
   SAPER - skin z assets/skin/minesweeper
   Ramki skladane z kafelkow, tak jak w oryginale:
     - obwodka zewnetrzna: rogi 9x9 + krawedzie 9x9 powtarzane
     - panel gorny: top-bg 4x37 powtarzany w poziomie
     - liczniki i buzka: wlasne obudowy
     - plansza: obwodka wewnetrzna 4x4
   ============================================================ */
:root{
  --ms: url(../assets/skin/minesweeper);
  --ms-cell: 15px;
}
/* Saper ma wlasna obwodke, wiec wnetrze okna nie doklada juz
   swojego 3px marginesu ani bezowego tla */
.ms-window .win-body{ padding: 0; background: transparent; overflow: hidden; }
.ms-window .ms, .ms-window .ms-outer{ height: 100%; }
.ms-window .ms-outer{ display: flex; flex-direction: column; }

.ms{ background: #c0c7c8; padding: 0; }

/* --- obwodka zewnetrzna --- */
.ms-outer{
  padding: 9px;
  background:
    url(../assets/skin/minesweeper/top-left.png)     no-repeat left top,
    url(../assets/skin/minesweeper/top-right.png)    no-repeat right top,
    url(../assets/skin/minesweeper/bottom-left.png)  no-repeat left bottom,
    url(../assets/skin/minesweeper/bottom_right.png) no-repeat right bottom,
    url(../assets/skin/minesweeper/top.png)    repeat-x left top,
    url(../assets/skin/minesweeper/bottom.png) repeat-x left bottom,
    url(../assets/skin/minesweeper/left.png)   repeat-y left top,
    url(../assets/skin/minesweeper/right.png)  repeat-y right top,
    #c0c7c8;
}

/* --- panel gorny ---
   Kazdy kawalek to OSOBNY element o dokladnej szerokosci, ulozony
   w rzedzie - tak samo jak w skin.html, gdzie uklad wychodzi idealnie.
   Wczesniej bylo to skladane z warstw tla jednego pudelka i rozkladane
   przez space-between, przez co odstepy zalezaly od przegladarki. */
.ms-panel{
  height: 37px;
  margin-bottom: 9px;
  padding: 0;
  display: flex; align-items: stretch;
}
.pc{ display: block; height: 37px; background-repeat: no-repeat; background-position: left top; }
.pc.fill{ flex: 1 1 auto; background: url(../assets/skin/minesweeper/top-bg.png) repeat-x left top; }

.pc[data-p="count-left"] { flex: 0 0 8px;  width: 8px;  background-image: url(../assets/skin/minesweeper/count-left.png); }
.pc[data-p="count-right"]{ flex: 0 0 8px;  width: 8px;  background-image: url(../assets/skin/minesweeper/count-right.png); }
.pc[data-p="time-left"]  { flex: 0 0 8px;  width: 8px;  background-image: url(../assets/skin/minesweeper/time-left.png); }
.pc[data-p="time-right"] { flex: 0 0 10px; width: 10px; background-image: url(../assets/skin/minesweeper/time-right.png); }
.pc[data-p="face-left"]  { flex: 0 0 3px;  width: 3px;  background-image: url(../assets/skin/minesweeper/face-left.png); }
.pc[data-p="face-right"] { flex: 0 0 3px;  width: 3px;  background-image: url(../assets/skin/minesweeper/face-right.png); }

/* --- cyfry ---
   Pasek nad i pod cyframi ma 39x7, same cyfry 3 x 13x23:
   7 + 23 + 7 = 37, czyli dokladnie wysokosc panelu. */
.ms-digits{
  position: relative;
  flex: 0 0 39px; width: 39px; height: 37px;
  padding-top: 7px;
  display: flex;
}
.ms-digits::before, .ms-digits::after{
  content: ""; position: absolute; left: 0; width: 39px; height: 7px;
}
.ms-digits::before{ top: 0; }
.ms-digits::after { bottom: 0; }
.ms-digits.mines::before{ background: url(../assets/skin/minesweeper/count-top.png); }
.ms-digits.mines::after { background: url(../assets/skin/minesweeper/count_bottom.png); }
.ms-digits.time::before { background: url(../assets/skin/minesweeper/time-top.png); }
.ms-digits.time::after  { background: url(../assets/skin/minesweeper/time-bottom.png); }
.dg{
  width: 13px; height: 23px; flex: 0 0 13px;
  background: url(../assets/skin/minesweeper/dial.png) center / 13px 23px no-repeat;
}

/* --- buzka ---
   Boki (face-left, face-right) sa osobnymi elementami w rzedzie,
   wiec sam przycisk ma tylko 21 px szerokosci: pasek gorny 9,
   twarz 20, pasek dolny 8 = 37. */
.ms-face{
  width: 21px; height: 37px; flex: 0 0 21px;
  border: 0; padding: 0; cursor: default;
  background:
    var(--face-img) no-repeat left 9px / 21px 20px,
    url(../assets/skin/minesweeper/face-top.png)    no-repeat left top / 21px 9px,
    url(../assets/skin/minesweeper/face-bottom.png) no-repeat left bottom / 21px 8px;
  --face-img: url(../assets/skin/minesweeper/face-happy.png);
}
.ms-face[data-state="wow"] { --face-img: url(../assets/skin/minesweeper/face-scared.png); }
.ms-face[data-state="dead"]{ --face-img: url(../assets/skin/minesweeper/face-dead.png); }
.ms-face[data-state="cool"]{ --face-img: url(../assets/skin/minesweeper/face-won.png); }

/* --- plansza --- */
.ms-field{
  position: relative;
  flex: 1;
  padding: 4px;
  background:
    url(../assets/skin/minesweeper/inner-top-right.png)   no-repeat right top,
    url(../assets/skin/minesweeper/inner-bottom-left.png) no-repeat left bottom,
    url(../assets/skin/minesweeper/inner-bottom-right.png) no-repeat right bottom,
    url(../assets/skin/minesweeper/inner-top.png)    repeat-x left top,
    url(../assets/skin/minesweeper/inner-bottom.png) repeat-x left bottom,
    url(../assets/skin/minesweeper/inner-left.png)   repeat-y left top,
    url(../assets/skin/minesweeper/inner-right.png)  repeat-y right top,
    #c0c7c8;
}
/* Kafelki maja 15x15, a siatka w oryginale ma podzialke co 16 px -
   brakujacy piksel to linia miedzy polami. Robimy ja odstepem w gridzie
   i tlem planszy; kolor #87888f jest ten sam co w obwodce wewnetrznej
   i w cieniach samych kafelkow. */
.ms-grid{ display: grid; gap: 1px; line-height: 0; background: #87888f; }

.ms-cell{
  width: var(--ms-cell); height: var(--ms-cell);
  border: 0; font-size: 0; cursor: default;
  background: url(../assets/skin/minesweeper/hidden.png) center / 15px 15px no-repeat;
}
.ms-cell.open              { background-image: url(../assets/skin/minesweeper/safe.png); }
/* wgniecenie przy przytrzymaniu - wyglada jak pole odkryte */
.ms-cell[data-press]       { background-image: url(../assets/skin/minesweeper/safe.png); }

/* przycisk generowania planszy we wlasnym rozmiarze */
.ms-gen{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 6px 14px; cursor: default;
  font: 11px var(--ui-font);
  background: #c0c7c8; color: #000;
  border: 2px outset #fff;
}
.ms-gen:active{ border-style: inset; }
.ms-cell[data-flag="1"]    { background-image: url(../assets/skin/minesweeper/marker.png); }
.ms-cell[data-flag="2"]    { background-image: url(../assets/skin/minesweeper/question.png); }
.ms-cell[data-n="1"]       { background-image: url(../assets/skin/minesweeper/1.png); }
.ms-cell[data-n="2"]       { background-image: url(../assets/skin/minesweeper/2.png); }
.ms-cell[data-n="3"]       { background-image: url(../assets/skin/minesweeper/3.png); }
.ms-cell[data-n="4"]       { background-image: url(../assets/skin/minesweeper/4.png); }
.ms-cell[data-n="5"]       { background-image: url(../assets/skin/minesweeper/5.png); }
.ms-cell[data-n="6"]       { background-image: url(../assets/skin/minesweeper/6.png); }
.ms-cell[data-n="7"]       { background-image: url(../assets/skin/minesweeper/7.png); }
.ms-cell[data-n="8"]       { background-image: url(../assets/skin/minesweeper/8.png); }
.ms-cell[data-mine="1"]    { background-image: url(../assets/skin/minesweeper/mine.png); }
.ms-cell[data-mine="boom"] { background-image: url(../assets/skin/minesweeper/boom.png); }
.ms-cell[data-mine="wrong"]{ background-image: url(../assets/skin/minesweeper/mine-wrong.png); }

/* ============================================================
   PASJANS
   ============================================================ */
:root{
  --card-w: 71px;
  --card-h: 96px;
}

/* Okno Pasjansa ma STALY rozmiar - tlo play_bg.png (585x367) jest
   pojedynczym obrazkiem, wiec rozciaganie okna powtarzaloby je albo
   zostawialo puste miejsce. */
.sol-window .win-body{ padding: 0; background: transparent; overflow: hidden; }

/* KLUCZOWE: bez position:relative warstwa przeciagania pozycjonuje sie
   wzgledem calego okna (razem z paskiem tytulu i menu), przez co karta
   "ucieka" przy chwyceniu. */
.sol{ position: relative; display: flex; flex-direction: column; }
.sol-board{
  width: 585px; height: 367px;
  background: url(../assets/cards/play_bg.png) no-repeat left top;
  /* pozycja pierwszej karty dopasowana do bialych obrysow w tle */
  padding: 5px 0 0 20px;
}
.sol-top{ display: flex; gap: 11px; margin-bottom: 12px; }
.sol-gap{ width: var(--card-w); }
.sol-tab{ display: flex; gap: 11px; align-items: flex-start; }

.pile{ position: relative; width: var(--card-w); height: var(--card-h); flex: 0 0 var(--card-w); }
/* kolumny musza byc wysokie, zeby dalo sie upuscic kate PONIZEJ ostatniej karty */
.pile.col{ height: auto; min-height: calc(var(--card-h) * 2.6); }
/* Puste miejsca sa juz narysowane w tle (biale obrysy), wiec nie
   dorysowujemy wlasnych ramek - dublowalyby sie z grafika. */
.pile-empty{ position: absolute; inset: 0; }
.pile-empty.recycle::after{
  content: "↻"; color: rgba(255,255,255,.55); font-size: 26px;
  display: grid; place-items: center; height: 100%;
}

/* Karty to gotowe grafiki 71x96 - obrazek ustawia JS na elemencie.
   Zaden border ani cien, bo ramka jest juz narysowana w pliku. */
.card{
  position: absolute; width: var(--card-w); height: var(--card-h);
  border: 0; border-radius: 0; background-color: transparent;
  background-size: var(--card-w) var(--card-h);
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.card.down{ background-color: #1a4fa0; }
.card.grabbable{ cursor: grab; }

.drag-layer{ position: absolute; z-index: 999; pointer-events: none; }
.drag-layer .card{ filter: drop-shadow(2px 3px 4px rgba(0,0,0,.5)); }

/* wybor talii */
.deck-pick{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; }
.deck-pick button{
  width: 56px; height: 76px; padding: 0; cursor: default;
  border: 2px solid var(--face-dk); border-radius: 4px;
  background: center / cover no-repeat;
}
.deck-pick button:hover{ border-color: #2f65c9; }
.deck-pick button.on{ border-color: #f6a623; box-shadow: 0 0 0 2px #f6a623; }

.sol-status{
  flex: 0 0 20px; display: flex; justify-content: space-between;
  padding: 3px 8px; background: var(--face); border-top: 1px solid var(--face-dk);
}
.sol.won .sol-board{ animation: winflash .6s ease-in-out 3; }
@keyframes winflash{ 50%{ filter: brightness(1.4); } }

/* ============================================================
   WINAMP
   ============================================================ */
.wa-window .win-body{ padding: 0; background: #1c1c26; }
/* ASSET: skin Winampa -> assets/skin/main.png itd. */
.wa-main{ padding: 6px; color: #00ff4c; font: 9px "Courier New", monospace; }

.wa-display{
  background: #000; border: 1px inset #444; padding: 4px;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center;
}
.wa-time{ font: bold 20px "Courier New", monospace; letter-spacing: 1px; }
.wa-vis{ justify-self: end; }
.wa-marquee{ grid-column: 1 / -1; overflow: hidden; white-space: nowrap; color: #00ff4c; height: 12px; }
.wa-info{ grid-column: 1 / -1; color: #0a8; font-size: 9px; }

.wa-sliders{ display: flex; gap: 8px; margin: 5px 0; color: #8f8; }
.wa-sliders input{ width: 78px; }
.wa-seekrow input{ width: 100%; }

.wa-buttons{ display: flex; gap: 2px; margin-top: 5px; flex-wrap: wrap; }
.wa-btn, .wa-tog{
  background: #2b2b3a; color: #cfc; border: 1px outset #555;
  font: 9px "Courier New", monospace; padding: 3px 5px; cursor: default;
}
.wa-btn:active{ border-style: inset; }
.wa-tog.on, .wa-btn.on{ background: #0a5; color: #000; }
.wa-open{ margin-left: auto; }
.wa-main.drop{ outline: 2px dashed #0f6; }

/* equalizer */
.wa-eq{ padding: 6px; background: #1c1c26; }
.eq-top{ display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.eq-btn{
  background: #2b2b3a; color: #cfc; border: 1px outset #555;
  font: 9px "Courier New", monospace; padding: 3px 6px; cursor: default;
}
.eq-btn.off{ color: #666; }
.eq-curve{ background: #000; border: 1px inset #444; margin-left: auto; }

.eq-sliders{ display: flex; align-items: flex-end; gap: 2px; }
.eq-band{ display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eq-band span{ font: 8px "Courier New", monospace; color: #0a8; }
.eq-band input[type=range]{
  writing-mode: vertical-lr; direction: rtl;
  width: 16px; height: 62px; accent-color: #0f6;
}
.eq-sep{ width: 6px; }

/* playlista */
.wa-pl{ height: 100%; display: flex; flex-direction: column; background: #12121a; }
.pl-list{ flex: 1; overflow: auto; }
.pl-row{
  display: flex; gap: 6px; padding: 2px 5px;
  font: 10px "Courier New", monospace; color: #cfc; cursor: default;
}
.pl-row:hover{ background: #23233a; }
.pl-row.cur{ background: #0a3; color: #000; }
.pl-n{ color: #0a8; min-width: 20px; }
.pl-t{ flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-bar{ display: flex; gap: 3px; padding: 4px; border-top: 1px solid #333; align-items: center; }
.pl-hint{ font: 9px var(--ui-font); color: #566; margin-left: auto; }

::-webkit-scrollbar{ width: 16px; height: 16px; }
::-webkit-scrollbar-track{ background: #e8e8e8; }
::-webkit-scrollbar-thumb{ background: var(--face); border: 1px outset var(--face-lt); }