/* bchillz.com — night-cold steel with a campfire glow */
:root {
  --bg: #0b1014;
  --bg2: #111a20;
  --panel: #141f26;
  --line: #24343e;
  --text: #e8eef2;
  --muted: #93a5b0;
  --ice: #6fd3e8;
  --ice-deep: #3f8fa0;
  --neon-core: #fff0f9;
  --neon-a: #ff3cac;
  --neon-b: #ff1493;
  --neon-board: rgba(255, 60, 172, .14);
  --fire: #f07a2a;
  --kick: #53fc18;
  --twitch: #9146ff;
  --yt: #ff3d3d;
  --discord: #5865f2;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(111, 211, 232, .12), transparent 70%),
    radial-gradient(800px 400px at 85% 110%, rgba(240, 122, 42, .10), transparent 70%),
    var(--bg);
  min-height: 100vh;
}
a { color: var(--ice); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ice); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1100px; margin: 0 auto; padding: 14px 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand span { font: 900 22px/1 Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif; letter-spacing: .06em; }
.brand-logo { border-radius: 50%; object-fit: cover; }
nav { display: flex; gap: 14px; }
nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
nav a:hover, nav a:focus-visible { color: var(--text); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }

.hero { text-align: center; padding: 48px 0 36px; }
.kicker { margin: 0; color: var(--fire); font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; }
.hero h1 {
  margin: 6px 0 4px;
  font: 900 clamp(64px, 16vw, 150px)/0.9 Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #ffffff 0%, var(--ice) 70%, var(--ice-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(111, 211, 232, .15);
}
.tag { margin: 0 0 22px; color: var(--muted); font-size: 19px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font: 700 15px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--ice)); }
.btn-kick { --dot: var(--kick); }
.btn-kick:hover { border-color: var(--kick); }
.btn-twitch { --dot: var(--twitch); }
.btn-twitch:hover { border-color: var(--twitch); }
.btn-yt { --dot: var(--yt); }
.btn-yt:hover { border-color: var(--yt); }
.btn-discord { --dot: var(--discord); }
.btn-discord:hover { border-color: var(--discord); }
.btn-play { background: var(--fire); border-color: var(--fire); color: #1a0d03; }
.btn-play::before { display: none; }
.btn-big { padding: 14px 28px; font-size: 17px; }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin: 0 0 22px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 20px; letter-spacing: .02em; }
.more { font-weight: 600; text-decoration: none; }

.tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.tab {
  border: 0; background: transparent; color: var(--muted); font: 700 14px/1 inherit; font-family: inherit;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; min-height: 36px;
}
.tab.is-on { background: var(--bg2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #05080a; border: 1px solid var(--line); }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px; text-align: center;
  background: radial-gradient(600px 300px at 50% 120%, rgba(240, 122, 42, .18), transparent 70%), #070b0e;
}
.poster-title { margin: 0; font-size: 18px; font-weight: 700; }
.fine { margin: 0; color: var(--muted); font-size: 13px; max-width: 46ch; }

.discord { text-align: center; padding: 32px 18px; }
.discord p { color: var(--muted); margin: 6px 0 18px; }

footer { text-align: center; padding: 20px 16px 36px; color: var(--muted); }
footer p { margin: 4px auto; }

@media (max-width: 560px) {
  nav { gap: 10px; font-size: 14px; }
  .panel { padding: 14px; }
  .panel-head { flex-direction: column; align-items: stretch; }
  .tabs { justify-content: space-between; }
  .tab { flex: 1; }
  .screen { aspect-ratio: 4 / 3; }
}
.poster[hidden] { display: none; }
footer .fine { margin: 4px auto; }

/* the going deep neon sign: hand-bent tubes (an SVG, so it's the same on every device), a hum, and the "d" flickers */
.neon {
  display: inline-block; margin: 0 auto 16px; padding: 14px 26px 10px;
  border-radius: 18px; transform: rotate(-3deg);
  background: linear-gradient(180deg, #0a0f13, #06090c);
  border: 1px solid #1c2a33;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55), 0 0 60px var(--neon-board);
}
.neon-sign { display: block; width: clamp(200px, 58vw, 380px); height: auto; overflow: visible; }
.neon-sign .tubes {
  fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
  animation: neon-buzz 2.7s steps(1, end) infinite;
}
@keyframes neon-buzz {                                  /* a faint, uneven buzz, like an old transformer */
  0% { opacity: 1; } 11% { opacity: .93; } 13% { opacity: 1; } 37% { opacity: .96; } 39% { opacity: 1; }
  62% { opacity: .9; } 63% { opacity: 1; } 81% { opacity: .95; } 84% { opacity: 1; }
}
.neon-sign .tubes.dim { animation: none; }
@media (prefers-reduced-motion: reduce) { .neon-sign .tubes { animation: none; } }
/* a lit letter: a white-hot core in a pink glow; a dead one: the dim glass tube with no glow */
.neon-sign .ltr { stroke: var(--neon-core); filter: url(#glow) drop-shadow(0 0 6px var(--neon-a)) drop-shadow(0 0 18px var(--neon-b)); }
.neon-sign .ltr.off { stroke: #4a2f3d; filter: none; }
.neon-sign .tubes.dim { opacity: .4; }               /* a brownout: the whole sign sags */
.neon-sign .tubes.dark .ltr { stroke: #4a2f3d; filter: none; }   /* switched off (before it warms up) */
.neon.is-dark { box-shadow: 0 10px 40px rgba(0, 0, 0, .55); }
.neon { transition: box-shadow .08s linear; }


/* more socials, the schedule, settings and business */
.also { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.also a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.also a:hover { color: var(--ice); border-color: var(--ice); }
.when { margin: 0; color: var(--muted); font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; margin: 0 0 10px; padding: 0; }
.days li {
  text-align: center; padding: 12px 0; border-radius: 10px; font-weight: 800; letter-spacing: .04em;
  background: rgba(240, 122, 42, .14); border: 1px solid rgba(240, 122, 42, .45); color: #ffd2b3;
}
.days li.off { background: transparent; border-color: var(--line); color: #4d5f69; font-weight: 600; }
.days li.today { outline: 2px solid var(--ice); outline-offset: 2px; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.info h2 { margin: 0 0 10px; font-size: 18px; }
.info p { margin: 0 0 6px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.specs div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.specs dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.specs dd { margin: 4px 0 0; font-weight: 800; font-size: 17px; }
@media (max-width: 560px) {
  .info { grid-template-columns: 1fr; }
  .days li { padding: 10px 0; font-size: 13px; }
}
@media (max-width: 560px) { .specs dd { font-size: 14px; } .specs div { padding: 10px 4px; } }

/* his header picture, behind the name (set in /admin) */
.hero.has-bg {
  margin-top: 8px; padding: 48px 16px 36px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(11, 16, 20, .45), rgba(11, 16, 20, .78) 70%, var(--bg)), var(--hero-img) center / cover no-repeat;
  border: 1px solid var(--line);
}
.hero-logo { display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.about p { margin: 0 0 8px; color: var(--text); white-space: pre-line; }
.sched-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
/* small phones with a logo: the menu drops to its own line instead of running off the edge */
.top { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 480px) { nav { flex-wrap: wrap; gap: 4px 14px; } }

/* the "i" is a straight line, so it gets an invisible box to give its glow room (Windows drew it broken without) */
.neon-sign .pad { fill: none; stroke: none; }
/* the calm version, for devices that ask for less motion: slow fades, never a blink */
.neon-sign .tubes.calm, .neon-sign .tubes.calm .ltr { transition: opacity .9s ease; }
.neon-sign .tubes.calm .ltr.fade { opacity: .18; }
.neon-sign .tubes.calm.sag { opacity: .55; }