:root{
  --bg:#0a0f13;
  --fg:#d9d9d9;
  --neo:#00ffae;
  --panel:rgba(0,0,0,.35);
  --border:#1b1b1b;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:"Segoe UI",system-ui,Arial,sans-serif;margin:0;padding:0 20px}
header{text-align:center;margin:26px 0 14px}
h1{color:var(--neo);text-shadow:0 0 12px #00ffae77;margin:0}
.subtitle{opacity:.8;font-size:14px;margin-top:6px}

main{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:22px}

/* PANEL SZCZEGÓŁÓW */
.details-panel{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 0 12px rgba(0,255,174,.1);
}
.details-header{display:flex;align-items:center;gap:12px}
.det-icon{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 8px #00ffae77)}
h2{color:var(--neo);margin:0;text-shadow:0 0 8px #00ffae55}
.tag{display:inline-block;margin-top:4px;font-size:12px;color:var(--neo);border:1px solid #00ffae55;border-radius:6px;padding:2px 8px;background:rgba(0,255,174,.06)}
.picker{margin-left:auto;display:flex;align-items:center;gap:8px}
select{background:#111;color:var(--neo);border:1px solid #00ffae55;border-radius:6px;padding:6px 10px}

.details-controls{margin-top:10px}
.lv-buttons{display:flex;gap:8px;flex-wrap:wrap}
.lv-btn{background:linear-gradient(180deg,#0f4231,#072d22);color:var(--neo);border:1px solid #00ffae55;border-radius:8px;padding:6px 12px;font-weight:700;cursor:pointer}
.lv-btn.active{outline:2px solid #00ffaeaa;box-shadow:0 0 10px #00ffae66 inset}

.lv-body{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.col{flex:1 1 280px;background:rgba(0,0,0,.25);border:1px solid #1b1b1b;border-radius:10px;padding:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cost{display:flex;align-items:center;gap:10px}
.coin{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 6px #00ffae88)}

/* OKNO GUI */
.ins-container{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  box-shadow:0 0 12px rgba(0,255,174,.1);
}
.stage{position:relative;width:100%;max-width:1100px;margin:0 auto}
.bg{width:100%;height:auto;display:block;opacity:.95}

.ring{position:absolute;inset:0}
.slot{
  position:absolute;width:78px;height:78px;transform:translate(-50%,-50%);
  border-radius:12px;background:rgba(0,0,0,.35);border:1px solid #1e2a26;
  box-shadow:0 0 10px rgba(0,255,174,.12);display:grid;place-items:center;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;
}
.slot:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 14px rgba(0,255,174,.35)}
.slot img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 0 6px #00ffae88)}
.slot .lvl{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  background:#0d1715;border:1px solid #0f7a5a;color:var(--neo);
  font-size:12px;padding:2px 6px;border-radius:999px;
}

/* TABELA */
.info-box{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:16px;box-shadow:0 0 12px rgba(0,255,174,.1);
}
.table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.table th,.table td{border:1px solid #222;padding:6px 8px;text-align:center}
.table th{background:#0d1715;color:var(--neo)}
.table tr:nth-child(even){background:rgba(0,255,174,.03)}

/* TOOLTIP */
/* było: position: fixed */
#tooltip{
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 9999;
  background: rgba(0,0,0,.9);
  color: var(--neo);
  border: 1px solid #00ffae55;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 0 10px #00ffae55;
  font-size: 13px;
  transform: translate(0,0); /* usuń wcześniejsze przesunięcia */
}
.stage{ position: relative; } /* już masz, ale podkreślam */

footer{text-align:center;margin:22px 0 18px;opacity:.7;font-size:13px}

#eventTable td, #eventTable th {
  padding: 8px;
  text-align: left;
}
#eventTable th {
  background: #0d1715;
  color: #00ffae;
}
#eventTable tr:nth-child(even) {
  background: rgba(0,255,174,0.03);
}

/* === EVENT TABLE (dopasowana do craftingu) === */
.event-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,255,174,0.08);
}

.event-table th, .event-table td {
  border: 1px solid #1f1f1f;
  padding: 8px 12px;
  vertical-align: middle;
}

.event-table th {
  background: #0d1715;
  color: #00ffae;
  text-shadow: 0 0 5px #00ffae44;
}

.event-table tr:nth-child(even) {
  background: rgba(0,255,174,0.03);
}

.event-table tr:hover {
  background: rgba(0,255,174,0.07);
  transition: background 0.15s ease;
}

.event-table td {
  color: #d9d9d9;
  line-height: 1.5;
}

/* wyrównanie kolumn proporcjonalnie jak w craftingu */
.event-table th:nth-child(1),
.event-table td:nth-child(1) {
  width: 20%;
}
.event-table th:nth-child(2),
.event-table td:nth-child(2) {
  width: 20%;
}
.event-table th:nth-child(3),
.event-table td:nth-child(3) {
  width: 25%;
}
.event-table th:nth-child(4),
.event-table td:nth-child(4) {
  width: 35%;
}
.back-row {
  text-align: center;
  margin: 40px 0 20px;
}

.back-btn {
  background: linear-gradient(180deg, #005f3a, #003822);
  color: #00ffae;
  border: 1px solid #00ffae66;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 8px rgba(0,255,174,0.15);
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: linear-gradient(180deg, #00b06b, #00663e);
  box-shadow: 0 0 15px rgba(0,255,174,0.4);
  transform: translateY(-1px);
}

/* === LEKKIE POMNIEJSZENIE CAŁEGO UI === */
:root { --ui-zoom: .50; } /* 0.92 = 92% rozmiaru; zmień na .95 / .9 wedle potrzeb */