/* ==========================================================================
   Diagnosis Buddy — app/web renderer (job 3)
   Stateless screens off the one node graph. GGB sage-stone tokens (the book's
   palette) so the web app and the printed gamebook read as one product. Clinical
   screens stay calm and legible; lobby/start beats carry the character art.
   ========================================================================== */
:root{
  --ink:#211d18; --green:#256139; --green-d:#1b4a2b; --gold:#b3852a; --grey:#6b6358;
  --ground:#eef1ea; --hair:#d3d6c9; --panel:#f4f5ef; --oxblood:#8c2f25;
  --bg:#fbfbf8;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
body{min-height:100vh;display:flex;flex-direction:column;}

/* top bar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;background:#fff;border-bottom:1px solid var(--hair);}
.topbar .brand{font-family:var(--serif);font-weight:600;letter-spacing:.02em;color:var(--green-d);
  font-size:1.05rem;margin:0 auto;}
.back,.restart{font-family:var(--sans);border:1px solid var(--hair);background:#fff;color:var(--grey);
  border-radius:8px;padding:.4rem .7rem;font-size:.9rem;cursor:pointer;line-height:1;}
.back{font-size:1.1rem;font-weight:600;}
.back:hover,.restart:hover{border-color:var(--gold);color:var(--ink);}

.screen{flex:1;width:100%;max-width:640px;margin:0 auto;padding:1.1rem 1.1rem 2.5rem;}
.footer{text-align:center;font-size:.72rem;letter-spacing:.04em;color:#a39c8c;
  padding:1rem;border-top:1px solid var(--hair);}

/* node kind tag */
.kindtag{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;padding:.16rem .5rem;border-radius:4px;margin-bottom:.6rem;}
.kindtag.story{background:var(--green);}
.kindtag.symptom{background:var(--gold);}
.kindtag.verdict{background:var(--oxblood);}

h1.title{font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.15;margin:.1rem 0 .5rem;color:var(--ink);}
.text{font-family:var(--serif);font-size:1.08rem;line-height:1.5;color:var(--ink);margin:0 0 1rem;}

/* image: hero (story) vs clinical (symptom/verdict). Placeholder until assets land. */
.media{border-radius:12px;margin:0 0 1rem;overflow:hidden;position:relative;}
.media .art{display:block;width:100%;height:auto;}
.media.hasart .ph{display:none;}            /* art asset loaded → hide placeholder */
.media.story.hasart{background:#fff;}
.media .ph{display:flex;flex-direction:column;justify-content:center;padding:1.1rem;min-height:150px;
  border:1px dashed var(--hair);background:#fff;}
.media.story .ph{background:linear-gradient(160deg,#fff,var(--ground));min-height:190px;border-style:solid;}
.media .ph .slot{font-size:.66rem;letter-spacing:.06em;color:#b9b3a4;margin-bottom:.35rem;}
.media .ph .brief{font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.4;color:var(--ink);}
.media .ph .badge{position:absolute;top:.5rem;right:.5rem;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;padding:.14rem .45rem;border-radius:4px;}
.media.story .badge{background:var(--green);}
.media.symptom .badge{background:var(--gold);}
.media.verdict .badge{background:var(--oxblood);}

/* choices — large tappable buttons */
.choices{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem;}
.choice{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--hair);background:#fff;border-radius:12px;padding:.95rem 1rem;
  font-family:var(--sans);font-size:1rem;line-height:1.35;color:var(--ink);transition:.12s;}
.choice:hover{border-color:var(--green);box-shadow:0 1px 0 var(--hair);}
.choice:active{transform:translateY(1px);}
.choice .arrow{margin-left:auto;color:var(--gold);font-weight:700;flex:0 0 auto;}
/* redirect variant — "looks more like ... ->" */
.choice.redirect{background:#fbf6f4;border-color:#e6cfc9;}
.choice.redirect .lead{font-style:italic;color:var(--oxblood);margin-right:.25rem;font-family:var(--serif);}
.choice.redirect .arrow{color:var(--oxblood);}

/* verdict blocks */
.fix{background:var(--panel);border:1px solid var(--hair);border-left:4px solid var(--green);
  border-radius:10px;padding:.85rem 1rem;margin:0 0 1rem;}
.fix .lab{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem;}
.fix p{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.5;}

.product{display:flex;align-items:center;gap:.8rem;background:#faf9f4;border-left:4px solid var(--gold);
  border-radius:10px;padding:.8rem 1rem;margin:0 0 1rem;}
.product .pph{flex:0 0 84px;height:84px;border:1px dashed var(--hair);background:#fff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-align:center;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:#b9b3a4;padding:.3rem;}
.product .ptag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.product .pname{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);margin:.15rem 0;line-height:1.2;}
.product .pcredit{font-style:italic;font-size:.78rem;color:var(--grey);font-family:var(--serif);}

/* verdict actions */
.actions{display:flex;flex-direction:column;gap:.55rem;margin-top:1.1rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;
  border-radius:12px;padding:.9rem 1rem;font-family:var(--sans);font-size:1rem;cursor:pointer;
  text-decoration:none;border:1px solid var(--hair);background:#fff;color:var(--ink);transition:.12s;}
.btn:hover{border-color:var(--gold);}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff;}
.btn.primary:hover{background:var(--green-d);border-color:var(--green-d);}

.loaderr{font-family:var(--serif);color:var(--oxblood);padding:2rem 0;}