:root{
  --teal-dark:#0f2a2c;
  --teal:#173f42;
  --teal-mid:#2f6b66;
  --cream:#f7f4ec;
  --accent:#39796f;
  --accent-light:#a7d8cf;
  --danger:#b3432c;
  --warn:#c98a1b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--teal-dark);color:var(--cream);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
body{overflow:hidden;user-select:none}
[hidden]{display:none!important}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:28px 24px;gap:18px;text-align:center}
h1{font-size:clamp(34px,6vw,54px);margin:0}
h2{font-size:clamp(28px,5vw,44px);margin:0}
.lead{font-size:clamp(18px,3vw,24px);color:var(--accent-light);max-width:640px;margin:0}

.code-input{width:min(100%,520px);font-size:clamp(30px,6vw,46px);letter-spacing:6px;text-align:center;
  font-weight:800;padding:20px;border-radius:18px;border:3px solid #cfe0dc;background:#fff;color:#18222d;
  text-transform:uppercase}
.msg{min-height:30px;font-size:20px;font-weight:700;color:#ffb4a2}

.big-btn{border:none;border-radius:24px;padding:26px 36px;min-width:min(100%,420px);
  font-size:clamp(24px,4vw,34px);font-weight:800;background:var(--accent);color:#fff;cursor:pointer}
.big-btn:active{transform:scale(.98)}
.big-btn:disabled{opacity:.55}
.big-btn.live{background:var(--danger)}
.help-btn{border:3px solid #ffb4a2;border-radius:20px;padding:16px 26px;font-size:clamp(20px,3.2vw,26px);
  font-weight:800;background:transparent;color:#ffb4a2;cursor:pointer}
.link-btn{background:none;border:none;color:var(--accent-light);font-size:20px;font-weight:700;
  cursor:pointer;text-decoration:underline;padding:10px}
.link-btn.small{font-size:14px;opacity:.6}

.topbar{position:absolute;top:14px;left:18px;display:flex;align-items:center;gap:10px;font-size:16px;
  color:var(--accent-light)}
.dot{width:12px;height:12px;border-radius:50%;background:#7a8f8c}
.dot.on{background:#5ee0a0}
.dot.err{background:var(--danger)}

.hero{display:flex;flex-direction:column;align-items:center;gap:10px}
.avatar{position:relative;width:clamp(150px,28vh,230px);aspect-ratio:1;display:grid;place-items:center}
.avatar .face{width:78%;aspect-ratio:1;border-radius:50%;background:var(--cream);display:grid;
  place-items:center;font-size:clamp(70px,14vh,120px);z-index:2}
.avatar .ring{position:absolute;inset:0;border-radius:50%;border:6px solid var(--accent-light);opacity:.35}
.avatar.listening .ring{border-color:#5ee0a0;opacity:1;animation:pulse 1.4s ease-in-out infinite}
.avatar.speaking .ring{border-color:#ffd27a;opacity:1;animation:pulse .8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.state-label{font-size:clamp(20px,3.4vw,28px);margin:0;color:var(--accent-light);max-width:680px}

.subtitles{min-height:96px;max-width:860px;width:100%;font-size:clamp(22px,3.6vw,32px);line-height:1.35;
  font-weight:700;padding:0 8px}
.subtitles .you{color:var(--accent-light);font-size:.7em;font-weight:600;display:block}

.actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.footer{display:flex;gap:18px;align-items:center}

.meds-list{display:flex;flex-direction:column;gap:12px;width:min(100%,640px);max-height:60vh;overflow:auto}
.med{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--cream);
  color:#18222d;border-radius:18px;padding:16px 20px;font-size:22px;text-align:left}
.med small{display:block;font-size:16px;opacity:.7;font-weight:500}
.med .tag{font-weight:800;border-radius:12px;padding:6px 12px;font-size:16px;white-space:nowrap}
.tag.ok{background:#cfeedd;color:#1c6a40}
.tag.todo{background:#ffe3b0;color:#7a4b00}

/* ---- Lista medicine e acqua ---- */
#screenMeds{justify-content:flex-start;padding-top:22px}
.meds-list{max-height:none;flex:1;padding-bottom:12px}
.meds-list h3{margin:12px 0 0;text-align:left;font-size:22px;color:var(--accent-light)}
.summary{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sum{border-radius:16px;padding:10px 18px;font-size:22px;font-weight:800}
.sum.ok{background:#cfeedd;color:#1c6a40}
.sum.todo{background:#ffe3b0;color:#7a4b00}
.med{border-left:10px solid #9ab3ae}
.med.taken{border-left-color:#2e9e62}
.med.overdue{border-left-color:#d9822b;background:#fff3df}
.med.upcoming{border-left-color:#9ab3ae}
.take-btn{border:none;border-radius:16px;padding:14px 18px;font-size:18px;font-weight:800;background:var(--accent);
  color:#fff;cursor:pointer;max-width:48%}
.med.overdue .take-btn{background:#c4701c}
.take-btn:disabled{opacity:.5}
.water{background:var(--cream);color:#18222d;border-radius:18px;padding:18px 20px;display:flex;
  flex-direction:column;gap:12px;align-items:stretch;text-align:center}
.water .take-btn{max-width:none;width:100%}
.water-num{font-size:30px;font-weight:800}
.bar{height:20px;background:#dde7e4;border-radius:12px;overflow:hidden}
.fill{height:100%;background:#3a9bd6;border-radius:12px;transition:width .4s}

/* ---- Tablet in orizzontale: medicine e acqua sempre visibili a lato ---- */
.side-col{display:none}
@media (orientation: landscape) and (min-width: 800px){
  #screenMain{flex-direction:row;align-items:stretch;justify-content:center;gap:28px;padding:20px 28px}
  .main-col{flex:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0}
  .side-col{display:flex;flex:1;max-width:540px;flex-direction:column;gap:10px;overflow:hidden;
    background:rgba(255,255,255,.06);border-radius:28px;padding:18px 16px 12px}
  .side-title{margin:0;font-size:26px;text-align:left;color:var(--cream)}
  .side-col .meds-list{width:100%;overflow:auto;flex:1;padding-bottom:6px}
  .side-col .med{font-size:20px;padding:12px 14px}
  .side-col .take-btn{font-size:16px;padding:12px 14px}
  .side-col .water-num{font-size:24px}
  #medsBtn{display:none}
  .hero .avatar{width:clamp(130px,26vh,200px)}
  .subtitles{min-height:70px;font-size:clamp(20px,3vw,28px)}
}
.water.compact{padding:10px 14px;gap:8px;border-radius:16px}
.water.compact .water-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.water.compact .water-num{font-size:22px}
.water.compact .take-btn{width:auto;max-width:none;padding:10px 16px;font-size:18px;background:#3a9bd6}
.water.compact .bar{height:14px}

/* ---- Attivazione assistente ---- */
.arm-overlay{position:fixed;inset:0;z-index:50;background:rgba(15,42,44,.97);display:grid;place-items:center;padding:24px}
.arm-box{max-width:620px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.arm-box h2{margin:0}
.arm-box p{font-size:clamp(18px,3vw,24px);color:var(--accent-light);margin:0}
.arm-face{font-size:clamp(70px,16vh,120px)}
.footer{flex-wrap:wrap;justify-content:center}