:root {
  --ground: #140f26;
  --panel: #241b42;
  --deep: #0c0818;
  --ink: #f3e3c3;
  --quiet: #b9a9d9;
  --dim: #8a7bb0;
  --gold: #f2c46b;
  --red: #e2552b;
  --news: #c4302b;
  --green: #3fae4f;
  --cream: #fff6e0;
  --px: 'Press Start 2P', monospace;
  --vt: 'VT323', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--vt); font-size: 22px; line-height: 1.25; }
[hidden] { display: none !important; }

/* Header and heat bar */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px; background: var(--deep); border-bottom: 4px solid #000; }
.brand { display: flex; flex-direction: column; gap: 6px; }
.kicker { font-family: var(--px); font-size: 10px; letter-spacing: 2px; color: var(--quiet); }
.strap { font-size: 22px; line-height: 1; color: var(--quiet); }
h1 { margin: 0; font-family: var(--px); font-size: clamp(22px, 5vw, 34px); color: var(--gold); text-shadow: 3px 3px 0 #000; }
.heat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heat-word { font-family: var(--px); font-size: 10px; color: var(--quiet); }
.meter { display: flex; gap: 3px; padding: 3px; background: #000; }
.meter i { display: block; width: 10px; height: 22px; background: #2a2145; }
.heat-label { font-size: 22px; white-space: nowrap; }
.heat-label b { font-weight: 400; }

main { max-width: 1120px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 16px; }

/* Topic */
.topic { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: baseline; background: var(--gold); color: #2a1608; border: 4px solid #000; box-shadow: 4px 4px 0 #000; padding: 10px 14px; }
.topic-tag { font-family: var(--px); font-size: 10px; background: var(--news); color: var(--cream); padding: 6px 8px; line-height: 1.4; }
.topic-text { font-size: 26px; flex: 1 1 260px; }
.topic-link { font-family: var(--px); font-size: 10px; color: #2a1608; }
.chapter a { color: var(--cream); }

/* Arena */
.arena { position: relative; height: clamp(380px, 52vw, 600px); background: #2b2152; border: 4px solid #000; overflow: hidden; }
.sky { position: absolute; inset: 0 0 auto 0; height: 18%; background: #3d2f6e; }
.stands { position: absolute; left: 0; right: 0; top: 13%; height: 15%; border-top: 4px solid #000; border-bottom: 4px solid #000; background-image: repeating-linear-gradient(90deg, #7d6650 0 36px, #3a2a20 36px 52px); overflow: hidden; }
.crowd { position: absolute; inset: 6px 2%; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 8px 10px; }
.crowd i { width: 14px; height: 16px; border: 2px solid #000; display: block; }
.wall { position: absolute; left: 0; right: 0; top: 28%; height: 6%; background: #9a7d60; border-bottom: 4px solid #000; }
.sand { position: absolute; left: 3%; right: 3%; top: 37%; bottom: 3%; background: #e2b96f; border: 6px solid #a8743b; border-radius: 50%; }
.torch { position: absolute; top: 20%; width: 10px; height: 26px; background: #5a3a24; border: 2px solid #000; }
.torch::before { content: ""; position: absolute; left: -4px; top: -16px; width: 14px; height: 14px; background: #ff8a2a; border: 2px solid #000; animation: flicker 1.2s steps(2) infinite; }
.torch.left { left: 3%; }
.torch.right { right: 3%; }
@keyframes flicker { 50% { background: #ffc24a; } }

.state-sign { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); font-family: var(--px); font-size: 11px; line-height: 1.6; text-align: center; background: var(--deep); color: var(--ink); border: 3px solid #000; padding: 10px 12px; z-index: 6; }

.char { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -100%); transition: left 1.6s steps(10), top 1.6s steps(10); z-index: 3; }
.char .sprite { width: clamp(44px, 7.5vw, 92px); height: clamp(44px, 7.5vw, 92px); }
.char .sprite svg { width: 100%; height: 100%; display: block; }
.char.face-left .sprite svg { transform: scaleX(-1); }
.char .sprite { animation: breathe 3.2s steps(2) infinite; animation-delay: var(--delay, 0s); }
@keyframes breathe { 50% { transform: translateY(-2px); } }
.char.speaking .sprite { animation: bob 0.5s steps(2) 6; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.char.fidget { margin-left: var(--step, 6px); }
.char { transition: left 1.6s steps(10), top 1.6s steps(10), margin-left 0.8s steps(4), margin-top 0.8s steps(4); }
.next { color: var(--quiet); }

.ian { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--deep); border: 4px dashed #3d3166; padding: 12px; }
.ian label { display: flex; flex-direction: column; gap: 6px; font-family: var(--px); font-size: 10px; color: var(--gold); flex: 999 1 280px; }
.ian .only-you { color: var(--dim); }
.ian input { font-family: var(--vt); font-size: 22px; min-height: 44px; padding: 6px 10px; background: var(--cream); color: #1a1430; border: 3px solid #000; }
.ian button { font-family: var(--px); font-size: 10px; min-height: 44px; padding: 10px 14px; background: #c4572b; color: var(--cream); border: 3px solid #000; cursor: pointer; }
.ian button.quiet { background: #2a2145; color: var(--ink); }
.tag { font-family: var(--px); font-size: 9px; line-height: 1.5; background: var(--deep); color: var(--ink); padding: 4px 6px; border: 2px solid #000; white-space: nowrap; }
.char.speaking .tag { background: var(--gold); color: var(--deep); }
.char { --note-left: 50%; --note-shift: -50%; }
.note { position: absolute; top: calc(100% + 4px); left: var(--note-left); transform: translateX(var(--note-shift)); width: max-content; max-width: 130px; font-size: 18px; line-height: 1; color: var(--quiet); background: rgba(12, 8, 24, 0.85); padding: 2px 5px; text-align: center; }
.char.edge-left { --note-left: 0; --note-shift: 0; }
.char.edge-left .note { text-align: left; }
.char.edge-right { --note-left: 100%; --note-shift: -100%; }
.char.edge-right .note { text-align: right; }

.feud { position: absolute; transform: translateX(-50%); z-index: 4; }
.feud span { display: block; font-family: var(--px); font-size: 9px; background: var(--news); color: var(--cream); padding: 4px 6px; border: 2px solid #000; }
.allies .bond { position: absolute; transform: translateX(-50%); z-index: 4; font-family: var(--px); font-size: 9px; background: var(--gold); color: var(--deep); padding: 4px 6px; border: 2px solid #000; }

.bubble { position: absolute; z-index: 5; max-width: min(380px, 60%); background: var(--cream); color: #1a1430; border: 4px solid #000; box-shadow: 4px 4px 0 #000; padding: 10px 12px; font-size: 22px; }
.bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--cream); border-right: 4px solid #000; border-bottom: 4px solid #000; }
.bubble.tail-bottom::after { left: var(--tail, 50%); bottom: -11px; margin-left: -7px; transform: rotate(45deg); }
.bubble.tail-left::after { left: -11px; top: var(--tail, 24px); margin-top: -7px; transform: rotate(135deg); }
.bubble.tail-right::after { right: -11px; top: var(--tail, 24px); margin-top: -7px; transform: rotate(-45deg); }
.char.shoved { margin-left: var(--shove-x, 0); margin-top: var(--shove-y, 0); }
.grumble { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 130px; font-size: 16px; line-height: 1.1; font-style: italic; background: var(--deep); color: var(--quiet); border: 2px solid #000; padding: 3px 7px; z-index: 6; animation: grumble 3.5s steps(4) forwards; }
@keyframes grumble { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.bubble-who { display: block; font-family: var(--px); font-size: 9px; color: #23304d; margin-bottom: 6px; line-height: 1.5; }

/* Overnight: bedtime, night, waking */
.arena .sky, .arena .stands, .arena .wall, .arena .sand { transition: background 4s steps(8), filter 4s steps(8); }
.arena[data-phase="night"] .sky { background: #0b0820 radial-gradient(#fff6e0 1px, transparent 1.5px) 0 0 / 46px 23px; }
.arena[data-phase="night"] .sky::after { content: ""; position: absolute; right: 12%; top: 18%; width: 22px; height: 22px; background: #fff6e0; border: 3px solid #000; box-shadow: inset -7px 0 0 #d9c9a0; }
.arena[data-phase="bedtime"] .sky { background: #1c1440; }
.arena[data-phase="waking"] .sky { background: linear-gradient(#5a3f86 0 30%, #c2648a 30% 65%, #f2a65a 65%); }
.arena[data-phase="night"] .stands, .arena[data-phase="night"] .wall, .arena[data-phase="night"] .sand { filter: brightness(0.42) saturate(0.6); }
.arena[data-phase="bedtime"] .stands, .arena[data-phase="bedtime"] .wall, .arena[data-phase="bedtime"] .sand { filter: brightness(0.62) saturate(0.75); }
.arena[data-phase="waking"] .stands, .arena[data-phase="waking"] .wall, .arena[data-phase="waking"] .sand { filter: brightness(0.86) sepia(0.15); }
.arena[data-phase="night"] .torch::before { background: #7a3a1a; animation: none; height: 8px; top: -10px; }

.arena:not([data-phase="day"]) .note { max-width: 160px; }
.char .zzz, .char .mug { display: none; }
.char.asleep .sprite { animation: snooze 4.4s steps(2) infinite; animation-delay: var(--delay, 0s); }
.char.asleep .sprite svg, .char.asleep.face-left .sprite svg { transform: translateY(22%) rotate(-90deg) scale(0.86); }
@keyframes snooze { 50% { transform: translateY(1px); } }
.char.asleep .zzz { display: block; position: absolute; left: 62%; top: 14%; font-family: var(--px); color: var(--cream); text-shadow: 2px 2px 0 #000; pointer-events: none; }
.zzz i { position: absolute; font-style: normal; font-size: 9px; opacity: 0; animation: zfloat 4.5s steps(6) infinite; }
.zzz i:nth-child(2) { animation-delay: 1.5s; font-size: 11px; }
.zzz i:nth-child(3) { animation-delay: 3s; font-size: 13px; }
@keyframes zfloat { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -34px); } }
.char.yawning .sprite { animation: stretch 1.4s steps(2) infinite; }
@keyframes stretch { 50% { transform: translateY(-4px) scaleY(1.06); } }
.char.sleepy .sprite svg { transform: rotate(-7deg); }
.char.sleepy.face-left .sprite svg { transform: scaleX(-1) rotate(-7deg); }
.char.breakfast .mug { display: block; position: absolute; left: 82%; top: calc(clamp(44px, 7.5vw, 92px) - 22px); width: 20px; height: 20px; }
.char.face-left.breakfast .mug { left: -2px; }
.mug svg { width: 100%; height: 100%; display: block; }

.ian .watching { flex: 1 1 100%; margin: 0; font-size: 20px; color: var(--quiet); }
.foot { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; font-size: 18px; line-height: 1.3; color: var(--dim); }
.foot p { margin: 0 0 6px; }
.foot p + p { font-size: 16px; }

/* Sharing */
.line { grid-template-columns: 64px minmax(0, 1fr) auto; }
.share { align-self: start; font-family: var(--px); font-size: 8px; line-height: 1; color: var(--dim); background: transparent; border: 2px solid #3d3166; padding: 8px 8px; min-height: 30px; cursor: pointer; }
.share:hover, .share:focus-visible { color: var(--ink); border-color: var(--quiet); }
.bubble-who { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bubble .share { color: #5a5070; border-color: #c9bfa8; padding: 6px; min-height: 26px; font-size: 7px; }

/* A single shared line */
.one-line { max-width: 760px; }
.scene { display: flex; align-items: center; gap: 22px; padding: 20px 4px 8px; }
.scene-who { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.scene-sprite { width: clamp(72px, 18vw, 132px); height: clamp(72px, 18vw, 132px); }
.scene-sprite svg { width: 100%; height: 100%; display: block; }
.scene-bubble { position: relative; max-width: none; flex: 1 1 auto; font-size: clamp(22px, 4.6vw, 30px); line-height: 1.15; }
.scene-bubble::after { top: 50%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.big { flex: 1 1 240px; display: block; text-align: center; font-family: var(--px); font-size: 11px; line-height: 1.5; padding: 16px; min-height: 52px; background: #c4572b; color: var(--cream); border: 4px solid #000; box-shadow: 4px 4px 0 #000; text-decoration: none; cursor: pointer; }
.big.quiet { background: #2a2145; color: var(--ink); }
.log-title { margin: 6px 16px 8px; font-family: var(--px); font-size: 10px; color: var(--quiet); font-weight: 400; }
.line.this { background: var(--panel); }
.one-line .line { grid-template-columns: 64px minmax(0, 1fr); }

/* Catch-up */
.catchup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--green); color: var(--deep); border: 4px solid #000; box-shadow: 4px 4px 0 #000; padding: 10px 14px; font-family: var(--px); font-size: 10px; line-height: 1.6; }
.catchup a { color: var(--deep); background: var(--cream); border: 3px solid #000; padding: 10px; text-decoration: none; }

/* Log */
.log { background: var(--deep); border: 4px solid #000; padding: 6px 0 10px; display: flex; flex-direction: column; }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 6px 16px; }
.line .t { color: var(--dim); }
.line b { font-weight: 400; }
.line .to { color: var(--quiet); }
.line .to.disagree, .line .to.mock { color: var(--red); }
.line .to.agree { color: var(--gold); }
.line.fresh { animation: arrive 1.2s steps(6); }
@keyframes arrive { from { background: var(--panel); } }
.line.typing .body { color: var(--dim); }
.chapter { margin: 6px 16px; padding: 6px 10px; background: var(--news); color: var(--cream); font-family: var(--px); font-size: 10px; line-height: 1.6; }
.left-here { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--green); font-size: 20px; }
.left-here::before, .left-here::after { content: ""; flex: 1; border-top: 3px dashed var(--green); }

.closed-door { background: var(--deep); border: 4px solid #000; padding: 32px 20px; text-align: center; }
.closed-door h2 { margin: 0 0 12px; font-family: var(--px); font-size: 13px; line-height: 1.6; color: var(--gold); }
.closed-door p { margin: 0; }
.closed-door .signin { margin-top: 18px; font-size: 18px; }
.closed-door .signin a { color: var(--dim); }

@media (max-width: 640px) {
  body { font-size: 20px; }
  .arena { height: 540px; }
  .sky { height: 24%; }
  .stands { top: 19%; }
  .wall { top: 34%; }
  .sand { top: 43%; }
  .heat-label { white-space: normal; font-size: 20px; }
  .line { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; }
  .one-line .line { grid-template-columns: 50px minmax(0, 1fr); }
  .scene { gap: 14px; }
  .tag { font-size: 7px; padding: 3px 4px; }
  .tag .guestmark { display: none; }
  .note { font-size: 15px; max-width: 90px; }
  .arena:not([data-phase="day"]) .note { font-size: 14px; max-width: 90px; }
  .bubble { font-size: 17px; line-height: 1.15; padding: 8px 10px; max-width: 94%; }
  .bubble-who { margin-bottom: 4px; }
  .crowd i { width: 10px; height: 12px; }
  .meter i { width: 8px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .char, .char.fidget { transition: none; }
  .char.fidget { margin-left: 0; }
  .grumble { animation: none; }
  .torch::before, .char .sprite, .char.speaking .sprite, .line.fresh, .char.asleep .sprite, .char.yawning .sprite { animation: none; }
  .zzz i { animation: none; opacity: 1; }
  .zzz i:nth-child(2) { transform: translate(7px, -12px); }
  .zzz i:nth-child(3) { transform: translate(14px, -26px); }
}