/* Profile postaci (zakładka #postacie) - okno ekwipunku i koło w klimacie Tibii */
.pf { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.pf-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 56px; }
.pf-char { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pf-char.sel { border-color: var(--gold); }
.pf-char h4 { margin: 0; font-size: 15px; display: flex; justify-content: space-between; gap: 6px; }
.pf-char .m { margin-bottom: 6px; }
.pf-builds { display: flex; flex-direction: column; gap: 4px; }
.pf-builds button { text-align: left; background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; cursor: pointer; font: inherit; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.pf-builds button:hover { border-color: var(--muted); }
.pf-builds button.on { border-color: var(--gold); color: var(--gold); }
.pf-builds button.add { color: var(--muted); border-style: dashed; justify-content: center; }
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pf-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; }
.pf-head label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.pf-head input, .pf-head select { padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.pf-head input[type=number] { width: 84px; }
.pf-head .nm input { width: 190px; font-weight: 600; }
.pf-head .btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-warn { color: var(--gold); font-size: 12px; }
.pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* okno ekwipunku jak w Tibii: szary kamień, wypukłe ramki, sloty wklęsłe */
.tw { background: linear-gradient(#232323, #1b1b1b); border: 1px solid #000; box-shadow: inset 0 1px 0 #3a3a3a, 0 8px 24px #0008;
  border-radius: 6px; padding: 18px 20px 16px; width: max-content; font-family: Verdana, Tahoma, sans-serif; color: #d6d6d6;
  display: flex; flex-direction: column; gap: 14px; }
.tw-title { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.tw-title b { font-size: 14px; color: #f0d58a; letter-spacing: .3px; }
.tw-title span { font-size: 11px; color: #a8a8a8; }
.tw-bars { display: grid; gap: 4px; }
.tw-bar { position: relative; height: 16px; background: #0d0d0d; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.tw-bar span { position: absolute; inset: 0; width: 100%; }
.tw-bar.hp span { background: linear-gradient(#e85a50, #a3241c); }
.tw-bar.mp span { background: linear-gradient(#5f93ee, #2246a8); }
.tw-bar b { position: absolute; inset: 0; font-size: 10px; line-height: 16px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000; font-weight: 400;
  font-variant-numeric: tabular-nums; }
.tw-grid { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(4, 72px); gap: 8px; justify-content: center; }
.tw-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #161616;
  border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 1px 0 #2c2c2c; }
.tw-stat span { font-size: 10px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .6px; }
.tw-stat b { font-size: 18px; color: #f0d58a; font-variant-numeric: tabular-nums; }
#p-postacie .slot { position: relative; width: 72px; height: 72px; background-color: #1f1e1c; border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #3b3b3b; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background-color .12s, box-shadow .12s; }
#p-postacie .slot:hover { background-color: #2e2b25; box-shadow: inset 0 0 0 2px var(--gold); }
#p-postacie .slot.sel { box-shadow: inset 0 0 0 2px var(--gold); background-color: #2e2b25; }
#p-postacie .slot.empty::before { content: attr(data-ph); font-size: 26px; opacity: .22; filter: grayscale(1); }
#p-postacie .slot.dis { opacity: .35; cursor: not-allowed; }
#p-postacie .slot img { width: 64px; height: 64px; image-rendering: pixelated; object-fit: contain; }
#p-postacie .slot .tier { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; display: grid; place-items: center; font: 700 11px Verdana, sans-serif;
  color: #fff; background: linear-gradient(#ffa133, #f07a0a); border: 1px solid #6b3200; text-shadow: 1px 1px 0 #6b3200; line-height: 1; }
#p-postacie .slot .imb { position: absolute; bottom: 2px; right: 2px; display: flex; gap: 2px; }
#p-postacie .slot .imb i { width: 7px; height: 7px; border-radius: 50%; background: #555; border: 1px solid #000; }
#p-postacie .slot .imb i.on { background: #4fd1c5; }
#p-postacie .slot.deco { cursor: default; }
#p-postacie .slot.deco:hover { outline: none; background: #262626; }
.tw-foot { font-size: 10px; color: #8c8c8c; text-align: center; }
.pf-slotedit { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 224px;
  font-size: 13px; }
.pf-slotedit h5 { margin: 0 0 4px; font-size: 14px; }
.pf-slotedit select { width: 100%; margin-top: 4px; padding: 5px 6px; border-radius: 7px; font-size: 13px; }
.pf-slotedit .st { color: var(--muted); font-size: 12px; margin: 4px 0; }

/* panel statystyk */
.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ps { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ps .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.ps .v { font-size: 26px; font-weight: 700; line-height: 1.2; }
.ps .v small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ps .br { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ps .br b { color: #7ee08a; font-weight: 600; }
.ps.wide { grid-column: 1 / -1; }
.res { display: grid; grid-template-columns: 70px 1fr 48px; gap: 4px 8px; align-items: center; font-size: 13px; }
.res .rb { height: 8px; background: var(--card2); border-radius: 4px; overflow: hidden; }
.res .rb span { display: block; height: 100%; }
.elchip { display: inline-block; margin: 3px 4px 0 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }

/* zakładki edytora */
.pf-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-pane { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }

/* koło */
.wh { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.wh > div:first-child { flex: 1 1 400px; max-width: 580px; min-width: 0; }
.wh > .wh-side { flex: 1 1 260px; }
.wh svg { width: 100%; height: auto; display: block; user-select: none; }
.wh .tilep { cursor: pointer; transition: opacity .15s; }
.wh .tilep:hover .bg { stroke: #fff; stroke-width: 1.5; }
.wh .tilep.sel .bg { stroke: var(--gold); stroke-width: 2.5; }
.wh .tilep.lock { opacity: .45; }
.wh .tilep.bad .bg { stroke: #ff5252; stroke-width: 2; }
.wh text { pointer-events: none; font-family: Verdana, Tahoma, sans-serif; }
.wh-side { display: flex; flex-direction: column; gap: 10px; }
.wh-box { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.wh-box h5 { margin: 0 0 4px; font-size: 14px; }
.wh-box input[type=range] { width: 100%; accent-color: var(--gold); }
.wh-btns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.gems { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.gem { background: var(--card2); border: 1px solid var(--line); border-left: 4px solid var(--qc); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.gem select { width: 100%; margin-top: 4px; padding: 5px 6px; border-radius: 7px; font-size: 12px; }
.gem .act { font-size: 12px; color: var(--muted); margin-top: 4px; }
.gem .off { text-decoration: line-through; opacity: .6; }

/* proficiency jak w Tibii */
.pt { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 6px; overflow-x: auto; background: #262626;
  border: 2px solid; border-color: #121212 #575757 #575757 #121212; padding: 8px; border-radius: 4px; }
.pt-col { display: flex; flex-direction: column; gap: 6px; }
.pt-h { text-align: center; color: #c9c9c9; font-size: 12px; background: #333; border: 1px solid #111; padding: 3px; }
.pt-h small { display: block; color: #888; font-size: 10px; }
.perk { display: flex; gap: 8px; align-items: center; background: #313131; border: 2px solid; border-color: #555 #151515 #151515 #555;
  color: #ddd; padding: 6px; cursor: pointer; font: inherit; font-size: 12px; text-align: left; min-height: 52px; }
.perk:hover { background: #3a3a3a; }
.perk.on { border-color: var(--gold); background: #3d3523; color: #fff; box-shadow: 0 0 8px #e5b45355 inset; }
.perk .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; font-size: 18px; background: #1d1d1d; border: 1px solid #000; }
.perk .ic img { width: 32px; height: 32px; image-rendering: pixelated; }

/* tabela czarów */
.sp { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp th { text-align: right; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--line); }
.sp th:first-child, .sp td:first-child { text-align: left; }
.sp td { text-align: right; padding: 6px; border-bottom: 1px dashed var(--line); }
.sp td.src { color: var(--muted); font-size: 12px; text-align: left; }
.sp .z { color: var(--line); }

/* okno wyboru przedmiotu */
.pk-bg { position: fixed; inset: 0; background: #000a; z-index: 50; display: grid; place-items: center; padding: 16px; }
.pk { background: var(--card); border: 1px solid var(--line); border-radius: 14px; width: min(760px, 100%); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden; }
.pk-top { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pk-top input[type=search] { flex: 1; min-width: 160px; padding: 8px 10px; border-radius: 8px; }
.pk-list { overflow-y: auto; padding: 8px; display: grid; gap: 6px; }
.pk-it { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.pk-it:hover { border-color: var(--gold); }
.pk-it { transition: border-color .15s ease, background-color .15s ease, transform .12s ease; }
.pk-it:active { transform: scale(.985); }

/* animacje ekwipunku (07.11.2026): okno wyboru, lot przedmiotu do slotu, osiadanie, tier, zdjęcie */
.pk-bg { animation: pkFade .18s ease-out; }
.pk-bg .pk { animation: pkIn .26s cubic-bezier(.2, .8, .2, 1.1); }
@keyframes pkFade { from { background: #0000; } }
@keyframes pkIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.pf-fly { position: fixed; z-index: 60; margin: 0; pointer-events: none; image-rendering: pixelated; object-fit: contain;
  transform-origin: 0 0; filter: drop-shadow(0 6px 8px #0009); will-change: transform; }
#p-postacie .slot.pf-land img { animation: pfSquash .46s cubic-bezier(.3, 1.5, .5, 1); }
#p-postacie .slot.pf-land { animation: pfHalo .6s ease-out; }
#p-postacie .slot.pf-land .tier, #p-postacie .slot.pf-tier .tier { animation: pfPop .38s .12s cubic-bezier(.3, 1.8, .5, 1) both; }
#p-postacie .slot.pf-land .imb i { animation: pfPop .3s cubic-bezier(.3, 1.8, .5, 1) both; }
#p-postacie .slot.pf-land .imb i:nth-child(2) { animation-delay: .05s; } #p-postacie .slot.pf-land .imb i:nth-child(3) { animation-delay: .1s; }
#p-postacie .slot.pf-empty { animation: pfDim .4s ease-out; }
@keyframes pfSquash { 0% { transform: scale(1.14, .86); } 45% { transform: scale(.95, 1.05); } 100% { transform: none; } }
@keyframes pfHalo { 0% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 0 #e5b453b0; }
                    100% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 14px #e5b45300; } }
@keyframes pfPop { from { transform: scale(.2); opacity: 0; } }
@keyframes pfDim { from { background-color: #3a3428; } }
@media (prefers-reduced-motion: reduce) {
  .pk-bg, .pk-bg .pk, #p-postacie .slot, #p-postacie .slot * { animation: none !important; }
}
.pk-it img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.pk-it b { font-size: 14px; }
.pk-it .m { font-size: 12px; }

@media (max-width: 900px) {
  .pf { grid-template-columns: 1fr; }
  .pf-side { position: static; }
  .pf-row, .wh { grid-template-columns: 1fr; }
  .tw { margin: 0 auto; }
  .pf-slotedit { width: auto; }
}
@media (max-width: 420px) { .tw { padding: 14px 12px; } .tw-grid { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(4, 62px); }
  #p-postacie .slot { width: 62px; height: 62px; } #p-postacie .slot img { width: 56px; height: 56px; } #p-postacie .slot.empty { background-size: 54px; } }
.pf-head .msg.ok { color: var(--sell); } .pf-head .msg.err { color: var(--bad); }
.pf-tabs .tab, .pf-head .mini, .wh-btns .mini { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pf-builds .ni, .pf-head .ni, .wh-btns .ni { width: 15px; height: 15px; }
.pots { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 6px; }
.pot { width: 40px; height: 40px; padding: 0; background: #262626; border: 2px solid; border-color: #121212 #575757 #575757 #121212;
  cursor: pointer; display: grid; place-items: center; opacity: .55; filter: grayscale(.7); color: var(--ink); font-size: 11px; }
.pot img { width: 32px; height: 32px; image-rendering: pixelated; }
.pot:hover { opacity: .9; filter: none; }
.pot.on { opacity: 1; filter: none; border-color: var(--gold); box-shadow: 0 0 8px #e5b45366; }
.wh-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 6px 0; justify-content: center; }
.wh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wh-legend i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: 9px; font-weight: 700; padding: 0 3px; }
.wh-legend i.ic { border-radius: 4px; background: #0d0f13; border: 1px solid var(--line); font-size: 11px; }
.gem-row { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.gem-row select:first-child { flex: 1; min-width: 0; margin-top: 0; }
.gem-row select.gr { width: 54px; flex: none; margin-top: 0; font-weight: 700; border-width: 2px; }
.gem-row select.g1 { border-color: #8a8f99; } .gem-row select.g2 { border-color: #a8703a; }
.gem-row select.g3 { border-color: #c9d1db; } .gem-row select.g4 { border-color: #e5b453; color: #e5b453; }
.wh-legend img.lg { width: 20px; height: 20px; image-rendering: pixelated; }
.wh-legend img.lg.sm { width: 13px; height: 13px; margin-right: 2px; }
.gem-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.gem-head img { width: 32px; height: 32px; image-rendering: pixelated; }
.gem-empty { width: 32px; height: 32px; border: 1px dashed var(--line); border-radius: 6px; display: inline-block; }
.gem-row { position: relative; }
.modpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 6px; font: inherit; font-size: 12px; cursor: pointer; min-height: 30px; }
.modpick:hover { border-color: var(--muted); }
.mi { display: inline-flex; gap: 2px; flex: none; }
.mi img { width: 18px; height: 18px; image-rendering: pixelated; }
.noic { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted); font-size: 11px; }
.grb { position: relative; width: 36px; height: 30px; flex: none; padding: 0; background: #1d1d1d; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; display: grid; place-items: center; }
.grb img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: contain; image-rendering: pixelated; }
.grb b { position: relative; font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.modlist { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--gold);
  border-radius: 10px; box-shadow: 0 10px 24px #000a; padding: 6px; margin-top: 3px; }
.modlist input { width: 100%; padding: 5px 7px; border-radius: 6px; font-size: 12px; box-sizing: border-box; }
.ml-items { max-height: 260px; overflow-y: auto; display: grid; gap: 2px; margin-top: 5px; }
.ml-items button { display: flex; gap: 6px; align-items: center; text-align: left; background: transparent; color: var(--ink); border: 0;
  border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; cursor: pointer; }
.ml-items button:hover { background: var(--card2); }
.grb.lim { outline: 2px solid #ff5252; }
.grb.empty { background: transparent; border: 0; }
.fw { display: grid; grid-template-columns: 260px 1fr; gap: 10px; background: linear-gradient(#333, #2a2a2a); border: 2px solid;
  border-color: #6b6b6b #1b1b1b #1b1b1b #6b6b6b; border-radius: 4px; padding: 8px; }
.fw-side { background: #262626; border: 2px solid; border-color: #121212 #575757 #575757 #121212; padding: 8px; display: flex;
  flex-direction: column; gap: 6px; font-size: 12px; }
.fw-title { display: flex; gap: 6px; align-items: center; color: #e8e6e1; margin-bottom: 2px; }
.fwg { display: flex; gap: 8px; align-items: center; text-align: left; background: #313131; color: #bbb; border: 2px solid;
  border-color: #555 #151515 #151515 #555; padding: 5px; font: inherit; font-size: 12px; cursor: pointer; }
.fwg.on { border-color: var(--gold); color: #fff; background: #3d3523; }
.fwg.locked { opacity: .55; }
.fwg-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.fwg-ic img { width: 34px; height: 34px; image-rendering: pixelated; }
.fw-main { min-width: 0; }
.fw-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fw-top input[type=search] { padding: 5px 8px; border-radius: 6px; font-size: 12px; min-width: 140px; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; height: 320px; align-content: start; overflow-y: auto; }
.fwt { position: relative; height: 58px; background: #262626; border: 2px solid; border-color: #121212 #575757 #575757 #121212;
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.fwt:hover { background: #303030; }
.fwt.sel { outline: 2px solid #fff; }
.fwt .mi img { width: 26px; height: 26px; }
.fwt .noic { width: 26px; height: 26px; font-size: 16px; }
.fwt-gr { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; }
.fwt-gr img { width: 16px; height: 16px; }
.fwt i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 10px; color: #ddd; }
.fwt.g1 { box-shadow: inset 0 0 0 2px #6d727b; } .fwt.g2 { box-shadow: inset 0 0 0 2px #a8703a; }
.fwt.g3 { box-shadow: inset 0 0 0 2px #c9d1db; } .fwt.g4 { box-shadow: inset 0 0 0 2px #e5b453; }
@media (max-width: 760px) { .fw { grid-template-columns: 1fr; } }
.fw-sep { grid-column: 1 / -1; font-size: 11px; color: #c9c9c9; text-transform: uppercase; letter-spacing: .5px; padding: 4px 2px 0; }
/* symulator rotacji */
.sim { --simc: 54px; }
.sim-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 8px; }
.sim-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sim-row > div:first-child { flex: none; max-width: 100%; overflow-x: auto; }
.sim-side { flex: 1 1 320px; min-width: 300px; }
.sim-tools { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.sim-tools input[type=search] { padding: 5px 8px; border-radius: 6px; font-size: 13px; width: 180px; }
.sim-tools select { padding: 4px 6px; border-radius: 6px; font-size: 12px; }
.sim-tools .mini.on { border-color: var(--gold); color: var(--gold); }
.sim-pick { font-size: 12px; margin-bottom: 4px; min-height: 18px; }
.sim-grid { display: grid; gap: 0; background: #111; border: 2px solid; border-color: #121212 #575757 #575757 #121212; width: max-content; }
.sc { position: relative; width: var(--simc); height: var(--simc); background: #3a4a2c var(--floor) center / cover; cursor: pointer;
  image-rendering: pixelated; box-shadow: inset 0 0 0 1px #0002; }
.sc:hover { outline: 1px solid #fff8; z-index: 1; }
.sc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sc .hb { position: absolute; left: 3px; right: 3px; top: 1px; height: 3px; background: #000; }
.sc .hb b { display: block; height: 100%; background: #3fd13f; }
.sc.tg { outline: 2px solid #ff3030; z-index: 2; }
.sc.fl::after { content: ""; position: absolute; inset: 0; background: #ffd54f66; animation: simfl .45s ease-out forwards; }
@keyframes simfl { from { opacity: 1; } to { opacity: 0; } }
.splayer { position: absolute; inset: 0; display: grid; place-items: center; color: #4fc3f7; font-size: 22px; text-shadow: 0 0 4px #000; }
.splayer.d1 { transform: rotate(90deg); } .splayer.d2 { transform: rotate(180deg); } .splayer.d3 { transform: rotate(270deg); }
.fdmg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: #ff6b6b; font-weight: 700; font-size: 12px;
  text-shadow: 1px 1px 0 #000; pointer-events: none; animation: simup .9s ease-out forwards; z-index: 3; white-space: nowrap; }
.fdmg.crit { color: #ffd54f; font-size: 14px; }
@keyframes simup { 0% { transform: translate(-50%, 0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -34px); opacity: 0; } }
.sim-side { position: relative; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.sim-side h5 { margin: 0 0 4px; font-size: 14px; }
.sim-prio { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.sim-prow { display: flex; gap: 6px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.sim-prow .spn { flex: 1; min-width: 0; }
.sim-prow .spn small { display: block; color: var(--muted); font-size: 11px; }
.sim-prow input { width: 46px; padding: 2px 4px; border-radius: 5px; }
.spi img, .mi img { width: 22px; height: 22px; image-rendering: pixelated; }
.sim-side select#sim-add { width: 100%; padding: 5px; border-radius: 7px; }
.hotbar { display: grid; grid-template-columns: repeat(8, 44px); gap: 4px; margin: 8px 0; }
.hk { position: relative; width: 44px; height: 44px; background: #262626; border: 2px solid; border-color: #121212 #575757 #575757 #121212;
  cursor: pointer; display: grid; place-items: center; padding: 0; }
.hk img { width: 32px; height: 32px; image-rendering: pixelated; }
.hkk { position: absolute; top: 0; left: 2px; font-size: 10px; color: #ddd; text-shadow: 1px 1px 0 #000; }
.hkcd { position: absolute; inset: 0; display: none; place-items: center; background: #000a; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
.hk.exh { border-color: #ff5252; }
.sim-live { margin-top: 6px; font-size: 13px; }
.sim-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 12px 0 8px; }
.sim-log { max-height: 220px; overflow-y: auto; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .sim { --simc: calc((100vw - 64px) / 15); } .sim-side { min-width: 0; } }
.spr { display: inline-block; vertical-align: middle; flex: none; image-rendering: auto; }
.wh-head { text-align: center; font-size: 15px; margin-bottom: 4px; } .wh-head b { font-size: 22px; color: var(--gold); }
#p-postacie .slot.empty { background-size: 64px; background-repeat: no-repeat; background-position: center; } #p-postacie .slot.empty::before { content: none; }
#p-postacie .slot.empty::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #1b1a18; opacity: .4; transition: opacity .12s; }   /* przygaszona sylwetka */
#p-postacie .slot.empty:hover::after { opacity: .15; }
.prey { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.prey input { width: 100%; padding: 5px 7px; border-radius: 7px; font-size: 13px; box-sizing: border-box; }
.prey-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.prey-row select { padding: 4px 5px; border-radius: 6px; font-size: 12px; }
.stars { display: inline-flex; }
.stars button { background: none; border: 0; padding: 0 1px; font-size: 14px; color: #555; cursor: pointer; line-height: 1; }
.stars button.on { color: #f5c542; text-shadow: 0 0 3px #000; }
.prey-v { color: var(--gold); font-size: 13px; margin-left: auto; }
.wh-paste { display: flex; gap: 6px; margin-bottom: 4px; } .wh-paste input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; font-size: 13px; border-color: var(--gold); }
.pf-head label small { font-size: 10px; }
/* zakładka Postacie: na szerokim ekranie prawie cała szerokość okna (reszta strony zostaje w wąskiej kolumnie) */
#p-postacie { width: min(1800px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); }
.pt { grid-auto-columns: minmax(150px, 1fr); }
.psp { display: block; width: 32px; height: 32px; background-repeat: no-repeat; }
.sc img.pout { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; image-rendering: pixelated; z-index: 2; pointer-events: none; }
.pdir { position: absolute; right: 1px; bottom: 0; font-size: 13px; font-weight: 700; color: #4fc3f7; text-shadow: 0 0 3px #000, 1px 1px 0 #000; z-index: 3; }
.sc img { image-rendering: pixelated; }
#pf-food .mini.on { border-color: var(--gold); color: var(--gold); }
.sc img.flip { transform: scaleX(-1); }
/* symulator: sprite'y w skali gry (32 px = 1 pole), przyklejone do prawego dolnego rogu pola */
.sc { overflow: visible; }
.sc img.simspr, .sc img.fx { position: absolute; inset: auto; right: 0; bottom: 0; width: 100%; height: 100%;
  object-fit: fill; max-width: none; image-rendering: pixelated; pointer-events: none; }
.sc img.simspr { z-index: 2; } .sc img.pout.simspr { z-index: 3; } .sc img.fx { z-index: 5; }
.sc img.corpse { z-index: 1; opacity: .9; } .sc img.corpse.gray { filter: grayscale(1) brightness(.5); opacity: .75; }
.sc .hb { z-index: 6; top: -4px; }
.fdmg { z-index: 7; font-size: 15px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; animation-duration: 2.2s !important; }
.fdmg.crit { font-size: 17px; } .fdmg.fatal { font-size: 18px; font-weight: 800; }
.sc.tg { outline-offset: -2px; }
.spd-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.spd-head select { padding: 4px 6px; border-radius: 6px; font-size: 12px; }
.sp.spd td img { width: 22px; height: 22px; vertical-align: middle; image-rendering: pixelated; margin-right: 4px; }

/* symulator - styl „Płótno” (sim.js simPaint, grafiki web/simspr z tools/upscale_sim.py) */
.sim-grid.paint { position: relative; isolation: isolate; border-color: #2a2118 #6b5636 #6b5636 #2a2118; }
/* mroczne, nierówne światło (08.11.2026): podłoga przyciemniona, dwie ciepłe plamy światła z lewej góry, cienie w prawo-dół */
.sim-grid.paint { background-color: #1c2416; image-rendering: auto; background-position: 0 0;
  background-image:
    radial-gradient(ellipse 34% 30% at 28% 26%, rgba(255, 205, 120, .17), rgba(255, 210, 130, 0) 100%),
    radial-gradient(ellipse 26% 24% at 70% 66%, rgba(255, 200, 120, .10), rgba(255, 200, 120, 0) 100%),
    radial-gradient(ellipse 60% 55% at 85% 15%, rgba(6, 10, 18, .4), rgba(6, 10, 18, 0) 100%),
    linear-gradient(rgba(10, 14, 20, .52), rgba(10, 14, 20, .52)),
    var(--floorp);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, var(--simc) var(--simc), var(--simc) var(--simc); }   /* --floorp = 2 adresy */
.sim-grid.paint .sc { background: none; box-shadow: none; }   /* podłoga ciągła (na całej planszy), bez linii między polami */
.sim-grid.paint .sc:hover { outline: 1px solid rgba(255, 236, 190, .55); }
.sim-grid.paint .sc img.simspr[data-hd] { image-rendering: auto; }
.sim-grid.paint .sc img.simspr:not(.corpse) { filter: brightness(.9) saturate(1.15) contrast(1.14) drop-shadow(0 0 1px rgba(10, 8, 6, .95)); }
.sim-grid.paint .sc img.corpse:not(.gray) { filter: brightness(.75) saturate(.9) drop-shadow(0 0 1px rgba(10, 8, 6, .7)); }
/* cień kontaktowy pod stopami + rzucony cień z sylwetki (kopia sprite'a: czarna, spłaszczona, pochylona w prawo) */
.sim-grid.paint .ssh { position: absolute; left: 8%; right: 8%; bottom: 0; height: 26%; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 6, 3, .75), rgba(4, 6, 3, .35) 55%, rgba(4, 6, 3, 0)); }
.sim-grid.paint .sc img.simspr.cast { z-index: 1; pointer-events: none; opacity: .7;
  filter: brightness(0) blur(1.2px); transform-origin: calc(100% - var(--simc) / 2) 96%;
  transform: skewX(-48deg) scaleY(.5); -webkit-mask-image: linear-gradient(to top, #000 15%, rgba(0, 0, 0, .25) 95%);
  mask-image: linear-gradient(to top, #000 15%, rgba(0, 0, 0, .25) 95%); }
.sim-grid.paint .sc.tg { outline: 3px solid rgba(255, 80, 60, .85); outline-offset: -4px; }
.sim-grid.paint .sc .hb { height: 5px; left: 5px; right: 5px; border-radius: 3px; background: rgba(12, 13, 17, .9); box-shadow: 0 0 0 1px #3c2814; }
.sim-grid.paint .sc .hb b { border-radius: 2px; background: linear-gradient(#86e394, #3fae4f); }
/* faktura płótna i ciemniejsze brzegi nad całą planszą (komórki mają z-index do ~215) */
.sim-grid.paint::before, .sim-grid.paint::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 300; }
.sim-grid.paint::before { background: url(/static/simspr/canvas.png?v=1); mix-blend-mode: overlay; opacity: .45; }
.sim-grid.paint::after { background:
    radial-gradient(ellipse 72% 68% at 36% 36%, rgba(6, 7, 10, 0) 35%, rgba(6, 7, 10, .6) 80%, rgba(3, 4, 7, .88) 100%),
    linear-gradient(135deg, rgba(255, 196, 110, .06), rgba(0, 0, 0, 0) 45%, rgba(6, 10, 22, .28)); }

/* dodawanie postaci przez stronę */
.pf-add b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pf-addrow { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.pf-addrow input { flex: 1; min-width: 0; }
.pf-code { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.pf-code code { font-size: 16px; font-weight: 700; letter-spacing: 1px; padding: 4px 8px; border: 1px dashed var(--gold); border-radius: 4px; user-select: all; }

/* zwijana tabela speed breakpointów */
.spd-more { margin-top: 6px; }
.spd-more > summary { cursor: pointer; color: var(--gold); font-size: 13px; padding: 4px 0; list-style: none; user-select: none; }
.spd-more > summary::-webkit-details-marker { display: none; }
.spd-more > summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
.spd-more[open] > summary::before { transform: rotate(90deg); }

/* edytor czarów (web/spelled.js) */
.sped-modal { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.sped { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; width: min(640px, 100%); max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column; gap: 10px; }
.sped-head { display: flex; gap: 8px; align-items: center; }
.sped-head b { color: var(--gold); }
.sped-head select { flex: 1; }
.sped-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sped label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.sped label.wide { flex: 1; min-width: 220px; }
.sped input, .sped select { background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.sped input[type=number] { width: 90px; }
.sped-fx img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; background: #3a4a2c; border-radius: 6px; }
.sped-grid { display: grid; grid-template-columns: repeat(11, 30px); gap: 2px; justify-content: center; user-select: none; touch-action: none; }
.sped-grid i { width: 30px; height: 30px; background: #2b3a22; border: 1px solid #0006; border-radius: 3px; cursor: pointer; display: grid; place-items: center; font-style: normal; }
.sped-grid i.on { background: #e5b453; box-shadow: inset 0 0 0 2px #fff6; }
.sped-grid i.c { background: #4fc3f7; color: #002; font-weight: 700; cursor: default; }
.sped-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) { .sped-grid { grid-template-columns: repeat(11, 24px); } .sped-grid i { width: 24px; height: 24px; } }

/* modyfikacja pól proficiency (15.30) */
.perk { position: relative; }
.perk .pmod { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 12px; opacity: .35; cursor: pointer; padding: 0 3px; border-radius: 4px; }
.perk:hover .pmod { opacity: .9; } .perk .pmod:hover { background: var(--card2); color: var(--gold); }
.perk.pmodded { border: 1px dashed var(--gold) !important; }
.perk.pmodded .ic { color: var(--gold); font-size: 18px; display: grid; place-items: center; }
.pmod-ed { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px;
  animation: pmodIn .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes pmodIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pmod-ed { animation: none; } }
.pmod-ed select, .pmod-ed input { background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }

/* przycisk Modify jak w kliencie Tibii (młotek + koszt w dust) */
.hammer { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.perk .pmod { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; background: linear-gradient(#4a4a4a, #2b2b2b);
  border: 1px solid #111; box-shadow: inset 0 1px 0 #666; color: #ddd; }
.perk .pmod .hammer { width: 12px; height: 12px; }
.pmod-hint { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(#4a4a4a, #2b2b2b);
  border: 1px solid #111; color: #ddd; vertical-align: middle; }
.pmod-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pmod-cost { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border: 1px solid #111; border-radius: 4px;
  background: #1b1b1b; color: #ff4d4d; font: 700 13px Verdana, sans-serif; box-shadow: inset 0 1px 0 #333; }
.pmod-cost img { width: 18px; height: 18px; image-rendering: pixelated; }
.pmod-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#5a5a5a, #343434); border: 1px solid #111; box-shadow: inset 0 1px 0 #777, 0 1px 0 #000;
  color: #e8e8e8; font: 600 13px Verdana, sans-serif; text-shadow: 0 1px 0 #000; }
.pmod-btn:hover { background: linear-gradient(#686868, #3e3e3e); }
.pmod-btn:active { transform: translateY(1px); }

/* okno skilli (jak Skills w kliencie) */
.skillwin .skt { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.skillwin .skt th { font-size: 10.5px; font-weight: 400; color: var(--muted); text-align: right; padding: 0 4px 2px; }
.skillwin .skt td { padding: 2px 4px; border-bottom: 1px solid #ffffff0d; }
.skillwin .skt td:first-child { color: var(--ink); white-space: nowrap; }
.skillwin .skt tr.main td:first-child { color: var(--gold); }
.skillwin .skt input { width: 52px; text-align: right; background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; }
.skillwin .skt .tv { text-align: right; font-weight: 700; white-space: nowrap; }
.skillwin .skt .sb { color: #3fd13f; font-weight: 600; font-size: 12px; }

/* symulator: pocisk z gry i mount pod postacią */
#sim-grid { position: relative; }
#sim-grid img.fxm { position: absolute; z-index: 400; pointer-events: none; image-rendering: pixelated; max-width: none; }
.sc img.pmount.simspr { z-index: 3; }

/* symulator: przycisk Stop w trakcie odtwarzania */
[data-simrun].simstop { background: #c0392b; border-color: #c0392b; color: #fff; }

/* edytor czarów: siatka zasięgu (21×21), gotowe układy, wybór animacji z grafik gry */
.sped-h { margin: 12px 0 4px; font-size: 13px; color: var(--gold); }
.sped-grid.sm { grid-template-columns: repeat(21, 15px); gap: 1px; }
.sped-grid.sm i { width: 15px; height: 15px; border-radius: 2px; font-size: 10px; }
.sped-grid.sm i.on { background: #5dade2; box-shadow: none; }
@media (max-width: 480px) { .sped-grid.sm { grid-template-columns: repeat(21, 13px); } .sped-grid.sm i { width: 13px; height: 13px; } }
.sped-fxp img { visibility: hidden; }
.sped-fxlist { margin: 6px 0; padding: 8px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; }
.sped-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; max-height: 260px; overflow: auto; margin-top: 6px; }
.sped-fxgrid button { background: #2b3a22; border: 1px solid #0006; border-radius: 6px; padding: 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--muted); }
.sped-fxgrid button img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.sped-fxgrid button small { font-size: 10px; line-height: 1; }
.sped-fxgrid button.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
/* karta Skille: tabela nie mieści się w kafelku 190 px - zajmuje 2 kolumny, a na wąskim ekranie przewija się w poziomie */
@media (min-width: 520px) { .pf-stats .ps.skillwin { grid-column: span 2; } }
.ps.skillwin { min-width: 0; overflow-x: auto; }
/* edytor czarów: warianty z kołem (augment / Beam Mastery) i pędzel „linie boczne” */
.sped-grid i.on2 { background: repeating-linear-gradient(45deg, #e5b453 0 4px, #8a6a2c 4px 8px); box-shadow: inset 0 0 0 2px #fff4; }
.sped-vtag { font-size: 11px; font-weight: 600; color: #1a1408; background: #7c6cff; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.sped-var { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.sped-var .m { flex: 1 1 100%; }
.sped-pm { display: inline-flex; gap: 4px; margin-left: auto; }
.sped-pm .mini.on { border-color: var(--gold); color: var(--gold); }
/* symulator: obrażenia od potworów (ataki z Canary) */
.sim-inc { margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.sim-inc summary { cursor: pointer; }
.sim-inc-el { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.sim-inc-m { border-top: 1px solid #ffffff10; padding: 5px 0; }
.sim-inc-m ul { margin: 3px 0 0; padding-left: 18px; }
.sim-inc-m li { margin: 1px 0; } .sim-inc-m li.off { opacity: .5; }
.sim-unused { margin: 8px 0; padding: 8px 10px; background: rgba(229,180,83,.08); border: 1px solid rgba(229,180,83,.35); border-radius: 8px; font-size: 13px; }

/* symulator: miejsce z Tibii (wycinek spotu) - kolor minimapy, ściany ciemniejsze */
.sim-grid.place .sc { background: var(--pc, #2a3a22) !important; background-image: none !important; }
.sim-grid.place .sc.wall { background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.75)), var(--pc, #333) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); cursor: not-allowed; }
.sim-grid.place { background: #111 !important; }
#sim-place { min-width: 200px; }
/* symulator: liczby obrażeń nad całą planszą (nie zasłaniają ich potwory z niższych rzędów) */
#sim-grid .fdmg-lay { position: absolute; z-index: 9000; pointer-events: none; overflow: visible; }

/* miejsce z Tibii: tekstury podłóg z kolorów minimapy (simPlaceTex), ściany przyciemnione */
.sim-grid.place .sc { background-color: var(--pc, #2a3a22) !important; background-image: var(--pt, none) !important; background-size: 100% 100% !important; }
.sim-grid.place .sc.wall { background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), var(--pt, none) !important; }
/* symulator: animacje czarów nad całą planszą (nie zasłania ich potwór z rzędu niżej), pod liczbami obrażeń */
#sim-grid .fx-lay { position: absolute; z-index: 8000; pointer-events: none; overflow: visible; }
#sim-grid .fx-lay img.fx { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; image-rendering: pixelated; pointer-events: none; }

/* symulator: duże potwory (64 px) przy górnej/lewej krawędzi nie wychodzą poza planszę - przycięte jak okno gry Tibii */
#sim-grid { overflow: hidden; }

/* ataki potworów w odtworzeniu (sim.js simPlayerFloat): liczba nad postacią, krócej i trochę niżej niż obrażenia zadawane */
.fdmg.inc { font-size: 13px; top: 10px; animation-duration: 1.6s !important; }

/* profil: zakładka „Obrażenia czarów” (profile.js pfRenderDmg) */
.pfd-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 10px; }
.pfd-top label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.pfd-top input { min-width: 220px; }
table.pfd td img { width: 22px; height: 22px; vertical-align: middle; image-rendering: pixelated; }
.pfd-up { color: var(--sell, #3fbf6f); font-size: 11px; }
.pfd-down { color: var(--bad, #e2574c); font-size: 11px; }