/* =======================================================================
   Pill & Parcel v3 · styles
   Palette: warm cream/moss base with jewel-tone accents for drugs & UI.
   ======================================================================= */

:root{
  /* ——— paper & wood base (kept, the cozy foundation) ——— */
  --paper: #f3e8cd;
  --paper-light: #faf2de;
  --paper-dark: #e4d4b0;
  --paper-edge: #cfbb8e;
  --wood: #a88760;
  --wood-dark: #7a5f3f;

  /* ——— ink & text ——— */
  --ink: #3d2a1c;
  --ink-pen: #2d4a6b;
  --ink-light: #5d483a;

  /* ——— moss (success / good calls) ——— */
  --moss: #6b7f57;
  --moss-dark: #4f6040;
  --moss-light: #8ba07a;

  /* ——— copper (consult / neutral highlight) ——— */
  --copper: #c19a4a;
  --copper-dark: #9a7a38;

  /* ——— warning & danger ——— */
  --coral: #d97a5a;
  --crimson: #b14a3d;
  --crimson-dark: #8a3527;

  /* ——— NEW: jewel accents for drugs, symptoms, UI ——— */
  --teal: #2fa89b;
  --teal-dark: #1d7f75;
  --sky: #5eb4e3;
  --sky-dark: #3a8cb8;
  --pink: #e88fb0;
  --bubblegum: #f57aa8;
  --lavender: #a892c7;
  --plum: #7a4d7a;
  --plum-dark: #5c3a5c;
  --goldenrod: #e8b830;
  --goldenrod-dark: #b58820;
  --amber: #c87a1e;
  --terracotta: #d07b4d;
  --sage: #9fc78b;
  --mint: #7acca5;

  /* ——— chalkboard (ailments book) ——— */
  --chalk-board: #2c3e36;
  --chalk-board-light: #3d544a;
  --chalk-gold: #d4a845;
  --chalk-cream: #f4ead1;

  --shadow-sm: 0 2px 4px rgba(61,42,28,.12);
  --shadow-md: 0 4px 12px rgba(61,42,28,.18);
  --shadow-lg: 0 10px 30px rgba(61,42,28,.25);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

body{
  font-family:'Fredoka', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(232,184,48,.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(232,143,176,.16) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(47,168,155,.14) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 90%, rgba(208,123,77,.14) 0%, transparent 70%),
    linear-gradient(160deg, #e8d6a8 0%, #d4be8b 100%);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0 0.11 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;
  pointer-events:none;
  z-index:1;
}

.app{
  position:relative; z-index:2;
  max-width:1440px; margin:0 auto;
  padding: 16px 22px 36px;
  display:flex; flex-direction:column; gap:14px;
  min-height:100vh;
}

/* ——— topbar ——— */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding: 10px 18px 10px 52px;
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border: 2px solid var(--paper-edge);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  position:relative;
}
.topbar::before{
  content:"℞"; position:absolute; left:-10px; top:-14px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--paper-light);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Cormorant Garamond', serif;
  font-size:28px; font-weight:600;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--paper-light);
}
.brand h1{
  font-family:'Chewy', cursive;
  font-size: 26px;
  background: linear-gradient(135deg, var(--teal-dark), var(--moss-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .5px;
  line-height:1;
}
.brand .sub{
  font-family:'Delius', cursive;
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 2px;
}

.stats{ display:flex; gap:20px; align-items:center; }
.stat{ text-align:center; font-family:'Delius', cursive; }
.stat .n{
  font-family:'Chewy', cursive;
  font-size: 22px; line-height:1;
  color: var(--moss-dark);
}
.stat .l{
  font-size: 10px; color: var(--ink-light);
  text-transform: uppercase; letter-spacing: 1px;
}
.stat.trust .n{ color: var(--copper-dark); }
.stat.discoveries .n{ color: var(--plum); }

.progress{ display:flex; gap:5px; align-items:center; }
.progress .pip{
  width:12px; height:12px; border-radius:50%;
  background: var(--paper-dark);
  border: 2px solid var(--paper-edge);
  transition: all .3s;
}
.progress .pip.done{ background: var(--teal); border-color: var(--teal-dark); }
.progress .pip.current{
  background: var(--goldenrod);
  border-color: var(--goldenrod-dark);
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(232,184,48,.3);
}

.help-btn{
  background: rgba(47,168,155,.12);
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family:'Chewy', cursive;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s;
}
.help-btn:hover{ background: var(--teal); color: var(--paper-light); }

/* ——— main grid ——— */
main{
  display:grid;
  grid-template-columns: 360px 1fr 340px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
@media(max-width: 1200px){
  main{ grid-template-columns: 1fr; }
}

.pane-title{
  font-family:'Delius', cursive;
  font-size: 13px;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-left: 4px;
  margin-bottom: -2px;
}

.left-pane, .counter-pane, .cabinet-pane{
  display:flex; flex-direction:column; gap: 12px;
  min-height: 0;
}

/* ——— script card ——— */
.script-card{
  background: linear-gradient(180deg, #faf2de 0%, #f3e6c4 100%);
  border-radius: 4px;
  padding: 20px 22px 22px;
  position:relative;
  font-family:'Delius', cursive;
  color: var(--ink);
  box-shadow:
    0 2px 3px rgba(61,42,28,.15),
    0 8px 20px rgba(61,42,28,.2),
    inset 0 0 0 1px rgba(61,42,28,.06);
  transform: rotate(-.6deg);
}
.script-card::before{
  content:""; position:absolute; top:0; right:0;
  width:30px; height:30px;
  background: linear-gradient(225deg, transparent 50%, #d9c89a 50%, #c4b384 100%);
  box-shadow: -1px 1px 2px rgba(61,42,28,.15);
}
.script-card::after{
  content:"℞"; position:absolute;
  bottom: 10px; right: 16px;
  font-family:'Cormorant Garamond', serif;
  font-size: 110px;
  color: var(--ink);
  opacity: .05;
  line-height:1;
  font-weight: 600;
  pointer-events:none;
}

.script-card.walkin{
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(94,180,227,.06) 24px 25px),
    linear-gradient(180deg, #efe4c8 0%, #e5d5ae 100%);
  transform: rotate(.4deg);
}
.script-card.walkin .script-head .logo{ color: var(--sky-dark); }

.script-card.sample{
  background:
    repeating-linear-gradient(45deg,
      #ffd89c 0px, #ffd89c 16px,
      var(--bubblegum) 16px, var(--bubblegum) 32px);
  color: var(--ink);
  transform: rotate(-1.2deg);
  border: 2px dashed var(--crimson);
}
.script-card.sample .script-head .logo{
  color: var(--crimson);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
.script-card.sample::after{
  content: '★ SAMPLE ★'; font-family:'Chewy', cursive;
  font-size: 22px; color: var(--crimson); opacity:.18;
  right: 10px; bottom: 6px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.4);
}

.script-head{
  text-align:center;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--ink-light);
  margin-bottom: 12px;
}
.script-head .logo{
  font-family:'Chewy', cursive;
  font-size: 20px;
  color: var(--moss-dark);
  line-height:1;
}
.script-head .addr{
  font-size: 11px;
  color: var(--ink-light);
  margin-top: 4px;
}
.script-head .rxno{
  position:absolute; top: 16px; left: 22px;
  font-family:'Courier New', monospace;
  font-size: 10px;
  color: var(--ink-light);
  background: rgba(193,154,74,.15);
  padding: 2px 6px;
  border: 1px solid rgba(193,154,74,.3);
  border-radius: 2px;
}

.script-row{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom: 8px;
}
.script-row .lbl{
  font-size: 10px;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  min-width: 54px;
  font-family:'Fredoka', sans-serif;
  padding-top: 3px;
}
.script-row .val{
  flex:1;
  padding: 2px 6px 3px;
  border-bottom: 1px solid rgba(61,42,28,.2);
  font-family:'Kalam', cursive;
  font-size: 16px;
  color: var(--ink-pen);
  min-height: 26px;
  line-height: 1.2;
}
.script-row .val.print{
  font-family:'Delius', cursive;
  color: var(--ink);
  font-size: 14px;
}

.ailment-box{
  background: linear-gradient(135deg, rgba(107,127,87,.14) 0%, rgba(47,168,155,.08) 100%);
  border-left: 3px solid var(--moss);
  padding: 10px 12px;
  margin: 10px 0 10px;
  border-radius: 2px;
  position: relative;
}
.ailment-box .diag{
  font-family:'Chewy', cursive;
  font-size: 17px;
  color: var(--moss-dark);
  letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px;
}
.ailment-box .diag .em{ font-size: 20px; }
.ailment-box .diag.unknown{
  color: var(--plum);
  font-style: italic;
  font-size: 15px;
}
.ailment-box .note{
  font-size: 11px;
  color: var(--ink-light);
  margin-top: 2px;
  font-style: italic;
}
.ailment-box .known-tag{
  position: absolute;
  top: 6px; right: 8px;
  font-size: 9px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--plum);
  color: var(--paper-light);
  letter-spacing: .5px;
}

/* symptom list on patient card / script */
.symptom-list{
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}

.rx-lines{
  margin-top: 10px;
  padding: 10px 10px;
  background: rgba(250,242,222,.5);
  border: 1px dashed rgba(61,42,28,.15);
  border-radius: 3px;
}
.rx-lines .rx-head{
  font-family:'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height:.8;
  margin-bottom: 6px;
}
.rx-lines .script-row .val{
  font-size: 17px;
  color: var(--ink-pen);
  font-weight: 700;
}
.rx-lines .blank-notice{
  font-family:'Delius', cursive;
  font-size: 12px;
  color: var(--ink-light);
  font-style: italic;
  padding: 4px 2px;
}

.signature{
  margin-top: 12px;
  text-align: right;
}
.signature .sig{
  font-family:'Kalam', cursive;
  font-size: 18px;
  color: var(--ink-pen);
  font-weight: 700;
  transform: rotate(-3deg);
  display: inline-block;
  border-bottom: 1px solid rgba(45,74,107,.3);
  padding: 0 4px 2px;
}
.signature .clinic{
  font-size: 11px;
  color: var(--ink-light);
  margin-top: 4px;
  font-family:'Delius', cursive;
}
.signature .clinic.unknown{ color: var(--crimson); font-weight: 600; }

/* sample actions */
.sample-actions{
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sample-action{
  flex: 1;
  min-width: 90px;
  padding: 8px;
  font-family:'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: var(--paper-light);
  border: 1.5px solid var(--ink-light);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
  color: var(--ink);
  display: flex; flex-direction: column; align-items:center; gap: 2px;
}
.sample-action:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sample-action .ico{ font-size: 18px; }

/* ——— patient card + interview ——— */
.patient-card{
  background: linear-gradient(180deg, #e9d9b3 0%, #d9c392 100%);
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction: column; gap: 10px;
}
.patient-card.hidden{ display:none; }
.patient-header{ display: flex; gap: 10px; align-items: center; }
.patient-card .avatar{
  width: 42px; height:42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--moss));
  display:grid; place-items:center;
  color: var(--paper-light);
  font-family:'Chewy', cursive;
  font-size: 20px;
  flex-shrink:0;
  box-shadow: var(--shadow-sm);
}
.patient-header .pinfo .pname{
  font-family:'Delius', cursive;
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}
.patient-header .pinfo .pmeta{
  font-size: 11px; color: var(--ink-light);
  margin-top: 1px;
}

.symptoms{
  display:flex; flex-wrap:wrap; gap: 4px;
  padding: 2px 0;
}

.symptom-chip{
  background: var(--paper-light);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--coral);
  padding: 3px 8px 3px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-family:'Fredoka', sans-serif;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex; align-items:center; gap: 4px;
  animation: chip-pop .3s ease;
}
.symptom-chip.small{ font-size: 11px; padding: 2px 6px; }
@keyframes chip-pop{
  from{ opacity: 0; transform: scale(.7); }
  to{ opacity:1; transform: scale(1); }
}
.symptom-chip .sc-ico{ font-size: 13px; }

/* symptom color variants (via data-color) */
.symptom-chip[data-color="sky"]        { border-left-color: var(--sky); }
.symptom-chip[data-color="pink"]       { border-left-color: var(--pink); }
.symptom-chip[data-color="bubblegum"]  { border-left-color: var(--bubblegum); }
.symptom-chip[data-color="terracotta"] { border-left-color: var(--terracotta); }
.symptom-chip[data-color="goldenrod"]  { border-left-color: var(--goldenrod); }
.symptom-chip[data-color="sage"]       { border-left-color: var(--sage); }
.symptom-chip[data-color="crimson"]    { border-left-color: var(--crimson); }

/* interview */
.interview{
  background: rgba(250,242,222,.5);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-family:'Delius', cursive;
  display: flex; flex-direction: column; gap: 6px;
}
.patient-says{
  background: var(--paper-light);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--ink);
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  position: relative;
  align-self: flex-start;
  max-width: 85%;
  animation: chip-pop .3s ease;
}
.patient-says::before{
  content:"";
  position:absolute; left:-6px; top: 9px;
  border-right: 6px solid var(--paper-light);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.interview-opts{
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.int-btn{
  background: rgba(47,168,155,.12);
  border: 1px solid var(--teal);
  color: var(--teal-dark);
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-family:'Fredoka', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.int-btn:hover{
  background: var(--teal);
  color: var(--paper-light);
  transform: translateY(-1px);
}
.int-btn::before{ content: "❝ "; font-weight: 400; opacity: .7; }

/* ——— counter ——— */
.counter{
  flex: 1;
  position:relative;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px,
      transparent 1px, transparent 40px),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 2px,
      transparent 2px, transparent 80px),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  border-radius: 12px;
  padding: 20px 18px 18px;
  min-height: 300px;
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,.3),
    var(--shadow-lg);
  display:flex; flex-direction:column;
}
.counter-title{
  color: rgba(255,242,210,.8);
  font-family:'Delius', cursive;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align:center;
  margin-bottom: 6px;
}
.counter-title::before, .counter-title::after{ content:" ✦ "; color: rgba(255,242,210,.5); }

.counter-surface{
  flex:1;
  display:flex; gap: 14px; flex-wrap:wrap;
  align-items: flex-start; justify-content:center;
  min-height: 210px;
  padding-top: 18px;
  position: relative;
}

.counter-empty{
  align-self:center;
  margin: auto;
  color: rgba(255,242,210,.6);
  font-family:'Delius', cursive;
  font-size: 14px;
  text-align:center;
}
.counter-empty .big{
  font-family:'Chewy', cursive;
  font-size: 18px;
  color: rgba(255,242,210,.8);
  display:block;
  margin-bottom: 4px;
}

.bottle{
  position: relative;
  width: 115px;
  display:flex; flex-direction:column; align-items:center;
  animation: pop-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-in{
  from{ opacity:0; transform: translateY(-30px) scale(.6); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes slide-away{
  to{ opacity:0; transform: translateY(30px) scale(.9) rotate(3deg); }
}
.bottle.leaving{ animation: slide-away .35s ease forwards; }

.bottle .remove{
  position:absolute; top:-8px; right:-8px;
  width:20px; height:20px; border-radius:50%;
  background: var(--crimson); color: white;
  border: 2px solid var(--paper-light);
  font-size: 12px; font-weight:700;
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow: var(--shadow-sm);
  z-index: 3;
  opacity: 0;
  transition: opacity .2s;
  line-height:1;
}
.bottle:hover .remove{ opacity:1; }

.bottle .vessel{
  position:relative;
  width: 96px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
}

.bottle-label{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  background: var(--paper-light);
  border: 1px solid var(--paper-edge);
  padding: 4px 3px 4px;
  text-align:center;
  font-family:'Delius', cursive;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  z-index: 2;
}
.bottle-label .lbl-rx{
  font-family:'Cormorant Garamond', serif;
  font-size: 12px;
  line-height: .7;
  color: var(--moss-dark);
  font-weight: 600;
}
.bottle-label .lbl-name{
  font-family:'Fredoka', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 1px;
}
.bottle-label .lbl-dose{
  font-family:'Kalam', cursive;
  font-size: 11px;
  color: var(--ink-pen);
  font-weight: 700;
  margin: 1px 0;
}
.bottle-label .lbl-pat{
  font-size: 7px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dose-setter{
  margin-top: 8px;
  display:flex; flex-direction:column; align-items:center;
  gap: 3px;
}
.dose-row{
  display:flex; align-items:center; gap: 3px;
  background: rgba(250,242,222,.95);
  border: 1.5px solid var(--paper-edge);
  border-radius: 18px;
  padding: 3px 3px;
  box-shadow: var(--shadow-sm);
}
.dose-btn{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--moss);
  color: var(--paper-light);
  font-size: 14px; font-weight:700;
  cursor: pointer;
  display:grid; place-items:center;
  line-height: 1;
  font-family: 'Fredoka', sans-serif;
  transition: all .15s;
  padding: 0;
}
.dose-btn.big{
  background: var(--moss-dark);
  font-size: 10px;
  font-weight: 700;
}
.dose-btn:hover{ transform: scale(1.12); }
.dose-btn:active{ transform: scale(.95); }
.dose-btn:disabled{ background: #a9a28a; cursor: not-allowed; }

.dose-val{
  min-width: 42px;
  text-align:center;
  font-family:'Kalam', cursive;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.dose-val input{
  width: 38px;
  font-family:'Kalam', cursive;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--moss);
  border-radius: 4px;
  padding: 0 2px;
  background: white;
}
.dose-range{
  font-size: 8.5px;
  color: rgba(255,242,210,.7);
  font-family:'Delius', cursive;
}

/* interactions */
.interactions-zone{
  text-align: center;
  margin-top: 8px;
  min-height: 20px;
}
.interaction-ribbon{
  display: inline-block;
  background: linear-gradient(90deg, rgba(232,184,48,.25), rgba(232,184,48,.55), rgba(232,184,48,.25));
  border: 1px dashed rgba(255,242,210,.6);
  color: rgba(255,242,210,.98);
  font-family:'Delius', cursive;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 14px;
  margin: 2px 4px;
  animation: chip-pop .4s ease;
}
.interaction-ribbon .ir-label{ font-weight: 700; margin-right: 5px; }

/* action buttons */
.actions{ display:flex; gap: 10px; align-items:center; padding: 0 4px; }
.btn{
  font-family:'Chewy', cursive;
  font-size: 18px;
  border: none;
  padding: 12px 20px;
  border-radius: 11px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: all .2s;
  box-shadow: var(--shadow-md);
  position:relative;
  display:flex; align-items:center; gap: 6px;
  line-height:1;
}
.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.btn:not(:disabled):hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:not(:disabled):active{ transform: translateY(0); }
.btn.deliver{
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--paper-light);
  flex: 1;
  justify-content:center;
  font-size: 20px;
}
.btn.deliver:not(:disabled){ animation: deliver-pulse 2s ease-in-out infinite; }
@keyframes deliver-pulse{
  0%, 100%{ box-shadow: var(--shadow-md), 0 0 0 0 rgba(47,168,155,.5); }
  50%{ box-shadow: var(--shadow-md), 0 0 0 8px rgba(47,168,155,0); }
}
.btn.consult{
  background: linear-gradient(180deg, var(--goldenrod) 0%, var(--goldenrod-dark) 100%);
  color: var(--paper-light);
  font-size: 14px;
  padding: 11px 14px;
}
.btn.clear{
  background: linear-gradient(180deg, #c9b99a 0%, #a18c66 100%);
  color: var(--ink);
  font-size: 13px;
  padding: 11px 14px;
}

/* ——— cabinet ——— */
.cabinet{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 20px),
    linear-gradient(180deg, #b89470 0%, #8e6d48 100%);
  border-radius: 10px;
  padding: 12px 10px;
  flex:1;
  display:flex; flex-direction:column;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.2), var(--shadow-md);
  min-height: 0;
}

.cab-tabs{
  display:flex; gap:3px;
  margin-bottom: 10px;
  padding: 3px;
  background: rgba(61,42,28,.25);
  border-radius: 8px;
}
.cab-tab{
  flex:1;
  padding: 6px 6px;
  background: transparent;
  color: rgba(255,242,210,.75);
  border: none;
  border-radius: 6px;
  font-family:'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 11px;
  cursor:pointer;
  transition: all .2s;
  letter-spacing: .2px;
  position: relative;
}
.cab-tab:hover{ color: var(--paper-light); }
.cab-tab.active{
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.tab-badge{
  display: inline-block;
  margin-left: 4px;
  background: var(--bubblegum);
  color: white;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
  vertical-align: middle;
}

.cab-content{
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  margin: -4px;
}
.cab-content::-webkit-scrollbar{ width: 6px; }
.cab-content::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); border-radius: 3px; }
.cab-content::-webkit-scrollbar-thumb{ background: rgba(250,242,222,.4); border-radius: 3px; }

/* drug shelf */
.shelf{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drug-jar{
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border: 1.5px solid var(--paper-edge);
  border-radius: 8px;
  padding: 10px 6px 6px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  text-align:center;
  box-shadow: var(--shadow-sm);
}
.drug-jar:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.drug-jar .jar-svg-wrap{
  width: 44px; height: 44px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.drug-jar .jar-name{
  font-family:'Delius', cursive;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.drug-jar .jar-treats{
  font-size: 9px;
  color: var(--moss-dark);
  margin-top: 3px;
  line-height: 1.2;
  min-height: 20px;
}
.drug-jar .jar-tags{
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  margin-top: 4px;
}
.drug-jar .jar-tag{
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(0,0,0,.06);
  color: var(--ink-light);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}
.drug-jar .jar-tag.strong   { background: rgba(177,74,61,.15);   color: var(--crimson); }
.drug-jar .jar-tag.mild     { background: rgba(107,127,87,.15);  color: var(--moss-dark); }
.drug-jar .jar-tag.fast     { background: rgba(94,180,227,.15);  color: var(--sky-dark); }
.drug-jar .jar-tag.slow     { background: rgba(168,146,199,.15); color: var(--plum); }
.drug-jar .jar-tag.drowsy   { background: rgba(122,77,122,.15);  color: var(--plum-dark); }
.drug-jar .jar-tag.kid_safe { background: rgba(232,184,48,.18);  color: var(--goldenrod-dark); }
.drug-jar .jar-tag.cooling  { background: rgba(122,204,165,.2);  color: var(--teal-dark); }
.drug-jar .jar-tag.acidic   { background: rgba(200,122,30,.15);  color: var(--amber); }
.drug-jar.highlight{
  border-color: var(--goldenrod);
  background: linear-gradient(180deg, #fff4d8, #f7e6b0);
  box-shadow: 0 0 0 2px rgba(232,184,48,.35), var(--shadow-sm);
}
.drug-jar.dnd::after{
  content:"HUSH"; position:absolute; top:3px; right:3px;
  font-size: 8px; background: var(--crimson); color: white;
  padding: 1px 4px; border-radius: 6px; font-weight: 700;
  letter-spacing: .5px;
}

/* —— AILMENTS BOOK —— */
.book{
  background:
    linear-gradient(135deg, rgba(255,255,255,.04) 0 20%, transparent 20% 80%, rgba(0,0,0,.1) 80% 100%),
    linear-gradient(180deg, var(--chalk-board) 0%, var(--chalk-board-light) 100%);
  border-radius: 8px;
  padding: 12px;
  min-height: 100%;
  box-shadow: inset 0 0 30px rgba(0,0,0,.3);
  border: 2px solid var(--chalk-gold);
  position: relative;
}
.book::before{
  /* corner flourish */
  content: "❧";
  position: absolute;
  top: 4px; left: 8px;
  color: var(--chalk-gold);
  font-size: 16px;
  opacity: .6;
}
.book::after{
  content: "❧";
  position: absolute;
  bottom: 4px; right: 8px;
  color: var(--chalk-gold);
  font-size: 16px;
  opacity: .6;
  transform: rotate(180deg);
}
.book-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--chalk-gold);
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.book-sub{
  font-family: 'Delius', cursive;
  color: var(--chalk-cream);
  font-size: 10.5px;
  text-align: center;
  opacity: .75;
  margin-bottom: 10px;
  font-style: italic;
}

.ailment-list{ display: flex; flex-direction: column; gap: 6px; }
.ailment-entry{
  background: rgba(244,234,209,.08);
  border: 1px solid rgba(212,168,69,.3);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--chalk-cream);
  position: relative;
}
.ailment-entry.unknown{
  background: rgba(255,255,255,.03);
  border-style: dashed;
  border-color: rgba(255,255,255,.15);
  color: rgba(244,234,209,.35);
}
.ailment-entry.unknown .ae-name{ font-style: italic; }
.ailment-entry.new-stamp::before{
  content: "NEW";
  position: absolute;
  top: -6px; right: 8px;
  background: var(--bubblegum);
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: .8px;
  box-shadow: var(--shadow-sm);
  animation: new-wiggle 1.2s ease-in-out;
}
@keyframes new-wiggle{
  0%{ transform: scale(0) rotate(0deg); }
  50%{ transform: scale(1.2) rotate(-8deg); }
  100%{ transform: scale(1) rotate(-3deg); }
}
.ae-name{
  font-family: 'Chewy', cursive;
  font-size: 15px;
  color: var(--chalk-gold);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: .3px;
}
.ae-name .em{ font-size: 16px; }
.ailment-entry.unknown .ae-name{ color: rgba(212,168,69,.45); }
.ae-note{
  font-family: 'Delius', cursive;
  font-size: 11px;
  margin: 3px 0 5px;
  opacity: .85;
  font-style: italic;
  line-height: 1.3;
}
.ae-symptoms{
  display: flex; flex-wrap: wrap; gap: 3px;
  margin: 4px 0;
}
.ae-sym{
  background: rgba(212,168,69,.12);
  border: 1px solid rgba(212,168,69,.3);
  padding: 2px 7px 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Fredoka', sans-serif;
  color: var(--chalk-cream);
  display: inline-flex; align-items: center; gap: 3px;
}
.ae-treat{ font-size: 10px; color: var(--chalk-cream); opacity: .8; }
.ae-treat .chip{
  display: inline-block;
  background: rgba(47,168,155,.2);
  color: var(--teal);
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 3px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 10px;
  border: 1px solid rgba(47,168,155,.3);
}
.ae-doctor-only{
  display: inline-block;
  background: var(--crimson);
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: .5px;
  margin-top: 4px;
}

/* hush list */
.hush-list{ display:flex; flex-direction:column; gap: 5px; }
.hush-item{
  background: var(--paper-light);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--crimson);
  border-radius: 4px;
  padding: 7px 9px;
}
.hush-item .hp{
  font-family:'Delius', cursive;
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}
.hush-item .hn{
  font-size: 10px;
  color: var(--ink-light);
  font-style: italic;
  margin-top: 2px;
}
.hush-item .hd{
  display:inline-block;
  background: rgba(177,74,61,.15);
  color: var(--crimson);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  margin-top: 3px;
  font-family:'Fredoka', sans-serif;
}

/* ——— modals ——— */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(61,42,28,.55);
  z-index: 50;
  display:grid; place-items:center;
  animation: fade-in .3s;
  padding: 20px;
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }

.modal{
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border-radius: 16px;
  padding: 26px 30px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: pop-modal .4s cubic-bezier(.34,1.56,.64,1);
  border: 2px solid var(--paper-edge);
  max-height: 92vh;
  overflow-y: auto;
}
@keyframes pop-modal{
  from{ opacity:0; transform: scale(.7); }
  to{ opacity:1; transform: scale(1); }
}

.verdict-banner{
  font-family:'Chewy', cursive;
  font-size: 26px;
  text-align:center;
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.verdict-banner.clean       { background: linear-gradient(180deg, var(--teal), var(--teal-dark));       color: var(--paper-light); }
.verdict-banner.corrected   { background: linear-gradient(180deg, var(--goldenrod), var(--goldenrod-dark)); color: var(--paper-light); }
.verdict-banner.wrong       { background: linear-gradient(180deg, #c97063, var(--crimson-dark));        color: var(--paper-light); }
.verdict-banner.dangerous   { background: linear-gradient(180deg, #c04030, #6a1f18);                    color: var(--paper-light); }
.verdict-banner.incomplete  { background: linear-gradient(180deg, #c9a470, #87683f);                    color: var(--paper-light); }
.verdict-banner.good_consult{ background: linear-gradient(180deg, var(--sky), var(--sky-dark));         color: var(--paper-light); }
.verdict-banner.bad_consult { background: linear-gradient(180deg, #b3a580, #7a6d4e);                    color: var(--paper-light); }
.verdict-banner.good_sample { background: linear-gradient(180deg, var(--teal), var(--teal-dark));       color: var(--paper-light); }
.verdict-banner.bad_sample  { background: linear-gradient(180deg, #c97063, var(--crimson-dark));        color: var(--paper-light); }
.verdict-banner.test_sample { background: linear-gradient(180deg, var(--lavender), var(--plum));        color: var(--paper-light); }

.modal .flavor{
  font-family:'Delius', cursive;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: rgba(107,127,87,.08);
  border-left: 3px solid var(--moss);
  border-radius: 4px;
}
.modal .why{
  font-size: 12.5px;
  color: var(--ink-light);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* —— NEW DISCOVERY banner —— */
.discovery-card{
  background: linear-gradient(135deg, var(--chalk-board) 0%, var(--chalk-board-light) 100%);
  border: 2px solid var(--chalk-gold);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: var(--chalk-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: discovery-glow 1.2s ease-out;
}
@keyframes discovery-glow{
  0%   { transform: scale(.85); box-shadow: 0 0 0 rgba(212,168,69,0); }
  50%  { transform: scale(1.04); box-shadow: 0 0 30px rgba(212,168,69,.6); }
  100% { transform: scale(1);    box-shadow: 0 0 12px rgba(212,168,69,.25); }
}
.discovery-card::before, .discovery-card::after{
  content: "✦";
  position: absolute;
  color: var(--chalk-gold);
  font-size: 18px;
  opacity: .7;
  animation: sparkle 2s ease-in-out infinite;
}
.discovery-card::before{ top: 4px; left: 12px; }
.discovery-card::after{ bottom: 4px; right: 12px; animation-delay: 1s; }
@keyframes sparkle{
  0%, 100%{ opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.3) rotate(180deg); }
}
.discovery-card .label{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--chalk-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.discovery-card .ail-name{
  font-family: 'Chewy', cursive;
  font-size: 22px;
  color: var(--chalk-gold);
  letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.discovery-card .ail-sub{
  font-family: 'Delius', cursive;
  font-size: 11.5px;
  opacity: .8;
  margin-top: 4px;
  font-style: italic;
}

.modal .trust-delta{
  text-align:center;
  font-family:'Chewy', cursive;
  font-size: 20px;
  margin-bottom: 16px;
}
.trust-delta.pos{ color: var(--teal-dark); }
.trust-delta.neg{ color: var(--crimson); }

.modal .next{
  width: 100%;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  color: var(--paper-light);
  border: none;
  padding: 12px;
  font-family:'Chewy', cursive;
  font-size: 17px;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}
.modal .next:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* consult */
.consult-modal h3{
  font-family:'Chewy', cursive;
  font-size: 22px;
  color: var(--teal-dark);
  margin-bottom: 4px;
  text-align: center;
}
.consult-modal .csub{
  font-family:'Delius', cursive;
  font-size: 13px;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 14px;
  font-style: italic;
}
.consult-questions{ display:flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cq-btn{
  background: rgba(232,184,48,.12);
  border: 1px solid var(--goldenrod);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 8px;
  font-family:'Delius', cursive;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}
.cq-btn:hover{ background: var(--goldenrod); color: var(--paper-light); transform: translateX(2px); }
.cq-btn::before{ content: "❓ "; }
.consult-response{
  background: rgba(45,74,107,.08);
  border-left: 3px solid var(--ink-pen);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-family:'Kalam', cursive;
  font-size: 14px;
  color: var(--ink-pen);
  line-height: 1.5;
  animation: chip-pop .3s ease;
}
.consult-response::before{
  content: "Dr. Bramble: ";
  font-family:'Fredoka', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 11px;
  color: var(--ink);
  display: block;
  margin-bottom: 3px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.consult-cost{
  font-size: 11px;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 6px;
  font-style: italic;
}
.consult-close{
  width: 100%;
  background: var(--ink-light);
  color: var(--paper-light);
  border: none;
  padding: 10px;
  font-family:'Fredoka', sans-serif;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  font-weight: 600;
}
.consult-close:hover{ background: var(--ink); }

/* intro */
.intro-modal{ max-width: 580px; padding: 30px 34px; }
.intro-modal h2{
  font-family:'Chewy', cursive;
  font-size: 30px;
  background: linear-gradient(135deg, var(--teal-dark), var(--moss-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: .5px;
}
.intro-modal .subtitle{
  text-align: center;
  font-family:'Delius', cursive;
  color: var(--ink-light);
  margin-bottom: 18px;
  font-size: 14px;
  font-style: italic;
}
.intro-modal .lore{
  background: rgba(47,168,155,.08);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  border-radius: 4px;
  font-family:'Delius', cursive;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 14px;
}
.intro-modal .lore p{ margin-bottom: 8px; }
.intro-modal .lore p:last-child{ margin-bottom: 0; }
.intro-modal .lore strong{ color: var(--teal-dark); font-weight: 600; }
.intro-modal .rules{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.intro-rule{
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family:'Delius', cursive;
  color: var(--ink);
}
.intro-rule b{ color: var(--teal-dark); display: block; margin-bottom: 2px; }
.intro-sig{
  text-align: right;
  font-family:'Kalam', cursive;
  font-size: 16px;
  color: var(--ink-pen);
  margin-bottom: 14px;
  transform: rotate(-2deg);
}

/* end */
.end-card{
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border-radius: 18px;
  padding: 28px 32px;
  max-width: 520px; width: 100%;
  text-align:center;
  border: 2px solid var(--paper-edge);
  box-shadow: var(--shadow-lg);
}
.end-card h2{
  font-family:'Chewy', cursive;
  font-size: 32px;
  background: linear-gradient(135deg, var(--teal-dark), var(--moss-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.end-card .sub{
  font-family:'Delius', cursive;
  color: var(--ink-light);
  margin-bottom: 18px;
}
.end-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.end-stat{
  background: rgba(47,168,155,.1);
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(47,168,155,.22);
}
.end-stat .n{
  font-family:'Chewy', cursive;
  font-size: 24px;
  color: var(--teal-dark);
  line-height:1;
}
.end-stat .l{
  font-size: 10px; color: var(--ink-light);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 3px;
}

/* toast */
.toast{
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper-light);
  padding: 10px 18px;
  border-radius: 20px;
  font-family:'Delius', cursive;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all .3s;
  pointer-events:none;
  z-index: 100;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

.hidden{ display:none !important; }

@media(max-width:1200px){
  .script-card{ transform: none; }
  .counter{ min-height: 260px; }
}

/* =======================================================================
   v3.1 additions — tag discovery, patient history, extra polish
   ======================================================================= */

/* —— new jar-tag styles —— */
.drug-jar .jar-tag.bitter     { background: rgba(168,146,199,.2);  color: var(--plum); }
.drug-jar .jar-tag.doctor_only{ background: rgba(177,74,61,.2);    color: var(--crimson); }

/* —— new symptom chip colors —— */
.symptom-chip[data-color="plum"]     { border-left-color: var(--plum); }
.symptom-chip[data-color="lavender"] { border-left-color: var(--lavender); }

/* —— Learned card in feedback modal —— */
.learned-card{
  background: linear-gradient(135deg, rgba(94,180,227,.12) 0%, rgba(168,146,199,.12) 100%);
  border: 1.5px solid var(--sky);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: chip-pop .4s ease;
  position: relative;
}
.learned-card::before{
  content: "✧";
  position: absolute; top: 4px; right: 10px;
  color: var(--sky);
  font-size: 14px;
  opacity: .5;
}
.learned-card .label{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--sky-dark);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}
.learned-card .learned-row{
  display: flex; align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.learned-card .learned-row strong{
  color: var(--sky-dark);
  font-weight: 600;
  min-width: 100px;
}
.learned-card .learned-tags{
  display: flex; gap: 3px; flex-wrap: wrap;
}
.learned-card .learned-tags .jar-tag{
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}
.learned-card .learned-tags .jar-tag.strong   { background: rgba(177,74,61,.18);   color: var(--crimson); }
.learned-card .learned-tags .jar-tag.mild     { background: rgba(107,127,87,.15);  color: var(--moss-dark); }
.learned-card .learned-tags .jar-tag.fast     { background: rgba(94,180,227,.15);  color: var(--sky-dark); }
.learned-card .learned-tags .jar-tag.slow     { background: rgba(168,146,199,.15); color: var(--plum); }
.learned-card .learned-tags .jar-tag.drowsy   { background: rgba(122,77,122,.18);  color: var(--plum-dark); }
.learned-card .learned-tags .jar-tag.kid_safe { background: rgba(232,184,48,.22);  color: var(--goldenrod-dark); }
.learned-card .learned-tags .jar-tag.cooling  { background: rgba(122,204,165,.25); color: var(--teal-dark); }
.learned-card .learned-tags .jar-tag.acidic   { background: rgba(200,122,30,.2);   color: var(--amber); }
.learned-card .learned-tags .jar-tag.bitter   { background: rgba(168,146,199,.22); color: var(--plum); }

/* —— Patient history panel on the patient card —— */
.patient-history{
  background: rgba(250,242,222,.55);
  border: 1px solid rgba(168,146,199,.4);
  border-left: 3px solid var(--plum);
  border-radius: 6px;
  padding: 7px 10px 6px;
  font-family: 'Delius', cursive;
  font-size: 12px;
}
.patient-history .ph-title{
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--plum-dark);
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.patient-history .ph-row{
  padding: 3px 0;
  line-height: 1.35;
  color: var(--ink);
  display: flex; flex-wrap: wrap;
  gap: 4px; align-items: center;
}
.patient-history .ph-phase{
  font-size: 10px;
  color: var(--ink-light);
  font-style: italic;
  min-width: 80px;
}
.patient-history .ph-ail{ color: var(--plum); }
.patient-history .ph-verdict{
  font-size: 9px;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  padding: 1px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-left: auto;
}
.patient-history .ph-verdict.clean      { background: rgba(47,168,155,.2);  color: var(--teal-dark); }
.patient-history .ph-verdict.corrected  { background: rgba(232,184,48,.25); color: var(--goldenrod-dark); }
.patient-history .ph-verdict.wrong,
.patient-history .ph-verdict.dangerous  { background: rgba(177,74,61,.2);   color: var(--crimson); }
.patient-history .ph-verdict.incomplete { background: rgba(201,164,112,.25);color: #87683f; }
.patient-history .ph-verdict.good_consult{background: rgba(94,180,227,.2);  color: var(--sky-dark); }
.patient-history .ph-verdict.good_sample { background: rgba(47,168,155,.2); color: var(--teal-dark); }
.patient-history .ph-verdict.bad_sample  { background: rgba(177,74,61,.2);  color: var(--crimson); }
.patient-history .ph-verdict.test_sample { background: rgba(168,146,199,.2);color: var(--plum); }

/* —— Topbar strong phase label —— */
.brand .sub strong{
  color: var(--teal-dark);
  font-weight: 600;
}

/* —— Extra sparkle particles around discovery card —— */
.discovery-card .sparkle{
  position: absolute;
  font-size: 10px;
  color: var(--chalk-gold);
  pointer-events: none;
  animation: sparkle-float 2.2s ease-in-out infinite;
  opacity: 0;
}
.discovery-card .sparkle:nth-child(1){ top: 8px;  left: 50%; animation-delay: .2s; }
.discovery-card .sparkle:nth-child(2){ top: 30%;  left: 10%; animation-delay: .6s; }
.discovery-card .sparkle:nth-child(3){ top: 60%;  right: 10%; animation-delay: 1s; }
.discovery-card .sparkle:nth-child(4){ bottom: 12%; left: 30%; animation-delay: 1.4s; }
@keyframes sparkle-float{
  0%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
  50%      { opacity: 1; transform: translateY(-8px) scale(1.1); }
}

/* =======================================================================
   v3.2 additions — universal interview, discovered Hush entries, jittery tag
   ======================================================================= */

/* —— new drug tag —— */
.drug-jar .jar-tag.jittery { background: rgba(217,85,122,.18); color: #a0314f; }
.learned-card .learned-tags .jar-tag.jittery { background: rgba(217,85,122,.18); color: #a0314f; }

/* —— universal question row —— */
.universal-row{
  background: linear-gradient(180deg, rgba(47,168,155,.10), rgba(47,168,155,.04));
  border: 1px solid rgba(47,168,155,.22);
  border-radius: 8px;
  padding: 7px 9px 8px;
  margin-bottom: 2px;
}
.universal-label{
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.universal-label.universal-done{
  color: var(--ink-light);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: none;
  font-size: 11px;
  padding: 2px 4px;
}
.universal-btns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.uni-btn{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: var(--paper-light);
  border: 1px solid var(--teal);
  border-radius: 16px;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  color: var(--ink);
  text-align: left;
  line-height: 1.1;
}
.uni-btn:hover{
  background: var(--teal);
  color: var(--paper-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.uni-btn:hover .uni-ico{ filter: saturate(1.2); }
.uni-btn .uni-ico{
  font-size: 14px;
  flex-shrink: 0;
}
.uni-btn .uni-txt{
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— question/answer pairing —— */
.qa-pair{
  display: flex; flex-direction: column;
  gap: 3px;
  margin: 4px 0;
  animation: chip-pop .3s ease;
}
.qa-ask{
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-light);
  display: flex; align-items: center; gap: 5px;
  padding: 0 2px;
}
.qa-ask em{ color: var(--teal-dark); font-style: normal; font-weight: 600; }
.qa-ask .qa-icon{ font-size: 12px; opacity: .8; }

/* —— Hush List: discovered-today entries get a glow —— */
.hush-item.discovered{
  background: linear-gradient(135deg, rgba(232,184,48,.18) 0%, rgba(245,122,168,.12) 100%);
  border-color: var(--goldenrod);
  border-left-color: var(--bubblegum);
  position: relative;
  animation: chip-pop .4s ease;
}
.hush-new-tag{
  position: absolute;
  top: -6px; right: 6px;
  background: var(--bubblegum);
  color: white;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: var(--shadow-sm);
}
.hush-empty{
  text-align: center;
  padding: 24px 12px;
  color: var(--paper-light);
  font-family: 'Delius', cursive;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .75;
  font-style: italic;
}

/* narrow screens: universal buttons full-width */
@media(max-width: 1200px){
  .universal-btns{ grid-template-columns: 1fr; }
}

/* =======================================================================
   v3.3 additions — unified patient profile, prep letter, 6-bottle counter
   ======================================================================= */

/* —— Unified patient profile row (symptoms + allergies + past meds) —— */
.patient-profile{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 0;
  align-items: center;
}
.patient-profile.empty{
  padding: 6px 10px;
  background: rgba(61,42,28,.03);
  border: 1px dashed rgba(61,42,28,.15);
  border-radius: 6px;
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-light);
  text-align: center;
}
.patient-profile.empty em{ font-style: italic; }

.profile-chip{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  animation: chip-pop .3s ease;
}

/* Allergy-X chip — crimson edge, hostile-looking */
.allergy-chip{
  background: rgba(177,74,61,.12);
  color: var(--crimson);
  border: 1px solid rgba(177,74,61,.3);
  border-left: 3px solid var(--crimson);
  text-decoration: line-through;
  text-decoration-color: rgba(177,74,61,.4);
  text-decoration-thickness: 1.5px;
}
.allergy-chip .chip-x{
  font-size: 10px;
  filter: saturate(1.4);
  text-decoration: none;
  display: inline-block;
}

/* Past-med chip — muted, informational */
.pastmed-chip{
  background: rgba(61,42,28,.05);
  color: var(--ink-light);
  border: 1px solid rgba(61,42,28,.15);
  font-style: italic;
  font-weight: 500;
  font-size: 11px;
}
.pastmed-chip .chip-ico{ font-size: 10px; opacity: .7; }

/* —— Prep letter modal (Dr. Bramble's note) —— */
.prep-modal{
  max-width: 460px;
  padding: 28px 34px 24px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 26px,
      rgba(45,74,107,.06) 26px 27px),
    linear-gradient(180deg, #fcf3dd 0%, #f3e6c4 100%);
  border: 1.5px solid var(--paper-edge);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(61,42,28,.2),
              0 14px 34px rgba(61,42,28,.35);
  transform: rotate(-.3deg);
  position: relative;
}
.prep-modal::before{
  /* folded corner */
  content:""; position:absolute; top:0; right:0;
  width:34px; height:34px;
  background: linear-gradient(225deg, transparent 50%, #d9c89a 50%, #c4b384 100%);
  box-shadow: -1px 1px 2px rgba(61,42,28,.15);
}
.prep-seal{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  width: 52px; height: 52px;
  background: radial-gradient(circle at 35% 35%, var(--crimson) 0%, var(--crimson-dark) 70%);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--paper-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  box-shadow: var(--shadow-md), inset -2px -2px 4px rgba(0,0,0,.3);
  border: 3px solid rgba(250,242,222,.35);
  z-index: 2;
}
.prep-from{
  text-align: right;
  font-family: 'Kalam', cursive;
  font-size: 12px;
  color: var(--ink-light);
  font-style: italic;
  margin-bottom: 8px;
  letter-spacing: .3px;
}
.prep-title{
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  text-align: center;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 600;
  border-bottom: 1.5px solid rgba(61,42,28,.15);
  padding-bottom: 8px;
  letter-spacing: .5px;
}
.prep-body{
  font-family: 'Kalam', cursive;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-pen);
  margin-bottom: 14px;
}
.prep-body p{ margin-bottom: 9px; }
.prep-body p:last-child{ margin-bottom: 0; }
.prep-sig{
  text-align: right;
  font-family: 'Kalam', cursive;
  font-size: 18px;
  color: var(--ink-pen);
  font-weight: 700;
  transform: rotate(-2deg);
  margin: 14px 18px 18px 0;
  letter-spacing: .5px;
}
.prep-modal .next{
  background: linear-gradient(180deg, var(--copper), var(--copper-dark));
}

/* —— Counter: accommodate up to 6 bottles gracefully —— */
.bottle{ width: 105px; }
.bottle .vessel{ width: 88px; }
.bottle-label{
  width: 68px;
  padding: 3px 2px 4px;
}
.bottle-label .lbl-name{ font-size: 8.5px; }
.bottle-label .lbl-dose{ font-size: 10px; }
.bottle-label .lbl-pat{ font-size: 7px; }
.counter-surface{
  gap: 10px;
  padding-top: 14px;
}
.dose-row{
  padding: 2px 2px;
  gap: 2px;
}
.dose-btn{ width: 20px; height: 20px; font-size: 13px; }
.dose-btn.big{ font-size: 9px; }
.dose-val{ min-width: 36px; font-size: 12px; }

@media(max-width: 1350px){
  .bottle{ width: 96px; }
  .bottle .vessel{ width: 80px; }
  .bottle-label{ width: 62px; }
}

/* =======================================================================
   v3.4 additions — potency, treats strip, dose targeting, severity dots
   ======================================================================= */

/* —— Treats strip (live counter summary) —— */
.treats-strip{
  padding: 6px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts-row{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 6px;
}
.ts-label{
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,242,210,.85);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.ts-chip{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: rgba(250,242,222,.15);
  color: rgba(250,242,222,.9);
  border: 1px solid rgba(250,242,222,.25);
  animation: chip-pop .3s ease;
}
.ts-chip .ts-ico{ font-size: 11px; }
.ts-chip .ts-badge{
  display: inline-block;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 3px;
}

.ts-covered{
  background: rgba(47,168,155,.25);
  border-color: var(--teal);
  color: #d5f5ef;
}
.ts-covered .ts-badge{ background: var(--teal); color: white; }

.ts-partial{
  background: rgba(232,184,48,.25);
  border-color: var(--goldenrod);
  color: #fff0b5;
}
.ts-partial .ts-badge{ background: var(--goldenrod); color: var(--ink); }

.ts-missing{
  background: rgba(177,74,61,.25);
  border-color: var(--crimson);
  color: #f5c9c1;
}
.ts-missing .ts-badge{ background: var(--crimson); color: white; }

.ts-offtarget{
  background: rgba(61,42,28,.35);
  border-color: rgba(250,242,222,.3);
  border-style: dashed;
  color: rgba(250,242,222,.55);
  font-style: italic;
}

.ts-side{
  background: rgba(168,146,199,.3);
  border-color: var(--lavender);
  color: #e8dcf7;
}

.ts-empty{
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: rgba(250,242,222,.5);
  font-style: italic;
}

/* —— Severity dots on symptom chips —— */
.symptom-chip .sc-sev{
  display: inline-block;
  font-weight: 700;
  letter-spacing: 1px;
  margin-left: 3px;
  font-size: 10px;
  line-height: 1;
}
.symptom-chip .sc-sev-1{ color: var(--moss); }
.symptom-chip .sc-sev-2{ color: var(--copper-dark); }
.symptom-chip .sc-sev-3{ color: var(--crimson); }

/* —— Patient size badge —— */
.size-badge{
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-light);
  background: rgba(107,127,87,.1);
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid rgba(107,127,87,.2);
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

/* —— Dose health indicators on bottle —— */
.bottle.dose-under .bottle-label{
  border-color: var(--copper);
  box-shadow: 0 0 0 2px rgba(232,184,48,.2);
}
.bottle.dose-under .lbl-dose{ color: var(--copper-dark); }

.bottle.dose-on-target .bottle-label{
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(47,168,155,.25);
}
.bottle.dose-on-target .lbl-dose{ color: var(--teal-dark); }

.bottle.dose-over .bottle-label{
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px rgba(177,74,61,.3);
}
.bottle.dose-over .lbl-dose{ color: var(--crimson); }

.dose-range.under{ color: rgba(232,184,48,.95); }
.dose-range.on-target{ color: rgba(122,204,165,.95); }
.dose-range.over{ color: rgba(232,144,138,.95); }

/* =======================================================================
   v3.5 — counter compaction. Treats strip moved ABOVE surface and visible by default.
   ======================================================================= */

/* Counter: drop min-height substantially, let the surface be content-sized */
.counter{
  min-height: auto;
  padding: 14px 16px 14px;
}

.counter-title{
  margin-bottom: 8px;
}

/* Treats strip sits up top, always readable */
.treats-strip{
  padding: 4px 2px 8px;
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(250,242,222,.2);
}
.treats-strip:empty{
  display: none;
}

/* Counter surface: much shorter minimum */
.counter-surface{
  min-height: 170px;
  padding-top: 10px;
  gap: 10px;
}

/* Smaller counter-empty prompt */
.counter-empty{
  font-size: 12px;
  line-height: 1.4;
}
.counter-empty .big{
  font-size: 15px;
  margin-bottom: 2px;
}

/* Bottles: compact */
.bottle{
  width: 92px;
}
.bottle .vessel{
  width: 76px;
}
.bottle-label{
  width: 60px;
  padding: 3px 2px;
}
.bottle-label .lbl-rx{ font-size: 10px; }
.bottle-label .lbl-name{ font-size: 8px; }
.bottle-label .lbl-dose{ font-size: 10px; }
.bottle-label .lbl-pat{ font-size: 7px; }

/* Dose setter: compact */
.dose-setter{
  margin-top: 6px;
  gap: 2px;
}
.dose-row{
  padding: 2px 3px;
  gap: 2px;
}
.dose-btn{
  width: 19px; height: 19px;
  font-size: 12px;
}
.dose-btn.big{
  font-size: 8px;
}
.dose-val{
  min-width: 34px;
  font-size: 11px;
}
.dose-range{
  font-size: 8px;
  line-height: 1.2;
}

/* Tiny screens get even tighter */
@media(max-width: 1350px){
  .bottle{ width: 86px; }
  .bottle .vessel{ width: 72px; }
  .bottle-label{ width: 56px; }
}

/* =======================================================================
   v3.6 — lock to viewport, per-pane scrolling. No more page scroll.
   ======================================================================= */

html, body{
  overflow: hidden;           /* kill the outer scrollbar */
  height: 100vh;
  height: 100dvh;             /* dynamic vh on mobile browsers */
}

.app{
  height: 100vh;
  height: 100dvh;
  padding: 10px 18px 14px;
  min-height: 0;
  gap: 10px;
}

.topbar{
  flex-shrink: 0;
  padding: 6px 18px 6px 52px;
}
.topbar::before{ top: -12px; width: 40px; height: 40px; font-size: 24px; }
.brand h1{ font-size: 22px; }
.brand .sub{ font-size: 11px; }
.stat .n{ font-size: 20px; }
.stat .l{ font-size: 9px; }

main{
  flex: 1;
  min-height: 0;              /* critical — lets children constrain */
  gap: 14px;
}

/* Each of the three columns: fixed shell, scroll inside */
.left-pane,
.counter-pane,
.cabinet-pane{
  min-height: 0;
  overflow: hidden;
}

/* The pane title stays pinned; the scrollable child flexes to fill */
.left-pane > .pane-title,
.counter-pane > .pane-title,
.cabinet-pane > .pane-title{
  flex-shrink: 0;
}

/* Left pane (script + patient): script fixed at top, patient scrolls */
.left-pane{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.left-pane #script-card{
  flex-shrink: 0;
}
.left-pane #patient-pane-title{
  flex-shrink: 0;
  margin-top: 2px;
}
.left-pane #patient-card{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Counter pane: counter fills, actions pinned at bottom */
.counter-pane{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.counter-pane .counter{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.counter-pane .actions{
  flex-shrink: 0;
}

/* Cabinet pane: tabs pinned, content scrolls */
.cabinet-pane .cabinet{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cabinet-pane .cab-tabs{
  flex-shrink: 0;
}
.cabinet-pane .cab-content{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Style scrollbars to be unobtrusive on paper/wood backgrounds */
.left-pane #patient-card::-webkit-scrollbar,
.counter-pane .counter::-webkit-scrollbar{
  width: 6px;
}
.left-pane #patient-card::-webkit-scrollbar-track,
.counter-pane .counter::-webkit-scrollbar-track{
  background: transparent;
}
.left-pane #patient-card::-webkit-scrollbar-thumb{
  background: rgba(61,42,28,.25);
  border-radius: 3px;
}
.counter-pane .counter::-webkit-scrollbar-thumb{
  background: rgba(250,242,222,.3);
  border-radius: 3px;
}

/* Shrink the script card padding so it leaves more room for the patient */
.script-card{
  padding: 14px 18px 16px;
}
.script-card .rx-lines{
  padding: 8px 10px;
  margin-top: 8px;
}
.ailment-box{ padding: 7px 10px; margin: 8px 0; }

/* Tighten patient card too */
.patient-card{
  padding: 10px 12px;
  gap: 8px;
}

/* On medium screens where three columns won't fit: stack but keep scroll */
@media(max-width: 1200px){
  html, body{ overflow-y: auto; height: auto; }
  .app{ height: auto; min-height: 100vh; }
  main{ display: flex; flex-direction: column; }
  .left-pane, .counter-pane, .cabinet-pane{
    overflow: visible;
    min-height: 260px;
  }
  .left-pane #patient-card,
  .counter-pane .counter,
  .cabinet-pane .cab-content{
    overflow: visible;
    max-height: none;
  }
}

/* =======================================================================
   v3.7 — persistence UI (returning-player intro, remembered hush entries)
   ======================================================================= */

/* —— Remembered box in returning-player intro —— */
.remembered-box{
  background:
    linear-gradient(180deg, rgba(47,168,155,.08), rgba(168,146,199,.06));
  border: 1px solid rgba(47,168,155,.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0 10px;
}
.remembered-title{
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.remembered-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.remembered-stat{
  text-align: center;
  padding: 6px 4px;
  background: rgba(250,242,222,.55);
  border: 1px solid rgba(61,42,28,.1);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remembered-stat .n{
  font-family: 'Chewy', cursive;
  font-size: 22px;
  line-height: 1;
  color: var(--teal-dark);
}
.remembered-stat .l{
  font-family: 'Delius', cursive;
  font-size: 10px;
  color: var(--ink-light);
  font-style: italic;
}

/* —— Reset button in returning-player intro —— */
.intro-actions{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.intro-actions .next{
  flex: 1;
}
.intro-reset{
  background: transparent;
  color: var(--ink-light);
  border: 1px solid rgba(61,42,28,.25);
  padding: 12px 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .3px;
  flex-shrink: 0;
}
.intro-reset:hover{
  background: rgba(177,74,61,.08);
  color: var(--crimson);
  border-color: rgba(177,74,61,.35);
}

/* —— Hush List "NOTED" tag (remembered from prior session) —— */
.hush-item.remembered{
  background: rgba(250,242,222,.7);
  border-left-color: var(--teal-dark);
  position: relative;
}
.hush-remembered-tag{
  position: absolute;
  top: -6px; right: 6px;
  background: var(--teal-dark);
  color: var(--paper-light);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: var(--shadow-sm);
  opacity: .9;
}

/* =======================================================================
   v3.8 — end-of-day debrief
   ======================================================================= */

.debrief-modal{
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--paper-edge);
  display: flex;
  flex-direction: column;
  animation: pop-modal .4s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}

/* —— Header —— */
.debrief-header{
  padding: 22px 28px 16px;
  border-bottom: 1.5px dashed rgba(61,42,28,.2);
  flex-shrink: 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 30%, rgba(232,184,48,.12), transparent);
}
.debrief-stars{
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--goldenrod);
  text-shadow: 0 1px 2px rgba(154,122,56,.3);
  margin-bottom: 6px;
  line-height: 1;
  animation: star-twinkle 1.2s ease-out;
}
@keyframes star-twinkle{
  0%   { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.debrief-title{
  font-family: 'Chewy', cursive;
  font-size: 28px;
  background: linear-gradient(135deg, var(--teal-dark), var(--moss-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
  letter-spacing: .5px;
}
.debrief-sub{
  font-family: 'Delius', cursive;
  font-size: 14px;
  color: var(--ink-light);
  font-style: italic;
  margin-bottom: 14px;
}

.debrief-topstats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 420px;
  margin: 0 auto;
}
.dts{
  background: rgba(47,168,155,.1);
  border: 1px solid rgba(47,168,155,.22);
  border-radius: 8px;
  padding: 6px 4px;
  display: flex; flex-direction: column; gap: 1px;
}
.dts .n{
  font-family: 'Chewy', cursive;
  font-size: 20px;
  line-height: 1;
  color: var(--teal-dark);
}
.dts .l{
  font-family: 'Delius', cursive;
  font-size: 9.5px;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.dts-warn{ background: rgba(201,164,112,.14); border-color: rgba(201,164,112,.3); }
.dts-warn .n{ color: #87683f; }
.dts-bad{ background: rgba(177,74,61,.12); border-color: rgba(177,74,61,.3); }
.dts-bad .n{ color: var(--crimson); }
.dts-trust{ background: rgba(193,154,74,.14); border-color: rgba(193,154,74,.3); }
.dts-trust .n{ color: var(--copper-dark); }

/* —— Scroll area —— */
.debrief-scrollarea{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
}
.debrief-scrollarea::-webkit-scrollbar{ width: 7px; }
.debrief-scrollarea::-webkit-scrollbar-track{ background: transparent; }
.debrief-scrollarea::-webkit-scrollbar-thumb{
  background: rgba(61,42,28,.2);
  border-radius: 4px;
}

.debrief-section{ margin-bottom: 18px; }
.debrief-section:last-child{ margin-bottom: 4px; }
.debrief-section-title{
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(61,42,28,.12);
}
.debrief-empty{
  font-family: 'Delius', cursive;
  font-style: italic;
  color: var(--ink-light);
  padding: 14px;
  text-align: center;
  opacity: .7;
}

/* —— Patient log rows —— */
.debrief-log{ display: flex; flex-direction: column; gap: 6px; }
.plog-row{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(250,242,222,.55);
  border: 1px solid rgba(61,42,28,.1);
  border-radius: 8px;
  animation: chip-pop .25s ease backwards;
}
.debrief-log .plog-row:nth-child(1) { animation-delay: 0s; }
.debrief-log .plog-row:nth-child(2) { animation-delay: .04s; }
.debrief-log .plog-row:nth-child(3) { animation-delay: .08s; }
.debrief-log .plog-row:nth-child(4) { animation-delay: .12s; }
.debrief-log .plog-row:nth-child(5) { animation-delay: .16s; }
.debrief-log .plog-row:nth-child(6) { animation-delay: .2s; }
.debrief-log .plog-row:nth-child(7) { animation-delay: .24s; }
.debrief-log .plog-row:nth-child(8) { animation-delay: .28s; }

.plog-sample{
  background: rgba(245,122,168,.08);
  border-color: rgba(245,122,168,.25);
  border-left: 3px solid var(--bubblegum);
}

.plog-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--moss));
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--paper-light);
  flex-shrink: 0;
}
.plog-sample .plog-avatar{
  background: linear-gradient(135deg, var(--bubblegum), var(--crimson-dark));
}

.plog-main{ min-width: 0; }
.plog-name{
  font-family: 'Delius', cursive;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plog-phase, .plog-src{
  font-size: 11px;
  color: var(--ink-light);
  font-weight: 500;
  font-style: italic;
}
.plog-detail{
  font-family: 'Delius', cursive;
  font-size: 11.5px;
  color: var(--ink-light);
  line-height: 1.3;
}
.plog-ail{ color: var(--moss-dark); font-weight: 600; }
.plog-drugs{ color: var(--ink-light); }

.plog-verdict{
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 12px;
  letter-spacing: .3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.plog-verdict.v-clean       { background: rgba(47,168,155,.2);  color: var(--teal-dark); }
.plog-verdict.v-corrected   { background: rgba(232,184,48,.25); color: var(--goldenrod-dark); }
.plog-verdict.v-incomplete  { background: rgba(201,164,112,.2); color: #87683f; }
.plog-verdict.v-wrong       { background: rgba(177,74,61,.2);   color: var(--crimson); }
.plog-verdict.v-dangerous   { background: rgba(192,64,48,.25);  color: #6a1f18; border: 1px solid rgba(192,64,48,.4); }
.plog-verdict.v-good_consult{ background: rgba(94,180,227,.18); color: var(--sky-dark); }
.plog-verdict.v-bad_consult { background: rgba(179,165,128,.2); color: #7a6d4e; }
.plog-verdict.v-good_sample { background: rgba(47,168,155,.2);  color: var(--teal-dark); }
.plog-verdict.v-bad_sample  { background: rgba(177,74,61,.2);   color: var(--crimson); }
.plog-verdict.v-test_sample { background: rgba(168,146,199,.2); color: var(--plum); }

/* —— Learned-today blocks —— */
.learned-block{
  background:
    linear-gradient(135deg, rgba(47,168,155,.06), rgba(168,146,199,.06));
  border: 1px solid rgba(47,168,155,.18);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.learned-block:last-child{ margin-bottom: 0; }
.lb-label{
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.lb-items{ display: flex; flex-wrap: wrap; gap: 5px; }
.lb-chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: var(--paper-light);
  border: 1px solid rgba(61,42,28,.14);
  border-radius: 6px;
  font-family: 'Delius', cursive;
  font-size: 12px;
  color: var(--ink);
  animation: chip-pop .35s ease backwards;
}
.lb-chip strong{ color: var(--ink); font-weight: 600; }
.lb-ailment{
  border-color: rgba(193,154,74,.4);
  background: rgba(255,244,216,.9);
}
.lb-drug{
  border-color: rgba(47,168,155,.3);
}
.lb-hush{
  border-color: rgba(177,74,61,.3);
  background: rgba(250,242,222,.9);
}
.lb-x{
  color: var(--crimson);
  font-size: 10px;
}
.lb-tag{
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
  margin-left: 2px;
}
.lb-tag.drowsy   { background: rgba(122,77,122,.18);  color: var(--plum-dark); }
.lb-tag.kid_safe { background: rgba(232,184,48,.22);  color: var(--goldenrod-dark); }
.lb-tag.cooling  { background: rgba(122,204,165,.25); color: var(--teal-dark); }
.lb-tag.acidic   { background: rgba(200,122,30,.18);  color: var(--amber); }
.lb-tag.bitter   { background: rgba(168,146,199,.22); color: var(--plum); }
.lb-tag.jittery  { background: rgba(217,85,122,.18);  color: #a0314f; }

/* —— Footer —— */
.debrief-footer{
  padding: 14px 24px;
  border-top: 1.5px dashed rgba(61,42,28,.2);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: rgba(250,242,222,.4);
}
.debrief-btn{
  flex: 1;
  padding: 13px;
  font-family: 'Chewy', cursive;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}
.debrief-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.debrief-btn.primary{
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  color: var(--paper-light);
}
.debrief-btn.secondary{
  background: rgba(61,42,28,.08);
  color: var(--ink);
  border: 1px solid rgba(61,42,28,.15);
}

/* Smaller screens */
@media(max-width: 640px){
  .debrief-topstats{ grid-template-columns: repeat(2, 1fr); }
  .plog-row{ grid-template-columns: 32px 1fr; grid-template-rows: auto auto; }
  .plog-verdict{ grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
  .plog-avatar{ width: 32px; height: 32px; font-size: 16px; }
}

/* =======================================================================
   v3.9 — Refuse-to-Serve button, side-effect feedback card, quack verdicts
   ======================================================================= */

/* —— Refuse button —— */
.btn.refuse{
  background: linear-gradient(180deg, #d9555a 0%, #a33f44 100%);
  color: var(--paper-light);
  box-shadow: 0 2px 6px rgba(163,63,68,.35), inset 0 1px 0 rgba(255,255,255,.15);
  border: 1px solid #8c3035;
  letter-spacing: .3px;
}
.btn.refuse:hover:not(:disabled){
  background: linear-gradient(180deg, #e06166 0%, #b54850 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(163,63,68,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.refuse:active:not(:disabled){
  transform: translateY(0);
}
.btn.refuse.hidden{ display: none; }

/* —— Side-effect "but..." card in feedback modal —— */
.sideeffect-card{
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid;
  position: relative;
  animation: chip-pop .35s ease .15s backwards;
}
.sideeffect-card.risky{
  background: linear-gradient(135deg, rgba(177,74,61,.12), rgba(217,85,90,.08));
  border-color: rgba(177,74,61,.4);
  border-left-width: 3px;
}
.sideeffect-card.benign{
  background: linear-gradient(135deg, rgba(168,146,199,.1), rgba(94,180,227,.06));
  border-color: rgba(168,146,199,.3);
  border-left-width: 3px;
}
.sideeffect-card.sev-flavor{
  background: linear-gradient(135deg, rgba(193,154,74,.08), rgba(232,184,48,.06));
  border-color: rgba(193,154,74,.25);
  border-left-width: 3px;
}

.sideeffect-card .se-label{
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
.sideeffect-card.risky .se-label{ color: var(--crimson); }
.sideeffect-card .se-spark{
  font-size: 12px;
}
.sideeffect-card .se-name{
  font-family: 'Chewy', cursive;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.sideeffect-card.risky .se-name{ color: var(--crimson); }
.sideeffect-card .se-flavor{
  font-family: 'Delius', cursive;
  font-size: 12.5px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1.35;
}
.sideeffect-card .se-delta{
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--crimson);
  margin-top: 5px;
  letter-spacing: .3px;
}

/* —— Verdict banner styling for quack verdicts —— */
.verdict-banner.refused_quack{
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: var(--paper-light);
}
.verdict-banner.served_quack{
  background: linear-gradient(135deg, #a33f44, #6e282c);
  color: var(--paper-light);
}
.verdict-banner.refused_legit{
  background: linear-gradient(135deg, #b67545, #7d4a25);
  color: var(--paper-light);
}

/* —— Debrief verdict chips for quack verdicts —— */
.plog-verdict.v-refused_quack{
  background: rgba(47,168,155,.22);
  color: var(--teal-dark);
}
.plog-verdict.v-served_quack{
  background: rgba(163,63,68,.22);
  color: #6e282c;
  border: 1px solid rgba(163,63,68,.4);
}
.plog-verdict.v-refused_legit{
  background: rgba(183,117,69,.2);
  color: #7d4a25;
}

/* =======================================================================
   v3.10 — nudge chip + escalated samples
   ======================================================================= */

/* "Still things to ask?" nudge in the Treats strip — appears when coverage
   looks complete but the universal interview isn't exhausted. */
.ts-chip.ts-nudge{
  background: rgba(168,146,199,.25);
  border: 1px dashed var(--lavender);
  color: var(--plum);
  font-style: italic;
  font-weight: 500;
  animation: nudge-pulse 2.4s ease-in-out infinite;
}
.ts-chip.ts-nudge .ts-ico{
  filter: saturate(.9);
}
@keyframes nudge-pulse{
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* =======================================================================
   v3.11 — economy: coins in topbar, delta row, debrief purse block
   ======================================================================= */

/* —— Topbar coin stat —— */
.stat.coins{
  border-left: 1px dashed rgba(193,154,74,.3);
  padding-left: 16px;
}
.stat.coins .n{
  color: var(--copper-dark);
  text-shadow: 0 1px 0 rgba(232,184,48,.25);
}

/* —— Delta row in feedback modal: trust & coins side by side —— */
.delta-row{
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.delta-row .trust-delta{
  flex: 1;
  min-width: 140px;
  margin: 0;
}
.coin-delta{
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  letter-spacing: .3px;
  border: 1px solid;
  animation: chip-pop .3s ease .1s backwards;
}
.coin-delta.pos{
  background: linear-gradient(135deg, rgba(232,184,48,.22), rgba(193,154,74,.15));
  color: var(--copper-dark);
  border-color: rgba(193,154,74,.45);
}
.coin-delta.neg{
  background: linear-gradient(135deg, rgba(177,74,61,.15), rgba(163,63,68,.1));
  color: var(--crimson);
  border-color: rgba(177,74,61,.35);
}

/* —— Debrief purse topstats card —— */
.dts.dts-purse{
  background: rgba(193,154,74,.14);
  border-color: rgba(193,154,74,.3);
}
.dts.dts-purse .n{ color: var(--copper-dark); }

/* —— Debrief purse block (the full breakdown) —— */
.purse-block{
  background:
    linear-gradient(180deg, rgba(232,184,48,.08), rgba(250,242,222,.55));
  border: 1px solid rgba(193,154,74,.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Delius', cursive;
}
.purse-line{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-light);
}
.purse-label{
  font-style: italic;
}
.purse-val{
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 14px;
  font-style: normal;
}
.purse-val.pos{ color: var(--teal-dark); }
.purse-val.neg{ color: var(--crimson); }
.purse-net{
  border-top: 1.5px dashed rgba(61,42,28,.2);
  margin-top: 6px;
  padding-top: 7px;
  font-size: 14px;
}
.purse-net .purse-label{
  font-weight: 600;
  color: var(--ink);
  font-style: normal;
}
.purse-net .purse-val{
  font-size: 17px;
  font-family: 'Chewy', cursive;
  letter-spacing: .4px;
}
.purse-best{
  margin-top: 8px;
  padding: 7px 10px;
  background: linear-gradient(135deg, rgba(232,184,48,.22), rgba(193,154,74,.12));
  border: 1px solid rgba(232,184,48,.4);
  border-radius: 6px;
  font-family: 'Chewy', cursive;
  font-size: 13px;
  color: var(--copper-dark);
  text-align: center;
  animation: chip-pop .4s ease .2s backwards;
  letter-spacing: .5px;
}
.purse-best span{
  font-size: 16px;
  filter: saturate(1.2);
}
.purse-best-compare{
  margin-top: 7px;
  padding: 5px 8px;
  font-family: 'Delius', cursive;
  font-size: 11.5px;
  color: var(--ink-light);
  text-align: center;
  font-style: italic;
}
.purse-best-compare strong{
  color: var(--copper-dark);
  font-weight: 600;
  font-style: normal;
}

/* Returning-player intro: earnings summary */
.intro-earnings{
  margin-top: 10px;
  padding: 7px 10px;
  background: rgba(232,184,48,.1);
  border: 1px dashed rgba(193,154,74,.35);
  border-radius: 6px;
  text-align: center;
  font-family: 'Delius', cursive;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-light);
}
.intro-earnings .ie-label{
  margin-right: 5px;
}
.intro-earnings .ie-val{
  color: var(--copper-dark);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* =======================================================================
   v3.12 — multi-day infrastructure: interstitial modal
   ======================================================================= */

.interstitial-modal{
  max-width: 520px;
  padding: 36px 40px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(94,113,162,.1), transparent 60%),
    linear-gradient(180deg, #faf2de, #ede0c1);
  border: 2px solid rgba(94,113,162,.3);
}
.interstitial-modal .isl-moon{
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(94,113,162,.3));
  animation: moon-float 3.4s ease-in-out infinite;
}
@keyframes moon-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.interstitial-modal .isl-title{
  font-family: 'Chewy', cursive;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: .5px;
}
.interstitial-modal .isl-body{
  font-family: 'Delius', cursive;
  font-size: 14.5px;
  color: var(--ink-light);
  line-height: 1.55;
  margin-bottom: 22px;
}
.interstitial-modal .isl-body p{
  margin: 0 0 10px;
}
.interstitial-modal .isl-body em{
  color: var(--plum);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
}

/* v3.13 — interstitial two-button layout */
.interstitial-modal .isl-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.interstitial-modal .isl-actions .debrief-btn{
  flex: 1;
  min-width: 220px;
}