:root {
  --bg: #FEF6E1;
  --text: #913928;
  --link: #746228;
  --accent: #caa765;
  --bg-gradient: linear-gradient(135deg, #caa765 0%, #746228 100%);
  --card-gradient: linear-gradient(180deg, rgba(202,167,101,0.12) 0%, rgba(255,255,255,0.94) 100%);
}

* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--link); }

.app-header { background: var(--bg-gradient); color: #fff; position: sticky; top: 0; z-index: 1040; }
.app-footer { background: var(--bg-gradient); color: #fff; }
/* Logo sizing */
.app-logo { height: 40px; width: auto; display: block; }

.hero { background: radial-gradient(1200px 500px at 30% -20%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%), var(--bg-gradient); }
.hero h2 { letter-spacing: 0.2px; }

.sticky-search { position: static; backdrop-filter: none; }

#eventsGrid .card { border-radius: 16px; border: none; box-shadow: 0 8px 22px rgba(145,57,40,0.10); background-image: var(--card-gradient); }
#eventsGrid .card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(116,98,40,0.18); transition: all .2s ease; }
#eventsGrid .card .badge { font-size: 0.8rem; }

.btn-map { background: #fff; color: var(--link); border: 2px solid var(--accent); font-weight: 600; }
.btn-map:hover { background: var(--accent); color: #fff; }

.floating-top {
  position: fixed; bottom: 20px; right: 16px; z-index: 1030;
}

/* Mobile app-like polish */
@media (max-width: 576px) {
  .app-header .h5 { font-size: 1rem; }
  .sticky-search { margin: -12px; border-radius: 0; box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
  #eventsGrid { margin-top: 8px; }
}

/* Tile layout */
.sport-tile { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(145,57,40,0.12); transition: transform .2s ease, box-shadow .2s ease; }
.sport-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(116,98,40,0.22); }
.sport-tile:active { transform: scale(0.98); }
.tile-header { height: 120px; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 1.25rem; letter-spacing: .4px; position: relative; }
.tile-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 10% 0%, rgba(255,255,255,.2), transparent 60%), radial-gradient(300px 120px at 90% 100%, rgba(255,255,255,.18), transparent 60%); }
.tile-body { padding: 16px; }

/* Gradient themes for tiles (harmonized with brand) */
.tile-bg-1 { background: linear-gradient(135deg, #caa765 0%, #746228 100%); }
.tile-bg-2 { background: linear-gradient(135deg, #913928 0%, #746228 100%); }
.tile-bg-3 { background: linear-gradient(135deg, #746228 0%, #caa765 100%); }
.tile-bg-4 { background: linear-gradient(135deg, #a56c3c 0%, #913928 100%); }
.tile-bg-5 { background: linear-gradient(135deg, #c9b47a 0%, #a56c3c 100%); }
.tile-bg-6 { background: linear-gradient(135deg, #b88f4f 0%, #913928 100%); }

/* Click pulse animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.pulse { animation: pulse .35s ease-out; }

/* Category navigation styles */
.category-nav .btn-cat { 
  background: #ffffff; 
  border: 1px solid rgba(116,98,40,0.25); 
  color: var(--link); 
  margin: 4px; 
  border-radius: 999px; 
  padding: 8px 14px; 
}
.category-nav .btn-cat.active { 
  background: var(--link); 
  color: #FEF6E1; 
  box-shadow: 0 6px 14px rgba(116,98,40,0.25); 
}
.badge-cat { font-size: .75rem; }

/* Mobile hamburger menu */
.mobile-menu { display: none; background: var(--bg-gradient); padding: 8px 12px; }
.mobile-menu.show { display: block; }
.mobile-menu .nav-link { color: #FEF6E1; }