:root{
  --bg:#0b1116;
  --card:#0e151c;
  --ink:#dbe7ee;
  --muted:#96a7b3;
  --acc:#00ffaa;
  --edge:#203040;
  --chip:#0f161d;
  --slot-size: 82px;          /* bazowy rozmiar slota (nadpisywany responsywnie) */
  --gap: 14px;
  --rad: 14px;
  --shadow: 0 6px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#071017;color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{display:block;max-width:100%}

.wrap{max-width:1200px;margin:0 auto;padding:24px}

.page-head h1{margin:0 0 8px;font-size:28px}
.lead{color:var(--muted);line-height:1.6;margin:0 0 18px}

.card{
  background:linear-gradient(180deg,rgba(15,22,28,.95),rgba(13,19,24,.95));
  border:1px solid var(--edge);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  margin:20px 0;
}
.card-title{font-weight:700;margin:2px 0 14px;color:#b8f7ff}

.table-wrap{overflow:auto;border-radius:10px;border:1px solid var(--edge)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid #12202b;vertical-align:middle}
.tbl thead th{background:#0f1a22;color:#9fe8ff;position:sticky;top:0}
.tbl tbody tr:hover{background:#0e1820}
.tbl .ico{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(0,0,0,.4))}

.page-foot{margin:28px 0 12px;color:#6f8796}

/* ===== UI board ===== */
.ui-board{
  position:relative;
  width:100%;
  max-width:1000px;
  margin:0 auto 18px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--edge);
}
.ui-board #ui-img{width:100%;height:auto;display:block}
.ui-wrap{
  position:absolute;inset:0;
}

@media (min-width: 860px){
  :root{ --slot-size: 92px; }
}

.slot{
  position:absolute;
  width:var(--slot-size);
  height:var(--slot-size);
  transform:translate(-50%,-50%);
  border-radius:14px;
  /* całkowicie przezroczyste tło slota */
  background: transparent;
  border: none;
  outline: 1px dashed rgba(255,255,255,.08); /* delikatny kontur na pustym */
  outline-offset: -2px;
  display:grid;
  place-items:center;
  transition:outline-color .2s;
}
.slot.hover{outline-color:rgba(0,255,170,.5)}
.slot.filled{outline:none}

.slot img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  pointer-events:none;
}

.slot .badge{
  position:absolute;bottom:6px;left:50%;
  transform:translateX(-50%);
  font-size:12px;color:#9fe8ff;background:rgba(10,18,24,.85);
  border:1px solid #1f3545;padding:2px 6px;border-radius:999px
}
.slot .remove{
  position:absolute;top:4px;right:4px;
  width:24px;height:24px;border-radius:999px;
  border:1px solid #2a3f4f;background:#0f151c;color:#cdeaf2;
  cursor:pointer;font-weight:700;line-height:1
}
.slot .remove:hover{background:#14222d}

/* ===== Dust list ===== */
.dust-panel h3{margin:6px 0 10px}
.dust-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.chip{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--edge);
  background:var(--chip);border-radius:12px;cursor:grab;
  transition:transform .12s, border-color .2s;
}
.chip:active{cursor:grabbing;transform:scale(.99)}
.chip:hover{border-color:#1f4050}
.chip img{width:40px;height:40px;object-fit:contain}
.chip .nm{font-weight:600}
.hint{margin:8px 2px 0;color:var(--muted);font-size:13px}

/* ===== Summary badges ===== */
.summary h3{margin:0 0 10px}
.sum-grid{display:flex;flex-wrap:wrap;gap:10px}
.sum-item{
  background:#0f181f;border:1px solid #224050;color:#c1eff4;
  padding:7px 10px;border-radius:999px;font-size:14px
}

/* ===== Tooltip ===== */
.tooltip{
  position:fixed;z-index:9999;min-width:240px;max-width:360px;
  background:#0b1218;border:1px solid #254158;color:#d7f6ff;
  border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.45);
  padding:10px 12px;pointer-events:none
}
.tooltip .tt-h{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.tooltip .tt-h img{width:30px;height:30px;object-fit:contain}
.tooltip .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}
.tooltip hr{border:none;border-top:1px solid #203848;margin:8px 0}

/* tables bigger visuals */
.tbl th, .tbl td{font-size:15px}
.tbl .ico{width:44px;height:44px}


.slot.dupe {
  outline: 2px solid #ff3b3b !important;
  box-shadow: 0 0 18px #ff1b1b;
  transition: box-shadow 0.3s ease;
}


.slot.flash {
  animation: flash 0.6s ease;
}
@keyframes flash {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  40% { box-shadow: 0 0 20px rgba(255,255,255,0.9); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* ===== Powrót do menu ===== */
.back-bar {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 22px;
}

.back-btn {
  display: inline-block;
  background: linear-gradient(90deg, #00ffaa1a, #00ffaa33);
  color: var(--acc);
  padding: 10px 18px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,255,170,.1);
}

.back-btn:hover {
  background: linear-gradient(90deg, #00ffaa3a, #00ffaa4a);
  color: #b8fff5;
  box-shadow: 0 4px 14px rgba(0,255,170,.25);
  transform: translateY(-1px);
}

/* ===== Intro card (opis systemu) ===== */
.intro-card {
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(14,20,25,0.96), rgba(11,17,22,0.95));
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 22px 20px;
}

.intro-card .card-title {
  font-size: 20px;
  color: #a3eaff;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(0,255,200,.15);
}

.intro-card .card-body {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.intro-card .card-body b {
  color: var(--acc);
}

.intro-card .card-body i {
  color: #b8f7ff;
}