/* Tryb BUDUJ — „Mój Port” */
.port-overlay{position:fixed;inset:0;z-index:9000;display:none;justify-content:center;align-items:flex-start;overflow-y:auto;padding:24px 16px;background:rgba(5,12,28,.72);backdrop-filter:blur(3px)}
.port-box{width:100%;max-width:820px;background:var(--card,#16213a);color:var(--text,#eef);border:1px solid var(--border,#2a3a5c);border-radius:22px;padding:20px;box-shadow:0 24px 60px -20px #000;font-family:var(--font-head,inherit)}
.port-loading{text-align:center;padding:60px 10px;color:var(--text2,#aab)}
.port-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.port-head h2{margin:0;font-size:26px}
.port-head p{margin:4px 0 0;color:var(--text2,#aab);font-size:14px}
.port-x{border:0;background:var(--bg3,#22304d);color:var(--text,#eef);width:38px;height:38px;border-radius:50%;font-size:18px;cursor:pointer;flex-shrink:0}
.port-res{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.port-res-chip{background:var(--bg3,#22304d);border-radius:14px;padding:8px 6px;text-align:center;line-height:1.15}
.port-res-chip span{font-size:20px;display:block}
.port-res-chip b{font-size:18px;display:block}
.port-res-chip small{font-size:11px;color:var(--text3,#889)}
.port-hint{font-size:12.5px;color:var(--text3,#889);margin:8px 2px 12px;line-height:1.5}

/* Scena: ocean + wyspa z kafli + pomost + łódź */
.port-scene{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 40%,#5fb3e6 0%,#3d8fd0 55%,#2b6fb0 100%)}
.port-scene::before{content:'';position:absolute;inset:0;opacity:.25;
  background:repeating-radial-gradient(circle at 70% 60%,transparent 0 18px,rgba(255,255,255,.35) 19px 20px,transparent 21px 46px);animation:port-waves 9s linear infinite}
@keyframes port-waves{to{background-position:40px 20px}}
.port-island{position:absolute;left:6%;top:7%;width:47%;aspect-ratio:1}
.port-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.port-tiles>img{width:100%;height:100%;display:block}
.port-deco{position:absolute;width:20%;pointer-events:none}
.port-deco-s{width:14%}
.port-wreck{left:86%;top:76%;width:9%;opacity:.9}
.port-pier{position:absolute;left:52%;top:50%;width:10%;image-rendering:auto}
.port-pier2{left:61%}
.port-dock{position:absolute;left:69%;top:47%;transition:transform 1.2s ease,opacity 1.2s}
.port-dock.port-away{transform:translateX(140%);opacity:0}
.port-away-note{position:absolute;right:4%;top:46%;background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;border-radius:10px;font-size:13px}
.port-bld{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid rgba(80,50,20,.55);background:rgba(255,244,214,.92);color:#4a2f10;border-radius:12px;padding:4px 7px;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 0 rgba(80,50,20,.35);font-family:inherit}
.port-bld small{font-size:10.5px;font-weight:700;white-space:nowrap}
.port-bld-empty{background:rgba(255,244,214,.55);border-style:dashed;box-shadow:none}
.port-bld-empty .port-empty{opacity:.65}
.port-bld:hover{transform:translate(-50%,-55%)}
.port-pet-wrap{position:absolute;width:19%;transform:translate(-50%,-50%)}
/* Obrazki Majtka mają zwykle pełne tło — pokazujemy je w okrągłym medalionie */
.port-pet{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:50%;border:3px solid #fff4d6;box-shadow:0 5px 0 rgba(80,50,20,.35);background:#fff4d6;animation:port-bob 3s ease-in-out infinite}
@keyframes port-bob{50%{transform:translateY(-6%)}}
.port-bubble{position:absolute;left:3%;top:3%;max-width:44%;background:#fff;color:#222;font-size:13px;line-height:1.35;padding:8px 11px;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.25);font-family:inherit}
.port-bubble:empty{display:none}
.port-pop{animation:port-pop .35s ease}
@keyframes port-pop{from{transform:scale(.85);opacity:.3}}

/* Łódź (warstwy sprite'ów) */
.port-ship{position:relative;display:inline-block}
.port-ship-inner{position:absolute;left:50%;top:50%;width:66px;height:120px;transform-origin:center}
.port-ship-inner img{position:absolute;display:block}
.port-dock .port-ship{animation:port-rock 4s ease-in-out infinite}
@keyframes port-rock{50%{transform:translateY(3px) rotate(.6deg)}}

/* Zakładki + karty */
.port-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.port-tabs button{border:1px solid var(--border,#2a3a5c);background:var(--bg3,#22304d);color:var(--text,#eef);border-radius:999px;padding:7px 13px;font:inherit;font-size:14px;cursor:pointer;position:relative}
.port-tabs button.on{background:var(--accent,#3b82f6);border-color:var(--accent,#3b82f6);color:#fff}
.port-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;vertical-align:middle}
.port-body{display:grid;gap:10px}
.port-card{background:var(--bg3,#22304d);border-radius:16px;padding:14px 16px}
.port-card-hl{box-shadow:0 0 0 2px #f59e0b}
.port-card h3{margin:0 0 6px;font-size:18px}
.port-card p{margin:4px 0;font-size:14px;line-height:1.5;color:var(--text2,#ccd)}
.port-card-head{display:flex;gap:12px;align-items:flex-start}
.port-card-emoji{font-size:30px;line-height:1}
.port-lvl{color:#f59e0b;font-size:14px;letter-spacing:1px}
.port-lvl-off{color:var(--text3,#667);opacity:.5}
.port-eff{font-size:13px!important;color:var(--text3,#99a)!important}
.port-costs{margin:10px 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.port-cost{background:rgba(255,255,255,.07);border-radius:8px;padding:3px 8px;font-size:14px}
.port-cost-miss{color:#fca5a5;background:rgba(239,68,68,.12)}
.port-btn{border:0;background:var(--accent,#3b82f6);color:#fff;font:inherit;font-weight:700;font-size:15px;border-radius:12px;padding:9px 16px;cursor:pointer}
.port-btn:disabled{opacity:.45;cursor:not-allowed}
.port-btn-ghost{background:transparent;border:1px solid var(--border,#2a3a5c);color:var(--text,#eef)}
.port-done,.port-lock{display:inline-block;margin-top:8px;font-size:14px;color:var(--text2,#ccd)}
.port-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.port-field{display:block;margin:10px 0;font-size:14px;color:var(--text2,#ccd)}
.port-field select,.port-market select,.port-market input{display:block;margin-top:4px;width:100%;max-width:100%;padding:8px;border-radius:10px;border:1px solid var(--border,#2a3a5c);background:var(--card,#16213a);color:var(--text,#eef);font:inherit;font-size:14px}
.port-market input{width:70px;display:inline-block}
.port-market select{display:inline-block;width:auto}
.port-chip{border:1px solid var(--border,#2a3a5c);background:var(--card,#16213a);color:var(--text,#eef);border-radius:10px;padding:7px 14px;font:inherit;cursor:pointer}
.port-chip.on{background:var(--accent,#3b82f6);color:#fff;border-color:var(--accent,#3b82f6)}
.port-chip:disabled{opacity:.45;cursor:not-allowed}
.port-crew-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:6px}
.port-crew{display:flex;align-items:center;gap:6px;background:var(--card,#16213a);border:1px solid var(--border,#2a3a5c);border-radius:10px;padding:7px 9px;cursor:pointer;font-size:14px;color:var(--text,#eef)}
.port-crew.on{border-color:var(--accent,#3b82f6);box-shadow:0 0 0 1px var(--accent,#3b82f6)}
.port-crew.off{opacity:.5;cursor:not-allowed}
.port-crew small{color:var(--text3,#889)}
.port-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0}
.port-progress div{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.port-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:8px}
.port-color{border:1px solid var(--border,#2a3a5c);background:var(--card,#16213a);color:var(--text,#eef);border-radius:12px;padding:8px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:3px}
.port-color img{width:44px}
.port-color small{color:var(--text3,#889);font-size:12px}
.port-color.on{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b}
.port-visit{grid-template-columns:repeat(3,1fr);margin-top:12px}
.port-stat{background:var(--bg3,#22304d);border-radius:12px;padding:10px;font-size:14px;text-align:center}
.port-stat b{display:block;color:#f59e0b;margin-top:2px}

/* „+1 🪵” po zadaniu — dyskretnie, bez zasłaniania karty */
.port-gain{position:fixed;left:16px;bottom:16px;z-index:8000;background:rgba(20,30,50,.85);color:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:15px;opacity:0;pointer-events:none;transform:translateY(10px)}
.port-gain.show{animation:port-gain 1.6s ease forwards}
@keyframes port-gain{15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-14px)}}

/* Kotwica przy nicku w rankingu */
.lb-port{border:0;background:none;cursor:pointer;font-size:13px;padding:0 3px;opacity:.65}
.lb-port:hover{opacity:1}

@media(max-width:600px){
  .port-box{padding:14px;border-radius:18px}
  .port-head h2{font-size:21px}
  .port-res{grid-template-columns:repeat(5,1fr);gap:5px}
  .port-res-chip{padding:6px 2px}.port-res-chip span{font-size:16px}.port-res-chip b{font-size:15px}.port-res-chip small{font-size:9.5px}
  .port-scene{aspect-ratio:4/3}
  .port-island{width:58%;left:7%;top:8%}
  .port-pier{left:60%;top:50%;width:9%}.port-pier2{display:none}
  .port-dock{left:68%;top:50%}
  .port-dock{scale:.58;transform-origin:left top}
  .port-bld{font-size:18px;padding:3px 5px}.port-bld small{font-size:9px}
  .port-bubble{font-size:11.5px;max-width:62%;top:auto;bottom:3%;left:3%}
  .port-visit{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.port-scene::before,.port-pet,.port-dock .port-ship{animation:none}}