/* Pixel fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  /* Derive from site brand tokens for light/dark sync */
  --ink: inherit; /* inherit body color */
  --muted: var(--brand-muted, #6b7480);
  --accent: var(--brand-accent, #FFD55A);
  --paper: var(--brand-surface, #f7f7fb);
  --card: var(--brand-bg, #ffffff);
  --btn: color-mix(in oklab, var(--paper) 88%, black 12%);
  --btn-hi: color-mix(in oklab, var(--paper) 80%, black 20%);
  --ring: var(--brand-brightblue, #00A8E8);
  --radius:14px; --dur:120ms; --shadow: 0 8px 18px rgba(0,0,0,.12);
  --font-pixel: "Press Start 2P", "VT323", monospace;
}

/* Container */
#cyoa { max-width: 880px; margin: 1.5rem auto; padding: 0 1rem; color: var(--ink); font-size: 16px; }
#cyoa, #cyoa * { font-family: var(--font-pixel) !important; }
#cyoa { line-height: 1.35; }

/* Force light theme inside the game, even when the site is in dark mode */
body.quarto-dark #cyoa{
  --brand-primary: var(--brand-deepblue);
  --brand-link:    var(--brand-midblue);
  --brand-muted:   var(--brand-dimgray);
  --brand-bg:      var(--brand-white);
  --brand-surface: var(--brand-ivory);
  --brand-border:  var(--brand-lightgray);
  color: #111;
}

/* Fixed-size window frame (90s vibe) */
.cyoa-window{ 
  width: min(832px, 100%);
  height: clamp(520px, 78vh, 592px);
  margin-inline: auto;
  background: var(--paper);
  /* Pixelated window border */
  border: 2px solid #0b1b2a;
  box-shadow: 0 0 0 1px #2a4d6f, inset 0 0 0 1px rgba(255,255,255,0.06);
  display:flex; flex-direction:column; overflow:hidden;
  image-rendering: pixelated;
  background-size: cover; background-position: center;
}
.cyoa-window.is-intro{ position: relative; background-position: bottom center; }
.cyoa-window.is-intro::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.40) 20%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.00) 75%);
}
.cyoa-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .3rem .5rem; 
  background: #142432;
  color: #e9f1ff;
  border-bottom: 1px solid #2a4d6f;
  font-size: 12px; text-transform: uppercase;
}
.cyoa-winbuttons{ display:flex; gap:6px; }
.cyoa-winbtn{ width:12px; height:12px; border:1px solid #0b1b2a; background:#ffd55a; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }

/* Content area within window is fixed; card scrolls if needed */
.cyoa-content{ padding: .5rem; display:flex; flex-direction:column; gap:.5rem; min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* HUD */
.cyoa-hud { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.cyoa-role { display:flex; align-items:center; gap:.5rem; }
.cyoa-role img { width: 40px; height: 40px; image-rendering: pixelated; }
.cyoa-role .name { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.cyoa-pips { display:flex; gap:.25rem; align-items:center; }
.cyoa-pip { width:10px; height:10px; border:1px solid var(--muted); border-radius:2px; }
.cyoa-pip.is-on { background: var(--accent); border-color: var(--accent); }
.cyoa-actions { display:flex; gap:.5rem; }
.cyoa-actions button { 
  background: color-mix(in oklab, var(--paper) 80%, transparent 20%);
  border:1px solid color-mix(in oklab, var(--brand-border, #d8dbe0) 70%, transparent 30%);
  color: var(--ink);
  border-radius:4px; 
  padding:.35rem .6rem; 
  font-size:.85rem; 
  cursor:pointer; 
  backdrop-filter: blur(1px);
}
.cyoa-actions button:hover { 
  background: color-mix(in oklab, var(--paper) 70%, transparent 30%);
}
.cyoa-actions button:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }

/* Card */
.cyoa-card { background: color-mix(in oklab, var(--card) 78%, transparent 22%); border: 1px solid color-mix(in oklab, var(--brand-border, #d8dbe0) 70%, transparent 30%); border-radius: 4px; padding: .8rem; position: relative; overflow:visible; flex: 1; min-height: 0; }
.cyoa-card.has-fb{ padding-bottom: 96px; }
.cyoa-title { font-weight:700; color: var(--muted); margin-bottom:.25rem; font-family: var(--font-pixel); font-size: 12px; text-transform: uppercase; }
.cyoa-prompt { font-size: 16px; line-height:1.3; margin: .25rem 0 .6rem; }

/* Two-column body: scene + main content */
.cyoa-body { display:grid; grid-template-columns: 1fr 1.2fr; gap:.8rem; align-items:start; }
@media (max-width: 820px){ .cyoa-body { grid-template-columns: 1fr; } }

/* New top layout: illustration 1/3, prompt 2/3 */
.cyoa-top { display:grid; grid-template-columns: 1fr 2fr; gap:.8rem; align-items:start; margin-bottom:.5rem; }
@media (max-width: 820px){ .cyoa-top { grid-template-columns: 1fr; } }
.cyoa-illustration { display:flex; justify-content:center; align-items:center; }
.cyoa-illustration img { width: 100%; max-width: 256px; height: auto; aspect-ratio: 256/144; image-rendering: pixelated; image-rendering: crisp-edges; border:1px solid color-mix(in oklab, var(--brand-border, #d8dbe0) 60%, transparent 40%); border-radius:4px; background: color-mix(in oklab, var(--paper) 65%, transparent 35%); }

/* Scene image */
.cyoa-scene { display:none; }

/* Choices */
.cyoa-choices { display:grid; grid-template-columns:1fr; gap:.5rem; }
@media (min-width: 560px){ .cyoa-choices { grid-template-columns:1fr 1fr; } }

.cyoa-choice { background: var(--btn); border:2px solid color-mix(in oklab, var(--btn) 55%, black 45%); border-radius:4px; padding:.6rem; cursor:pointer; text-align:left; transition: transform var(--dur), background var(--dur); box-shadow: 0 2px 0 0 color-mix(in oklab, var(--btn) 55%, black 45%); font-size: 12px; line-height:1.4; }
.cyoa-choice:hover { background: var(--btn-hi); transform: translateY(-1px); }
.cyoa-choice:active { transform: translateY(0px); box-shadow:none; }
.cyoa-choice:focus-visible { outline: 2px solid var(--ring); outline-offset:2px; }
.cyoa-choice .label { font-weight:700; margin-right:.35rem; color: var(--accent);}

/* Feedback bubble */
.cyoa-feedback[aria-live] { position:absolute; left:.8rem; right:.8rem; bottom:.8rem; background: color-mix(in oklab, var(--paper) 75%, transparent 25%); border:1px solid color-mix(in oklab, var(--brand-border, #d8dbe0) 70%, transparent 30%); border-radius:4px; padding:.75rem 1.2rem .6rem .6rem; box-shadow: 0 2px 0 0 rgba(0,0,0,.25); backdrop-filter: blur(1px); }
.cyoa-feedback .cyoa-close{
  position:absolute; top:6px; right:6px; width:24px; height:24px;
  border:2px solid #0b1b2a; background:#e83d3d; color:#fff;
  border-radius:2px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
  font-size:14px; line-height:1; text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.cyoa-feedback .cyoa-close:hover{ background:#cc3232; }
.cyoa-feedback .cyoa-close:active{ transform: translateY(1px); box-shadow:none; }
.cyoa-feedback .cyoa-close:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.cyoa-next, .cyoa-readmore { margin-top:.2rem; display:inline-block; background: var(--accent); color:#111; border:none; padding:.4rem .6rem; border-radius:4px; cursor:pointer; font-weight:700; font-size: 11px; }
.cyoa-readmore { background: #4de0ff; margin-left:.4rem; }
.cyoa-next:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* Intro avatar grid */
.cyoa-avatars { display:grid; grid-template-columns:1fr; gap:.6rem; }
@media (min-width:640px){ .cyoa-avatars { grid-template-columns: 1fr 1fr; } }
@media (min-width:980px){ .cyoa-avatars { grid-template-columns: repeat(4, 1fr); } }
.cyoa-avatar { display:flex; flex-direction:column; gap:.5rem; align-items:center; padding:.5rem; background:var(--btn); border:2px solid color-mix(in oklab, var(--btn) 55%, black 45%); border-radius:4px; cursor:pointer; }
.cyoa-avatar:hover{ background:var(--btn-hi); }
.cyoa-avatar img { width: 96px; height:96px; image-rendering: pixelated; }
.cyoa-avatar .title { font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase; text-align:center; }
.cyoa-avatar .muted { font-size: 11px; color: var(--muted); }

/* CRT scanlines (no image needed) */
.cyoa-card.crt::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 2px, transparent 3px);
  mix-blend-mode: multiply; opacity:.2;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cyoa-choice, .cyoa-next { transition:none; }
  .cyoa-card.crt::after{ display:none; }
}

/* Utility */
.hidden{ display:none !important; }

/* Dark mode specific tweaks (inherit brand tokens) */
body.quarto-dark .cyoa-scene { background: color-mix(in oklab, var(--paper) 65%, white 5%); }
body.quarto-dark .cyoa-titlebar { color: #e8f0ff; border-bottom-color: rgba(255,255,255,.08); }

/* ------------------ Responsive ------------------ */
@media (max-width: 600px){
  .cyoa-window{ height: min(92vh, 620px); }
  .cyoa-titlebar{ font-size: 10px; padding: .25rem .4rem; }
  .cyoa-role img { width:28px; height:28px; }
  .cyoa-role .name { font-size: 9px; letter-spacing: .3px; }
  .cyoa-scene{ min-height: 130px; }
  .cyoa-card{ padding: .6rem; }
  .cyoa-card.has-fb{ padding-bottom: 84px; }
  .cyoa-actions button{ font-size: .75rem; padding: .3rem .5rem; }
  .cyoa-next, .cyoa-readmore{ font-size: 10px; padding: .35rem .55rem; }
  .cyoa-avatars .title{ font-size: 10px; }
  .cyoa-avatar img{ width: 84px; height: 84px; }
  /* Make HUD wrap to avoid horizontal scrolling on small screens */
  .cyoa-hud{ flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
  .cyoa-role{ order: 1; flex: 1 1 auto; min-width: 0; }
  .cyoa-actions{ order: 2; margin-left: auto; flex: 0 1 auto; display:flex; flex-wrap: wrap; justify-content: flex-end; }
  .cyoa-pips{ order: 3; width: 100%; overflow: hidden; }
}
@media (max-width: 380px){
  .cyoa-titlebar{ font-size: 9px; }
  .cyoa-scene{ min-height: 110px; }
  .cyoa-actions{ gap: .35rem; }
  .cyoa-pips{ transform: scale(.9); transform-origin: left center; }
}