/* FootQuiz - mobile first "app" style (simple) */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:Arial,sans-serif;
  color:#e5e7eb;
  background:#0b1220;
}

/* background image + overlay */
.bg{
  position:fixed; inset:0;
  background:url("../img/bg-field.png") center/cover no-repeat;
  z-index:0;
}
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}

/* app frame */
.app{ position:relative; z-index:2; min-height:100%; padding-bottom:78px; }
.shell{ width:100%; max-width:460px; margin:0 auto; padding:14px 14px 90px; }

/* header */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 0 12px; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; }
.brand img{ width:34px; height:34px; border-radius:10px; }
.brand .name{ font-weight:800; letter-spacing:.2px; }

.page-title{ width:100%; text-align:center; color:#fff; font-weight:800; font-size:20px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:14px;
  background:rgba(255,255,255,.15);
  text-decoration:none;
}

/* icons shared */
.icon-btn img, .cat-ico img{ width:22px; height:22px; }

/* text helpers */
.muted{ color:rgba(229,231,235,.72); }
.h2{ margin:0 0 10px; font-size:18px; font-weight:800; color:#fff; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer{ height:10px; }

/* GLASS CARD */
.card{
  background:rgba(10,40,26,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  margin-bottom:12px;
  color:#e5e7eb;
}

/* chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:13px;
}
.chip img{ width:16px; height:16px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  font-size:15px;
}
.btn-block{ width:100%; }
.btn-primary{ background:#22c55e; color:#0b1220; }
.btn-primary:hover{ filter:brightness(.98); }
.btn-outline{ background:transparent; color:#e5e7eb; border:2px solid rgba(34,197,94,.70); }
.btn-danger{ background:#ef4444; color:#fff; }
.btn-small{ padding:9px 12px; border-radius:12px; font-size:14px; }

/* tiles */
.tiles{ display:flex; gap:10px; flex-wrap:wrap; }
.tile{
  flex:1 1 30%;
  background:rgba(10,40,26,.40);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:12px 10px;
  text-decoration:none;
  color:#e5e7eb;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* forms */
label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin:10px 0 6px;
  color:rgba(229,231,235,.85);
}
input,textarea,select{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:2px solid #e5e7eb;
  font-size:15px;
  outline:none;
  background:rgba(255,255,255,.95);
  color:#0f172a;
}
input::placeholder,textarea::placeholder{ color:#9ca3af; }
textarea{ min-height:90px; resize:vertical; }

/* solo category rows */
.cat-row{ display:flex; gap:10px; align-items:center; }
.cat-ico{
  width:42px; height:42px;
  border-radius:16px;
  background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
}
.cat-main{ flex:1; }

.progress{
  height:10px;
  background:rgba(255,255,255,.35);
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}
.progress>div{ height:100%; background:#22c55e; width:0%; }

/* SOLO GRID : 5 per row */
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.qbtn{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:14px 0;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.92);
  color:#0f172a;
}
.qbtn.locked{
  opacity:.45;
  background:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.25);
  color:#6b7280;
  cursor:not-allowed;
}

/* answers */
.answers{ margin-top:12px; }

/* bottom nav */
.bottom{ position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 12px; }
.bottom .bar{
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  padding:10px 6px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
}
.nav-item{
  text-decoration:none;
  color:#6b7280;
  font-size:11px;
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 0;
}
.nav-item img{ width:20px; height:20px; }
.nav-item.active{ color:#22c55e; }

/* toast */
.toast{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  width:calc(100% - 28px);
  max-width:460px;
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.toast.ok{ background:rgba(34,197,94,.90); color:#0b1220; }
.toast.bad{ background:rgba(239,68,68,.92); color:#fff; }

/* HOME */
.home{ padding-top:32px; }
.home-hero{ margin:18px 0; }
.home-title{ margin:0 0 12px; font-size:34px; font-weight:900; color:#fff; line-height:1.05; }
.home-chips{ margin:10px 0 18px; }
.home-actions{ padding:16px; margin-bottom:16px; }
.home-actions .spacer{ height:12px; }
.home-btn{ padding:15px 16px; border-radius:16px; }

.home-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:6px;
}
.home-tile{
  background:rgba(10,40,26,.40);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:16px 10px;
  text-align:center;
  text-decoration:none;
  color:#e5e7eb;
  font-weight:900;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:90px;
}

/* icon size shared (svg in tiles + img fallback) */
.tile-ico svg, .home-tile img{ width:26px; height:26px; }

/* OVERRIDES for inline light cards (keep theme glass) */
.card[style*="background:#f3f4f6"],
.card[style*="background: #f3f4f6"],
.card[style*="background:#ffffff"],
.card[style*="background: #ffffff"],
.card[style*="background:rgb(243,244,246)"],
.card[style*="background: rgb(243,244,246)"],
.card[style*="#fef2f2"],
.card[style*="#FEE2E2"],
.card[style*="#fffbeb"],
.card[style*="#ecfdf5"],
.card[style*="#dcfce7"],
.card[style*="rgb(254,242,242)"],
.card[style*="rgb(220,252,231)"]{
  background:rgba(10,40,26,.55)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#e5e7eb!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}
.card[style*="box-shadow:none"],
.card[style*="box-shadow: none"]{
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}
.card[style*="#fef2f2"] .muted,
.card[style*="#ecfdf5"] .muted,
.card[style*="#dcfce7"] .muted{
  color:rgba(229,231,235,.85)!important;
}

/* DESKTOP FIXES */
@media (min-width:900px){
  .bg{ background-size:auto 100vh; background-position:center top; background-repeat:no-repeat; }
  .shell{ max-width:430px; padding-top:18px; }
  .bottom{ padding-left:0; padding-right:0; }
}