/* Social Reps — web app styles
   Matches the Instagram reel look (pipelines/loopcut/loopcut.py): a dark
   ground, raised dark panels, rust "me" bubbles, cream partner bubbles,
   yellow for system lines and the one word that matters. Anton for display
   headings and big numbers, Avenir Next for everything else.
   Jack, 2026-09-18: "I feel like the design is inconsistent with the actual
   app that we've built. I think you should make our app like this design." */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  color-scheme: dark;

  /* The reel palette, exactly. */
  --bg: #121110;          /* page */
  --panel: #1E1C1A;       /* raised panels, header, system pills */
  --text: #FAF8F4;        /* primary text */
  --muted: #969088;       /* secondary text: 5.4:1 on panel, 6.0:1 on bg */
  --yellow: #FFC440;      /* system lines, typing..., highlights */
  --rust: #BE5028;        /* my bubbles, primary buttons, avatar */
  --cream: #F6F3ED;       /* partner bubbles; text on my bubbles */
  --bubble-ink: #1C1A18;  /* text on cream */

  /* Text that sits ON rust. Cream #F6F3ED on #BE5028 is 4.34:1, just under
     WCAG AA for body text; the palette's primary white #FAF8F4 is 4.53:1. */
  --on-rust: #FAF8F4;
  --rust-hover: #A8461F;

  /* Supporting tones, derived for the dark ground. */
  --panel-2: #2A2724;     /* a panel on a panel: inputs' hover, toast */
  --hairline: #34302C;    /* borders and empty tracks */
  --warm-panel: #2A1E18;  /* selected / featured: panel tinted with rust */
  --signal: #FF8A70;      /* failure, on dark: 8.2:1 on bg */

  /* Legacy names, still referenced by inline styles in app.js. They keep
     their meaning: --ground is the page, --ink the main text colour, --card
     a panel, --accent the text-safe accent. */
  --ground: var(--bg);
  --ink: var(--text);
  --card: var(--panel);
  --accent: var(--yellow);
  --accent-dark: var(--yellow);

  --font-body: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, system-ui, "Archivo", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;

  --radius: 16px;         /* cards, panels */
  --radius-sm: 12px;      /* inputs, small rows */
  --bubble-radius: 20px;
  --maxw: 560px;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body{
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, .display{
  font-family: var(--font-display);
  font-weight: 400; /* Anton only ships one weight */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  margin: 0;
  color: var(--text);
}

a{ color: var(--yellow); }

/* One visible focus ring everywhere, yellow on dark. */
:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline: none; }

