/* Labsec: Roblox obby at dusk. Kill bricks, hazard blocks, studs, and things on fire. */
:root {
  color-scheme: dark;
  --bg: #1a1320;
  --bg-deep: #120d17;
  --plate: #2a2233;
  --plate-hi: #3a3046;
  --plate-lo: #110c15;
  --edge: #4b3f5a;
  --text: #fff4e8;
  --muted: #c9b9c9;
  --faint: #8f7f93;
  --kill: #ff2b2b;
  --kill-glow: rgba(255, 43, 43, .55);
  --hazard: #ffcc00;
  --stone: #8d929b;
  --stone-lo: #5c6068;
  --glass: rgba(170, 220, 255, .18);
  --green: #3ee06b;
  --blue: #3aa7ff;
  --link: #ffb347;
  --fire: #ff8a1f;
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bevel: inset 0 3px 0 rgba(255,255,255,.14), inset 0 -4px 0 rgba(0,0,0,.35), 0 4px 0 var(--plate-lo);
  --studs: radial-gradient(circle at 50% 42%, rgba(255,255,255,.16) 0 5px, rgba(0,0,0,.25) 6px 7px, transparent 8px) 0 0 / 22px 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(2px 2px at 31px 47px, rgba(255,244,232,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 163px 121px, rgba(255,179,71,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 99px 201px, rgba(255,244,232,.3) 50%, transparent 51%),
    var(--bg);
  background-size: 240px 240px, 240px 240px, 240px 240px, auto;
}
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hazard); outline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }
.narrow { max-width: 78ch; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---- header ------------------------------------------------------------------------ */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 16px 6px; flex-wrap: wrap; position: relative; z-index: 2; }
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.brand-logo {
  font-family: var(--display); font-size: 1.9rem; line-height: 1; color: #fff; letter-spacing: .01em;
  background: var(--kill); padding: .22em .5em .28em; border-radius: 6px; transform: rotate(-4deg);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.3), 0 5px 0 #7a0f0f, 0 0 22px var(--kill-glow);
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.brand:hover .brand-logo { transform: rotate(3deg) scale(1.04); }
.nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--display); font-size: 1rem; color: var(--text); text-decoration: none;
  background: var(--plate); padding: .35em .8em .45em; border-radius: 6px; box-shadow: var(--bevel);
}
.nav a:hover { background: var(--plate-hi); }
.nav a[aria-current="page"] { background: var(--blue); color: #06223d; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #1c5a91; }
.nav a:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 1px 0 var(--plate-lo); }

