:root{
  /* Corima theme: black + pink */
  --bg1:#050507;
  --bg2:#0b0b12;

  --card:#ffffff0e;
  --card2:#ffffff12;

  --text:#ffffff;
  --muted:#ffffffb0;

  --pink:#ff4da6;
  --hotpink:#ff2d95;

  --line:#ffffff1a;
  --shadow: 0 20px 60px rgba(0,0,0,.65);
  --radius: 22px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --modalMaxW: 980px;
  --modalPad: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(255,77,166,.22) 0%, transparent 58%),
    radial-gradient(900px 600px at 85% 35%, rgba(255,45,149,.16) 0%, transparent 58%),
    radial-gradient(900px 700px at 30% 90%, rgba(255,77,166,.12) 0%, transparent 58%),
    linear-gradient(160deg, var(--bg1), var(--bg2));

  /* Desktop: cinematic, no scroll on the main page */
    overflow-y:auto;
    overflow-x:hidden;
}

.bg-hero{
  position:fixed; inset:-40px;
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.1);
  opacity: .18;
  transform: scale(1.08);
  z-index:-2;
  pointer-events:none;
}

.grain{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.28;
  z-index:-1;
  pointer-events:none;
}

.wrap{
  min-height: 100svh;
  min-height: 100dvh;
  display:grid;
  place-items:start center;
  padding:20px;
}

.card{
  width:min(920px, 96vw);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
    overflow:visible;
  position:relative;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,45,149,.16), rgba(255,77,166,.08), rgba(255,45,149,.12));
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:650;
  flex-wrap:wrap;
}

.build{ opacity:.9; }
.buildNum{ color:var(--pink); font-weight:800; }

.badge{
  font-family:var(--mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  white-space:nowrap;
}

.content{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  min-height:auto;
  padding-bottom: 2px; /* tiny nudge so borders don't clip when growing */
}

.left{ padding:28px 28px 24px; }

.right{
  border-left:1px solid var(--line);
  padding:22px;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30));
}

h1{
  margin:0 0 10px;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.08;
  letter-spacing:-.6px;
}

.subtitle{
  color:var(--muted);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height:1.45;
  max-width: 54ch;
  margin:0 0 18px;
}

.prompt{
  margin-top:18px;
  padding:18px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
}

.question{
  font-size: clamp(22px, 2.4vw, 34px);
  margin:0 0 14px;
  letter-spacing:-.4px;
}

.btnrow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  padding:12px 16px;
  border-radius: 14px;
  font-weight:650;
  cursor:pointer;
  color:var(--text);
  background:rgba(255,255,255,.07);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-yes{
  background: linear-gradient(90deg, rgba(255,45,149,.95), rgba(255,77,166,.70));
  color:#0a0a0d;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(255,45,149,.22);
}

/* NO starts inline beside YES (normal flow). JS switches to fixed after first jump. */
#noBtn{
  position: static;
  z-index: 30;
}

.hint{
  margin-top:12px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.74);
}

/* =========================
   Prompt meta + inline “constant” docstring
   (GLOBAL — not inside mobile)
   ========================= */
.promptMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.promptChip{
  font-family:var(--mono);
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.promptChip strong{
  color: var(--text);
  font-weight:800;
}

.promptChipBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-family:var(--mono);
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}

.promptChipBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.09);
}

.promptChipBtn:active{
  transform: translateY(0px) scale(.99);
}

.docWrap{
  margin: 0 0 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  overflow:hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.docTerm{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.45;
  padding:12px 12px;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;

  /* make it feel “compiled” */
  background:
    linear-gradient(180deg, rgba(255,45,149,.06), rgba(0,0,0,.18));
}

/* =========================
   System Panel helper: make constant row + button align cleanly
   ========================= */
.stat .statRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.stat .statRow .v{
  margin:0;
}
.stat .statRow .promptChipBtn{
  margin-left:auto;
}

/* Right side */
.panelTitle{ font-weight:750; letter-spacing:.2px; margin:0 0 10px; }

.stat{
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  margin-bottom:12px;
}
.stat .k{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.70);
  margin-bottom:6px;
}
.stat .v{ font-size:14px; color:var(--text); line-height:1.35; }

/* Two countdown blocks */
.countdownGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 12px;
}

.unlockBlock{
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: rgba(0,0,0,.22);
}

.unlockTitle{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.70);
  margin-bottom:6px;
  letter-spacing:.2px;
}

.unlockValue{
  font-size:14px;
  color:var(--text);
  line-height:1.35;
}

