/* HUD, minimapa, pasek narzędzi, przyciski akcji, sterowanie dotykowe */
:root{ --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); --glass:rgba(14,17,26,.62); }

#toolbar{ position:fixed; top:calc(8px + var(--sa-t)); left:calc(8px + var(--sa-l)); z-index:20; display:flex; gap:8px; }
#toolbar button{ position:relative; width:44px; height:44px; border-radius:14px; border:1px solid #ffffff30; background:var(--glass); backdrop-filter:blur(6px); color:#fff; font-size:20px; padding:0; box-shadow:0 3px 10px #0007; }
#chat-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; border-radius:9px; background:#e74c3c; font-size:11px; font-weight:700; line-height:18px; display:none; padding:0 4px; box-sizing:border-box; }
#chat-ticker{ position:fixed; bottom:calc(120px + var(--sa-b)); left:calc(8px + var(--sa-l)); max-width:min(300px,58vw); z-index:19; color:#fff; font-size:12px; background:var(--glass); border-radius:10px; padding:5px 9px; opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-ticker.show{ opacity:1; }

#hud{ color:#fff; font-size:11px; line-height:1.3; margin:0 0 5px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#status-panel{ position:fixed; left:calc(8px + var(--sa-l)); top:calc(58px + var(--sa-t)); width:min(210px,50vw); z-index:18; pointer-events:none; color:#fff; background:var(--glass); backdrop-filter:blur(6px); border-radius:14px; padding:7px 9px 5px; box-shadow:0 3px 10px #0007; }
.stat{ display:flex; align-items:center; gap:6px; margin:0 0 4px; }
.stat .ic{ width:22px; text-align:center; font-size:13px; flex:none; }
.stat .ic.lv{ font-size:10px; font-weight:800; color:#ffd23f; }
.bar{ position:relative; flex:1; height:13px; background:#0008; border-radius:7px; overflow:hidden; }
.bar>i{ display:block; height:100%; width:100%; transition:width .2s ease; border-radius:7px; }
.bar>b{ position:absolute; inset:0; text-align:center; font-size:9px; line-height:13px; font-weight:700; text-shadow:0 1px 2px #000; }
#hp-fill{ background:linear-gradient(#ff6b5e,#d63a2c); } #stamina-fill{ background:linear-gradient(#ffd54a,#e0a800); }
#hunger-fill{ background:linear-gradient(#ff9a3c,#d9701a); } #xp-fill{ background:linear-gradient(#6bbcff,#2d7fd6); }
#quest-tracker{ position:fixed; left:calc(8px + var(--sa-l)); top:calc(196px + var(--sa-t)); width:min(210px,50vw); z-index:17; pointer-events:none; color:#fff; font-size:11px; text-shadow:0 1px 3px #000; }
#quest-tracker div{ background:var(--glass); border-radius:9px; padding:4px 8px; margin-bottom:4px; }
#quest-tracker b{ color:#ffd23f; }

#interaction-prompt{ position:fixed; left:calc(8px + var(--sa-l)); bottom:calc(64px + var(--sa-b)); max-width:56vw; overflow:hidden; text-overflow:ellipsis; z-index:22; display:none; background:rgba(15,18,25,.92); color:#fff; border:1px solid #ffffff44; border-radius:14px; padding:9px 14px; font-weight:600; font-size:13px; box-shadow:0 5px 18px #0009; pointer-events:none; white-space:nowrap; }
#hint{ position:fixed; left:50%; top:auto; bottom:10px; transform:translateX(-50%); z-index:6; color:#fff; background:#000a; padding:8px 12px; border-radius:10px; font-size:12px; pointer-events:none; opacity:1; transition:opacity .5s; text-align:center; max-width:80vw; }

/* Przyciski akcji (prawy dolny róg, układ łukiem pod kciuk) */
#actions{ position:fixed; right:calc(10px + var(--sa-r)); bottom:calc(12px + var(--sa-b)); width:178px; height:178px; z-index:23; pointer-events:none; }
#actions button{ position:absolute; border-radius:50%; border:2px solid #ffffff90; color:#fff; padding:0; box-shadow:0 5px 16px #0009; touch-action:none; user-select:none; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
#actions button:active{ transform:scale(.93); filter:brightness(1.2); }
#btn-attack{ right:0; bottom:0; width:80px; height:80px; font-size:34px; background:#c0392be6; }
#btn-block{ right:92px; bottom:4px; width:56px; height:56px; font-size:24px; background:#2c6fbbe6; }
#btn-dodge{ right:4px; bottom:92px; width:56px; height:56px; font-size:24px; background:#27ae60e6; }
#btn-jump{ right:68px; bottom:148px; width:56px; height:56px; font-size:24px; background:#8e44adE6; }
#btn-ctx{ right:134px; bottom:80px; width:50px; height:50px; font-size:22px; background:#d35400e6; display:none; }   /* akcja kontekstowa: widoczna tylko, gdy coś można zrobić */
#btn-sprint{ right:134px; bottom:136px; width:50px; height:50px; font-size:22px; background:#34495ee6; }
#btn-sprint.on{ background:#27ae60e6; border-color:#fff; }
#interact-btn{ right:70px; bottom:70px; width:58px; height:58px; font-size:20px; font-weight:800; background:#f39c12ee; display:none; }

#block-ind{ position:fixed; left:50%; bottom:calc(70px + var(--sa-b)); transform:translateX(-50%); z-index:22; display:none; background:#2c6fbbdd; color:#fff; padding:5px 12px; border-radius:12px; font-weight:700; font-size:13px; }

/* Minimapa i lista graczy */
#minimap{ position:fixed; top:calc(8px + var(--sa-t)); right:calc(8px + var(--sa-r)); width:clamp(96px,27vw,190px); height:auto; aspect-ratio:1; border:2px solid #ffffffaa; border-radius:12px; background:rgba(0,0,0,.5); z-index:5; }
#online-panel{ position:fixed; top:calc(clamp(96px,27vw,190px) + 16px + var(--sa-t)); right:calc(8px + var(--sa-r)); z-index:5; color:#fff; font-size:11px; background:var(--glass); border-radius:9px; padding:4px 9px; max-width:150px; pointer-events:none; }
#online-panel b{ color:#9fd4ff; } #online-list{ margin:2px 0 0; padding:0; list-style:none; }

/* Sterowanie dotykowe */
#touch-left,#touch-right{ position:fixed; top:0; bottom:0; width:50%; z-index:10; }
#touch-left{ left:0; } #touch-right{ right:0; }
#joystick-base{ position:fixed; width:100px; height:100px; border-radius:50%; border:2px solid #ffffff55; background:#ffffff11; display:none; z-index:12; pointer-events:none; }
#joystick-knob{ position:fixed; width:44px; height:44px; border-radius:50%; background:#ffffff55; display:none; z-index:13; pointer-events:none; }
#crosshair{ position:fixed; top:50%; left:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff8; z-index:4; pointer-events:none; }
#game-toast{ position:fixed; left:50%; top:24%; transform:translateX(-50%); z-index:45; background:#10141de8; color:#fff; padding:10px 14px; border-radius:10px; border:1px solid #ffffff33; font-size:13px; pointer-events:none; max-width:86vw; text-align:center; }

/* Komputer z myszą: bez przycisków dotykowych, czat dokowany, więcej miejsca */
@media (hover:hover) and (pointer:fine){
  #interaction-prompt{ left:50%; bottom:24px; transform:translateX(-50%); max-width:none; }
  #chat-ticker{ display:none; }
  #actions{ display:none; }
  #interact-btn{ display:none !important; }
  #minimap{ width:190px; }
  #online-panel{ top:206px; }
}
/* Niska, szeroka orientacja (telefon poziomo) */
@media (max-height:480px){
  #status-panel{ width:170px; padding:5px 8px 3px; top:calc(54px + var(--sa-t)); }
  .stat{ margin-bottom:2px; } .bar{ height:11px; } .bar>b{ line-height:11px; font-size:8px; }
  #quest-tracker{ display:none; }
  #actions{ width:160px; height:160px; } #btn-attack{ width:70px; height:70px; font-size:30px; }
  #btn-block{ right:80px; width:50px; height:50px; } #btn-dodge{ bottom:80px; width:50px; height:50px; } #btn-jump{ right:62px; bottom:132px; width:50px; height:50px; }
  #btn-ctx{ right:124px; bottom:72px; width:46px; height:46px; font-size:20px; }
  #btn-sprint{ right:124px; bottom:124px; width:46px; height:46px; font-size:20px; }
  #interact-btn{ right:62px; bottom:62px; width:50px; height:50px; }
  #minimap{ width:96px; } #online-panel{ top:112px; }
}

/* powiększona minimapa (klik) + osłona zamykająca po kliknięciu poza obrysem */
#minimap{ cursor:zoom-in; transition:width .18s ease; z-index:15; }
#minimap.big{ width:min(88vw,420px,88vh); cursor:default; z-index:30; box-shadow:0 8px 40px #000a; }
#minimap-scrim{ display:none; position:fixed; inset:0; z-index:29; background:#0006; }
#minimap-scrim.on{ display:block; }

/* GM: sterowanie lotem na dotyku (🕊️ lot, ▲ wznoś, ▼ opadaj) */
#fly-ctl{ display:none; position:fixed; right:calc(10px + var(--sa-r)); bottom:calc(250px + var(--sa-b,0px)); z-index:12; flex-direction:column; gap:8px; touch-action:none; }
body.is-gm #fly-ctl{ display:flex; }
#fly-ctl button{ width:52px; height:52px; border-radius:16px; border:1px solid #ffffff40; background:var(--glass,#10151fcc); color:#fff; font-size:22px; padding:0; touch-action:none; user-select:none; }
#fly-ctl #fly-toggle.on{ background:#2f6fed; }
#fly-ctl #fly-up,#fly-ctl #fly-down{ display:none; }
body.is-flying #fly-ctl #fly-up,body.is-flying #fly-ctl #fly-down{ display:block; }
#fly-ctl button:active{ transform:scale(.94); background:#2f6fed; }
@media (max-height:480px){ #fly-ctl{ bottom:calc(176px + var(--sa-b,0px)); flex-direction:row-reverse; } #fly-ctl button{ width:46px; height:46px; } }
@media (hover:hover) and (pointer:fine){ #fly-ctl{ display:none !important; } }

/* wachlarz komend </> */
#toolbar #cmd-btn{ font:700 13px ui-monospace,monospace; color:#9fd0ff; letter-spacing:-1px; }
#toolbar #cmd-btn.on{ background:#2f6fed55; }
#cmd-fan{ display:none; position:fixed; top:calc(60px + var(--sa-t)); left:calc(8px + var(--sa-l)); z-index:40; gap:6px; align-items:flex-start; max-width:calc(100vw - 16px); }
#cmd-fan.on{ display:flex; }
#cmd-fan .col{ width:210px; flex:0 0 auto; max-height:calc(100vh - 80px - var(--sa-t)); overflow:auto; background:var(--glass,#10151fcc); backdrop-filter:blur(10px); border:1px solid #ffffff30; border-radius:14px; padding:6px; box-shadow:0 8px 30px #0008; animation:fan-in .14s ease-out; }
@keyframes fan-in{ from{ opacity:0; transform:translateX(-10px) scale(.97); } to{ opacity:1; transform:none; } }
#cmd-fan .sec{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; padding:6px 8px 2px; color:#fff; }
#cmd-fan .row{ display:flex; align-items:baseline; gap:6px; width:100%; min-height:40px; padding:6px 9px; border:0; border-radius:10px; background:transparent; color:#fff; font:600 14px ui-monospace,monospace; text-align:left; cursor:pointer; }
#cmd-fan .row small{ flex:1; font:400 11px system-ui; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cmd-fan .row i{ font-style:normal; opacity:.6; margin-left:auto; }
#cmd-fan .row:hover,#cmd-fan .row:focus-visible{ background:#ffffff1c; outline:none; }
#cmd-fan .row.sel{ background:#2f6fed66; }
#cmd-fan .row.gm{ color:#9fd0ff; }
#cmd-fan .row.go{ color:#8ff0a4; border-bottom:1px solid #ffffff1c; border-radius:10px 10px 0 0; margin-bottom:4px; }
#cmd-fan .row.back{ display:none; opacity:.85; }
#cmd-fan .chips{ display:flex; flex-wrap:wrap; gap:4px; padding:6px 4px 2px; }
#cmd-fan .chips button{ min-width:40px; min-height:34px; border-radius:9px; border:1px solid #ffffff30; background:#ffffff14; color:#fff; font:600 13px system-ui; }
#cmd-fan .free{ display:flex; gap:4px; padding:6px 2px 2px; }
#cmd-fan .free input{ flex:1; min-width:0; min-height:38px; border-radius:9px; border:1px solid #ffffff30; background:#0008; color:#fff; padding:0 9px; font-size:16px; }
#cmd-fan .free button{ min-height:38px; padding:0 12px; border-radius:9px; border:0; background:#2f6fed; color:#fff; font-weight:700; }
@media (max-width:700px){   /* wąski ekran: jedna kolumna naraz, wiersz „wstecz” zamiast kolumn obok siebie */
  #cmd-fan .col:not(:last-child){ display:none; }
  #cmd-fan .col{ width:min(300px,calc(100vw - 16px)); }
  #cmd-fan .row.back{ display:flex; }
}

/* celownik przy zablokowanym kursorze (U5) */
#crosshair{ display:none; position:fixed; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; box-shadow:0 0 0 1.5px #000a; z-index:9; pointer-events:none; opacity:.85; }
body.ptr-locked #crosshair{ display:block; }

/* U1/U6: niskie HP, znacznik trafienia */
#lowhp-fx{ position:fixed; inset:0; z-index:10; pointer-events:none; opacity:0; box-shadow:inset 0 0 90px 24px #b00000; transition:opacity .4s; }
body.low-hp #lowhp-fx{ opacity:.55; animation:lowhp 1.1s ease-in-out infinite; }
@keyframes lowhp{ 0%,100%{ opacity:.25; } 50%{ opacity:.7; } }
@media (prefers-reduced-motion: reduce){ body.low-hp #lowhp-fx{ animation:none; opacity:.45; } }
#hitmarker{ position:fixed; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; z-index:12; pointer-events:none; opacity:0; }
#hitmarker i{ position:absolute; left:50%; top:50%; width:3px; height:100%; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px #000a; transform:translateY(-50%) rotate(45deg); }
#hitmarker i + i{ transform:translateY(-50%) rotate(-45deg); }
#hitmarker.crit i{ background:#ffd23f; }
#hitmarker.on{ animation:hitm .22s ease-out; }
@keyframes hitm{ 0%{ opacity:1; transform:scale(.7); } 100%{ opacity:0; transform:scale(1.25); } }

/* nakładka techniczna (F3) */
#devhud{ box-sizing:border-box; position:fixed; left:8px; bottom:8px; z-index:14; font:11px/1.35 ui-monospace,Consolas,monospace; color:#e8eef7; background:rgba(8,10,18,.68); border:1px solid #ffffff22; border-radius:8px; padding:4px 8px; pointer-events:none; max-width:min(460px,calc(100vw - 16px)); }
#devhud[data-mode="off"]{ display:none; }
/* środek górnej krawędzi: tam nie ma przycisków, paska HUD ani minimapy (ani na telefonie, ani na desktopie) */
#devhud[data-mode="mini"]{ left:200px; top:8px; bottom:auto; right:auto; white-space:nowrap; }   /* left/width ustawia devhud.js: wolne miejsce między paskiem przycisków a minimapą */
#devhud[data-mode="full"]{ left:200px; top:8px; bottom:auto; right:auto; width:min(430px,calc(100vw - 16px)); max-height:62vh; overflow:hidden; }
#devhud .v{ color:#7fd0ff; font-weight:700; } #devhud .ok{ color:#7dff9a; } #devhud .mid{ color:#ffd65a; } #devhud .bad{ color:#ff7a7a; } #devhud .dim{ opacity:.55; }
#devhud .r{ margin:4px 0; } #devhud .log{ border-top:1px solid #ffffff1f; padding-top:3px; max-height:220px; overflow:hidden; } #devhud .l{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #devhud .l i{ opacity:.5; font-style:normal; }
#devhud .l.in{ color:#9fd8ff; } #devhud .l.out{ color:#c8ffb0; } #devhud .l.err{ color:#ff8a8a; } #devhud .l.sys{ color:#ffd65a; }
#devhud .b{ margin-top:4px; pointer-events:auto; } #devhud button{ font:inherit; background:#2b5d8f; color:#fff; border:0; border-radius:5px; padding:1px 6px; margin-right:4px; cursor:pointer; }
@media (max-width:900px),(max-height:520px){ #devhud[data-mode="full"]{ max-height:42vh; font-size:10px; } #devhud .log{ max-height:90px; } }

/* v12: pasek pracy i ekran śmierci */
#work-bar{ position:fixed; left:50%; bottom:calc(120px + var(--sa-b,0px)); transform:translateX(-50%); z-index:21; display:none; min-width:200px; padding:8px 12px; border-radius:12px; background:var(--glass); border:1px solid #ffffff30; color:#fff; font:600 13px system-ui; text-align:center; box-sizing:border-box; }
#work-bar.on{ display:block; }
#work-bar div{ margin-top:6px; height:8px; border-radius:4px; background:#0007; overflow:hidden; }
#work-bar i{ display:block; height:100%; width:0; background:#e0b341; }
#death{ position:fixed; inset:0; z-index:60; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:radial-gradient(#3a000088,#000000cc); color:#fff; font:600 18px system-ui; text-align:center; }
#death.on{ display:flex; } #death b{ font-size:56px; } #death-count{ opacity:.85; font-size:15px; }

/* v12.2: sprint z joysticka (pełne wychylenie) */
#joystick-knob.sprint{ background:#ffcc33cc; box-shadow:0 0 14px #ffcc33; } #joystick-base.sprint{ border-color:#ffcc33aa; }
/* tryb boga GM */
body.god #status-panel{ box-shadow:0 0 0 2px #ffd54a99; }

/* v12.3: zmysł drapieżnika GM */
#predator{ position:fixed; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; display:none; }
#sense-btn{ display:none; } body.is-gm #sense-btn{ display:inline-block; } body.sense-on #sense-btn{ box-shadow:0 0 0 2px #ff2b2b; }
.hud-coords{ color:#9fd4ff; font-variant-numeric:tabular-nums; }

/* v12.3: pasek 1-9 (komputer) i ukrywanie interfejsu (H) */
#hotbar{ display:none; position:fixed; left:50%; bottom:8px; transform:translateX(-50%); gap:4px; z-index:6; }
#hotbar button{ position:relative; width:40px; height:40px; padding:0; font-size:20px; color:#fff; background:#10151fcc; border:1px solid #ffffff40; border-radius:8px; cursor:pointer; }
#hotbar button.on{ border-color:#ffd65a; } #hotbar button.empty{ opacity:.4; }
#hotbar i{ position:absolute; left:3px; top:0; font:600 10px system-ui,sans-serif; opacity:.7; }
#hotbar b{ position:absolute; right:3px; bottom:0; font:700 10px system-ui,sans-serif; }
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  #hotbar{ display:flex; }
  #interaction-prompt{ bottom:60px; } #hint{ bottom:56px; }
}
body.hide-ui #toolbar, body.hide-ui #status-panel, body.hide-ui #quest-tracker, body.hide-ui #minimap, body.hide-ui #online-panel, body.hide-ui #hud, body.hide-ui #hotbar, body.hide-ui #chat-panel, body.hide-ui #crosshair{ visibility:hidden; }

/* v12.3a: wybór pod klawiszem G */
#picker{ display:none; position:fixed; left:50%; bottom:calc(58px + var(--sa-b)); transform:translateX(-50%); z-index:24; text-align:center; color:#fff; pointer-events:none; }
#picker.on{ display:block; }
#picker div{ display:flex; gap:6px; justify-content:center; }
#picker span{ padding:7px 12px; border-radius:10px; background:#10151fdd; border:2px solid #ffffff30; font-size:14px; white-space:nowrap; opacity:.75; }
#picker span.sel{ border-color:#ffd65a; opacity:1; box-shadow:0 0 12px #ffd65a66; }
#picker small{ display:block; margin-top:5px; font-size:11px; text-shadow:0 1px 3px #000; }
/* v15.1f: powiadomienia gry (ui/notify.js) */
#notify-stack{ position:fixed; left:50%; top:calc(70px + var(--sa-t)); transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; width:min(420px,88vw); }
.nt{ display:flex; align-items:center; gap:9px; padding:8px 13px; border-radius:11px; background:#10141df0; color:#fff; font-size:13px; line-height:1.3; border:1px solid #ffffff22; border-left:4px solid #9aa4b8; box-shadow:0 6px 18px #0007; opacity:0; transform:translateY(-8px) scale(.98); transition:opacity .25s, transform .25s; max-width:100%; }
.nt.in{ opacity:1; transform:none; }
.nt.out{ opacity:0; transform:translateY(-6px); }
.nt-ic{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:#ffffff1a; }
.nt-tx{ flex:1; }
.nt-n{ flex:none; font-size:11px; opacity:.7; }
.nt-ok{ border-left-color:#3ccf6e; } .nt-ok .nt-ic{ background:#3ccf6e; color:#06210f; }
.nt-fail{ border-left-color:#ff4d4d; } .nt-fail .nt-ic{ background:#ff4d4d; color:#2a0505; }
.nt-warn{ border-left-color:#ffb02e; } .nt-warn .nt-ic{ background:#ffb02e; color:#2a1a00; }
.nt-loot{ border-left-color:#ffd23f; } .nt-loot .nt-ic{ background:#ffd23f33; }
.nt-quest{ border-left-color:#b48cff; } .nt-quest .nt-ic{ background:#b48cff33; }
@media (max-height:430px){ #notify-stack{ top:calc(46px + var(--sa-t)); } .nt{ font-size:12px; padding:6px 10px; } }
/* v15.1f: tracker zadań, dziennik, karta postaci */
#quest-tracker .qt-on{ border:1px solid #ffd23f66; }
#quest-tracker .qt-ready b{ color:#7dffa0; }
#quest-tracker .qt-where{ color:#cfe3ff; }
#quest-tracker .qt-hint{ opacity:.55; padding-left:4px; }
#journal-panel, #char-panel{ width:min(560px,94vw); max-height:88vh; overflow:auto; box-sizing:border-box; }
.jr-q{ background:#ffffff0d; border:1px solid #ffffff1a; border-radius:10px; padding:8px 10px; margin:6px 0; }
.jr-q.on{ border-color:#ffd23f88; }
.jr-q.ready .jr-obj{ color:#7dffa0; }
.jr-h{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.jr-h button{ font-size:12px; padding:3px 8px; }
.jr-obj{ margin:4px 0; font-weight:600; }
.jr-obj small{ font-weight:400; opacity:.8; }
.jr-q p{ margin:4px 0; opacity:.85; font-size:13px; font-style:italic; }
.jr-q > small{ opacity:.7; }
.jr-bar{ position:relative; height:12px; background:#0006; border-radius:6px; overflow:hidden; margin:4px 0; }
.jr-bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#b48cff,#ffd23f); }
.jr-bar span{ position:relative; font-size:10px; padding-left:6px; }
.jr-done{ opacity:.75; font-size:13px; padding:2px 0; }
#char-top{ display:flex; gap:12px; align-items:stretch; }
#char-canvas{ width:170px; height:230px; flex:none; border-radius:12px; background:radial-gradient(circle at 50% 40%,#3a4a66,#151b28); touch-action:none; cursor:grab; }
#char-info{ flex:1; min-width:0; }
#char-info h2{ margin:2px 0; }
.ch-sub{ opacity:.75; font-size:13px; margin-bottom:8px; }
.ch-bar{ position:relative; height:18px; background:#0007; border-radius:9px; overflow:hidden; margin:5px 0; font-size:11px; }
.ch-bar i{ position:absolute; inset:0 auto 0 0; }
.ch-bar span, .ch-bar b{ position:relative; line-height:18px; padding:0 8px; }
.ch-bar b{ float:right; }
.ch-bar.hp i{ background:#d33a3a; } .ch-bar.st i{ background:#e0a32e; } .ch-bar.hu i{ background:#5aa84a; } .ch-bar.xp i{ background:#7a5cff; }
.ch-slot{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:9px; background:#ffffff0d; margin:4px 0; }
.ch-slot.empty{ opacity:.6; }
.ch-slot .ic{ font-size:22px; }
.ch-slot .nm{ flex:1; } .ch-slot small{ display:block; opacity:.7; }
.ch-attr{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px; }
.ch-attr small{ display:block; opacity:.65; font-size:11px; }
.ch-attr button{ width:32px; height:32px; border-radius:50%; font-weight:700; }
.ch-pts{ color:#ffd23f; }
.ch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ch-grid span{ background:#ffffff0d; border-radius:8px; padding:5px; font-size:11px; text-align:center; opacity:.9; }
.ch-grid b{ display:block; font-size:16px; }
.ch-skill{ position:relative; display:flex; justify-content:space-between; padding:4px 8px; border-radius:7px; background:#ffffff0a; margin:3px 0; overflow:hidden; font-size:13px; }
.ch-skill i{ position:absolute; left:0; bottom:0; height:3px; background:#7a5cff; }
.ch-bagbtn{ margin-top:10px; width:100%; }
@media (max-height:500px){ #char-canvas{ width:120px; height:160px; } #char-panel, #journal-panel{ max-height:96vh; padding:12px 14px; } }
@media (max-width:480px){ #char-top{ flex-direction:column; align-items:center; } #char-canvas{ width:150px; height:190px; } #char-info{ width:100%; } .ch-grid{ grid-template-columns:repeat(2,1fr); } }
/* v15.3: we wnętrzu nie pokazujemy mapy świata (pokój jest osobną instancją) */
body.inside #minimap{ visibility:hidden; }
/* v15.2a: mapa świata */
#worldmap-panel{ width:min(760px,96vw); max-height:94vh; overflow:auto; box-sizing:border-box; padding:12px 14px; }
#worldmap-canvas{ width:100%; height:auto; border-radius:10px; display:block; background:#0b2a4a; }
/* v15.2b: port i rejs */
#port-panel{ width:min(520px,94vw); max-height:90vh; overflow:auto; box-sizing:border-box; }
.port-say{ font-style:italic; opacity:.85; margin:0 0 10px; }
.port-row{ display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px; margin:6px 0; border-radius:10px; background:#ffffff0d; border:1px solid #ffffff1a; }
.port-row.off{ opacity:.6; }
.port-dest{ flex:1; min-width:0; }
.port-why{ color:#ff9a8a; font-size:12px; margin-top:4px; }
.port-buy{ text-align:right; font-size:13px; white-space:nowrap; }
.panel .port-buy button{ width:auto; display:inline-block; padding:8px 14px; margin:6px 0 0; }
#voyage-overlay{ background:linear-gradient(#0b2a4a,#123d63 60%,#0a2238); z-index:45; }
#voyage-panel{ width:min(560px,92vw); color:#fff; text-align:center; }
#voyage-panel h2{ color:#ffd65a; margin:0 0 4px; }
#voyage-sea{ position:relative; height:64px; margin:18px 0 8px; border-bottom:2px dashed #ffffff44; }
#voyage-ship{ position:absolute; bottom:4px; left:0; font-size:40px; transition:left .25s linear; animation:voyage-bob 2.4s ease-in-out infinite; }
@keyframes voyage-bob{ 50%{ transform:translateY(-5px) rotate(-3deg); } }
#voyage-track{ height:6px; border-radius:4px; background:#ffffff22; overflow:hidden; }
#voyage-bar{ height:100%; width:0; background:#ffd65a; transition:width .25s linear; }
#voyage-line{ min-height:3em; margin-top:16px; font-size:16px; line-height:1.5; font-style:italic; }
/* v15.2b: duch GM — znacznik; lot GM na telefonie poziomo nie nachodzi na przyciski akcji; sprint = mocne wychylenie joysticka */
body.is-ghost::after{ content:"👻 DUCH"; position:fixed; top:calc(8px + var(--sa-t)); left:50%; transform:translateX(-50%); z-index:30; padding:3px 10px; border-radius:10px; background:#6b4bd8cc; color:#fff; font:600 12px system-ui; pointer-events:none; }
@media (max-height:480px){ #fly-ctl{ right:calc(196px + var(--sa-r)); bottom:calc(12px + var(--sa-b,0px)); } }
#btn-sprint{ display:none !important; }