:root{--cream:#f4ede2;--cream-warm:#ebe1cf;--paper:#fbf7ef;--ink:#1f2624;--ink-soft:#4a5450;--ink-muted:#7e8580;--teal:#1c4a47;--teal-deep:#143432;--teal-light:#2e6863;--coral:#c2553a;--coral-deep:#9a3f29;--coral-soft:#e8a690;--gold:#c8954a;--plum:#6f4060;--ok:#4a7d68;--ok-bg:#d5e3d8;--err:#b04438;--err-bg:#f5d9d2;--border:rgba(31,38,36,.12);--shadow:0 2px 4px rgba(31,38,36,.05),0 12px 32px rgba(31,38,36,.08)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--cream);background-image:radial-gradient(at 20% 0%,rgba(194,85,58,.06) 0%,transparent 50%),radial-gradient(at 80% 100%,rgba(28,74,71,.05) 0%,transparent 50%);color:var(--ink);font-size:16px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
.container{max-width:820px;margin:0 auto;padding:24px 20px 80px}
.brand{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 28px;border-bottom:1px solid var(--border);margin-bottom:32px;gap:16px;flex-wrap:wrap}
.brand-mark{font-family:'Fraunces',serif;font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--teal);cursor:pointer}
.brand-mark span{color:var(--coral);font-style:italic}
.brand-meta{font-size:12px;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase}
.crumb{font-size:13px;color:var(--ink-muted);margin-bottom:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--teal);text-decoration:none;cursor:pointer;font-weight:500}
.crumb a:hover{text-decoration:underline}
.crumb-sep{color:var(--coral)}
h1.title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(38px,6.5vw,60px);line-height:1.05;letter-spacing:-.025em;color:var(--teal-deep);margin-bottom:24px}
h1.title em{font-style:italic;color:var(--coral);font-weight:300}
h2.title{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(28px,4.5vw,38px);line-height:1.1;color:var(--teal-deep);margin-bottom:12px;letter-spacing:-.015em}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:500;margin-bottom:20px}
.lead{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:580px;margin-bottom:36px}
.note{background:var(--cream-warm);padding:18px 22px;border-left:3px solid var(--coral);font-size:14px;color:var(--ink-soft);line-height:1.55;border-radius:0 2px 2px 0}
.note strong{color:var(--teal);font-weight:600}
/* ── ROLE CARDS ── */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}
.role-card{background:var(--paper);border:1px solid var(--border);padding:30px 26px;cursor:pointer;transition:all .25s ease;text-align:left;position:relative;overflow:hidden;font-family:inherit;border-radius:0}
.role-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.role-card.parent::before{background:var(--coral)}
.role-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.role-card:hover::before{transform:scaleY(1)}
.role-card-tag{font-family:'Fraunces',serif;font-size:13px;color:var(--coral);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;font-weight:500;font-style:italic}
.role-card-title{font-family:'Fraunces',serif;font-weight:500;font-size:26px;color:var(--teal-deep);line-height:1.15;margin-bottom:12px;letter-spacing:-.015em}
.role-card-title em{color:var(--coral);font-style:italic}
.role-card-desc{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:18px}
.role-card-meta{font-size:12px;color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase;font-weight:500;padding-top:14px;border-top:1px dashed var(--border)}
.role-card-cta{margin-top:14px;color:var(--teal);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.role-card.parent .role-card-cta{color:var(--coral)}
.arrow{display:inline-block;transition:transform .2s ease}
.role-card:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}
/* ── PICKER CARDS ── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:24px}
.profile-card{background:var(--paper);border:1px solid var(--border);padding:18px 20px;cursor:pointer;transition:all .2s ease;text-align:left;font-family:inherit;width:100%}
.profile-card:hover{border-color:var(--teal);background:var(--cream-warm);transform:translateY(-2px)}
.profile-card.selected{border-color:var(--teal);background:var(--cream-warm)}
.profile-name{font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--teal-deep);margin-bottom:4px;line-height:1.2}
.profile-desc{font-size:14px;color:var(--ink-soft);line-height:1.45}
/* ── PERSONA CARDS ── */
.persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:24px}
.persona-card{background:var(--paper);border:1px solid var(--border);padding:22px 22px 18px;cursor:pointer;transition:all .2s ease;text-align:left;font-family:inherit;position:relative;width:100%}
.persona-card:hover{border-color:var(--coral);background:var(--cream-warm);transform:translateY(-2px);box-shadow:var(--shadow)}
.persona-card.disabled{opacity:.5;cursor:not-allowed}
.persona-card.disabled:hover{transform:none;background:var(--paper);border-color:var(--border);box-shadow:none}
.persona-meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;font-weight:500}
.persona-name{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--teal-deep);line-height:1.15;margin-bottom:8px}
.persona-tag{font-style:italic;font-family:'Fraunces',serif;color:var(--coral);font-size:14.5px;margin-bottom:10px;line-height:1.35}
.persona-hook{font-size:14px;color:var(--ink-soft);line-height:1.5}
.persona-badge{position:absolute;top:14px;right:14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);background:var(--cream-warm);padding:4px 8px;font-weight:600}
/* ── BUTTONS ── */
.btn{font-family:'DM Sans',sans-serif;font-weight:500;font-size:15px;padding:14px 28px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:var(--teal);color:var(--paper)}
.btn-primary:hover{background:var(--teal-deep);transform:translateY(-1px);box-shadow:0 4px 12px rgba(28,74,71,.25)}
.btn-coral{background:var(--coral);color:var(--paper)}
.btn-coral:hover{background:var(--coral-deep);transform:translateY(-1px);box-shadow:0 4px 12px rgba(194,85,58,.25)}
.btn-ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.btn-ghost:hover{background:var(--teal);color:var(--paper)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* ── PROGRESS BAR & METERS ── */
.bar-wrap{background:var(--paper);border:1px solid var(--border);padding:18px 20px 14px;margin-bottom:4px;border-bottom:none}
.bar-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.bar-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
.bar-lbl strong{color:var(--coral);font-weight:600}
.bar-step{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft)}
.pips{display:flex;gap:4px;height:3px}
.pip{flex:1;background:var(--cream-warm);transition:background .3s ease}
.pip.done{background:var(--teal)}
.pip.current{background:var(--coral)}
.meters{background:var(--paper);border:1px solid var(--border);padding:18px 20px;margin-bottom:4px;border-bottom:none}
.meter{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px;margin-bottom:10px}
.meter:last-child{margin-bottom:0}
.meter-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.track{height:8px;background:var(--cream-warm);position:relative;overflow:hidden}
.fill{position:absolute;top:0;left:0;bottom:0;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.fill.trust{background:linear-gradient(90deg,var(--teal-light),var(--teal))}
.fill.will{background:linear-gradient(90deg,var(--coral-soft),var(--coral))}
.fill.anks{background:linear-gradient(90deg,#d8a8a0,var(--coral-deep))}
.fill.sas{background:linear-gradient(90deg,#a8c4bf,var(--teal-light))}
.fill.otv{background:linear-gradient(90deg,#d4c08a,var(--gold))}
.meter-val{font-family:'Fraunces',serif;font-weight:500;font-size:17px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.delta{display:inline-block;margin-left:4px;font-size:11px;font-weight:600;padding:1px 5px;opacity:0;transition:opacity .3s ease}
.delta.show{opacity:1}
.delta.pos{background:var(--ok-bg);color:var(--ok)}
.delta.neg{background:var(--err-bg);color:var(--err)}
/* ── SCENARIO/SCENE CARDS ── */
.card{background:var(--paper);border:1px solid var(--border);padding:32px 30px;box-shadow:var(--shadow)}
.scn-hdr{margin-bottom:24px;padding-bottom:20px;border-bottom:1px dashed var(--border)}
.scn-num{font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--coral);margin-bottom:6px;font-weight:500}
.scn-title{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(22px,4vw,30px);line-height:1.15;color:var(--teal-deep);letter-spacing:-.015em;margin-bottom:4px}
.scn-root{font-size:13px;color:var(--ink-muted);letter-spacing:.04em}
.scn-root::before{content:"Tema · "}
.bubble{padding:22px 24px;margin-bottom:26px;border-radius:2px 16px 16px 16px}
.bubble.parent{background:var(--cream-warm)}
.bubble.doctor{background:rgba(111,64,96,.07);border-radius:16px 2px 16px 16px}
.bubble-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avatar{width:34px;height:34px;border-radius:50%;color:var(--paper);display:grid;place-items:center;font-family:'Fraunces',serif;font-size:15px;font-weight:500}
.avatar.parent{background:var(--teal)}
.avatar.doctor{background:var(--plum)}
.bubble-label{font-size:12px;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.speech{font-family:'Fraunces',serif;font-size:18px;line-height:1.45;color:var(--ink);font-style:italic}
.speech::before{content:"« ";color:var(--coral);font-style:normal}
.speech::after{content:" »";color:var(--coral);font-style:normal}
.bubble.doctor .speech::before,.bubble.doctor .speech::after{color:var(--plum)}
.step-eb{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.step-num{font-family:'Fraunces',serif;font-style:italic;color:var(--coral);font-size:14px;font-weight:500}
.step-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
.prompt{font-family:'Fraunces',serif;font-size:20px;line-height:1.3;color:var(--teal-deep);font-weight:500;margin-bottom:20px;letter-spacing:-.01em}
/* ── CHOICES ── */
.choices{display:flex;flex-direction:column;gap:10px}
.choice{background:var(--paper);border:1px solid var(--border);padding:16px 20px;cursor:pointer;text-align:left;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);transition:all .2s ease;width:100%}
.choice:hover{border-color:var(--teal);background:var(--cream-warm);transform:translateX(2px)}
.choice:disabled{cursor:default;transform:none;opacity:.55}
.choice.sel{opacity:1;border-color:var(--teal)}
.choice.sel.good{border-color:var(--ok);background:var(--ok-bg)}
.choice.sel.bad{border-color:var(--err);background:var(--err-bg)}
.choice.sel.neutral{background:rgba(200,149,74,.15);border-color:var(--gold)}
/* parent-game choice (feelings) */
.choice-f{background:var(--paper);border:1px solid var(--border);padding:14px 18px;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s ease;width:100%}
.choice-f:hover{border-color:var(--coral);background:var(--cream-warm);transform:translateX(2px)}
.choice-f:disabled{cursor:default;transform:none;opacity:.55}
.choice-f.sel{border-color:var(--coral);background:var(--cream-warm)}
.feel-em{font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.feel-in{font-family:'Fraunces',serif;font-style:italic;color:var(--ink-soft);font-size:14.5px;line-height:1.4}
/* feedback */
.fb{margin-top:18px;padding:18px 20px;border-left:3px solid var(--coral);background:var(--cream-warm);animation:slide .35s ease}
.fb.good{border-left-color:var(--ok)}
.fb.bad{border-left-color:var(--err)}
.fb.neutral{border-left-color:var(--gold)}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.fb-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px;font-weight:600}
.fb-lbl.good{color:var(--ok)}
.fb-lbl.bad{color:var(--err)}
.fb-lbl.neutral{color:var(--gold)}
.fb-text{font-size:14.5px;line-height:1.55;color:var(--ink)}
.fb-text strong{color:var(--teal)}
.fb-text em{font-family:'Fraunces',serif;color:var(--ink);font-style:italic}
.next-wrap{margin-top:22px;display:flex;justify-content:flex-end}
/* persona intro */
.intro-card{background:var(--paper);border:1px solid var(--border);padding:36px 32px;box-shadow:var(--shadow)}
.intro-eb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:10px;font-weight:500}
.intro-name{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(30px,5vw,42px);color:var(--teal-deep);line-height:1.1;margin-bottom:6px;letter-spacing:-.02em}
.intro-tag{font-family:'Fraunces',serif;font-style:italic;color:var(--coral);font-size:17px;margin-bottom:22px;line-height:1.4}
.intro-text{font-family:'Fraunces',serif;font-size:18px;line-height:1.55;color:var(--ink);margin-bottom:26px}
.intro-text p{margin-bottom:12px}
.intro-text p:last-child{margin-bottom:0}
.intro-text em{color:var(--coral);font-style:italic}
.intro-state{background:var(--cream-warm);padding:16px 20px;margin-bottom:24px;font-size:14px;color:var(--ink-soft);border-left:3px solid var(--coral)}
.intro-state strong{color:var(--teal)}
/* parent scene */
.scene-narr{font-family:'Fraunces',serif;font-size:16px;line-height:1.55;color:var(--ink-soft);font-style:italic;margin-bottom:20px;padding:14px 18px;border-left:2px solid var(--coral-soft);background:rgba(232,166,144,.07)}
.scene-narr p{margin-bottom:6px}
.scene-narr p:last-child{margin-bottom:0}
/* parent ending */
.end-card{background:var(--paper);border:1px solid var(--border);padding:36px 32px;box-shadow:var(--shadow)}
.end-eb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:14px;font-weight:500}
.end-narr{font-family:'Fraunces',serif;font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:24px}
.end-narr p{margin-bottom:10px}
.end-narr em{color:var(--coral);font-style:italic}
.end-divider{margin:28px 0;padding-top:24px;border-top:1px dashed var(--border)}
.end-final{font-family:'Fraunces',serif;font-style:italic;color:var(--ink-muted);font-size:15px;text-align:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
/* HCP summary */
.summary{background:var(--paper);border:1px solid var(--border);padding:44px 36px;box-shadow:var(--shadow)}
.summary h2{font-family:'Fraunces',serif;font-size:clamp(30px,5vw,42px);line-height:1.05;color:var(--teal-deep);font-weight:400;letter-spacing:-.02em;margin-bottom:20px}
.summary h2 em{color:var(--coral);font-style:italic}
.sum-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:28px 0}
.sum-stat{background:var(--cream-warm);padding:20px 18px}
.sum-stat-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px;font-weight:500}
.sum-stat-val{font-family:'Fraunces',serif;font-size:30px;color:var(--teal);font-weight:500;line-height:1}
.sum-stat-val em{font-style:italic;color:var(--coral);font-size:18px;margin-left:4px}
.sum-takes{margin-top:28px}
.sum-takes h3{font-family:'Fraunces',serif;font-size:20px;color:var(--teal-deep);margin-bottom:16px;font-weight:500}
.take{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-bottom:1px dashed var(--border)}
.take:last-child{border-bottom:none}
.take-num{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--coral);font-weight:500}
.take-text{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.take-text strong{color:var(--ink);font-weight:600}
.sum-cta{margin-top:30px;padding-top:24px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap}
.cite{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-muted);line-height:1.5}
.cite a{color:var(--teal)}
/* utility */
.hidden{display:none!important}
.fade-in{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ── SIDE PANEL LAYOUT (parent game) ── */
.game-layout{display:grid;grid-template-columns:1fr 232px;grid-template-areas:"main side";gap:20px;align-items:start}
.game-main{grid-area:main;min-width:0}
.game-side{grid-area:side;position:sticky;top:16px}
.side-meters{background:var(--paper);border:1px solid var(--border);padding:20px 18px;box-shadow:var(--shadow)}
.side-meters-hd{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--border);font-family:'DM Sans',sans-serif}
.meter-v{margin-bottom:18px}
.meter-v:last-child{margin-bottom:0}
.meter-v.meter-v-key{margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)}
.meter-v-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:8px}
.meter-v-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.meter-v-val{font-family:'Fraunces',serif;font-weight:500;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.meter-v-track{height:7px;background:var(--cream-warm);position:relative;overflow:hidden;border-radius:1px}
.meter-v-anno{display:flex;justify-content:space-between;margin-top:6px;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
.fill.dec{background:linear-gradient(90deg,#b8c9b3,var(--teal))}
/* meter delta animation tweaks for side panel */
.meter-v .delta{font-size:10px;padding:1px 4px;margin-left:5px}

@media (max-width:820px){
.game-layout{grid-template-columns:1fr;grid-template-areas:"side" "main";gap:0}
.game-side{position:sticky;top:0;z-index:10;margin-bottom:4px}
.side-meters{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:14px 16px;border-bottom:2px solid var(--cream-warm)}
.side-meters-hd{grid-column:1/-1;margin-bottom:4px;padding-bottom:8px}
.meter-v{margin-bottom:0}
.meter-v.meter-v-key{margin-top:0;padding-top:0;border-top:none}
.meter-v.meter-v-key .meter-v-lbl{color:var(--teal)}
.meter-v-anno{display:none}
}
@media (max-width:640px){
.side-meters{padding:12px 14px;gap:10px 14px}
.meter-v-lbl{font-size:10px}
.meter-v-val{font-size:14px}
.meter-v-track{height:6px}
}
@media (max-width:640px){
.container{padding:16px 14px 60px}
.card,.intro-card,.end-card,.summary{padding:24px 20px}
.meter{grid-template-columns:90px 1fr 50px;gap:8px}
.meter-lbl{font-size:11px}
.meter-val{font-size:15px}
.sum-score{grid-template-columns:1fr 1fr}
.role-grid{grid-template-columns:1fr}
.speech{font-size:16.5px}
.prompt{font-size:18px}
.intro-text,.end-narr{font-size:16.5px}
}