/* ─────────────────────────────────────────────────────────────────────────
   TFT Copilot — design system (cloned from tftacademy.com, see DESIGN.md)
   Near-black bg · Overpass font · red + gold signature accents · flat, tight.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700;800;900&display=swap');

:root {
  --bg:        #090909;   /* near-black page background */
  --surface:   #101114;   /* cards / buttons / panels */
  --surface-2: #16181d;   /* hover / nested */
  --border:    #323639;   /* subtle dividers */
  --red:       #F05252;   /* PRIMARY signature accent */
  --gold:      #FFC808;   /* secondary accent */
  --blue:      #3F83F8;   /* links / info */
  --text:      #ffffff;
  --muted:     #9aa0a8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Overpass', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ── Navigation ──────────────────────────────────────────────────────────*/
nav {
  display: flex; align-items: center; gap: 28px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(9,9,9,.9);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
nav .logo { font-weight: 900; font-size: 21px; color: var(--text); letter-spacing: -.5px; text-transform: uppercase; }
nav .logo span { color: var(--red); }
nav .links { display: flex; gap: 24px; margin-left: auto; }
nav .links a { color: var(--muted); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .3px; transition: color .15s; }
nav .links a:hover, nav .links a.active { color: var(--text); }

/* ── Layout ──────────────────────────────────────────────────────────────*/
.wrap { max-width: 1040px; margin: 0 auto; padding: 56px 24px; }
.center { text-align: center; }

h1 { font-size: 60px; font-weight: 900; line-height: 1.05; letter-spacing: -1.5px; text-transform: uppercase; }
h1 .gold { color: var(--gold); }
h1 .red  { color: var(--red); }
h2 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; }
.lead { color: var(--muted); font-size: 17px; max-width: 600px; margin: 18px auto 0; }
.section-title { margin: 52px 0 8px; }

/* ── Buttons ─────────────────────────────────────────────────────────────*/
.btn {
  display: inline-block; background: var(--red); color: #fff;
  border: 0; border-radius: 12px; padding: 14px 26px;
  font-family: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  cursor: pointer; transition: transform .12s, filter .12s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:disabled { opacity: .4; cursor: default; transform: none; filter: none; }
.btn.ghost { background: var(--surface); color: #fff; border: 1px solid var(--border); }

/* ── Cards / grid ────────────────────────────────────────────────────────*/
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 28px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--red); transform: translateY(-3px); }
.card h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.card p { color: var(--muted); font-size: 14px; }
.card .emoji { font-size: 28px; display: block; margin-bottom: 12px; }

/* ── Comp rows (tier list) ───────────────────────────────────────────────*/
.comp {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
  transition: border-color .15s;
}
.comp:hover { border-color: var(--border); }
.tier {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #090909;
}
.tier.s { background: var(--red); color: #fff; }
.tier.a { background: var(--gold); }
.tier.b { background: var(--blue); color: #fff; }
.comp-info { flex: 1; }
.comp-info h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.comp-info p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.units { display: flex; gap: 6px; flex-wrap: wrap; }
.units img {
  width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2);
}

/* ── Analyzer ────────────────────────────────────────────────────────────*/
#cona {
  border: 2px dashed var(--border); border-radius: 12px; padding: 44px;
  text-align: center; color: var(--muted); margin: 22px 0; transition: border-color .15s, color .15s;
}
#cona.aktivna { border-color: var(--red); color: var(--text); }
#predogled { max-width: 100%; border-radius: 12px; margin: 18px 0; display: none; border: 1px solid var(--border); }
#rezultat {
  white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; margin-top: 22px; line-height: 1.75; display: none;
}
input[type=file] { color: var(--muted); font-family: inherit; margin-bottom: 6px; }

/* ── Misc ────────────────────────────────────────────────────────────────*/
.badge { display: inline-block; background: var(--surface); border: 1px solid var(--border);
  color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 99px; margin-bottom: 18px; }
footer { color: var(--muted); font-size: 13px; text-align: center; padding: 44px 24px; border-top: 1px solid var(--border); }
.opomba { background: rgba(240,82,82,.08); border: 1px solid rgba(240,82,82,.3);
  border-radius: 10px; padding: 14px 16px; color: #ffb3b3; font-size: 14px; margin: 22px 0; }

/* ── Stat grids (units / items / traits / augments) ──────────────────────*/
.stat-grid { display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; text-align: center; transition: border-color .15s, transform .15s;
}
.stat-card:hover { border-color: var(--red); transform: translateY(-2px); }
.stat-card img { width: 60px; height: 60px; border-radius: 10px; background: var(--surface-2); }
.stat-card .name { font-weight: 700; font-size: 14px; margin-top: 8px; }
.stat-card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Unit cost color = left/top accent. TFT costs: 1 gray, 2 green, 3 blue, 4 purple, 5 gold. */
.cost-1 { border-top: 3px solid #8b94a3; }
.cost-2 { border-top: 3px solid #2bbe6e; }
.cost-3 { border-top: 3px solid #2d8fe0; }
.cost-4 { border-top: 3px solid #b14ddb; }
.cost-5 { border-top: 3px solid var(--gold); }
.pill-cost { display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px;
  background: var(--surface-2); color: var(--muted); margin-top:6px; }

/* Trait / augment rows */
.row-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px; display:flex; align-items:center; gap:16px;
}
.row-card .lead-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  font-size:20px; flex-shrink:0; background: var(--surface-2); }
.row-card .body { flex:1; }
.row-card h3 { font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.row-card p { color: var(--muted); font-size:13px; margin-top:2px; }
.breaks { display:flex; gap:6px; flex-wrap:wrap; }
.breaks span { background: var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:2px 8px; font-size:12px; font-weight:700; }
.aug-silver  { border-left: 3px solid #c3c9d1; }
.aug-gold    { border-left: 3px solid var(--gold); }
.aug-prism   { border-left: 3px solid #6fd0d8; }

/* Stats table */
table.stats { width: 100%; border-collapse: collapse; margin-top: 24px; }
table.stats th, table.stats td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; }
table.stats th { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; font-weight: 700; }
table.stats tbody tr:hover td { background: var(--surface); }
table.stats .num { text-align: right; font-variant-numeric: tabular-nums; }
table.stats .rank { color: var(--muted); width: 36px; }
table.stats .unit { font-weight: 700; }
.good { color: #2bbe6e; }

/* Riot ID analysis box */
.riot-box { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.riot-box input[type=text] {
  flex: 1; min-width: 220px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; color: var(--text); font-family: inherit; font-size: 15px;
}
.riot-box input[type=text]:focus { outline: none; border-color: var(--red); }
.or { text-align: center; color: var(--muted); font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; margin: 22px 0 4px; }

/* Coming-soon panel */
.soon {
  background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
  padding: 48px 28px; text-align: center; margin-top: 26px;
}
.soon .big { font-size: 40px; margin-bottom: 12px; }
.soon h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing:.4px; }
.soon p { color: var(--muted); max-width: 480px; margin: 10px auto 0; font-size: 15px; }

@media (max-width: 560px) {
  h1 { font-size: 38px; letter-spacing: -1px; }
  h2 { font-size: 24px; }
  nav { padding: 14px 18px; gap: 14px; }
  nav .links { gap: 14px; }
  .wrap { padding: 40px 18px; }
}