/* Shared chrome for all chapters. Each chapter's own <style> block supplies
   theme tokens (--bg, --ink, --amber, etc.), fonts (--font-body, --font-display),
   and any mechanic-specific styling on top of this. */

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  font-family:var(--font-body, sans-serif);
  color:var(--ink);
  display:flex;
  justify-content:center;
  padding:16px 12px calc(24px + env(safe-area-inset-bottom));
  min-height:100vh;
}
.stage{ width:100%; max-width:420px; }

.frame{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#000;
  line-height:0;
}
.frame img{
  display:block;
  width:100%;
  height:auto;
  filter: saturate(0.9) contrast(1.03);
  transition: opacity 0.28s ease;
}
.frame .grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.frame .vignette{
  position:absolute; inset:0;
  box-shadow: inset 0 0 60px 20px rgba(0,0,0,0.4);
  pointer-events:none;
}

.choices{ display:flex; flex-direction:column; gap:8px; }
.choice-btn{
  text-align:left;
  padding:12px 14px;
  min-height:44px;
  background:#1b1f1e;
  border:1px solid var(--panel-line);
  border-radius:5px;
  color:var(--ink);
  font-family:var(--font-body, sans-serif);
  font-size:13px;
  line-height:1.35;
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.choice-btn:active{ transform: scale(0.98); }
.choice-btn:disabled{ opacity:0.35; cursor:not-allowed; }
@media (hover:hover){
  .choice-btn:hover{ border-color:var(--amber-dim); }
}

.reset-row{ text-align:center; margin-top:10px; }
.reset-btn{
  padding:11px 20px;
  min-height:44px;
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:5px;
  color:var(--ink-dim);
  font-family:var(--font-body, sans-serif);
  font-size:12.5px;
  letter-spacing:0.04em;
  cursor:pointer;
}
@media (hover:hover){
  .reset-btn:hover{ border-color:var(--amber-dim); color:var(--ink); }
}

.audio-toggle{
  position:fixed; bottom:calc(14px + env(safe-area-inset-bottom)); left:14px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:10;
}
.audio-toggle svg{ width:14px; height:14px; }
.audio-toggle.muted .wave{ display:none; }

.dev-toggle{
  position:fixed; bottom:calc(14px + env(safe-area-inset-bottom)); right:14px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--ink-faint);
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:10;
}
.dev-panel{
  position:fixed; bottom:calc(50px + env(safe-area-inset-bottom)); right:14px; left:14px;
  max-width:250px;
  margin-left:auto;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:6px;
  padding:12px 14px;
  font-size:11px;
  z-index:10;
  display:none;
}
.dev-panel.open{ display:block; }
.dev-panel h4{
  margin:0 0 8px; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600;
}
.dev-row{
  display:flex; justify-content:space-between;
  margin-bottom:6px; color:var(--ink-dim);
}
.dev-bar{
  width:100%; height:3px; background:rgba(255,255,255,0.08);
  border-radius:2px; margin-top:3px; overflow:hidden;
}
.dev-bar-fill{ height:100%; background:var(--amber); }
.dev-flags{ margin-top:8px; padding-top:8px; border-top:1px solid var(--panel-line); }
.dev-flag{ display:flex; justify-content:space-between; color:var(--ink-dim); margin-bottom:4px; }

.feedback-icon{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  z-index:5;
  pointer-events:none;
  opacity:0;
}
.feedback-icon svg{ width:100%; height:100%; display:block; }
.feedback-icon.positive svg{ fill: #f4f2ed; color: #f4f2ed; }
.feedback-icon.negative svg{ fill: #f4f2ed; color: #f4f2ed; }
.feedback-icon.show{ animation: iconPulse 2.2s ease forwards; }
@keyframes iconPulse{
  0%   { transform: scale(0.5); opacity: 0; }
  22%  { transform: scale(1.2); opacity: 1; }
  40%  { transform: scale(1); opacity: 1; }
  78%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0; }
}

.eyebrow{
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  font-weight:600;
}

.end-card{ text-align:center; padding:20px 6px 6px; }
.end-card .eyebrow{ margin-bottom:10px; }
.end-card p{
  font-family:var(--font-display, serif);
  font-size:14.5px; line-height:1.6; color:var(--ink-dim);
  margin:0 auto 10px;
}