/* ---- severity blocks ------------------------------------------------------------------- */
.tape {
  display: inline-block; font-family: var(--display); font-size: .88rem; line-height: 1; letter-spacing: .03em;
  padding: .5em .75em .55em; border-radius: 5px; white-space: nowrap; position: relative;
}
.tape.act-tonight {
  background: var(--kill); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.3), 0 4px 0 #7a0f0f, 0 0 16px var(--kill-glow);
  animation: neon 1.6s ease-in-out infinite;
}
@keyframes neon { 50% { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.3), 0 4px 0 #7a0f0f, 0 0 30px rgba(255,43,43,.9); } }
.tape.this-week {
  color: #1a1320; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, #1a1320 12px 20px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.35), 0 4px 0 #6b5500;
}
.tape.this-week::before { content: ""; position: absolute; inset: 4px 6px; background: var(--hazard); border-radius: 3px; z-index: 0; }
.tape.this-week > span, .tape.this-week { isolation: isolate; }
.tape.this-week .t { position: relative; z-index: 1; }
.tape.watch { background: var(--stone); color: #1a1320; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.3), 0 4px 0 var(--stone-lo); }
.tape.ignore { background: var(--glass); color: var(--muted); box-shadow: inset 0 0 0 2px rgba(170,220,255,.35), 0 4px 0 rgba(0,0,0,.3); }
.tape.draft { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--edge); }

/* ---- hero: the burning rack ------------------------------------------------------------ */
#hero {
  position: relative; overflow: hidden; margin-top: 6px;
  background:
    radial-gradient(120% 70% at 22% 100%, rgba(255,106,31,.42), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(90,20,30,.55) 100%);
  border-bottom: 18px solid #3b2a1c;
  box-shadow: 0 -6px 0 #5a4028 inset;
}
#hero::after { /* studded baseplate edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  background: var(--studs), #4a3521; background-size: 22px 18px;
}
#heroFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem 2.2rem; align-items: end; padding-block: 36px 34px; }
.rack-slot { cursor: pointer; align-self: end; }
.rack { width: 100%; max-width: 190px; display: block; filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.rack.drop { animation: drop .6s cubic-bezier(.5,0,.8,.3) both; }
.rack.wobble { animation: wobble .45s ease-out; }
@keyframes drop { 0% { transform: translateY(-520px) rotate(-8deg); } 90% { transform: translateY(6px) rotate(1deg); } 100% { transform: none; } }
@keyframes wobble { 20% { transform: rotate(-6deg) scale(1.05); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-2deg); } 100% { transform: none; } }
#hero.shake { animation: shake .4s steps(6) both; }
@keyframes shake { 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.hero-text h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 7.5vw, 5rem); line-height: .95; margin: 0 0 .3em;
  color: #fff; text-shadow: 0 5px 0 #7a0f0f, 0 0 26px rgba(255,106,31,.55);
}
.hero-text .answer { font-family: var(--display); font-size: clamp(1.35rem, 3.2vw, 1.9rem); margin: 0 0 .6rem; color: var(--hazard); text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.hero-text .sub { color: var(--muted); max-width: 58ch; margin: 0 0 1.1rem; }
.btn {
  font: 1.15rem/1 var(--display); color: #fff; background: var(--kill); border: 0; cursor: pointer;
  padding: .6em 1.1em .7em; border-radius: 8px; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.3), 0 6px 0 #7a0f0f;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 1px 0 #7a0f0f; }

/* list of act-tonight items under the hero */
.tonight { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.tonight li {
  background: var(--plate); border-radius: 8px; padding: .85rem 1rem .9rem 1.2rem; box-shadow: var(--bevel);
  border-left: 10px solid var(--kill); position: relative;
}
.tonight a { font-weight: 800; color: var(--text); text-decoration: none; font-size: 1.05rem; }
.tonight a:hover { color: var(--hazard); text-decoration: underline; }
.tonight .fix { color: var(--muted); font-size: .95rem; margin-top: .15rem; }
.tonight .fix::before { content: "Fix: "; color: var(--hazard); font-weight: 800; }

/* ---- list + filters ---------------------------------------------------------------- */
.feed { padding-block: 34px 50px; }
.feed h2, .page h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; margin: 0 0 .7rem; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.filters { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: center; margin: 0 0 1.1rem; }
.filters input[type=search], .filters select {
  font: inherit; font-size: 1rem; font-weight: 700; padding: .6rem .8rem; border: 0; border-radius: 8px;
  background: var(--plate-lo); color: var(--text); box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 0 0 2px var(--edge); min-width: 0;
}
.filters input[type=search] { flex: 1 1 14rem; }
.filters input::placeholder { color: var(--faint); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.row {
  display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .35rem 1rem; align-items: baseline;
  padding: 1.1rem 1.1rem 1rem; border-radius: 10px; background: var(--plate); box-shadow: var(--bevel); position: relative;
}
.row::before { /* studs along the top of each plate */
  content: ""; position: absolute; left: 14px; right: 14px; top: -7px; height: 9px; background: var(--studs); background-size: 22px 9px; opacity: .8;
}
.row .title { font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.row .title:hover { color: var(--hazard); text-decoration: underline; }
.row .meta { grid-column: 2 / 4; color: var(--muted); font-size: .88rem; }
.row time { color: var(--faint); font-size: .88rem; white-space: nowrap; font-weight: 700; }
.tag {
  display: inline-block; font-family: inherit; font-size: .8rem; font-weight: 800; color: var(--text); cursor: pointer; text-decoration: none;
  background: var(--plate-hi); border: 0; border-radius: 4px; padding: .12em .5em .2em; margin: 0 .3em .35em 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 var(--plate-lo);
}
.tag:hover { background: var(--edge); }
.tag[aria-pressed="true"] { background: var(--blue); color: #06223d; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 #1c5a91; }
.tag:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--plate-lo); }
.empty { padding: 1.2rem 1rem; color: var(--muted); }
@media (max-width: 680px) {
  .hero-inner { grid-template-columns: 1fr; }
  .rack-slot { width: 130px; order: -1; }
  .row { grid-template-columns: 1fr auto; }
  .row .tape { grid-column: 1 / 2; justify-self: start; }
  .row time { grid-column: 2; grid-row: 1; }
  .row .title, .row .meta { grid-column: 1 / 3; }
}

/* ---- card / guide pages --------------------------------------------------------------- */
.page { padding-block: 30px 56px; position: relative; }
.page h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.02; margin: .7rem 0 .45rem; text-shadow: 0 4px 0 rgba(0,0,0,.45); }
.page .facts { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; font-weight: 700; }
.page .body { background: var(--plate); border-radius: 12px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--bevel); position: relative; margin-top: 18px; }
.page .body::before { content: ""; position: absolute; left: 16px; right: 16px; top: -8px; height: 10px; background: var(--studs); background-size: 22px 10px; opacity: .8; }
.page .body > :first-child { margin-top: 0; }
.page .body h1 { display: none; }
.page .body h2 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; margin-top: 1.7rem; }
.page .body h3 { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.page .body strong { color: #fff; }
.page .body p > strong:first-child { color: var(--hazard); }
.page .sub { color: var(--muted); }
.burn { position: relative; height: 70px; margin-top: -8px; }
.burn canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
pre { background: var(--bg-deep); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; font: .84rem/1.55 var(--mono); color: #d8f5dc; box-shadow: inset 0 3px 0 rgba(0,0,0,.45), 0 0 0 2px var(--edge); }
code { font-family: var(--mono); font-size: .88em; background: rgba(0,0,0,.28); padding: .05em .3em; border-radius: 3px; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1rem 0; display: block; overflow-x: auto; }
th, td { border: 2px solid var(--edge); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--plate-hi); font-family: var(--display); font-weight: 400; }
.sources { margin-top: 1.5rem; font-size: .92rem; }
.sources h2 { font-size: 1.25rem; }
.sources li { margin-bottom: .3rem; overflow-wrap: anywhere; }
.why { margin-top: 1.1rem; color: var(--faint); font-size: .9rem; }

/* ---- footer: a green baseplate --------------------------------------------------------- */
footer { margin-top: 30px; padding-block: 34px 44px; color: #d8f1d6; font-size: .88rem; position: relative;
  background: var(--studs), #2f7d35; background-size: 22px 14px; box-shadow: inset 0 6px 0 #4ea653; }
footer p { margin: 0 0 .5rem; max-width: 82ch; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
footer .wrap { background: rgba(12, 40, 14, .78); border-radius: 10px; padding: 14px 16px; }
footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}