/* =====================================================================
   EDYTOR POSTACI (js/ui/CharacterCreatorUI.js) i WYBÓR POSTACI (js/ui/ProfilesUI.js)
   – pełny ekran nad menu głównym, styl okien schronu / ustawień.
   ===================================================================== */
#creatorUI, #profilesUI{ position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.78); padding:10px; font-family:var(--st-font); color:#d8ccb4; }
#creatorUI.open, #profilesUI.open{ display:flex; }
.cc-panel{ width:min(980px,97vw); max-height:96vh; display:flex; flex-direction:column; background:linear-gradient(#1c1916,#100e0c); border:2px solid #4a4036; box-shadow:0 0 0 2px #000,0 24px 70px #000; position:relative; zoom:var(--ui-scale); }
.cc-panel::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:repeating-linear-gradient(135deg,#b8961e 0 8px,#1c1c1a 8px 16px); }
.cc-head{ flex-shrink:0; display:flex; align-items:baseline; gap:16px; padding:16px 18px 8px; flex-wrap:wrap; }
.cc-head h2{ margin:0; font-size:18px; letter-spacing:4px; color:#e8dcc0; text-shadow:0 2px 0 #000; font-weight:600; }
.cc-head small{ color:#8a8070; font-size:11px; }
.cc-main{ display:flex; gap:14px; padding:6px 18px; min-height:0; flex:1; overflow:hidden; }
.cc-left{ flex:0 0 38%; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cc-model{ position:relative; flex:1; min-height:300px; background:radial-gradient(ellipse at 50% 80%,#3a2f22 0,#14110e 70%); border:1px solid #3a322a; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cc-model .cp3-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.cc-model .cp3-canvas{ height:100%; max-width:100%; object-fit:contain; image-rendering:pixelated; }
.cc-rot{ position:absolute; top:6px; left:0; right:0; text-align:center; color:#6a6050; font-size:10px; pointer-events:none; }
.cc-right{ flex:1; min-width:0; overflow:auto; padding-right:4px; }
.cc-name{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.cc-name span, .cc-label{ font-size:11px; letter-spacing:2px; color:#b8a888; }
.cc-label em{ font-style:normal; color:#ffe0a0; letter-spacing:0; margin-left:6px; }
.cc-name input{ background:#0d0b09; border:1px solid #5a4c3c; color:#ffe8c0; font:15px var(--st-font); padding:8px 10px; letter-spacing:1px; outline:none; }
.cc-name input:focus{ border-color:#e8c060; }
.cc-row{ padding:8px 0; border-bottom:1px dashed #2e2822; }
.cc-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.cc-style{ background:#15120f; border:1px solid #3a322a; color:#a89a80; font:11px var(--st-font); padding:6px 9px; cursor:pointer; }
.cc-style:hover{ border-color:#8a7450; color:#e0d0b0; }
.cc-style.on{ background:#2a241c; border-color:#e8c060; color:#ffe0a0; box-shadow:inset 0 0 0 1px #e8c06044; }
.cc-sw{ padding:2px; background:#0d0b09; border:1px solid #3a322a; cursor:pointer; line-height:0; }
.cc-sw.on{ border-color:#e8c060; box-shadow:0 0 0 1px #e8c060; }
.cc-sw canvas{ width:30px; height:30px; image-rendering:pixelated; }
.cc-foot{ flex-shrink:0; display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; border-top:1px solid #3a322a; }
.cc-foot .cc-back, .cc-foot .pf-del{ margin-right:auto; }
.cc-btn{ background:linear-gradient(#3a332c,#241f1a); border:1px solid #6a5a48; color:#d8ccb4; padding:10px 16px; font:12px var(--st-font); letter-spacing:2px; cursor:pointer; }
.cc-btn:hover:not(:disabled){ border-color:#b89a5a; color:#fff0d0; }
.cc-btn:disabled{ opacity:.4; cursor:default; }
.cc-btn.cc-go{ background:linear-gradient(#8a6a24,#5a4416); border-color:#e8c060; color:#fff3d0; }
.cc-btn.danger{ border-color:#b8231c; color:#ffb0a0; background:linear-gradient(#4a1814,#2a0c0a); }
.cc-helm{ font-size:11px; letter-spacing:1px; }

/* wybór postaci */
.pf-panel{ width:min(860px,97vw); }
.pf-x{ margin-left:auto; background:none; border:1px solid #4a4036; color:#d8ccb4; width:32px; height:32px; cursor:pointer; }
.pf-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; padding:8px 18px; overflow:auto; min-height:160px; }
.pf-card{ display:flex; gap:10px; align-items:stretch; text-align:left; background:#15120f; border:1px solid #3a322a; color:inherit; font:inherit; padding:8px; cursor:pointer; }
.pf-card:hover{ border-color:#8a7450; }
.pf-card.on{ border-color:#e8c060; background:#221d16; box-shadow:inset 0 0 0 1px #e8c06055; }
.pf-thumb{ flex:0 0 76px; height:110px; background:radial-gradient(ellipse at 50% 85%,#3a2f22 0,#0d0b09 75%); border:1px solid #2e2822; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.pf-thumb img{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.pf-thumb i{ align-self:center; color:#5a5040; font-style:normal; font-size:28px; }
.pf-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pf-info b{ font-size:15px; color:#ffe8c0; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-info small{ font-size:11px; color:#9a8e78; }
.pf-info .pf-raid{ color:#e8a060; }
.pf-info em{ margin-top:auto; font-style:normal; font-size:10px; letter-spacing:2px; color:#b8961e; }
.pf-confirm{ margin:6px 18px; padding:12px 14px; border:1px solid #b8231c; background:#2a0c0a; }
.pf-confirm b{ color:#ffb0a0; letter-spacing:2px; font-size:13px; }
.pf-confirm p{ margin:8px 0 10px; font-size:12px; line-height:1.45; color:#f0d0c0; }
.pf-confirm div{ display:flex; gap:8px; justify-content:flex-end; }

/* zbrojownia: klasa ochrony NIJ w opisie przedmiotu */
.lo-armor{ display:flex; flex-direction:column; gap:2px; }
.lo-nij{ color:#ffe0a0; font-size:12px; letter-spacing:1px; }

@media (max-width:720px), (max-height:520px){
  .cc-main{ flex-direction:column; overflow:auto; }
  .cc-left{ flex:0 0 auto; }
  .cc-model{ min-height:220px; }
}