* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Georgia, 'Times New Roman', serif; color:#f5f0dc; background:#0a0a18; line-height:1.6; }
header { position:sticky; top:0; z-index:10; background:rgba(8,8,20,.94); border-bottom:3px solid #d4af37; }
nav { max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:12px 16px; }
.brand { font-size:26px; font-weight:bold; letter-spacing:3px; color:#d4af37; margin-right:auto; text-decoration:none; }
nav a.tab { color:#f5f0dc; text-decoration:none; padding:9px 14px; border-radius:6px; font-size:16px; }
nav a.tab:hover { background:rgba(212,175,55,.18); }
nav a.tab.active { background:#d4af37; color:#10101e; font-weight:bold; }
.hero img { width:100%; display:block; }
.wrap { max-width:1180px; margin:0 auto; padding:34px 18px 10px; }
h1 { font-size:40px; letter-spacing:1px; color:#e8c56a; margin-bottom:12px; }
h2 { font-size:26px; color:#e8c56a; margin:26px 0 10px; }
p { font-size:18px; margin-bottom:12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:20px 0; }
.card { border:2px solid #d4af37; border-radius:10px; padding:20px; background:rgba(255,255,255,.04); }
.card h3 { color:#e8c56a; font-size:21px; margin-bottom:6px; }
.card a { color:#e8c56a; font-weight:bold; }
.pill { display:inline-block; background:#d4af37; color:#10101e; font-weight:bold; padding:4px 14px; border-radius:20px; font-size:15px; margin-bottom:14px; }
.playerbox { border:2px solid #d4af37; border-radius:12px; padding:22px; background:rgba(0,0,0,.35); margin:22px 0; text-align:center; }
.playerbox audio { width:100%; max-width:560px; margin-top:10px; }
.btn { display:inline-block; background:#d4af37; color:#10101e; font-weight:bold; padding:12px 26px; border-radius:8px; text-decoration:none; font-size:18px; margin-top:10px; }
.sponsors { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:16px 0 8px; }
.sponsors img { width:100%; border-radius:10px; border:2px solid #d4af37; display:block; }
ul { margin:8px 0 14px 22px; font-size:18px; }
footer { border-top:3px solid #d4af37; margin-top:40px; padding:24px 18px 34px; text-align:center; font-size:15px; color:#cfc39d; background:rgba(0,0,0,.4); }
footer a { color:#e8c56a; }
body.lobo { background:linear-gradient(180deg,#0a1030 0%,#101c4e 55%,#0a0a18 100%); }
body.mustang { background:linear-gradient(180deg,#241203 0%,#3a2410 55%,#170c04 100%); }
body.tejano { background:linear-gradient(180deg,#1d0633 0%,#47106b 55%,#12041f 100%); }
.stationart { width:100%; height:460px; object-fit:cover; object-position:center; border-radius:12px; border:2px solid #d4af37; display:block; margin-bottom:22px; }
.bannerart { width:100%; display:block; border-radius:12px; border:2px solid #d4af37; margin-bottom:22px; }
@media (max-width:640px){ h1{font-size:30px} .brand{font-size:21px} }

.pickbtn { display:block; width:100%; text-align:left; background:rgba(212,175,55,.10); color:#e8c56a; border:2px solid #d4af37; border-radius:10px; font-family:inherit; font-size:24px; font-weight:bold; letter-spacing:2px; padding:18px 22px; margin:14px 0 6px; cursor:pointer; }
.pickbtn:hover { background:rgba(212,175,55,.22); }
.pickbtn small { display:block; font-size:15px; letter-spacing:0; color:#f5f0dc; font-weight:normal; margin-top:4px; }
.citybtn { font-size:21px; margin-left:22px; width:calc(100% - 22px); }
.panel { display:none; }
.panel.open { display:block; }
.soon { border-style:dashed; opacity:.85; }
.soon h3 { color:#cfc39d; }

nav a.tab { text-align:center; }
nav a.tab .stname { display:block; }
nav a.tab .stlive { display:block; font-size:.72em; letter-spacing:.06em; opacity:.85; line-height:1.3; }
.medallion { display:block; margin:20px auto 4px; width:min(280px,72vw); }

.brandlogo { height:58px; width:auto; display:block; }
@media (max-width:640px){ .brandlogo{height:46px} }

.playerbox { border:2px solid #d4af37; animation:pulseGold 2.8s ease-in-out infinite alternate; }
@keyframes pulseGold { from { box-shadow:0 0 14px rgba(232,178,60,.38), 0 0 30px rgba(232,178,60,.14), inset 0 0 6px rgba(232,178,60,.12); } to { box-shadow:0 0 30px rgba(232,178,60,.75), 0 0 64px rgba(232,178,60,.30), inset 0 0 12px rgba(232,178,60,.22); } }
@media (prefers-reduced-motion: reduce){ .playerbox{ animation:none; } }

.duo { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin:22px 0; }
.duo .playerbox { margin:0; }

#hn-stage { position:relative; height:300px; border-radius:10px; overflow:hidden; margin:14px auto; max-width:560px; background:linear-gradient(#f7b733 0%, #e2703a 58%, #8a4b2a 58.3%, #6e3b20 100%); }
#hn-outlaw { position:absolute; left:50%; bottom:38px; transform:translateX(-50%); font-size:110px; line-height:1; visibility:hidden; cursor:pointer; user-select:none; }
#hn-msg { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-weight:bold; color:#fff8e6; text-shadow:0 1px 3px rgba(0,0,0,.6); padding:0 10px; }
.hn-deco { position:absolute; user-select:none; }

canvas.game{background:#05050f;border:2px solid #d4af37;border-radius:8px;width:100%;max-width:600px;display:block;margin:10px auto}
.gbtn{background:#1b1b2f;color:#ffd95e;border:1px solid #d4af37;border-radius:8px;font-size:20px;line-height:1;padding:9px 18px;margin:3px;cursor:pointer}
.gamemsg{text-align:center;min-height:1.5em;font-weight:bold;margin:6px 0}

/* Patreon announcement bar (top of home + Mustang pages) */
.patreon-bar { background: linear-gradient(90deg,#8a6d1d,#d4af37,#8a6d1d); color:#10101e; text-align:center; padding:10px 12px; font-weight:bold; font-size:1.05em; }
.patreon-bar a { color:#10101e; text-decoration:underline; }
@media (max-width: 480px) {
  .patreon-bar { font-size:.8em; padding:6px 8px; line-height:1.35; }
}
@media (max-width: 360px) {
  .patreon-bar { font-size:.68em; padding:4px 6px; line-height:1.3; }
}
@media (max-width: 480px) {
  .patreon-tiers { display: none; }
}

/* Compact nav on small screens — tabs shrink and wrap into neat rows
   instead of ballooning when a phone's text size is set large.
   Desktop / large-screen nav above is untouched. */
@media (max-width: 760px) {
  nav { gap:4px; padding:8px; }
  nav a.tab { font-size:13px; padding:6px 8px; }
  .brandlogo { height:40px; }
}
@media (max-width: 480px) {
  nav a.tab { font-size:12px; padding:5px 6px; }
  nav a.tab .stlive { font-size:.66em; }
  .brandlogo { height:34px; }
}
@media (max-width: 360px) {
  nav a.tab { font-size:11px; padding:4px 5px; }
}

/* App medallion badges (Android / Desktop) */
.appbadges{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:18px auto 6px}
.appbadge{background:#10101e;border:2px solid #c9a227;border-radius:16px;padding:14px 18px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;transition:transform .15s ease, box-shadow .15s ease}
.appbadge:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.appbadge img{width:104px;height:104px;object-fit:contain}
.appbadge-name{color:#e8c766;font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:1.05rem;letter-spacing:.12em}
.appbadge-sub{color:#e9e4d8;font-size:.8rem}
.apphint{text-align:center;color:#e9e4d8;max-width:520px;margin:8px auto 0;font-size:.9rem}

/* Slim nav on short screens (Chromebooks with scaled displays, small
   laptop windows): the sticky tab bar shrinks to one lean row so it
   stops eating the page — Lobo TV especially. Width breakpoints above
   still govern phones; desktop tall screens are untouched. */
@media (max-width: 1100px) {
  nav { padding:10px 12px; }
  nav a.tab { font-size:15px; padding:8px 10px; }
  .brandlogo { height:50px; }
}
@media (max-height: 700px) {
  nav { flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:6px 10px; scrollbar-width:none; }
  nav::-webkit-scrollbar { display:none; }
  .brandlogo { height:36px; }
  nav a.tab { font-size:13.5px; padding:6px 9px; white-space:nowrap; }
  nav a.tab .stname { display:inline; }
  nav a.tab .stlive { display:none; }
}