:root{
  --bg:#0a2540;           /* modrá téma Tvorivý Kútik */
  --bg-soft:#0f335a;
  --card:#0f3a68;
  --text:#eaf2fb;
  --muted:#b9cbe1;
  --accent:#3aa0ff;
  --accent-2:#7cc4ff;
  --danger:#ff5a5a;
  --ok:#49d18e;
  --shadow:0 6px 20px rgba(0,0,0,.25);
  --radius:16px;

  --gold:#f5d26b;
  --cards-gap:16px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif
}

/* ===== Top bar (1 riadok, resources sa môžu zalomiť, actions nikdy) ===== */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--bg-soft);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
  flex-wrap:nowrap;                 /* nedovoľ druhý riadok */
}
.topbar .brand{font-weight:700;letter-spacing:.2px}

/* Ľavá časť: môže rásť a zalamovať svoje „pilule“ */
.topbar .resources{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;                   /* pilule sa môžu zalomiť v rámci resources */
}
.topbar .res{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.06);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.topbar .cap{opacity:.7;margin-left:6px}
.res img{height:24px;width:auto;vertical-align:middle;margin-right:4px}

/* Malé ikonové tlačidlá v resources (hudba/pošta) */
.icon-btn{
  background:transparent;border:0;cursor:pointer;font-size:18px;
  line-height:1;padding:4px 6px;opacity:.9
}
.icon-btn:hover{opacity:1;transform:translateY(-1px)}
#btn-logbook{position:relative}
#log-unread{
  position:absolute; right:-6px; top:-6px;
  min-width:16px; height:16px; border-radius:999px;
  background:#e74c3c; color:#fff; font-size:11px; line-height:16px;
  text-align:center; padding:0 4px; display:inline-flex; align-items:center; justify-content:center;
}

/* Pravá časť: drž spolu, bez zalomenia */
.topbar .actions{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex:0 0 auto;                    /* nikdy sa nezmenšuj a nezalamuj */
}
.topbar .actions button{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;color:#002446;font-weight:700;
  padding:8px 14px;border-radius:999px;cursor:pointer
}
.topbar .actions button+button{margin-left:0}

/* ===== Tabs ===== */
.tabs{
  display:flex; gap:8px; padding:10px 14px; background:transparent;
  position:sticky; top:56px; z-index:40
}
.tab-btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer
}
.tab-btn.active{outline:2px solid var(--accent)}

/* ===== Layout / karty ===== */
main{padding:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; box-shadow:var(--shadow); padding:12px 14px;
  width:300px;                       /* kompaktnejšie karty */
}
.card h4{
  margin:6px 0 6px;
  color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 6px rgba(245,210,107,.25);
  font-weight:700;
}
.card .muted{line-height:1.25}

.card img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.card > div:first-child{display:flex;align-items:center;gap:15px}

/* Karty, ktoré nie sú v .cards */
.tab > .card { margin-top: var(--cards-gap); }
.tab > .card:last-child { margin-bottom: var(--cards-gap); }

/* ===== Queue / panely ===== */
.queue{list-style:none;padding:0;margin:0}
.queue li{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px;border-radius:12px;background:rgba(255,255,255,.06);margin-bottom:6px
}
.queue .eta{font-variant-numeric:tabular-nums;opacity:.9}

.barracks-panel .perk-choose{margin-top:8px}
.perk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.perk-grid button{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:10px;cursor:pointer;color:var(--text)
}
.perk-grid button:hover{border-color:var(--accent)}

/* ===== Mapa ===== */
.map-wrap{display:grid;grid-template-columns:1fr 320px;gap:12px}
.map-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:44px;gap:4px}
.tile{
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.15);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer
}
.tile.player{outline:2px solid var(--ok)}
.tile.ai{outline:2px solid var(--danger)}
.tile .tip{position:absolute;bottom:2px;left:2px;font-size:11px;color:var(--muted)}
/* Obrázok ako pozadie dlaždice */
.tile img{
  width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;border-radius:8px
}
.tile .tip{
  position:relative;z-index:2;background:rgba(0,0,0,.5);
  padding:2px 4px;border-radius:4px
}

/* ===== Attack panel ===== */
.attack-panel .attack-inputs{display:grid;gap:6px;margin:10px 0}
.attack-panel .quick{display:flex;gap:6px;margin:4px 0}
.attack-panel .quick button{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:4px 8px;color:var(--text);cursor:pointer
}
.attack-panel #btn-send-attack{
  width:100%;margin-top:8px;padding:10px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#002446;font-weight:800;cursor:pointer
}
.attack-panel #btn-send-attack:disabled{opacity:.5;cursor:not-allowed}
.attack-panel label{display:block;margin-top:6px}
.attack-panel .avail{margin-left:8px;opacity:.8;font-size:.9em}

/* ===== Overlay / modaly ===== */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:100
}
.overlay-inner{
  background:var(--card);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;box-shadow:var(--shadow);padding:12px;max-width:720px;width:92%
}
.overlay-close{
  position:absolute;right:14px;top:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);border-radius:999px;color:var(--text);
  width:36px;height:36px;font-size:20px;cursor:pointer
}
#battle-video{width:100%;border-radius:14px;background:black}
.battle-result{margin-top:10px;background:rgba(255,255,255,.06);padding:10px;border-radius:12px}

.event-actions{display:flex;gap:8px;margin-top:10px}
.event-actions button{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer
}

/* ===== Premium cards ===== */
.premium-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.premium-card{background:rgba(255,255,255,.06);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.premium-card h5{margin:0 0 6px 0}
.premium-card .row{display:flex;gap:6px;flex-wrap:wrap}
.premium-card .row button{padding:6px 8px;border-radius:10px;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--text)}

/* ===== Rôzne ===== */
.footer{padding:12px;text-align:center;color:var(--muted)}
@media (max-width:900px){ .map-wrap{grid-template-columns:1fr} }

/* Tabs obsah */
.tab{display:none}
.tab.active{display:block}

/* Poistky / efekty */
[hidden]{display:none!important}
.mission-reward-inline{margin-top:6px;opacity:.95}
.flash-up{animation:flashUp .8s ease}
@keyframes flashUp{0%{color:#49d18e;font-weight:700}100%{color:inherit;font-weight:inherit}}
input.invalid{outline:2px solid var(--danger)}
#catapult-target-wrap select{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:var(--text); padding:6px 8px; border-radius:10px;
}
#battle-video{width:100%}