/* Kroniki Lednicy — stylistyka w duchu RuneScape Classic:
   brązowe kamienne panele, żółty tekst, surowe krawędzie. */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Paski przewijania w duchu UI (drewno/mrok), nie systemowe ──────────
   Firefox: scrollbar-color; WebKit/Chromium: ::-webkit-scrollbar. Ciemny tor,
   brązowo-drewniany uchwyt z żółtym rozjaśnieniem przy najechaniu. */
* { scrollbar-width: thin; scrollbar-color: #6e5a40 #17110a; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #17110a; border: 1px solid #2a2018; }
::-webkit-scrollbar-thumb { background: linear-gradient(#6e5a40, #47391f); border: 2px solid #17110a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#9c7c50, #6e5a40); }
::-webkit-scrollbar-thumb:active { background: linear-gradient(#c39a4a, #8a6c3c); }
::-webkit-scrollbar-corner { background: #17110a; }

body {
  background: #1a1410;
  color: #e8e2d0;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 13px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  align-items: flex-start;
  padding: 8px;
}

.panel {
  background: #4a3b2a;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.15), transparent 60%);
  border: 3px solid #2a2018;
  outline: 1px solid #6e5a40;
  box-shadow: inset 0 0 0 1px #3a2e20;
}

/* ── Logowanie ── */
#login { display: flex; align-items: center; justify-content: center; min-height: 95vh; width: 100%; }
#login[hidden] { display: none; }
#loginbox { width: 460px; padding: 26px; text-align: center; position: relative; }   /* kotwica dla #jezyki */
#passwdbox { width: 460px; padding: 26px; text-align: center; }
#passwdbox input { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px 12px;
  background: #241d14; border: 1px solid #4a4030; color: #e8e2d0; font: 14px monospace; border-radius: 3px; }
#passwdbox input::placeholder { color: #7a7058; }
#passwdbox input:focus { outline: none; border-color: #ffd24a; }
#passwdbox button { display: block; width: 100%; margin: 10px 0 0; padding: 11px; font: bold 14px monospace;
  background: #8a2a22; color: #ffd24a; border: 1px solid #5a1c16; border-radius: 3px; cursor: pointer; }
#passwdbox button.alt { background: #241d14; color: #b8a878; border-color: #4a4030; }
#passwdbox button:hover { filter: brightness(1.15); }
#passwderr { color: #ff8a6a; font-size: 12px; min-height: 16px; margin-top: 10px; }
#passwdbox h1 { color: #ffd24a; font-size: 22px; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
#passwdbox .sub { color: #b8a878; margin: 4px 0 14px; font-size: 11px; }
.gornelinki { font-size: 12px; color: #8a8062; margin: 2px 0 12px; }
.gornelinki a { color: #b8a878; text-decoration: none; border-bottom: 1px dotted #6a6248; }
.gornelinki a:hover { color: #ffd24a; }
.opisgry2 { color: #a89d7e; font-size: 12px; line-height: 1.55; text-align: left; margin: 0 0 16px; }
.opisgry2 b { color: #c8bd9a; }
.loginlinks { margin-top: 14px; font-size: 11px; color: #8a8062; }
.loginlinks a { color: #b8a878; text-decoration: none; border-bottom: 1px dotted #6a6248; }
.loginlinks a:hover { color: #ffd24a; }
#prawnebox { width: 640px; max-width: 94vw; padding: 26px; text-align: left; }
#prawnebox h1 { color: #ffd24a; font-size: 22px; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; text-align: center; }
#prawnetresc { max-height: 62vh; overflow-y: auto; margin: 12px 0; padding-right: 10px; font-size: 13px; line-height: 1.55; color: #d9cfb0; }
#prawnetresc h2 { color: #ffd24a; font-size: 15px; margin: 14px 0 6px; }
#prawnetresc a { color: #b8a878; }
#passwd, #prawne { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #2a3a2a 0%, #141b14 70%); z-index: 40; }
#passwd[hidden], #prawne[hidden] { display: none; }
/* grzebień odmiany (§wygląd): nakładka NAD grą — przyciemnia świat, panel jak kreator */
#grzebien { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 5, 0.72); z-index: 40; }
#grzebien[hidden] { display: none; }
#grzebienbox { width: 560px; padding: 24px; text-align: center; }
#grzebienbox h1 { color: #ffd24a; font-size: 22px; text-shadow: 2px 2px 0 #000; margin-bottom: 14px; }
#grzebiencols { display: flex; gap: 16px; align-items: flex-start; }
#grzebiencv { background: #211a12; border: 2px solid #6e5a40; flex: none; }
#grzebienpick { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#grzebienbox button {
  margin-top: 10px; width: 100%; padding: 9px; cursor: pointer; font-family: inherit;
  background: #6e2a18; color: #ffd24a; border: 2px solid #2a2018; font-size: 14px;
}
#grzebienbox button:hover { background: #8a3a22; }
#grzebienbox button.alt { background: #3a2e20; border-color: #6e5a40; color: #d9cfb0; }
#loginbox h1 { color: #ffd24a; font-size: 26px; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
#loginbox .sub { color: #b8a878; margin: 4px 0 14px; font-size: 11px; }
#loginbox .blurb { color: #d9cfb0; line-height: 1.5; margin-bottom: 18px; text-align: left; }
#loginbox input, #chatin {
  width: 100%; padding: 8px; background: #211a12; color: #ffd24a;
  border: 2px solid #6e5a40; font-family: inherit; font-size: 14px;
}
#loginbox button, #createbox button {
  margin-top: 10px; width: 100%; padding: 10px;
  background: #6e2a1a; color: #ffd24a; border: 2px outset #a05a3a;
  font-family: inherit; font-size: 15px; cursor: pointer; letter-spacing: 1px;
}
#loginbox button:hover, #createbox button:hover { background: #8a3a22; }
#loginbox button.alt, #createbox button.alt { background: #3a2e20; border-color: #6e5a40; color: #d9cfb0; }
#loginerr, #createerr { color: #ff6a4a; margin-top: 10px; min-height: 16px; }
#loginbox input { margin-top: 8px; }

/* ── Kreator postaci ── */
#create { display: flex; align-items: center; justify-content: center; min-height: 95vh; width: 100%; }
#create[hidden] { display: none; }
#createbox { width: 560px; padding: 24px; text-align: center; }
#createbox h1 { color: #ffd24a; font-size: 22px; text-shadow: 2px 2px 0 #000; margin-bottom: 14px; }
#createcols { display: flex; gap: 16px; align-items: flex-start; }
#prevcv { background: #211a12; border: 2px solid #6e5a40; flex: none; }
#pickers { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pick { display: grid; grid-template-columns: 1fr 34px 70px 34px; align-items: center; gap: 4px; }
.pick .lbl { text-align: left; color: #d9cfb0; font-size: 12px; }
.pick .arr {
  background: #3a2e20; color: #ffd24a; border: 2px solid #2a2018;
  padding: 5px 0; cursor: pointer; font-family: inherit;
}
.pick .arr:hover { background: #6e5a40; }
.pick .val { color: #ffd24a; font-size: 11px; text-align: center; }
.pick .val.sw { height: 22px; border: 2px solid #2a2018; }
#pickers input {
  width: 100%; padding: 7px; background: #211a12; color: #ffd24a;
  border: 2px solid #6e5a40; font-family: inherit; font-size: 13px;
}

/* ── Układ gry ── */
#game { width: 1320px; max-width: 100%; }
#main { display: flex; gap: 8px; }
/* lewa kolumna: widok 3D + czat pod nim (czat kończy się przy prawej kolumnie) */
#leftcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* prawa kolumna: minimapa na górze + panel zakładek (sakwa…) pod nią, pełna wysokość */
#rightcol { flex: none; width: 280px; display: flex; flex-direction: column; gap: 8px; }
#viewport { position: relative; flex: none; height: 560px; min-width: 0; }

/* ── Minimapa ── */
/* KLASYCZNY: PROSTOKĄTNA, niska ramka-pudełko (280×150) — mało miejsca w pionie,
   zostawia wysokość na sakwę/panel pod spodem. Ramkę daje kontener (border). */
/* wskaźnik pory roku — mały okrągły ZNAK pory (bez tekstu); słowa dopiero na hover */
#seasonchip {
  position: absolute; left: 170px; top: 21px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(30, 24, 16, 0.74); border: 1px solid #6e5a40;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
#seasonchip .ik { display: flex; }
#seasonchip .d {
  display: none; position: absolute; top: 30px; left: 0;
  white-space: nowrap; padding: 4px 12px; border-radius: 10px; font-size: 12px;
  background: inherit; border: 1px solid; border-color: inherit; color: inherit;
}
#seasonchip:hover .d { display: block; }
#seasonchip.przejscie { opacity: 0.35; } /* wtapianie przy zmianie pory (sezBlend < 1) */
/* motyw wg pory: wiosna zieleń, lato złoto, jesień rdza, zima lodowy błękit */
#seasonchip.sezon-0 { border-color: #5a8a3a; background: rgba(28, 40, 18, 0.82); color: #a8d878; }
#seasonchip.sezon-1 { border-color: #c2a128; background: rgba(46, 38, 12, 0.82); color: #ecd270; }
#seasonchip.sezon-2 { border-color: #b06a2a; background: rgba(44, 28, 14, 0.82); color: #e8a860; }
#seasonchip.sezon-3 { border-color: #6a9ab8; background: rgba(18, 28, 38, 0.84); color: #a8d0ec; }
#minimap {
  position: relative; flex: none; width: 280px; height: 150px; overflow: hidden;
  background: #17110a; border: 3px solid #2a2018; box-shadow: inset 0 0 0 1px #6e5a40; border-radius: 4px;
}
#minimapcv { width: 100%; height: 100%; display: block; cursor: pointer; }
#minimapmin {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; z-index: 2;
  background: rgba(26,20,12,0.82); color: #ffd24a; border: 1px solid #6e5a40; border-radius: 3px;
  font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
#minimapmin:hover { border-color: #ffd24a; }
/* zwinięta (KLASYCZNY): pasek z tytułem + przyciskiem; ramka jak reszta UI (kanciasta).
   Wyższy i overflow:visible + wyśrodkowany przycisk → ramka „+" się nie ucina. */
#minimap.min {
  height: 30px; overflow: visible; background: linear-gradient(#241a10, #15100a);
  border: 3px solid #2a2018; box-shadow: inset 0 0 0 1px #6e5a40; border-radius: 4px;
}
#minimap.min #minimapcv { display: none; }
#minimap.min #minimapmin { top: 50%; right: 3px; transform: translateY(-50%); } /* wyśrodkuj w pasku (bez ucinania) */
#minimap.min #compass { display: none; } /* zwinięta mapa chowa też kompas */
#minimap.min::before {
  content: 'Mapa'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #ffd24a; font-size: 12px; text-shadow: 1px 1px 0 #000;
}
#cv {
  display: block; width: 100%; height: 100%;
  border: 3px solid #2a2018; outline: 1px solid #6e5a40;
  image-rendering: pixelated; cursor: crosshair; touch-action: none;
}
#online { position: absolute; top: 34px; right: 12px; color: #8ad0ff; text-shadow: 1px 1px 0 #000; font-size: 11px; }
#compass {
  position: absolute; left: 6px; bottom: 6px; width: 42px; height: 42px; z-index: 6;
  border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #6e5a40, #2a2018);
  border: 3px solid #2a2018; box-shadow: inset 0 0 0 1px #6e5a40;
}
#compass:hover { box-shadow: inset 0 0 0 1px #ffd24a; }
#needle { width: 100%; height: 100%; display: block; }
/* Tarcza słoneczna: łuk nieba ze słońcem/księżycem wg pory doby */
#sundial {
  position: absolute; top: 10px; left: 76px; width: 88px; height: 48px;
  cursor: help; border-radius: 7px 7px 3px 3px;
  background: radial-gradient(circle at 35% 25%, #6e5a40, #2a2018);
  border: 3px solid #2a2018; box-shadow: inset 0 0 0 1px #6e5a40;
  padding: 2px 3px 0;
}
#sundial:hover { box-shadow: inset 0 0 0 1px #ffd24a; }
#sundialsvg { width: 100%; height: 100%; display: block; }
/* §B4: indykator dziczy — zapala się, gdy me.wild (klient toggluje [hidden]) */
#dangerskull {
  position: absolute; top: 10px; left: 228px; width: 46px; height: 46px;
  border-radius: 50%; cursor: help; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: #ff5a4a; text-shadow: 0 0 6px #c0392b;
  background: radial-gradient(circle at 35% 30%, #5a2420, #2a1410);
  border: 3px solid #2a1410; box-shadow: inset 0 0 0 1px #7a3a30, 0 0 10px rgba(192,57,43,0.7);
  animation: skullpulse 1.6s ease-in-out infinite;
}
#dangerskull[hidden] { display: none; }
@keyframes skullpulse {
  0%, 100% { box-shadow: inset 0 0 0 1px #7a3a30, 0 0 6px rgba(192,57,43,0.45); }
  50%      { box-shadow: inset 0 0 0 1px #a04a3a, 0 0 15px rgba(255,90,74,0.95); }
}
#camhint { position: absolute; bottom: 6px; right: 10px; color: #d9cfb066; font-size: 10px; pointer-events: none; }
#hoverinfo {
  position: absolute; bottom: 8px; left: 10px;
  color: #ffd24a; text-shadow: 1px 1px 0 #000; font-size: 13px;
  pointer-events: none; min-height: 16px;
}

#hporb {
  position: absolute; top: 10px; left: 10px; width: 56px; height: 56px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c0392b, #5a0f0a);
  border: 3px solid #2a2018; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000; font-size: 14px;
}
#region {
  position: absolute; top: 12px; right: 12px; color: #ffd24a;
  text-shadow: 1px 1px 0 #000; font-size: 14px; letter-spacing: 1px;
}
/* Zwinięte stany: najwyżej dwa aktywne, półprzezroczyste żetony i „+N".
   Suma, częściowe i przesłonięte źródła są dopiero w szczegółach. */
#buffs {
  position: absolute; top: 74px; left: 10px; z-index: 43;
  width: fit-content; max-width: calc(100% - 20px); color: #eee6d7;
}
#buffs[hidden] { display: none; }
#buffstrip { width: auto; height: 28px; display: flex; align-items: center; gap: 3px; }
#buffpreviews { display: flex; align-items: center; gap: 3px; }
.buffpreview, #bufftoggle {
  appearance: none; border: 0; background: transparent; color: inherit;
  font-family: inherit; cursor: pointer;
}
.buffpreview {
  --buff-col: #b8a878;
  flex: 0 0 66px; width: 66px; min-width: 0; height: 28px; padding: 2px 0;
}
.buffpreviewface, .buffplusface {
  border: 1px solid rgba(151,124,79,.72);
  background: rgba(30,24,17,.69);
  box-shadow: inset 0 0 0 1px rgba(255,228,169,.045), 0 2px 5px rgba(0,0,0,.32);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.buffpreviewface {
  width: 100%; height: 24px; display: flex; align-items: center; gap: 3px;
  padding: 0 4px; border-radius: 8px;
  border-color: color-mix(in srgb, var(--buff-col) 62%, rgba(151,124,79,.72));
}
.buffpreview:hover .buffpreviewface { border-color: color-mix(in srgb, var(--buff-col) 72%, #b18c50); background: rgba(52,42,28,.76); }
.buffpreview:focus-visible, #bufftoggle:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }
.buffpreviewname {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; color: #e7ddca; font-size: 7px; line-height: 1;
}
.buffpreview.bad .buffpreviewface { background: rgba(55,27,23,.66); }
.buffpreview .btime { flex: 0 0 auto; font-size: 6px; }
#bufftoggle {
  flex: 0 0 32px; min-width: 32px; height: 28px; padding: 2px;
}
.buffplusface {
  width: 28px; height: 24px; display: flex; align-items: center;
  justify-content: center; gap: 1px; border-radius: 8px; color: #e9cc75;
}
#bufftoggle:hover .buffplusface { border-color: #c39c59; background: rgba(57,45,29,.78); }
.buffplus::before { content: '+'; font-size: 11px; line-height: 1; }
#buffs.open .buffplus::before { content: '−'; }
#bufftoggle b { color: #c8bda9; font-size: 6px; font-weight: normal; font-variant-numeric: tabular-nums; }
.buffsummaryhead { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 1px; }
.buffsummaryhead > b {
  color: #bda878; font-size: 7px; line-height: 1;
  text-transform: uppercase; letter-spacing: .65px;
}
#buffcounts { display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.buffcountstate {
  display: inline-flex; align-items: center; gap: 2px; min-width: 15px;
  color: #bbb2a3; font-size: 7.5px; font-variant-numeric: tabular-nums;
}
.buffcountstate::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #70b984; box-shadow: 0 0 5px rgba(112,185,132,.55);
}
.buffcountstate.partial::before { background: linear-gradient(90deg, #d5a951 50%, #55452d 50%); box-shadow: 0 0 5px rgba(213,169,81,.42); }
.buffcountstate.overridden::before { background: transparent; border: 1px solid #817a70; box-shadow: none; }
#buffpanel {
  position: absolute; top: calc(100% + 4px); left: 0;
  width: min(320px, calc(100vw - 20px)); max-height: 198px;
  overflow: hidden; padding: 6px; border: 1px solid #806947; border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(42,33,23,.985), rgba(19,15,11,.985)),
    radial-gradient(circle at 8% 0, rgba(255,210,74,.10), transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(255,230,170,.055), 0 8px 18px rgba(0,0,0,.58);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
#buffpanel[hidden] { display: none; }
.buffsummary {
  max-height: 35px; padding: 0 1px 4px; overflow-y: auto;
  border-bottom: 1px solid rgba(139,112,70,.34);
}
#bufftotals { display: flex; flex-wrap: wrap; gap: 1px 6px; }
.buffimpact {
  color: #d8d0c1; font-size: 8.5px; line-height: 1.18;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.buffimpact.good { color: #9fd3aa; }
.buffimpact.bad { color: #efaaa2; }
.buffimpact.special { color: #e7c46d; }
#bufflist {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px;
  max-height: 67px; margin-top: 5px; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
.buffeffect {
  --buff-col: #b8a878;
  appearance: none; min-width: 0; height: 32px; display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 4px;
  padding: 2px 5px; border: 1px solid rgba(106,91,67,.66); border-radius: 9px;
  background: rgba(27,22,16,.59); color: inherit; font-family: inherit;
  cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.buffeffect.bad { background: rgba(49,23,20,.63); }
.buffeffect.active { border-color: color-mix(in srgb, var(--buff-col) 70%, #514532); }
.buffeffect.partial { border-color: #b48e45; }
.buffeffect.overridden {
  border-style: dashed; border-color: #706b63;
  background: repeating-linear-gradient(135deg, rgba(28,24,19,.72) 0 8px, rgba(40,34,27,.72) 8px 16px);
}
.buffeffect.selected {
  border-color: #f0cc6c; box-shadow: inset 0 0 0 1px rgba(255,223,139,.42);
  background-color: rgba(78,59,26,.58);
}
.buffeffect:focus-visible { outline: 2px solid #ffd24a; outline-offset: -1px; }
.buffstatepin {
  width: 7px; height: 7px; border-radius: 50%;
  background: #70b984; box-shadow: 0 0 4px rgba(112,185,132,.5);
}
.buffeffect.partial .buffstatepin { background: linear-gradient(90deg, #d5a951 50%, #55452d 50%); }
.buffeffect.overridden .buffstatepin { background: transparent; border: 1px solid #817a70; box-shadow: none; }
.buffpickname {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #e5dccb; font-size: 8px; text-align: left;
}
.buffeffect.overridden .buffpickname { color: #aaa49b; }
.btime {
  color: #bdb3a3; font-size: 7px; line-height: 1; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.btime.buff-soon { color: #ff8f7e; text-shadow: 0 0 7px rgba(255,79,62,.75); animation: buffpulse 1s ease-in-out infinite; }
#buffdetail {
  min-height: 43px; max-height: 48px; margin-top: 5px; padding: 4px 2px 0;
  overflow-y: auto; border-top: 1px solid rgba(139,112,70,.34);
}
.buffdetailhead {
  display: flex; align-items: baseline; gap: 4px; min-width: 0; margin-bottom: 2px;
}
.buffeffectname {
  min-width: 0; overflow: hidden; color: #eee4d2; font-size: 9.5px;
  font-weight: bold; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis;
}
.buffeffectname[data-eff] { cursor: help; border-bottom: 1px dotted rgba(238,228,210,.48); }
.buffstatus {
  display: inline-block; flex: 0 0 auto; padding: 1px 4px; border-radius: 5px;
  color: #9cd0a8; background: rgba(42,88,53,.44); border: 1px solid rgba(87,139,99,.55);
  font-size: 6.5px; font-weight: normal; text-transform: uppercase; letter-spacing: .35px;
}
.buffdetailhead .btime { margin-left: auto; font-size: 8px; }
#buffdetail.partial .buffstatus { color: #e6c676; background: rgba(94,72,31,.45); border-color: rgba(170,133,61,.62); }
#buffdetail.overridden .buffstatus { color: #aaa49c; background: rgba(60,55,50,.55); border-color: #6d6760; }
.buffeffectline { color: #aaa191; font-size: 8px; line-height: 1.25; overflow-wrap: anywhere; }
.buffeffectline.active { color: #a9d8b4; }
.buffeffectline.suppressed { color: #aaa39a; }
.buffeffectline b { color: #d8c49a; font-weight: normal; }
@keyframes buffpulse { 50% { opacity: .48; } }

/* Miernik przychylności wiar — w przewodniku gusł (Perun ✶ ←|→ ✝ Krzyż) */
.faithrow { display: flex; align-items: center; gap: 6px; margin: 2px 0 3px; }
.faithrow .fold { color: #ffd24a; font-size: 14px; }
.faithrow .fnew { color: #cfd8e0; font-size: 14px; }
.faithbar {
  position: relative; flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #b88a2a, #6a6056, #8aa0b8); border: 1px solid #000;
}
.faithmark {
  position: absolute; top: -3px; left: 50%; width: 4px; height: 10px; margin-left: -2px;
  background: #9a8c6a; border: 1px solid #000; border-radius: 1px;
  transition: left 0.4s, background 0.4s;
}
.faithstanding { color: #b8b2a4; font-size: 11px; margin-bottom: 4px; }
/* STYLE WALKI — podliczniki w przewodniku Walki (pasek 1–10 per styl oręża) */
.stylrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; }
.stylrow.stylnoszony .stylnazwa { color: #ffd24a; }
.stylnazwa { width: 108px; color: #d8d2c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.styllvl { width: 34px; color: #b8b2a4; text-align: right; }
.stylbar { flex: 1; height: 6px; border-radius: 3px; background: #1c1a14; border: 1px solid #000; overflow: hidden; }
.stylfill { height: 100%; background: linear-gradient(90deg, #7a5a20, #d8a83a); transition: width 0.4s; }
.stylczapka { width: 32px; color: #8a8474; text-align: right; }
#banner {
  position: absolute; top: 38%; left: 0; right: 0; text-align: center;
  color: #ffd24a; font-size: 22px; text-shadow: 2px 2px 0 #000;
  pointer-events: none; transition: opacity 1s; letter-spacing: 1px;
}
/* zapowiedź restartu serwera: TRWAŁY pasek u góry z odliczaniem — nad wszystkim */
#restartbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; text-align: center;
  padding: 8px 12px; background: #6e2a18ee; color: #ffe6c0; border-bottom: 2px solid #ffb050;
  font-size: 15px; text-shadow: 1px 1px 0 #000; box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
#restartbar[hidden] { display: none; }
#restartbar b { color: #ffd24a; }

/* ── Dialog ── */
#dialog {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: #211a12ee; border: 3px solid #6e5a40; padding: 12px;
}
#dlgname { color: #ffd24a; font-weight: bold; margin-bottom: 6px; }
/* długie kwestie przewijają się, opcje zostają zawsze widoczne pod spodem */
#dlglines { color: #e8e2d0; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
/* oryginał mowy świata (kaszubski/łacina/polski w en-ja) POD warstwą zrozumianą — mniejszy, przygaszony, kursywa */
.dlg-org { font-size: 0.85em; color: #9a8d76; font-style: italic; margin: 1px 0 7px; overflow-wrap: anywhere; }
#dlgopts .dlg-org { margin: 0 0 3px 18px; }

/* ── język gracza (docs/i18n-design.md §4/§5) ── */
#jezyki { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; }
#jezyki button { background: none; border: 1px solid #6e5a40; color: #9a8d76; font-size: 12px; padding: 2px 7px; cursor: pointer; }
#jezyki button.on { color: #ffd24a; border-color: #ffd24a; }
/* japoński: systemowe kroje CJK + łamanie bez spacji w całym UI (okna gry ZAWIJAJĄ, nigdy overflow-x) */
body.jez-ja, body.jez-ja button, body.jez-ja input { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }
body.jez-ja #dlglines, body.jez-ja .win, body.jez-ja #side { overflow-wrap: anywhere; word-break: normal; }
#dlgopts div { color: #8ad0ff; cursor: pointer; padding: 3px 0; }
#dlgopts div:hover { color: #ffd24a; }

/* ── Panel boczny ── */
/* wysokość spięta z #viewport — dłuższa zawartość zakładek przewija się,
   zamiast rozpychać cały układ */
#side { flex: 1 1 0; width: 280px; min-height: 0; padding: 6px; display: flex; flex-direction: column; }
#tabs { display: flex; gap: 3px; margin-bottom: 6px; }
#tabs button {
  flex: 1; padding: 7px 2px; background: #3a2e20; color: #b8a878;
  border: 2px solid #2a2018; font-family: inherit; font-size: 11px; cursor: pointer;
}
#tabs button.on { background: #6e5a40; color: #ffd24a; }
#logout { flex: 0 0 30px !important; color: #ff6a4a !important; font-size: 13px; }
#logout:hover { background: #6e2a1a !important; color: #ffd24a !important; }
.tab { display: none; overflow-y: auto; flex: 1; min-height: 0; }
.tab.on { display: block; }

/* sakwa */
#tab-inv { display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; }
#tab-inv.on { display: grid; }
.slot {
  aspect-ratio: 1; background: #3a2e20; border: 2px solid #2a2018;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  position: relative;
}
.pricetag {
  position: absolute; right: 1px; bottom: 1px;
  background: #211a12e6; color: #ffd24a; font-size: 9px; line-height: 1;
  padding: 1px 2px; pointer-events: none;
}
.pricetag.notag { color: #6e5a40; }
.shop-rar-tag {
  position: absolute; left: 1px; top: 1px; max-width: calc(100% - 4px);
  background: #211a12e6; border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 2px; font-size: 7px; line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* znacznik przedmiotu instancjonowanego (np. matka pszczela z cechami) */
.instdot {
  position: absolute; left: 2px; top: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffd24a; box-shadow: 0 0 3px #ffd24a; pointer-events: none;
}
/* §4b: zatruty oręż w sakwie — zielona kropka zamiast złotej */
.instdot.poison { background: #7aa84a; box-shadow: 0 0 3px #7aa84a; }
.slot:hover { border-color: #ffd24a; }
.slot.useslot { border-color: #ffd24a; box-shadow: 0 0 6px 1px #ffd24a; } /* tryb „Użyj" */
.slot canvas { width: 80%; height: 80%; image-rendering: pixelated; }
#tab-inv .slot[data-inv-item="1"] {
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#tab-inv .slot.inv-drag-source { opacity: .42; }
#tab-inv .slot.inv-drop-target {
  border-color: #9fd45a; box-shadow: 0 0 0 2px #9fd45a, 0 0 10px #78a83f;
}
.inv-drag-ghost {
  position: fixed !important; z-index: 20000; pointer-events: none;
  opacity: .88; transform: scale(1.06); box-shadow: 0 4px 14px #000b;
}

/* umiejętności */
.skillrow { padding: 6px 4px; border-bottom: 1px solid #3a2e20; cursor: pointer; }
.skillrow:hover .nm { color: #ffd24a; }
.skillrow .top { display: flex; align-items: center; gap: 6px; }
.skillrow .top canvas { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.skillrow .nm { color: #e8e2d0; flex: 1; }
.skillrow .lv { color: #ffd24a; font-weight: bold; }
.skillrow .bar { height: 5px; background: #211a12; margin-top: 4px; }
.skillrow .bar i { display: block; height: 100%; background: #7a9a3a; }
.skillrow.skill-locked { opacity: .68; background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(0,0,0,.12) 7px, rgba(0,0,0,.12) 14px); }
.skillrow.skill-locked .nm { color: #a89d85; }
.skillrow.skill-locked:hover .nm { color: #d2c6aa; }
.skill-lock-note { margin: 6px 2px; padding: 9px; border: 1px solid #765b35; background: #2a2117; color: #e0bd63; line-height: 1.45; }
.skilldetail { padding: 6px 4px 8px 8px; border-bottom: 1px solid #3a2e20; background: #211a1280; font-size: 11px; }
.skilldetail .xpinfo { color: #8ad0ff; margin-bottom: 6px; }
.skill-training, .skill-access { margin: 4px 0 8px; padding: 7px 8px; border: 1px solid #4a3b27; background: #18120caa; color: #d8cfba; line-height: 1.45; }
.skill-training { border-left: 3px solid #8cad63; }
.skill-access { display: grid; gap: 5px; border-left: 3px solid #b58a55; }
.skill-access > div { padding-left: 11px; position: relative; }
.skill-access > div::before { content: '›'; position: absolute; left: 1px; color: #e0bd63; }
.skill-pref { margin: 6px 0 8px; padding: 7px; border: 1px solid #4a3b27; border-radius: 3px; background: #18120caa; }
.skill-pref-opis { margin-bottom: 6px; color: #c5bda8; line-height: 1.35; }
.skill-pref button { width: 100%; min-height: 42px; padding: 6px 8px; border: 1px solid #786341; background: #34291b; color: #eee3c2; font: inherit; cursor: pointer; }
.skill-pref button[aria-pressed="true"] { border-color: #668d4c; color: #b9e596; }
.skilldetail h5 { color: #b8a878; font-size: 10px; margin: 5px 0 2px; letter-spacing: 1px; }
.skilldetail .unl { line-height: 1.6; }
.unl-done { color: #7ad05a; }
.unl-next { color: #d9cfb0; }
.unl-secret { color: #8a8378; font-style: italic; }
.unlockcard { margin: 4px 0 7px; padding: 6px 7px; border: 1px solid #4a3b27; border-radius: 3px; background: #18120caa; line-height: 1.35; }
.unlockcard.unl-done { border-color: #456136; background: #172014aa; }
.unlockhead { display: flex; align-items: flex-start; gap: 5px; color: inherit; }
.unlockhead b { color: #eee3c2; font-weight: 600; }
.unlockline { margin: 4px 0 0 17px; color: #c5bda8; }
.unlockline > span { display: block; color: #8ad0ff; font-size: 8px; letter-spacing: .8px; }
.unlockline.unlockvisual { color: #9ec97a; }
.unlockline.unlockwhere { color: #d5b879; }
.farmbenefit { margin: 5px 0 !important; padding: 6px 7px; border-left: 3px solid #9ec97a; background: #1c2817; color: #d9cfb0 !important; }
.farmprogress { margin: 5px 0 !important; padding: 7px 8px; border-left: 3px solid #d4a74f; background: #2b2518; color: #f1dfb0 !important; }
.farm-worker-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; margin: 6px 0 10px; }
#rolabody .farm-worker-actions button { min-height: 42px; margin: 0; white-space: normal; }
.workbenefit { color: #9ec97a; font-size: 10px; }
.zw-card-status { position:absolute;left:1px;bottom:0;padding:1px 2px;border-radius:2px;background:#182012dd;color:#ffd24a;font-size:8px;line-height:1.1;pointer-events:none; }
.zw-tip-status { margin:2px 0;color:#9ec97a;font-weight:600; }
.breedinghint { margin:3px 0 6px !important;padding:5px 7px;border-left:2px solid #b58a55;background:#211a12;color:#d9cfb0 !important; }
.breedbar { height:5px;margin-top:4px;background:#382b1b;border:1px solid #5a452c; }
.breedbar > span { display:block;height:100%;background:#9ec97a; }
/* receptura: składniki (z czego) i miejsce wyrobu */
.skilldetail .recing { color: #b8a878; font-size: 10px; margin: 0 0 2px 14px; line-height: 1.4; }
.skilldetail .recing [data-eff] { color: #9ec97a; cursor: help; }
.recwhere { color: #7a9a6a; font-size: 10px; }

/* zadania */
.questrow { padding: 7px 4px; border-bottom: 1px solid #3a2e20; cursor: pointer; }
.questrow.q-avail { color: #ff6a4a; }
.questrow.q-prog { color: #ffd24a; }
.questrow.q-done { color: #7ad05a; }
.questrow.q-lock { color: #6a6254; }
/* zadania OGRANICZONE CZASOWO (wydarzenia kalendarza): znaczek 📅; „trwa!" = uciekająca okazja */
.qeventbadge { display: block; font-size: 10px; color: #8a8070; margin-top: 2px; }
.questrow.q-eventlive { border-left: 3px solid #ffd24a; padding-left: 6px; background: rgba(255, 210, 74, .07); }
.questrow.q-eventlive .qeventbadge { color: #ffd24a; animation: qeventpuls 2.2s ease-in-out infinite; }
@keyframes qeventpuls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.qchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 4px 8px; }
.qchip { font-size: 10px; padding: 2px 7px; border: 1px solid #3a2e20; border-radius: 9px; color: #8a8070; cursor: pointer; user-select: none; }
.qchip.on { color: #ffd24a; border-color: #8a7148; }
.queststage { color: #d9cfb0; font-size: 11px; line-height: 1.5; padding: 4px; }
#qp { color: #8ad0ff; padding: 6px 4px; font-size: 11px; }

/* ── Kram, handel i skrzynia depozytowa ── */
/* §D3b: VFX czarów bossów — nakładki ekranowe (trwała winieta + przelotny błysk). */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#fx::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
/* trwała winieta od AKTYWNEGO debuffa bossa */
#fx.frost::before  { opacity: 1; box-shadow: inset 0 0 140px 50px #6ad0ff88; background: radial-gradient(circle, transparent 55%, #9adcef33); }
#fx.dark::before   { opacity: 1; box-shadow: inset 0 0 200px 90px #000000cc; }
#fx.fear::before   { opacity: 1; box-shadow: inset 0 0 160px 60px #2a1838aa; }
#fx.poison::before { opacity: 1; box-shadow: inset 0 0 140px 50px #6a9a3a77; }
/* przelotny błysk rzutu czaru — JS ustawia tło + klasę `on` */
#fxflash { position: absolute; inset: 0; opacity: 0; }
#fxflash.on { animation: fxflash .55s ease-out; }
@keyframes fxflash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

#shop, #trade, #bank, #targ, #targinst, #targz, #apiary, #qbank, #kociol, #bielnik, #ritual, #sew, #suszarnia, #sadz, #fishjournal, #rola, #zarna, #kadz, #wedzarnia, #piwniczka, #nadawcza, #biesiada, #mokosz {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  width: 330px; background: #211a12f2; border: 3px solid #6e5a40; padding: 10px;
  max-height: 74vh; overflow-y: auto; z-index: 50; /* długie listy (obrzędy, kram) nie wychodzą poza okno */
}
#trade { width: 420px; }
#bank { width: 470px; top: 9%; overflow-x: hidden; }
#targ { width: 470px; top: 10%; overflow-x: hidden; }   /* §T: szersze okno; NIGDY poziomy scroll — treść się ŁAMIE */
#targinst { width: 470px; top: 10%; overflow-x: hidden; }
#targinstutarg { color: #ffd24a; font-size: 12px; margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#targinstutarg button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; }
#targinst .rar { font-size: 10px; padding: 1px 5px; border: 1px solid; border-radius: 3px; flex: none; }
/* pasek filtrów: kilka etykiet-selectów; ZAWIJAJĄ się, nigdy poziomy scroll (§UI) */
#targinstbody .targ-filtry { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 8px; }
#targinstbody .targ-filtr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: #b8a878; }
#targinstbody .targ-filtr select { background: #211a12; color: #ffd24a; border: 2px solid #6e5a40; font-family: inherit; font-size: 12px; padding: 4px; max-width: 100%; }
#targinstbody .cechy { color: #b8a878; font-size: 10.5px; }
/* podpowiedź: ile dałby NPC-rybak (skup) — punkt odniesienia, przygaszona i chłodna */
#targinstbody .targ-npc, #targinstmoje .targ-npc { color: #7fa9c0; font-size: 10px; font-style: italic; }
/* przycisk „Wystaw swój okaz" — na wierzchu panelu, żeby wystawianie było oczywiste */
#targinstbody .targ-wystaw-btn { display: block; width: 100%; box-sizing: border-box; margin: 2px 0 8px; padding: 7px 10px; background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; font-size: 12.5px; }
#targinstbody .targ-wystaw-btn:hover { background: #46702f; }
/* Dwa kanały zbytu tego samego rocznika: pewny skup NPC albo własna cena
   w księdze graczy. Ten sam przełącznik jest w obu widokach i zawija się. */
.handel-roczniki { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.handel-roczniki button {
  flex: 1 1 130px; min-height: 36px; padding: 6px 8px; box-sizing: border-box;
  background: #30261a; color: #c8bda7; border: 2px solid #5b4932; font-family: inherit; cursor: pointer;
}
.handel-roczniki button.on { background: #4d3b23; color: #ffd24a; border-color: #8c7044; }
#shopstock .rocznik-row { flex-wrap: wrap; }
#shopstock .rocznik-row .rar { font-size: 9px; padding: 1px 4px; border: 1px solid; border-radius: 3px; }
#shopstock .rocznik-row .cechy { color: #b8a878; font-size: 9.5px; }
/* ── G5b: targ zwierzęcy u Mirogniewa — nagłówek (utarg/doba), zakładki,
   kafelki sztuk (wspólne klocki G5). Treść ŁAMIE wiersze, NIGDY poziomy scroll (§UI). */
#targz { width: 600px; max-width: calc(100vw - 32px); top: 7%; overflow-x: hidden; }
#targzhead { color: #ffd24a; font-size: 12px; margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#targzhead .doba { color: #b8a878; }
#targzhead button, #targzbody button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; }
#targzhead button:hover:not(:disabled), #targzbody button:hover:not(:disabled) { background: #4a7a32; }
#targzhead button:disabled, #targzbody button:disabled { background: #3a342a; color: #8a8378; cursor: default; }
#targztabs { display: flex; gap: 6px; margin: 6px 0 8px; flex-wrap: wrap; }
#targztabs button { background: #3a2e20; color: #d8cdb2; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 12px; }
#targztabs button.on { background: #5a4426; color: #ffd24a; }
#targzbody .targz-rozklad { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
#targzbody .targz-kaf-wrap { display: flex; flex-direction: column; align-items: center; width: 124px; flex: none; }
#targzbody .targz-slot { width: 48px; height: 48px; flex: none; border-color: #51442f; }
#targzbody .targz-slot:focus-visible { outline: 2px solid #ffd24a; outline-offset: 2px; }
#targzbody .targz-kaf-podpis { font-size: 10px; line-height: 1.3; color: #e8e2d0; width: 100%; min-height: 27px; text-align: center; overflow-wrap: anywhere; }
#targzbody .targz-szczegoly { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: start; margin: 9px 0 12px; padding: 9px; background: rgba(42,34,20,0.72); border: 1px solid #6e5a40; }
#targzbody .targz-szczegoly .targz-kaf-wrap { width: 82px; }
#targzbody .targz-szczegoly .targz-slot { width: 64px; height: 64px; }
#targzbody .targz-szczegoly-opis { min-width: 0; font-size: 11px; line-height: 1.38; }
#targzbody .targz-szczegoly-opis .tiphead { display: block; color: #ffd24a; font-size: 14px; font-weight: bold; }
#targzbody .targz-mapa-wrap { margin: 5px 0 8px; padding: 7px; background: #1c160d; border: 2px solid #3b3022; }
#targzbody .targz-mapa { display: block; width: 100%; height: auto; max-height: 225px; background: #171208; border: 1px solid #6e5a40; box-sizing: border-box; image-rendering: pixelated; touch-action: none; }
#targzbody .targz-mapa:focus-visible { outline: 2px solid #ffd24a; outline-offset: 2px; }
#targzbody .targz-mapa-legenda { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; color: #9a948a; font-size: 10px; }
#targzbody .targz-mapa-legenda span { width: 12px; height: 9px; display: inline-block; border: 1px solid; margin-left: 6px; }
#targzbody .targz-mapa-legenda span:first-child { margin-left: 0; }
#targzbody .targz-mapa-legenda .ok { background: #355f2c; border-color: #9ee97a; }
#targzbody .targz-mapa-legenda .bad { background: #302a20; border-color: #5d5140; }
#targzbody .targz-mapa-stan { min-height: 18px; margin-top: 5px; color: #d8cdb2; font-size: 11px; }
#targzbody .targz-mapa-przyciski { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
/* karta sztuki w zakładce stadek: kafelek + przyciski jeden pod drugim */
#targzbody .targz-karta { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 168px; border: 1px solid #3a2e20; padding: 6px; }
#targzbody .targz-karta button { margin-top: 2px; font-size: 11px; padding: 4px 6px; }
#targzbody .targz-oferta-znak { color: #ffd24a; font-size: 10px; text-align: center; }
/* pasieka: pasek napełnienia kłody miodem */
.hivebar { height: 14px; background: #2a2018; border: 1px solid #5a4426; margin: 8px 0 4px; border-radius: 2px; overflow: hidden; }
.hivebarfill { height: 100%; background: linear-gradient(#ffd24a, #d8a02a); transition: width .3s; }
.hivecount { color: #e8e2d0; font-size: 12px; margin-bottom: 8px; }
#apiarybody button, #kociolbody button, #bielnikbody button, #ritualbody button, #sewbody button, #suszarniabody button, #sadzbody button, #fishjournalbody button, #rolabody button, #zarnabody button, #kadzbody button, #wedzarniabody button, #piwniczkabody button, #nadawczabody button, #biesiadabody button, #mokoszbody button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; margin-top: 4px; }
#apiarybody button:hover:not(:disabled), #kociolbody button:hover:not(:disabled), #bielnikbody button:hover:not(:disabled), #ritualbody button:hover:not(:disabled), #sewbody button:hover:not(:disabled), #suszarniabody button:hover:not(:disabled), #sadzbody button:hover:not(:disabled), #fishjournalbody button:hover:not(:disabled), #rolabody button:hover:not(:disabled), #zarnabody button:hover:not(:disabled), #kadzbody button:hover:not(:disabled), #wedzarniabody button:hover:not(:disabled), #piwniczkabody button:hover:not(:disabled), #nadawczabody button:hover:not(:disabled), #biesiadabody button:hover:not(:disabled), #mokoszbody button:hover:not(:disabled) { background: #4a7a32; }
#apiarybody button:disabled, #kociolbody button:disabled, #bielnikbody button:disabled, #ritualbody button:disabled, #sewbody button:disabled, #suszarniabody button:disabled, #sadzbody button:disabled, #fishjournalbody button:disabled, #rolabody button:disabled, #zarnabody button:disabled, #kadzbody button:disabled, #wedzarniabody button:disabled, #piwniczkabody button:disabled, #nadawczabody button:disabled, #biesiadabody button:disabled, #mokoszbody button:disabled { background: #3a342a; color: #8a8378; cursor: default; }
/* gospodarstwo/warzelnia/biesiada/mokosz: wiersze ŁAMIĄ się zamiast wypychać poziomy scroll (zasada §UI jak targ) */
#rolabody .shoprow, #zarnabody .shoprow, #kadzbody .shoprow, #wedzarniabody .shoprow, #piwniczkabody .shoprow, #nadawczabody .shoprow, #biesiadabody .shoprow, #mokoszbody .shoprow { flex-wrap: wrap; gap: 6px; }
#rolabody .shoprow .nm, #zarnabody .shoprow .nm, #kadzbody .shoprow .nm, #wedzarniabody .shoprow .nm, #piwniczkabody .shoprow .nm, #nadawczabody .shoprow .nm, #biesiadabody .shoprow .nm, #mokoszbody .shoprow .nm { min-width: 88px; overflow-wrap: anywhere; }
#zarnabody .zarna-row { padding: 7px 4px; border-bottom: 1px solid rgba(110, 90, 64, .45); }
#zarnabody .zarna-row .nm { display: grid; gap: 3px; flex: 1 1 190px; }
#zarnabody .zarna-row small { color: #b8aa8b; line-height: 1.35; }
#zarnabody .zarna-row button { min-height: 44px; min-width: 88px; }
#wedzarniabody .wedzenie-row { margin: 3px 0; padding: 7px 5px; border-left: 3px solid #8b6840; background: rgba(114, 78, 43, 0.13); }
#wedzarniabody .wedzenie-meta { color: #c7b58e; font-size: 11px; }
#wedzarniabody .wedzenie-grupa { border: 1px solid rgba(177, 143, 88, 0.34); margin: 8px 0; padding: 5px; background: rgba(45, 34, 23, 0.3); }
#wedzarniabody .wedzenie-source { display: grid; gap: 3px; padding: 3px 4px 7px; color: #ddd0af; font-size: 12px; line-height: 1.35; }
#wedzarniabody .wedzenie-source .season-now { color: #9ee97a; }
#wedzarniabody .wedzenie-source .season-later { color: #e6bd72; }
#wedzarniabody .wedzenie-okaz { display: grid; gap: 4px; margin: 4px; color: #e4d7b8; font-size: 12px; }
#wedzarniabody .wedzenie-okaz select { width: 100%; min-height: 44px; padding: 7px 9px; background: #211b16; color: #f0e2c2; border: 1px solid #8b6840; border-radius: 3px; }
#wedzarniabody button { min-height: 44px; }
#kadzbody .wedzenie-row { margin: 3px 0; padding: 7px 5px; border-left: 3px solid #8b6840; background: rgba(114, 78, 43, 0.13); }
#kadzbody .wedzenie-row .wedzenie-meta { color: #c7b58e; font-size: 11px; }
#kadzbody .kadz-benefit { color: #a9d58c; display: inline-block; font-size: 11px; margin-top: 3px; }
#kadzbody .kadz-missing { color: #e07a5a; display: inline-block; font-size: 11px; margin-top: 3px; }
#piwniczkabody .dojrz-efekty { color: #d9cfb0; font-size: 11px; line-height: 1.35; }
#piwniczkabody .dojrz-bonus { color: #9edb9a; font-size: 11px; line-height: 1.35; }
#piwniczkabody .dojrz-trend { color: #e0bd72; font-size: 11px; line-height: 1.35; }
#piwniczkabody .dojrz-zamkniety { color: #9fb4c9; font-size: 11px; line-height: 1.35; }
#kadzbody .kadz-kompo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0; padding: 7px; border: 1px solid #5a4426; background: rgba(112, 76, 42, .16); }
#kadzbody .kadz-kompo-grid label { display: flex; min-width: 0; flex-direction: column; gap: 3px; color: #c7b58e; font-size: 10px; }
#kadzbody .kadz-kompo-grid select { min-width: 0; width: 100%; min-height: 34px; padding: 4px; border: 1px solid #6c573b; border-radius: 3px; background: #211a12; color: #e8e2d0; font: inherit; }
#kadzbody .kadz-kompo-dodatki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0; padding: 7px; border: 1px solid #5a4426; background: rgba(112, 76, 42, .11); }
#kadzbody .kadz-kompo-dodatki-head, #kadzbody .kadz-kompo-profil { grid-column: 1 / -1; }
#kadzbody .kadz-kompo-dodatki-head { color: #d8b86a; font-size: 11px; font-weight: bold; }
#kadzbody button.kadz-kompo-dodatek { min-width: 0; min-height: 42px; margin: 0; padding: 5px 7px; text-align: left; overflow-wrap: anywhere; background: #30271b; border-color: #5d4b34; color: #d8cdb2; }
#kadzbody button.kadz-kompo-dodatek.on { background: #6a5429; border-color: #d8b86a; color: #fff3bf; box-shadow: inset 0 0 0 1px rgba(255, 210, 74, .18); }
#kadzbody button.kadz-kompo-dodatek:hover:not(:disabled) { background: #4a6230; }
#kadzbody .kadz-kompo-action { border-left: 3px solid #a66f42; padding-left: 6px; }
#kadzbody .kadz-kompo-journal { margin: 6px 0 10px; padding: 6px 8px; border: 1px solid #4a3a28; background: rgba(0, 0, 0, .12); }
#kadzbody .kadz-kompo-journal summary { color: #d8b86a; cursor: pointer; min-height: 30px; line-height: 30px; }
/* ── G2c: okno „Zagroda" — plan gospodarstwa (mapka + zakładki) ──
   Szersze niż panele kramów (mapka), ale ta sama rodzina wyglądu; treść ŁAMIE
   wiersze, NIGDY poziomy scroll (zasada §UI jak targ). */
#zagroda {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  width: 490px; max-width: 96vw; background: #211a12f2; border: 3px solid #6e5a40; padding: 10px;
  max-height: 86vh; overflow-y: auto; overflow-x: hidden; z-index: 50;
}
#zagrodatabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#zagrodatabs button { background: #3a2e20; color: #d8cdb2; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 12px; }
#zagrodatabs button.on { background: #5a4426; color: #ffd24a; }
#zagrodacv { display: block; width: 100%; height: auto; background: #171208; border: 2px solid #4a3a28; touch-action: none; cursor: grab; }
#zagrodactl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 2px; color: #e8e2d0; font-size: 12px; }
#zagrodactl button, #zagrodabody button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; margin-top: 4px; }
#zagrodactl button:hover:not(:disabled), #zagrodabody button:hover:not(:disabled) { background: #4a7a32; }
#zagrodactl button:disabled, #zagrodabody button:disabled { background: #3a342a; color: #8a8378; cursor: default; }
#zagrodabody .shoprow { flex-wrap: wrap; gap: 6px; }
#zagrodabody .shoprow .nm { min-width: 88px; overflow-wrap: anywhere; }
#zagrodabody .farm-guide { display: block; margin-top: 3px; color: #b8a878; font-size: 9px; line-height: 1.3; }
#apiarybody button.rmqueen { background: #5a4426; display: block; margin-top: 6px; }
#apiarybody button.rmqueen:hover { background: #6e5430; }
.winhead { display: flex; justify-content: space-between; align-items: center; color: #ffd24a; font-weight: bold; margin-bottom: 8px; }
.winhead button { background: #3a2e20; color: #ff6a4a; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; }
.winhint { color: #b8a878; font-size: 10px; margin-top: 8px; }
#shopstock, #bankstock, #qbankbody, #kociolbody, #sewbody, #sadzbody, #fishjournalbody { max-height: 360px; overflow-y: auto; }
#qbankbody button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; }
#qbankbody button:hover { background: #4a7a32; }
.shoprow { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #3a2e20; }
/* §T: targ poznański */
#targszuk { display: flex; gap: 6px; margin: 6px 0; }
#targszuk input { flex: 1; padding: 6px; background: #211a12; color: #ffd24a; border: 2px solid #6e5a40; font-family: inherit; font-size: 12px; }
#targszuk button, #targutarg button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; }
#targszuk button:hover, #targutarg button:hover { background: #4a7a32; }
#targutarg { color: #ffd24a; font-size: 12px; margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.targ-cedula { display: flex; align-items: center; gap: 5px; color: #d0b878; font-size: 11.5px; cursor: pointer; flex-basis: 100%; }
.targ-cedula input { width: 16px; height: 16px; flex: none; }
#targmoje .shoprow .nm i, #targlista .shoprow .nm i { color: #b8a878; font-style: normal; font-size: 11px; }
#targlista { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
/* wiersze targu ZAWIJAJĄ zamiast wypychać poziomy scroll (cena/przycisk schodzą
   niżej TYLKO gdy naprawdę brak miejsca — ciasne minima, gap bez rozrzutności) */
#targmoje .shoprow, #targlista .shoprow { flex-wrap: wrap; gap: 6px; }
#targmoje .shoprow .nm, #targlista .shoprow .nm { min-width: 88px; overflow-wrap: anywhere; }
.targ-naglowek { color: #b8a878; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 2px; }
.targ-cena { color: #ffd24a; font-size: 11.5px; text-align: right; }   /* pełne słowa nominałów mogą się łamać — bez poziomego scrolla */
.targ-cena i { color: #b8a878; font-style: normal; font-size: 10px; }   /* suma (…) i /szt przygaszone */
.targ-typ { flex: none; font-size: 9px; letter-spacing: 0.5px; padding: 2px 4px; border: 1px solid; }
.targ-typ.sprz { color: #9ad07a; border-color: #4a6a3a; }
.targ-typ.kup { color: #7ab8e0; border-color: #3a5a7a; }
.targ-klik { cursor: pointer; }
.targ-klik:hover { background: #2a2218; }
/* dobicie targu: wiersz-podpowiedź pod ofertą, gdy kontroferty pokryłyby ją od ręki */
.targ-dobij { display: flex; align-items: center; gap: 8px; padding: 3px 2px 6px 34px; border-bottom: 1px solid #3a2e20; font-size: 11px; color: #b8a878; }
.targ-dobij b { color: #ffd24a; }
.targ-dobij i { font-style: normal; color: #d0a060; }
.targ-dobij button { flex: none; background: #6a5a20; color: #ffd; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 3px 8px; font-size: 11px; }
.targ-dobij button:hover { background: #8a7530; }
.targ-ksiega-glowa { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.targ-ksiega-glowa canvas { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.targ-ksiega-glowa .nm { flex: 1; color: #ffd24a; font-weight: bold; }
.targ-ksiega-glowa { flex-wrap: wrap; }
.targ-ksiega-glowa button, .targ-wiecej { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 4px 10px; }
.targ-ksiega-glowa button:hover, .targ-wiecej:hover { background: #4a7a32; }
.targ-ksiega-glowa button:disabled { background: #3a342a; color: #8a8378; cursor: default; }
.targ-ksiega-glowa button.targ-sprzedaj { background: #6a5a20; }
.targ-ksiega-glowa button.targ-sprzedaj:hover:not(:disabled) { background: #8a7530; }
.targ-wiecej { display: block; width: 100%; margin: 4px 0 2px; text-align: left; background: #2e2a1e; color: #d0b060; }
.targ-wiecej:hover { background: #3a3424; }
.targ-brak { opacity: 0.82; }
.targ-brak .targ-cena i { color: #7ab8e0; }
/* stronicowanie */
.targ-strony { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 2px; }
.targ-strony button { background: #3a2e20; color: #ffd24a; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 2px 12px; font-size: 14px; }
.targ-strony button:disabled { color: #6a5a40; cursor: default; }
.targ-strony button:hover:not(:disabled) { background: #6e5a40; }
.targ-strony-et { color: #b8a878; font-size: 11px; }
.shoprow canvas { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.shoprow .nm { flex: 1; color: #e8e2d0; }
.shoprow-seed { flex-wrap: wrap; gap: 6px 8px; }
.shoprow-seed .nm { display: grid; flex: 1 1 190px; min-width: 150px; gap: 2px; overflow-wrap: anywhere; cursor: help; }
.shoprow-seed .shopitem-name { color: #f0e6cf; font-weight: bold; }
.shoprow-seed .seed-shop-meta { color: #b9d58a; font-size: 10px; line-height: 1.3; }
.shoprow-seed .seed-shop-stock { color: #b8a878; font-size: 9.5px; line-height: 1.3; }
.shoprow .pr { color: #ffd24a; }
.shoprow button { background: #3a5a2a; color: #fff; border: 2px solid #2a2018; cursor: pointer; font-family: inherit; padding: 2px 8px; }
.shoprow button:hover { background: #4a7a32; }
/* Skrzynia: nominały na własnej półce, potem szukanie, kategorie towaru i cedułki. */
#bankcurrencies {
  margin-bottom: 9px; padding: 8px; background: #17120d;
  border: 1px solid #594832; box-shadow: inset 0 0 0 1px #241b12;
}
.bankcurrencyhead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px 8px; margin-bottom: 7px;
}
.bankcurrencyhead b { color: #ffd24a; font-size: 12px; }
.bankcurrencyhead small { grid-column: 1 / -1; color: #a89a80; font-size: 8.5px; line-height: 1.3; }
.bankcurrencyhead button {
  min-height: 28px; padding: 3px 8px; border: 1px solid #735c37;
  background: #3c3020; color: #e6c56b; cursor: pointer;
  font-family: inherit; font-size: 9px; line-height: 1.2;
}
.bankcurrencyhead button:hover { background: #504027; color: #ffe28a; }
.bankcurrencygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bankcurrency {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px 6px; align-items: center;
  min-width: 0; padding: 6px; background: #292117; border: 1px solid #51412d;
}
.bankcurrency canvas { width: 34px; height: 34px; grid-row: 1 / 3; image-rendering: pixelated; }
.bankcurrencyname { min-width: 0; overflow: hidden; color: #e8dfcc; font-size: 10px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.bankcurrencyamount { min-width: 0; color: #ffd24a; font-size: 14px; font-variant-numeric: tabular-nums; }
.bankcurrencyamount small { margin-left: 3px; color: #94866e; font-size: 7.5px; font-weight: normal; }
.bankcurrencywallet { grid-column: 1 / -1; color: #a89a80; font-size: 8px; line-height: 1.25; }
#bankcurrencytotal {
  padding: 7px 2px 6px; border-bottom: 1px solid #493a28;
  color: #d7c7a7; font-size: 9px; line-height: 1.35;
}
.bankmoneytransfer { display: grid; gap: 6px; padding-top: 7px; }
.bankmoneytransferhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bankmoneytransferhead label {
  color: #b8a878; font-size: 9px; text-transform: uppercase; letter-spacing: .65px;
}
.bankmoneytransferhead button {
  min-height: 28px; padding: 3px 9px; border: 1px solid #58462f;
  background: #292117; color: #b8a878; cursor: pointer;
  font-family: inherit; font-size: 9px; line-height: 1.2;
}
.bankmoneytransferhead button.on {
  border-color: #a68245; background: #4a3822; color: #ffd24a;
  box-shadow: inset 0 0 0 1px #2c2115;
}
#bankmoneyvaluewrap { display: block; }
#bankmoneyvaluewrap[hidden] { display: none; }
#bankmoneyvalue, #bankmoneyexactfields input {
  width: 100%; min-width: 0; height: 34px; box-sizing: border-box; padding: 4px 7px;
  border: 2px solid #5d4a33; background: #18130e; color: #ffd24a;
  outline: none; font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
}
#bankmoneyvalue:focus, #bankmoneyexactfields input:focus {
  border-color: #b9904f; box-shadow: 0 0 0 1px #4c3b25;
}
#bankmoneyvalue::-webkit-outer-spin-button, #bankmoneyvalue::-webkit-inner-spin-button,
#bankmoneyexactfields input::-webkit-outer-spin-button, #bankmoneyexactfields input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
#bankmoneyexactfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#bankmoneyexactfields[hidden] { display: none; }
#bankmoneyexactfields label { display: grid; gap: 3px; min-width: 0; color: #a89a80; font-size: 8px; }
#bankmoneypreview {
  min-height: 28px; padding: 5px 7px; background: #211a12; border-left: 2px solid #685437;
  color: #c8bda8; font-size: 8.5px; line-height: 1.4; overflow-wrap: anywhere;
}
.bankmoneyactions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bankmoneyactions button {
  min-height: 34px; padding: 4px 8px; border: 2px solid #263d20;
  background: #365b29; color: #f2ead8; cursor: pointer; font-family: inherit; font-size: 10px;
}
.bankmoneyactions button:hover:not(:disabled) { background: #477536; }
.bankmoneyactions button.bankmoneyall {
  border-color: #58462f; background: #292117; color: #d7c7a7;
}
.bankmoneyactions button.bankmoneyall:hover:not(:disabled) { background: #493821; color: #ffe28a; }
.bankmoneyactions button:disabled { opacity: .38; cursor: default; }
#bankcontrols { display: grid; gap: 8px; margin-bottom: 8px; }
.banksearch {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center;
  min-height: 38px; box-sizing: border-box; background: #18130e;
  border: 2px solid #5d4a33; border-radius: 4px;
}
.banksearch:focus-within { border-color: #b9904f; box-shadow: 0 0 0 1px #4c3b25; }
.banksearchglyph { color: #b8a878; text-align: center; font-size: 19px; line-height: 1; }
.banksearch input {
  width: 100%; min-width: 0; height: 34px; box-sizing: border-box;
  border: 0; outline: 0; background: transparent; color: #f0e6cf;
  font-family: inherit; font-size: 12px;
}
.banksearch input::placeholder { color: #847862; opacity: 1; }
.banksearch input::-webkit-search-cancel-button { display: none; }
.banksearchclear {
  display: flex; align-items: center; justify-content: center; align-self: stretch;
  border: 0; border-left: 1px solid #493a28; background: transparent;
  color: #c7b791; cursor: pointer; font: 18px/1 inherit;
}
.banksearchclear:hover { color: #ffd24a; background: #30271d; }
.banksearchclear[hidden] { display: none; }
.bankcats { display: flex; flex-wrap: wrap; gap: 5px; }
.bankcat {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  padding: 3px 8px; border: 1px solid #594832; border-radius: 13px;
  background: #292117; color: #b9ad96; cursor: pointer; font-family: inherit; font-size: 10px;
}
.bankcat small {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 3px; box-sizing: border-box;
  border-radius: 9px; background: #19140f; color: #8f846f; font-size: 9px;
}
.bankcat.on { border-color: #a8854b; background: #4a3925; color: #ffd24a; }
.bankcat.on small { background: #21180e; color: #e9c66e; }
.bankcat:hover:not(:disabled):not(.on) { background: #352a1d; color: #eee0c5; }
.bankcat:disabled { opacity: .38; cursor: default; }
.bankmode { padding: 7px; border: 1px solid #493a28; background: #1b1610; }
.bankmodehead {
  margin-bottom: 5px; color: #9f927a; font-size: 9px;
  text-transform: uppercase; letter-spacing: .9px;
}
.bankmodeopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bankmodebtn {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 7px;
  min-height: 52px; padding: 6px 8px; box-sizing: border-box;
  border: 2px solid #453725; background: #282017; color: #b8a878;
  cursor: pointer; font-family: inherit; text-align: left;
}
.bankmodebtn:hover:not(.on) { background: #34291c; border-color: #6b5639; }
.bankmodebtn.on { background: #4a3822; border-color: #a68245; color: #ffd24a; box-shadow: inset 0 0 0 1px #2c2115; }
.bankmodeglyph { color: #c99d55; font-family: serif; font-size: 24px; text-align: center; line-height: 1; }
.bankmodecopy { display: grid; gap: 2px; min-width: 0; }
.bankmodecopy b { font-size: 11px; }
.bankmodecopy small { color: #9d917c; font-size: 8.5px; line-height: 1.3; }
.bankmodebtn.on .bankmodecopy small { color: #cfc0a2; }
#bankstock { border-top: 1px solid #493a28; }
.bankrow { min-height: 34px; padding: 5px 3px; gap: 7px; }
.bankrow:hover { background: #292117; }
.bankrow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bankrow .pr { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.bankactions { display: flex; gap: 4px; flex: none; }
.bankempty { padding: 18px 6px; text-align: center; }
#bank .trademoney { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#bank .trademoney button {
  min-height: 29px; padding: 3px 9px; box-sizing: border-box;
  background: #365b29; color: #f2ead8; border: 2px solid #263d20;
  cursor: pointer; font-family: inherit; font-size: 10px;
}
#bank .trademoney button:hover { background: #477536; }
#bank #bankwymiana { padding-top: 6px; border-top: 1px solid #3e3224; }
#bank #bankwymiana button { flex: 1 1 112px; background: #3a2e20; border-color: #4f3e2a; color: #d6c7aa; }
#bank #bankwymiana button:hover { background: #4a3b29; color: #ffd24a; }
#tradecols { display: flex; gap: 12px; }
#tradecols > div { flex: 1; min-width: 0; }
#tradecols h4 { color: #8ad0ff; font-size: 11px; margin-bottom: 4px; }
.offer { min-height: 64px; background: #181208; border: 2px solid #3a2e20; padding: 4px; display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.offer canvas { width: 26px; height: 26px; background: #3a2e20; image-rendering: pixelated; }
.trademoney { margin-top: 6px; color: #ffd24a; font-size: 12px; }
.trademoney input { width: 54px; background: #181208; color: #ffd24a; border: 2px solid #6e5a40; font-family: inherit; }
#tradestatus { color: #8ad0ff; min-height: 16px; margin-top: 6px; font-size: 11px; }
#tradeok { width: 100%; margin-top: 6px; padding: 8px; background: #3a5a2a; color: #ffd24a; border: 2px outset #4a7a32; cursor: pointer; font-family: inherit; }
#tradeok:hover { background: #4a7a32; }

/* ── Pieniądze i ekwipunek ── */
#money {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 4px 5px; box-sizing: border-box;
  color: #ffd24a; font-size: 12px; border: 1px solid transparent;
  border-bottom-color: #3a2e20; cursor: pointer; outline: none;
}
#money:hover, #money:focus-visible { background: #2a2116; border-color: #6e5a40; }
.moneylabel { color: #b8a878; font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.moneycoins { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; min-width: 0; }
.moneycoin {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 5px;
  border: 1px solid #55442e; border-radius: 9px; background: #211a12;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.moneycoin b { color: #f0d17b; font-size: 11px; }
.moneycoin small { color: #a88b5a; font-size: 8px; font-weight: bold; }
.moneycoin.coin-dirhem { border-color: #5f5d58; background: #24231f; }
.moneycoin.coin-dirhem b { color: #dedbd0; }
.moneycoin.coin-dirhem small { color: #aaa79e; }
.moneycoin.coin-siekaniec { border-color: #514d47; background: #201f1c; }
.moneycoin.coin-siekaniec b { color: #c9c5ba; }
.moneycoin.coin-siekaniec small { color: #918d84; }
.moneymore { color: #8e8069; font-size: 18px; line-height: 1; }
#money:hover .moneymore, #money:focus-visible .moneymore { color: #ffd24a; }
#equiprow { grid-column: 1 / -1; display: flex; gap: 4px; padding-bottom: 4px; border-bottom: 1px solid #3a2e20; }
.eqslot {
  width: 34px; height: 34px; background: #2c2418; border: 2px solid #2a2018;
  display: flex; align-items: center; justify-content: center;
  color: #6e5a40; font-size: 15px; cursor: default;
}
.eqslot.full { border-color: #6e5a40; cursor: pointer; }
.eqslot.full:hover { border-color: #ffd24a; }
.eqslot canvas { width: 80%; height: 80%; image-rendering: pixelated; }

/* ── Tryb PEŁNEGO OKNA (RuneScape-like, domyślny) ──
   Gra wypełnia całe okno przeglądarki; sakwa/umiejętności/zadania stają się
   pływającymi panelami wywoływanymi przyciskami w doku (prawy-dolny róg).
   Klasa `mode-resizable` na <html> (ustawiana inline w <head>, przełączana w
   client.js). Tryb klasyczny (`mode-fixed`) zostawia stary układ nietknięty. */
html.mode-resizable, html.mode-resizable body { height: 100%; margin: 0; }
html.mode-resizable #game { position: relative; width: 100vw; height: 100vh; height: 100dvh; max-width: none; margin: 0; }
html.mode-resizable #main { display: block; gap: 0; height: 100%; }
/* kolumny znikają z układu — dzieci (widok/czat/panel/minimapa) pływają nad grą */
html.mode-resizable #leftcol, html.mode-resizable #rightcol { display: contents; }
/* absolute + z-index:auto nie zamyka okien świata w osobnym kontekście warstw.
   Dzięki temu ich z-index działa względem pływającego czatu, doku i paneli. */
html.mode-resizable #viewport { position: absolute; inset: 0; width: 100%; height: 100%; }
html.mode-resizable #cv { border: none; outline: none; }

/* PEŁNE OKNO: OKRĄGŁA i większa; ramkę rysuje canvas → kontener przezroczysty.
   Pływa w prawym-górnym rogu; region/online ustępują jej w lewo. */
html.mode-resizable #minimap {
  position: fixed; top: 8px; right: 8px; width: 200px; height: 200px; z-index: 42;
  background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible;
}
/* zwinięta w PEŁNYM OKNIE: tylko „+" (bez paska i słowa „Mapa" — pływające „Mapa" wygląda źle) */
html.mode-resizable #minimap.min { width: 26px; height: 26px; background: transparent; border: none; box-shadow: none; }
html.mode-resizable #minimap.min::before { content: none; }
html.mode-resizable #region { right: 216px; }
html.mode-resizable #online { right: 216px; }

/* panel boczny → pływające okno zadokowane nad paskiem przycisków (prawy dół) */
html.mode-resizable #side {
  position: fixed; right: 8px; bottom: 60px; width: 280px;
  height: auto;
  /* górna krawędź panelu ≥ 216px → nie wjeżdża pod okrągłą (200px) minimapę;
     zapas mieści całą sakwę (sloty + mieszek + oręż) bez przewijania na typowych
     ekranach (≥ ~750px), a długi przewodnik przewija się WEWNĄTRZ (.tab) */
  max-height: calc(100dvh - 276px);
  max-width: calc(100vw - 16px);        /* wąskie ekrany: nie wychodź poza kadr */
  z-index: 40; display: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
html.mode-resizable #side.open { display: flex; }
html.mode-resizable #side #tabs { display: none; }  /* przyciski są w doku */

/* czat → pływające okno w lewym-dolnym rogu */
html.mode-resizable #chatbox {
  position: fixed; left: 8px; bottom: 8px; width: 340px; max-width: 42vw;
  margin: 0; z-index: 35; opacity: 0.95;
}

/* drobne kolizje HUD z dokiem/czatem w pełnym oknie */
html.mode-resizable #camhint { display: none; }
html.mode-resizable #hoverinfo { bottom: 44px; left: 12px; }
/* okno dialogu unosi się NAD dolnym paskiem (czat lewy dół / dok prawy dół),
   wyśrodkowane, by nie nachodziło na nie w pełnym oknie */
html.mode-resizable #dialog {
  left: 12px; right: 12px; bottom: 64px; max-width: 760px; margin: 0 auto; z-index: 50;
}

/* ── Dok przycisków (widoczny tylko w trybie pełnego okna) ── */
#dock { display: none; }
html.mode-resizable #dock {
  position: fixed; right: 8px; bottom: 8px; z-index: 45;
  display: flex; gap: 4px;
}
#dock button {
  width: 46px; height: 46px; padding: 0; font-size: 20px; line-height: 1;
  background: linear-gradient(#3a2e20, #2a2018); color: #ffd24a;
  border: 2px solid #6e5a40; border-radius: 6px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 225, 160, 0.12);
}
#dock button:hover { border-color: #ffd24a; }
#dock button.on {
  background: linear-gradient(#7a6038, #5a4626); border-color: #ffd24a;
  box-shadow: 0 0 10px rgba(255, 210, 74, 0.5), inset 0 1px 0 rgba(255, 225, 160, 0.2);
}

/* ── Czat ── */
#chatbox { flex: none; padding: 6px; }
#chatlog { height: 110px; overflow-y: auto; padding: 2px 4px; line-height: 1.45; }
#chatlog .m-info { color: #e8e2d0; }
#chatlog .m-quest { color: #ffd24a; }
#chatlog .m-combat { color: #ff6a4a; }
#chatlog .m-chat { color: #ffd24a; }
#chatlog .m-chat b { color: #fff; }
#chatlog .m-sys { color: #9fd9a0; font-style: italic; }
#chatin { margin-top: 4px; font-size: 13px; }

/* ── Menu kontekstowe ── */
/* Menu to ULOTNA, wierzchnia warstwa — leży nad KAŻDYM oknem gry (okna: 50 na
   PC, 60 na telefonie, sakwa 70, dok 71; dymek 90 zostaje wyżej). Na telefonie
   pełnoekranowa zagroda (60) przykrywała menu sztuki (dawne 50): tap „otwierał"
   menu POD panelem i widać było tylko dymek — stąd stała 80, bez wyjątków. */
#ctx {
  position: fixed; background: #211a12; border: 2px solid #6e5a40;
  min-width: 160px; z-index: 80; box-shadow: 3px 3px 0 #000a;
}
body:has(#bank:not([hidden])) #ctx .tgt { margin-left: 4px; }
/* modal potwierdzenia — przyciemnione tło blokuje przypadkowy klik */
#confirm {
  position: fixed; inset: 0; z-index: 100; background: #000a;
  display: flex; align-items: center; justify-content: center;
}
/* atrybut hidden musi przebić display:flex (selektor #id ma wyższą swoistość) */
#confirm[hidden] { display: none; }
#confirmbox { width: 320px; max-width: 90vw; padding: 16px; text-align: center; }
#confirmmsg { color: #e8e2d0; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
#confirmrow { display: flex; gap: 10px; justify-content: center; }
#confirmrow button { flex: 1; padding: 8px; font-family: inherit; cursor: pointer; border: 2px solid #2a2018; }
#confirmno { background: #3a342a; color: #e8e2d0; }
#confirmno:hover { background: #4a4234; }
#confirmyes { background: #5a2a22; color: #ffb0a0; }
#confirmyes:hover { background: #7a3a2e; }
#confirmcancel { background: #292722; color: #c9c1af; }
#confirmcancel:hover { background: #3a3730; }
#confirmrow.confirm-choice { flex-direction: column; }
#confirmrow.confirm-choice #confirmyes { order: 1; background: #365d32; color: #d8f0ca; }
#confirmrow.confirm-choice #confirmyes:hover { background: #477a40; }
#confirmrow.confirm-choice #confirmno { order: 2; background: #68452d; color: #f1d5b5; }
#confirmrow.confirm-choice #confirmno:hover { background: #83583a; }
#confirmrow.confirm-choice #confirmcancel { order: 3; }
/* modal podania liczby (wypłata x, oferta x) — w stylu gry, nie window.prompt */
#amount {
  position: fixed; inset: 0; z-index: 100; background: #000a;
  display: flex; align-items: center; justify-content: center;
}
#amount[hidden] { display: none; }
#amountbox { width: 280px; max-width: 90vw; padding: 16px; text-align: center; }
#amountmsg { color: #e8e2d0; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
#amountinput {
  width: 100%; box-sizing: border-box; padding: 8px; margin-bottom: 12px;
  background: #181208; color: #ffd24a; border: 2px solid #2a2018;
  font-family: inherit; font-size: 15px; text-align: center; -moz-appearance: textfield;
}
#amountinput::-webkit-outer-spin-button, #amountinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#amountrow { display: flex; gap: 10px; justify-content: center; }
#amountrow button { flex: 1; padding: 8px; font-family: inherit; cursor: pointer; border: 2px solid #2a2018; }
#amountno { background: #3a342a; color: #e8e2d0; }
#amountno:hover { background: #4a4234; }
#amountok { background: #3a5a2a; color: #fff; }
#amountok:hover { background: #4a7a32; }
/* G5: modal chrztu sztuki zagrody (imię ≤16 znaków) — wzór modala liczby */
#imie {
  position: fixed; inset: 0; z-index: 100; background: #000a;
  display: flex; align-items: center; justify-content: center;
}
#imie[hidden] { display: none; }
#imiebox { width: 280px; max-width: 90vw; padding: 16px; text-align: center; }
#imiemsg { color: #e8e2d0; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
#imieinput {
  width: 100%; box-sizing: border-box; padding: 8px; margin-bottom: 12px;
  background: #181208; color: #ffd24a; border: 2px solid #2a2018;
  font-family: inherit; font-size: 15px; text-align: center;
}
#imierow { display: flex; gap: 10px; justify-content: center; }
#imierow button { flex: 1; padding: 8px; font-family: inherit; cursor: pointer; border: 2px solid #2a2018; }
#imieno { background: #3a342a; color: #e8e2d0; }
#imieno:hover { background: #4a4234; }
#imieok { background: #3a5a2a; color: #fff; }
#imieok:hover { background: #4a7a32; }
/* okno opcji graficznych (oprawa 2026) — wybór poziomu oprawy */
#gfxopts {
  position: fixed; inset: 0; z-index: 100; background: #000a;
  display: flex; align-items: center; justify-content: center;
}
#gfxopts[hidden] { display: none; }
#gfxoptsbox { width: 380px; max-width: 92vw; padding: 16px; }
#gfxtiers { display: flex; flex-direction: column; gap: 8px; }
.gfxtier { text-align: left; padding: 9px 12px; font-family: inherit; cursor: pointer; border: 2px solid #2a2018; background: #322c22; color: #e8e2d0; }
.gfxtier:hover { background: #443c2c; }
.gfxtier.on { background: #294a2e; border-color: #4f8a52; }
.gfxtier b { color: #ffd24a; }
.gfxtier.on b { color: #d8f0c8; }
.gfxtier .d { display: block; margin-top: 3px; color: #b8a878; font-size: 10px; line-height: 1.4; }
.gfxtier.on .d { color: #a8c8a0; }
#ctx .h { color: #8ad0ff; padding: 5px 8px; border-bottom: 1px solid #3a2e20; font-size: 11px; }
#ctx div.it { color: #e8e2d0; padding: 5px 8px; cursor: pointer; }
#ctx div.it:hover { background: #4a3b2a; color: #ffd24a; }
#ctx .tgt { color: #ffd24a; }

/* Podpowiedź pod kursorem (własna, w stylu gry — szybsza i spójniejsza niż
   natywne title). Podąża za kursorem; pointer-events:none, by nie łapać myszy. */
#tip {
  position: fixed; z-index: 90; pointer-events: none;
  max-width: 330px; padding: 7px 10px; white-space: pre-line;
  background: rgba(33, 26, 18, 0.62); border: 2px solid rgba(110, 90, 64, 0.62); box-shadow: 3px 3px 0 #0007;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: #ece4d3; font-size: 11px; line-height: 1.45; text-shadow: 1px 1px 0 #000, 0 0 2px #000;
}
#tip[hidden] { display: none; }
#tip .tiphead { display: block; margin-bottom: 2px; font-weight: bold; color: #ffd24a; }
#tip .zw-tip-meta, .targz-szczegoly-opis .zw-tip-meta { color: #c6bda9; font-size: 10px; }
#tip .zw-tip-rar, .targz-szczegoly-opis .zw-tip-rar { margin: 1px 0 4px; font-weight: bold; }
#tip .zw-tip-opis, .targz-szczegoly-opis .zw-tip-opis { color: #e8e2d0; }
#tip .zw-tip-cecha, .targz-szczegoly-opis .zw-tip-cecha { display: grid; grid-template-columns: minmax(72px, 1fr) 92px 34px; align-items: center; gap: 6px; margin-top: 4px; }
#tip .zw-tip-cecha .stylbar, .targz-szczegoly-opis .zw-tip-cecha .stylbar { display: inline-block; width: 92px; height: 7px; }
#tip .zw-tip-cecha b, .targz-szczegoly-opis .zw-tip-cecha b { color: #f0e5cf; font-size: 10px; text-align: right; }
#tip .zw-tip-pomoc, .targz-szczegoly-opis .zw-tip-pomoc { color: #9a948a; font-size: 9.5px; line-height: 1.25; margin-left: 3px; }
/* los rocznika w piwniczce: licznik do szczytu / SZCZYT (złoto) / gaśnięcie */
.dojrz-los { color: #9ec3d8; font-size: 11px; }
.dojrz-szczyt { color: #ffd24a; font-weight: bold; font-size: 11px; }
.dojrz-poszczycie { color: #e07a5a; font-size: 11px; }
#tip .zw-tip-targ, .targz-szczegoly-opis .zw-tip-targ { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(184,168,120,0.28); color: #ffd24a; font-weight: bold; }
#tip .zw-tip-sprzedane, .targz-szczegoly-opis .zw-tip-sprzedane { color: #c09080; }
/* nazwy miar dawnych w czacie („Zbadaj") — klikalne, z dymkiem relacji jednostek */
.unitword { border-bottom: 1px dotted #b89968; cursor: help; }
.unitword:hover { color: #ffd24a; }
/* terminy połowu w karcie ryby (przewodnik) — klikalne, z dymkiem „co to" */
.skilldetail .gloss { border-bottom: 1px dotted #7d7158; cursor: help; }
.skilldetail .gloss:hover { color: #ffd24a; }

/* ── MOBILE (dotyk / wąski ekran): większe cele, zwarty HUD ─────────────────
   Wykrycie jak readFx(): coarse pointer. Rozmiary celów ≥40 px (kciuk). */
@media (pointer: coarse) {
  #chatin { height: 38px; font-size: 16px; }             /* 16px = iOS nie zoomuje pola */
  #buffstrip { height: 44px; }
  #bufftoggle { flex-basis: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px 8px; }
  .buffpreview { flex-basis: 68px; width: 68px; height: 44px; padding-block: 10px; }
  #ctx div.it { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  /* logowanie: iOS przybliża każde pole z fontem < 16px — wyrównaj wszystkie inputy */
  #login input, #create input, #passwd input, #gfxopts input, #amountinput, #imieinput { font-size: 16px; min-height: 40px; }
  #dock button, #gfxtiers .gfxtier { min-height: 44px; }
  #money { min-height: 44px; }
  .moneycoin { padding: 4px 7px; }
  .shoprow button { min-height: 40px; }   /* przyciski paneli (sakramenty wypędzenia, sklep) pod kciuk */
  #shopstock .shoprow-seed .nm { flex-basis: calc(100% - 34px); font-size: 14px; min-height: 42px; align-content: center; }
  #shopstock .shoprow-seed .seed-shop-meta, #shopstock .shoprow-seed .seed-shop-stock { font-size: 12px; }
  #amountrow button { min-height: 44px; }
  #confirmrow button { min-height: 44px; }
  /* ✕ KAŻDEGO panelu pod kciuk (zgłoszenie 2026-07-28: rola/spichlerzyk nie do
     trafienia) — jedna reguła zamiast wyliczania paneli po id */
  .winhead button { min-width: 42px; min-height: 42px; }
  #shop .winhead button, #targinst .winhead button { min-width: 42px; min-height: 42px; }
  #bank .winhead button { min-width: 42px; min-height: 42px; }
  #bank .bankmoneyactions button, #bankmoneyexact, #bankzbij { min-height: 42px; }
  #bank .bankrow button { min-width: 42px; min-height: 42px; }
  #bank .bankcat { min-height: 42px; padding: 5px 10px; border-radius: 21px; font-size: 12px; }
  #bank .bankmodebtn { min-height: 62px; }
  #mokosz .winhead button { min-width: 42px; min-height: 42px; }
  #mokoszbody button { min-height: 42px; }
  #targinstbody button, #targinstutarg button { min-height: 42px; }
  /* Targ zwierzęcy pozostaje dotykowy także na tabletach szerszych niż 760 px. */
  #targztabs button, #targzhead button, #targzbody button { min-height: 42px; }
  #targz .winhead button { min-width: 42px; min-height: 42px; }
  #targzbody .targz-slot { width: 58px; height: 58px; }
  /* Targ ma własną mapę parcel; światowa minimapa nie może zasłaniać karty,
     zakładek ani krzyżyka zamknięcia. */
  body:has(#targz:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  body:has(#targinst:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  body:has(#bank:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  body:has(#kadz:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  body:has(#wedzarnia:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  body:has(#zarna:not([hidden])) #minimap { visibility: hidden !important; pointer-events: none !important; }
  #zarnabody button, #zarna .winhead button { min-height: 44px; }
  #zarna .winhead button { min-width: 44px; }
  #kadzbody button, #kadz .winhead button, #wedzarniabody button, #wedzarnia .winhead button { min-height: 42px; }
  #kadzbody .kadz-kompo-grid { grid-template-columns: 1fr; }
  #kadzbody .kadz-kompo-grid select, #kadzbody .kadz-kompo-journal summary { min-height: 42px; }
  #kadz .winhead button, #wedzarnia .winhead button { min-width: 42px; }
  #seasonchip { width: 34px; height: 34px; }
  #seasonchip .ik svg { width: 19px; height: 19px; }
  #compass { width: 52px; height: 52px; }
  #hporb { transform: scale(1.15); transform-origin: top left; }
  #sundial { transform: scale(1.1); transform-origin: top left; left: 84px; }
  #seasonchip { left: 188px; top: 18px; }
  .gfxtier { font-size: 14px; }
}

/* ── MOBILE: świat na CAŁYM ekranie, panel boczny jako dolna PÓŁKA na żądanie ── */
@media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* W pionie minimapa zajmuje prawy-górny kwadrat. Pasek stanów zostaje mały;
     pod kulą zdrowia; szczegóły otwierają się dopiero pod mapą. */
  #buffs {
    position: fixed; top: 82px; left: 6px;
    width: fit-content; max-width: calc(100vw - 12px);
  }
  #buffpanel {
    position: fixed; top: 212px; left: 6px; right: auto;
    width: min(320px, calc(100vw - 12px)); max-height: 198px;
    -webkit-overflow-scrolling: touch;
  }
  .buffpreview { flex-basis: 64px; width: 64px; }
  .buffpreviewname { font-size: 7.5px; }
  .buffcountstate { min-width: 15px; }
  #bufflist { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 87px; }
  .buffeffect { height: 42px; }
  .buffpickname { font-size: 8.5px; }
  .btime { font-size: 7.5px; }
  /* Panel boczny to dolna PÓŁKA — sterowana ISTNIEJĄCYM stanem doku (#side.open).
     NIE dotykamy #rightcol (w pełnym oknie jest display:contents; ukrycie go
     zabijało też minimapę-siostrę). #side i tak jest ukryty, póki niezotwarty. */
  html.mode-resizable #side.open {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 56px !important;
    top: auto !important; width: 100vw !important; height: auto !important; max-height: 60vh !important;
    max-width: 100vw !important; z-index: 50; overflow-y: auto; border-top: 2px solid #6e5a40;
    border-radius: 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
  }
  /* Przy oknie wymagającym wyboru towaru gracz nadal może wysunąć sakwę.
     Sama sakwa oraz dok muszą leżeć nad kramem/targiem/handlem; po dotknięciu
     przedmiotu jego menu dostaje jeszcze wyższą warstwę powyżej. */
  body:has(#bank:not([hidden])) #side.open,
  body:has(#shop:not([hidden])) #side.open,
  body:has(#trade:not([hidden])) #side.open,
  body:has(#targ:not([hidden])) #side.open,
  body:has(#targinst:not([hidden])) #side.open { z-index: 70; }
  body:has(#bank:not([hidden])) #dock,
  body:has(#shop:not([hidden])) #dock,
  body:has(#trade:not([hidden])) #dock,
  body:has(#targ:not([hidden])) #dock,
  body:has(#targinst:not([hidden])) #dock { z-index: 71; }
  /* Przewodnik umiejętności ma jeden pionowy scroller. Dwa zagnieżdżone
     overflow-y (także na #side) więziły gest w iOS Safari. Stałą wysokość
     nadajemy tylko tej zakładce — sakwa nadal otwiera się jako mała półka. */
  html.mode-resizable #side.open:has(#tab-skills.on) {
    height: 60dvh !important; max-height: 60dvh !important; overflow: hidden;
  }
  html.mode-resizable #side.open > #tab-skills.on {
    flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y;
  }
  html.mode-resizable #side.open .skillrow { min-height: 44px; }
  #dock { z-index: 51; }
  /* MINIMAPA renderuje się ZAWSZE (niezależnie od zakładek) — mniejsza, prawy-górny róg */
  html.mode-resizable #minimap { display: block !important; top: 6px !important; right: 6px !important; }  /* rozmiar standardowy (200px) — ostrość załatwia DPR */
  /* zwinięta: ten sam róg ekranu — przycisk −/+ NIE skacze przy przełączaniu */
  html.mode-resizable #minimap.min { width: 26px !important; height: 26px !important; }
  html.mode-resizable #minimap.min #minimapmin { top: 2px; right: 2px; transform: none; }
  /* szczyt ekranu: tylko mapa + orb HP; zegar/pora/region/online → zakładka info */
  #sundial, #seasonchip, #region, #online { display: none !important; }
  /* Rozmowa z NPC ZAKRYWA czat (mały ekran — nie mieszczą się oba czytelnie) */
  html.mode-resizable #dialog { z-index: 70 !important; bottom: 64px; }
  body:has(#dialog:not([hidden])) #chatbox { display: none !important; }
  #fishmini { bottom: 64px !important; max-width: calc(100vw - 12px); }  /* nad dokiem, nie szerzej niż ekran */
  /* sakwa: 6 kolumn (24 slotów = 4 rzędy ~58px) — CAŁA mieści się na ekranie telefonu */
  #tab-inv.on { grid-template-columns: repeat(6, 1fr); gap: 3px; }
  /* zakładka info: KARTA — rząd [zegar | znak pory], pod spodem dwie linie tekstu */
  #tab-info.on { display: flex; padding: 14px; flex-direction: column; gap: 10px; align-items: stretch; justify-content: flex-start; }
  #tab-info #infoslot { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: rgba(30,24,16,0.6); border: 1px solid #6e5a40; border-radius: 10px; }
  #tab-info #sundial { display: block !important; position: static !important; transform: none !important; flex: none; }
  #tab-info #seasonchip { display: flex !important; position: static !important; transform: none !important; width: 40px; height: 40px; flex: none; }
  #tab-info #seasonchip .d { display: none !important; }  /* tekst ma karta niżej — bez dublowania */
  #tab-info #infoextra { color: #e8dcc2; font-size: 15px; line-height: 1.7; white-space: pre-line; padding: 10px 12px; background: rgba(30,24,16,0.6); border: 1px solid #6e5a40; border-radius: 10px; }
}
#dock-info { display: none; } /* desktop bez zmian */
@media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 500px) { #dock-info { display: flex; align-items: center; justify-content: center; } }

/* ── MOBILE: okna kramów/paneli jako DOLNA PÓŁKA (pełna szerokość, nad dokiem) ──
   Desktop bez zmian; na telefonie okno 470px wychodziło poza kadr (targ nieczytelny). */
@media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  #shop, #trade, #bank, #targ, #targinst, #targz, #apiary, #qbank, #kociol, #bielnik, #ritual, #sew, #suszarnia, #sadz, #fishjournal, #rola, #zarna, #kadz, #wedzarnia, #piwniczka, #biesiada, #mokosz, #zagroda {
    left: 6px !important; right: 6px !important; top: 220px !important; bottom: 60px !important;   /* pod minimapą, nad dokiem */
    transform: none !important; width: auto !important; max-width: none !important;
    max-height: none !important; font-size: 15px; z-index: 60; box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
  }
  /* Po schowaniu światowej minimapy targ może wykorzystać całą wysokość nad dokiem. */
  #bank, #targz, #targinst, #zarna, #kadz, #wedzarnia { top: 6px !important; }
  #bankstock { max-height: none; overflow: visible; }
  .banksearch { min-height: 44px; grid-template-columns: 30px minmax(0, 1fr) 42px; }
  .bankcurrencyhead small { font-size: 10px; }
  .bankcurrency { grid-template-columns: 26px minmax(0, 1fr); gap: 3px; padding: 7px 5px; }
  .bankcurrency canvas { width: 26px; height: 26px; }
  .bankcurrencyname { overflow: visible; font-size: 10px; text-overflow: clip; }
  .bankcurrencyamount { font-size: 13px; }
  .bankcurrencywallet { font-size: 9px; }
  #bankcurrencytotal { font-size: 10px; }
  .bankmoneytransferhead label, #bankmoneyexactfields label { font-size: 10px; }
  #bankmoneyvalue, #bankmoneyexactfields input { height: 42px; font-size: 16px; }
  #bankmoneypreview { min-height: 34px; font-size: 10px; }
  .banksearch input { height: 42px; font-size: 16px; }
  .banksearchclear { font-size: 22px; }
  .bankmodecopy b { font-size: 13px; }
  .bankmodecopy small { font-size: 10px; }
  .bankrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; }
  .bankrow .nm { font-size: 13px; }
  .bankrow .pr { min-width: 42px; }
  .bankactions { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #bank .bankactions button { width: 100%; }
  #bank .trademoney input, #bank .trademoney button { min-height: 44px; font-size: 14px; }
  #bank .trademoney input { width: 86px; font-size: 16px; }
  /* okno Zagrody: przyciski map/zakładek pod kciuk */
  #zagrodatabs button, #zagrodactl button, #zagrodabody button { min-height: 42px; }
  /* targ zwierzęcy: zakładki i akcje pod kciuk */
  #targztabs button, #targzhead button, #targzbody button { min-height: 42px; }
  #targzbody .targz-slot { width: 58px; height: 58px; }
  #targzbody .targz-kaf-wrap { width: 148px; }
  #targzbody .targz-szczegoly { grid-template-columns: 88px minmax(0, 1fr); }
  #targzbody .targz-szczegoly .targz-kaf-wrap { width: 88px; }
  #targzbody .targz-szczegoly-opis .zw-tip-cecha {
    grid-template-columns: minmax(54px, 1fr) minmax(48px, 92px) 30px;
    gap: 4px;
  }
  #targzbody .targz-mapa-stan { min-height: 38px; font-size: 13px; }
  #targz.wybor #targzhead, #targz.wybor #targztabs { display: none; }
  /* panel kramu ZAKRYWA czat (mały ekran — jak dialog); kupujesz, nie gadasz */
  body:has(#shop:not([hidden])) #chatbox, body:has(#bank:not([hidden])) #chatbox,
  body:has(#targ:not([hidden])) #chatbox, body:has(#targinst:not([hidden])) #chatbox, body:has(#targz:not([hidden])) #chatbox, body:has(#trade:not([hidden])) #chatbox,
  body:has(#kociol:not([hidden])) #chatbox, body:has(#apiary:not([hidden])) #chatbox,
  body:has(#fishjournal:not([hidden])) #chatbox, body:has(#rola:not([hidden])) #chatbox, body:has(#kadz:not([hidden])) #chatbox,
  body:has(#zarna:not([hidden])) #chatbox, body:has(#wedzarnia:not([hidden])) #chatbox, body:has(#mokosz:not([hidden])) #chatbox { display: none !important; }
  /* pola i przyciski targu pod kciuk */
  #targszuk input { font-size: 16px; min-height: 42px; }   /* 16px = iOS nie zoomuje */
  #targszuk button, #targutarg button, .targ-ksiega-glowa button, .targ-wiecej, .targ-strony button { min-height: 42px; }
  #targ .shoprow button { min-height: 42px; padding: 4px 14px; }
  .handel-roczniki button { min-height: 44px; font-size: 14px; }
  .targ-strony button { padding: 4px 20px; font-size: 18px; }
  #targlista { max-height: none; }   /* całe okno już się przewija — bez zagnieżdżonego scrolla */
  .targ-cena { font-size: 13px; }
  .targ-naglowek { font-size: 12px; }
}

/* Telefon obrócony poziomo: 220 px odstępu pod minimapę zostawiał ledwie
   szczelinę panelu. W krajobrazie targ przejmuje ekran nad dokiem. */
@media (pointer: coarse) and (max-height: 500px) {   /* telefon POZIOMO (szerokość zwykle >760) */
  #bank, #targz { top: 6px !important; bottom: 54px !important; }
  /* sakwa POZIOMO: 12 kolumn (24 sloty = 2 rzędy) — kafel ~66 px jak w pionie,
     zamiast 6 kolumn rozciągniętych na całą szerokość (kafle 135 px) */
  #tab-inv.on { grid-template-columns: repeat(12, 1fr); }
}

/* Długie przytrzymanie na dotyku otwiera NASZE menu (odpowiednik PPM) — bez
   systemowego zaznaczania i dymka kopiowania iOS/Android. Pola tekstowe zostają
   zaznaczalne (czat, logowanie). */
#game, #game canvas {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#game input, #game textarea { -webkit-user-select: text; user-select: text; }

/* Minimapa: gładkie skalowanie (płaskie kolory kafli — pixelated nic tu nie daje,
   a przy nieintegralnym mapowaniu pikseli potrafi prążkować) */
#minimapcv { image-rendering: auto; }

/* pływaki obrażeń: nakładka DOM nad kanwą 3D — ostre w każdym trybie graficznym */
#splatlayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
#splatlayer .splat {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  image-rendering: pixelated;  /* 20px rysunek → 32px: lekko pikselowy, tematycznie, wszędzie tak samo */
}

/* minigra połowu: dotyk nie przewija/nie zoomuje — panel i kanwa są przyciskiem */
#fishmini, #fishmini canvas { touch-action: none; }


/* ── PRZERYWNIK (cutscena): pasy kinowe, ukryte UI, blokada wskaźnika ── */
#cutscena { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#cutscena .blok { position: absolute; inset: 0; pointer-events: all; }
#cutscena .pas { position: absolute; left: 0; right: 0; height: 11vh; background: #000; pointer-events: none; }
#cutscena .pas.gora { top: 0; }
#cutscena .pas.dol { bottom: 0; display: flex; align-items: center; justify-content: center; }
#cutscena .hint { color: #8a8672; font: 12px/1 monospace; letter-spacing: 1px; opacity: .8; }
/* okno dialogu SCENY — własne, w nakładce nad pasami i blokadą kliknięć */
#cutscena .dlg { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(11vh + 12px);
  width: min(720px, 92vw); background: #211a12ee; border: 3px solid #6e5a40; padding: 12px; pointer-events: all; }
#cutscena .dlg .dlgname { color: #ffd24a; font-weight: bold; margin-bottom: 6px; }
#cutscena .dlg .dlglines { color: #e8e2d0; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; max-height: 34vh; overflow-y: auto; }
#cutscena .dlg .dlgopts div { color: #8ad0ff; cursor: pointer; padding: 3px 0; }
#cutscena .dlg .dlgopts div:hover { color: #ffd24a; }
@media (pointer: coarse) { #cutscena .dlg .dlgopts div { padding: 9px 0; } }  /* palec: większe cele dotyku */
#cutscena .napis { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; color: #e8e2d0;
  font: italic 22px/1.5 Georgia, serif; text-shadow: 0 2px 8px #000; padding: 0 10vw; pointer-events: none; }
/* UI znika na czas sceny — zostaje kanwa, pływaki i okno dialogowe sceny */
body.cutscena #viewport > :not(canvas):not(#splatlayer):not(#fx) { visibility: hidden !important; }
body.cutscena #rightcol, body.cutscena #dock, body.cutscena #chatbox { visibility: hidden !important; }

/* półka okazów w skrzyni: wiersz z rodowodem (jakość/pieczęć/działanie) */
#bank .bankokaz .nm { line-height: 1.35; }
#bank .bankokaz small { color: #c9bfa4; }
#bank .okazrar { color: #1c1610; border-radius: 4px; padding: 0 6px; font-size: 11px; font-weight: 600; }

/* ── przegląd zagrody: karty budynków (redesign 2026-07-27) ──
   karta mówi obrazem: glif budynku + portrety mieszkańców + pasek pojemności;
   cała karta jest przyciskiem (dotyk: duży cel), alerty ✚/🍽 w nagłówku */
.chowsiatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.chowkarta { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; background: rgba(45, 34, 23, 0.35); border: 1px solid #5a452c; border-radius: 6px; cursor: pointer; }
.chowkarta:hover, .chowkarta:active { border-color: #8a6a42; background: rgba(45, 34, 23, 0.6); }
.chowkarta > canvas { flex: none; margin-top: 2px; }
.chowtresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chownaglowek { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.chownaglowek small { color: #b8aa8b; }
.chowmiejsca { margin-left: auto; font-size: 11px; color: #c7b58e; font-variant-numeric: tabular-nums; }
.chowalarmy { display: inline-flex; gap: 3px; }
.chowbar { height: 5px; background: #382b1b; border: 1px solid #5a452c; border-radius: 3px; overflow: hidden; }
.chowbar > span { display: block; height: 100%; background: #9ec97a; }
.chowbar > span.pelny { background: #c88f3f; }
.chowportrety { display: flex; flex-wrap: wrap; gap: 3px; }
.chowportret { width: 26px; height: 26px; border-radius: 5px; background: #382b1b; border: 1px solid #5a452c; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.chowportret.chora { border-color: #e07a5a; }
.chowportret canvas { width: 22px; height: 22px; }
.chowwiecej { font-size: 10px; color: #b8aa8b; align-self: center; }
.chownagbudynku { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
/* spichlerzyk: kafelki przegród (redesign 2026-07-28) */
.chowsloty { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chowslot { display: flex; flex-direction: column; align-items: center; width: 48px; cursor: pointer; }
.chowslot .slot { background: #382b1b; }
.chowslot:hover .slot { border-color: #8a6a42; }
.chowslot.pusty { cursor: default; }
.chowslot.pusty::before { content: ""; width: 34px; height: 34px; border: 1px dashed #5a452c; border-radius: 4px; opacity: .5; }
.chowslot-n { position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1; color: #f4e5c5; text-shadow: 0 0 2px #000, 0 0 3px #000; pointer-events: none; }
.chowslot-nazwa { font-size: 9px; color: #e8e2d0; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pastylki info + przełącznik „?" (redesign 2026-07-28): wiedza w dymkach */
.chowchipy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.chowinfo { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #5a452c; border-radius: 10px; padding: 2px 8px; font-size: 12px; line-height: 16px; background: #2c2417; color: #bdb49e; cursor: default; user-select: none; }
.chowinfo canvas { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.chowinfo:not(.on) canvas { opacity: .55; }
.chowinfo.on { color: #9ee97a; border-color: #4f6b3a; }
.chowpomoc { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid #5a452c; background: #2c2417; color: #bdb49e; font-family: inherit; font-size: 13px; font-weight: bold; line-height: 1; cursor: pointer; }
.chowpomoc:hover { border-color: #8a6a42; }
.chowpomoc.on { color: #f4e5c5; border-color: #8a6a42; background: #382b1b; }
.chowsztuki { font-weight: normal; font-size: 11px; color: #bdb49e; }
/* raport „Obejrzyj": wynik badania stadka wraca w panelu (dziennik bywa zakryty) */
.chowraport { border-left: 3px solid #8a6a42; background: #2c2417; padding: 6px 9px; margin: 2px 0 6px; font-size: 12px; color: #d9cfb8; display: grid; gap: 3px; }