.unlockStatus{
  margin-top:6px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.72);
}

/* Valentine unlock section */
.valentineUnlock{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mediaCard{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:12px;
}

.mediaCardTitle{
  font-weight:800;
  letter-spacing:-.3px;
  margin-bottom:8px;
}

/* Memory timeline */
.timelineGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.timelineCard{
  min-height:210px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,77,166,.08), rgba(0,0,0,.22));
}

.timelineCardLocked{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
}

.timelineCardUnlocked{
  border-color: rgba(255,77,166,.30);
  box-shadow: 0 14px 34px rgba(255,45,149,.12);
}

.timelineTop{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}

.timelineType,
.timelineDate,
.timelineMeta{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.70);
}

.timelineCard h3{
  margin:0;
  font-size:18px;
  line-height:1.15;
  letter-spacing:0;
}

.timelineCard p{
  margin:0;
  color:rgba(255,255,255,.80);
  line-height:1.42;
  font-size:14px;
}

.timelineMeta{
  margin-top:auto;
  color:rgba(255,255,255,.76);
}

.timelineReplay{
  width:100%;
}

.timelineReplay:disabled{
  cursor:not-allowed;
  opacity:.55;
  transform:none;
  box-shadow:none;
}

/* Signal board */
.signalBoard{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,45,149,.08), rgba(0,0,0,.24));
}

.signalIntro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.signalTitle{
  font-weight:800;
  font-size:18px;
  line-height:1.15;
}

.signalSub,
.signalHint,
.signalNoteLabel{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.70);
}

.signalButtons{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.signalBtn{
  min-height:44px;
  font-family:var(--mono);
  font-size:12px;
}

.signalBtnActive{
  border-color: rgba(255,77,166,.55);
  background: rgba(255,45,149,.20);
  box-shadow: 0 10px 24px rgba(255,45,149,.12);
}

.signalNote{
  width:100%;
  resize:vertical;
  min-height:76px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(0,0,0,.28);
  color:var(--text);
  padding:12px;
  font: 14px/1.4 var(--sans);
}

.signalNote:focus{
  outline:2px solid rgba(255,77,166,.35);
  outline-offset:2px;
}

.signalActions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.signalFeed{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.signalItem,
.signalEmpty{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.22);
  padding:10px 12px;
}

.signalItemTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:13px;
}

.signalItemTop strong{
  color:var(--text);
}

.signalItemTop span{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}

.signalItemNote{
  margin-top:6px;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.4;
}

/* Long-distance hub */
.hubBand{
  padding:0 18px 18px;
}

.hubHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px 16px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,77,166,.12), transparent 34%),
    rgba(0,0,0,.22);
}

.hubLauncher{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
  padding:12px;
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.hubLaunchBtn{
  appearance:none;
  min-height:46px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.hubLaunchBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

.hubLaunchBtnActive{
  color:#09090d;
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(90deg, rgba(255,45,149,.95), rgba(255,77,166,.72));
  box-shadow: 0 12px 26px rgba(255,45,149,.16);
}

.hubPanels{
  border:1px solid rgba(255,255,255,.12);
  border-radius:0 0 16px 16px;
  background: rgba(0,0,0,.20);
  padding:14px;
}

.hubPanel{
  display:none;
}

.hubPanelActive{
  display:block;
}

.controlPanel,
.arcadePanel{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.24));
  padding:14px;
}

.heartbeatPanel,
.controlPanel:nth-child(5){
  grid-column: 1 / -1;
}

.controlPanelHead,
.arcadeHud{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.controlTitle{
  font-weight:800;
  font-size:18px;
  line-height:1.15;
}

.controlSub,
.controlHint{
  margin-top:4px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.70);
}

.controlButtonGrid,
.questList{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.controlBtn,
.questBtn{
  min-height:44px;
  font-family:var(--mono);
  font-size:12px;
}

.controlTextArea,
.controlInput{
  width:100%;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(0,0,0,.28);
  color:var(--text);
  padding:12px;
  font: 14px/1.4 var(--sans);
}

.controlTextArea{
  min-height:78px;
  resize:vertical;
}

.controlTextArea:focus,
.controlInput:focus{
  outline:2px solid rgba(255,77,166,.35);
  outline-offset:2px;
}

.controlActions,
.arcadeControls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.controlFeed{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.controlLine,
.controlEntry,
.promiseDraw{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.22);
  padding:10px 12px;
}

.controlLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.controlLine strong,
.controlEntry strong{
  color:var(--text);
}

.controlLine span{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.65);
  text-align:right;
}

