/* tło strony widać, dopóki świat się nie wczyta: niebo o świcie zamiast czarnego ekranu; potem obraz gry wchodzi płynnie */
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1020 linear-gradient(to bottom, #101a44 0%, #2c4f9a 32%, #6f9fd8 58%, #f3c9a0 82%, #f6a36c 100%) no-repeat; font-family: system-ui, "Segoe UI", sans-serif; color: #fff; }
#game { display: block; width: 100vw; height: 100vh; transition: opacity .9s ease-out; }
.loading #game { opacity: 0; }
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 7px rgba(10, 20, 45, .55); }
#altitude { position: absolute; left: 28px; top: 20px; font-size: 54px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
#altitude small { font-size: 22px; font-weight: 600; margin-left: 4px; opacity: .8; }
#best { position: absolute; left: 30px; top: 80px; font-size: 14px; opacity: .92; }
#progress { position: absolute; left: 34px; top: 150px; width: 8px; height: 34vh; border-radius: 4px; background: rgba(0, 0, 0, .3); }
#progress-zones i { position: absolute; left: 0; width: 100%; opacity: .75; }
#progress-zones i:first-child { border-radius: 0 0 4px 4px; }
#progress-zones i:last-child { border-radius: 4px 4px 0 0; }
#progress-marks b { position: absolute; left: -4px; width: 16px; height: 4px; margin-bottom: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .7); }
#progress-marks b.me { left: -7px; width: 22px; height: 5px; background: #e23d32; z-index: 2; }
#progress-marks u { position: absolute; left: 28px; top: -6px; font-size: 11px; font-weight: 700; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#progress-marks b.me u { color: #ff7a70; }
/* tryb lawy: skala zalana do poziomu lawy i jej znacznik */
#progress-marks i.lava { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0 0 4px 4px; background: linear-gradient(to top, #ff3a00, #ffb02a); box-shadow: 0 0 8px #ff6a1a; }
#progress-marks b.lava { left: -5px; width: 18px; height: 4px; background: #ffb02a; box-shadow: 0 0 6px #ff6a1a; }
#progress-marks b.lava u { color: #ffb466; top: -5px; }
/* odliczanie nad miejscem zebranego przedmiotu */
#timers div { display: none; position: absolute; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 10px; background: rgba(10, 16, 34, .7); font-size: 12px; font-weight: 600; white-space: nowrap; text-shadow: none; }
/* sklep i szafa: panel po prawej, postać widać obok */
#shop { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; display: flex; flex-direction: column; padding: 20px 22px; box-sizing: border-box; background: rgba(18, 16, 34, .93); border-left: 1px solid rgba(242, 194, 48, .45); }
#shop.hidden { display: none; }
#shop header { display: flex; align-items: center; gap: 12px; }
#shop h2 { margin: 0; flex: 1; font-size: 24px; }
#shop-coins { font-size: 20px; color: #ffd24a; font-variant-numeric: tabular-nums; }
#shop-note { margin: 6px 0 12px; font-size: 13px; opacity: .7; }
#shop-note:empty { margin: 0 0 10px; }
#shop button { font: 600 13px system-ui, sans-serif; padding: 7px 12px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
#shop button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
#shop button:disabled { opacity: .45; cursor: default; }
#shop-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#shop-tabs button.on { background: #f2c230; border-color: #f2c230; color: #2a1a04; }
#shop-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; }
/* paski przewijania w panelach gry: cienkie, zaokrąglone, w kolorze panelu (zamiast systemowych) */
#shop-list, #start, #menu > div { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
#shop-list { scrollbar-color: rgba(242, 194, 48, .55) transparent; }
#shop-list::-webkit-scrollbar, #start::-webkit-scrollbar, #menu > div::-webkit-scrollbar { width: 8px; }
#shop-list::-webkit-scrollbar-track, #start::-webkit-scrollbar-track, #menu > div::-webkit-scrollbar-track { background: transparent; }
#shop-list::-webkit-scrollbar-thumb, #start::-webkit-scrollbar-thumb, #menu > div::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 4px; }
#shop-list::-webkit-scrollbar-thumb { background: rgba(242, 194, 48, .55); }
#shop-list::-webkit-scrollbar-thumb:hover { background: rgba(242, 194, 48, .85); }
#shop-list::-webkit-scrollbar-button { display: none; }
#shop .item { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
#shop .item:hover { background: rgba(255, 255, 255, .13); }
#shop .item.worn { background: rgba(242, 194, 48, .18); outline: 1px solid rgba(242, 194, 48, .6); }
#shop .item.locked span { opacity: .6; }
#shop .item span { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
#shop .item small { display: block; font-size: 12px; font-weight: 400; opacity: .75; color: #ffd98a; }
#shop .item img { width: 34px; height: 34px; }
#shop .item.locked img { filter: grayscale(1) opacity(.45); }
/* przegrana w trybie lawy */
#defeat { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%, rgba(120, 20, 0, .55), rgba(20, 4, 2, .82)); text-align: center; }
#defeat.hidden { display: none; }
#defeat > div { width: 360px; padding: 26px 28px; border-radius: 12px; background: rgba(28, 12, 10, .92); border: 1px solid rgba(255, 120, 40, .45); }
#defeat h2 { margin: 0 0 8px; font-size: 34px; color: #ff8a3c; }
#defeat p { margin: 0 0 16px; font-size: 15px; opacity: .9; }
#defeat button { display: block; width: 100%; margin-top: 8px; padding: 10px; font: 600 15px system-ui, sans-serif; border-radius: 8px; border: 2px solid #ff7a1c; background: #ff7a1c; color: #2a0d02; cursor: pointer; }
#defeat button.quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
#coins { position: absolute; left: 30px; top: 124px; font-size: 16px; font-weight: 700; color: #ffd24a; font-variant-numeric: tabular-nums; }
#clock { position: absolute; left: 30px; top: 102px; font-size: 14px; opacity: .92; font-variant-numeric: tabular-nums; }
/* klawisz w podpowiedzi: jasna nakładka z cieniem pod spodem — od razu widać, że chodzi o wciśnięcie klawisza */
kbd { display: inline-block; min-width: 1.5em; margin: 0 .22em 0 0; padding: .08em .5em .12em; box-sizing: border-box; text-align: center; font: 800 .86em/1.35 system-ui, "Segoe UI", sans-serif;
  color: #1b2140; background: linear-gradient(#ffffff, #dfe4ee); border-radius: .38em; box-shadow: 0 .16em 0 #8f98ad, 0 .22em .3em rgba(0, 0, 0, .35); text-shadow: none; vertical-align: .06em; }
kbd + kbd { margin-left: -.05em; }
#toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: 22px; font-weight: 700; opacity: 0; transition: opacity .35s; white-space: nowrap; }
#toast.show { opacity: 1; }
#zone { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 46px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; opacity: 0; transition: opacity 1s; white-space: nowrap; }
#zone.show { opacity: .95; }
#mode { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-size: 13px; padding: 4px 10px; border-radius: 4px; background: rgba(200, 40, 40, .8); display: none; text-shadow: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: 0 0 3px rgba(0, 0, 0, .6); display: none; }
#crosshair.show { display: block; }
#crosshair.ok { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #6dff7c; }
/* podpowiedź z klawiszami: w dolnym stosie, tuż nad paskiem sił i przedmiotów (nie zasłania postaci) */
#hint { font-size: 16px; white-space: nowrap; font-weight: 600; padding: 5px 12px; border-radius: 5px; background: rgba(0, 0, 0, .45); display: none; text-shadow: none; }
#bottom { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#tip { max-width: 620px; padding: 8px 16px; border-radius: 8px; background: rgba(12, 18, 36, .72); font-size: 15.5px; font-weight: 500; text-align: center; text-shadow: none; opacity: 0; transition: opacity .5s; }
#tip.show { opacity: 1; }
#stamina { width: 260px; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .45); overflow: hidden; opacity: 0; transition: opacity .4s; }
#stamina.show { opacity: 1; }
#stamina-fill { height: 100%; width: 100%; background: #7fdc5a; transition: width .1s linear; }
#stamina.low #stamina-fill { background: #e8563f; }
#item-name { display: flex; align-items: baseline; gap: 8px; height: 20px; font-size: 13px; white-space: nowrap; }
#item-name b { font-size: 16px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .55); }
#item-name span { opacity: .82; }
#hotbar { display: flex; gap: 5px; }
.slot { position: relative; width: 52px; height: 52px; border-radius: 6px; background: rgba(15, 20, 35, .55); border: 2px solid rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; font-size: 26px; text-shadow: none; }
.slot.selected { border-color: #fff; background: rgba(40, 55, 90, .7); }
.slot i { position: absolute; left: 4px; top: 2px; font-size: 10px; font-style: normal; opacity: .6; }
.slot b { position: absolute; right: 4px; bottom: 1px; font-size: 13px; font-weight: 700; }
#version { position: absolute; left: 22px; bottom: 14px; font-size: 12px; opacity: .8; }
/* ekran startowy: w tle kamera pokazuje ujęcia planszy, menu jest na zaokrąglonej karcie po prawej stronie
   (ciemne, lekko przezroczyste szkło — bez kolorowych krawędzi) */
#start { position: fixed; top: 18px; right: 18px; bottom: 18px; width: 360px; max-width: calc(100vw - 36px); display: flex; flex-direction: column; box-sizing: border-box;
  padding: 22px 28px 24px; text-align: center; overflow-y: auto; border-radius: 24px;
  background: rgba(16, 22, 46, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
#start > div { display: flex; flex-direction: column; flex: 1; animation: start-in .7s ease-out both; }
@keyframes start-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
#start section.hidden { display: none; }
#start h3 { margin: 18px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
#start label { display: block; margin: 20px 0 -6px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
/* wybór języka: małe pastylki u góry karty */
#langs { display: flex; justify-content: flex-end; gap: 4px; margin: 0 -8px 10px 0; }
#start #langs button { display: block; width: auto; margin: 0; padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; border-radius: 999px; background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, .6); }
#start #langs button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#start #langs button.on { background: rgba(255, 255, 255, .92); color: #18203a; }
/* okno wyboru trybu (po „Graj”): dwa kolorowe kafle — zielony klasyczny, pomarańczowa lawa */
#start #mode-pick button { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 16px 18px; text-align: left; border: 0; border-radius: 14px; box-shadow: 0 5px 0 rgba(0, 0, 0, .28); transition: transform .12s ease-out, filter .12s ease-out; }
#start #mode-pick button i { font-style: normal; font-size: 34px; line-height: 1; }
#start #mode-pick button b { font-size: 19px; font-weight: 800; }
#start #mode-pick button[data-mode="classic"] { background: linear-gradient(135deg, #37b24d, #1c8f6e); }
#start #mode-pick button[data-mode="lava"] { background: linear-gradient(135deg, #ff9f1c, #e8590c); }
#start #mode-pick button[data-mode]:hover { transform: translateY(-2px); filter: brightness(1.12); }
#start #mode-pick button.quiet { display: block; text-align: center; padding: 9px; font-size: 14px; background: transparent; box-shadow: none; opacity: .75; }
#start #mode-pick button.quiet:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
/* ekran wczytywania: gradient strony + kółko i napis; widać go przy starcie, dołączaniu i zmianie planszy */
#loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; pointer-events: none; transition: opacity .3s ease-out; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.loading #loader { opacity: 1; }
#loader i { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: loader-spin .9s linear infinite; }
#loader p { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
.loading #start { display: none; }
/* dopóki gracz nie kliknie „Graj”, nie ma go w świecie — nie ma też wskaźników gry */
.intro #hud, .intro #blur { display: none; }
#start .emblem svg { filter: drop-shadow(0 6px 0 rgba(27, 33, 64, .9)) drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
#menu h2 .emblem { display: inline-block; vertical-align: -7px; margin-right: 10px; }
/* tytuł jak na okładce: grube białe wersaliki z ciemnym konturem i twardym cieniem */
#start h1 { margin: 10px 0 4px; font: 900 37px/1.05 "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 7px #1b2140; paint-order: stroke fill; text-shadow: 0 5px 0 #1b2140, 0 9px 16px rgba(0, 0, 0, .35); }
#start input, #start button { display: block; margin: 12px auto 0; width: 100%; box-sizing: border-box; padding: 11px 14px; font: 600 18px system-ui, sans-serif; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .6); text-align: center; }
#start input { background: rgba(10, 16, 34, .55); color: #fff; outline: none; }
#start input::placeholder { color: rgba(255, 255, 255, .6); }
#start button { background: #e23d32; color: #fff; border-color: #e23d32; cursor: pointer; }
#start button:hover { background: #f04d41; }
/* tryb lawy: odległość do lawy pod licznikiem monet */
#lava { display: none; position: absolute; left: 30px; top: calc(150px + 34vh + 10px); font-size: 14px; font-weight: 700; color: #ffb066; }
#lava.near { color: #ff4a2a; animation: lava-pulse .6s ease-in-out infinite alternate; }
@keyframes lava-pulse { from { opacity: 1; } to { opacity: .45; } }
/* lista pokoi na ekranie startowym */
#rooms { margin: auto 0 0; padding-top: 26px; width: 100%; text-shadow: none; }
#rooms.hidden { display: none; }
#rooms h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .8; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
#rooms > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 8px 8px 8px 14px; border-radius: 8px; background: rgba(10, 16, 34, .62); text-align: left; }
#rooms span { min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rooms small { display: block; font-size: 12px; font-weight: 400; opacity: .75; }
#start #rooms button { display: block; flex: none; margin: 0; width: auto; padding: 7px 14px; font-size: 14px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
#start #rooms button:hover { background: rgba(255, 255, 255, .26); }
#start #rooms button:disabled { opacity: .5; cursor: default; }
#players { position: absolute; right: 22px; top: 20px; font-size: 14px; min-width: 150px; }
#players div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 9px; margin-bottom: 3px; border-radius: 4px; background: rgba(0, 0, 0, .35); text-shadow: none; }
#players .me { background: rgba(226, 61, 50, .6); }
#start.hidden, .probe #start, #menu.hidden, #menu section.hidden, #fps.hidden { display: none; }
#fps { position: fixed; left: 54px; top: 174px; font: 12px ui-monospace, Consolas, monospace; color: #fff; opacity: .75; text-shadow: 0 1px 2px #000; pointer-events: none; }
#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 16, 34, .55); }
#menu > div { width: 300px; padding: 22px 26px; border-radius: 12px; background: rgba(18, 24, 44, .92); }
#menu h2 { margin: 0 0 14px; font-size: 26px; }
#menu #menu-level { margin: -8px 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
#menu button.hidden { display: none; }
/* poprzednia / następna plansza w jednej linii: poprzednia po lewej, następna po prawej (sama zajmuje całą szerokość na planszy 1) */
#menu-levels { display: flex; gap: 8px; }
#menu-levels button { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
#menu h3 { margin: 18px 0 0; padding-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(255, 255, 255, .15); }
#menu select { display: block; width: 100%; margin-top: 5px; padding: 6px 8px; font: 14px system-ui, sans-serif; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; }
#menu select option { background: #1a2238; color: #fff; }
#menu select option:disabled { color: #6b7386; }
#menu label { display: block; margin-top: 12px; font-size: 14px; }
#menu input[type=range] { display: block; width: 100%; margin-top: 5px; }
#menu label.check { display: flex; align-items: center; gap: 8px; }
#menu button { display: block; width: 100%; margin-top: 16px; padding: 10px; font: 600 16px system-ui, sans-serif; border: 0; border-radius: 8px; background: #e23d32; color: #fff; cursor: pointer; }
#menu button.quiet { margin-top: 8px; background: rgba(255, 255, 255, .12); font-weight: 500; font-size: 14px; }
/* rozmycie pędu: rozmywa tylko brzegi ekranu, środek zostaje ostry */
#blur { position: fixed; inset: 0; display: none; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, transparent 28%, #000 78%); mask-image: radial-gradient(ellipse at center, transparent 28%, #000 78%); }