/* FlyStream · a live stream from a studio where a fly brain paints
   dark studio grey, one sans for reading, one mono for receipts, one red for LIVE */
:root {
  --bg: #0c0d0f; --panel: #121316; --panel-2: #17181c; --rule: #232529; --rule-hi: #30333a;
  --ink: #e6e1d6; --ink-2: #b9b4a9; --ink-3: #7e7a72; --ink-4: #4f4c46;
  --live: #e33d3d; --pick: #7ee0a0; --warm: #f0b26a; --cool: #7fb4ff;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --bar: 52px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 400 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.eyebrow { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- top bar */
.bar { height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand b { font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.brand .tag { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: .12em; padding: 6px 9px; border-radius: 4px; background: var(--live); color: #fff; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
.live.off { background: var(--rule-hi); color: var(--ink-2); }
.live.off i { animation: none; opacity: .5; }
@keyframes pulse { 50% { opacity: .35; } }
.bar-mid { display: flex; gap: 22px; font: 400 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bar nav { display: flex; justify-content: flex-end; gap: 8px; }
.chip { font: 400 11px/1 var(--mono); letter-spacing: .04em; padding: 8px 11px; border: 1px solid var(--rule-hi); border-radius: 6px; color: var(--ink-2); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
a.chip { text-decoration: none; display: inline-flex; align-items: center; background: none; }
.chip[aria-pressed="true"] { border-color: var(--pick); color: var(--pick); }

/* ---------------------------------------------------------------- grid */
.stage-grid { height: calc(100vh - var(--bar)); display: grid; grid-template-columns: 320px minmax(0, 1fr) 380px; gap: 10px; padding: 10px; }
.col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px 9px; border-bottom: 1px solid var(--rule); font-size: 11px; }
.panel-foot { display: flex; justify-content: space-between; padding: 8px 14px 10px; border-top: 1px solid var(--rule); font: 400 10px/1.4 var(--mono); color: var(--ink-3); }

/* brain */
.brain-panel { flex: 0 0 auto; }
#brain { display: block; width: 100%; height: 300px; background: #0a0b0d; }
/* thoughts */
.thoughts-panel { flex: 1 1 auto; }
.thoughts { list-style: none; margin: 0; padding: 8px 0 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-hi) transparent; font: 400 11.5px/1.5 var(--mono); flex: 1 1 auto; min-height: 0; }
.thoughts li { display: grid; grid-template-columns: 46px 74px minmax(0, 1fr); gap: 0 8px; padding: 3px 14px; color: var(--ink-2); }
.thoughts li .t { color: var(--ink-4); }
.thoughts li .k { color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; font-size: 10px; padding-top: 1px; }
.thoughts li .x { min-width: 0; overflow-wrap: anywhere; }
.thoughts li.pick .k, .thoughts li.pick .x { color: var(--pick); }
.thoughts li.taste .k { color: var(--pick); }
.thoughts li.taste .x { color: var(--ink-2); }
.thoughts li.cook .k, .thoughts li.cook .x, .thoughts li.image .k, .thoughts li.image .x { color: var(--warm); }
.thoughts li.commentary { grid-template-columns: 46px minmax(0, 1fr); padding: 8px 14px 10px; margin: 4px 0; background: var(--panel-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.thoughts li.commentary .x { color: var(--ink); font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
.thoughts li.commentary .x::before { content: "commentary · "; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.thoughts li.event .x { color: var(--ink-3); }
.thoughts li.buzzer .k, .thoughts li.buzzer .x { color: var(--live); }
.thoughts li.fall .k, .thoughts li.fall .x { color: var(--cool); }
.thoughts li.doors .k { color: var(--ink-2); }
.thoughts li.story { grid-template-columns: 46px minmax(0, 1fr); padding: 8px 14px 10px; margin: 4px 0; background: var(--panel-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.thoughts li.story .x { color: var(--ink); font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
.thoughts li.story .x::before { content: "story · "; color: var(--warm); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* stage */
.center { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.stage { position: relative; background: #0a0b0d; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; min-height: 0; }
#scene { display: block; width: 100%; height: 100%; }
.hud { position: absolute; display: grid; gap: 4px; font: 400 11px/1.3 var(--mono); color: var(--ink-2); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud-tl { left: 16px; top: 14px; }
.hud-tr { right: 16px; top: 14px; text-align: right; }
.hud-bl { left: 16px; bottom: 14px; max-width: 60%; }
.hud-br { right: 16px; bottom: 14px; text-align: right; }
#hud-mode { font-size: 12px; color: var(--ink); text-transform: lowercase; }
/* the clock: the round's seconds, or what the tower is doing between rounds */
.clock { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 12px; padding: 8px 14px 9px; border-radius: 10px; background: rgba(12,13,15,.82); border: 1px solid var(--rule-hi); backdrop-filter: blur(6px); min-width: 220px; max-width: 70%; }
.clock-label { font: 400 11px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-num { font: 300 26px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.clock-bar { grid-column: 1 / -1; display: block; height: 2px; background: var(--rule-hi); border-radius: 2px; overflow: hidden; }
.clock-bar b { display: block; height: 100%; width: 0; background: var(--pick); transition: width .45s linear; }
.clock[data-phase="fall"] .clock-label, .clock[data-phase="rise"] .clock-label { color: var(--cool); }
.clock[data-phase="bottom"] .clock-label { color: var(--warm); }
.clock[data-phase="fall"] .clock-bar b, .clock[data-phase="bottom"] .clock-bar b, .clock[data-phase="rise"] .clock-bar b { width: 40% !important; animation: sweep 1.6s ease-in-out infinite alternate; }
@keyframes sweep { from { margin-left: 0; } to { margin-left: 60%; } }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--warm); border-right-color: transparent; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the descent: six pieces, one per floor, and the story they make */
.descent { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.piece, .story-line { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; min-height: 64px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.piece .k, .story-line .k { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece .w { font-size: 14px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece.filled .w { color: var(--ink); }
.piece.filled { border-color: var(--rule-hi); box-shadow: inset 0 0 0 1px rgba(126,224,160,.18); }
.piece.filled .k { color: var(--pick); }
.piece.skipped .w { color: var(--ink-3); font-style: italic; }
.piece.on { border-color: var(--ink-3); }
.piece.on .k { color: var(--ink); }
.piece.on .w { color: var(--ink-2); }
.piece .h { font: 400 10px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-line { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: baseline; gap: 14px; padding: 9px 12px; }
.story-line .w { font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.piece.just { animation: picked .8s ease-out; }
@keyframes picked { 0% { box-shadow: inset 0 0 0 2px var(--pick); } 100% { box-shadow: inset 0 0 0 1px rgba(126,224,160,.18); } }

/* log */
.log-panel { flex: 1 1 auto; }
.log { list-style: none; margin: 0; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-hi) transparent; flex: 1 1 auto; min-height: 0; }
.log li.empty { padding: 14px; font-family: var(--mono); font-size: 11px; }
.entry { border-bottom: 1px solid var(--rule); padding: 12px 14px 14px; display: grid; gap: 8px; }
.entry img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #0a0b0d; cursor: zoom-in; display: block; }
.entry .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 400 10px/1.3 var(--mono); color: var(--ink-3); }
.entry .head b { font-weight: 500; color: var(--ink); font-size: 12px; font-family: var(--sans); }
.entry .title { font: 400 15px/1.2 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.entry .title small { display: block; color: var(--ink-4); font-size: 10px; font-family: var(--mono); margin-top: 3px; }
.entry .prompt-line { font-family: var(--mono); font-size: 11px; color: var(--ink-2); overflow-wrap: anywhere; }
.entry .picks { display: grid; gap: 2px; font: 400 10.5px/1.4 var(--mono); color: var(--ink-3); }
.entry .picks b { font-weight: 400; color: var(--pick); }
.entry .com { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.entry .com::before { content: "commentary · "; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.entry .story { font-size: 13px; line-height: 1.5; color: var(--ink); }
.entry .pieces { display: grid; gap: 2px; font: 400 10.5px/1.4 var(--mono); color: var(--ink-3); }
.entry .pieces b { font-weight: 400; color: var(--pick); }
.entry .pending { aspect-ratio: 1; border-radius: 6px; background: #0a0b0d; border: 1px dashed var(--rule-hi); display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 11px/1 var(--mono); color: var(--warm); }
.entry .pending.failed { color: var(--ink-3); border-style: solid; aspect-ratio: auto; padding: 12px; }
.entry:first-child { background: var(--panel-2); }

/* lightbox, about */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(6,7,8,.92); display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 92vh); max-height: 82vh; border-radius: 8px; }
.lightbox-cap { font: 400 12px/1.5 var(--mono); color: var(--ink-2); max-width: 80ch; text-align: center; padding: 12px 0 0; }
.about { position: fixed; inset: 0; z-index: 60; background: rgba(6,7,8,.86); display: grid; place-items: center; padding: 24px; overflow: auto; }
.about[hidden] { display: none; }
.about-box { max-width: 66ch; background: var(--panel); border: 1px solid var(--rule-hi); border-radius: 12px; padding: 26px 28px; display: grid; gap: 12px; }
.about h2 { margin: 0; font: 300 28px/1.05 var(--sans); letter-spacing: -.025em; }
.about p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.about .chip { justify-self: start; }

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1280px) {
  .stage-grid { grid-template-columns: 280px minmax(0, 1fr) 320px; }
  .brand .tag { display: none; }
  .clock { max-width: 46%; min-width: 0; }
  .hud-tr { max-width: 30%; }
  .hud-tr > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  .bar { grid-template-columns: 1fr auto; padding: 0 12px; gap: 8px; }
  .bar-mid { display: none; }
  .brand { gap: 10px; }
  .brand b { font-size: 15px; }
  .live { padding: 5px 7px; font-size: 10px; white-space: nowrap; }
  .chip { padding: 7px 9px; }
  .hud { font-size: 10px; }
  .hud-tl .eyebrow, .hud-bl .eyebrow { display: none; }
  .hud-tr { max-width: 46%; }
  .hud-bl { max-width: 52%; bottom: 10px; left: 12px; }
  .hud-br { max-width: 44%; bottom: 10px; right: 12px; }
  .hud-tl { top: 10px; left: 12px; }
  .hud-tr { top: 10px; right: 12px; }
  .clock { top: 44px; min-width: 0; max-width: 88%; padding: 6px 10px 7px; gap: 0 10px; }
  .clock-num { font-size: 20px; }
  .stage-grid { height: auto; grid-template-columns: minmax(0, 1fr); }
  .center { order: 0; }
  .left { order: 1; }
  .right { order: 2; }
  .stage { aspect-ratio: 1 / 1; }
  .hud-tr, .hud-bl, .hud-br { grid-template-columns: minmax(0, 1fr); }
  .hud-tr > *, .hud-bl > *, .hud-br > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .descent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piece { min-height: 56px; padding: 8px 10px; }
  .thoughts { max-height: 320px; }
  .log { max-height: none; }
  #brain { height: 240px; }
}