.controlEntry p{
  margin:6px 0 0;
  color:rgba(255,255,255,.78);
  line-height:1.4;
}

.promiseDraw{
  margin-top:12px;
  font-family:var(--mono);
  color:rgba(255,255,255,.80);
}

/* Mini arcade */
.arcadePanel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hubPanel[data-hub-panel="arcade"] .arcadePanel{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,77,166,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.26));
}

.arcadeStats{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

#hugArcade{
  width:100%;
  aspect-ratio: 2 / 1;
  min-height:220px;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,77,166,.22);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,77,166,.16), transparent 35%),
    rgba(0,0,0,.30);
  touch-action:none;
}

.terminal{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.5;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  white-space:pre-wrap;
  min-height: 170px;
  margin:0;
  overflow-wrap:anywhere;
}

.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 14px 18px;
  border-top:1px solid var(--line);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  background: rgba(0,0,0,.14);
  flex-wrap:wrap;
}

/* Confetti canvas */
#confetti{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 60;
  display:none;
}
#confetti.show{ display:block; }

/* =========================
   OVERLAYS + MODAL (Single scroll container)
   ========================= */
.overlay{
  position:fixed; inset:0;
  display:none;

  /* important: use overlay as the only scroll container */
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  padding:24px;
  background: rgba(0,0,0,.60);
  z-index: 50;

  /* align modal to top so long content feels natural */
  justify-content:center;
  align-items:flex-start;
}
.overlay.show{ display:flex; }

.modal{
  width:min(var(--modalMaxW), 96vw);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(10,10,16,.94), rgba(6,6,10,.94));
  box-shadow: var(--shadow);

  /* KEY: allow modal to be as tall as needed */
  max-height: none;
  overflow: visible;

  display:flex;
  flex-direction:column;
}

/* Vertical video: centered, tall, and fullscreen-friendly */
.videoWrap{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);

  /* Center the portrait video inside */
  display:flex;
  align-items:center;
  justify-content:center;

  /* A little padding looks nicer for portrait media */
  padding:10px;

  /* Keep it from becoming an enormous wide block on desktop */
  max-width: 520px;
  margin: 0 auto;
}

.videoWrap video{
  display:block;

  /* Let the video keep its natural 9:16 shape */
  width:auto;
  height:auto;

  /* Make it big + readable */
  max-height: 70vh;
  max-width: 100%;

  background:#000;
  border-radius:12px;

  /* Avoid any accidental stretching */
  object-fit: contain;
}

/* Mobile: give it a bit more height */
@media (max-width: 860px){
  .videoWrap{
    max-width: 100%;
    padding:8px;
  }
  .videoWrap video{
    max-height: 78vh;
  }
}


/* Sticky header works with overlay scrolling */
.modalHead{
  position: sticky;
  top: 0;
  z-index: 10;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(255,45,149,.10);
  backdrop-filter: blur(10px);
}

.x{
  cursor:pointer;
  border-radius: 12px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  user-select:none;
}

/* Default modal body (good for the “No” troll modal) */
.modalBody{
  padding: var(--modalPad);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;

  /* KEY: no internal scrollbars */
  overflow: visible;
}

.modalBody img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

/* =========================
   FIX: Play overlay cat image (portrait GIF)
   ========================= */
#playOverlay .modalBody{
  align-items: start;
}

#playOverlay .modalBody img{
  /* Let portrait media show fully (no awkward crop) */
  height: auto;
  max-height: min(420px, 52vh);
  width: 100%;

  /* Key change */
  object-fit: contain;

  /* Make it look intentional in the empty space */
  background: rgba(0,0,0,.22);
  padding: 10px;

  /* Keep your existing style language */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Optional: if it ever feels too narrow/wide, lock the natural portrait ratio */
#playOverlay .modalBody img{
  aspect-ratio: 335 / 431;
}

.modalBody h2{ margin:0 0 8px; font-size:22px; letter-spacing:-.2px;}
.modalBody p{ margin:0 0 12px; color:rgba(255,255,255,.78); line-height:1.45; }

/* Reveal becomes a normal section (not cramped footer) */
.reveal{
  padding: 14px 16px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);

  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

/* Pills */
.pill{
  font-family:var(--mono);
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}

/* Final content styling */
.finalText{
  width:100%;
  max-width: 86ch;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.finalTitle{ font-weight:800; letter-spacing:-.3px; font-size:16px; margin:0; }

.patchNotes{
  font-family:var(--mono);
  font-size:12.5px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.10);
  padding:12px;
  border-radius:16px;
}