.app-shell{
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.screen{
  padding: 24px 20px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: sr-fade .18s ease;
  min-width: 0;
}
@keyframes sr-fade{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

[hidden]{ display: none !important; }

/* ---------- top bar ---------- */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}
.brand{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .03em;
  color: var(--text);
  flex: none;
}
.brand .mark{
  width: 30px; height: 30px;
  background: url(../logo-128.png) center/cover no-repeat; /* relative to css/, not to the page */
  border-radius: 50%;
  flex: none;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; min-width:0; }
.icon-btn{
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn:hover{ color: var(--text); }

/* ---------- labels / kickers ---------- */
.kicker{
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.kicker.on-accent{ color: var(--yellow); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary{ background: var(--rust); color: var(--on-rust); }
.btn-primary:hover{ background: var(--rust-hover); }
.btn-primary:disabled{ background: var(--hairline); color: var(--muted); cursor: not-allowed; }
.btn-secondary{ background: var(--panel); color: var(--cream); border-color: var(--cream); }
.btn-secondary:hover{ background: var(--panel-2); }
.btn-secondary:disabled{ border-color: var(--hairline); color: var(--muted); cursor: not-allowed; }
.btn-ghost{ background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover{ color: var(--text); }
.btn-block{ width: 100%; }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex: 1; }
.btn-sm{ min-height: 44px; padding: 8px 16px; font-size: 14px; }

/* The destructive confirms set background:var(--signal) inline. Coral is a
   light colour, so its label is dark ink, not cream. */
#btn-delete-confirm, #btn-wipe-confirm{ color: var(--bubble-ink); }

/* ---------- forms ---------- */
label{ display:block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
input[type=email], input[type=password], input[type=text], input:not([type]), textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  padding: 13px 14px;
  min-height: 48px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
input::placeholder, textarea::placeholder{ color: var(--muted); opacity: 1; }
input:focus, textarea:focus{ outline: 2px solid var(--yellow); outline-offset: 1px; border-color: transparent; }
input:disabled, textarea:disabled{ opacity: .6; }
.field{ margin-bottom: 16px; }
.field-error{ color: var(--signal); font-size: 13px; margin-top: 6px; }
.form-note{ font-size: 13px; color: var(--muted); margin-top: 4px; }
.form-note b{ color: var(--text); }

/* ---------- cards ---------- */
.card{
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card{ margin-top: 10px; }
.banner{
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.banner b{ color: var(--text); }
.banner p{ margin: 0 0 10px; }
.banner p:last-child{ margin-bottom: 0; }
.banner.error{ color: var(--signal); background: #2A1714; border: 1px solid var(--signal); }
.banner.notice{ border-left: 3px solid var(--rust); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- choice grids (onboarding) ---------- */
.choice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choice-list{ display:flex; flex-direction:column; gap:10px; }
.choice{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  min-height: 52px;
  justify-content: center;
  border: 1.5px solid transparent;
  background: var(--panel);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text);
}
.choice:hover{ border-color: var(--hairline); }
.choice-title{ font-weight: 700; font-size: 15px; color: var(--text); }
.choice-sub{ font-size: 13px; color: var(--muted); line-height: 1.4; }
.choice.selected{ border-color: var(--rust); background: var(--warm-panel); }
.choice-row{
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
  padding: 13px 16px; min-height: 52px;
  border: 1.5px solid transparent; background: var(--panel); border-radius: var(--radius);
  cursor: pointer;
}
.choice-row:hover{ border-color: var(--hairline); }
.choice-row.selected{ border-color: var(--rust); background: var(--warm-panel); }
.choice-row .kicker{ font-size: 10px; text-align: right; }
.choice-row.warn{ border-style: dashed; border-color: var(--signal); }
.choice-row.warn .choice-title{ color: var(--signal); }
.choice-row.warn.selected{ border-style: solid; background: #2A1714; }

/* ---------- scenario cards ---------- */
.scenario-card{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 15px 16px; border: 1.5px solid transparent; background: var(--panel);
  border-radius: var(--radius); cursor: pointer;
}
.scenario-card:hover{ border-color: var(--hairline); }
.scenario-card.pro{ cursor: default; background: transparent; border: 1.5px dashed var(--hairline); }
.scenario-card.pro .scenario-title{ color: var(--muted); }
.scenario-card.pro:hover{ border-color: var(--hairline); }
.scenario-card.featured{ border-color: var(--rust); background: var(--warm-panel); }
#custom-card{ border-color: var(--hairline); background: transparent; }
#custom-card:hover{ border-color: var(--muted); }
.scenario-title{ font-weight: 700; font-size: 16px; margin-bottom: 2px; color: var(--text); }
.scenario-sub{ font-size: 13px; color: var(--muted); }
.tag-free{ font-size: 10px; letter-spacing:.1em; font-weight:700; color: var(--yellow); white-space: nowrap; }
.tag-pro{ font-size: 10px; letter-spacing:.1em; font-weight:700; color: var(--muted); white-space: nowrap; }

/* ---------- session ---------- */
/* The chat header is the reel's: a panel, a rust avatar with the partner's
   initial, their name, and a muted subtitle that becomes a yellow
   "typing..." while they reply. There is no interest meter. Jack: "On our
   app, you never know how interested the party is, so we should take it
   off." Interest is still tracked and still decides when they leave; it is
   simply not drawn. */
.session-header{ padding: 12px 16px 4px; }
.chat-head{
  display:flex; align-items:center; gap:12px;
  background: var(--panel); border-radius: 22px;
  padding: 10px 16px 10px 10px;
}
.avatar{
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--rust); color: var(--on-rust);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
}
.chat-head-text{ flex: 1; min-width: 0; }
.partner-name{ font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--text); }
.partner-note{
  font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.partner-note.typing{ color: var(--yellow); }
.chat-turn{ flex: none; font-size: 10px; }
.ai-tag{ font-size: 9px; letter-spacing:.12em; font-weight:700; color: var(--muted); border:1px solid var(--hairline); padding: 2px 5px; border-radius: 6px; margin-left:8px; vertical-align: 2px; }
.session-header .banner{ margin-top: 10px; }

.messages{ flex:1; padding: 16px 16px 20px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.msg{
  max-width: 80%; padding: 11px 16px; border-radius: var(--bubble-radius);
  font-size: 16px; font-weight: 600; line-height: 1.38;
  overflow-wrap: anywhere;
}
.msg.me{ align-self:flex-end; background: var(--rust); color: var(--on-rust); }
.msg.them{ align-self:flex-start; background: var(--cream); color: var(--bubble-ink); }

/* System lines — errors today, anything the room says — are the reel's
   centred yellow pills. */
.msg.system{
  align-self:center; max-width: 100%;
  background: var(--panel); color: var(--yellow);
  font-size: 14px; font-weight: 700; text-align:center;
  border-radius: 22px; padding: 10px 18px;
}

/* Typing: a cream bubble with three muted dots. */
.msg.typing{ display:flex; align-items:center; gap:6px; padding: 16px 18px; }
.msg.typing .dot{ width:8px; height:8px; border-radius:50%; background: var(--muted); animation: sr-dot 1.2s ease-in-out infinite; }
.msg.typing .dot:nth-child(2){ animation-delay: .15s; }
.msg.typing .dot:nth-child(3){ animation-delay: .3s; }
@keyframes sr-dot{ 0%, 60%, 100%{ opacity:.45; transform:none; } 30%{ opacity:1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .msg.typing .dot{ animation: none; } }

.signal-note{ border-left: 2px solid var(--signal); background: var(--panel); padding: 9px 12px; font-size: 13px; color: var(--muted); line-height:1.5; border-radius: 0 10px 10px 0; }

.composer{ border-top: 1px solid var(--hairline); padding: 12px 16px 18px; }
.composer-row{ display:flex; gap:8px; align-items:flex-end; }
.composer textarea{ resize:none; min-height:48px; max-height:120px; border-radius: 24px; padding: 12px 18px; }
.composer #btn-send{ min-height: 48px; border-radius: 24px; padding: 8px 20px; }
.composer-foot{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-top:10px; }

/* ---------- mission failed ---------- */
.failed-screen{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 40px 24px; background: var(--bg); color: var(--text);
}
.failed-screen .kicker{ color: var(--muted); }
.failed-headline{
  font-family: var(--font-display); font-size: 64px; color: var(--yellow);
  margin: 14px 0 12px; line-height: .98; letter-spacing: .01em;
}
.failed-sub{ font-size:15px; color: var(--muted); max-width:36ch; margin: 0 0 28px; line-height:1.5; }

/* ---------- score ---------- */
.score-head{ text-align:left; margin-bottom: 22px; }
.score-big{ display:flex; align-items:flex-end; gap:16px; }
.score-number{ font-family: var(--font-display); font-size: 84px; line-height:.88; color: var(--yellow); }
.score-number.fail{ color: var(--signal); }
.score-meta{ padding-bottom:6px; min-width: 0; }
.score-meta-title{ font-weight:700; font-size:16px; color: var(--text); }
.score-meta-sub{ font-size:13px; color:var(--muted); }

.bars{ display:flex; flex-direction:column; gap:12px; margin: 24px 0; }
.bar-row .bar-top{ display:flex; justify-content:space-between; font-size:14px; font-weight:600; margin-bottom:6px; }
.bar-track{ height:6px; background: var(--hairline); border-radius:3px; overflow:hidden; }
.bar-fill{ display:block; height:100%; background: var(--cream); border-radius: 3px; }
.bar-fill.fail{ background: var(--signal); }
.bar-score{ font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--text); }
.bar-score.fail{ color: var(--signal); }

.moment{ border-left:3px solid var(--muted); background: var(--panel); padding: 12px 14px; margin-bottom: 9px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.moment.up{ border-left-color: var(--yellow); }
.moment.down{ border-left-color: var(--signal); }
.moment-delta{ font-size:11px; font-weight:800; margin-bottom:5px; letter-spacing: .06em; }
.moment-delta.up{ color: var(--yellow); }
.moment-delta.down{ color: var(--signal); }
.moment-quote{ font-size:14px; line-height:1.5; margin-bottom:5px; color: var(--text); font-weight: 500; }
.moment-note{ font-size:13px; color:var(--muted); line-height:1.5; }

/* ---------- progress ---------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom: 18px; }
.stat-card{ background:var(--panel); padding:14px; border-radius:var(--radius); min-width: 0; }
.stat-num{ font-family: var(--font-display); font-size:32px; line-height: 1.1; color: var(--text); text-transform: uppercase; overflow-wrap: anywhere; }
.stat-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; font-weight: 600; }

/* ---------- key screen ---------- */
.key-hero{ text-align:left; margin-bottom: 20px; }
.key-hero .kicker{ margin-bottom: 8px; }
.key-hero h1{ font-size: 42px; margin-bottom: 14px; }
.key-hero p{ color: var(--muted); font-size: 15px; line-height:1.55; margin: 0; }
.key-steps{ display:flex; flex-direction:column; gap:10px; margin: 18px 0; }
.key-step{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.5;}
.key-step b{ color: var(--text); }

.footer-links{ display:flex; gap:16px; flex-wrap:wrap; padding: 14px 20px; border-top:1px solid var(--hairline); }
.footer-links a{ font-size:13px; color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color: var(--text); }

.tabbar{
  display:flex; border-top:1px solid var(--hairline); background: var(--panel);
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:560px; z-index:20;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1; border:none; background:none; padding: 10px 4px 8px; min-height:52px;
  font-family: var(--font-body); font-size:12px; font-weight: 600; letter-spacing:.03em; color: var(--muted);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.tabbar button:hover{ color: var(--text); }
.tabbar button.active{ color: var(--yellow); font-weight:700; }
.tabbar .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; opacity:0; }
.tabbar button.active .dot{ opacity:1; }
.tabbar button:focus-visible{ outline-offset: -3px; }

.toast{
  position: fixed; left:50%; bottom: 24px; transform: translateX(-50%);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--hairline);
  padding: 12px 18px; border-radius: 14px;
  font-size:14px; max-width: 90%; z-index: 70; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.spinner{
  width:16px; height:16px; border-radius:50%;
  border: 2px solid rgba(250,248,244,.35); border-top-color: var(--on-rust);
  animation: sr-spin .7s linear infinite; display:inline-block;
}
@keyframes sr-spin{ to{ transform: rotate(360deg); } }

.divider-label{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight: 600; margin:18px 0; }
.divider-label::before, .divider-label::after{ content:""; flex:1; height:1px; background:var(--hairline); }

.mono-num{ font-variant-numeric: tabular-nums; }

@media (max-width: 420px){
  .score-number{ font-size: 72px; }
  .failed-headline{ font-size: 54px; }
  .key-hero h1{ font-size: 36px; }
}

.reassure{ font-size:14px; line-height:1.6; color:var(--muted); background:var(--panel); border-left:3px solid var(--rust); padding:14px 16px; margin:4px 0 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.reassure b{ font-weight:700; color: var(--text); }

/* The stage direction before the approach. It is the room, not a person,
   so it is a system line: the reel's centred panel pill with yellow text.
   Shown only in scenarios where the user opens (see scenarios.js opensWith). */
.msg.scene{
  align-self: center;
  max-width: 92%;
  background: var(--panel);
  color: var(--yellow);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  border-radius: 22px;
  padding: 11px 18px;
  margin: 2px 0 6px;
}

/* Password / key show-hide. The input keeps its full width; the eye sits
   inside its right edge. */
.eye-wrap{ position:relative; }
.eye-wrap input{ padding-right:48px; }
.eye-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); padding:8px; cursor:pointer; line-height:0; border-radius:8px; }
.eye-btn:hover, .eye-btn.on{ color:var(--yellow); }

/* Usage bar on Reps and Progress: a thin track, cream fill, coral past 80%. */
.meter-label-row{ display:flex; justify-content:space-between; gap: 10px; margin-bottom:6px; }
.meter-track{ height: 6px; background: var(--hairline); border-radius: 3px; overflow:hidden; }
.meter-fill{ display:block; height:100%; background: var(--cream); border-radius: 3px; transition: width .4s ease; }
.usage .meter-fill.warn{ background:var(--signal); }

/* The brand is a button now: it goes home from anywhere and pauses a rep. */
.brand-btn{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-family: var(--font-display); color:inherit; display:inline-flex; align-items:center; gap:9px; border-radius: 10px; }
.topbar.slim{ padding:10px 20px; border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; }

/* Body language, not speech: the silent and no-shared-language modes. No
   bubble, because nothing was said. */
.msg.them.action{ background:transparent; border:1.5px dashed var(--hairline); color:var(--muted); font-style:italic; font-weight: 500; }

/* Jack: "I don't like how the buttons are at the bottom of the page. They
   should float." The tab bar is fixed to the viewport now; the shell keeps
   room underneath so nothing is hidden behind it. */
.app-shell{ padding-bottom: 84px; }
.composer{ margin-bottom: 0; }

/* ---------- play the reel, no key (js/scenes.js, js/stage.js) ----------
   The reel's stage above the app's chat: crude black strokes on paper, the
   chat underneath in the dark theme. The stage sticks to the top while the
   chat scrolls, so her face is always in view when she answers. */
.play-entry{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  width:100%; text-align:left; margin: 0 0 14px;
  padding: 15px 16px; border-radius: var(--radius);
  background: var(--warm-panel); border: 1.5px solid var(--rust); color: var(--text);
  font-family: var(--font-body); cursor: pointer;
}
.play-entry:hover{ background: #33241C; }
.play-entry-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.play-entry-title{ font-weight: 700; font-size: 17px; color: var(--text); }
.play-entry-sub{ font-size: 13px; color: #C9C2B8; line-height: 1.4; }
.play-entry-go{
  flex:none; font-family: var(--font-display); font-size: 17px; letter-spacing:.04em; text-transform: uppercase;
  background: var(--rust); color: var(--on-rust); border-radius: 12px; padding: 9px 14px;
}

.play{ display:flex; flex-direction:column; flex:1; min-width:0; }
.play-stage{
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 10px 16px 8px;
}
/* Chat scrolling under the stage fades out instead of being sliced. */
.play-stage::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:18px;
  background: linear-gradient(var(--bg), rgba(18,17,16,0)); pointer-events:none;
}
.stage-paper{
  background: #F3EDE2; border-radius: var(--radius); overflow: hidden;
  width: 100%;
  height: clamp(150px, min(30vh, calc((min(100vw, 560px) - 32px) * 0.5667)), 300px);
}
.stage-paper svg{ display:block; width:100%; height:100%; }
.play-body{ padding: 6px 16px 28px; display:flex; flex-direction:column; min-width:0; }
.play-log{ display:flex; flex-direction:column; gap:10px; padding: 14px 0 6px; }
.play-choices{ display:flex; flex-direction:column; gap:10px; margin-top: 12px; }
.play-choice{
  width:100%; text-align:left; cursor:pointer;
  min-height: 52px; padding: 13px 16px;
  background: var(--panel); color: var(--text);
  border: 1.5px solid var(--hairline); border-radius: 18px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.play-choice:hover{ border-color: var(--rust); background: var(--warm-panel); }
.play-choice:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 2px; }

.play-end{
  margin-top: 18px; padding: 22px 18px 18px; text-align: center;
  background: var(--panel); border-radius: var(--radius);
}
.play-end-headline{ font-size: 46px; color: var(--yellow); margin: 10px 0 10px; line-height: 1; }
.play-end-headline:focus{ outline: none; }
.play-end-sub{ color: #C9C2B8; font-size: 15px; line-height: 1.5; margin: 0 auto 18px; max-width: 34ch; }
.play-end-actions{ display:flex; flex-direction:column; gap:10px; }
.play-end-note{ margin-top: 14px; text-align: left; }
@media (max-width: 420px){ .play-end-headline{ font-size: 40px; } }

/* ---------- share sheet (js/sharecard.js) ---------- */
body.share-open{ overflow: hidden; }
.share-overlay{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.74);
  display:flex; align-items:flex-end; justify-content:center;
}
.share-sheet{
  width: 100%; max-width: var(--maxw); max-height: 100%; overflow-y: auto;
  background: var(--panel); border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
}
@media (min-width: 600px){
  .share-overlay{ align-items: center; }
  .share-sheet{ border-radius: 20px; max-height: 94vh; }
}
.share-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.share-head h2{ font-size: 26px; }
.share-preview{ display:flex; justify-content:center; align-items:center; min-height: 180px; margin-bottom: 12px; }
.share-preview img{
  display:block; height: min(56vh, 520px); width: auto; max-width: 100%;
  aspect-ratio: 9 / 16; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--hairline);
}
.share-loading{ display:flex; align-items:center; gap:10px; color: var(--muted); font-size: 14px; }
.share-toggle{ display:flex; align-items:center; gap:10px; min-height:44px; margin:0; font-size:15px; font-weight:600; cursor:pointer; }
.share-toggle input{ width:22px; height:22px; accent-color: var(--rust); margin:0; }
.share-note{ margin: 0 0 12px; }
.share-actions{ margin-top: 4px; }

/* ---------- 2026-09-22 mobile pass: less text, bigger targets ---------- */
/* Long scenario settings get two lines in the list; the full text is on the brief screen. */
.clamp-2, .clamp-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2{ -webkit-line-clamp:2; }
.clamp-3{ -webkit-line-clamp:3; }
.scenario-card{ min-height: 56px; }
.scenario-go{ font-size: 26px; line-height: 1; color: var(--muted); flex: none; }
.key-step{ font-size: 15px; }
.key-step b:first-child{ flex: none; width: 1.2em; }
/* Optional detail folded away: cost notes, challenges. */
.more-info{ margin-top: 12px; }
.more-info > summary{
  display:flex; align-items:center; min-height:44px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:700; color: var(--text);
}
.more-info > summary::-webkit-details-marker{ display:none; }
.more-info > summary::after{ content:'+'; margin-left:auto; font-size:20px; color: var(--muted); }
.more-info[open] > summary::after{ content:'\2212'; }
.more-info > .form-note{ margin: 0 0 6px; }
.footer-links a{ display:inline-flex; align-items:center; min-height:44px; }
.play-entry + .key-hero{ margin-top: 22px; }