.poemTitle{ font-weight:800; margin-bottom:6px; }
.poem{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,45,149,.08);
}

.psst{ font-family:var(--mono); font-size:12px; opacity:.85; }

/* =========================
   YES MODAL: one-column doc layout
   ========================= */
#yesOverlay .modal{
  width: min(980px, 96vw);
}

#yesOverlay .modalBody{
  display:block;          /* kill the 2-column grid */
}

#yesOverlay .modalBody > *{
  width:100%;
}

/* tighten headings in yes content if needed */
#yesOverlay .modalBody h2{
  margin-top: 0;
}

/* make the hero image less dominant in yes modal */
#yesOverlay .modalBody img{
  height: 210px;
}

/* =========================
   Collapsible sections (DETAILS)
   ========================= */
details.collapse{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
  margin-top: 12px;
}

details.collapse > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:14px 14px;
  font-weight:850;
  letter-spacing:-.2px;

  background: linear-gradient(90deg, rgba(255,45,149,.12), rgba(255,77,166,.06));
  border-bottom:1px solid rgba(255,255,255,.10);
}

details.collapse > summary::-webkit-details-marker{ display:none; }

details.collapse > summary::after{
  content: "▾";
  opacity:.8;
  font-size: 16px;
  transform: translateY(-1px);
}

details.collapse[open] > summary::after{
  content:"▴";
}

details.collapse .collapseBody{
  padding: 14px;
}

details.collapse .collapseBody > *:first-child{ margin-top:0; }
details.collapse .collapseBody > *:last-child{ margin-bottom:0; }

/* =========================
   Mobile
   ========================= */
@media (max-width: 860px){
  html, body{ height:auto; }
  body{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  .wrap{
    min-height: 100svh;
    min-height: 100dvh;
    height:auto;
    place-items: start center;
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(12px + env(safe-area-inset-right))
      calc(14px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
  }

  .card{
    width: 100%;
    max-width: 640px;
    border-radius: 18px;
  }

  .content{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .right{
    border-left:none;
    border-top:1px solid var(--line);
  }

  .left{ padding:18px 16px 14px; }
  .right{ padding:14px 16px 16px; }

  .topbar{
    padding:12px 14px;
    flex-wrap:wrap;
  }

  h1{ font-size: 28px; margin-bottom: 8px; }
  .subtitle{ font-size: 14px; margin-bottom: 12px; }

  .prompt{
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .promptMeta{
    gap:8px;
    margin-bottom:10px;
  }

  .promptChip, .promptChipBtn{
    font-size:12px;
    padding:7px 10px;
  }

  .question{ font-size: 22px; margin-bottom: 12px; }

  .btnrow{ gap:10px; }

  .btn{
    padding:12px 14px;
    border-radius:14px;
    font-size:16px;
  }

  .terminal{ font-size:12px; min-height: 120px; }

  /* Overlay spacing */
  .overlay{
    padding: 12px;
  }

  .modal{
    width: 100%;
    max-width: 680px;
    border-radius: 18px;
  }

  /* Default modals become single column on phones */
  .modalBody{
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }

  .modalBody img{
    height:210px;
  }

  /* Two countdowns stack on mobile */
  .countdownGrid{
    grid-template-columns: 1fr;
  }

  .timelineGrid{
    grid-template-columns: 1fr;
  }

  .signalIntro{
    flex-direction:column;
  }

  .signalButtons{
    grid-template-columns: 1fr 1fr;
  }

  .controlPanelHead,
  .arcadeHud{
    flex-direction:column;
  }

  .controlButtonGrid,
  .questList{
    grid-template-columns: 1fr;
  }

  .hubBand{
    padding:0 14px 14px;
  }

  .hubHead{
    flex-direction:column;
  }

  .hubLauncher{
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 420px){
  h1{ font-size: 25px; }
  .question{ font-size: 20px; }

  .promptMeta{
    flex-direction:column;
    align-items:flex-start;
  }

  .promptChipBtn{
    width:100%;
    text-align:center;
  }

  .btnrow{
    flex-direction: column;
    align-items: stretch;
  }
  .btn{ width:100%; }

  .footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .modalHead{
    padding: 12px 12px;
  }

  .modalBody{
    padding: 12px;
    gap: 12px;
  }

  .reveal{
    padding: 12px;
  }
}
.poem p{ margin: 0 0 12px; }
.poem p:last-child{ margin-bottom: 0; }

.poemSig{
  margin-top: 14px;
  font-family: var(--mono);
  opacity: .9;
}